页面修改

src/boot/utils.js

@@ -25,7 +25,7 @@ Vue.prototype.domainManager = function () {
   if (domainNameUrl.indexOf('oytour') !== -1) {
     domainUrl = "http://reborn.oytour.com";
   }
-  //domainUrl = "http://192.168.5.46:8501";
+  //domainUrl = "http://192.168.5.46";
   var obj = {
     //主地址
     DomainUrl: domainUrl,

src/components/base-switch.vue

@@ -55,14 +55,12 @@ export default {
     },
     watch: {
         value: function() {
-          console.log('switch change', this.value)
             this.inputSelect = this.value
         }
     },
     methods: {
         changeSelect() {
             this.inputSelect = !this.inputSelect
-            console.log('changeSelect', this.inputSelect, this.value)
             this.$emit('input', this.inputSelect)
         }
     }

src/components/searchProductdata/kkday.vue

@@ -896,8 +896,9 @@ export default {
     },
 
     GotoDetails(item) {
+      console.log("item",item);
       this.CommonJump(
-        "/detailsProduct/" + encodeURIComponent(item.id) + "/" + item.configId,
+        "/detailsProduct/" + encodeURIComponent(item.id) + "/" + item.configId+"/"+item.teamType,
         {},
         "blank"
       );

src/components/trip/calendarproduct.vue

@@ -8,64 +8,35 @@
           {{ months[currentMonth].display }}
         </div>
         <div>
-          <q-btn
-            color="primary"
-            round
-            icon="iconfont iconpreviewleft"
-            flat
-            @click="changeShowMonthHandler(-1)"
-            class="q-mr-sm"
-            :disable="currentMonth == 0"
-          />
-          <q-btn
-            color="primary"
-            round
-            icon="iconfont iconpreviewright"
-            flat
-            @click="changeShowMonthHandler(1)"
-            :disable="currentMonth == months.length - 1"
-          />
+          <q-btn color="primary" round icon="iconfont iconpreviewleft" flat @click="changeShowMonthHandler(-1)"
+            class="q-mr-sm" :disable="currentMonth == 0" />
+          <q-btn color="primary" round icon="iconfont iconpreviewright" flat @click="changeShowMonthHandler(1)"
+            :disable="currentMonth == months.length - 1" />
         </div>
       </div>
       <div class="q-pa-sm non-selectable" style="border-top: 1px solid #eee">
         <div class="row items-center">
-          <div
-            class="col text-weight-bold text-center"
-            style="padding: 10px 0 20px"
-            v-for="(x, i) in chineseWeek"
-            :key="i"
-          >
+          <!--星期-->
+          <div class="col text-weight-bold text-center" style="padding: 10px 0 20px" v-for="(x, i) in chineseWeek"
+            :key="i">
             {{ x }}
           </div>
         </div>
         <div class="row wrap">
-          <div
-            class="rounded-borders text-center text-weight-bold"
-            :class="{
+          <div class="rounded-borders text-center text-weight-bold" :class="{
               'cursor-pointer hover-date': x.value != '' && x.price,
               'cursor-not-allowed': (!x.price || x.price.remainNum==0) && x.value != '',
               'bg-primary': x.value != '' && x.value == currentDate,
-            }"
-            style="padding: 8px 4px; width: 14.285%"
-            v-for="(x, i) in col"
-            :key="i"
-            @click="chosenDateHandler(x)"
-          >
-            <div
-              class="text-dark"
-              :class="{ 'text-white': x.value == currentDate }"
-              v-if="x.price"
-            >
+            }" style="padding: 8px 4px; width: 14.285%" v-for="(x, i) in dayList" :key="i"
+            @click="chosenDateHandler(x)">
+            <div class="text-dark" :class="{ 'text-white': x.value == currentDate }" v-if="x.price">
               {{ x.display }}
             </div>
             <div class="text-grey-6" v-else>{{ x.display }}</div>
-            <div
-              class="q-mt-sm f12"
-              :class="{
+            <div class="q-mt-sm f12" :class="{
                 'text-grey-1': x.value == currentDate,
                 ' text-grey-6': x.value != currentDate,
-              }"
-            >
+              }">
               {{
                 x.price && x.price.remainNum>0 ? moneyFormat(x.price.originalB2CPrice, 0) :(x.price && x.price.remainNum==0?'售罄':'&nbsp;')
               }}
@@ -78,156 +49,172 @@
 </template>
 
 <script>
-import { date } from "quasar";
-export default {
-  props: ["priceList","tcid"],
-  data() {
-    return {
-      chineseWeek: ["日", "一", "二", "三", "四", "五", "六"],
-      chineseMonth: [
-        "一月",
-        "二月",
-        "三月",
-        "四月",
-        "五月",
-        "6月",
-        "七月",
-        "八月",
-        "九月",
-        "十月",
-        "十一月",
-        "十二月",
-      ],
-      data: [],
-      months: [],
-      currentMonth: 0,
-      col: [],
-      prices: [],
-      currentDate: "",
-    };
-  },
-  watch: {
-    priceList: {
-      handler(newVal, oldValue) {
-        this.prices = newVal;
-        this.init();
+  import {
+    date
+  } from "quasar";
+  export default {
+    props: ["priceList", "tcid", "dataList"],
+    data() {
+      return {
+        chineseWeek: ["日", "一", "二", "三", "四", "五", "六"],
+        chineseMonth: [
+          "一月",
+          "二月",
+          "三月",
+          "四月",
+          "五月",
+          "6月",
+          "七月",
+          "八月",
+          "九月",
+          "十月",
+          "十一月",
+          "十二月",
+        ],
+        data: [],
+        months: [],
+        currentMonth: 0,
+        dayList: [],
+        prices: [],
+        currentDate: "",
+      };
+    },
+    watch: {
+      priceList: {
+        handler(newVal, oldValue) {
+          this.prices = newVal;
+          this.init();
+        },
+        deep: true, // 深度监听
       },
-      deep: true, // 深度监听
     },
-  },
-  created() {
-    this.prices = this.priceList;
-    console.log(this.prices)
-    this.init();
-  },
-  methods: {
-    init() {
-      this.createChosenDateHandler();
-      let startDate = this.prices.length>0&&this.prices[0].startDate?this.prices[0].startDate:''
-      let firstMonth = date.formatDate(
-        new Date(startDate),
-        "YYYY/MM"
-      );
-      console.log(firstMonth)
-      let current = this.months.findIndex((x) => x.monthValue == firstMonth)
-      this.currentMonth = current>-1?current:0;
-      this.changeMonthHandler();
-
+    created() {
+      this.prices = this.priceList;
+      this.init();
     },
-    createChosenDateHandler() {
-      let beginDate = new Date();
-      let endDate = date.addToDate(beginDate, { years: 1 });
-      while (beginDate <= endDate) {
-        let i = parseInt(date.formatDate(beginDate, "M")) - 1;
-        this.months.push({
-          value: date.formatDate(beginDate, "YYYY/MM/DD"),
-          monthValue: date.formatDate(beginDate, "YYYY/MM"),
-          display: `${date.formatDate(beginDate, "YYYY")} ${
+    methods: {
+      init() {
+        this.createChosenDateHandler();
+        let startDate = this.prices.length > 0 && this.prices[0].startDate ? this.prices[0].startDate : ''
+        let firstMonth = date.formatDate(
+          new Date(startDate),
+          "YYYY/MM"
+        );
+        //当前团期所在的月份
+        if (this.dataList && this.dataList.currentPriceInfo && this.dataList.currentPriceInfo.startDate) {
+          firstMonth = date.formatDate(
+            new Date(this.dataList.currentPriceInfo.startDate),
+            "YYYY/MM"
+          );
+        }
+        let current = this.months.findIndex((x) => x.monthValue == firstMonth)
+        this.currentMonth = current > -1 ? current : 0;
+        this.changeMonthHandler();
+      },
+      createChosenDateHandler() {
+        let beginDate = new Date();
+        let endDate = date.addToDate(beginDate, {
+          years: 1
+        });
+        while (beginDate <= endDate) {
+          let i = parseInt(date.formatDate(beginDate, "M")) - 1;
+          this.months.push({
+            value: date.formatDate(beginDate, "YYYY/MM/DD"),
+            monthValue: date.formatDate(beginDate, "YYYY/MM"),
+            display: `${date.formatDate(beginDate, "YYYY")} ${
             this.chineseMonth[i]
           }`,
-        });
-        beginDate = date.addToDate(beginDate, { months: 1 });
-      }
-    },
-    changeShowMonthHandler(i) {
-      this.currentMonth += i;
-      let value = this.months[this.currentMonth].value
-      this.$emit('getQuotationData',value)
-      this.changeMonthHandler();
-    },
-    changeMonthHandler() {
-      try {
-        this.col = [];
-        let newDate = new Date(this.months[this.currentMonth].monthValue+'/01');
-        let newBeginDate = date.startOfDate(newDate, "month");
-        let newEndDate = date.endOfDate(newDate, "month");
-        for (let i = 0; i < date.formatDate(newBeginDate, "d"); i++) {
-          this.col.push({
-            value: "",
           });
-        }
-        while (newBeginDate <= newEndDate) {
-          let value = date.formatDate(newBeginDate, "YYYY-MM-DD");
-          let price = this.prices.find((x) => x.startDate == value);
-          this.col.push({
-            value,
-            display: date.formatDate(newBeginDate, "DD"),
-            price,
+          beginDate = date.addToDate(beginDate, {
+            months: 1
           });
-          newBeginDate = date.addToDate(newBeginDate, { days: 1 });
-          // 默认日期 价格
-          let InitialOption = false
-          for(let i=0;i<this.col.length;i++){
-            if(this.tcid&&this.tcid.length>0){
-              if (!InitialOption&&this.col[i].price && this.col[i].price.id===this.tcid) {
-              this.currentDate = this.col[i].value;
-              this.$emit("change", this.col[i]);
-              InitialOption = true
-            }
-            }
-            else{
-              if (!InitialOption&&this.col[i].price && this.col[i].price.remainNum>0) {
-              this.currentDate = this.col[i].value;
-              this.$emit("change", this.col[i]);
-              InitialOption = true
+        }
+      },
+      changeShowMonthHandler(i) {
+        this.currentMonth += i;
+        let value = this.months[this.currentMonth].value
+        this.$emit('getQuotationData', value)
+        this.changeMonthHandler();
+      },
+      changeMonthHandler() {
+        try {
+          this.dayList = [];
+          let newDate = new Date(this.months[this.currentMonth].monthValue + '/01');
+          let newBeginDate = date.startOfDate(newDate, "month");
+          let newEndDate = date.endOfDate(newDate, "month");
+          for (let i = 0; i < date.formatDate(newBeginDate, "d"); i++) {
+            this.dayList.push({
+              value: "",
+            });
+          }
+          while (newBeginDate <= newEndDate) {
+            let value = date.formatDate(newBeginDate, "YYYY-MM-DD");
+            let price = this.prices.find((x) => x.startDate == value);
+            let tempPriceList = this.prices.filter((x) => x.startDate == value);
+            if (tempPriceList && tempPriceList.length > 0) {
+              console.log("tempPriceList", tempPriceList);
             }
+
+            this.dayList.push({
+              value,
+              display: date.formatDate(newBeginDate, "DD"),
+              price,
+            });
+            newBeginDate = date.addToDate(newBeginDate, {
+              days: 1
+            });
+            // 默认日期 价格
+            let InitialOption = false
+            for (let i = 0; i < this.dayList.length; i++) {
+              if (this.tcid && this.tcid.length > 0) {
+                if (!InitialOption && this.dayList[i].price && this.dayList[i].price.id === this.tcid) {
+                  this.currentDate = this.dayList[i].value;
+                  this.$emit("change", this.dayList[i]);
+                  InitialOption = true
+                }
+              } else {
+                if (!InitialOption && this.dayList[i].price && this.dayList[i].price.remainNum > 0) {
+                  this.currentDate = this.dayList[i].value;
+                  this.$emit("change", this.dayList[i]);
+                  InitialOption = true
+                }
+              }
             }
-            
           }
+          let after = 6 - date.formatDate(newBeginDate, "d");
+          for (let i = 0; i < after; i++) {
+            this.dayList.push({
+              value: "",
+            });
+          }
+        } catch (error) {
+          alert(error)
         }
-        let after = 6 - date.formatDate(newBeginDate, "d");
-        for (let i = 0; i < after; i++) {
-          this.col.push({
-            value: "",
-          });
-        }
-      } catch (error) {
-        alert(error)
-      }
-    },
-    chosenDateHandler(item) {
-      if (item.price && item.price.remainNum>0) {
-        this.currentDate = item.value;
-        this.$emit("change", item);
-      }
-    },
-    changePriceHandler(dateStr,money){
-      //this.currentDate.price.originalB2CPrice=money
-      this.col.forEach(x=>{
-        if(x.value==dateStr){
-          x.price.originalB2CPrice=money
+      },
+      chosenDateHandler(item) {
+        if (item.price && item.price.remainNum > 0) {
+          this.currentDate = item.value;
+          this.$emit("change", item);
         }
-      })
-    },
-    reset() {
-      this.currentDate = "";
+      },
+      changePriceHandler(dateStr, money) {
+        this.dayList.forEach(x => {
+          if (x.value == dateStr) {
+            x.price.originalB2CPrice = money
+          }
+        })
+      },
+      reset() {
+        this.currentDate = "";
+      },
     },
-  },
-};
+  };
+
 </script>
 
 <style>
-.hover-date:hover {
-  background: #eee;
-}
+  .hover-date:hover {
+    background: #eee;
+  }
+
 </style>

src/components/trip/flight.vue

@@ -82,7 +82,7 @@ export default {
     price: {
       handler(n, o) {
         this.m = n;
-        console.log(n)
+        console.log("flight",n)
       },
       deep: true,
       immediate: true,

src/components/trip/smaple.vue

@@ -2,47 +2,44 @@
   <div class="q-mt-md" :class="{'q-px-md':$q.platform.is.mobile}">
     <div class="text-subtitle2 text-weight-bold">產品概要</div>
     <div class="row q-pt-md q-col-gutter-md">
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="traffic!=''">
-          <div class="q-mr-md col-3">往返交通：</div>
-          <div class="col text-grey-6">{{ traffic }}</div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
+        v-if="traffic!=''">
+        <div class="q-mr-md col-3">往返交通：</div>
+        <div class="col text-grey-6">{{ traffic }}</div>
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
+        v-if="hotel!=''">
+        <div class="q-mr-md col-3">酒店住宿：</div>
+        <div class="col text-grey-6">{{ hotel }}</div>
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
+        <div class="q-mr-md col-3">購物：</div>
+        <div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div>
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
+        v-if="team!=''">
+        <div class="q-mr-md col-3">團隊人數：</div>
+        <div class="col text-grey-6">{{ team }}</div>
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
+        <div class="q-mr-md col-3">景點：</div>
+        <div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div>
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
+        <div class="q-mr-md col-3">自費項目：</div>
+        <div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}
         </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="hotel!=''">
-          <div class="q-mr-md col-3">酒店住宿：</div>
-          <div class="col text-grey-6">{{ hotel }}</div>
-        </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
-          <div class="q-mr-md col-3">購物：</div>
-          <div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div>
-        </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="team!=''">
-          <div class="q-mr-md col-3">團隊人數：</div>
-          <div class="col text-grey-6">{{ team }}</div>
-        </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
-          <div class="q-mr-md col-3">景點：</div>
-          <div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div>
-        </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
-          <div class="q-mr-md col-3">自費項目：</div>
-          <div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}</div>
-        </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"  v-if="trip.freedomList.length>0">
-          <div class="q-mr-md col-3">自由活動：</div>
-          <div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div>
-        </div>
-        <div class="row items-center q-pt-mb"
-        :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
-          <div class="q-mr-md col-3">餐食：</div>
-          <div class="col text-grey-6">{{ dinner }}</div>
-        </div>
-        <!-- <div class="row items-center q-pt-mb"
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
+        v-if="trip.freedomList.length>0">
+        <div class="q-mr-md col-3">自由活動：</div>
+        <div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div>
+      </div>
+      <div class="row items-center q-pt-mb" :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
+        <div class="q-mr-md col-3">餐食：</div>
+        <div class="col text-grey-6">{{ dinner }}</div>
+      </div>
+      <!-- <div class="row items-center q-pt-mb"
         :class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
           <div class="q-mr-md col-3">服務用語</div>
           <div class="col text-grey-6">普通話/日本語</div>
@@ -52,83 +49,98 @@
 </template>
 
 <script>
-export default {
-  props: ["trip"],
-  data() {
-    return {
-      traffic: "",
-      stars:['一星酒店','二星酒店','三星酒店','四星酒店','五星酒店','六星酒店','七星酒店','民宿','溫泉酒店'],
-      hotel:'',
-      team: '',
-      dinner: ''
-    };
-  },
-  created() {
-    this.formatTraffic()
-    this.formatHotel()
-    this.formatTeam()
-    this.formatDinner()
-  },
-  methods: {
-    formatTeam(){
-      let p = this.trip.priceList[0]
-      if(!p) return
-      let t = p.priceTeamType??1
-      t=t==0?1:t
-      if(t==1){
-        this.team = `${p.seat}人團隊散拼`
-      }else{
-        this.team = '一单一团'
-      }
+  export default {
+    props: ["trip"],
+    data() {
+      return {
+        traffic: "",
+        stars: ['一星酒店', '二星酒店', '三星酒店', '四星酒店', '五星酒店', '六星酒店', '七星酒店', '民宿', '溫泉酒店'],
+        hotel: '',
+        team: '',
+        dinner: ''
+      };
     },
-    formatDinner(){
-      let d = []
-      this.trip.dinnerList.forEach(x=>{
-        if(x.dinnerName.indexOf('自理')==-1 && x.dinnerName.indexOf('请选择')==-1){
-          d.push(x)
+    created() {
+      this.formatTraffic()
+      this.formatHotel()
+      this.formatTeam()
+      this.formatDinner()
+      console.log("trip", this.trip);
+    },
+    methods: {
+      formatTeam() {
+        let p = this.trip.priceList[0]
+        if (!p) return
+        let t = 0;
+        if (p && p.priceTeamType) {
+          t = p.priceTeamType
+        }
+        t = t == 0 ? 1 : t
+        if (t == 1) {
+          this.team = `${p.seat}人團隊散拼`
+        } else {
+          this.team = '一单一团'
         }
-      })
-      if(d && d.length>0){
-        let g=this.groupBy(d,x=>{ return x.useDinnerType})
-        let t = ['早餐','午餐','晚餐']
-        g.forEach(x=>{
-          this.dinner+=`${x.data.length}次 ${t[parseInt(x.key)-1]}；`
+      },
+      formatDinner() {
+        let d = []
+        this.trip.dinnerList.forEach(x => {
+          if (x.dinnerName.indexOf('自理') == -1 && x.dinnerName.indexOf('请选择') == -1 && x.dinnerId > 0) {
+            d.push(x)
+          }
         })
-      }else{
-        this.dinner = '無餐食供應'
-      }
-    },
-    formatTraffic() {
-      if(this.trip.trafficList && this.trip.trafficList.length>0 && this.trip.trafficList[0].subTraffic && this.trip.trafficList[0].subTraffic.length>0){
-        let z = this.trip.trafficList[0].subTraffic[0]
-        if (z&&z.arrivalType&&z.arrivalType == 1) {
-          this.traffic = '飛機往返';
-        } else if (z&&z.arrivalType&&z.arrivalType == 2) {
-          this.traffic = '巴士往返';
-        } else if (z&&z.arrivalType&&z.arrivalType == 3) {
-          this.traffic = '郵輪往返';
+        if (d && d.length > 0) {
+          let g = this.groupBy(d, x => {
+            return x.useDinnerType
+          })
+          let t = ['早餐', '午餐', '晚餐']
+          g.forEach(x => {
+            this.dinner += `${x.data.length}次 ${t[parseInt(x.key)-1]}；`
+          })
         } else {
-          this.traffic = '高鐵往返';
+          this.dinner = '無餐食供應'
         }
-      }
-      
-    },
-    formatHotel(){
-      let h = []
-      this.trip.hotelList.forEach(x=>{
-        if(h.findIndex(y=>y.dayNum==x.dayNum)==-1){
-          h.push(x)
+      },
+      formatTraffic() {
+        if (this.trip.trafficList && this.trip.trafficList.length > 0 && this.trip.trafficList[0].subTraffic && this
+          .trip.trafficList[0].subTraffic.length > 0) {
+          let z = this.trip.trafficList[0].subTraffic[0]
+          if (z && z.arrivalType && z.arrivalType == 1) {
+            this.traffic = '飛機往返';
+          } else if (z && z.arrivalType && z.arrivalType == 2) {
+            this.traffic = '巴士往返';
+          } else if (z && z.arrivalType && z.arrivalType == 3) {
+            this.traffic = '郵輪往返';
+          } else {
+            this.traffic = '高鐵往返';
+          }
         }
-      })
-      if(h && h.length>0){
-        let g = this.groupBy(h,(x)=>{return x.star})
-        g.forEach(x=>{
-          this.hotel+=`${x.data.length}晚${this.stars[parseInt(x.key)-1]?this.stars[parseInt(x.key)-1]:''}；`
+      },
+      formatHotel() {
+        let h = []
+        this.trip.hotelList.forEach(x => {
+          if (h.findIndex(y => y.dayNum == x.dayNum) == -1) {
+            h.push(x)
+          }
         })
+        console.log("h", h);
+        if (h && h.length > 0) {
+          let g = this.groupBy(h, (x) => {
+            return x.star
+          })
+          g.forEach(x => {
+            let tempStr = this.stars[parseInt(x.key) - 1];
+            console.log("", tempStr)
+            if (tempStr && tempStr != '') {
+              this.hotel += `${x.data.length}晚${ tempStr}；`
+            }
+
+          })
+        }
       }
-    }
-  },
-};
+    },
+  };
+
 </script>
 
 <style></style>

src/components/trip/startCity.vue

@@ -4,7 +4,6 @@
     <div class="text-grey-6 f12 q-my-sm">此行程包含多個出發城市</div>
     <div class="row q-col-gutter-md">
         <div  v-for="(x,i) in m.unionCityList" :key="i"><q-chip size="14px" square>{{ x.cityName }}</q-chip></div>
-        
     </div>
   </div>
 </template>
@@ -16,7 +15,7 @@ export default {
     price: {
       handler(n, o) {
         this.m = n;
-        console.log(n)
+        console.log("startCity",n)
       },
       deep: true,
       immediate: true,

src/pages/detailsProduct.vue

 <template>
   <div class="" style="min-height: 80vh; overflow: hidden">
-    <div
-      v-if="dataList && (!$q.loading.isActive || loadCount>0)"
-      class="relative"
-      style="margin: auto"
-      :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
-    >
-      <div
-        style="
+    <div v-if="dataList && (!$q.loading.isActive || loadCount>0)" class="relative" style="margin: auto"
+      :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }">
+      <div style="
           position: fixed;
           left: 0;
           right: 0;
@@ -15,128 +10,60 @@
           border-top: 1px solid #eee;
           box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
           z-index: 999;
-        "
-        class="bg-white"
-        v-if="
+        " class="bg-white" v-if="
           (currentHeight > navs[0].top + 100 && $q.platform.is.desktop) ||
           (currentHeight > priceListHeight &&
             currentHeight < navs[0].top &&
             $q.platform.is.mobile)
-        "
-        :style="{ transform: stickyHeight }"
-      >
-        <div
-          style="max-width: 1200px; margin-left: auto; margin-right: auto"
-          :class="{ 'q-px-md': $q.screen.width < 1220 }"
-          class="q-py-sm row items-center"
-        >
-          <span
-            class="col product-price text-subtitle1 text-weight-bold"
-            style="text-align: left"
-            v-if="dataList.priceList.length > 0"
-          >
+        " :style="{ transform: stickyHeight }">
+        <div style="max-width: 1200px; margin-left: auto; margin-right: auto"
+          :class="{ 'q-px-md': $q.screen.width < 1220 }" class="q-py-sm row items-center">
+          <span class="col product-price text-subtitle1 text-weight-bold" style="text-align: left"
+            v-if="dataList.priceList.length > 0">
             <span>CNY {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
             <span class="q-ml-sm f12 text-grey-7">起</span>
           </span>
-          <q-btn
-            color="primary"
-            unelevated
-            class="q-px-xl"
-            label="選擇方案"
-            @click="goScrollHandler(priceListHeight)"
-          />
+          <q-btn color="primary" unelevated class="q-px-xl" label="選擇方案" @click="goScrollHandler(priceListHeight)" />
         </div>
       </div>
-      <div
-        v-if="dataList"
-        style="margin-left: auto; margin-right: auto"
+      <div v-if="dataList" style="margin-left: auto; margin-right: auto"
         :style="{ 'max-width': $q.platform.is.desktop ? '1200px' : '100%' }"
-        :class="{ 'q-px-md': $q.screen.width < 1220 }"
-      >
+        :class="{ 'q-px-md': $q.screen.width < 1220 }">
         <div class="row items-center q-mt-md q-mb-lg">
-          <q-breadcrumbs
-            class="col f12 no-wrap q-mr-md"
-            v-if="dataList"
-            style="font-size: 13px"
-          >
-            <q-breadcrumbs-el
-              icon="home"
-              label="首頁"
-              class="cursor-pointer"
-              @click="CommonJump('/index', {})"
-            />
+          <q-breadcrumbs class="col f12 no-wrap q-mr-md" v-if="dataList" style="font-size: 13px">
+            <q-breadcrumbs-el icon="home" label="首頁" class="cursor-pointer" @click="CommonJump('/index', {})" />
             <q-breadcrumbs-el :label="dataList.aimPlaceName" class="cursor-pointer" />
-
-            <q-breadcrumbs-el
-              v-if="$q.platform.is.desktop"
-              :label="dataList.title"
-              class="text-grey-6 ellipsis"
-            />
+            <q-breadcrumbs-el v-if="$q.platform.is.desktop" :label="dataList.title" class="text-grey-6 ellipsis" />
           </q-breadcrumbs>
           <div class="text-grey-6 f12">Product No. # {{ dataList.id }}</div>
         </div>
         <div style="padding-bottom: calc((100% - 0px) / 3); position: relative">
-          <div
-            style="position: absolute; left: 0; top: 0; right: 0; bottom: 0"
-            class="overflow-hidden rounded-borders"
-          >
-            <slider
-              ref="slider"
-              :options="options"
-              @slide="slideHandler"
-              style="height: 100%"
-            >
-              <slideritem
-                v-if="dataList.videoStr"
-                style="width: 80%"
-                class="q-mx-sm"
-                key="video"
-              >
-                <vue-core-video-players
-                  ref="video"
-                  :src="dataList.videoStr"
-                  :title="dataList.title"
-                  :muted="true"
-                  :autoplay="false"
-                  @play="playHandler"
-                  @pause="pauseHandler"
-                  @seeked="seekedChangeHandler"
-                  @timeupdate="timeChangeHandler"
-                  logo="../statics/img/transparent_logo.png"
-                  :loop="false"
-                  id="trip_video"
-                />
+          <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" class="overflow-hidden rounded-borders">
+            <slider ref="slider" :options="options" @slide="slideHandler" style="height: 100%">
+              <slideritem v-if="dataList.videoStr" style="width: 80%" class="q-mx-sm" key="video">
+                <vue-core-video-players ref="video" :src="dataList.videoStr" :title="dataList.title" :muted="true"
+                  :autoplay="false" @play="playHandler" @pause="pauseHandler" @seeked="seekedChangeHandler"
+                  @timeupdate="timeChangeHandler" logo="../statics/img/transparent_logo.png" :loop="false"
+                  id="trip_video" />
               </slideritem>
-              <slideritem
-                v-for="(item, index) in dataList.imgCover"
-                :key="index"
-                style="width: 80%"
-                class="q-mx-sm"
-              >
+              <slideritem v-for="(item, index) in dataList.imgCover" :key="index" style="width: 80%" class="q-mx-sm">
                 <q-img :src="item.Url" spinner-color="grey" spinner-size="20px" />
               </slideritem>
               <div slot="loading">loading...</div>
             </slider>
           </div>
         </div>
-        <div
-          class="q-py-lg"
-          :class="{
+        <div class="q-py-lg" :class="{
             row: $q.platform.is.desktop,
             column: $q.platform.is.mobile,
-          }"
-          style="border-bottom: 1px solid #eee"
-        >
+          }" style="border-bottom: 1px solid #eee">
           <div class="col q-mr-lg">
             <div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
             <div class="q-mt-md f12 text-grey-6">
               <q-icon name="iconfont icondingweixiao" size="16px" class="q-mr-sm" />
-              <span
-                >{{ dataList.aimPlaceName }}
-
+              <span>{{ dataList.aimPlaceName }}
                 <template v-if="citys.length > 0">
                   <span class="q-mx-sm">途徑：</span>
-
                   <span v-for="(x, i) in citys" :key="i">
                     <span class="cursor-pointer">{{ x }} </span>
                     <span v-if="i + 1 != citys.length" class="q-mr-sm">,</span>
@@ -145,69 +72,35 @@
               </span>
             </div>
             <div class="q-mt-md row">
-              <q-chip
-                class="transparent q-mr-xl no-padding"
-                square
-                icon="iconfont iconOwner-1"
-                label=" 直營產品"
-              />
-              <q-chip
-                v-if="dataList.dayList"
-                class="transparent q-mr-xl no-padding"
-                square
-                icon="iconfont icontime"
-                :label="` 行程時間 ${dataList.dayList.length} 天`"
-              />
-              <q-chip
-                class="transparent q-mr-xl no-padding"
-                square
-                icon="iconfont iconcancel"
-                label="取消需二次確認"
-              />
+              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconOwner-1" label="直營產品" />
+              <q-chip v-if="dataList.dayList" class="transparent q-mr-xl no-padding" square icon="iconfont icontime"
+                :label="` 行程時間 ${dataList.dayList.length} 天`" />
+              <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" label="取消需二次確認" />
             </div>
           </div>
-          <div
-            :style="{ width: $q.platform.is.mobile ? '100%' : '293px' }"
-            class="bg-grey-3 rounded-borders q-px-md"
+          <div :style="{ width: $q.platform.is.mobile ? '100%' : '293px' }" class="bg-grey-3 rounded-borders q-px-md"
             :class="{
               'q-py-lg': $q.platform.is.desktop,
               'row justify-between items-center q-mt-sm q-py-sm': $q.platform.is.mobile,
-            }"
-          >
+            }">
+           
             <div class="product-price text-h6" v-if="dataList.priceList.length > 0">
               CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}
               <span class="f12 text-grey-6">起</span>
             </div>
             <div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
-            <q-btn
-              color="primary"
-              label="選擇方案"
-              unelevated
-              :disable="dataList.priceList.length > 0 ? false : true"
-              @click="goScrollHandler(priceListHeight)"
-              :class="{ 'q-mt-md full-width': $q.platform.is.desktop }"
-            />
+            <q-btn color="primary" label="選擇方案" unelevated :disable="dataList.priceList.length > 0 ? false : true"
+              @click="goScrollHandler(priceListHeight)" :class="{ 'q-mt-md full-width': $q.platform.is.desktop }" />
           </div>
         </div>
         <div class="q-mt-lg" v-if="dataList.productRecommend">
-          <div
-            class="q-mt-sm"
-            v-for="(x, i) in dataList.productRecommend.split('\n')"
-            :key="i"
-          >
-            <q-icon
-              name="iconfont iconhongqi"
-              color="primary"
-              size="16px"
-              class="q-mr-md"
-            />
+          <div class="q-mt-sm" v-for="(x, i) in dataList.productRecommend.split('\n')" :key="i">
+            <q-icon name="iconfont iconhongqi" color="primary" size="16px" class="q-mr-md" />
             {{ x }}
           </div>
         </div>
       </div>
-      <div
-        class="bg-white"
-        style="
+      <div class="bg-white" style="
           position: fixed;
           left: 0;
           right: 0;
@@ -215,88 +108,44 @@
           border-top: 1px solid #eee;
           box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
           z-index: 999;
-        "
-        v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile"
-        :style="{ transform: stickyHeight }"
-      >
-        <q-tabs
-          v-model="tab"
-          dense
-          class="text-grey"
-          active-color="primary"
-          indicator-color="primary"
-          align="left"
-          narrow-indicator
-        >
-          <q-tab
-            v-for="(x, i) in navs"
-            :key="i"
-            @click="goScrollHandler(x.top + 20)"
-            :name="x.display"
-            :label="x.display"
-          ></q-tab>
+        " v-if="currentHeight > priceListHeight + 800 && $q.platform.is.mobile" :style="{ transform: stickyHeight }">
+        <q-tabs v-model="tab" dense class="text-grey" active-color="primary" indicator-color="primary" align="left"
+          narrow-indicator>
+          <q-tab v-for="(x, i) in navs" :key="i" @click="goScrollHandler(x.top + 20)" :name="x.display"
+            :label="x.display"></q-tab>
         </q-tabs>
       </div>
       <div v-if="dataList" class="q-pa-lg bg-grey-3 q-mt-lg text-grey-9" ref="pricelist">
         <div style="max-width: 1200px; margin-left: auto; margin-right: auto">
           <div class="text-h6">選擇方案</div>
-          <div
-            class="rounded-borders bg-white q-pa-md q-mt-md"
-            v-if="$q.platform.is.mobile"
-          >
+          <div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile">
             <q-field class="q-mt-md" stack-label label="選擇日期、選項" standout dense>
               <div class="self-center full-width no-outline" tabindex="0">
                 {{ currentPrice.startDate }}
               </div>
               <q-popup-proxy ref="qDateProxy">
-                <calendar v-loading="calLoading"
-                  class="bg-white q-pa-md"
-                  :priceList="dataList.priceList"
-                  @change="changeChosenDateHandler"
-                  ref="calendarMobile"
-                ></calendar>
+                <calendar v-loading="calLoading" class="bg-white q-pa-md" :priceList="dataList.priceList"
+                  @change="changeChosenDateHandler" ref="calendarMobile"></calendar>
               </q-popup-proxy>
             </q-field>
-            <order-preview
-              :travel="dataList"
-              :price="currentPrice"
-              @reset="resetHandler"
-              @changeCity="changeCityHandler"
-              v-if="currentPrice && currentPrice.startDate"
-            ></order-preview>
+            <order-preview :travel="dataList" :price="currentPrice" @reset="resetHandler"
+              @changeCity="changeCityHandler" v-if="currentPrice && currentPrice.startDate"></order-preview>
           </div>
 
           <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">所選方案詳情</div>
-          <div
-            class="bg-white rounded-borders q-mt-md"
-            v-if="dataList.priceList.length > 0"
-          >
+          <div class="bg-white rounded-borders q-mt-md" v-if="dataList.priceList.length > 0">
             <div class="q-pa-md row">
               <div class="col">
-                <div
-                  class="text-subtitle1 text-weight-bold row items-center"
-                  v-if="$q.platform.is.desktop"
-                >
+                <div class="text-subtitle1 text-weight-bold row items-center" v-if="$q.platform.is.desktop">
                   <span class="q-mr-md">行程標準出行方案</span>
-                  <q-chip
-                    square
-                    color="orange"
-                    size="sm"
-                    text-color="grey-2"
-                    class="text-light"
-                    label="取消需二次確認"
-                  />
+                  <q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" label="取消需二次確認" />
                 </div>
                 <div class="text-grey f12">
                   <ul class="q-pl-md no-margin">
-                    <li
-                      v-for="(x, i) in warnBuy"
-                      :class="{
+                    <li v-for="(x, i) in warnBuy" :class="{
                         'q-mt-md':
                           $q.platform.is.desktop | (i != 0 && $q.platform.is.mobile),
-                      }"
-                      :key="i"
-                    >
+                      }" :key="i">
                       {{ x }}
                     </li>
                   </ul>
@@ -304,61 +153,31 @@
               </div>
               <div class="" v-if="$q.platform.is.desktop">
                 <div class="row items-center">
-                  <span
-                    class="product-price text-h6 q-mr-md"
-                    v-if="dataList.priceList.length > 0"
-                    >CNY
-                    {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span
-                  >
-                  <q-btn
-                    color="primary"
-                    outline
-                    :label="showOrderPreview ? '取消選擇' : '選擇'"
-                    @click="changeShowOrderPreviewHandler"
-                    class="q-px-lg"
-                  />
+                  <span class="product-price text-h6 q-mr-md" v-if="dataList.priceList.length > 0">CNY
+                    {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
+                  <q-btn color="primary" outline :label="showOrderPreview ? '取消選擇' : '選擇'"
+                    @click="changeShowOrderPreviewHandler" class="q-px-lg" />
                 </div>
                 <div class="text-info q-mt-md text-right">
                   最早可預訂日期：{{ dataList.priceList[0].startDate }}
                 </div>
               </div>
             </div>
-            <div
-              class="q-pa-md"
-              style="border-top: 1px solid #eee"
-              v-if="showOrderPreview"
-            >
+            <div class="q-pa-md" style="border-top: 1px solid #eee" v-if="showOrderPreview">
               <div class="q-pa-md bg-grey-2 row items-center rounded-borders">
                 <div class="text-subtitle2 text-weight-bold q-mr-xl">關於此方案</div>
-                <q-chip
-                  class="transparent q-mr-xl no-padding"
-                  square
-                  icon="iconfont iconcancel"
-                  label="取消需二次確認"
-                />
-                <q-chip
-                  class="transparent q-mr-xl no-padding"
-                  square
-                  icon="iconfont iconroundcheck"
-                  label="6個工作日內（不含例休假）確認"
-                />
+                <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" label="取消需二次確認" />
+                <q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck"
+                  label="6個工作日內（不含例休假）確認" />
               </div>
               <div class="q-mt-lg row" v-if="$q.platform.is.desktop" v-loading="calLoading">
-                <div class="col"> 
-                  <calendar 
-                    :priceList="dataList.priceList"
-                    :tcid="msg.tcid"
-                    @change="changeChosenDateHandler"
-                    ref="calendar"
-                  ></calendar>
+                <div class="col">
+                  <calendar :priceList="dataList.priceList" :tcid="msg.tcid" :dataList="dataList" @change="changeChosenDateHandler"
+                    ref="calendar"></calendar>
                 </div>
                 <div class="col q-ml-xl">
-                  <order-preview
-                    :price="currentPrice"
-                    @reset="resetHandler"
-                    :travel="dataList"
-                    @changeCity="changeCityHandler"
-                  ></order-preview>
+                  <order-preview :price="currentPrice" @reset="resetHandler" :travel="dataList"
+                    @changeCity="changeCityHandler"></order-preview>
                 </div>
               </div>
             </div>
@@ -366,150 +185,90 @@
         </div>
       </div>
 
-      <div
-        v-if="dataList"
-        style="margin-left: auto; margin-right: auto"
-        :style="{ width: $q.platform.is.desktop ? '1200px' : '100%' }"
-        class="q-mt-xl row"
-        :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }"
-      >
-        <div
-          class="absolute"
-          style="z-index: 999; left: -150px"
-          :style="{
+      <div v-if="dataList" style="margin-left: auto; margin-right: auto"
+        :style="{ width: $q.platform.is.desktop ? '1200px' : '100%' }" class="q-mt-xl row"
+        :class="{ 'q-px-md': $q.screen.width < 1220 && $q.screen.width > 760 }">
+        <div class="absolute" style="z-index: 999; left: -150px" :style="{
             top:
               currentHeight > navs[1].top
                 ? currentHeight + 100 + 'px'
                 : currentHeight + 200 + 'px',
-          }"
-          v-if="
+          }" v-if="
             $q.platform.is.desktop &&
             currentHeight > navs[1].top - 400 &&
             currentHeight < navs[2].top &&
             dataList.dayList.length > 3
-          "
-        >
+          ">
           <div v-if="true">
             <div v-for="(x, i) in days" :key="i">
-              <div
-                v-if="moreDays == 2 && i == 0"
-                style="text-align: center; margin-bottom: 21px; cursor: pointer"
-                @click="goScrollHandler(x.top + 50), (moreDays = 1)"
-              >
+              <div v-if="moreDays == 2 && i == 0" style="text-align: center; margin-bottom: 21px; cursor: pointer"
+                @click="goScrollHandler(x.top + 50), (moreDays = 1)">
                 ...
               </div>
-              <div
-                v-if="((moreDays && moreDays == 1) || !moreDays) && i < 8"
-                class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
-                @click="goScrollHandler(x.top + 50)"
-                :class="{
+              <div v-if="((moreDays && moreDays == 1) || !moreDays) && i < 8"
+                class="trip-module text-subtitle2 cursor-pointer q-mb-lg" @click="goScrollHandler(x.top + 50)" :class="{
                   'active-trip-moduleDay text-red active':
                     currentHeight >= x.top &&
                     (i == days.length - 1 || currentHeight < days[i + 1].top),
-                }"
-              >
+                }">
                 {{ x.display }}
               </div>
 
-              <div
-                v-if="moreDays && moreDays == 2 && i >= 8"
-                class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
-                @click="goScrollHandler(x.top + 50)"
-                :class="{
+              <div v-if="moreDays && moreDays == 2 && i >= 8" class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
+                @click="goScrollHandler(x.top + 50)" :class="{
                   'active-trip-moduleDay text-red active':
                     currentHeight >= x.top &&
                     (i == days.length - 1 || currentHeight < days[i + 1].top),
-                }"
-              >
+                }">
                 {{ x.display }}
               </div>
-              <div
-                v-if="(!moreDays || moreDays == 1) && days.length > 8 && i == 8"
-                style="text-align: center; cursor: pointer"
-                @click="goScrollHandler(x.top + 50), (moreDays = 2)"
-              >
+              <div v-if="(!moreDays || moreDays == 1) && days.length > 8 && i == 8"
+                style="text-align: center; cursor: pointer" @click="goScrollHandler(x.top + 50), (moreDays = 2)">
                 ...
               </div>
             </div>
           </div>
         </div>
-        <div
-          style="width: 100%"
-          :class="{
+        <div style="width: 100%" :class="{
             col: $q.platform.is.desktop,
             col: $q.platform.is.mobile,
-          }"
-        >
+          }">
           <flight :price="currentPrice"></flight>
-          <div
-            class="text-h5 text-weight-bold text-left q-pb-sm"
-            ref="feature"
-            :class="{
+          <div class="text-h5 text-weight-bold text-left q-pb-sm" ref="feature" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             行程特色
           </div>
           <div>
-            <div
-              class="q-pb-xl"
-              v-if="tripImages && tripImages.length > 0"
-              ref="diyContext"
-            >
+            <div class="q-pb-xl" v-if="tripImages && tripImages.length > 0" ref="diyContext">
               <div v-for="(x, i) in tripImages">
-                <img
-                  v-if="dataList.teamType != 2"
-                  class="block"
-                  :src="x.header"
-                  width="100%"
-                />
+                <img v-if="dataList.teamType != 2" class="block" :src="x.header" width="100%" />
                 <img class="block" :src="x.page" style="width: 100%" />
                 <div v-if="dataList.teamType != 2" class="tripImages-footer">
                   <img class="block" :src="x.footer" style="width: 100%" />
                 </div>
               </div>
             </div>
-            <div
-              class="q-mt-md trip-text q-pb-xl line-feature large-feature"
-              ref="diyContext"
-              v-html="dataList.feature.featureContent"
-              v-else-if="dataList.feature.featureContent != ''"
-            ></div>
-            <div
-              class="q-mt-md q-pb-xl line-feature"
-              ref="diyContext"
-              :style="{ zoom: zoomDiyContext }"
-              v-html="dataList.feature.featureHtml"
-              v-else-if="
+            <div class="q-mt-md trip-text q-pb-xl line-feature large-feature" ref="diyContext"
+              v-html="dataList.feature.featureContent" v-else-if="dataList.feature.featureContent != ''"></div>
+            <div class="q-mt-md q-pb-xl line-feature" ref="diyContext" :style="{ zoom: zoomDiyContext }"
+              v-html="dataList.feature.featureHtml" v-else-if="
                 dataList.feature.featureHtml != '' &&
                 (!tripImages || tripImages.length == 0)
-              "
-            ></div>
+              "></div>
           </div>
 
-          <div
-            class="text-h5 text-weight-bold text-left q-mt-xl"
-            ref="product"
-            :class="{
+          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="product" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             行程介紹
           </div>
           <div class="q-pb-xl">
-            <smaple
-              v-if="dataList"
-              :trip="dataList"
-              class="q-pb-xl"
-              :class="{ 'q-px-md': $q.platform.is.mobile }"
-            ></smaple>
+            <smaple v-if="dataList" :trip="dataList" class="q-pb-xl" :class="{ 'q-px-md': $q.platform.is.mobile }">
+            </smaple>
             <template v-if="detailsImageList && detailsImageList.length > 0">
               <div v-for="(x, i) in detailsImageList" :id="`days_${i}`">
-                <div
-                  class="tripImages-footer"
-                  v-if="!dataList.tripColor"
-                  style="padding: 20px 0"
-                ></div>
+                <div class="tripImages-footer" v-if="!dataList.tripColor" style="padding: 20px 0"></div>
                 <img class="block" :src="x.page" style="width: 100%" />
                 <div class="tripImages-footer"></div>
               </div>
@@ -519,86 +278,48 @@
                 <trip :trip="dataList" @change="changeTripShowHandler"></trip>
               </template>
               <template v-if="dataList.dayList.length > 3">
-                <block
-                  v-if="false"
-                  :currentHeightDay="currentHeight"
-                  :days="days"
-                  :tripList="dayList"
-                  :isDirect="isDirect"
-                  :clickDate="clickDate"
-                ></block>
+                <block v-if="false" :currentHeightDay="currentHeight" :days="days" :tripList="dayList"
+                  :isDirect="isDirect" :clickDate="clickDate"></block>
               </template>
             </template>
           </div>
 
-          <div
-            class="text-h5 text-weight-bold text-left q-mt-xl"
-            ref="price"
-            :class="{
+          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="price" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             費用說明
           </div>
-          <div
-            class="text-subtitle1 text-weight-bold q-my-md"
-            :class="{
+          <div class="text-subtitle1 text-weight-bold q-my-md" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             費用包含
           </div>
-          <div
-            class="q-mt-md trip-text"
-            v-html="dataList.feature.feeInclude"
-            :class="{
+          <div class="q-mt-md trip-text" v-html="dataList.feature.feeInclude" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          ></div>
-          <div
-            class="text-subtitle1 text-weight-bold q-my-md"
-            :class="{
+            }"></div>
+          <div class="text-subtitle1 text-weight-bold q-my-md" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             費用不含
           </div>
-          <div
-            class="q-mt-md trip-text q-pb-xl"
-            v-html="dataList.feature.feeNonInclude"
-            :class="{
+          <div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.feeNonInclude" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          ></div>
-          <div
-            class="text-h5 text-weight-bold text-left q-mt-xl"
-            ref="warning"
-            :class="{
+            }"></div>
+          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="warning" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             購買說明
           </div>
-          <div
-            class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
-            style="border: 1px dashed var(--q-color-warning)"
-            :class="{
+          <div class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
+            style="border: 1px dashed var(--q-color-warning)" :class="{
               'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
-            <div
-              v-html="
+            }">
+            <div v-html="
                 dataList.feature.shopRemark ? dataList.feature.shopRemark : '暫無購買說明'
-              "
-            ></div>
+              "></div>
             <div class="q-mb-lg text-weight-bold fz18">購物安排</div>
-            <q-table
-              :data="dataList.shopList"
-              :columns="columns"
-              bordered
-              class="my-sticky-header-table no-shadow"
-              :hide-bottom="true"
-            >
+            <q-table :data="dataList.shopList" :columns="columns" bordered class="my-sticky-header-table no-shadow"
+              :hide-bottom="true">
               <template v-slot:header>
                 <q-tr class="bg-orange-1">
                   <q-th v-for="(item, i) in columns" :key="i" class="text-left">
@@ -621,67 +342,43 @@
               </template>
             </q-table>
           </div>
-          <div
-            class="text-h5 text-weight-bold text-left q-mt-xl"
-            ref="order"
-            :class="{
+          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="order" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             訂單須知
           </div>
-          <div
-            class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
-            style="border: 1px dashed var(--q-color-warning)"
-            v-html="
+          <div class="q-mt-lg trip-text bg-orange-1 q-pa-md rounded-borders q-mb-xl"
+            style="border: 1px dashed var(--q-color-warning)" v-html="
               dataList.feature.importantTip
                 ? dataList.feature.importantTip
                 : '暫無訂單須知'
-            "
-            :class="{
+            " :class="{
               'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          ></div>
-          <div
-            class="text-h5 text-weight-bold text-left q-mt-xl"
-            ref="visa"
-            :class="{
+            }"></div>
+          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="visa" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             簽證
           </div>
-          <div
-            class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
-            style="border: 1px dashed var(--q-color-warning)"
-            :class="{
+          <div class="q-mt-lg trip-text q-pa-md rounded-borders q-mb-xl"
+            style="border: 1px dashed var(--q-color-warning)" :class="{
               'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             <div class="text-weight-bold fz18 q-mb-md">簽字須知</div>
-            <div
-              v-html="
+            <div v-html="
                 dataList.feature.visaRemark ? dataList.feature.visaRemark : '暫無簽字須知'
-              "
-            ></div>
+              "></div>
           </div>
-          <div
-            class="text-h5 text-weight-bold text-left q-mt-xl"
-            ref="tips"
-            :class="{
+          <div class="text-h5 text-weight-bold text-left q-mt-xl" ref="tips" :class="{
               'q-px-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          >
+            }">
             溫馨提示
           </div>
-          <div
-            class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
+          <div class="q-mt-lg trip-text bg-white q-pa-md rounded-borders q-mb-xl"
             style="border: 1px dashed var(--q-color-info)"
-            v-html="dataList.feature.warmTip ? dataList.feature.warmTip : '暂无溫馨提示'"
-            :class="{
+            v-html="dataList.feature.warmTip ? dataList.feature.warmTip : '暂无溫馨提示'" :class="{
               'q-mx-md': $q.screen.width < 1220 && $q.platform.is.mobile,
-            }"
-          ></div>
+            }"></div>
           <!-- <div
             class="text-h5 text-weight-bold text-left q-mt-xl"
             ref="cancelTips"
@@ -693,12 +390,10 @@
           </div> -->
           <div class="q-mt-lg f12 text-grey-6" ref="journeyLookOut">
             <q-icon name="iconfont icontishi" class="q-mr-sm" />
-            <span
-              >注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
+            <span>注意：由于站内商品来自全球各地，订单取消时间将依该供应商所在时区判定。供应商需
               2-5
               个工作天进行取消流程，依照您购买的商品取消政策收取手续费，并于取消流程完成后14
-              个工作天内退款。</span
-            >
+              个工作天内退款。</span>
           </div>
           <!-- <div
             class="q-mt-lg trip-text q-mb-xl"
@@ -728,31 +423,21 @@
             </div>
           </div> -->
         </div>
-        <template
-          v-if="
+        <template v-if="
             $q.platform.is.desktop &&
             currentHeight > 130 &&
             $refs.journeyLookOut.getBoundingClientRect().top + currentHeight - 280 >
               currentHeight
-          "
-        >
-          <div
-            class="absolute"
-            style="z-index: 999; right: -150px"
-            :style="{ top: currentHeight < 1000 ? '1000px' : currentHeight + 100 + 'px' }"
-          >
+          ">
+          <div class="absolute" style="z-index: 999; right: -150px"
+            :style="{ top: currentHeight < 1000 ? '1000px' : currentHeight + 100 + 'px' }">
             <div>
-              <div
-                class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
-                v-for="(x, i) in navs"
-                :key="i"
-                @click="goScrollHandler(x.top + 20)"
-                :class="{
+              <div class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md" v-for="(x, i) in navs" :key="i"
+                @click="goScrollHandler(x.top + 20)" :class="{
                   'active-trip-module':
                     currentHeight >= x.top &&
                     (i == navs.length - 1 || currentHeight < navs[i + 1].top),
-                }"
-              >
+                }">
                 {{ x.display }}
               </div>
             </div>
@@ -761,455 +446,558 @@
       </div>
     </div>
     <div v-if="!dataList && !$q.loading.isActive" class="text-center q-my-xl">
-      <none-data
-        iconType="order"
-        title="沒有找到您想要的商品哦"
-        subtitle="趕緊去挑選心儀的旅遊產品吧"
-      ></none-data>
+      <none-data iconType="order" title="沒有找到您想要的商品哦" subtitle="趕緊去挑選心儀的旅遊產品吧"></none-data>
     </div>
   </div>
 </template>
 
 <script>
-import { slider, slideritem } from "vue-concise-slider";
-import calendar from "../components/trip/calendarproduct.vue";
-import OrderPreview from "src/components/trip/orderPreview.vue";
-import smaple from "src/components/trip/smaple.vue";
-import Trip from "src/components/trip/trip.vue";
-import headStyle4 from "../components/trip/style4";
-import headStyle5 from "../components/trip/style5";
-import block from "src/components/trip/block/index";
-import Flight from "src/components/trip/flight.vue";
-import NoneData from "src/components/common/noneData.vue";
-export default {
-  props: [],
-  data() {
-    return {
-      columns: [
-        {
-          name: "cityName",
-          required: true,
-          label: "城市",
-          align: "left",
-        },
-        {
-          name: "shopName",
-          required: true,
-          label: "購物店名稱",
-          align: "left",
+  import {
+    slider,
+    slideritem
+  } from "vue-concise-slider";
+  import calendar from "../components/trip/calendarproduct.vue";
+  import OrderPreview from "src/components/trip/orderPreview.vue";
+  import smaple from "src/components/trip/smaple.vue";
+  import Trip from "src/components/trip/trip.vue";
+  import block from "src/components/trip/block/index";
+  import Flight from "src/components/trip/flight.vue";
+  import NoneData from "src/components/common/noneData.vue";
+  export default {
+    props: [],
+    data() {
+      return {
+        columns: [{
+            name: "cityName",
+            required: true,
+            label: "城市",
+            align: "left",
+          },
+          {
+            name: "shopName",
+            required: true,
+            label: "購物店名稱",
+            align: "left",
+          },
+          {
+            name: "visitTime",
+            required: true,
+            label: "預計停留時間",
+            align: "left",
+          },
+        ],
+        tab: "",
+        searchDate: "",
+        clickDate: "",
+        slide: 1,
+        msg: {
+          configId: 0,
+          cityId: 0,
+          preview: 0,
+          tcid: "",
+          teamType: 0,
+          isGetPriceFlight: true,
+          pType: 1, //类型 1 来源B2C
+          newConfigId: 0, //列表里的configId
         },
-        {
-          name: "visitTime",
-          required: true,
-          label: "預計停留時間",
-          align: "left",
+        currentPrice: {},
+        isShow: false,
+        dataList: null,
+        dayList: [],
+        isDirect: 1,
+        TripConfig: {},
+        isShowNav: false,
+        clickIndex: 1,
+        isLoading: false,
+        isShowDialog: false,
+        citys: [],
+        //Slider configuration [obj]
+        options: {
+          currentPage: 0,
+          speed: 300,
+          itemAnimation: false,
+          centeredSlides: true,
+          thresholdDistance: 100,
+          thresholdTime: 300,
+          loopedSlides: 2,
+          slidesToScroll: 1,
+          loop: true,
         },
-      ],
-      tab: "",
-      searchDate: "",
-      clickDate: "",
-      slide: 1,
-      msg: {
-        configId: 0,
-        cityId: 0,
-        preview: 0,
-        tcid: "",
-        teamType: 0,
-        isGetPriceFlight: true,
-        pType: 1, //类型 1 来源B2C
-        newConfigId: 0, //列表里的configId
-        pType: 1,
-      },
-      currentPrice: {},
-      isShow: false,
-      dataList: null,
-      dayList: [],
-      isDirect: 1,
-      TripConfig: {},
-      isShowNav: false,
-      clickIndex: 1,
-      isLoading: false,
-      isShowDialog: false,
-      citys: [],
-      //Slider configuration [obj]
-      options: {
-        currentPage: 0,
-        speed: 300,
-        itemAnimation: false,
-        centeredSlides: true,
-        thresholdDistance: 100,
-        thresholdTime: 300,
-        loopedSlides: 2,
-        slidesToScroll: 1,
-        loop: true,
-      },
-      warnBuy: [
-        "未满 2 岁幼儿我們將按照嬰兒價格執行。請下單是注意區分",
-        "如需要單人房，請購買單房",
-        "不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買佔床產品",
-        "12歲以上皆視同成人售價",
-      ],
-      showOrderPreview: false,
-      videoPosition: 0,
-      currentHeight: 0,
-      isPictureInPicture: false,
-      days: [
-        {
+        warnBuy: [
+          "未满 2 岁幼儿我們將按照嬰兒價格執行。請下單是注意區分",
+          "如需要單人房，請購買單房",
+          "不占床2-11(包含)岁幼童可购买儿童价，如需占床請購買佔床產品",
+          "12歲以上皆視同成人售價",
+        ],
+        showOrderPreview: false,
+        videoPosition: 0,
+        currentHeight: 0,
+        isPictureInPicture: false,
+        days: [{
           val: "",
           top: 0,
           isActive: false,
           display: "",
+        }, ],
+        navs: [{
+            val: "feature",
+            top: 0,
+            isActive: false,
+            display: "行程特色",
+          },
+          {
+            val: "product",
+            top: 0,
+            isActive: false,
+            display: "產品介紹",
+          },
+          {
+            val: "price",
+            top: 0,
+            isActive: false,
+            display: "費用說明",
+          },
+          {
+            val: "warning",
+            top: 0,
+            isActive: false,
+            display: "購買說明",
+          },
+          {
+            val: "order",
+            top: 0,
+            isActive: false,
+            display: "訂單須知",
+          },
+          {
+            val: "visa",
+            top: 0,
+            isActive: false,
+            display: "簽證",
+          },
+          {
+            val: "tips",
+            top: 0,
+            isActive: false,
+            display: "溫馨提示",
+          },
+          // {
+          //   val: "cancelTips",
+          //   top: 0,
+          //   isActive: false,
+          //   display: "取消政策",
+          // },
+        ],
+        priceListHeight: 0,
+        stickyHeight: 0,
+        zoomDiyContext: 1,
+        detailsImageList: [],
+        tripImages: [],
+        moreDays: 0,
+        calLoading: false,
+        loadCount: 0,
+      };
+    },
+    components: {
+      slider,
+      slideritem,
+      calendar,
+      OrderPreview,
+      smaple,
+      Trip,
+      block,
+      Flight,
+      NoneData,
+    },
+    watch: {
+      days: {
+        handler: function (val, oldval) {
+          this.days = val;
+          let that = this;
+          this.$nextTick(() => {
+            try {
+              that.days.forEach((x, i) => {
+                var object = document.getElementById(`days_${i}`);
+                x.top = object.getBoundingClientRect().top + 60;
+              });
+            } catch (error) {
+              console.log("watch_days_handler", error);
+            }
+          });
         },
-      ],
-      navs: [
-        {
-          val: "feature",
-          top: 0,
-          isActive: false,
-          display: "行程特色",
-        },
-        {
-          val: "product",
-          top: 0,
-          isActive: false,
-          display: "產品介紹",
-        },
-        {
-          val: "price",
-          top: 0,
-          isActive: false,
-          display: "費用說明",
-        },
-        {
-          val: "warning",
-          top: 0,
-          isActive: false,
-          display: "購買說明",
-        },
-        {
-          val: "order",
-          top: 0,
-          isActive: false,
-          display: "訂單須知",
-        },
-        {
-          val: "visa",
-          top: 0,
-          isActive: false,
-          display: "簽證",
-        },
-        {
-          val: "tips",
-          top: 0,
-          isActive: false,
-          display: "溫馨提示",
-        },
-        // {
-        //   val: "cancelTips",
-        //   top: 0,
-        //   isActive: false,
-        //   display: "取消政策",
-        // },
-      ],
-      priceListHeight: 0,
-      stickyHeight: 0,
-      zoomDiyContext: 1,
-      detailsImageList: [],
-      tripImages: [],
-      moreDays: 0,
-      calLoading: false,
-      loadCount:0
-    };
-  },
-  components: {
-    slider,
-    slideritem,
-    calendar,
-    OrderPreview,
-    smaple,
-    Trip,
-    block,
-    Flight,
-    NoneData,
-  },
-  watch: {
-    days: {
-      handler: function (val, oldval) {
-        this.days = val;
-        let that = this;
-        this.$nextTick(() => {
-          try {
-            that.days.forEach((x, i) => {
-              var object = document.getElementById(`days_${i}`);
-              x.top = object.getBoundingClientRect().top + 60;
-            });
-          } catch (error) {
-            console.log("----异常");
-          }
-          // setTimeout(()=>{
-          //   that.getTopNum(JSON.stringify(that.days))
-          // },1000)
-        });
+        immediate: true,
+        deep: true,
       },
-      immediate: true,
-      deep: true,
-    },
-    currentHeight: {
-      handler: function (val, oldval) {
-        this.navs.forEach((x, i) => {
-          if (
-            x.top &&
-            this.currentHeight >= x.top &&
-            (i == this.navs.length - 1 || this.currentHeight < this.navs[i + 1].top)
-          ) {
-            if (this.tab != x.display) {
-              this.tab = x.display;
-              return;
-            } else {
-              return;
+      currentHeight: {
+        handler: function (val, oldval) {
+          this.navs.forEach((x, i) => {
+            if (
+              x.top &&
+              this.currentHeight >= x.top &&
+              (i == this.navs.length - 1 || this.currentHeight < this.navs[i + 1].top)
+            ) {
+              if (this.tab != x.display) {
+                this.tab = x.display;
+                return;
+              } else {
+                return;
+              }
             }
-          }
-        });
+          });
+        },
+        immediate: false,
+        deep: true,
       },
-      immediate: false,
-      deep: true,
     },
-  },
-  created() {
-    if (this.$route.params.configId) {
-      this.msg.configId = decodeURIComponent(this.$route.params.configId);
-    }
-    if (this.$route.params.id) {
-      this.msg.tcid = decodeURIComponent(this.$route.params.id);
-    }
-    if (this.$route.params.newConfigId) {
-      this.msg.newConfigId = decodeURIComponent(this.$route.params.newConfigId);
-    }
-  },
-  mounted() {
-    window.addEventListener("scroll", this.handleScroll);
-    if (localStorage.baseifo) {
-      this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
-    }
-    this.getData();
-    window.addEventListener("scroll", this.menu);
-    // this.getCarData();
-  },
-  methods: {
-    getTripFeatureImageHandler(configId) {
-      this.$axios
-        .get("http://upload.oytour.com/Home/GetTripImage?configId=" + configId)
-        .then((r) => {
-          console.log(r.data, "r.data.data.id");
-          if (r.data.OtherFile) {
-            this.tripImages = [];
-            let OtherFile = r.data.OtherFile;
-            let length = OtherFile.length;
-            let header = OtherFile[length - 1];
-            let footer = OtherFile[length - 2];
-            if (OtherFile[0].indexOf("footer") != -1) {
-              header = OtherFile[1];
-              footer = OtherFile[0];
-            }
-            OtherFile.forEach((x, i) => {
-              let obj = {
-                header: header,
-                page: x,
-                footer: footer,
-              };
+    created() {
+      if (this.$route.params.configId) {
+        this.msg.configId = decodeURIComponent(this.$route.params.configId);
+      }
+      if (this.$route.params.id) {
+        this.msg.tcid = decodeURIComponent(this.$route.params.id);
+      }
+      if (this.$route.params.teamType) {
+        this.msg.teamType = this.$route.params.teamType;
+      }
+      console.log("create_details", this.msg)
+    },
+    mounted() {
+      window.addEventListener("scroll", this.handleScroll);
+      if (localStorage.baseifo) {
+        this.TripConfig = JSON.parse(window.localStorage.getItem("baseifo"));
+      }
+      this.getData();
+      window.addEventListener("scroll", this.menu);
+    },
+    methods: {
+      getTripFeatureImageHandler(configId) {
+        this.$axios
+          .get("http://upload.oytour.com/Home/GetTripImage?configId=" + configId)
+          .then((r) => {
+            if (r.data.OtherFile) {
+              this.tripImages = [];
+              let OtherFile = r.data.OtherFile;
+              let length = OtherFile.length;
+              let header = OtherFile[length - 1];
+              let footer = OtherFile[length - 2];
               if (OtherFile[0].indexOf("footer") != -1) {
-                if (i > 1) {
-                  this.tripImages.push(obj);
-                }
-              } else {
-                if (i < length - 2) {
-                  this.tripImages.push(obj);
-                }
+                header = OtherFile[1];
+                footer = OtherFile[0];
               }
-            });
-            this.$forceUpdate();
+              OtherFile.forEach((x, i) => {
+                let obj = {
+                  header: header,
+                  page: x,
+                  footer: footer,
+                };
+                if (OtherFile[0].indexOf("footer") != -1) {
+                  if (i > 1) {
+                    this.tripImages.push(obj);
+                  }
+                } else {
+                  if (i < length - 2) {
+                    this.tripImages.push(obj);
+                  }
+                }
+              });
+              this.$forceUpdate();
+            }
+          });
+      },
+      changeShowOrderPreviewHandler() {
+        this.showOrderPreview = !this.showOrderPreview;
+        if (!this.showOrderPreview) {
+          if (this.currentPrice) {
+            this.currentPrice.isSupportChildren = null;
+            this.currentPrice.unionCityList = null;
+            this.currentPrice.singleRoomPrice = 0;
+            this.currentPrice.originalB2CPrice = 0;
           }
+          this.changeTripShowHandler();
+        }
+      },
+      getTopNum(x) {
+        this.days = JSON.parse(x);
+      },
+      changeTripShowHandler() {
+        this.$nextTick(() => {
+          this.navs.forEach((x) => {
+            x.top = this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
+          });
         });
-    },
-    changeShowOrderPreviewHandler() {
-      this.showOrderPreview = !this.showOrderPreview;
-      if (!this.showOrderPreview) {
+      },
+      handleScroll(e) {
+        let temp = this.getScroll().top;
+        this.stickyHeight = document.querySelector(".q-header--hidden") ?
+          "translateY(0px)" :
+          "translateY(45px)";
+        this.currentHeight = temp;
+        if (
+          this.videoPosition > 0 &&
+          this.videoPosition < this.currentHeight &&
+          this.options.currentPage == 0 &&
+          !this.isPictureInPicture
+        ) {
+          this.isPictureInPicture = true;
+          let t = document.querySelectorAll("video")[0];
+          try {
+            t.requestPictureInPicture();
+          } catch (error) {}
+        } else if (
+          this.videoPosition > 0 &&
+          this.videoPosition > this.currentHeight &&
+          this.options.currentPage == 0 &&
+          this.isPictureInPicture
+        ) {
+          this.isPictureInPicture = false;
+          document.exitPictureInPicture();
+        }
+        let h = document.location.hash;
+        if (h.indexOf("#/detailsProduct/") == -1) {
+          window.removeEventListener("scroll", this.handleScroll);
+        }
+      },
+      getScroll() {
+        return {
+          left: window.pageXOffset ||
+            document.documentElement.scrollLeft ||
+            document.body.scrollLeft ||
+            0,
+          top: window.pageYOffset ||
+            document.documentElement.scrollTop ||
+            document.body.scrollTop ||
+            0,
+        };
+      },
+
+      goScrollHandlerDay(top) {
+        window.scrollTo(0, top);
+      },
+      goScrollHandler(top) {
+        window.scrollTo(0, top);
+      },
+      slideHandler(e) {
+        this.options.currentPage = e.currentPage;
+        if (e.currentPage != 0 && this.$refs.video && this.$refs.video.isPlaying) {
+          this.$refs.video.pause();
+        }
+      },
+      playHandler(e) {},
+      pauseHandler(e) {},
+      timeChangeHandler(e) {
+
+      },
+      seekedChangeHandler(e) {
+
+      },
+      resetHandler() {
         if (this.currentPrice) {
           this.currentPrice.isSupportChildren = null;
           this.currentPrice.unionCityList = null;
           this.currentPrice.singleRoomPrice = 0;
           this.currentPrice.originalB2CPrice = 0;
         }
-        this.changeTripShowHandler();
-      }
-    },
-    getTopNum(x) {
-      this.days = JSON.parse(x);
-    },
-    changeTripShowHandler() {
-      this.$nextTick(() => {
-        this.navs.forEach((x) => {
-          x.top = this.$refs[x.val].getBoundingClientRect().top + this.currentHeight - 60;
+        if (this.$q.platform.is.mobile) this.$refs.calendarMobile.reset();
+        else this.$refs.calendar.reset();
+      },
+      changeChosenDateHandler(val) {
+        console.log("changeChosenDateHandler", val);
+        val.price.version = new Date().getTime();
+        this.currentPrice = JSON.parse(JSON.stringify(val.price));
+        if (this.currentPrice.id != this.msg.tcid) {
+          this.msg.tcid = this.currentPrice.id;
+          this.msg.configId = this.currentPrice.configID;
+          this.getData();
+        }
+        this.currentPrice.unionCityList.splice(0, 0, {
+          cityId: this.dataList.startCityId,
+          cityName: this.dataList.startCityName,
         });
-      });
-    },
-    handleScroll(e) {
-      let temp = this.getScroll().top;
-      this.stickyHeight = document.querySelector(".q-header--hidden")
-        ? "translateY(0px)"
-        : "translateY(45px)";
-      this.currentHeight = temp;
-      if (
-        this.videoPosition > 0 &&
-        this.videoPosition < this.currentHeight &&
-        this.options.currentPage == 0 &&
-        !this.isPictureInPicture
-      ) {
-        this.isPictureInPicture = true;
-        let t = document.querySelectorAll("video")[0];
-        try {
-          t.requestPictureInPicture();
-        } catch (error) {}
-      } else if (
-        this.videoPosition > 0 &&
-        this.videoPosition > this.currentHeight &&
-        this.options.currentPage == 0 &&
-        this.isPictureInPicture
-      ) {
-        this.isPictureInPicture = false;
-        document.exitPictureInPicture();
-      }
-      let h = document.location.hash;
-      if (h.indexOf("#/detailsProduct/") == -1) {
-        window.removeEventListener("scroll", this.handleScroll);
-      }
-    },
-    getScroll() {
-      return {
-        left:
-          window.pageXOffset ||
-          document.documentElement.scrollLeft ||
-          document.body.scrollLeft ||
-          0,
-        top:
-          window.pageYOffset ||
-          document.documentElement.scrollTop ||
-          document.body.scrollTop ||
-          0,
-      };
-    },
-
-    goScrollHandlerDay(top) {
-      window.scrollTo(0, top);
-    },
-    goScrollHandler(top) {
-      window.scrollTo(0, top);
-    },
-    slideHandler(e) {
-      this.options.currentPage = e.currentPage;
-      if (e.currentPage != 0 && this.$refs.video && this.$refs.video.isPlaying) {
-        this.$refs.video.pause();
-      }
-    },
-    playHandler(e) {},
-    pauseHandler(e) {},
-    timeChangeHandler(e) {
-      //console.log(e)
-    },
-    //
-    seekedChangeHandler(e) {
-      //console.log(e)
-    },
-    resetHandler() {
-      // this.currentPrice=null;
-      if (this.currentPrice) {
-        this.currentPrice.isSupportChildren = null;
-        this.currentPrice.unionCityList = null;
-        this.currentPrice.singleRoomPrice = 0;
-        this.currentPrice.originalB2CPrice = 0;
-      }
-      if (this.$q.platform.is.mobile) this.$refs.calendarMobile.reset();
-      else this.$refs.calendar.reset();
-    },
-    changeChosenDateHandler(val) {
-      val.price.version = new Date().getTime();
-      this.currentPrice = JSON.parse(JSON.stringify(val.price));
-      this.currentPrice.unionCityList.splice(0, 0, {
-        cityId: this.dataList.startCityId,
-        cityName: this.dataList.startCityName,
-      });
-      this.currentPrice.RealPrice = this.currentPrice.RealPrice
-        ? this.currentPrice.RealPrice
-        : this.currentPrice.originalB2CPrice;
-      this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
-      if (
-        this.currentPrice.unionCityList &&
-        this.currentPrice.unionCityList.length > 0 &&
-        this.dataList.startCityId != 0
-      ) {
+        this.currentPrice.RealPrice = this.currentPrice.RealPrice ?
+          this.currentPrice.RealPrice :
+          this.currentPrice.originalB2CPrice;
+        this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
         if (
-          this.currentPrice.unionCityList.findIndex(
-            (x) => x.cityId == this.dataList.startCityId
-          ) == -1
+          this.currentPrice.unionCityList &&
+          this.currentPrice.unionCityList.length > 0 &&
+          this.dataList.startCityId != 0
         ) {
-          this.currentPrice.unionCityList.splice(0, 0, {
-            cityId: this.dataList.startCityId,
-            cityName: this.dataList.startCityName,
-          });
+          if (
+            this.currentPrice.unionCityList.findIndex(
+              (x) => x.cityId == this.dataList.startCityId
+            ) == -1
+          ) {
+            this.currentPrice.unionCityList.splice(0, 0, {
+              cityId: this.dataList.startCityId,
+              cityName: this.dataList.startCityName,
+            });
+          }
         }
-      }
-      if (this.$q.platform.is.mobile) {
-        this.$refs.qDateProxy.hide();
-      }
-      this.$forceUpdate();
-      this.$nextTick(() => {
-        this.changeTripShowHandler();
-      });
-    },
-    showDialog() {
-      this.isShowDialog = true;
-    },
-    //关闭弹窗
-    closeDialog() {
-      this.isShowDialog = false;
-    },
-    getData() {
-      this.$q.loading.show();
-      let that = this;
-      this.apipost(
-        "b2b_get_Get2024B2BTravelInfoV1",
-        this.msg,
-        (r) => {
-          try {
-            if (r.data.resultCode == 1 && r.data.data.id > 0) {
-              this.tripImages = [];
-              this.detailsImageList = [];
-              let header = r.data.data.feature.headerImage;
-              let footer = r.data.data.feature.footerImage;
-              if (r.data.data.feature.tripImageList.length > 0) {
-                let OtherFile = r.data.data.feature.tripImageList;
-                OtherFile.forEach((x, i) => {
-                  let obj = {
-                    header: header,
-                    page: x,
-                    footer: footer,
-                  };
-                  this.tripImages.push(obj);
-                });
-              }
-              if (r.data.data.feature.detailsImageList.length > 0) {
-                let OtherFile = r.data.data.feature.detailsImageList;
-                OtherFile.forEach((x, i) => {
-                  let obj = {
-                    header: header,
-                    page: x,
-                    footer: footer,
-                  };
-                  this.detailsImageList.push(obj);
+        if (this.$q.platform.is.mobile) {
+          this.$refs.qDateProxy.hide();
+        }
+        this.$forceUpdate();
+        this.$nextTick(() => {
+          this.changeTripShowHandler();
+        });
+      },
+      showDialog() {
+        this.isShowDialog = true;
+      },
+      //关闭弹窗
+      closeDialog() {
+        this.isShowDialog = false;
+      },
+      getData() {
+        this.$q.loading.show();
+        let that = this;
+        this.apipost(
+          "b2b_get_Get2024B2BTravelInfoV1",
+          this.msg,
+          (r) => {
+            try {
+              if (r.data.resultCode == 1 && r.data.data.id > 0) {
+                this.tripImages = [];
+                this.detailsImageList = [];
+                let header = r.data.data.feature.headerImage;
+                let footer = r.data.data.feature.footerImage;
+                if (r.data.data.feature.tripImageList.length > 0) {
+                  let OtherFile = r.data.data.feature.tripImageList;
+                  OtherFile.forEach((x, i) => {
+                    let obj = {
+                      header: header,
+                      page: x,
+                      footer: footer,
+                    };
+                    this.tripImages.push(obj);
+                  });
+                }
+                if (r.data.data.feature.detailsImageList.length > 0) {
+                  let OtherFile = r.data.data.feature.detailsImageList;
+                  OtherFile.forEach((x, i) => {
+                    let obj = {
+                      header: header,
+                      page: x,
+                      footer: footer,
+                    };
+                    this.detailsImageList.push(obj);
+                  });
+                }
+                this.dataList = r.data.data;
+                if (this.dataList.dayList && this.dataList.dayList.length > 0) {
+                  this.dataList.dayList.forEach((item) => {
+                    item.slide = 0;
+                  });
+                  if (r.data.data.scenicList) {
+                    r.data.data.scenicList.forEach((x) => {
+                      if (x.cityName) {
+                        this.citys.push(x.cityName);
+                      }
+                    });
+                    if (this.citys.length > 0) {
+                      this.citys = Array.from(new Set(this.citys));
+                    }
+                  }
+                }
+                this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
+                this.dayList = this.dataList.dayList;
+
+                this.dataList.priceList.forEach(x => {
+                  x.realOrgainB2CPrice = x.originalB2CPrice
+                  x.originalB2CPrice = x.b2CPrice
+                })
+
+                this.isShow = true;
+                this.isDirect = this.dataList.isDirect;
+                if (this.dataList.videoStr && this.dataList.videoStr != "") {
+                  this.options.loop = false;
+                  this.options.currentPage = 1;
+                  this.$nextTick(() => {
+                    setTimeout(() => {
+                      let t = document.querySelectorAll(".slider-wrapper");
+                      if (t.length > 0) {
+                        let d = t[0].getBoundingClientRect();
+                        this.videoPosition = d.top + d.height;
+                      }
+                    }, 1000);
+                  });
+                }
+                this.$nextTick(() => {
+                  if (that.dataList.feature.featureHtml != "") {
+                    let tw = parseFloat(
+                      that.$refs.diyContext.getBoundingClientRect().width
+                    ); // / 1123.0
+
+                    let divArr = document.querySelectorAll("#setZoom>div");
+                    for (let i = 0; i < divArr.length; i++) {
+                      let div = divArr[i];
+                      if (that.$q.platform.is.mobile) {
+                        div.style.zoom =
+                          div.offsetWidth > 1000 ?
+                          0.999 :
+                          document.documentElement.clientWidth; /// 1123.0
+                      } else {
+                        div.style.zoom = 1;
+                      }
+                    }
+
+                    that.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
+                  }
+                  setTimeout(() => {
+                    this.navs.forEach((x) => {
+                      x.top = this.$refs[x.val].getBoundingClientRect().top;
+                    });
+                    this.priceListHeight = this.$refs.pricelist.getBoundingClientRect().top;
+                    this.days = [];
+                    this.dayList.forEach((x) => {
+                      let dayListObj = {
+                        val: "day" + x.dayNum,
+                        top: 0,
+                        isActive: false,
+                        display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
+                      };
+                      this.days.push(dayListObj);
+                    });
+
+                    if (this.days.length > 8) {
+                      this.moreDays = 0;
+                    } else {
+                      this.moreDays = 1;
+                    }
+                  }, 1000);
+
+                  try {
+                    document
+                      .querySelector("#scrollId .q-page-container")
+                      .addEventListener("scroll", this.handleScrollDay);
+                  } catch (error) {
+                    //console.log('scrollIdq-page-container异常信息1', error)
+                  }
                 });
               }
-              // tripImageList detailsImageList headerImage footerImage
-              // this.getTripFeatureImageHandler(r.data.data.id)
+            } catch (error) {}
+            this.$q.loading.hide();
+            this.loadCount++
+          },
+          (e) => {
+            this.$q.loading.hide();
+            this.loadCount++
+          }
+        );
+      },
+      changeCityHandler(unionCity) {
+        this.msg.cityId = unionCity.cityId
+        this.getData();
+      },
+      //  获取车的详情
+      getCarData() {
+        this.$q.loading.show();
+        this.apipost(
+          "b2c_get_GetCarSingleProductDetail", {
+            ProductId: "16"
+          },
+          (r) => {
+            if (r.data.resultCode == 1) {
               this.dataList = r.data.data;
               if (this.dataList.dayList && this.dataList.dayList.length > 0) {
                 this.dataList.dayList.forEach((item) => {
@@ -1221,19 +1009,11 @@ export default {
                       this.citys.push(x.cityName);
                     }
                   });
-                  if (this.citys.length > 0) {
-                    this.citys = Array.from(new Set(this.citys));
-                  }
                 }
               }
               this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
               this.dayList = this.dataList.dayList;
 
-              this.dataList.priceList.forEach(x=>{
-                x.realOrgainB2CPrice= x.originalB2CPrice
-                x.originalB2CPrice = x.b2CPrice
-              })
-
               this.isShow = true;
               this.isDirect = this.dataList.isDirect;
               if (this.dataList.videoStr && this.dataList.videoStr != "") {
@@ -1250,39 +1030,36 @@ export default {
                 });
               }
               this.$nextTick(() => {
-                if (that.dataList.feature.featureHtml != "") {
-                  let tw = parseFloat(
-                    that.$refs.diyContext.getBoundingClientRect().width
-                  ); // / 1123.0
+                if (this.dataList.feature.featureHtml != "") {
+                  let tw =
+                    parseFloat(this.$refs.diyContext.getBoundingClientRect().width) /
+                    1123.0;
 
                   let divArr = document.querySelectorAll("#setZoom>div");
                   for (let i = 0; i < divArr.length; i++) {
                     let div = divArr[i];
-                    if (that.$q.platform.is.mobile) {
+                    if (this.$q.platform.is.mobile) {
                       div.style.zoom =
-                        div.offsetWidth > 1000
-                          ? 0.999
-                          : document.documentElement.clientWidth; /// 1123.0
+                        div.offsetWidth > 1000 ?
+                        0.999 :
+                        document.documentElement.clientWidth / 1123.0;
                     } else {
                       div.style.zoom = 1;
                     }
                   }
-
-                  that.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
+                  this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
                 }
                 setTimeout(() => {
                   this.navs.forEach((x) => {
-                    // x.top =
-                    //   this.$refs[x.val].getBoundingClientRect().top +
-                    //   this.currentHeight -
-                    //   60;
-                    x.top = this.$refs[x.val].getBoundingClientRect().top;
+                    x.top =
+                      this.$refs[x.val].getBoundingClientRect().top +
+                      this.currentHeight -
+                      60;
                   });
-                  // this.priceListHeight =
-                  //   this.$refs.pricelist.getBoundingClientRect().top +
-                  //   this.currentHeight -
-                  //   60;
-                  this.priceListHeight = this.$refs.pricelist.getBoundingClientRect().top;
+                  this.priceListHeight =
+                    this.$refs.pricelist.getBoundingClientRect().top +
+                    this.currentHeight -
+                    60;
                   this.days = [];
                   this.dayList.forEach((x) => {
                     let dayListObj = {
@@ -1293,12 +1070,6 @@ export default {
                     };
                     this.days.push(dayListObj);
                   });
-
-                  if (this.days.length > 8) {
-                    this.moreDays = 0;
-                  } else {
-                    this.moreDays = 1;
-                  }
                 }, 1000);
 
                 try {
@@ -1306,243 +1077,134 @@ export default {
                     .querySelector("#scrollId .q-page-container")
                     .addEventListener("scroll", this.handleScrollDay);
                 } catch (error) {
-                  // console.log(document.querySelector('#scrollId .q-page-container'))
-                  // console.log('异常信息', error)
+                  //console.log('scrollIdq-page-container异常信息2', error)
                 }
               });
+            } else {
+              this.$message.error(r.data.message);
             }
-          } catch (error) {}
-          this.$q.loading.hide();
-          this.loadCount++
-        },
-        (e) => {
-          this.$q.loading.hide();
-          this.loadCount++
-        }
-      );
-    },
-    changeCityHandler(unionCity) {
-      this.msg.cityId = unionCity.cityId
-      this.getData()
-      return
-      this.currentPrice.originalB2CPrice = this.currentPrice.RealPrice;
-      if (unionCity.cityId != this.dataList.startCityId) {
-        if (unionCity.backFlight && unionCity.backFlight.addPrice) {
-          this.currentPrice.originalB2CPrice += unionCity.backFlight.addPrice;
-        }
-        if (unionCity.goFlight && unionCity.goFlight.addPrice) {
-          this.currentPrice.originalB2CPrice += unionCity.goFlight.addPrice;
-        }
-      }
-      if (this.$q.platform.is.desktop){
-        this.$refs.calendar.changePriceHandler(
-          this.currentPrice.startDate,
-          this.currentPrice.originalB2CPrice
+            this.$q.loading.hide();
+          },
+          null
         );
-        // this.$forceUpdate();
-      }
-      
+      },
+      menu() {
+        this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
+        if (this.scroll > 300) {
+          this.isShowNav = true;
+        } else {
+          this.isShowNav = false;
+        }
+      },
+      goNavList(val) {
+        let newval = "#" + val;
+        document.querySelector(newval).scrollIntoView(true);
+      },
     },
-    //  获取车的详情
-    getCarData() {
-      this.$q.loading.show();
-      this.apipost(
-        "b2c_get_GetCarSingleProductDetail",
-        { ProductId: "16" },
-        (r) => {
-          if (r.data.resultCode == 1) {
-            this.dataList = r.data.data;
-            if (this.dataList.dayList && this.dataList.dayList.length > 0) {
-              this.dataList.dayList.forEach((item) => {
-                item.slide = 0;
-              });
-              if (r.data.data.scenicList) {
-                r.data.data.scenicList.forEach((x) => {
-                  if (x.cityName) {
-                    this.citys.push(x.cityName);
-                  }
-                });
-              }
-            }
-            this.dataList.imgCover = JSON.parse(this.dataList.imgCover);
-            this.dayList = this.dataList.dayList;
+  };
 
-            this.isShow = true;
-            this.isDirect = this.dataList.isDirect;
-            if (this.dataList.videoStr && this.dataList.videoStr != "") {
-              this.options.loop = false;
-              this.options.currentPage = 1;
-              this.$nextTick(() => {
-                setTimeout(() => {
-                  let t = document.querySelectorAll(".slider-wrapper");
-                  if (t.length > 0) {
-                    let d = t[0].getBoundingClientRect();
-                    this.videoPosition = d.top + d.height;
-                  }
-                }, 1000);
-              });
-            }
-            this.$nextTick(() => {
-              if (this.dataList.feature.featureHtml != "") {
-                let tw =
-                  parseFloat(this.$refs.diyContext.getBoundingClientRect().width) /
-                  1123.0;
+</script>
 
-                let divArr = document.querySelectorAll("#setZoom>div");
-                for (let i = 0; i < divArr.length; i++) {
-                  let div = divArr[i];
-                  if (this.$q.platform.is.mobile) {
-                    div.style.zoom =
-                      div.offsetWidth > 1000
-                        ? 0.999
-                        : document.documentElement.clientWidth / 1123.0;
-                  } else {
-                    div.style.zoom = 1;
-                  }
-                }
+<style>
+  .line-feature * {
+    line-height: normal !important;
+  }
 
-                this.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2);
-              }
-              setTimeout(() => {
-                this.navs.forEach((x) => {
-                  x.top =
-                    this.$refs[x.val].getBoundingClientRect().top +
-                    this.currentHeight -
-                    60;
-                });
-                this.priceListHeight =
-                  this.$refs.pricelist.getBoundingClientRect().top +
-                  this.currentHeight -
-                  60;
-                this.days = [];
-                this.dayList.forEach((x) => {
-                  let dayListObj = {
-                    val: "day" + x.dayNum,
-                    top: 0,
-                    isActive: false,
-                    display: x.dayNum > 9 ? x.dayNum : "0" + x.dayNum,
-                  };
-                  this.days.push(dayListObj);
-                });
-              }, 1000);
+  .line-feature .draggable {
+    position: absolute;
+  }
 
-              try {
-                document
-                  .querySelector("#scrollId .q-page-container")
-                  .addEventListener("scroll", this.handleScrollDay);
-              } catch (error) {
-                // console.log(document.querySelector('#scrollId .q-page-container'))
-                // console.log('异常信息', error)
-              }
-            });
-          } else {
-            this.$message.error(r.data.message);
-          }
-          this.$q.loading.hide();
-        },
-        null
-      );
-    },
-    menu() {
-      this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
-      if (this.scroll > 300) {
-        this.isShowNav = true;
-      } else {
-        this.isShowNav = false;
-      }
-    },
-    goNavList(val) {
-      let newval = "#" + val;
-      document.querySelector(newval).scrollIntoView(true);
-    },
-  },
-};
-</script>
+  .slider-item {
+    transform: scale(1);
+    transition-timing-function: ease;
+    transition-duration: 300ms;
+  }
+
+  .slider-item.slider-active {
+    transform: scale(1);
+    z-index: 999;
+  }
+
+  .trip-text img {
+    max-width: 100%;
+    height: auto;
+    border-radius: 6px;
+  }
+
+  .trip-text {
+    line-height: 1.6;
+  }
+
+  .slider-item.slider-active-copy {
+    transform: scale(1);
+    z-index: 999;
+  }
+
+  .active-trip-module {
+    color: var(--q-color-primary);
+    font-weight: 800;
+    position: relative;
+  }
+
+  .active-trip-module::before {
+    position: absolute;
+    content: " ";
+    top: 0;
+    bottom: 0;
+    left: -25px;
+    width: 5px;
+    border-radius: 5px;
+    background: var(--q-color-primary);
+  }
+
+  .trip-module {
+    color: #9e9e9e;
+    transition: all 0.3s;
+    font-weight: 100;
+    text-align: center;
+    line-height: 38px;
+    font-size: 18px;
+    width: 38px;
+    height: 38px;
+    border: 1px solid #ccc;
+    border-radius: 50%;
+    font-family: lettergothicstd;
+  }
+
+  .active-trip-moduleDay {
+    position: relative;
+    border: 0;
+    left: -15px;
+    font-size: 51px;
+  }
+
+  .active-trip-moduleDay.active::before {
+    opacity: 1;
+  }
+
+  .active-trip-moduleDay::before {
+    display: inline-block;
+    position: absolute;
+    top: 0px;
+    left: -50px;
+    content: "DAY";
+    font-size: 13px;
+    font-family: fangsong;
+    line-height: 58px;
+    opacity: 0;
+  }
+
+  #setZoom>div {
+    zoom: calc(100 / 1000);
+  }
+
+  .large-feature img {
+    width: 100% !important;
+  }
+
+  .tripImages-footer {
+    background: url("../assets/img/trip/otherBjThree.jpg") repeat;
+    padding: 115px 0 32px 0;
+  }
 
-<style>
-.line-feature * {
-  line-height: normal !important;
-}
-.line-feature .draggable {
-  position: absolute;
-}
-.slider-item {
-  transform: scale(1);
-  transition-timing-function: ease;
-  transition-duration: 300ms;
-}
-.slider-item.slider-active {
-  transform: scale(1);
-  z-index: 999;
-}
-.trip-text img {
-  max-width: 100%;
-  height: auto;
-  border-radius: 6px;
-}
-.trip-text {
-  line-height: 1.6;
-}
-.slider-item.slider-active-copy {
-  transform: scale(1);
-  z-index: 999;
-}
-.active-trip-module {
-  color: var(--q-color-primary);
-  font-weight: 800;
-  position: relative;
-}
-.active-trip-module::before {
-  position: absolute;
-  content: " ";
-  top: 0;
-  bottom: 0;
-  left: -25px;
-  width: 5px;
-  border-radius: 5px;
-  background: var(--q-color-primary);
-}
-.trip-module {
-  color: #9e9e9e;
-  transition: all 0.3s;
-  font-weight: 100;
-  text-align: center;
-  line-height: 38px;
-  font-size: 18px;
-  width: 38px;
-  height: 38px;
-  border: 1px solid #ccc;
-  border-radius: 50%;
-  font-family: lettergothicstd;
-}
-.active-trip-moduleDay {
-  position: relative;
-  border: 0;
-  left: -15px;
-  font-size: 51px;
-}
-.active-trip-moduleDay.active::before {
-  opacity: 1;
-}
-.active-trip-moduleDay::before {
-  display: inline-block;
-  position: absolute;
-  top: 0px;
-  left: -50px;
-  content: "DAY";
-  font-size: 13px;
-  font-family: fangsong;
-  line-height: 58px;
-  opacity: 0;
-}
-#setZoom > div {
-  zoom: calc(100 / 1000);
-}
-.large-feature img {
-  width: 100% !important;
-}
-.tripImages-footer {
-  background: url("../assets/img/trip/otherBjThree.jpg") repeat;
-  padding: 115px 0 32px 0;
-}
 </style>

src/router/routes.js

@@ -35,7 +35,7 @@ const routes = [{
                 component: () =>
                     import ('pages/details.vue')
             }, { //行程2024
-                path: '/detailsProduct/:id/:configId',
+                path: '/detailsProduct/:id/:configId/:teamType',
                 meta: { title: '行程' },
                 component: () =>
                     import ('pages/detailsProduct.vue')