no message

src/components/trip/block/allDay.vue

 <template>
     <div class="block-item">
-        <!-- transition-prev="scale"
-                transition-next="scale" -->
-                <!-- transition-prev="slide-right" 
-                transition-next="slide-left"  -->
-        <q-carousel v-model="slide" 
-                transition-prev="slide-right" 
-                transition-next="slide-left" 
-                swipeable animated
-                control-color="white" infinite height="100%"
-                class="my-bg-grey text-black shadow-1 no-shadow"
-                control-type="regular"
-                :arrows="day.details.length>0?true:false"
-                control-text-color="primary"
-                ref="carousel"
-                navigation
-                >
+        <q-carousel
+        animated
+        v-model="slide"
+        infinite
+        :autoplay="autoplay"
+        transition-prev="slide-right"
+        transition-next="slide-left"
+        ref="carousel">
                 <template v-for="(x, i) in day.details">
                     <q-carousel-slide :name="i" class="column no-wrap">
                         <div class="bg-white row">
@@ -35,7 +27,7 @@
                                 :src="x.img"
                                 :ratio=" 16/9 "
                                 style="width: 100%"
-                                @click="showPreview(day.details,i)"
+                                @click="showImageHandler(x.img)"
                             >
                                 <template v-slot:error>
                                 <div
@@ -105,16 +97,16 @@
                   <template v-if="day.details.length>1">
                     <q-carousel-control
                     position="top-right"
-                    :offset="[10,188]"
+                    :offset="[10,168]"
                     class="q-gutter-xs"
                   >
                     <q-btn
                       push round dense color="primary" text-color="while" icon="arrow_left"
-                      @click="$refs.carousel.previous()"
+                      @click="carousel.previous()"
                     />
                     <q-btn
                       push round dense color="primary" text-color="while" icon="arrow_right"
-                      @click="$refs.carousel.next()"
+                      @click="carousel.next()"
                     />
                   </q-carousel-control>
                   </template>
@@ -141,9 +133,12 @@
     setup(props) {
       const $router = useRouter()
       const { t } = useI18n()
+      const carousel = ref(null)
       const $q = useQuasar()
       let {ctx:that, proxy} = getCurrentInstance()
       const data= reactive({
+        slide: 0,
+        autoplay: 0,
         showImagePriview:false,
         currentImage:'',
         images:[],
@@ -160,18 +155,6 @@
           data.currentImage = url
           data.showImagePriview = true
         },
-        showPreview(imgs, index = 0) {
-          let timgs = [];
-          imgs.forEach((x) => {
-            timgs.push(x.img);
-          });
-          that.$viewerApi({
-            options: {
-              initialViewIndex: index,
-            },
-            images: timgs,
-          });
-        },
         getHotelSuffix() {
           let suffix = "";
           if (props.day.jiu2.length > 1) {
@@ -204,11 +187,15 @@
       return {
         ...toRefs(data),
         ...methods,
+        carousel,
       }
     }
   })
   </script>
   <style scoped>
+    .q-carousel{
+      height: auto !important;
+    }
     .q-carousel__slide{
         padding: 0 !important;
     }

src/components/trip/block/fiveday.vue

@@ -525,18 +525,6 @@ export default defineComponent({
         data.currentImage = url
         data.showImagePriview = true
       },
-      showPreview(imgs, index = 0) {
-        let timgs = [];
-        imgs.forEach((x) => {
-          timgs.push(x.img);
-        });
-        that.$viewerApi({
-          options: {
-            initialViewIndex: index,
-          },
-          images: timgs,
-        });
-      },
       getHotelSuffix() {
         let suffix = "";
         if (props.day.jiu2.length > 1) {

src/components/trip/block/fourday.vue

@@ -437,18 +437,6 @@ export default defineComponent({
         data.currentImage = url
         data.showImagePriview = true
       },
-      showPreview(imgs, index = 0) {
-        let timgs = [];
-        imgs.forEach((x) => {
-          timgs.push(x.img);
-        });
-        that.$viewerApi({
-          options: {
-            initialViewIndex: index,
-          },
-          images: timgs,
-        });
-      },
       getHotelSuffix() {
         let suffix = "";
         if (props.day.jiu2.length > 1) {

src/components/trip/block/oneday.vue

@@ -186,18 +186,7 @@ export default defineComponent({
         data.currentImage = url
         data.showImagePriview = true
       },
-      showPreview(imgs, index = 0) {
-        let timgs = [];
-        imgs.forEach((x) => {
-          timgs.push(x.img);
-        });
-        that.$viewerApi({
-          options: {
-            initialViewIndex: index,
-          },
-          images: timgs,
-        });
-      },
+      
       getHotelSuffix() {
         let suffix = "";
         if (props.day.jiu2.length > 1) {

src/components/trip/block/threeday.vue

@@ -356,18 +356,7 @@ export default defineComponent({
         data.currentImage = url
         data.showImagePriview = true
       },
-      showPreview(imgs, index = 0) {
-        let timgs = [];
-        imgs.forEach((x) => {
-          timgs.push(x.img);
-        });
-        that.$viewerApi({
-          options: {
-            initialViewIndex: index,
-          },
-          images: timgs,
-        });
-      },
+      
       getHotelSuffix() {
         let suffix = "";
         if (props.day.jiu2.length > 1) {

src/components/trip/block/twoday.vue

@@ -268,18 +268,7 @@ export default defineComponent({
         data.currentImage = url
         data.showImagePriview = true
       },
-      showPreview(imgs, index = 0) {
-        let timgs = [];
-        imgs.forEach((x) => {
-          timgs.push(x.img);
-        });
-        that.$viewerApi({
-          options: {
-            initialViewIndex: index,
-          },
-          images: timgs,
-        });
-      },
+      
       getHotelSuffix() {
         let suffix = "";
         if (props.day.jiu2.length > 1) {

src/components/trip/tripView/calendar.vue

 <template>
-  <q-table data="days" :columns="cols" flat class="q-mt-md" hide-pagination>
+  <q-table :rows="days" :columns="cols" flat class="q-mt-md" hide-pagination>
     <template v-slot:body-cell-day="props">
         <q-td :props="props">
           <div class="text-h6">第 {{ props.row.dayNum }} 天</div>

src/components/trip/tripView/list.vue

@@ -90,7 +90,7 @@
                       :ratio="16 / 9"
                       spinner-color="grey"
                       spinner-size="20px"
-                      @click="showPreview(y.childItem.imaArray,zi)"
+                      @click="showImageHandler(y.childItem.imaArray)"
                     />
                   </q-responsive>
                 </template>
@@ -312,14 +312,18 @@
       </q-timeline>
     </div>
   </div>
+  <q-dialog class="no-padding" v-model="showImagePriview" persistent>
+    <image-preview :current="currentImage" :images="images"></image-preview>
+  </q-dialog>
 </template>
 
 <script lang="ts">
+  import ImagePreview from "../../common/ImagePreview.vue";
 import { date,useQuasar } from "quasar";
 import { reactive, toRefs, defineComponent,ref,watch, getCurrentInstance  } from 'vue';
 import { useI18n } from 'vue-i18n'
 export default defineComponent({
-  components: {  },
+  components: { ImagePreview },
   props: ['days'],
   setup(props) {
     const { t } = useI18n()
@@ -327,6 +331,8 @@ export default defineComponent({
     let {ctx:that, proxy} = getCurrentInstance()
     
     const data= reactive({
+      currentImage:'',
+      showImagePriview:　false,
       d: props.days,
     })
     watch(() => props.days,(n,o) => {
@@ -377,17 +383,9 @@ export default defineComponent({
         });
         return txt;
       },
-      showPreview(imgs, index = 0) {
-        let timgs = [];
-        imgs.forEach((x) => {
-          timgs.push(x.url);
-        });
-        // data.$viewerApi({
-        //   options: {
-        //     initialViewIndex: index,
-        //   },
-        //   images: timgs,
-        // });
+      showImageHandler(url: string) {
+        data.currentImage = url
+        data.showImagePriview = true
       },
  
     }

src/pages/scheduledTrip/detailsNew.vue

@@ -420,7 +420,9 @@ export default defineComponent({
         nextTick(() => {
           data.navs.forEach((x, index) => {
             const el = navstext.value[index]
-            x.top = el.getBoundingClientRect().top + data.currentHeight - 60
+            if(el){
+              x.top = el.getBoundingClientRect().top + data.currentHeight - 60
+            }
           })
         })
       },