tongli_WeChat/subPackages/leyou/detail.vue

<template>
	<view class="bg scroll" v-if="detail.list_images" :style="{backgroundImage: 'url('+showImg(detail.list_images.split(',')[0])+')'}">
		<view class="topLeft flex-center">
			<span class="iconfont" @click="goBack">&#xe660;</span>
		</view>

		<view class="content">
			<view class="title">{{detail.title}}</view>
			<view class="subtitle">{{detail.subtitle}}</view>
			<view class="notice" v-if="detail.open_description">
				<uni-notice-bar showIcon scrollable single :text="detail.open_description" color="#fff"
					background-color="rgba(255, 255, 255, .26)" speed="50"></uni-notice-bar>
			</view>
		</view>
		
		<!-- 音视频 -->
		<view class="box">
			<view>景点解说</view>
			<view>
				<view v-for="(item,index) in detail.multimedia" :key="index" class="item" @click="play(item,index)">
					<image :src="showImg(item.head_img)" mode="aspectFill" class="item-img"></image>
					<view class="item-title text-overflow">{{item.title}}</view>
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/sound.png" class="item-icon" v-if="item.type == 'audio' && !item.status"></image>
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/pause.png" class="item-icon" v-if="item.type == 'audio' && item.status"></image>
					<image src="https://static.ticket.sz-trip.com/tongli/images/index/play.png" class="item-icon" v-if="item.type == 'video'"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail: {},
				audio: null,
				isPlayIndex: null
			}
		},
		onLoad(option) {
			this.Post({
				id: option.id
			}, '/api/scenic/getScenicById').then(res => {
				if (res.data.flag == 0) {
					uni.showToast({
						title: '商品不存在或已下架',
						icon: 'none'
					})
					setTimeout(() => {
						this.goBack()
					}, 2000)
				}
				res.data.multimedia.map(item => {
					item.type = item.multimedia_url.includes('mp3') ? 'audio' : 'video'
					item.status = false // 是否播放
				})
				this.detail = res.data
			});
		},
		onShow() {
			this.isPlayIndex = null
		},
		onHide() {
			if(this.audio){
				// 停止播报（销毁当前实例）
				this.audio.destroy()
			}
		},
		onUnload() {
			if(this.audio){
				// 停止播报（销毁当前实例）
				this.audio.destroy()
			}
		},
		methods: {
			// 播放音视频
			play(item,index) {
				if(item.type == 'audio') {
					// 判断新音频链接是否与正在播放链接相同
					if(this.audio && this.audio.src == this.showImg(item.multimedia_url)) {
						// 当前是否是暂停或停止状态，true 表示暂停或停止，false 表示正在播放
						if(this.audio.paused) {
							this.audio.play()
						}else {
							this.audio.pause()
						}
					}else {
						// 是否存在audio组件
						if(this.audio) {
							// 如果存在停止音频
							this.detail.multimedia[this.isPlayIndex].status = false
						    this.audio.stop(); // 停止当前音频
						    this.audio = null;
						}
						// 不存在，创建音频
						this.audio = uni.createInnerAudioContext();
						this.audio.src = this.showImg(item.multimedia_url)
						this.audio.play()
						
					}
					if(this.audio) {
						this.audio.onEnded(() => {
							// 播放结束
						    item.status = false
						});
					}
					
					this.isPlayIndex = index
					item.status = !item.status
					
				}else {
					uni.navigateTo({
						url: '/subPackages/video/video?item=' + encodeURIComponent(JSON.stringify(item))
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.bg {
		width: 100vw;
		height: 100vh;
		background-size: auto 100%;
		animation: scroll 10s infinite;
		overflow: hidden;
		background-repeat: no-repeat;
	}

	@keyframes scroll {
		0% {
			background-position: 0%;
		}

		100% {
			background-position: -1000px;
		}

		/* 500px 是背景图片宽度的一半 */
	}

	.content {
		width: 670rpx;
		position: absolute;
		top: 235rpx;
		left: 40rpx;

		.title {
			font-weight: 500;
			font-size: 48rpx;
			color: #FFFFFF;
		}

		.subtitle {
			margin-top: 35rpx;
			font-weight: 500;
			font-size: 31rpx;
			color: #FFFFFF;
		}
		
		.notice {
			margin-top: 35rpx;
			height: 80rpx;
			border-radius: 33rpx;
			overflow: hidden;
		}
	}
	
	.box {
		position: absolute;
		bottom: 79rpx;
		width: 100%;
		padding-left: 42rpx;
		
		&>view:first-child {
			font-weight: 500;
			font-size: 37rpx;
			color: #FFFFFF;
			padding-left: 12rpx;
		}
		
		&>view:last-child {
			overflow-x: scroll;
			overflow-y: hidden;
			font-weight: bold;
			font-size: 31rpx;
			color: #FFFFFF;
			display: flex;
			margin-top: 28rpx;
		}
		&>view:last-child::-webkit-scrollbar {
			display: none;
		}
		
		.item {
			width: 206rpx;
			height: 254rpx;
			background: rgba(255, 255, 255, .4);
			border-radius: 20rpx;
			margin-right: 20rpx;
			padding: 8rpx;
			flex-shrink: 0;
			position: relative;
			
			.item-img {
				width: 190rpx;
				height: 190rpx;
				border-radius: 13rpx;
			}
			
			.item-title {
				width: 190rpx;
				font-weight: bold;
				font-size: 31rpx;
				color: #FFFFFF;
				text-align: center;
			}
			
			.item-icon {
				position: absolute;
				width: 46rpx;
				height: 46rpx;
				top: 80rpx;
				left: 80rpx;
			}
		}
	}
</style>