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

<!-- GoodsSwipe.vue -->
<template>
	<view id="goods-swipe" class="div swipe-wrapper ui-common-swiper info-goods-swipe" v-bind:style="'width:'+getBannerStyle.width+'px;height:'+getBannerStyle.height+'px'" v-if="detailInfo">
		<view class="div" v-if="detailInfo.goodsvideo_url">
		<view class="div m-btn show-btn" @click="goNavigate('/pages/home/goodsdetail/GoodsVideo')"><text class="span iconfont">&#xe6c5;</text>视频</view>
		</view>
    <!-- 轮播图 -->
		<swiper
			:autoplay="false"
			class="ui-common-swiper goods-image"
			:prevent="false"
			:stop-propagation="true"
      :indicator-dots="detailInfo.photos && detailInfo.photos.length>1"
			@change="handleChange"
		>
			<swiper-item
				v-for="(item, index) in detailInfo.photos"
				v-bind:key="index"
				v-if="detailInfo.photos && detailInfo.photos.length > 0"
			>
				<image mode="aspectFit" class="img" v-bind:src="item" v-on:click="setPopupVisible(index)" />
			</swiper-item>
		</swiper>

	</view>
</template>

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

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

  computed: {
    ...mapState({
      detailInfo: state => state.goodsdetail.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',
      setSwiperId: 'setSwiperId'
    }),

    goNavigate(path){
      uni.navigateTo({url:path})
    },
    setPopupVisible () {
      this.popupVisible = true
      this.setisPreviewPicture(true)
    },

    handleChange (index) {
      this.index = index
      this.setSwiperId(index)
    }
  }
}
</script>

<style lang="scss">
 .info-goods-swipe {
	.mint-swipe-items-wrap {
		.mint-swipe-item {
			text-align: center;
			overflow: hidden;
			.img {
				height: 100%;
				width: auto;
			}
		}
	}
	.mint-swipe-indicators {
		.div.mint-swipe-indicator {
			background: #efeff4;
			opacity: 1;
			&.is-active {
				background: $primaryColor;
			}
		}
	}
}
</style>
<style scoped lang="scss">
	.ui-common-swiper{width: 100%;height: 100%;}
	.swipe-wrapper{position: relative}
	.goods-image{position: absolute;z-index: 10;top:0;left:0}
	.goods-video{position: absolute;z-index: 20;top:0;left:0;background: #000}
	.m-btn{position: absolute;font-size:$h1;}
	.close-btn{top:.5rem;right:.5rem;z-index: 30}
	.show-btn{bottom:.5rem;left:.5rem;z-index: 15;height: 1.5rem;line-height: 1.5rem;border-radius: 1.5rem;background: $primaryColor;color: #fff;font-size:$subFontSize;padding:0 .5rem;}
</style>