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

<!-- GoodsSwipe.vue -->
<template>
	<view class="div swipe-wrapper ui-common-swiper" v-bind:style="'width:'+getBannerStyle.width+'px;height:'+getBannerStyle.height+'px'" v-if="detailInfo">
		<image mode="aspectFit" class="img" v-if="detailInfo.pgoods_image" v-bind:src="detailInfo.pgoods_image" @click="setPopupVisible()" />
	</view>
</template>

<script>
import PreviewPicture from './PreviewPicture'
import { mapState, mapMutations } from 'vuex'
export default {
  data () {
    return {
      popupVisible: false
    }
  },

  components: {
    'v-picture': PreviewPicture
  },

  created () {
    uni.$on('hide-priview-picture', value => {
      this.popupVisible = value
      this.setisPreviewPicture(value)
    })
  },

  computed: {
    ...mapState({
      detailInfo: state => state.pointsgoods.detailInfo
    }),
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width
      let itemHeight = width
      return {
        width: itemWidth,
        height: itemHeight
      }
    }
  },

  beforeDestroy: function () {
    uni.$off('hide-priview-picture')
  },
  methods: {
    ...mapMutations({
      setisPreviewPicture: 'setisPreviewPicture'
    }),

    setPopupVisible () {
      this.popupVisible = true
      this.setisPreviewPicture(true)
    }

  }
}
</script>

<style lang="scss">
	.ui-common-swiper {
		width: 100%;
		height: 100%;
		text-align:center;
		.img {
			height: 100%;
			width: 100%;
		}
	}
</style>