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

<!-- PreviewPicture.vue -->
<template>
	<view class="div" v-if="detailInfo">
    <uni-popup background-color="#fff" ref="isshow" type="right" >
			<view :style="'width:'+screenWidth+'px'" class="common-popup-wrapper">
			<view class="div preview-picture">
        <title-header />
				<view
					class="div picture-header"
					v-on:click="closePopup()"
				>
					<text class="span">关闭</text
					><text class="span">商品详情</text
					>
				</view>

				<view class="div picture-body">
					<image mode="aspectFit" class="img" v-if="detailInfo.pgoods_image" v-bind:src="detailInfo.pgoods_image" @click="setPopHeader()" />
				</view>
			</view>
		</view>
		</uni-popup>
	</view>
</template>

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

  props: {
  },
  components:{
    TitleHeader
  },

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


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

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

<style lang="scss" scoped>

.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;
    .img{width:100%}
	}
}
</style>