页面修改

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

 <template>
   <div class="featureControls">
-    <div class="row-aic featureControls-bottom featureControls-bottomOne"
-    v-if="ControlsType=='row'">
+    <div class="row-aic featureControls-bottom featureControls-bottomOne" v-if="ControlsType=='row'">
       <el-tooltip class="item" effect="dark" content="添加页面" placement="top">
         <div @click="toAddPages">
           <i class="el-icon-plus"></i>
@@ -13,15 +12,13 @@
         </div>
       </el-tooltip>
     </div>
-    <div class="column featureControls-bottom featureControls-bottomTwo"
-    v-else>
+    <div class="column featureControls-bottom featureControls-bottomTwo" v-else>
       <div v-if="isTemplate">
         <el-tooltip class="item" effect="dark" content="选模版" placement="top">
           <el-popover trigger="hover" placement="right">
             <div class="featureControls-Template">
-            <div class="Template-img relative" v-for="(item,index) in TemplateList"
-            @click="setTemplate(item)">
-              <img :src="item.url"/>
+              <div class="Template-img relative" v-for="(item,index) in TemplateList" @click="setTemplate(item)">
+                <img :src="item.url" />
                 <div v-if="item.id==TemplateType" class="Template-imgSelect absolute row-ajc el-icon-success"></div>
               </div>
             </div>
@@ -60,50 +57,50 @@
     components: {
 
     },
-    props: ['index','FeatureData','ControlsType','pagesType','isDeletePage',
-    'isUploadImg','isSelectImg','isAddImg','isDeleteImg','isTemplate','Template'],
+    props: ['index', 'FeatureData', 'ControlsType', 'pagesType', 'isDeletePage',
+      'isUploadImg', 'isSelectImg', 'isAddImg', 'isDeleteImg', 'isTemplate', 'Template'
+    ],
     data() {
       return {
         TemplateType: 1,
-        TemplateList:[
-          {
-            url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateOne.png',
-            id:1,
+        TemplateList: [{
+            url: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateOne.png',
+            id: 1,
           },
           {
-            url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateTwo.png',
-            id:2,
+            url: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateTwo.png',
+            id: 2,
           },
           {
-            url:'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateThree.png',
-            id:3,
+            url: 'http://192.168.10.214:8130/Upload/NewTripFeature/featureTemplateThree.png',
+            id: 3,
           }
         ]
       };
     },
     methods: {
-      setTemplate(item){
+      setTemplate(item) {
         this.TemplateType = item.id
-        this.$emit('setTemplate',this.TemplateType)
+        this.$emit('setTemplate', this.TemplateType)
       },
-      toUploadImg(){
+      toUploadImg() {
         this.$emit('toUploadImg')
       },
-      toSelectImg(){
+      toSelectImg() {
         this.$emit('toSelectImg')
       },
-      toAddImg(){
+      toAddImg() {
         this.$emit('toAddImg')
       },
-      toDeleteImg(){
+      toDeleteImg() {
         this.$emit('toDeleteImg')
       },
-      toAddPages(){
+      toAddPages() {
         // this.pagesType 1 首页 2 介绍 3餐食介绍 4宿 5食 6景
-        this.$emit('toAddPages',this.index,this.FeatureData)
+        this.$emit('toAddPages', this.index, this.FeatureData)
       },
-      toDeletePages(){
-        this.$emit('toDeletePages',this.index,this.FeatureData)
+      toDeletePages() {
+        this.$emit('toDeletePages', this.index, this.FeatureData)
       },
     },
     computed: {},
@@ -131,60 +128,71 @@
 </script>
 
 <style>
-.featureControls{
+  .featureControls {
     opacity: 0;
     transition: opacity 2s ease;
     -webkit-transition: opacity 2s ease;
     -moz-transition: opacity 2s ease;
     -ms-transition: opacity 2s ease;
     -o-transition: opacity 2s ease;
-}
-.featureControls-bottom{
+  }
+
+  .featureControls-bottom {
     font-size: 20px;
     color: #fff;
     cursor: pointer;
     background: rgba(0, 0, 0, 0.7);
     border-radius: 2px;
-}
-.featureControls-bottomOne{
+  }
+
+  .featureControls-bottomOne {
     padding: 1px 10px;
-}
-.featureControls-bottomTwo{
+  }
+
+  .featureControls-bottomTwo {
     padding: 5px 0;
-}
-.featureControls-bottomOne div{
+  }
+
+  .featureControls-bottomOne div {
     padding: 0 5px;
-}
-.featureControls-bottomTwo div{
+  }
+
+  .featureControls-bottomTwo div {
     padding: 5px;
-}
-.featureControls-Template{
+  }
+
+  .featureControls-Template {
     width: 150px;
     top: -5px;
     left: 85px;
     background: #fff;
     border: 4px;
-}
-.featureControls-Template div{
+  }
+
+  .featureControls-Template div {
     padding: 0;
-}
-.Template-img{
+  }
+
+  .Template-img {
     background: #e6e6e6;
     margin: 5px 8px;
     border-radius: 4px;
     overflow: hidden;
-}
-.Template-img img{
+  }
+
+  .Template-img img {
     width: 100%;
     padding: 10px;
     display: block;
-}
-.Template-imgSelect{
+  }
+
+  .Template-imgSelect {
     background: rgba(0, 0, 0, 0.7);
     left: 0;
     top: 0;
     right: 0;
     bottom: 0;
     color: #e95252;
-}
+  }
+
 </style>

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

 <template>
   <div class="UpgradedVersion-headerTitle">
     <div class="UpgradedVersion-headerTitle-one absolute z-index1">
-      <vEditDiv :canEdit='canEdit' v-model="first"></vEditDiv>
+      <vEditDiv :canEdit='canEdit' v-model="FeatureItem.dataObj.LtName"></vEditDiv>
     </div>
     <div class="UpgradedVersion-headerTitle-two absolute z-index2">
-      <vEditDiv :canEdit='canEdit1' v-model="first1"></vEditDiv>
+      <vEditDiv :canEdit='canEdit1' v-model="FeatureItem.dataObj.Title"></vEditDiv>
+    </div>
+    <div class="UpgradedVersion-headerTitle-three absolute z-index1" :style="{'background':backgroundColor}">&nbsp;
     </div>
-    <div class="UpgradedVersion-headerTitle-three absolute z-index1"
-    :style="{'background':backgroundColor}">&nbsp;</div>
     <!-- <img class="UpgradedVersion-headerTitle-three absolute z-index1"
     src="http://192.168.10.214:8130/Upload/NewTripFeature/textBj.png" /> -->
   </div>
@@ -21,12 +21,11 @@
     },
     props: [
       'TripColor',
-      'FeatureData'
+      'FeatureItem'
     ],
     data() {
       return {
-        first: '森之京都~椿山庄.风景美术馆日本平系列',
-        first1: '温泉.美食.叡山铁道秋枫漫游之旅',
+
         canEdit: true,
         canEdit1: true,
         backgroundColor: null
@@ -39,7 +38,7 @@
     watch: {
       TripColor: {
         handler(val, oldVal) {
-          this.backgroundColor = this.hexToRgb(val,0.6)
+          this.backgroundColor = this.hexToRgb(val, 0.6)
         },
         deep: false,
         immediate: true
@@ -53,10 +52,11 @@
 </script>
 
 <style>
-.UpgradedVersion-headerTitle{
+  .UpgradedVersion-headerTitle {
     text-align: center;
-}
-.UpgradedVersion-headerTitle-one{
+  }
+
+  .UpgradedVersion-headerTitle-one {
     top: 139px;
     left: 124px;
     right: 124px;
@@ -65,8 +65,9 @@
     font-family: FZCuSong-B09S;
     font-weight: 400;
     color: #2A2A2A;
-}
-.UpgradedVersion-headerTitle-two{
+  }
+
+  .UpgradedVersion-headerTitle-two {
     top: 205px;
     left: 144px;
     right: 144px;
@@ -74,19 +75,24 @@
     font-family: Microsoft YaHei;
     font-weight: 400;
     color: #2A2A2A;
-}
-.UpgradedVersion-headerTitle-one .edit_div,.UpgradedVersion-headerTitle-two .edit_div{
+  }
+
+  .UpgradedVersion-headerTitle-one .edit_div,
+  .UpgradedVersion-headerTitle-two .edit_div {
     white-space: nowrap;
     overflow: hidden;
-}
-.UpgradedVersion-headerTitle-two .edit_div{
+  }
+
+  .UpgradedVersion-headerTitle-two .edit_div {
     height: 40px;
-}
-.UpgradedVersion-headerTitle-three{
+  }
+
+  .UpgradedVersion-headerTitle-three {
     top: 237px;
     left: 370px;
     width: 379px;
     height: 14px;
     border-radius: 7px;
-}
+  }
+
 </style>

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

@@ -10,11 +10,10 @@
         @toAddPages="AddPages" @toDeletePages="DeletePages"></featureHome>
       <!-- 其余页 -->
       <div v-else>
-        <headerTitle :FeatureData="item" :TripColor="TripColor"></headerTitle>
+        <headerTitle :FeatureItem="item" :TripColor="TripColor"></headerTitle>
         <!-- 介绍、宿食景页 -->
-        <otherJourney :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages"
-          @toDeletePages="DeletePages" @setTemplate="setTemplate"
-          v-if="item.name=='介绍'||item.name=='宿'||item.name=='食'||item.name=='景'"></otherJourney>
+        <otherJourney :index="index" :FeatureItem="item" :TripColor="TripColor" @toAddPages="AddPages"
+          @toDeletePages="DeletePages" @setTemplate="setTemplate" v-if="item.pageType!=1"></otherJourney>
         <!-- 食详情页 -->
         <UpgradedVersionDetails :index="index" :FeatureData="item" :TripColor="TripColor" @toAddPages="AddPages"
           @toDeletePages="DeletePages" v-if="item.name=='食详情'"></UpgradedVersionDetails>
@@ -71,43 +70,38 @@
             dataObj: {},
           },
           {
-            name: '介绍',
-            id: 2,
-            type: 2,
-            Template: 0,
+            pageTitle: '介绍',
+            pageType: 2,
+            pageTemplate: 0,
             isDeletePage: false,
-
+            dataObj: {},
           },
           {
-            name: '食详情',
-            id: 3,
-            type: 3,
-            Template: 0,
+            pageTitle: '食详情',
+            pageType: 3,
+            pageTemplate: 0,
             isDeletePage: false,
             dataObj: {},
           },
           {
-            name: '宿',
-            id: 4,
-            type: 4,
+            pageTitle: '宿',
+            pageType: 4,
             isDeletePage: false,
-            Template: 1,
+            pageTemplate: 1,
             dataObj: {},
           },
           {
-            name: '食',
-            id: 5,
-            type: 5,
+            pageTitle: '食',
+            pageType: 5,
             isDeletePage: false,
-            Template: 2,
+            pageTemplate: 2,
             dataObj: {},
           },
           {
-            name: '景',
-            id: 6,
-            type: 6,
+            pageTitle: '景',
+            pageType: 6,
             isDeletePage: false,
-            Template: 3,
+            pageTemplate: 3,
             dataObj: {},
           }
         ]
@@ -156,15 +150,30 @@
                 Title: this.FeatureData.Title,
                 AreaName: "大阪 京都 富士山 伊豆 都 H", //地区
                 AreaName2: "冲绳 大阪城公园湖 伊豆  H", //地区
-                IndexName: "名称",
-                ImgList: [{url:"https://imgfile.oytour.com/Upload/Temporary/202308161225403150000000099.jpg"}],
-                IndexDesc: "描述信息",
+                IndexName: "浅草寺 Senso-ji Temple",
+                ImgList: [{
+                  url: "http://imgfile.oytour.com/Upload/DMC/DsrkBYw5MnQnzk2WzksZ4knrrKFbeP3a.jpg"
+                }],
+                IndexDesc: "东京最著名、最古老的寺庙，也是日本的门脸、浅草的象征。频繁的庙会活动让你零距离感受日本江户风俗。据说寺内有一座在公元628年偶然被当地渔民打捞上来的观音金像，每年都有许多人前来寺庙祈福保平安。院内有雷门、五重塔等著名古迹；还有90余家商铺的仲见世商店街，可以买到当地特产和吉祥物。在浅草寺可以求签问凶吉，如果不走运抽到了“凶”，和当地人一样系在抽签的地方就可以驱散霉运了。",
+              };
+            }
+            //介绍页面
+            else if (pItem.pageType == 2) {
+              pItem.dataObj = {
+                LtName: this.FeatureData.LtName,
+                Title: this.FeatureData.Title,
+                MainName: "日本旅行专家",
+                SubName: "『印象日本』日本豪华游代名词",
+                ImgList: [{
+                  url: "http://imgfile.oytour.com/Upload/DMC/a2Fn2zajwMsxNHaWPdD5idKJD8RyCG5H.jpg"
+                }],
+                IndexDesc: "印象日本独家使用京 都 车 站旁 的 京都 千 饭店 ~酒店房间 37 平 方公 尺！ 房型 多样 设 计， 京都千饭店外观为京町家的格子风格，非常引人注目。饭店以「Personal Comfort Hotel」为概念所打造，意思就是追求每个人入住时的舒适感。从有着庭院的大厅穿过以京町家的内庭长廊为主题所建的信道，便可看见用玻璃纱创作的艺术装置随风轻柔地飘动着。再往旁边一看，眼前只见充满开放感的挑高空间。有如通往神社寺庙大门般的大型阶梯充满了存在感。在柔和的光线包围下，一瞬间忘了自己是身处在建筑物之中。让人联想到京都传统建筑的内部装潢没有刻意的高调奢华，但连小细节都做得非常精致，散发出古都特有的风情。低調沉穩的寬敞客房。讓入住者可以從陽台或窗邊觀賞庭園的綠色景緻，同時享受頂級的休閒時光。 ",
               };
             }
           });
         }
 
-        console.log("this.pageList",this.pageList);
+        console.log("this.pageList", this.pageList);
       },
     },
     computed: {