no message

src/pages/scheduledTrip/detailsNew.vue

@@ -37,7 +37,7 @@
             @click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></q-tab>
       </q-tabs>
     </div>
-    <div v-if="dataList" style="max-width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-md q-mb-lg" :class="{ 'q-px-md': $q.screen.width < 1220 }">
+    <div v-if="dataList" style="width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-md q-mb-lg" :class="{ 'q-px-md': $q.screen.width < 1220 }">
       <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">
           <q-carousel
@@ -122,7 +122,7 @@
           />
         </div>
       </div>
-      <div class="q-mt-lg">
+      <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" />
           {{ x }}
@@ -202,9 +202,17 @@
       class="q-mt-xl row"
       :class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }"
     >
-      <div class="col q-ml-xl position-relative"
-      v-if="days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop">
-        <div style="position: sticky; top: 100px">
+    <!-- col q-ml-xl position-relative -->
+    <!-- days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop -->
+      <div :class="{'fixed':$q.platform.is.desktop}"
+      :style="{'top':currentHeight>navs[1].top?'200px':'200px',
+      'left':currentHeight>navs[1].top?'120px':'130px',}"
+      v-if="
+        dataList.priceList.length > 0&&$q.platform.is.desktop&&currentHeight>navs[1].top-400
+        &&currentHeight<navs[2].top
+      ">
+      <!-- position: sticky; top: 100px -->
+        <div style="">
           <div
             class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
             v-for="(x, i) in days"
@@ -220,10 +228,21 @@
           </div>
         </div>
       </div>
-      <div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
-        <div class="text-h5 text-weight-bold text-left" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d1')}}</div>
-        <div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
-        <div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-if="dataList.feature.featureHtml != ''"></div>
+      <div style="width: 100%;" :class="{'col':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
+        <div class="text-h5 text-weight-bold text-left q-pb-sm" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d1')}}</div>
+
+        <div class="q-pb-xl" v-if="tripImages&&tripImages.length>0"
+          ref="diyContext">
+          <div v-for="(x,i) in tripImages">
+            <!-- <img class="block" :src="x.header" width="100%"> -->
+            <img class="block" :src="x.page" style="width: 100%;">
+            <div 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" v-html="dataList.feature.featureContent" v-else-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
+        <div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-else-if="dataList.feature.featureHtml != ''"></div>
         <div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d2')}}</div>
         <div class="q-pb-xl">
           <smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple>
@@ -247,7 +266,7 @@
         <div class="q-mt-lg trip-text q-mb-xl" :class="{'q-px-md':$q.platform.is.mobile}">
           <ul class="no-padding text-grey-9 q-ml-md">
             <li v-for="(x,index) in 5"
-            :class="{'q-mt-sm':index!=0}">{{$t(`v103.details.righttitle.d${index+7}`)}}</li>
+            :class="{'q-mt-sm':index!=0}">{{$t(`v103.scheduledTripDetails.righttitle.d${index+7}`)}}</li>
           </ul>
           <div class="q-mt-lg f12 text-grey-6">
             <q-icon name="iconfont icontishi" class="q-mr-sm" />
@@ -255,9 +274,14 @@
           </div>
         </div>
       </div>
-      <template v-if="$q.platform.is.desktop">
-        <div class="col-1"></div>
-        <div class="col q-ml-xl position-relative">
+      <template v-if="$q.platform.is.desktop&&currentHeight>130">
+        <!-- <div class="col-1"></div> -->
+        <!-- col q-ml-xl position-relative -->
+        <div
+        :class="{'absolute':currentHeight<1000,
+          'fixed':currentHeight>1000}"
+          :style="{'top':currentHeight<1000?'0':'100px',
+          'right':currentHeight<1000?'-150px':'70px',}">
           <div style="position: sticky; top: 100px">
             <div
               class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
@@ -297,6 +321,10 @@ import smaple from 'src/components/trip/smaple.vue'
 import Trip from 'src/components/trip/trip.vue'
 import block from 'src/components/trip/block/index.vue'
 import { formatDate, moneyFormat } from 'src/utils/tools'
+import request from '../../api/requestPublic'
+// import service from "../../api/axiosPublic"
+import { HttpResponse } from "../../@types";
+import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
 export default defineComponent({
   components: {
     calendar,
@@ -412,7 +440,9 @@ export default defineComponent({
       ],
       priceListHeight: 0,
       stickyHeight: 0,
-      zoomDiyContext: 1
+      zoomDiyContext: 1,
+      detailsImageList:[],
+      tripImages: []
     })
     data.scrollareaobj = inject(DirtionmaryHelper.SCROLL_AREA_OBJ) as any
     data.msg.configId = decodeURIComponent(currentRouter.currentRoute.value.params.id)
@@ -524,6 +554,22 @@ export default defineComponent({
           .then(r => {
             if (r.data.resultCode == ApiResult.SUCCESS) {
               if (r.data.data) {
+                data.tripImages = []
+                if(r.data.data.feature.tripImageList.length>0){
+                let OtherFile = r.data.data.feature.tripImageList
+                let header = r.data.data.feature.headerImage
+                let footer = r.data.data.feature.footerImage
+                OtherFile.forEach((x,i)=>{
+                  let obj = {
+                    header: header,
+                    page: x,
+                    footer: footer,
+                  }
+                  data.tripImages.push(obj)
+                })
+              }
+              console.log(data.tripImages,'-----')
+              //  tripImageList detailsImageList headerImage footerImage
                 data.dataList = r.data.data
                 if (data.dataList && data.dataList.dayList && data.dataList.dayList.length > 0) {
                   data.dataList.dayList.forEach(item => {
@@ -727,4 +773,8 @@ export default defineComponent({
 #setZoom>div{
   zoom: calc(100 / 1000)
 }
+.tripImages-footer{
+  background: url('../../assets/img/trip/otherBjThree.jpg') repeat;
+  padding: 115px 0 32px 0;
+}
 </style>