Przeglądaj źródła

feat: 项目概况的轮播图新增大图预览功能

yunxing 4 lat temu
rodzic
commit
d5be47443e
1 zmienionych plików z 36 dodań i 29 usunięć
  1. 36 29
      src/views/overview/index.vue

+ 36 - 29
src/views/overview/index.vue

@@ -1,11 +1,11 @@
 <template>
     <div class='overview'>
-        <!-- <van-button @click='openPreview' type='primary'>测试</van-button> -->
-        <!-- <ImagePreview1 class='overview-img-preview' :visible.sync='showImgPreview' :imgList='imgList' /> -->
+        <!-- 照片预览 -->
+        <ImagePreview class='overview-img-preview' :key='imgKey' :visible.sync='showImgPreview' :imgList='imgPreviewList' />
         <!-- 轮播 -->
         <div class='my-swipe'>
-            <van-swipe :autoplay='3000' indicator-color='white' v-show='imgList.length'>
-                <van-swipe-item v-for='(image, index) in imgList' :key='index'>
+            <van-swipe ref='mSwipe' :autoplay='autoplay' indicator-color='white' v-show='imgList.length'>
+                <van-swipe-item v-for='(image, index) in imgList' :key='index' @click='openImgPreview(image,index)'>
                     <span class='type-name' v-show='image.typename'>{{ image.typename }}</span>
                     <van-image fit='contain' :src='image.url' />
                 </van-swipe-item>
@@ -192,20 +192,25 @@ Vue.use(NoticeBar)
 Vue.use(Empty)
 import { mapGetters } from 'vuex'
 // lodash
-import { isEmpty } from 'lodash'
+import { isEmpty, cloneDeep } from 'lodash'
 // moment
 import moment from 'moment'
-import ImagePreview1 from '@/components/ImagePreview'
+import ImagePreview from '@/components/ImagePreview'
 // 接口
 import { queryFact, queryRecordCount } from '@/api/overview'
 export default {
     name: 'Overview',
     props: {},
-    components: { ImagePreview1 },
+    components: { ImagePreview },
     data() {
         return {
-            showImgPreview: true,
-            imgList: [],
+            imgList: [], //轮播图数组
+
+            showImgPreview: false, //是否显示预览大图
+            imgKey: `img_${new Date().getTime()}`, //预览大图key值
+            imgPreviewList: [], //预览图数组
+            autoplay: 3000, //轮播时长,为0时停止轮播
+
             active: 0, //  激活的tab页 0:建筑综合信息 1:施工单位信息
             plazaName: '', //广场名称
             build: [], //建筑综合信息
@@ -226,9 +231,13 @@ export default {
         ...mapGetters(['plazaId']),
     },
     watch: {
-        showImgPreview(val) {
-            console.log('========')
-            console.log(val)
+        /**
+         * 关闭预览大图之后,启动自动轮播
+         */
+        showImgPreview(newV, oldV) {
+            if (newV !== oldV && !newV) {
+                this.autoplay = 3000
+            }
         },
     },
     created() {
@@ -237,12 +246,23 @@ export default {
     },
 
     beforeMount() {},
-    mounted() {
-        // debugger
-        this.openPreview()
-    },
+    mounted() {},
     methods: {
         /**
+         * 显示预览大图,同时停止swipe轮播
+         */
+        openImgPreview(img, index) {
+            this.imgKey = `img_${new Date().getTime()}`
+            this.autoplay = 0 //点击大图预览之后,停止swiper轮播
+            // 按照index,处理图片数组
+            let imgPreviewList = cloneDeep(this.imgList).map((v) => v.url)
+            imgPreviewList = [...imgPreviewList.slice(index), ...imgPreviewList.slice(0, index)]
+            this.$nextTick(() => {
+                this.imgPreviewList = imgPreviewList
+                this.showImgPreview = true
+            })
+        },
+        /**
          * 查询广场概况
          */
         async queryBaseInfo() {
@@ -336,19 +356,6 @@ export default {
             })
             this.noticeBarText = noticeBarText.slice(0, noticeBarText.length - 1)
         },
-        openPreview() {
-            this.showImgPreview = true
-            // this.imgList = [
-            //     'https://img.yzcdn.cn/vant/apple-1.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-2.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-1.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-2.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-1.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-2.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-1.jpg',
-            //     'https://img.yzcdn.cn/vant/apple-2.jpg',
-            // ].slice(0, parseInt(Math.random() * 8 + 1))
-        },
         /**
          * 跳转说明书更新记录
          */