new-uniapp-h5/pages/takeaway/compontents/page-banner.vue

<template>
	<view class="banner" v-if="goods && goods.goods_pic && goods.goods_pic.length">
		<swiper :current="current" :indicator-dots="false" @change="(e) => (current = e.detail.current)">
			<template v-if="goods.video_url">
				<swiper-item>
					<video id="myVideo" :autoplay="true" :muted="true" :show-mute-btn="true" class="banner-image" :src="goods.video_url"></video>
				</swiper-item>
			</template>
			<swiper-item v-for="(item, index) of goods.goods_pic" :key="index">
				<image class="banner-image" :src="item.pic_url" mode="aspectFill"></image>
			</swiper-item>
		</swiper>
		<div class="banner-info-1" :class="goods.video_url && current == 0 ? 'banner-info-top' : 'banner-info-2'">
			<view>
				<template v-if="goods.video_url">
					<view @click="current = 0" class="banner-item" :class="current > 0 ? '' : 'active-banner'">
						视频
					</view>
					<view @click="current = 1" class="banner-item" :class="current > 0 ? 'active-banner' : ''">
						图集
						<template v-if="current > 0">
							{{ current }}/{{ goods.goods_pic && goods.goods_pic.length }}
						</template>
					</view>
				</template>
				<template v-else>
					<view class="banner-item active-banner">
						图集 {{ current + 1 }}/{{ goods.goods_pic && goods.goods_pic.length }}
					</view>
				</template>
				
			</view>
		</div>
	</view>
</template>

<script>
	export default {
		props: ["goods"],

		data: () => {
			return {
				current: 0,
				videoContext: null
			}
		},
		computed: {
			getPrice() {
				return (price = "0.00") => {
					return price.split(".");
				};
			}
		},
		created() {
			// setTimeout(() => {
			// 	this.videoContext = uni.createVideoContext('myVideo')
			// }, 500)
		},
		watch: {
			// current(value) {
			// 	let videoContext = uni.createVideoContext('myVideo')
			// 	console.log(videoContext, 'videoContext')
			// 	videoContext.pause()
			// }
		},
		methods: {
			previewPics(current) {
				let urls = this.goods.goods_pic.map((el) => el.pic_url);
				uni.previewImage({
					current,
					urls,
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.banner {
		position: relative;
	}

	swiper,
	swiper-item,
	.banner-image {
		height: 500rpx;
		width: 100%;
	}

	.banner-image {
		display: block;
	}
	.banner-info-1 {
		
	}
	.banner-info-2 {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 20rpx;
	}
	.banner-info-top {
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		right: 0;
		left: 0;
		top: 20rpx;
	}
	.banner-info-1 > view {
		background: rgba(0, 0, 0, 0.2);
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.banner-item {
			padding: 4rpx 20rpx;
			font-size: 24rpx;
			color: #fff;
			display: flex;
			align-items: center;
			border-radius: 30rpx;
		}
		.active-banner {
			background: rgba(0, 0, 0, 0.4);
		}
	}
	.banner-info {
		position: absolute;
		right: 0;
		left: 0;
		margin: 0 auto;
		bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 220rpx;
		height: 38rpx;
		background: rgba(0, 0, 0, 0.2);
		border-radius: 32px;
		color: #fff;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}

	.banner-num {
		bottom: 34rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 126rpx;
		height: 38rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 32px;
		color: #fff;
		font-size: 22rpx;
		margin-right: auto;
	}

	.banner-det {
		padding-right: 15rpx;
		font-size: 22rpx;
		display: flex;
		align-items: center;
	}

	// .banner-det {
	//   position: absolute;
	//   right: 0;
	//   left: 0;
	//   margin: 0 auto;
	//   bottom: 34rpx;
	//   display: flex;
	//   align-items: center;
	//   justify-content: center;
	//   width: 252rpx;
	//   height: 38rpx;
	//   background: rgba(0, 0, 0, 0.3);
	//   border-radius: 32px;
	//   color: #fff;
	//   font-size: 24rpx;
	// }
</style>