groupon-wx/components/productConSwiperGroupbuying/index.vue

<template>
	<view class='product-bg'>

		<u-swiper height="180" @click="openImg" :list="imgUrls" @change="e => currentNum = e.current" :autoplay="false"
			indicatorStyle="	position: absolute;top: 10px !important;left: 10px !important;">
			<view slot="indicator" class="indicator-num">
				<text class="indicator-num__text">{{ currentNum + 1 }}/{{ imgUrls.length }}</text>
			</view>
		</u-swiper>
	</view>
</template>

<script>
export default {
	props: {
		imgUrls: {
			type: Array,
			default: function () {
				return [];
			}
		},
		videoline: {
			type: String,
			value: ""
		}
	},
	data () {
		return {
			swiperTabList: ['https://yj-bucket-67ff.obs.cn-southwest-2.myhuaweicloud.com/upload/20230515/948f6d74dd7ccbcb3fc4c0d1e1282f9e.jpg', 'https://yj-bucket-67ff.obs.cn-southwest-2.myhuaweicloud.com/upload/20230522/6cf788d4130dd00c7a5ace07f302e99a.jpg'],
			indicatorDots: true,
			currentNum: 0,
			circular: true,
			autoplay: true,
			interval: 3000,
			duration: 500,
			currents: "1",
			controls: true,
			isPlay: true,
			videoContext: ''
		};
	},
	mounted () {
		console.log(this.imgUrls, 'imgUrls..........');
		if (this.videoline) {
			this.imgUrls.shift()
		}
		// #ifndef APP-PLUS
		this.videoContext = uni.createVideoContext('myVideo', this);
		// #endif
	},
	methods: {
		openImg (index) {
			uni.previewImage({
				current: index,
				urls: this.imgUrls,
				indicator: 'number',
				loop: true
			});
		},
		videoPause (e) {
			// #ifdef APP-PLUS
			this.isPlay = true
			this.autoplay = true
			// #endif
		},
		bindPause: function () {

			// #ifndef APP-PLUS
			this.videoContext.play();
			this.$set(this, 'controls', false)
			this.autoplay = false
			// #endif
			// #ifdef APP-PLUS
			this.isPlay = false
			this.videoContext = uni.createVideoContext('myVideo', this);
			this.videoContext.play();
			// #endif
		},
		change: function (e) {
			this.$set(this, 'currents', e.detail.current + 1);
		}
	}
}
</script>

<style scoped lang="scss">
.indicator {
	@include flex(row);
	justify-content: center;

	&__dot {
		height: 6px;
		width: 6px;
		border-radius: 100px;
		background-color: rgba(255, 255, 255, 0.35);
		margin: 0 5px;
		transition: background-color 0.3s;

		&--active {
			background-color: #ffffff;
		}
	}
}


.indicator-num {
	padding: 2px 0;
	background-color: rgba(0, 0, 0, 0.35);
	border-radius: 100px;
	width: 35px;
	@include flex;
	justify-content: center;

	&__text {
		color: #FFFFFF;
		font-size: 12px;
	}
}
</style>