页面修改

src/components/commonPage/DMCchooseImg.vue

@@ -426,7 +426,8 @@
               this.videoListArray.forEach(x => {
                 x.isShowImgDiv = true;
                 x.isShow = false;
-              })
+                x.FileType=".mp4"
+              });
             } else {
               this.Error(res.data.message);
             }

src/components/newTravelmanager/TravelTripPreview/fivedayList.vue

@@ -256,7 +256,8 @@
     <el-dialog custom-class="TC_comDMCchoose" title="选择图片" center :visible.sync="isShowScenicImg">
       <!--imgType:1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店,isCheckmore:是否多选图片-->
       <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg"
-        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true" v-bind:IsShowVideo="true"></DMCchooseImg>
+        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true"
+        v-bind:IsShowVideo="true"></DMCchooseImg>
     </el-dialog>
   </div>
 </template>
@@ -325,6 +326,12 @@
             Name: imgItem.Name,
             fileName: imgItem.Name
           };
+          if (imgItem.VideoPath) {
+            obj.VideoPath = imgItem.VideoPath;
+          }
+          if (imgItem.FileType) {
+            obj.FileType = imgItem.FileType;
+          }
           var array = [];
           array.push(obj);
           this.ClickItem.NewImaArray = array;
@@ -361,11 +368,7 @@
       DMCchooseImg,
       VueDraggableResizable
     },
-    created() {
-      // this.scenicArray.forEach(x=>{
-      //   x.ScenicJson = typeof(x.ScenicJsonStr) === 'string' ? JSON.parse(x.ScenicJsonStr) : { x:0, y:0 };
-      // })
-    },
+    created() {},
   };
 
 </script>

src/components/newTravelmanager/TravelTripPreview/fourdayList.vue

@@ -229,7 +229,8 @@
     <el-dialog custom-class="TC_comDMCchoose" title="选择图片" center :visible.sync="isShowScenicImg">
       <!--imgType:1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店,isCheckmore:是否多选图片-->
       <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg"
-        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true" v-bind:IsShowVideo="true"></DMCchooseImg>
+        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true"
+        v-bind:IsShowVideo="true"></DMCchooseImg>
     </el-dialog>
   </div>
 </template>
@@ -298,6 +299,12 @@
             Name: imgItem.Name,
             fileName: imgItem.Name
           };
+          if (imgItem.VideoPath) {
+            obj.VideoPath = imgItem.VideoPath;
+          }
+          if (imgItem.FileType) {
+            obj.FileType = imgItem.FileType;
+          }
           var array = [];
           array.push(obj);
           this.ClickItem.NewImaArray = array;

src/components/newTravelmanager/TravelTripPreview/onedayList.vue

 <style>
-   .TC-OneDayImg{
-      height:452px;
-      width:660px;
-      float:left;
-      position: relative;
-      border:1px solid #d1d1d1;
-    }
-  .TC-OneDayImg img{width:100%;min-height: 449px;}
-  .TC-OneDayImg:hover .TC_uploadDiv{
-    display:block;
+  .TC-OneDayImg {
+    height: 452px;
+    width: 660px;
+    float: left;
+    position: relative;
+    border: 1px solid #d1d1d1;
   }
-  .TC-OneDaySpan{
+
+  .TC-OneDayImg img {
+    width: 100%;
+    min-height: 449px;
+  }
+
+  .TC-OneDayImg:hover .TC_uploadDiv {
+    display: block;
+  }
+
+  .TC-OneDaySpan {
     max-height: 265px;
     line-height: 1.5em;
     color: #444;
@@ -19,21 +25,29 @@
     display: block;
     font-size: 15px;
   }
+
 </style>
 
 <template>
   <div class="TC-ScencContent">
     <div class="TC-OneDayImg" :id='"boxs_"+DayNum+"_"+0'>
-      <VueDraggableResizable axis="y" :ref='"oneDay_"+DayNum+"_"+0' tabindex="0" :w="660" :h="449" :resizable='false' :x="scenicArray[0].ScenicJson.x" 
-      :y="scenicArray[0].ScenicJson.y" :z="2" :active="false" :parent="false" @dragstop="onDragImagestop" @activated="onActivated(0)">
+      <template v-if="scenicArray[0].NewImaArray[0].FileType&&scenicArray[0].NewImaArray[0].FileType=='.mp4'">
+        <img :src='scenicArray[0].NewImaArray[0].Url' :id='"bodys_"+DayNum+"_"+0' />
+      </template>
+      <template v-else>
+        <VueDraggableResizable axis="y" :ref='"oneDay_"+DayNum+"_"+0' tabindex="0" :w="660" :h="449" :resizable='false'
+          :x="scenicArray[0].ScenicJson.x" :y="scenicArray[0].ScenicJson.y" :z="2" :active="false" :parent="false"
+          @dragstop="onDragImagestop" @activated="onActivated(0)">
           <img :src='compressImg(scenicArray[0].NewImaArray[0].Url, "filt", 600, "")' :id='"bodys_"+DayNum+"_"+0' />
-      </VueDraggableResizable>
+        </VueDraggableResizable>
+      </template>
+
       <!-- <img v-if="scenicArray[0].NewImaArray.length>0&&scenicArray[0].NewImaArray[0].Url" :src="scenicArray[0].NewImaArray[0].Url" alt>
       <div v-else class="_noData_img" src=""></div> -->
       <div class="TC_uploadDiv">
         <span class="TC-Upimg">
-          <el-upload :file-list="UploadList" action :http-request="uploadImg" accept="image/jpeg, image/gif, image/png, image/bmp"
-            :show-file-list="false">
+          <el-upload :file-list="UploadList" action :http-request="uploadImg"
+            accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false">
             <i class="iconfont icon-img_bdsc"></i>
           </el-upload>
         </span>
@@ -50,15 +64,18 @@
         </div>
         <div class="TC-playTime">
           <span>游玩时间</span>
-          <el-input class="w69" v-if="!isRead" v-model="scenicArray[0].PlayTimeHour"  @keyup.native="checkInteger(scenicArray[0],'PlayTimeHour')" placeholder="小时"></el-input>
+          <el-input class="w69" v-if="!isRead" v-model="scenicArray[0].PlayTimeHour"
+            @keyup.native="checkInteger(scenicArray[0],'PlayTimeHour')" placeholder="小时"></el-input>
           <span v-if="isRead">{{scenicArray[0].PlayTimeHour}}</span>
           &nbsp;小时&nbsp;
-          <el-input class="w69" v-if="!isRead" v-model="scenicArray[0].PlayTimeMinutes" @keyup.native="checkInteger(scenicArray[0],'PlayTimeMinutes')" placeholder="分钟"></el-input>
+          <el-input class="w69" v-if="!isRead" v-model="scenicArray[0].PlayTimeMinutes"
+            @keyup.native="checkInteger(scenicArray[0],'PlayTimeMinutes')" placeholder="分钟"></el-input>
           <span v-if="isRead">{{scenicArray[0].PlayTimeMinutes}}</span>
           &nbsp;分钟
         </div>
         <span v-if="!isRead">
-          <el-input type="textarea" v-model="scenicArray[0].Description" resize="none" class="TC-TextArea" placeholder="请输入景点介绍"></el-input>
+          <el-input type="textarea" v-model="scenicArray[0].Description" resize="none" class="TC-TextArea"
+            placeholder="请输入景点介绍"></el-input>
         </span>
         <span class="TC-OneDaySpan" v-if="isRead">
           {{scenicArray[0].Description}}
@@ -67,8 +84,9 @@
     </div>
     <el-dialog custom-class="TC_comDMCchoose" title="选择图片" center :visible.sync="isShowScenicImg">
       <!--imgType:1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店,isCheckmore:是否多选图片-->
-      <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg" v-bind:queryItem="queryItem" v-bind:isCheckmore="1"
-        v-bind:imgType="3" v-bind:IsShowAdd="true" v-bind:IsShowVideo="true"></DMCchooseImg>
+      <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg"
+        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true"
+        v-bind:IsShowVideo="true"></DMCchooseImg>
     </el-dialog>
   </div>
 </template>
@@ -77,28 +95,27 @@
   import DMCchooseImg from "../../commonPage/DMCchooseImg.vue";
   export default {
     /*IsDirect:1直采，0非直采*/
-    props: ["scenicArray", "IsDirect","isRead","DayNum"],
+    props: ["scenicArray", "IsDirect", "isRead", "DayNum"],
     data() {
       return {
         UploadList: [],
         //是否显示选择图片框
         isShowScenicImg: false,
-        queryName:'',
+        queryName: '',
         //点击传递对象
-        queryItem:{
-          queryName:'',
-          queryId:0,
+        queryItem: {
+          queryName: '',
+          queryId: 0,
         },
         //当前拖动的图片索引
-        currentChooseIndex:0,
+        currentChooseIndex: 0,
       };
     },
     components: {
       DMCchooseImg,
       VueDraggableResizable
     },
-    mounted() {
-    },
+    mounted() {},
     methods: {
       //上传图片
       uploadImg(file) {
@@ -133,49 +150,51 @@
             Url: imgItem.Path,
             fileName: imgItem.Name
           };
-          if(imgItem.VideoPath)
-          {
-            obj.VideoPath=imgItem.VideoPath;
+          if (imgItem.VideoPath) {
+            obj.VideoPath = imgItem.VideoPath;
+          }
+          if (imgItem.FileType) {
+            obj.FileType = imgItem.FileType;
           }
           that.scenicArray[0].NewImaArray = [];
           that.scenicArray[0].NewImaArray.push(obj);
           that.scenicArray[0].NewScenicImg = JSON.stringify(that.scenicArray[0].NewImaArray);
+          console.log("that.scenicArray[0].NewImaArray",that.scenicArray[0].NewImaArray);
         });
       },
-      getImgInfo(item){
+      getImgInfo(item) {
         this.queryItem.queryName = item.CouponsName;
         this.queryItem.queryId = item.CouponsId;
       },
-      onDragImagestop(x,y){
-        let imgHeight=document.querySelector("#bodys_"+this.DayNum+"_"+this.currentChooseIndex).height;
-        var obj=document.querySelector("#boxs_"+this.DayNum+"_"+this.currentChooseIndex);
-        let boxHeight=document.querySelector("#boxs_"+this.DayNum+"_"+this.currentChooseIndex).offsetHeight;
-        let cha=boxHeight-imgHeight
+      onDragImagestop(x, y) {
+        let imgHeight = document.querySelector("#bodys_" + this.DayNum + "_" + this.currentChooseIndex).height;
+        var obj = document.querySelector("#boxs_" + this.DayNum + "_" + this.currentChooseIndex);
+        let boxHeight = document.querySelector("#boxs_" + this.DayNum + "_" + this.currentChooseIndex).offsetHeight;
+        let cha = boxHeight - imgHeight
         if (cha <= 0) {
-            if(y < 0 && y < cha) {
-                y=cha
-            } else if (y > 0) {
-                y=0
-            }
+          if (y < 0 && y < cha) {
+            y = cha
+          } else if (y > 0) {
+            y = 0
+          }
         } else {
-            if (y < 0) {
-                y = 0
-            } else if (y > 0 && y > cha) {
-                y = cha
-            }
+          if (y < 0) {
+            y = 0
+          } else if (y > 0 && y > cha) {
+            y = cha
+          }
         }
         this.scenicArray[this.currentChooseIndex].ScenicJson.y = y;
-        this.$refs["oneDay_"+this.DayNum+"_"+this.currentChooseIndex]._data.top=y;
+        this.$refs["oneDay_" + this.DayNum + "_" + this.currentChooseIndex]._data.top = y;
       },
       //获取选中的图片索引
-      onActivated(currentIndex){
-        this.currentChooseIndex=currentIndex;
+      onActivated(currentIndex) {
+        this.currentChooseIndex = currentIndex;
       },
     },
     created() {
-      // this.scenicArray.forEach(x=>{
-      //   x.ScenicJson = typeof(x.ScenicJsonStr) === 'string' ? JSON.parse(x.ScenicJsonStr) : { x:0, y:0 };
-      // })
+
     },
   };
+
 </script>

src/components/newTravelmanager/TravelTripPreview/threedayList.vue

@@ -178,7 +178,8 @@
     <el-dialog custom-class="TC_comDMCchoose" title="选择图片" center :visible.sync="isShowScenicImg">
       <!--imgType:1-酒店,2-餐厅,3-景点,4-票务,5-车辆,6-领队,7-购物店,isCheckmore:是否多选图片-->
       <DMCchooseImg @closeImg="closeDMCchooseImg" ref="DMCchooseImg1" @headCallBack="getDMCimg"
-        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true" v-bind:IsShowVideo="true"></DMCchooseImg>
+        v-bind:queryItem="queryItem" v-bind:isCheckmore="1" v-bind:imgType="3" v-bind:IsShowAdd="true"
+        v-bind:IsShowVideo="true"></DMCchooseImg>
     </el-dialog>
   </div>
 </template>
@@ -246,6 +247,12 @@
             Name: imgItem.Name,
             fileName: imgItem.Name
           };
+          if (imgItem.VideoPath) {
+            obj.VideoPath = imgItem.VideoPath;
+          }
+          if (imgItem.FileType) {
+            obj.FileType = imgItem.FileType;
+          }
           var array = [];
           array.push(obj);
           this.ClickItem.NewImaArray = array;

src/components/newTravelmanager/TravelTripPreview/twodayList.vue

@@ -175,11 +175,16 @@
         var that = this;
         imgArr.forEach(imgItem => {
           var obj = {
-            // Url: imgItem.Path + "?x-oss-process=image/resize,l_140",
             Url: imgItem.Path,
             Name: imgItem.Name,
             fileName: imgItem.Name
           };
+          if (imgItem.VideoPath) {
+            obj.VideoPath = imgItem.VideoPath;
+          }
+          if (imgItem.FileType) {
+            obj.FileType = imgItem.FileType;
+          }
           var array = [];
           array.push(obj);
           this.ClickItem.NewImaArray = array;