行程特色 图拖动

src/assets/css/UpgradedVersion.css

@@ -233,13 +233,13 @@ img {
     height: 930px;
     bottom: 290px;
     left: 0;
+    overflow: hidden;
   }
 
   .featureHome-left-one img {
-    width: 100%;
     height: 100%;
     display: block;
-    object-fit: cover;
+    /* object-fit: cover; */
   }
 
   .featureHome-right {
@@ -457,9 +457,12 @@ img {
   .MasterMapList-1 img {
     left: 0;
     top: 0;
-    width: 100%;
     height: 100%;
-    object-fit: cover;
+    /* object-fit: cover; */
+  }
+  .MasterMapList-1 img.width{
+    width: 100%;
+    height: auto;
   }
 
   .MasterMapList-4 .MasterMapList-2 {
@@ -474,7 +477,7 @@ img {
   }
 
   .MasterMapList-8-oneL {
-    width: 776px;
+    width: 761px;
     height: 427px;
   }
 
@@ -492,7 +495,7 @@ img {
   }
 
   .MasterMapList-8-oneR {
-    width: 240px;
+    width: 244px;
   }
 
   .MasterMapList-7 .MasterMapList-8-oneR {
@@ -552,8 +555,8 @@ img {
   }
 
   .UpgradedVersionDetails-imgOne {
-    left: 0;
-    top: 0;
+    /* left: 0;
+    top: 0; */
     width: 312px;
     height: 312px;
     border-radius: 50%;
@@ -563,9 +566,9 @@ img {
   .UpgradedVersionDetails-imgOne img {
     left: 0;
     top: 0;
-    width: 100%;
+    /* width: 100%; */
     height: 100%;
-    object-fit: cover;
+    /* object-fit: cover; */
   }
 
   .UpgradedVersionDetails-detailsTop {
@@ -655,8 +658,8 @@ img {
   }
 
   .UpgradedVersionDetails1 {
-    left: 10px;
-    top: 147px;
+    left: 11px;
+    top: 155px;
   }
 
   /**/
@@ -884,9 +887,13 @@ img {
   .subIdeImg1relative img {
     left: 0;
     top: 0;
-    width: 100%;
+    /* width: 100%; */
     height: 100%;
-    object-fit: cover;
+    /* object-fit: cover; */
+  }
+  .subIdeImg1relative img.width{
+    width: 100%;
+    height: auto;
   }
 
   .subIdeImgForm1Box {
@@ -1126,3 +1133,6 @@ img {
 .cursorInitial{
   cursor: initial
 }
+.UpgradedVersion-box>img{
+  pointer-events: none !important;
+}

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/UpgradedVersionDetails.vue

@@ -13,17 +13,25 @@
       <div class="UpgradedVersionDetails-box column" v-for="(item,i) in FeatureData.dataObj.SubList">
         <div class="UpgradedVersionDetails-imgbox row-aic UpgradedVersion-Hover">
           <div class="UpgradedVersionDetails-img relative">
-            <div class="UpgradedVersionDetails1 absolute z-index1">
+            <div class="UpgradedVersionDetails1 absolute z-index3">
               <FeatureControls v-if="FeatureData" :index="index" :FeatureData="FeatureData" :ControlsType="'row'" isImg="1" :isUploadImg="true"
                 :isSelectImg="true" @toUploadImg="UploadImg(i)" @toSelectImg="SelectImg(i)" @toAddImg="AddImg"
                 @toDeleteImg="DeleteImg(i)" :x="312" :y="312" />
             </div>
-            <div class="UpgradedVersionDetails-imgOne bjE6">
-              <template v-if="item.ImgList&&item.ImgList.length>0">
-                <img :src="item.ImgList[0].url" />
-              </template>
+            <div class="UpgradedVersionDetails-imgOne relative bjE6"
+            :id="'viewSpotBox_' + (FeatureData * 4) +'_deta_'+i+index">
+              <VueDraggableResizable v-if="item.ImgList&&item.ImgList.length>0"
+                :w="312" :h="312"
+                :ref="'viewSpotVds_' + FeatureData * 4 + '_deta_'+i+index"
+                tabindex="0" :resizable="false" :active="false" :parent="false" axis="x"
+                @activated="onActivated(FeatureData * 4, i)" :x="item.ImgList[0].x"
+                :y="item.ImgList[0].y" :z="2" @dragstop="onViewSpotDragstopX">
+                <img v-if="item.ImgList[0].url" :src="item.ImgList[0].url"
+                :id="'viewSpotImg_' + FeatureData * 4 + '_deta_'+i+index"/>
+                  <!-- <img :src="item.ImgList[0].url" :id="'viewSpotImg_' + FeatureData * 4 + 'deta_'+i+index"/> -->
+              </VueDraggableResizable>
               <template v-else>
-                <img src="http://imgfile.oytour.com/Static/NewTripFeature/homeBj.png" />
+                <img src="http://imgfile.oytour.com/Static/NewTripFeature/homeBj.png"/>
               </template>
             </div>
             <div class="UpgradedVersionDetails-detailsTop absolute"></div>
@@ -66,12 +74,14 @@
   import vEditDiv from "../TravelTemp/VEditDiv";
   import FeatureControls from "./components/featureControls";
   import DMCchooseImg from "../../../commonPage/DMCchooseImg.vue";
+  import VueDraggableResizable from "vue-draggable-resizable";
   export default {
     components: {
       DMCchooseImg,
       MasterMapList,
       vEditDiv,
       FeatureControls,
+      VueDraggableResizable
     },
     props: [
       'index',
@@ -102,9 +112,64 @@
         },
         isShowScenicImg: false,
         MasterMapIndex: null, //主图下标
+        imgIndex:null
       };
     },
     methods: {
+      onActivated(i, j) {
+        this.imgIndex = j;
+      },
+      onViewSpotDragstopX(x,y) {
+        let imgWidth = document.querySelector(
+          "#viewSpotImg_" + (this.FeatureItem * 4) + "_deta_"+this.imgIndex + this.index
+        ).width;
+        let boxWidth = document.querySelector(
+          "#viewSpotBox_" + (this.FeatureItem * 4) + "_deta_"+this.imgIndex + this.index
+        ).offsetWidth;
+        let cha = boxWidth - imgWidth;
+        if (cha <= 0) {
+          if (x < 0 && x < cha) {
+            x = cha;
+          } else if (x > 0) {
+            x = 0;
+          }
+        } else {
+          if (x < 0) {
+            x = 0;
+          } else if (x > 0 && x > cha) {
+            x = cha;
+          }
+        }
+        this.FeatureData.dataObj.SubList[this.imgIndex].x = x;
+        this.$refs["viewSpotVds_" + (this.FeatureData * 4) + "_deta_"+this.imgIndex + this.index][0]._data.left = x;
+      },
+      onViewSpotDragstop(x, y) {
+        let imgHeight = document.querySelector(
+          "#viewSpotImg_" + (this.FeatureData * 4)+ "_deta_"+this.imgIndex + this.index
+        ).height;
+        let boxHeight = document.querySelector(
+          "#viewSpotBox_" + (this.FeatureData * 4)+ "_deta_"+this.imgIndex + this.index
+        ).offsetHeight;
+        let cha = boxHeight - imgHeight;
+        if (cha <= 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;
+          }
+        }
+        this.FeatureData.dataObj.SubList[this.imgIndex].y = y;
+        this.$refs[
+          "viewSpotVds_" + (this.FeatureData * 4)+ "_deta_"+this.imgIndex + this.index
+        ][0]._data.top = y;
+      },
+
       UploadImg(index) {
         this.MasterMapIndex = index
         document.querySelector(`#GouDetaFile_${(this.index * 2 + 1)}_0`).click();

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/components/subheading.vue

@@ -59,31 +59,56 @@
         <div class="UpgradedVersion-subIdeImgForm1 absolute z-index2"
           :class="[Template==1?'':Template==2?'subIdeImgForm2':'subIdeImgForm3']">
           <div class="subIdeImg1 bjE6 UpgradedVersion-Hover">
-            <div class="subIdeImg1relative relative UpgradedVersion-Hover">
-              <div class="subIdeImgForm1Box absolute">
+            <div class="subIdeImg1relative relative UpgradedVersion-Hover"
+            :id="'viewSpotBox_' + (FeatureData * 4) + 'subheading_0'+index">
+              <div class="subIdeImgForm1Box absolute z-index3">
                 <FeatureControls v-if="FeatureData" :index="index" :FeatureData="FeatureData" :ControlsType="'row'" :isImg="1" :isUploadImg="true"
                   :isSelectImg="true" :isDeleteImg="false" @toUploadImg="toUploadImg(0)" @toSelectImg="toSelectImg(0)"
                   @toAddImg="toAddImg" @toDeleteImg="toDeleteImg(0)" :x="Template>2?178:250" :y="187" />
               </div>
-              <template v-if="FeatureData.dataObj&&FeatureData.dataObj.SubList &&FeatureData.dataObj.SubList.length>0">
-                <img :src="FeatureData.dataObj.SubList[0].url" />
-              </template>
+                <!-- <img :src="FeatureData.dataObj.SubList[0].url" /> -->
+              <VueDraggableResizable v-if="FeatureData.dataObj&&FeatureData.dataObj.SubList &&FeatureData.dataObj.SubList.length>0&&Template!=3"
+                :w="Template>2?178:250" :h="187"
+                :ref="'viewSpotVds_' + FeatureData * 4 + 'subheading_0'+index"
+                tabindex="0" :resizable="false" :active="false" :parent="false" axis="y"
+                @activated="onActivated(FeatureData * 4, 0)" :x="FeatureData.dataObj.SubList[0].x"
+                :y="FeatureData.dataObj.SubList[0].y" :z="2" @dragstop="onViewSpotDragstop">
+                <img v-if="FeatureData.dataObj.SubList[0].url" class="absolute" :src="FeatureData.dataObj.SubList[0].url"
+                :id="'viewSpotImg_' + FeatureData * 4 + 'subheading_0'+index"/>
+              </VueDraggableResizable>
+              <VueDraggableResizable v-if="FeatureData.dataObj&&FeatureData.dataObj.SubList &&FeatureData.dataObj.SubList.length>0&&Template==3"
+                :w="Template>2?178:250" :h="187"
+                :ref="'viewSpotVds_' + FeatureData * 4 + 'subheading_0'+index"
+                tabindex="0" :resizable="false" :active="false" :parent="false" axis="x"
+                @activated="onActivated(FeatureData * 4, 0)" :x="FeatureData.dataObj.SubList[0].x"
+                :y="FeatureData.dataObj.SubList[0].y" :z="2" @dragstop="onViewSpotDragstopX">
+                <img v-if="FeatureData.dataObj.SubList[0].url" class="absolute" :src="FeatureData.dataObj.SubList[0].url"
+                :id="'viewSpotImg_' + FeatureData * 4 + 'subheading_0'+index"/>
+              </VueDraggableResizable>
             </div>
           </div>
         </div>
         <!-- subIdeImgForm2-two 食 subIdeImgForm3-two 景 -->
         <div class="UpgradedVersion-subIdeImgForm1 absolute z-index2"
           :class="[Template==1?'':Template==2?'subIdeImgForm2-two':'subIdeImgForm3-two']">
-          <div class="subIdeImg1 bjE6 UpgradedVersion-Hover">
+          <div class="subIdeImg1 bjE6 UpgradedVersion-Hover"
+          :id="'viewSpotBox_' + (FeatureData * 4) + 'subheading_1'+index">
             <div class="subIdeImg1relative relative">
-              <div class="subIdeImgForm1Box absolute">
+              <div class="subIdeImgForm1Box absolute z-index3">
                 <FeatureControls v-if="FeatureData" :index="index" :FeatureData="FeatureData" :ControlsType="'row'" :isImg="1" :isUploadImg="true"
                   :isSelectImg="true" :isDeleteImg="false" @toUploadImg="toUploadImg(1)" @toSelectImg="toSelectImg(1)"
                   @toAddImg="toAddImg" @toDeleteImg="toDeleteImg(1)" :x="Template==1?331:250" :y="187" />
               </div>
-              <template v-if="FeatureData.dataObj&&FeatureData.dataObj.SubList &&FeatureData.dataObj.SubList.length>1 ">
-                <img :src="FeatureData.dataObj.SubList[1].url" />
-              </template>
+                <VueDraggableResizable v-if="FeatureData.dataObj&&FeatureData.dataObj.SubList &&FeatureData.dataObj.SubList.length>1"
+                  :w="Template==1?331:250" :h="187"
+                  :ref="'viewSpotVds_' + FeatureData * 4 + 'subheading_1'+index"
+                  tabindex="0" :resizable="false" :active="false" :parent="false" axis="y"
+                  @activated="onActivated(FeatureData * 4, 1)" :x="FeatureData.dataObj.SubList[1].x"
+                  :y="FeatureData.dataObj.SubList[1].y" :z="2" @dragstop="onViewSpotDragstop">
+                  <img v-if="FeatureData.dataObj.SubList[1].url" class="absolute"
+                  :class="[Template==1?'width':'']" :src="FeatureData.dataObj.SubList[1].url"
+                  :id="'viewSpotImg_' + FeatureData * 4 + 'subheading_1'+index"/>
+                </VueDraggableResizable>
             </div>
           </div>
         </div>
@@ -104,10 +129,12 @@
 <script>
   import vEditDiv from "../../TravelTemp/VEditDiv";
   import FeatureControls from "./featureControls";
+  import VueDraggableResizable from "vue-draggable-resizable";
   export default {
     components: {
       vEditDiv,
-      FeatureControls
+      FeatureControls,
+      VueDraggableResizable
     },
     props: [
       'Template',
@@ -118,10 +145,66 @@
     ],
     data() {
       return {
-
+        currentIndex: null,
+        imgIndex: null
       };
     },
     methods: {
+      onActivated(i, j) {
+        this.currentIndex = i;
+        this.imgIndex = j;
+      },
+      onViewSpotDragstopX(x,y) {
+        let imgWidth = document.querySelector(
+          "#viewSpotImg_" + (this.FeatureItem * 4) + "subheading_"+this.imgIndex + this.index
+        ).width;
+        let boxWidth = document.querySelector(
+          "#viewSpotBox_" + (this.FeatureItem * 4) + "subheading_"+this.imgIndex + this.index
+        ).offsetWidth;
+        let cha = boxWidth - imgWidth;
+        if (cha <= 0) {
+          if (x < 0 && x < cha) {
+            x = cha;
+          } else if (x > 0) {
+            x = 0;
+          }
+        } else {
+          if (x < 0) {
+            x = 0;
+          } else if (x > 0 && x > cha) {
+            x = cha;
+          }
+        }
+        this.FeatureData.dataObj.SubList[this.imgIndex].x = x;
+        this.$refs["viewSpotVds_" + (this.FeatureData * 4) + "subheading_"+this.imgIndex + this.index]._data.left = x;
+      },
+      onViewSpotDragstop(x, y) {
+        let imgHeight = document.querySelector(
+          "#viewSpotImg_" + (this.FeatureData * 4)+ "subheading_"+this.imgIndex + this.index
+        ).height;
+        let boxHeight = document.querySelector(
+          "#viewSpotBox_" + (this.FeatureData * 4)+ "subheading_"+this.imgIndex + this.index
+        ).offsetHeight;
+        let cha = boxHeight - imgHeight;
+        if (cha <= 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;
+          }
+        }
+        this.FeatureData.dataObj.SubList[this.imgIndex].y = y;
+        this.$refs[
+          "viewSpotVds_" + (this.FeatureData * 4)+ "subheading_"+this.imgIndex + this.index
+        ]._data.top = y;
+      },
+
       toUploadImg(index) {
         this.$emit('toUploadImg', index, '模版图')
       },

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/featureHome.vue

@@ -28,10 +28,15 @@
         </FeatureControls>
 
       </div>
-      <div class="featureHome-left-one bjF6 absolute z-index2">
-        <template v-if="FeatureItem.dataObj.ImgList&&FeatureItem.dataObj.ImgList.length>0">
-          <img :src="FeatureItem.dataObj.ImgList[0].url" />
-        </template>
+      <div class="featureHome-left-one bjF6 absolute z-index2" :id="'viewSpotBox_' + (FeatureItem * 4 + 1) + '_' +index">
+        <VueDraggableResizable  v-if="FeatureItem.dataObj.ImgList&&FeatureItem.dataObj.ImgList.length>0"
+          :w="697" :h="930"
+          :ref="'viewSpotVds_' + (FeatureItem * 4 + 1) + '_'+index" tabindex="0" :resizable="false" :active="false"
+          :parent="false" axis="x" @activated="onActivated(FeatureItem * 4 + 1, index)"
+          :x="FeatureItem.dataObj.ImgList[0].x" :y="0" :z="2" @dragstop="onViewSpotDragstopY">
+          <img :src="FeatureItem.dataObj.ImgList[0].url"
+          :id="'viewSpotImg_' + (FeatureItem * 4 + 1) + '_'+index"/>
+        </VueDraggableResizable>
       </div>
       <div class="featureHome-left-two absolute z-index1" :style="{'background':TripColor}">
         <vEditDiv :canEdit='canEdit' v-model="FeatureItem.dataObj.DetailsName"></vEditDiv>
@@ -82,11 +87,13 @@
   import vEditDiv from "../TravelTemp/VEditDiv";
   import FeatureControls from "./components/featureControls";
   import DMCchooseImg from "../../../commonPage/DMCchooseImg.vue";
+  import VueDraggableResizable from "vue-draggable-resizable";
   export default {
     components: {
       vEditDiv,
       FeatureControls,
-      DMCchooseImg
+      DMCchooseImg,
+      VueDraggableResizable
     },
     props: [
       'TripColor',
@@ -104,10 +111,40 @@
           queryName: '',
           queryId: 0,
         },
-        borderBox: ''
+        borderBox: '',
+        currentIndex: null,
+        imgIndex: null
       };
     },
     methods: {
+      onActivated(i, j) {
+        this.currentIndex = i;
+        this.imgIndex = j;
+      },
+      onViewSpotDragstopY(x, y) {
+        let imgWidth = document.querySelector(
+          "#viewSpotImg_" + (this.FeatureItem * 2 + 1) + "_" + this.index
+        ).width;
+        let boxWidth = document.querySelector(
+          "#viewSpotBox_" + (this.FeatureItem * 2 + 1) + "_" + this.index
+        ).offsetWidth;
+        let cha = boxWidth - imgWidth;
+        if (cha <= 0) {
+          if (x < 0 && x < cha) {
+            x = cha;
+          } else if (x > 0) {
+            x = 0;
+          }
+        } else {
+          if (x < 0) {
+            x = 0;
+          } else if (x > 0 && x > cha) {
+            x = cha;
+          }
+        }
+        this.FeatureItem.dataObj.ImgList[0].x = x;
+        this.$refs["viewSpotVds_" + (this.FeatureItem * 2 + 1) + "_" + this.index]._data.left = x;
+      },
       UploadImg() {
         document.querySelector(`#homefile_${(this.FeatureItem * 2 + 1)}_${this.index}`).click();
       },
@@ -127,6 +164,8 @@
               let allPath = that.domainManager().ViittoFileUrl + x.data.FilePath;
               let i = e.target.id.split("_")[2];
               that.FeatureItem.dataObj.ImgList[0].url = allPath
+              that.FeatureItem.dataObj.ImgList[0].x = 0
+              that.FeatureItem.dataObj.ImgList[0].y = y
               that.$message.success('上传成功');
             });
           };
@@ -153,6 +192,8 @@
       },
       getDMCimg(selectImgArr) {
         this.FeatureItem.dataObj.ImgList[0].url = selectImgArr[0].Path;
+        this.FeatureItem.dataObj.ImgList[0].x = 0
+        this.FeatureItem.dataObj.ImgList[0].y = 0
         this.isShowScenicImg = false;
       }
     },

src/components/newTravelmanager/TravelGroupControl/UpgradedVersion/otherJourney.vue

@@ -84,7 +84,6 @@
         },
         MasterMapIndex: null, //主图下标
         StencilDrawing: false, //是否是模版图
-        imglistArry:[],
         homeBg3: "https://imgfile.oytour.com/Static/NewTripFeature/homeBg3.jpg",
         dinner2: "http://imgfile.oytour.com/Static/NewTripFeature/dinner2.jpg",
         homeBg1: "https://imgfile.oytour.com/Static/NewTripFeature/homeBg1.jpg",
@@ -92,33 +91,6 @@
     },
 
     methods: {
-      getList() {
-        //初始化弹窗图片列表
-        let obj = {
-          url: 'http://192.168.10.214:8120/image/index?filePath=/Upload/DMC/20180722/636678151855193385.jpg&process=resize,m_filt,w_160,h_'
-        }
-        this.imglistArry = [];
-        this.apipost(
-          "hotel_post_GetPicList",
-          this.msg,
-          res => {
-            if (res.data.resultCode == 1) {
-              this.imglistArry = res.data.data.pageData;
-              this.imglistArry.forEach(x => {
-                x.isShowImgDiv = true;
-              })
-              this.msg.total = res.data.data.count;
-              if(this.imglistArry&&this.imglistArry.length>0){
-                obj.url = this.imglistArry[0].Path
-              }
-              this.FeatureItem.dataObj.ImgList.push(obj)
-            }else{
-              this.FeatureItem.dataObj.ImgList.push(obj)
-            }
-          },
-          null
-        );
-      },
       UploadImg(index, type) {
         this.MasterMapIndex = index ? index : 0
         if (type) this.StencilDrawing = true
@@ -167,30 +139,31 @@
       },
       AddImg() {
         let obj = {
-          url: this.FeatureItem.pageType==4?this.homeBg3:this.FeatureItem.pageType==5?this.dinner2:this.homeBg1
+          url: this.FeatureItem.pageType==4?this.homeBg3:this.FeatureItem.pageType==5?this.dinner2:this.homeBg1,
+          x: 0,
+          y: 0,
         }
         this.FeatureItem.dataObj.ImgList.push(obj)
-        return
-        if(this.FeatureItem.pageType==4||this.FeatureItem.pageType==5||this.FeatureItem.pageType==6){
-          if(this.FeatureItem.pageType==4){
-            this.choseType = 1
-          }else if(this.FeatureItem.pageType==5){
-            this.choseType = 2
-          }else if(this.FeatureItem.pageType==6){
-            this.choseType = 3
-          }else{
-            this.choseType = 0
-          }
-          this.getList()
-        }
+        this.FeatureItem.dataObj.ImgList.forEach(x => {
+          x.x = 0
+          x.y =0
+        });
       },
       DeleteImg(index, type) {
         if (type) this.StencilDrawing = true
         else this.StencilDrawing = false
         if (this.StencilDrawing) {
           this.FeatureItem.dataObj.SubList.splice(index, 1)
+          this.FeatureItem.dataObj.SubList.forEach(x => {
+          x.x = 0
+          x.y =0
+        });
         } else {
           this.FeatureItem.dataObj.ImgList.splice(index, 1)
+          this.FeatureItem.dataObj.ImgList.forEach(x => {
+            x.x = 0
+            x.y =0
+          });
         }
       },
       toAddPages() {