hlm_pl_mall_h5/pages/home/goodsdetail/child/PreviewPicture.vue

<!-- PreviewPicture.vue -->
<template>
	<view class="div" v-if="detailInfo">
		<uni-popup background-color="#fff" ref="isshow">
			<view class="div preview-picture">
        <title-header />
				<view
					class="div picture-header"
					v-on:click="closePopup()"
					v-if="!isshowPopHeader"
				>
					<text class="span">关闭</text
					><text class="span" v-if="detailInfo.photos"
						>{{ defaultindex + 1 }} / {{ detailInfo.photos.length }}</text
					>
				</view>

				<view class="div picture-body">
					<swiper
						:autoplay="false"
						:show-indicators="true"
						:current="defaultindex"
						class="ui-common-swiper"
						@change="handleChange"
					>
						<swiper-item
							v-for="(item, index) in detailInfo.photos"
							v-bind:key="index"
						>
							<image mode="aspectFit" class="img" v-bind:src="item" @click="setPopHeader()" />
						</swiper-item>
					</swiper>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
  import TitleHeader from '../../../TitleHeader'
import { mapState, mapMutations } from 'vuex'
export default {
	data() {
		return {
			isshowPopHeader: false,
      defaultindex:0
		}
	},

  components:{
    TitleHeader
  },
	computed: {
		...mapState({
      isPreviewPicture: state => state.goodsdetail.isPreviewPicture,
			detailInfo: state => state.goodsdetail.detailInfo
		})
	},
  watch: {
      isPreviewPicture: function (value) {
        if(value){
          this.showPopup('isshow')
        }else{
          this.hidePopup('isshow')
        }
      },
  },
  mounted() {
    if(this.isPreviewPicture){
      this.showPopup('isshow')
    }
  },
	methods:{
		showPopup(id){
		  this.$refs[id].open()
		},
		hidePopup(id){
		  this.$refs[id].close()
		},
		...mapMutations({
			setisPreviewPicture: 'setisPreviewPicture'
		}),

		/*
				handleChange: 轮播图改变时设置是否阻止事件冒泡
				@params: index 当前滑动的index
			 */
		handleChange(e) {
			this.defaultindex = e.detail.current
		},

		/*
		 *  closePopup: 关闭图片预览
		 */
		closePopup() {
			this.setisPreviewPicture(false)
			uni.$emit('hide-priview-picture', false)
		},

		/*
		 * setPopHeader: 预览大图点击图片切换header
		 */
		setPopHeader(ev) {
			this.isshowPopHeader = !this.isshowPopHeader
		}
	},
        destroyed:function(){
            this.setisPreviewPicture(false)
        }
}
</script>

<style lang="scss" scoped>
  .ui-common-swiper {
    width:100%;
    height: 100%;
    swiper-item{
        display: flex;
        align-items: center;
    }
  }
.swipe-wrapper {
	width: 100%;
}
.mint-popup {
	width: 100%;
	height: 100%;
	background-color: #000;
}
.mint-swipe,
.mint-swipe-items-wrap {
	position: static;
}
.preview-picture {
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 10;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: #000;
  display: flex;
  flex-direction: column;
	.picture-header {
		color: #000;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
		width: 100%;
		top: 0;
    padding-top:var(--status-bar-height);
		.span {
			font-size:$subFontSize;
			font-weight: normal;
      height:2.2rem;
      line-height:2.2rem;
			&:first-child {
        position: absolute;
				cursor: pointer;
				left:0.75rem;
				background-size:1.2rem;
				display: inline-block;
				height:2.2rem;
				line-height:2.2rem;
			}
		}
	}
	.picture-body {
		flex:1;
		display: flex;
		justify-content: center;
		align-content: center;
		align-items: center;
	}
}
</style>