页面修改

src/components/newTravelmanager/TravelGroupControl/TravelFeature.vue

 <template>
-  <div>
+  <div>clickFeature
     <div class="TravelFeature" :class="{'foldHeight':isFold==1}">
       <span class="TMTitle">
         <i></i>{{$t('sm.chanpintese')}}
@@ -7,8 +7,8 @@
       <span class="foldList" @click="fold" v-if="isFold==''">{{$t('sm.djzd')}}</span>
       <span class="foldList" @click="fold" v-if="isFold==1">{{$t('sm.djzk')}}</span>
       <template v-if="true">
-        <span v-if="FeatureData.ConfigId&&dataAll.FeaturePageType&&FeatureData.FeatureType==9" class="foldList" style="margin-right: 5px;"
-          @click="journeyTemplate()">编辑行程</span>
+        <span v-if="FeatureData.ConfigId&&dataAll.FeaturePageType&&FeatureData.FeatureType==9" class="foldList"
+          style="margin-right: 5px;" @click="journeyTemplate()">编辑行程</span>
         <span style="color: red;float: right;margin-right: 5px;line-height: 28px;font-weight:bold;">
           新复制的【团期】,如需单独修改【行程特色】操作步骤： 当团修改=》保存=》团控列表=》当团修改=》编辑行程特色.</span>
       </template>
@@ -34,7 +34,7 @@
       <div v-if="CurrentUserInfo.RB_Group_id==QjGroupId()">{{$t('sm.huandengplongTips')}}</div>
       <div v-if="CurrentUserInfo.RB_Group_id==QjGroupId()" class="ScraList">{{$t('sm.imgLongtips')}}</div>
       <div v-if="FeatureData.FeatureType==8" class="ScraList">
-        <span style="color: red;">此功能将于2024-02-18正式下线</span>
+
       </div>
       <div class="TFContent">
         <div class="TFconTitle">
@@ -81,11 +81,64 @@
           </div>
           <!--自定义 开始-->
           <div v-if="FeatureData.FeatureType==FeatureTypeState.userDefined">
-            <span class="userDeSpan">{{$t('sm.xiaoguoyldzxg')}}</span>
+            <span class="userDeSpan">上传自定义行程特色和行程详情</span>
             <div class="userDefined">
-              <my-edit v-on:edit-value="FeatureData.FeatureContent = arguments[0]"
+              <!-- <my-edit v-on:edit-value="FeatureData.FeatureContent = arguments[0]"
                 v-bind:editValue="FeatureData.FeatureContent" v-bind:toolbarShow="toolbar"
-                v-bind:referenceList="DefaultList" v-bind:placeholder="placeholder"></my-edit>
+                v-bind:referenceList="DefaultList" v-bind:placeholder="placeholder"></my-edit> -->
+              <div class="sliderContent clearfix" style="width:1000px;">
+                <el-upload class="upload-demo" :http-request="reUpload" :multiple="true"
+                  accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action>
+                  <el-button size="small" type="primary" @click="updateTFimg(1)">上传行程特色</el-button>
+                  <div slot="tip" class="el-upload__tip" style="color:red;">横版1754*1240,竖版:1240X1754</div>
+                </el-upload>
+                <div class="TFimgList" v-for="(item,index) in FeatureData.TripImageListNew" :key="item.subCode">
+                  <img :key="index+10000" v-if="!item" src="../../../assets/img/bg_c3@3x.png">
+                  <img :key="index+20000" v-else :src="item">
+                  <div :key="index+30000" class="TFIMGzhe">
+                    <div class="TFremove" @click="removeImg(1,index)">
+                      <i class="iconfont icon-xingzhuang"></i>
+                    </div>
+                    <div class="TFremove" @click="showImg(item)">
+                      <i class="iconfont icon-img_cz"></i>
+                    </div>
+                    <div class="TFremove" @click.stop="ExchangeImg(1,index,0)" v-if="index!=0">
+                      <i class="iconfont icon-zuoyi"></i>
+                    </div>
+                    <div class="TFremove" @click.stop="ExchangeImg(1,index,1)"
+                      v-if="index!=FeatureData.TripImageListNew.length-1">
+                      <i class="iconfont icon-youyi"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <br />
+              <div class="sliderContent clearfix" style="width:1000px;">
+                <el-upload class="upload-demo" :http-request="reUpload" :multiple="true"
+                  accept="image/jpeg, image/gif, image/png, image/bmp" :show-file-list="false" action>
+                  <el-button size="small" type="primary" @click="updateTFimg(2)">上传行程详情</el-button>
+                  <div slot="tip" class="el-upload__tip" style="color:red;">横版1754*1240,竖版:1240X1754</div>
+                </el-upload>
+                <div class="TFimgList" v-for="(item,index) in FeatureData.DetailsImageListNew" :key="item.subCode">
+                  <img :key="index+1000" v-if="!item" src="../../../assets/img/bg_c3@3x.png">
+                  <img :key="index+2000" v-else :src="item">
+                  <div :key="index+3000" class="TFIMGzhe">
+                    <div class="TFremove" @click="removeImg(2,index)">
+                      <i class="iconfont icon-xingzhuang"></i>
+                    </div>
+                    <div class="TFremove" @click="showImg(item)">
+                      <i class="iconfont icon-img_cz"></i>
+                    </div>
+                    <div class="TFremove" @click.stop="ExchangeImg(2,index,0)" v-if="index!=0">
+                      <i class="iconfont icon-zuoyi"></i>
+                    </div>
+                    <div class="TFremove" @click.stop="ExchangeImg(2,index,1)"
+                      v-if="index!=FeatureData.DetailsImageListNew.length-1">
+                      <i class="iconfont icon-youyi"></i>
+                    </div>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
           <div class="TFright" v-if="FeatureData.FeatureType!=FeatureTypeState.userDefined">
@@ -145,6 +198,10 @@
     <!-- ppt 模版新增编辑窗口 -->
     <pptIframe v-show="dialogPptistVisible" :FeaturePageType="dataAll.FeaturePageType" :Url="TemplateUrl"
       @close="closeIframe()"></pptIframe>
+
+    <viewer :images="images" :options='imageOptions' @inited="inited" class="viewer" ref="viewer">
+      <img v-for="src in images" :src="src" :key="src">
+    </viewer>
   </div>
 </template>
 <script>
@@ -186,6 +243,11 @@
     inject: ['loadConfigInfo'],
     data() {
       return {
+        images: [],
+        imageOptions: {
+          navbar: false,
+          title: false
+        },
         updateChoseIndex: "0",
         toolbar: {
           clean: false, //加粗
@@ -204,13 +266,12 @@
           travelSpecial: 4,
           travelSpecial2: 5,
         },
-        TypeArray: [
-          // {
-          //   ckTitle: "自定义",
-          //   isShow: false,
-          //   imgUrl: userDefined,
-          //   TypeState: 3
-          // },
+        TypeArray: [{
+            ckTitle: "自定义",
+            isShow: false,
+            imgUrl: Travelslider,
+            TypeState: 3
+          },
           // {
           //   ckTitle: "幻灯片",
           //   isShow: false,
@@ -284,7 +345,6 @@
         //当前登录用户信息
         CurrentUserInfo: {},
         dialogPptistVisible: false,
-        userInfo: {},
         TemplateUrl: '', // 模版 修改url
         myIframeUrl: '', //行程特色url
         myIframeHeigth: 0,
@@ -296,8 +356,56 @@
     created: function () {
 
     },
-
     methods: {
+      //图片左移右移
+      ExchangeImg(type, index, IsMove) {
+        if (type == 1) {
+          var imgItem = this.FeatureData.TripImageListNew[index];
+          //左移
+          if (IsMove == 0) {
+            var upItem = this.FeatureData.TripImageListNew[index - 1];
+            this.$set(this.FeatureData.TripImageListNew, index - 1, imgItem);
+            this.$set(this.FeatureData.TripImageListNew, index, upItem);
+          } else {
+            //右移动
+            var downItem = this.FeatureData.TripImageListNew[index + 1];
+            this.$set(this.FeatureData.TripImageListNew, index + 1, imgItem);
+            this.$set(this.FeatureData.TripImageListNew, index, downItem);
+          }
+        } else {
+          var imgItem = this.FeatureData.DetailsImageListNew[index];
+          //左移
+          if (IsMove == 0) {
+            var upItem = this.FeatureData.DetailsImageListNew[index - 1];
+            this.$set(this.FeatureData.DetailsImageListNew, index - 1, imgItem);
+            this.$set(this.FeatureData.DetailsImageListNew, index, upItem);
+          } else {
+            //右移动
+            var downItem = this.FeatureData.DetailsImageListNew[index + 1];
+            this.$set(this.FeatureData.DetailsImageListNew, index + 1, imgItem);
+            this.$set(this.FeatureData.DetailsImageListNew, index, downItem);
+          }
+        }
+      },
+
+      inited(viewer) {
+        this.$viewer = viewer;
+      },
+      showImg: function (src) {
+        let srcArr = src.split('?')
+        src = srcArr[0]
+        let isExsit = false
+        this.images.forEach(x => {
+          if (x === src)
+            isExsit = true
+        })
+        if (!isExsit) {
+          this.images.push(src)
+        } else {
+          this.$viewer.view(this.images.indexOf(src))
+        }
+        this.$viewer.show()
+      },
       closeIframe() {
         this.dialogPptistVisible = false
       },
@@ -334,8 +442,7 @@
         this.isPostMessage = false;
         let href = this.domainManager().PptUrl
         this.TemplateUrl =
-          `${href}/?uid=${this.userInfo.EmployeeId}&ConfigId=${this.FeatureData.ConfigId}&model=0&TempType=${this.dataAll.FeaturePageType}`
-        // this.TemplateUrl=`${href}/index/${this.userInfo.EmployeeId}/${this.FeatureData.ConfigId}/0/${this.dataAll.FeaturePageType}`
+          `${href}/?uid=${this.CurrentUserInfo.EmployeeId}&ConfigId=${this.FeatureData.ConfigId}&model=0&TempType=${this.dataAll.FeaturePageType}`
         this.dialogPptistVisible = true
       },
       //重新加载行程特色
@@ -345,8 +452,6 @@
           this.$refs.UpgradedVersion.initFeature(true)
         }
       },
-      // 初始化行程特色
-      init: function () {},
       // 行程特色删除区块
       delFeature: function (key) {
         this.travelsList.splice(key, 1);
@@ -357,46 +462,8 @@
           this.$refs.newFeature.clearOldData()
         }
       },
-      // 抓取行程特色节点储存
-      uuid(len, radix) {
-        var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
-          ""
-        );
-        var uuid = [],
-          i;
-        radix = radix || chars.length;
-        if (len) {
-          // Compact form
-          for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
-        } else {
-          var r;
-          uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
-          uuid[14] = "4";
-          for (i = 0; i < 36; i++) {
-            if (!uuid[i]) {
-              r = 0 | (Math.random() * 16);
-              uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
-            }
-          }
-        }
-        return uuid.join("");
-      },
-      base64ToBlob(code) {
-        let parts = code.split(";base64,");
-        let contentType = parts[0].split(":")[1];
-        let raw = window.atob(parts[1]);
-        let rawLength = raw.length;
-
-        let uInt8Array = new Uint8Array(rawLength);
-
-        for (let i = 0; i < rawLength; ++i) {
-          uInt8Array[i] = raw.charCodeAt(i);
-        }
-        return new Blob([uInt8Array], {
-          type: contentType
-        });
-      },
       getHtml: function (postData, SaveType, TeamType) {
+        console.log("postData", postData);
         var FeatureData = {
           B2BRemark: postData.B2BRemark,
           ConfigId: postData.ConfigId,
@@ -414,7 +481,11 @@
           ShopRemark: postData.ShopRemark,
           VisaRemark: postData.VisaRemark,
           WarmTip: postData.WarmTip,
-          TemplateId: postData.TemplateId
+          TemplateId: postData.TemplateId,
+          IsUploadDetails: postData.IsUploadDetails,
+          IsUploadFeature: postData.IsUploadFeature,
+          DetailsImageListNew: postData.DetailsImageListNew, //行程详情图片
+          TripImageListNew: postData.TripImageListNew, //行程特色图片
         };
         if (this.$refs.newFeature != undefined) {
           var obj = '';
@@ -449,6 +520,7 @@
             }
             FeatureData.FeatureHtml = newHtml;
           } catch (err) {}
+          console.log("Api_FeatureData", FeatureData);
           this.apipost("travel_post_SetFeature", FeatureData, res => {
               try {
                 this.$refs.newFeature.setReadOnly(false)
@@ -570,12 +642,10 @@
         }
         this.initFileList();
         if (this.FeatureData.FeatureType == 9) {
-          // this.iframeLoading = true
           if (document.all.myIframe) {
             document.all.myIframe.src = this.myIframeUrl + `&t=${new Date().getTime()}`
           }
         }
-
       },
       //点击折叠
       fold() {
@@ -589,24 +659,45 @@
       reUpload(file) {
         let newArr = [];
         newArr.push(file.file);
-        let fileName = file.file.name;
+        //let fileName = file.file.name;
         let that = this;
-        let path = "/Upload/DMC/";
+        let path = "/Upload/24Trip/";
         this.UploadSelfFileT(path, newArr, x => {
           var str = this.domainManager().ViittoFileUrl + x.data.FilePath;
-          that.FeatureData.fileList[
-            this.updateChoseIndex
-          ].Url = this.$commonUtils.GetALiFileUrl(str);
-          that.FeatureData.fileList[this.updateChoseIndex].Name = fileName;
+          // that.FeatureData.fileList[
+          //   this.updateChoseIndex
+          // ].Url = this.$commonUtils.GetALiFileUrl(str);
+          // that.FeatureData.fileList[this.updateChoseIndex].Name = fileName;
+          //行程特色
+          if (that.updateChoseIndex == 1) {
+            that.FeatureData.TripImageListNew.push(str);
+          }
+          //行程详情
+          else if (that.updateChoseIndex == 2) {
+            that.FeatureData.DetailsImageListNew.push(str);
+          }
         });
       },
+      //删除图片
+      removeImg(type, index) {
+        if (type == 1) {
+          this.FeatureData.TripImageListNew.splice(index, 1);
+        } else if (type == 2) {
+          this.FeatureData.DetailsImageListNew.splice(index, 1);
+        }
+      },
       //删除
       handleRemove(obj) {
         obj.Url = "";
         obj.Name = "";
       },
-      //修改图片
+      //上传图片(index==1行程特色，=2行程详情)
       updateTFimg(index) {
+        if (index == 1) {
+          this.FeatureData.IsUploadFeature = 1;
+        } else if (index == 2) {
+          this.FeatureData.IsUploadDetails = 1;
+        }
         this.updateChoseIndex = index;
       },
       //初始化幻灯片
@@ -648,9 +739,7 @@
     },
     mounted() {
       window.addEventListener('message', this.handleMessage, false);
-      this.userInfo = this.getLocalStorage()
-      let userInfo = this.getLocalStorage()
-      this.CurrentUserInfo = userInfo
+      this.CurrentUserInfo = this.getLocalStorage();
       this.MsgBus.$on('FeatureDataFlag', () => {
         this.FeatureDataFlag = true
       });
@@ -661,7 +750,7 @@
         this.clickFeature(obj)
       }
       this.myIframeUrl =
-        `${this.domainManager().PptUrl}/?uid=${this.userInfo.EmployeeId}&ConfigId=${this.$route.query.configId}&index=0&model=3&w=1108`
+        `${this.domainManager().PptUrl}/?uid=${this.CurrentUserInfo.EmployeeId}&ConfigId=${this.$route.query.configId}&index=0&model=3&w=1108`
       if (document.all.myIframe) {
         document.all.myIframe.src = this.myIframeUrl + `&t=${new Date().getTime()}`
       }
@@ -677,7 +766,6 @@
         handler: function (val, oldVal) {
           this.$emit("featureCallBack", this.FeatureData);
           this.initFeature();
-
         },
         deep: true,
         immediate: true
@@ -689,12 +777,6 @@
         },
         deep: true
       },
-      "FeatureData.DayList": {
-        handler: function (val, oldval) {
-          //this.init();
-        },
-        deep: true
-      }
     }
   };
 

src/components/newTravelmanager/TravelGroupControl/TravelManagerThree.vue

@@ -55,11 +55,10 @@
         :IsDirect="PostConfig.IsDirect" v-bind:AllCityList="AllCityList" v-bind:StartCity="StartCity"
         :UseTypeArray="UseTypeArray" :AirPickUp="AirPickUp" :AirSend="AirSend" @change="handlerChangeData"
         :TeamType="TeamType" :IsOpenHotel="PostConfig.IsOpenHotel"></TravelDaysTripDirect>
-      <TravelFeature :TripColor="PostConfig.TripColor" :dataAll="PostConfig" :class="{'showOther':(TeamType==3)}" ref="TravelFeature"
-        id="thirdAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData" :TeamType="TeamType"
-        :isNewConfig="isNewConfig" @unlockFormCommit="unlockFormCommit" :CurrentUserInfo="CurrentUserInfo"
-        @ConfigInfo="firstLoadConfigInfo"
-        @pptJourney="getPptJourney">
+      <TravelFeature :TripColor="PostConfig.TripColor" :dataAll="PostConfig" :class="{'showOther':(TeamType==3)}"
+        ref="TravelFeature" id="thirdAnchor" @featureCallBack="getFeature" :FeatureData="FeatureData"
+        :TeamType="TeamType" :isNewConfig="isNewConfig" @unlockFormCommit="unlockFormCommit"
+        :CurrentUserInfo="CurrentUserInfo" @ConfigInfo="firstLoadConfigInfo" @pptJourney="getPptJourney">
       </TravelFeature>
       <!-- 地图 -->
       <div id="thirdMap">
@@ -226,8 +225,8 @@
           TripCountryList: [], //行程国家
           TripCityList: [], //行程城市
           TripMapList: [],
-          NotQueryCityList:[],//使用系统中的经纬度城市
-          FeaturePageType:0,//1横版 2竖版
+          NotQueryCityList: [], //使用系统中的经纬度城市
+          FeaturePageType: 0, //1横版 2竖版
         },
         //行程
         FeatureData: {
@@ -250,6 +249,12 @@
           IsSave: false, //是否保存
           TripColor: "", //行程特色主色
           LtName: "", //系列名称
+          DetailsImageList: '', //行程详情图片
+          TripImageList: '', //行程特色图片
+          IsUploadFeature: 0, //是否上传自定义行程特色
+          IsUploadDetails: 0, //是否上传自定义行程图片
+          TripImageListNew: [], //行程特色图片数组
+          DetailsImageListNew: [], //行程详情图片数组
         },
         //线路行程
         journeyList: {
@@ -340,7 +345,7 @@
           reader.readAsDataURL(e.target.files[0]);
         }
       },
-      getPptJourney(status){
+      getPptJourney(status) {
         this.isPptJourney = status
       },
       /*获取行程特色内容对象*/
@@ -419,7 +424,7 @@
       },
       //提交验证
       submitForm(SaveType) {
-        if(this.FeatureData.FeatureType==9&&!this.isPptJourney){
+        if (this.FeatureData.FeatureType == 9 && !this.isPptJourney) {
           this.Error('请编辑PPT行程并保存');
           return
         }
@@ -440,7 +445,7 @@
         }
       },
       /*保存数据*/
-      SaveData(SaveType,MapUrl) {
+      SaveData(SaveType, MapUrl) {
         this.ShowMap = false
         this.saveLoading = true;
         this.MsgBus.$emit('saveTravel', true);
@@ -729,12 +734,12 @@
           this.journeyList.isFileUpload = true;
           this.journeyList.DayNum = configData.Days.length;
           this.journeyList.NightNum = this.journeyList.DayNum - 1;
-          let arrDayList = function(list){
-            list.forEach(x=>{
+          let arrDayList = function (list) {
+            list.forEach(x => {
               x.IsBlowUp = false
-              if(this.PostConfig.FeaturePageType==2){
+              if (this.PostConfig.FeaturePageType == 2) {
                 x.zoom = 0.40
-              }else if(this.PostConfig.FeaturePageType==1){
+              } else if (this.PostConfig.FeaturePageType == 1) {
                 x.zoom = 0.285
               }
             })
@@ -801,10 +806,16 @@
                   this.FeatureData.ID = tempData.Feature.ID;
                   this.FeatureData.ConfigId = tempData.Feature.ConfigId;
                   this.FeatureData.FeatureType = tempData.Feature.FeatureType;
-                  this.FeatureData.TripImageListNew = tempData.Feature.TripImageListNew;
+
                   this.FeatureData.FeatureImg = tempData.Feature.FeatureImg;
                   this.FeatureData.TemplateId = tempData.Feature.TemplateId;
                   this.FeatureData.FeatureContent = tempData.Feature.FeatureContent;
+                  this.FeatureData.IsUploadDetails = tempData.Feature.IsUploadDetails;
+                  this.FeatureData.IsUploadFeature = tempData.Feature.IsUploadFeature;
+                  this.FeatureData.DetailsImageList = tempData.Feature.DetailsImageList;
+                  this.FeatureData.TripImageList = tempData.Feature.TripImageList;
+                  this.FeatureData.TripImageListNew = tempData.Feature.TripImageListNew;
+                  this.FeatureData.DetailsImageListNew = tempData.Feature.DetailsImageListNew;
                   //图片列表
                   this.FeatureData.fileList = tempData.Feature.FeatureImgList;
                   this.FeatureData.FeatureHtmlJson =
@@ -928,7 +939,8 @@
                 this.PostConfig.TeamType = tempData.TeamType;
                 this.PostConfig.FeaturePageType = tempData.FeaturePageType;
 
-                this.PostConfig.FeatureType = tempData.Feature&&tempData.Feature.FeatureType?tempData.Feature.FeatureType:8
+                this.PostConfig.FeatureType = tempData.Feature && tempData.Feature.FeatureType ? tempData.Feature
+                  .FeatureType : 8
                 //视频地址
                 this.PostConfig.VideoStr = tempData.VideoStr;
                 this.PostConfig.OpenTeamDescribe = tempData.OpenTeamDescribe;
@@ -941,7 +953,7 @@
                 this.PostConfig.TripCountryList = tempData.TripCountryList;
                 this.PostConfig.TripCityList = tempData.TripCityList;
                 this.PostConfig.TripMapList = tempData.TripMapList;
-                this.PostConfig.NotQueryCityList=tempData.NotQueryCityList;
+                this.PostConfig.NotQueryCityList = tempData.NotQueryCityList;
                 this.PostConfig.MapUrl = tempData.MapUrl;
                 let arrList = function (list) {
                   list.forEach(x => {
@@ -999,12 +1011,12 @@
                 this.journeyList.NightNum = tempData.NightNum;
                 this.journeyList.ReturnArriveCityId = tempData.ReturnArriveCityId;
                 this.journeyList.StartCityId = tempData.StartCityId;
-                let arrDayList = function(list){
-                  list.forEach(x=>{
+                let arrDayList = function (list) {
+                  list.forEach(x => {
                     x.IsBlowUp = false
-                    if(tempData.FeaturePageType==2){
+                    if (tempData.FeaturePageType == 2) {
                       x.zoom = 0.40
-                    }else if(tempData.FeaturePageType==1){
+                    } else if (tempData.FeaturePageType == 1) {
                       x.zoom = 0.285
                     }
                   })
@@ -1099,12 +1111,12 @@
       '$route'(to, from) { //监听路由是否变化
         location.reload()
       },
-      PostDaysTrip:{
+      PostDaysTrip: {
         handler: function (val, oldVal) {
 
         },
         deep: true,
-        immediate:true
+        immediate: true
       }
     },
     mounted() {