页面修改

src/components/LeaveGroupDownload/travelDays.vue

@@ -9,8 +9,9 @@
         </div>
       </div>
     </div> -->
-    <div class="UpgradedVersion-box UpgradedVersion-homebj relative"
-    v-for="(item,index) in tripList">
+
+
+    <div class="UpgradedVersion-box UpgradedVersion-homebj relative" v-for="(item,index) in tripList">
       <div class="absolute z-index1 column" style="left: 0;right: 0; top: 0;bottom: 0;">
         <Header :TripColor="dataAll.tripColor" :orderMsg="orderMsg"></Header>
         <div class="travelDaysTitlle row-aic">
@@ -34,25 +35,27 @@
         <div :id="'travelDaysMasterMap_'+index" class="travelDaysMasterMap relative">
           <div class="travelDaysMasterMap-one" :style="{'color':'#fff'}">
             <div class="travelDaysMasterMap-oneImg relative bjF6" :id="'travelDaysImg_one'+index">
-              <img class="absolute" :src="item.details[0].img?item.details[0].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
+              <img class="absolute"
+                :src="item.details[0].img?item.details[0].img:'https://imgfile.oytour.com/Upload/DefalutImage/DMC/defaultairline.png'">
             </div>
             <div class="travelDaysMasterMap-text absolute z-index2">{{item.details[0].title}}</div>
           </div>
           <div class="travelDaysMasterMap-two absolute z-index2">
             <template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgOne">
-            <div class="travelDaysMasterMap-twoImg relative bjF6"
-            :style="{'color':'#fff'}"
+              <div class="travelDaysMasterMap-twoImg relative bjF6" :style="{'color':'#fff'}"
                 :id="'travelDaysImg_two'+index"
                 v-if="(item.details&&item.details.length>1&&item.details[1].img)||(item.jiu2&&item.jiu2.length>0&&item.jiu2[0].url)">
                 <template v-if="item.details.length>1&&item.details[1].img">
-                <img class="" :src="item.details[1].img?item.details[1].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
+                  <img class=""
+                    :src="item.details[1].img?item.details[1].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
                   <div class="travelDaysMasterMap-text textTwo absolute z-index2">
                     【{{item.details[1].title}}】</div>
                 </template>
                 <template v-else>
                   <template v-for="(jiudian,j) in item.jiu2">
                     <template v-if="jiudian.url&&j==0">
-                    <img class="" v-if="jiudian.url" :src="jiudian.url?jiudian.url:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
+                      <img class="" v-if="jiudian.url"
+                        :src="jiudian.url?jiudian.url:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
                       <div class="travelDaysMasterMap-text textTwo absolute z-index2">
                         【{{jiudian.newTitle}}】</div>
                     </template>
@@ -61,12 +64,12 @@
               </div>
             </template>
             <template v-if="item.imgMapId=='travelDaysMasterMap_'+index&&item.showImgTwo">
-            <div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;"
-            :style="{'color':'#fff'}"
+              <div class="travelDaysMasterMap-twoImg relative bjF6" style="margin-top: 47px;" :style="{'color':'#fff'}"
                 :id="'travelDaysImg_three'+index"
                 v-if="(item.details&&item.details.length>2&&item.details[2].img)||(item.jiu2&&item.jiu2.length>1&&item.jiu2[0].url)">
                 <template v-if="item.details.length>2&&item.details[2].img">
-              <img class="" :src="item.details[2].img?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
+                  <img class=""
+                    :src="item.details[2].img?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
                   <div class="travelDaysMasterMap-text textTwo absolute z-index2">
                     【{{item.details[2].title}}】</div>
                 </template>
@@ -74,7 +77,8 @@
                 <template v-else>
                   <template v-for="(jiudian,j) in item.jiu2">
                     <template v-if="jiudian.url&&j==1">
-                  <img class="" v-if="jiudian.url" :src="jiudian.url?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
+                      <img class="" v-if="jiudian.url"
+                        :src="jiudian.url?item.details[2].img:'https://imgfile.oytour.com/Static/NewTripFeature/acquiesce.jpg'">
                       <div class="travelDaysMasterMap-text textTwo absolute z-index2">
                         【{{jiudian.name}}】</div>
                     </template>
@@ -85,27 +89,43 @@
           </div>
         </div>
 
+        <template v-if="item.details&&item.details.length>0">
           <div class="travelDaysContent column">
             <div class="travelDaysContent-text" v-for="(jindian,j) in item.details">
               <span>【{{jindian.title}}】</span>
               {{jindian.content}}
             </div>
           </div>
+        </template>
+        <template v-else>
+          <div class="travelDaysContent column">
+            <div class="travelDaysContent-text">
+              <span>【{{jindian.title}}】</span>
+              {{jindian.content}}
+            </div>
+          </div>
+        </template>
+
 
         <div class="travelDaysdetails absolute">
-        <div class="travelDaysdetailsBJ row"
-        :style="{'background':backgroundColor}">
+          <div class="travelDaysdetailsBJ row" :style="{'background':backgroundColor}">
             <div class="travelDaysdetails-text row">
               <span>早餐：</span>
-            <div><p>{{item.can.breakfirst}}</p></div>
+              <div>
+                <p>{{item.can.breakfirst}}</p>
+              </div>
             </div>
             <div class="travelDaysdetails-text row">
               <span>午餐：</span>
-            <div><p>{{item.can.lanuch}}</p></div>
+              <div>
+                <p>{{item.can.lanuch}}</p>
+              </div>
             </div>
             <div class="travelDaysdetails-text row">
               <span>晚餐：</span>
-            <div><p>{{item.can.dinner}}</p></div>
+              <div>
+                <p>{{item.can.dinner}}</p>
+              </div>
             </div>
             <div class="travelDaysdetails-text row">
               <span>住宿：</span>
@@ -117,8 +137,7 @@
         </div>
         <!-- otherJourney-footer -->
         <div>
-        <div class="otherJourney-introduceFooter absolute z-index1 row-aic"
-          :style="{'background':''}">
+          <div class="otherJourney-introduceFooter absolute z-index1 row-aic" :style="{'background':''}">
             <div class="introduceFooterBJ introduceFooterOne" :style="{'background':dataAll.tripColor}">&nbsp;</div>
             <div class="introduceFooterBJ introduceFootertTwo" :style="{'background':dataAll.tripColor}">&nbsp;</div>
             <div class="introduceFooter-text row-aic">
@@ -142,7 +161,7 @@
     components: {
       Header
     },
-    props: ['dataAll','tripList','orderMsg','orderTripdiff','vshowD','vshowK'],
+    props: ['dataAll', 'tripList', 'orderMsg', 'orderTripdiff', 'vshowD', 'vshowK'],
     data() {
       return {
         title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）',
@@ -154,39 +173,39 @@
     },
 
     methods: {
-      getShow(Id,HeightNum,item){
+      getShow(Id, HeightNum, item) {
         item.imgMapId = Id
-        if(HeightNum>=243){
+        if (HeightNum >= 243) {
           item.showImgOne = true
-        }else{
+        } else {
           item.showImgOne = false
         }
-        if(HeightNum>=478){
+        if (HeightNum >= 478) {
           item.showImgTwo = true
-        }else{
+        } else {
           item.showImgTwo = false
         }
         this.$forceUpdate()
       },
-      getHeigthNum(Id,item){
+      getHeigthNum(Id, item) {
         let that = this
-        setTimeout(()=>{
+        setTimeout(() => {
           var Height = document.getElementById(Id);
-          if(Height){
+          if (Height) {
             let HeightNum = Height.offsetHeight
-            that.getShow(Id,HeightNum,item)
+            that.getShow(Id, HeightNum, item)
           }
-        },300)
+        }, 300)
 
       },
-      getFontSize(title){
-        if(title.length>60){
-          return 929/60 +'px'
-        }else{
+      getFontSize(title) {
+        if (title.length > 60) {
+          return 929 / 60 + 'px'
+        } else {
           return '30px'
         }
       },
-      getImgColor(img,id){
+      getImgColor(img, id) {
         return "#fff"
         return
         // this.canvasImgColor(img,id, (callback) => {
@@ -202,7 +221,7 @@
         // })
       },
       // 获取图片颜色
-    canvasImgColor(imgs,ids, callback) {
+      canvasImgColor(imgs, ids, callback) {
         var imgSrc = imgs
         var upload = document.getElementById(ids)
         const imgEle = document.createElement('img')
@@ -224,7 +243,8 @@
           const oneLineImgDataLen = canvas.width * 4;
 
           imgData.data.forEach((colorVal, i) => {
-              if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 * oneLineImgDataLen) {
+            if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 *
+              oneLineImgDataLen) {
               const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
               if (i % 4 === 0) {
                 // 获取rgb均值
@@ -232,7 +252,9 @@
                 let leftOrRightRef = inLeft ? leftSectionData : rightSectionData;
                 //每个数组里存四个值：本颜色值中的r、g、b的均值，以及r、g、b三个值。
                 //均值一方面用于累加计算本区域的整体均值，然后再跟每个均值对比拿到与整体均值最接近的项的索引，再取该数组里的后三个值：rgb，对应着颜色
-                      leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1], imgData.data[i + 2]]
+                leftOrRightRef[leftOrRightRef.length] = [curAverageRGB, imgData.data[i], imgData.data[i + 1],
+                  imgData.data[i + 2]
+                ]
               }
             }
           })
@@ -258,7 +280,8 @@
           }
           const leftNearestColor = leftSectionData[findNearestIndex(averageOfLeft, leftSectionData)]
           const rightNearestColor = rightSectionData[findNearestIndex(averageOfRight, rightSectionData)]
-          upload.style.backgroundColor = `rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]},1)`
+          upload.style.backgroundColor =
+            `rgba(${leftNearestColor[1]},${leftNearestColor[2]},${leftNearestColor[3]},1) 0%,rgba(${rightNearestColor[1]},${rightNearestColor[2]},${rightNearestColor[3]},1)`
           callback(upload.style.backgroundColor)
         }
       }
@@ -267,15 +290,15 @@
     watch: {
       dataAll: {
         handler(val, oldVal) {
-          if(val&&val.tripColor){
+          if (val && val.tripColor) {
             this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
             let rgba = this.hexToRgb(val.tripColor, 1)
             rgba = rgba.split(',')
             let rgba0 = rgba[0].split('(')
-            let arr = [rgba0[1],rgba[1],rgba[2]]
-            if(this.getRgbLevel(arr)>50){
+            let arr = [rgba0[1], rgba[1], rgba[2]]
+            if (this.getRgbLevel(arr) > 50) {
               this.textColor = "#fff"
-            }else{
+            } else {
               this.textColor = "#333"
             }
           }
@@ -285,8 +308,8 @@
       },
       tripList: {
         handler(val, oldVal) {
-          this.tripList.forEach((x,index)=>{
-            this.getHeigthNum('travelDaysMasterMap_'+index,x)
+          this.tripList.forEach((x, index) => {
+            this.getHeigthNum('travelDaysMasterMap_' + index, x)
           })
         },
         deep: true,