LocalLivingServicesUniapp/pages/order/serviceOrder/live.vue

<template>
	<view class="live">
		<view class="top">
		</view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				实况记录
			</view>
		</view>
		<view class="list">
			<view class="car_data">
				<view class="fat" v-for="item in form" :key="item.id">
					<view class="fat_title">{{item.name}}</view>
					<view class="sun" v-for="row in item.categoryList" :key="row.id">
						{{row.name}}
						<span>{{row.names}}</span>
					</view>
				</view>
			</view>
			<!-- 备注信息 -->
			<view class="car_data">
				<view class="fat">
					<view class="fat_title">备注信息</view>
					<view class="message" v-for="(item,index) in historyList" :key="item.id">
						<view class="top">
							<view class="left">
								<view class="img">
									<image :src="item.logo" mode="" v-if="item.logo"></image>
									<image :src="item.photo" mode="" v-if="item.photo"></image>
								</view>
								<view class="name">
									{{item.merchantName}}<br />
									<span>{{item.createTime}}</span>
								</view>
							</view>
							<view class="play" v-if="item.recordUrl">
								<!-- <image src="/static/pause.png" mode="" @click="exchangeStatus(item),play(item)" v-if="item.isPlay">
								</image>
								<image src="/static/play.png" mode="" @click="exchangeStatus(item),play(item)" v-else></image> -->
								<image :src="item.isPlay ? '/static/pause.png' : '/static/play.png'" mode="aspectFit"
									@click="handleAudioPlay(item)" class="play-icon" />
							</view>
						</view>
						<view class="content">
							{{item.msgContent}}
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import configService from '../../../common/service/config.service'
	export default {
		data() {
			return {
				taskId: null,
				form: [],
				historyList: [],
				audioContext: null,
				currentAudioId: null, // 当前播放的音频ID
				isAudioPlaying: false, // 音频是否正在播放
				checkType:''
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getLive() {
				this.$http.get("/merchant/localTsCustomerServiceDict/list?taskId=" + this.taskId + '&source=' + this.checkType).then(
					res => {
						if (res.data.code == 200) {
							this.form = res.data.result
							let list = []
							this.form.forEach(item => {
								let temp = []
								item.categoryList.forEach(row => {

									if (row.idList.length > 0) {
										const idSet = new Set(row.idList);
										// Find the names that match the ids in idList
										const matchedNames = row.itemList
											.filter(item => idSet.has(item.id)) // Filter items where the id matches
											.map(item => item.name) // Extract the name from the matching items
											.join(','); // Join names with commas
										row.names = matchedNames;
										temp.push(row)
									}
								})
								item.categoryList = temp
								if (item.categoryList.length > 0) {
									list.push(item)
								}
							})
							this.form = list
						}
					})
			},
			// 处理音频播放/暂停
			handleAudioPlay(item) {
				// 如果是当前正在播放的音频
				if (this.currentAudioId === item.id) {
					if (this.isAudioPlaying) {
						this.pauseAudio();
					} else {
						this.resumeAudio();
					}
				}
				// 如果是新的音频
				else {
					this.playNewAudio(item);
				}
			},

			// 播放新音频
			playNewAudio(item) {
				// 先停止当前播放的音频
				if (this.audioContext) {
					this.stopAudio();
				}

				// 创建新的音频上下文
				this.audioContext = uni.createInnerAudioContext();
				this.audioContext.src = `${configService.apiUrl}/${item.recordUrl}`;

				// 设置事件监听
				this.setupAudioListeners();

				// 更新状态
				this.currentAudioId = item.id;
				this.isAudioPlaying = true;

				// 开始播放
				this.audioContext.play();

				// 更新UI状态
				this.updateAudioStatus(item.id, true);
			},

			// 暂停音频
			pauseAudio() {
				if (this.audioContext) {
					this.audioContext.pause();
					this.isAudioPlaying = false;
					this.updateAudioStatus(this.currentAudioId, false);
				}
			},

			// 继续播放
			resumeAudio() {
				if (this.audioContext) {
					this.audioContext.play();
					this.isAudioPlaying = true;
					this.updateAudioStatus(this.currentAudioId, true);
				}
			},

			// 停止音频
			stopAudio() {
				if (this.audioContext) {
					this.audioContext.stop();
					this.updateAudioStatus(this.currentAudioId, false);
					this.cleanupAudio();
				}
			},

			// 设置音频事件监听
			setupAudioListeners() {
				if (!this.audioContext) return;

				this.audioContext.onPlay(() => {
					this.isAudioPlaying = true;
					this.updateAudioStatus(this.currentAudioId, true);
				});

				this.audioContext.onPause(() => {
					this.isAudioPlaying = false;
					this.updateAudioStatus(this.currentAudioId, false);
				});

				this.audioContext.onStop(() => {
					this.isAudioPlaying = false;
					this.updateAudioStatus(this.currentAudioId, false);
				});

				this.audioContext.onEnded(() => {
					this.isAudioPlaying = false;
					this.updateAudioStatus(this.currentAudioId, false);
					this.cleanupAudio();
				});

				this.audioContext.onError((err) => {
					console.error('播放错误:', err);
					this.isAudioPlaying = false;
					this.updateAudioStatus(this.currentAudioId, false);
					this.cleanupAudio();
					uni.showToast({
						title: '音频播放失败',
						icon: 'none'
					});
				});
			},

			// 更新音频播放状态
			updateAudioStatus(audioId, isPlaying) {
				this.historyList = this.historyList.map(item => {
					if (item.id === audioId) {
						item.isPlay = isPlaying;
					} else if (item.isPlay) {
						item.isPlay = false; // 确保其他音频状态被重置
					}
					return item;
				});
			},

			// 清理音频资源
			cleanupAudio() {
				if (this.audioContext) {
					this.audioContext.destroy();
					this.audioContext = null;
				}
				this.currentAudioId = null;
				this.isAudioPlaying = false;
			},
			getHistroyList() {
				let data = {
					taskId: this.taskId
				}
				this.$http.post('/merchant/localTsCustomerServiceTaskMsg/queryList', data).then((res) => {
				
					this.historyList = res.data.result
					this.historyList.forEach(item => {
						if (item.recordUrl) {
							item.isPlay = false
						} else {
							item.isPlay = null
						}
					})
				})
			},
		},
		beforeDestroy() {
			if (this.audioContext) {
				this.audioContext.stop();
				this.audioContext.destroy();
				this.audioContext = null;
			}
		},
		mounted() {
			

		},
		onLoad(options) {
			this.taskId = options.taskId
			this.checkType = options.checkType
			this.getLive()
			this.getHistroyList()
		}
	}
</script>

<style lang="scss" scoped>
	.live {
		width: 100vw;
		height: 100vh;
		background: #F8F8FA;
		display: flex;
		flex-direction: column;
		// overflow-y: auto;

		/*#ifdef APP-PLUS*/
		.top {
			width: 100%;
			height: var(--status-bar-height);
			background: #FFFFFF;
		}

		/*#endif*/
		.head {
			width: 100%;
			height: 112rpx;
			padding: 20rpx;
			display: flex;
			align-items: center;
			background: #FFFFFF;
			position: relative;

			.cuIcon-back {
				font-size: 40rpx;
				margin-right: 40rpx;
			}

			.case {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				font-size: 36rpx;
				font-weight: 600;
			}
		}

		.list {
			flex: 1;
			overflow-y: auto;
			background: #F7F7F7;
			padding: 24rpx 30rpx;

			.car_data {
				width: 100%;


				.fat {
					background: #FFFFFF;
					padding: 20rpx;
					margin-bottom: 20rpx;
					border-radius: 10rpx;

					.fat_title {
						font-weight: 600;
						font-size: 30rpx;
						color: #333333;
						margin-bottom: 20rpx;
					}

					.sun {
						width: 100%;
						height: 73rpx;
						border-bottom: 1px solid #eee;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 28rpx;
						color: #666666;

						span {
							color: #181818;
						}
					}

					.message {
						border-bottom: 1px solid #eee;
						padding-bottom: 16rpx;
						margin-bottom: 16rpx;

						.top {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 12rpx;

							.left {
								display: flex;
								align-items: center;

								.img {
									width: 68rpx;
									height: 68rpx;
									border-radius: 8rpx;
									overflow: hidden;
									margin-right: 12rpx;

									image {
										width: 100%;
										height: 100%;
									}
								}

								.name {
									font-size: 28rpx;
									color: #000000;

									span {
										font-size: 24rpx;
										color: #999999
									}
								}
							}

							.play {
								font-size: 24rpx;
								color: #000000;
								text-align: center;

								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						.content {
							font-size: 26rpx;
						}
					}
				}
			}
		}
	}
</style>