|
@@ -103,7 +103,7 @@
|
|
|
v-if="selectVideoUpload"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-select
|
|
|
+ <!-- <a-select
|
|
|
v-model="videoUrl"
|
|
|
@change="getDescription"
|
|
|
showSearch
|
|
@@ -116,7 +116,31 @@
|
|
|
<a-select-option v-for="video in videoList" :key="video.localUrl" :value="video.localUrl">
|
|
|
{{video.videoName}}
|
|
|
</a-select-option>
|
|
|
- </a-select>
|
|
|
+ </a-select> -->
|
|
|
+
|
|
|
+ <!-- 修改为弹窗形式 -->
|
|
|
+ <div>
|
|
|
+ <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
|
|
|
+ <a-modal
|
|
|
+ title="选择作品"
|
|
|
+ v-model="visibleVideo"
|
|
|
+ @ok="handleOkVideo"
|
|
|
+ :width="860"
|
|
|
+ @cancel="handleCancelVideo"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <a-radio-group @change="onChange" v-model="videoUrl" class="image_item_container">
|
|
|
+ <div class="image_item" v-for="(video,index) of videoList" :key="index">
|
|
|
+ <video class="video" :src="video.localUrl" controls="controls" id="video">
|
|
|
+ 您的浏览器不支持 video 标签。
|
|
|
+ </video>
|
|
|
+ <div class="item_text">{{video.videoName}}</div>
|
|
|
+ <a-radio :style="radioStyle" :value="video.localUrl"></a-radio>
|
|
|
+ </div>
|
|
|
+ </a-radio-group>
|
|
|
+ </template>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
@@ -152,22 +176,6 @@
|
|
|
</a-form-item>
|
|
|
|
|
|
|
|
|
- <!-- <a-select
|
|
|
- v-model="imageUrl"
|
|
|
- showSearch
|
|
|
- allowClear
|
|
|
- mode="multiple"
|
|
|
- placeholder="选择视频封面"
|
|
|
- optionFilterProp="children"
|
|
|
- style="width: 650px"
|
|
|
- @focus="handleFocus"
|
|
|
- @blur="handleBlur"
|
|
|
- :filterOption="filterOption">
|
|
|
- <a-select-option v-for="image in imageList" :key="image.localUrl" :value="image.localUrl">
|
|
|
- {{image.imageName}}
|
|
|
- </a-select-option>
|
|
|
- </a-select>-->
|
|
|
-
|
|
|
<a-form-item
|
|
|
v-if="showCover"
|
|
|
label="选择封面"
|
|
@@ -180,23 +188,25 @@
|
|
|
v-model="visible"
|
|
|
@ok="handleOk"
|
|
|
:width="860"
|
|
|
- style="height:650px;overflow-y:auto"
|
|
|
>
|
|
|
<template>
|
|
|
- <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)"> 全选
|
|
|
+ <input v-model='isAllChecked' type="checkbox" @click="checkAll($event)" class="select_all"> 全选
|
|
|
<br/>
|
|
|
<br/>
|
|
|
- <div v-for="(item ,index) in imageList" style="display:inline-block;width:20%">
|
|
|
- <a href="javascript:">
|
|
|
- <img :src="item.src" alt="" height="100">
|
|
|
- <p>{{item.name}}</p>
|
|
|
- <p>
|
|
|
- <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
|
|
|
- @onClick="checkeda(item.id)"
|
|
|
- @change="changChecked">
|
|
|
- </p>
|
|
|
- </a>
|
|
|
+ <div class="image_item_container">
|
|
|
+ <div v-for="(item ,index) in imageList" class="image_item" :key="index">
|
|
|
+ <label :for="item.id" class="label_item">
|
|
|
+ <img :src="item.src" alt="" class="item_img">
|
|
|
+ <p class="item_text">{{item.name}}</p>
|
|
|
+ <p class="item_checkbox">
|
|
|
+ <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
|
|
|
+ @onClick="checkeda(item.id)"
|
|
|
+ @change="changChecked" :id="item.id">
|
|
|
+ </p>
|
|
|
+ </label>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</div>
|
|
@@ -322,6 +332,11 @@
|
|
|
selectVideoUpload: true,
|
|
|
videoUrl: '',// 视频id
|
|
|
videoList: [],
|
|
|
+ radioStyle: { // 视频单选样式
|
|
|
+ display: 'block',
|
|
|
+ height: '30px',
|
|
|
+ lineHeight: '30px',
|
|
|
+ },
|
|
|
showUploadType: true,
|
|
|
localImageUrl: '',//图片地址
|
|
|
showImageUpload: false,
|
|
@@ -337,6 +352,7 @@
|
|
|
showLocalImageUpload: false,
|
|
|
showUploadImageRadio: true,
|
|
|
visible: false,
|
|
|
+ visibleVideo: false,
|
|
|
isAllChecked: false,
|
|
|
checkeds: [],
|
|
|
customDomain: '',
|
|
@@ -407,7 +423,52 @@
|
|
|
}
|
|
|
},
|
|
|
showModal() {
|
|
|
- this.visible = true
|
|
|
+ this.visible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传视频弹窗
|
|
|
+ handleOkVideo(e) {
|
|
|
+ console.log(e);
|
|
|
+ console.log(this.videoUrl);
|
|
|
+ this.visibleVideo = false;
|
|
|
+
|
|
|
+ this.closeAllVideoFun();
|
|
|
+
|
|
|
+ },
|
|
|
+ showModalVideo() {
|
|
|
+ this.visibleVideo = true;
|
|
|
+
|
|
|
+ // 设置默认选中的视频
|
|
|
+ this.videoUrl = this.videoList[0].localUrl;
|
|
|
+
|
|
|
+ jq(document).ready(function () {
|
|
|
+ // 播放当前视频停止其他视频
|
|
|
+ let videos = jq("video");
|
|
|
+ function pauseAll() {
|
|
|
+ let self = this;
|
|
|
+ [].forEach.call(videos, (i)=> {
|
|
|
+ // 将 videos 中其他的 video 全部暂停
|
|
|
+ i !== self && i.pause();
|
|
|
+ });
|
|
|
+ };
|
|
|
+ // 给play事件绑定暂停函数
|
|
|
+ [].forEach.call(videos, (i)=> {
|
|
|
+ i.addEventListener("play", pauseAll.bind(i));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ handleCancelVideo(){
|
|
|
+ this.closeAllVideoFun();
|
|
|
+ this.videoUrl = "";
|
|
|
+ },
|
|
|
+
|
|
|
+ // 停止播放所有视频
|
|
|
+ closeAllVideoFun(){
|
|
|
+ let videos = jq("video");
|
|
|
+ let videosArr = Array.prototype.slice.call(videos);
|
|
|
+ videosArr.forEach((x)=>{
|
|
|
+ x.pause();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
changChecked() {
|
|
@@ -573,7 +634,7 @@
|
|
|
handleSubmit(e) {
|
|
|
console.log(this.imageIds);
|
|
|
console.log(this.imageUrl)
|
|
|
- console.log(this.localUrl)
|
|
|
+
|
|
|
e.preventDefault()
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
@@ -592,6 +653,9 @@
|
|
|
} else if (this.videoUploadType == '2') {
|
|
|
params.videoUrl = this.localUrl;
|
|
|
}
|
|
|
+ console.log("-----------------------");
|
|
|
+
|
|
|
+ console.log(params.videoUrl);
|
|
|
params.imageUrl = this.imageUrl;
|
|
|
console.log(this.imageUrl)
|
|
|
params.actionBarText = this.actionBarTextDesc;
|
|
@@ -656,9 +720,9 @@
|
|
|
this.options = res
|
|
|
console.log(res)
|
|
|
});
|
|
|
- }
|
|
|
- }
|
|
|
- ,
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
created: function () {
|
|
|
let params = {};
|
|
@@ -698,3 +762,36 @@
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
+
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.ant-modal-body {
|
|
|
+ height: 650px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .image_item_container{
|
|
|
+ margin: 0 -10px;
|
|
|
+ .image_item {
|
|
|
+ display: inline-block;
|
|
|
+ width: 20%;
|
|
|
+ padding: 0 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .label_item {
|
|
|
+ display: block;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+
|
|
|
+ .item_img {
|
|
|
+ width: 100%;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .item_text{height: 42px;overflow: hidden;margin-bottom: 0;}
|
|
|
+ .item_checkbox{margin-bottom: 0;}
|
|
|
+ .video{width:100%;}
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .video_item_container{
|
|
|
+ .video{width: 100%;}
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|