行程预览

src/components/LeaveGroupDownload/ItineraryFeatures.vue

@@ -10,9 +10,9 @@
       <!--  <div v-if="showType>=4" id="gernalCanvas" style="margin:auto;width:100%" v-html="feature.featureHtml"></div> -->
       <div v-if="showType>=4" id="gernalCanvas" class="slider" style="margin:auto;width:100%">
         <template v-for="(i,index) in feature.tripImageList">
-          <img :key="index" :src="feature.headerImage" style="width:100%;display: block;">
+          <img v-if="dataAll.featurePageType==2" :key="index" :src="feature.headerImage" style="width:100%;display: block;">
           <img :key="index+100000" :src="i" style="width:100%;display: block;">
-          <img :key="index+200000" class="MT19" :src="feature.footerImage" style="width:100%;display: block;">
+          <img v-if="dataAll.featurePageType==2" :key="index+200000" class="MT19" :src="feature.footerImage" style="width:100%;display: block;">
         </template>
       </div>
     </div>
@@ -25,6 +25,7 @@
 
     },
     props: [
+      'dataAll',
       'feature',
       'vshowC',
       'showType'

src/components/LeaveGroupDownload/index.vue

 <template>
   <div id="pdf_1" v-if="orderMsg&&dataAll">
-    <div class="UpgradedVersion-box UpgradedVersion-homebj relative" style="height: 1478px;">
+    <div class="UpgradedVersion-box UpgradedVersion-homebj relative"
+    :style="{'width':dataAll.featurePageType==2?'1123px':'1754px',
+    'height':dataAll.featurePageType==2?'1478px':'1240px'}">
       <div class="absolute z-index1 column" style="left: 0;right: 0; top: 0;bottom: 0;">
-        <Header :TripColor="dataAll&&dataAll.tripColor" :orderMsg="orderMsg"></Header>
-
+        <Header v-if="dataAll.featurePageType==2" :TripColor="dataAll&&dataAll.tripColor" :orderMsg="orderMsg"></Header>
+        <div v-if="dataAll.featurePageType==1" style="height: 92px;"></div>
         <div class="travelDaysTitlle row-aic" :style="{'background':backgroundColor}">
           <div class="travelDaysTitlle-left">
             <div class="relative">

src/components/LeaveGroupDownload/travelDaysHV.vue

+<template>
+  <div id="pdf_3" v-if="vshowD">
+    <div style="width: 1750px;">
+      <template v-for="(i,index) in feature.detailsImageList">
+        <img :key="index+100000" :src="i" style="width:100%;display: block;">
+      </template>
+    </div>
+  </div>
+</template>
+<script>
+  import Header from "./components/header";
+  export default {
+    components: {
+      Header
+    },
+    props: ['dataAll', 'tripList', 'orderMsg', 'orderTripdiff', 'vshowD', 'vshowK','feature'],
+    data() {
+      return {
+        title: '北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）北京-马德里-塞戈维亚-萨拉曼卡-贝尼多姆/小镇-瓦伦西亚-巴塞罗那（约 253km，约 3h）',
+        day: 'DAY',
+        backgroundColor: '',
+        backgroundColor2: '',
+        textColor: '',
+        textColorOne: '',
+      };
+    },
+
+    methods: {
+      getHtmlPlainText(html_str) {
+        //提取字符串中的文字
+        let re = new RegExp('<[^<>]+>', 'g')
+        if (html_str) {
+          let text = html_str.replace(re, '')
+          return text
+        } else {
+          return ''
+        }
+      },
+      getFontSize(title) {
+        let size = 30;
+        if (title && title.length > 0 && title.length > 80) {
+          var tempSize = Number(80) / Number(title.length);
+          tempSize = tempSize * 30;
+          size = tempSize.toFixed(1);
+        }
+        return size + "px";
+      },
+      getImgColor(img, id) {
+        return "#fff"
+      },
+      // 获取图片颜色
+      canvasImgColor(imgs, ids, callback) {
+        var imgSrc = imgs
+        var upload = document.getElementById(ids)
+        const imgEle = document.createElement('img')
+        const canvas = document.createElement('canvas')
+        imgEle.src = imgSrc
+        imgEle.crossOrigin = '';
+        imgEle.onload = () => {
+          var ctx = canvas.getContext("2d");
+          var naturalImgSize = [imgEle.naturalWidth, imgEle.naturalHeight];
+          canvas.width = naturalImgSize[0];
+          canvas.height = naturalImgSize[1];
+
+          //绘制到canvas
+          ctx.drawImage(imgEle, 0, 0);
+          //获取imageData：rgba像素点
+          var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+          const leftSectionData = []
+          const rightSectionData = []
+          const oneLineImgDataLen = canvas.width * 4;
+
+          imgData.data.forEach((colorVal, i) => {
+            if (i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen || i % oneLineImgDataLen >= 0.6 *
+              oneLineImgDataLen) {
+              const inLeft = i % oneLineImgDataLen <= 0.5 * oneLineImgDataLen
+              if (i % 4 === 0) {
+                // 获取rgb均值
+                const curAverageRGB = (imgData.data[i] + imgData.data[i + 1] + imgData.data[i + 2]) / 3;
+                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]
+                ]
+              }
+            }
+          })
+          //generate average rgb
+          const averageOfLeft = Math.round(leftSectionData.reduce((_cur, item) => {
+            return _cur + item[0]
+          }, 0) / leftSectionData.length)
+          const averageOfRight = Math.round(rightSectionData.reduce((_cur, item) => {
+            return _cur + item[0]
+          }, 0) / rightSectionData.length)
+          //find the most near color
+          const findNearestIndex = (averageVal, arrBox) => {
+            let _gapValue = Math.abs(averageVal - arrBox[0])
+            let _nearColorIndex = 0
+            arrBox.forEach((item, index) => {
+              const curGapValue = Math.abs(item - averageVal)
+              if (curGapValue < _gapValue) {
+                _gapValue = curGapValue
+                _nearColorIndex = index
+              }
+            })
+            return _nearColorIndex
+          }
+          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)`
+          callback(upload.style.backgroundColor)
+        }
+      }
+    },
+    computed: {},
+    watch: {
+      dataAll: {
+        handler(val, oldVal) {
+          if (val && val.tripColor) {
+            this.backgroundColor = this.hexToRgb(val.tripColor, 0.2)
+            this.backgroundColor2 = this.hexToRgb(val.tripColor, 0.1)
+            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) {
+              this.textColor = "#fff"
+            } else {
+              this.textColor = "#333"
+            }
+          }
+        },
+        deep: true,
+        immediate: true
+      },
+      tripList: {
+        handler(val, oldVal) {
+
+        },
+        deep: true,
+        immediate: true
+      },
+    },
+    mounted() {
+
+    }
+  };
+
+</script>
+
+<style>
+
+
+</style>

src/components/confirmationOrderDownLoadNew.vue

@@ -38,7 +38,8 @@
 </style>
 
 <template>
-  <div class="travelControlTrip">
+  <div class="travelControlTrip"
+  :style="{'width':dataAll&&dataAll.featurePageType==2?'1123px':'1754px'}">
     <div class="trip_cover" v-show="pdfLoading" v-loading="pdfLoading"></div>
     <el-row style="padding: 0 0 20px 0;box-shadow: 1px 10px 10px#e6e6e6;">
       <el-col :span="14" class="row-aic">
@@ -79,14 +80,14 @@
           :orderMsg="orderMsg" :orderTripdiff="orderTripdiff" :vshowLLR="vshowLLR" :vshowB="vshowB" :lineId="lineId"
           :priceList="priceList">
         </LeaveGroupDownload>
-
         <!-- 行程特色 -->
-        <ItineraryFeatures :feature="feature" :vshowC="vshowC" :showType="showType"></ItineraryFeatures>
+        <ItineraryFeatures :dataAll="dataAll" :feature="feature" :vshowC="vshowC" :showType="showType"></ItineraryFeatures>
 
         <!-- 行程天数 -->
-        <travelDays :dataAll="dataAll" :orderMsg="orderMsg" :orderTripdiff="orderTripdiff" :tripList="tripList"
+        <travelDays v-if="dataAll&&dataAll.featurePageType==2" :dataAll="dataAll" :orderMsg="orderMsg" :orderTripdiff="orderTripdiff" :tripList="tripList"
           :vshowD="vshowD" :vshowK="vshowK" :feature="feature"></travelDays>
-
+        <travelDaysHV v-if="dataAll&&dataAll.featurePageType==1"  :dataAll="dataAll" :orderMsg="orderMsg" :orderTripdiff="orderTripdiff" :tripList="tripList"
+        :vshowD="vshowD" :vshowK="vshowK" :feature="feature"></travelDaysHV>
         <!-- 团队费用说明 -->
         <TourFareDescription :vshowE="vshowE" :vshowF="vshowF" :dataList="dataList" :feature="feature">
         </TourFareDescription>
@@ -209,6 +210,7 @@
   import LeaveGroupDownload from './LeaveGroupDownload/index'
   import ItineraryFeatures from './LeaveGroupDownload/ItineraryFeatures'
   import travelDays from './LeaveGroupDownload/travelDays'
+  import travelDaysHV from './LeaveGroupDownload/travelDaysHV'
   import TourFareDescription from './LeaveGroupDownload/TourFareDescription'
   import OrderNotice from './LeaveGroupDownload/OrderNotice'
   import VisaInformation from './LeaveGroupDownload/VisaInformation'
@@ -221,6 +223,7 @@
       LeaveGroupDownload,
       ItineraryFeatures,
       travelDays,
+      travelDaysHV,
       TourFareDescription,
       OrderNotice,
       VisaInformation
@@ -569,7 +572,7 @@
         //   objFileKey += "/" + msg.configId + "_" + msg.tcid + ".pdf";
         //   that.downloadChengDuFileRename(objFileKey, fileName, res => {
         //     if (res.resultCode == 0) {
-            
+
         //     } else {
         //       that.pdfLoading = false;
         //     }

src/components/newTravelmanager/travelLineTrip/components/travelDaysHV.vue

@@ -960,7 +960,7 @@
   margin-left: 61px;
 }
 .UpgradedVersionHV-box2{
-  width: 1750px;
+  width: 1754px;
   background: #fff;
 }