|
@@ -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))
|
|
|
- },
|
|
|
/**
|
|
|
* 跳转说明书更新记录
|
|
|
*/
|