|
@@ -103,7 +103,7 @@
|
|
|
v-if="selectVideoUpload"
|
|
|
:labelCol="labelCol"
|
|
|
:wrapperCol="wrapperCol">
|
|
|
- <a-select
|
|
|
+ <!-- <a-select
|
|
|
v-model="videoUrl"
|
|
|
@change="getDescription"
|
|
|
showSearch
|
|
@@ -116,7 +116,45 @@
|
|
|
<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>
|
|
|
+ <div class="image_item_container video_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-checkbox @change="onChange" class="checkItem" :value="video.localUrl"
|
|
|
+ @onClick="checkeda(video.id)" :key="video.localUrl">
|
|
|
+ </a-checkbox>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template> -->
|
|
|
+ <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" style="width
|
|
|
+ 100%">
|
|
|
+ 您的浏览器不支持 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 +190,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="选择封面"
|
|
@@ -175,7 +197,7 @@
|
|
|
:wrapperCol="wrapperCol">
|
|
|
<div>
|
|
|
<a type="primary" @click="showModal">点击选中已上传封面</a>
|
|
|
- <a-modal class="select_cover_modal"
|
|
|
+ <a-modal
|
|
|
title="选择封面"
|
|
|
v-model="visible"
|
|
|
@ok="handleOk"
|
|
@@ -324,6 +346,11 @@
|
|
|
selectVideoUpload: true,
|
|
|
videoUrl: '',// 视频id
|
|
|
videoList: [],
|
|
|
+ radioStyle: { // 视频单选样式
|
|
|
+ display: 'block',
|
|
|
+ height: '30px',
|
|
|
+ lineHeight: '30px',
|
|
|
+ },
|
|
|
showUploadType: true,
|
|
|
localImageUrl: '',//图片地址
|
|
|
showImageUpload: false,
|
|
@@ -339,6 +366,7 @@
|
|
|
showLocalImageUpload: false,
|
|
|
showUploadImageRadio: true,
|
|
|
visible: false,
|
|
|
+ visibleVideo: false,
|
|
|
isAllChecked: false,
|
|
|
checkeds: [],
|
|
|
customDomain: '',
|
|
@@ -395,6 +423,7 @@
|
|
|
console.log(e);
|
|
|
this.visible = false;
|
|
|
this.imageUrl = [];
|
|
|
+ this.videoList = [];
|
|
|
if (this.checkeds.length > 0) {
|
|
|
for (let i = 0; i < this.checkeds.length; i++) {
|
|
|
let imageId = this.checkeds[i];
|
|
@@ -409,7 +438,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;
|
|
|
+ console.log(this.videoUrl);
|
|
|
+
|
|
|
+ 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();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 停止播放所有视频
|
|
|
+ closeAllVideoFun(){
|
|
|
+ let videos = jq("video");
|
|
|
+ let videosArr = Array.prototype.slice.call(videos);
|
|
|
+ videosArr.forEach((x)=>{
|
|
|
+ x.pause();
|
|
|
+ });
|
|
|
},
|
|
|
|
|
|
changChecked() {
|
|
@@ -575,7 +649,7 @@
|
|
|
handleSubmit(e) {
|
|
|
console.log(this.imageIds);
|
|
|
console.log(this.imageUrl)
|
|
|
- console.log(this.localUrl)
|
|
|
+
|
|
|
e.preventDefault()
|
|
|
this.form.validateFields((err, values) => {
|
|
|
if (!err) {
|
|
@@ -594,6 +668,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;
|
|
@@ -658,9 +735,9 @@
|
|
|
this.options = res
|
|
|
console.log(res)
|
|
|
});
|
|
|
- }
|
|
|
- }
|
|
|
- ,
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
|
|
|
created: function () {
|
|
|
let params = {};
|
|
@@ -703,31 +780,33 @@
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.select_cover_modal {
|
|
|
- .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;}
|
|
|
- }
|
|
|
+.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>
|