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=""></image>
								</view>
								<view class="name">
									{{item.merchantName}}<br />
									<span>{{item.createTime}}</span>
								</view>
							</view>
							<view class="play" v-if="item.recordUrl.length>0">
								<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>
							</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: 1,
				form: [],
				historyList: [],
				audioContext: null,
			}
		},
		methods: {
			//返回
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			getLive() {
				this.$http.get("/merchant/localTsCustomerServiceDict/list?taskId=" + this.taskId + '&source=' + '1').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

						}
					})
			},
			//播放，暂停
			play(item) {
				const audioContext = uni.createInnerAudioContext();
				audioContext.autoplay = true;
				audioContext.src = configService.apiUrl + '/' + item.recordUrl
				if(item.isPlay){
					audioContext.onPlay(() => {
						console.log('开始播放');
					});
				}else{
					audioContext.pause();
					console.log('音频已暂停');
				}
				
			},
			exchangeStatus(item, index) {
				item.isPlay = !item.isPlay
					this.$forceUpdate()
			},
			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
						}
					})
					console.log(this.historyList);
				})
			},
		},
		onLoad(options) {
			this.taskId = options.taskId
		},
		mounted() {
			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>