页面修改

src/components/commonPage/DMCchooseImg.vue

 <style>
-.DMCchooseImg .resAddImg {
+  .DMCchooseImg .resAddImg {
     width: 520px;
     padding-right: 45px;
     margin-top: 15px;
-}
-.DMCchooseImg .resource-name {
+  }
+
+  .DMCchooseImg .resource-name {
     height: 34px;
     background: rgba(255, 255, 255, 1);
     outline: none;
     border: 1px solid #d6d6d6;
     padding-left: 10px;
-}
-.DMCchooseImg .search-imgicon {
+  }
+
+  .DMCchooseImg .search-imgicon {
     padding-right: 20px;
     margin-left: -40px;
-}
-.DMCchooseImg .searchImgIcon {
+  }
+
+  .DMCchooseImg .searchImgIcon {
     cursor: pointer;
-}
-.DMCchooseImg .addimgContent {
+  }
+
+  .DMCchooseImg .addimgContent {
     height: 290px;
     overflow: auto;
     margin: 30px 0 20px 25px;
     width: 560px;
-}
-.DMCchooseImg .addimgDiv {
+  }
+
+  .DMCchooseImg .addimgDiv {
     width: 160px;
     height: 155px;
     float: left;
     margin: 0 20px 15px 0;
     overflow: hidden;
-}
-.DMCchooseImg .addimgContent div:first-child {
+  }
+
+  .DMCchooseImg .addimgContent div:first-child {
     margin-left: 0;
-}
-.addimgContent div:nth-child(3n) {
+  }
+
+  .addimgContent div:nth-child(3n) {
     margin-right: 0;
-}
-.DMCchooseImg .test-1::-webkit-scrollbar {
+  }
+
+  .DMCchooseImg .test-1::-webkit-scrollbar {
     width: 0px;
     height: 0px;
     background-color: #f5f5f5;
-}
-.DMCchooseImg .test-1::-webkit-scrollbar-track {
+  }
+
+  .DMCchooseImg .test-1::-webkit-scrollbar-track {
     background-color: #f5f5f5;
-}
-.DMCchooseImg .test-1::-webkit-scrollbar-thumb {
+  }
+
+  .DMCchooseImg .test-1::-webkit-scrollbar-thumb {
     border-radius: 20px;
     background-color: #aaa;
     margin-bottom: 24px;
-}
-.DMCchooseImg .test-1:hover::-webkit-scrollbar {
+  }
+
+  .DMCchooseImg .test-1:hover::-webkit-scrollbar {
     width: 4px;
     height: 4px;
     background-color: #f5f5f5;
-}
-.DMCchooseImg .itemImgdiv {
+  }
+
+  .DMCchooseImg .itemImgdiv {
     width: 160px;
     height: 106px;
     position: relative;
-}
-.DMCchooseImg .itemImgdiv img {
+  }
+
+  .DMCchooseImg .itemImgdiv img {
     width: 100%;
     height: 100%;
     border-radius: 10px;
-}
-.DMCchooseImg .imgseclet {
+  }
+
+  .DMCchooseImg .imgseclet {
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
@@ -75,35 +89,40 @@
     text-align: center;
     line-height: 106px;
     color: #e95252;
-}
-.DMCchooseImg .addimg-btnlist {
+  }
+
+  .DMCchooseImg .addimg-btnlist {
     text-align: center;
-}
-.DMCchooseImg .addimg-select {
+  }
+
+  .DMCchooseImg .addimg-select {
     font-size: 14px;
     color: #999999;
     float: right;
     margin-bottom: 10px;
     position: relative;
     bottom: 20px;
-}
-.DMCchooseImg .save-Btn {
+  }
+
+  .DMCchooseImg .save-Btn {
     width: 90px;
     height: 30px;
     background: rgba(233, 82, 82, 1);
     border-radius: 15px;
     color: #fff;
     outline: none;
-  border:none;
-  border: 1px solid #e95252!important;
+    border: none;
+    border: 1px solid #e95252 !important;
     cursor: pointer;
     margin-right: 20px;
-}
-.DMCchooseImg .cancel-Btn,
-.save-Btn:hover {
+  }
+
+  .DMCchooseImg .cancel-Btn,
+  .save-Btn:hover {
     opacity: 0.8;
-}
-.DMCchooseImg .cancel-Btn {
+  }
+
+  .DMCchooseImg .cancel-Btn {
     width: 90px;
     height: 30px;
     background: rgba(255, 255, 255, 1);
@@ -111,28 +130,35 @@
     color: #e95252;
     outline: none;
     cursor: pointer;
-  border: 1px solid #e95252!important;
-}
-.DMCchooseImg .el-pagination__total{display:none!important;}
-.DMC_addContent{
-  width:160;
-  height:106px;
-  border-radius:10px;
+    border: 1px solid #e95252 !important;
+  }
+
+  .DMCchooseImg .el-pagination__total {
+    display: none !important;
+  }
+
+  .DMC_addContent {
+    width: 160;
+    height: 106px;
+    border-radius: 10px;
     background-color: rgba(236, 236, 236, 1);
-  color:#fff;
+    color: #fff;
     position: relative;
-}
-.DMC_addContent .el-upload{
-  width:100%;
-  height:105px;
-}
-.DMC_addContent i{
+  }
+
+  .DMC_addContent .el-upload {
+    width: 100%;
+    height: 105px;
+  }
+
+  .DMC_addContent i {
     font-size: 50px;
     color: #d1d1d1;
     position: relative;
     left: 0;
     top: 20px;
-}
+  }
+
 </style>
 <template>
   <div class="DMCchooseImg">
@@ -144,21 +170,23 @@
     </div>
     <div v-if="activeName=='first'">
       <span style="margin-left:24px;">
-            <input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="getList" placeholder="请输入关键字"/>
+        <input type="text" class="resource-name resAddImg" v-model="queryMsg.Name" @keyup.enter="getList"
+          placeholder="请输入关键字" />
         <span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getList"></i></span>
       </span>
       <div class="addimgContent test-1">
-              <div class="addimgDiv" v-for="(item,index) in imglistArry" :key="item.subCode" v-if="item.isShowImgDiv&&item.Path!=null">
+        <div class="addimgDiv" v-for="(item,index) in imglistArry" :key="item.subCode"
+          v-if="item.isShowImgDiv&&item.Path!=null">
           <div class="itemImgdiv" @click="selectImg(index)">
-                      <img :src='compressImg(item.Path, "filt", 160, "")' @error="imgError(item)"/>
+            <img :src='compressImg(item.Path, "filt", 160, "")' @error="imgError(item)" />
             <div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
           </div>
           <div class="imgDescription">{{item.Name}}</div>
         </div>
-              <div class="addimgDiv" v-if="IsShowAdd" >
+        <div class="addimgDiv" v-if="IsShowAdd">
           <div class="DMC_addContent">
-                      <el-upload class="upload-demo" :http-request="UploadImage" :multiple="false" accept="image/jpeg,image/gif,image/png,image/bmp"
-                        :show-file-list="false" action="">
+            <el-upload class="upload-demo" :http-request="UploadImage" :multiple="false"
+              accept="image/jpeg,image/gif,image/png,image/bmp" :show-file-list="false" action="">
               <i class="iconfont icon-img_haha"></i>
             </el-upload>
           </div>
@@ -169,23 +197,21 @@
         <input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
       </div>
       <span class="addimg-select">已选择<span style="color:#E95252;"><span>{{selectImgArr.length}}</span></span>张图片</span>
-          <el-pagination 
-              background
-              @current-change="handleCurrentChange"
-              :current-page.sync="queryMsg.currentPage" 
-              :page-size="queryMsg.pageSize" 
-              layout="total,prev, pager, next, jumper" :total="queryMsg.total">
+      <el-pagination background @current-change="handleCurrentChange" :current-page.sync="queryMsg.currentPage"
+        :page-size="queryMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queryMsg.total">
       </el-pagination>
     </div>
     <div v-else>
       <span style="margin-left:24px;">
-            <input type="text" class="resource-name resAddImg" v-model="queVideoMsg.Name" @keyup.enter="getVideoList" placeholder="请输入关键字"/>
+        <input type="text" class="resource-name resAddImg" v-model="queVideoMsg.Name" @keyup.enter="getVideoList"
+          placeholder="请输入关键字" />
         <span class="search-imgicon"><i class="iconfont icon-img_cz searchImgIcon" @click="getVideoList"></i></span>
       </span>
       <div class="addimgContent test-1">
-              <div class="addimgDiv" v-for="(item,index) in videoListArray" :key="item.subCode" v-if="item.isShowImgDiv&&item.Cover!=null">
+        <div class="addimgDiv" v-for="(item,index) in videoListArray" :key="item.subCode"
+          v-if="item.isShowImgDiv&&item.VideoCover!=null">
           <div class="itemImgdiv" @click="selectVideo(index)">
-                      <img :src='item.Cover' @error="imgError(item)"/>
+            <img :src='item.VideoCover' @error="imgError(item)" />
             <div class="imgseclet" v-show="item.isShow"><i class="iconfont icon-dagouyouquan"></i></div>
           </div>
           <div class="imgDescription">{{item.Name}}</div>
@@ -195,21 +221,18 @@
         <input type="button" class="save-Btn" @click="chkedVideoList()" value="确定" />
         <input type="button" class="cancel-Btn" @click="closeDialog()" value="取消" />
       </div>
-          <span class="addimg-select">已选择<span style="color:#E95252;"><span>{{selectVideoArr.length}}</span></span>个视频</span>
-          <el-pagination 
-              background
-              @current-change="videoCurrentChange"
-              :current-page.sync="queVideoMsg.currentPage" 
-              :page-size="queVideoMsg.pageSize" 
-              layout="total,prev, pager, next, jumper" :total="queVideoMsg.total">
+      <span class="addimg-select">已选择<span
+          style="color:#E95252;"><span>{{selectVideoArr.length}}</span></span>个视频</span>
+      <el-pagination background @current-change="videoCurrentChange" :current-page.sync="queVideoMsg.currentPage"
+        :page-size="queVideoMsg.pageSize" layout="total,prev, pager, next, jumper" :total="queVideoMsg.total">
       </el-pagination>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  props: ["imgType", "isCheckmore",'queryItem','IsShowAdd','IsShowVideo'],
+  export default {
+    props: ["imgType", "isCheckmore", 'queryItem', 'IsShowAdd', 'IsShowVideo'],
     data() {
       return {
         queryMsg: {
@@ -217,26 +240,26 @@ export default {
           pageIndex: 1,
           currentPage: 1,
           total: 0,
-        Type: 1,//1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
-        Name: "",//资源图片名称
-        SourceId:0//资源编号
+          Type: 1, //1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店
+          Name: "", //资源图片名称
+          SourceId: 0 //资源编号
         },
         //显示数组
         imglistArry: [],
         //选中显示数组
         selectImgArr: [],
-      activeName:'first',
+        activeName: 'first',
 
-      queVideoMsg:{
+        queVideoMsg: {
           pageSize: 10,
           pageIndex: 1,
-        Name:'',
-        currentPage:1,
+          Name: '',
+          currentPage: 1,
           total: 0
         },
-      videoListArray:[],
+        videoListArray: [],
         //选中视频数组
-      selectVideoArr:[],
+        selectVideoArr: [],
       };
     },
     methods: {
@@ -249,7 +272,7 @@ export default {
           res => {
             if (res.data.resultCode == 1) {
               this.imglistArry = res.data.data.pageData;
-            this.imglistArry.forEach(x=>{
+              this.imglistArry.forEach(x => {
                 x.isShowImgDiv = true;
               })
               this.queryMsg.total = res.data.data.count;
@@ -263,8 +286,8 @@ export default {
           selImg.isShow = false;
         });
         this.selectImgArr = [];
-      this.queryMsg.Name='';
-      this.queryMsg.SourceId=0;
+        this.queryMsg.Name = '';
+        this.queryMsg.SourceId = 0;
         this.$emit("closeImg");
 
         //关闭清除选中视频
@@ -272,14 +295,14 @@ export default {
           selvideo.isShow = false;
         });
         this.selectVideoArr = [];
-      this.queVideoMsg.Name='';
+        this.queVideoMsg.Name = '';
       },
       sendMsg() {},
       handleCurrentChange(val) {
         this.queryMsg.pageIndex = val;
         this.getList();
       },
-    videoCurrentChange(val){
+      videoCurrentChange(val) {
         this.queVideoMsg.pageIndex = val;
         this.getVideoList();
       },
@@ -306,14 +329,13 @@ export default {
         }
       },
       //选中视频方法
-    selectVideo(index){
+      selectVideo(index) {
         this.videoListArray.forEach(item => {
           item.isShow = false;
         });
         this.videoListArray[index].isShow = true;
         this.selectVideoArr = [];
         this.selectVideoArr.push(this.videoListArray[index]);
-        console.log(this.selectVideoArr,'this.selectVideoArr');
       },
       //删除选中图片
       removeImg() {
@@ -336,8 +358,8 @@ export default {
         this.selectImgArr = [];
       },
       //无效路径整个div不显示
-    imgError(item){
-      item.isShowImgDiv=false;
+      imgError(item) {
+        item.isShowImgDiv = false;
         this.$forceUpdate();
       },
       //上传图片
@@ -358,10 +380,10 @@ export default {
       //上传图片方法
       uploadImageFile(Path) {
         let msg = {
-        SourceId:this.queryMsg.SourceId,
+          SourceId: this.queryMsg.SourceId,
           ResourceType: this.imgType,
-        PicPath:Path,
-        imageName:this.queryMsg.Name
+          PicPath: Path,
+          imageName: this.queryMsg.Name
         };
         this.apipost(
           "dmcimg_post_SetDmcImage",
@@ -374,42 +396,38 @@ export default {
           null
         );
       },
-    getQueryItem(){
-      if(this.queryItem && this.queryItem.queryName!=undefined){
+      getQueryItem() {
+        if (this.queryItem && this.queryItem.queryName != undefined) {
           this.queryMsg.Name = this.queryItem.queryName;
-        this.queryMsg.SourceId=this.queryItem.queryId;
-
-        this.queVideoMsg.Name=this.queryItem.queryName;
-      }else{
+          this.queryMsg.SourceId = this.queryItem.queryId;
+          this.queVideoMsg.Name = this.queryItem.queryName;
+        } else {
           this.queryMsg.Name = '';
-        this.queryMsg.SourceId=0;
+          this.queryMsg.SourceId = 0;
         }
       },
-
       //点击切换
-    handleClick(tab,event){
-      if(this.activeName=='first'){
+      handleClick(tab, event) {
+        if (this.activeName == 'first') {
           this.getList();
-      }else{
+        } else {
           this.getVideoList();
         }
-      
       },
       //获取视频列表数据
-    getVideoList(){
+      getVideoList() {
         this.apipost(
           "Video_get_GetTripVideoPageListService",
           this.queVideoMsg,
           res => {
             if (res.data.resultCode == 1) {
-            this.videoListArray=res.data.data.pageData;
+              this.videoListArray = res.data.data.pageData;
               this.queVideoMsg.total = res.data.data.count;
-
-            this.videoListArray.forEach(x=>{
+              this.videoListArray.forEach(x => {
                 x.isShowImgDiv = true;
-              x.isShow=false;
+                x.isShow = false;
               })
-          }else{
+            } else {
               this.Error(res.data.message);
             }
           },
@@ -417,8 +435,14 @@ export default {
         );
       },
       //点击确定选择
-    chkedVideoList(){
-
+      chkedVideoList() {
+        this.$emit("headCallBack", this.videoListArray);
+        this.$emit("closeImg");
+        this.videoListArray.forEach(x => {
+          x.isShowImgDiv = true;
+          x.isShow = false;
+        })
+        this.videoListArray = [];
       }
     },
     created() {},
@@ -438,5 +462,6 @@ export default {
       }
     }
 
-};
+  };
+
 </script>

src/components/newTravelmanager/TravelTripPreview/onedayList.vue

@@ -127,12 +127,17 @@
       //获取选择的图片
       getDMCimg(imgArr) {
         var that = this;
+        console.log("imgArr",imgArr)
         imgArr.forEach(imgItem => {
           var obj = {
             Name: imgItem.Name,
             Url: imgItem.Path,
             fileName: imgItem.Name
           };
+          if(imgItem.VideoCover)
+          {
+            obj.VideoCover=imgItem.VideoCover;
+          }
           that.scenicArray[0].NewImaArray = [];
           that.scenicArray[0].NewImaArray.push(obj);
           that.scenicArray[0].NewScenicImg = JSON.stringify(that.scenicArray[0].NewImaArray);