|
@@ -117,7 +117,7 @@
|
|
|
{{video.videoName}}
|
|
|
</a-select-option>
|
|
|
</a-select> -->
|
|
|
-
|
|
|
+
|
|
|
<!-- 修改为弹窗形式 -->
|
|
|
<div>
|
|
|
<a type="primary" @click="showModalVideo">点击选中已上传作品</a>
|
|
@@ -129,15 +129,15 @@
|
|
|
@cancel="handleCancelVideo"
|
|
|
>
|
|
|
<template>
|
|
|
- <a-radio-group @change="getDescription" 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>
|
|
|
+ <a-radio-group @change="getDescription" 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>
|
|
@@ -194,19 +194,19 @@
|
|
|
<br/>
|
|
|
<br/>
|
|
|
<div class="image_item_container">
|
|
|
- <div v-for="(item ,index) in imageList" class="image_item" :key="index">
|
|
|
- <label :for="item.id" class="label_item">
|
|
|
+ <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">
|
|
|
+ <input class="checkItem" type="checkbox" v-model="checkeds" :value="item.id"
|
|
|
+ @onClick="checkeda(item.id)"
|
|
|
+ @change="changChecked" :id="item.id">
|
|
|
</p>
|
|
|
- </label>
|
|
|
+ </label>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
+
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
</div>
|
|
@@ -333,9 +333,9 @@
|
|
|
videoUrl: '',// 视频id
|
|
|
videoList: [],
|
|
|
radioStyle: { // 视频单选样式
|
|
|
- display: 'block',
|
|
|
- height: '30px',
|
|
|
- lineHeight: '30px',
|
|
|
+ display: 'block',
|
|
|
+ height: '30px',
|
|
|
+ lineHeight: '30px',
|
|
|
},
|
|
|
showUploadType: true,
|
|
|
localImageUrl: '',//图片地址
|
|
@@ -423,7 +423,7 @@
|
|
|
}
|
|
|
},
|
|
|
showModal() {
|
|
|
- this.visible = true;
|
|
|
+ this.visible = true;
|
|
|
},
|
|
|
|
|
|
// 上传视频弹窗
|
|
@@ -431,44 +431,43 @@
|
|
|
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));
|
|
|
+ // 播放当前视频停止其他视频
|
|
|
+ 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 = "";
|
|
|
+ handleCancelVideo() {
|
|
|
+ this.closeAllVideoFun();
|
|
|
+ this.videoUrl = "";
|
|
|
},
|
|
|
|
|
|
// 停止播放所有视频
|
|
|
- closeAllVideoFun(){
|
|
|
- let videos = jq("video");
|
|
|
- let videosArr = Array.prototype.slice.call(videos);
|
|
|
- videosArr.forEach((x)=>{
|
|
|
- x.pause();
|
|
|
- });
|
|
|
+ closeAllVideoFun() {
|
|
|
+ let videos = jq("video");
|
|
|
+ let videosArr = Array.prototype.slice.call(videos);
|
|
|
+ videosArr.forEach((x) => {
|
|
|
+ x.pause();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
changChecked() {
|
|
@@ -578,6 +577,9 @@
|
|
|
getAction(this.url.videoListUrl, params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.videoList = res.result.records
|
|
|
+ if (this.videoList.length > 0) {
|
|
|
+ this.videoUrl = this.videoList[0].localUrl;
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
getAction(this.url.imageListUrl, params).then((res) => {
|
|
@@ -634,7 +636,7 @@
|
|
|
handleSubmit(e) {
|
|
|
console.log(this.imageIds);
|
|
|
console.log(this.imageUrl)
|
|
|
-
|
|
|
+
|
|
|
e.preventDefault()
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
@@ -653,7 +655,7 @@
|
|
|
} else if (this.videoUploadType == '2') {
|
|
|
params.videoUrl = this.localUrl;
|
|
|
}
|
|
|
- console.log("-----------------------");
|
|
|
+ console.log("-----------------------");
|
|
|
|
|
|
console.log(params.videoUrl);
|
|
|
params.imageUrl = this.imageUrl;
|
|
@@ -744,8 +746,9 @@
|
|
|
getAction(this.url.videoListUrl, params).then((res) => {
|
|
|
if (res.success) {
|
|
|
this.videoList = res.result.records
|
|
|
- console.log("......")
|
|
|
- console.log(this.videoList)
|
|
|
+ if (this.videoList.length > 0) {
|
|
|
+ this.videoUrl = this.videoList[0].localUrl;
|
|
|
+ }
|
|
|
}
|
|
|
});
|
|
|
|
|
@@ -765,33 +768,50 @@
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.ant-modal-body {
|
|
|
+ .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%;}
|
|
|
+
|
|
|
+ .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%;}
|
|
|
+
|
|
|
+ .video_item_container {
|
|
|
+ .video {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-}
|
|
|
+ }
|
|
|
</style>
|