dsProject/dsApp/pages/cart/cart.vue

<template>
	<view class="page">

		<tabbar :index="1"></tabbar>
		<scroll-view class="scroll-view" scroll-y scroll-with-animation :scroll-top="top">
			<view style="padding: 30rpx 30rpx 240rpx;">
				<view class="message" :class="[item.userType]" v-for="(item,index) in list" :key="index"
					@click="msgClick(item, index)">
					<image :src="item.avatar" v-if="item.userType === 'friend'" class="avatar" mode="widthFix"></image>
					<view class="content" v-if="item.messageType === 'image'">
						<image :src="item.content" mode="widthFix"></image>
					</view>

					<!-- 加载状态消息 -->
					<view class="content loading-content" v-else-if="item.isLoading">
						<view class="loading-dots">
							<view class="dot" v-for="i in 3" :key="i"></view>
						</view>
					</view>
					<view class="content voice-content" v-else-if="item.messageType === 'voice'">
						<a-trumpet :isPlay="item.isplay"></a-trumpet>
						{{ item.content }}
					</view>
					<view class="content" v-else>
						{{ item.content }}
					</view>
					<image :src="item.avatar" v-if="item.userType === 'self'" class="avatar" mode="widthFix"></image>
				</view>


			</view>
		</scroll-view>

		<view class="tool">
			<block v-if="messageType === 'text'">
				<image src="../../static/voice.png" mode="widthFix" class="left-icon" @click="messageType='voice'">
				</image>
				<input type="text" v-model="content" class="input" @confirm="send" />
				<image src="../../static/thumb.png" mode="widthFix" class="thumb" @click="chooseImage"></image>
			</block>
			<block v-else-if="messageType === 'voice'">
				<image src="../../static/text.png" mode="widthFix" class="left-icon" @click="messageType='text'">
				</image>
				<text class="voice-crl" @touchstart="touchstart"
					@touchend="touchend">{{ recordStart ? '松开 发送' : '按住 说话' }}</text>
			</block>
		</view>

		<view v-if="recordStart" class="audio-animation">
			<view class="audio-wave">
				<text class="audio-wave-text" v-for="item in 10" :style="{'animation-delay': `${item/10}s`}"></text>
				<view class="text">松开 发送</view>
			</view>

		</view>



	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	const plugin = requirePlugin("WechatSI")
	const manager = plugin.getRecordRecognitionManager()

	import permision from './permission.js';

	import {
		getAIReply,
		getChatLog
	} from '@/config/api.js';

	export default {
		data() {
			return {
				permisionState: false,
				content: '',
				list: [],
				top: 0,
				messageType: 'voice', // text 发送文本；voice 发送语音
				recordStart: false,
				isLoading: false, // 添加loading状态变量
				playingIndex: -1,
			};
		},
		onLoad(options) {
			uni.setNavigationBarTitle({
				title: '私人助理'
			})
			this._friendAvatar = 'https://ww1.sinaimg.cn/mw690/a1a9fb72gy1hl1cd1znplj20j60j6n0h.jpg'
			this._selfAvatar = 'https://ask.dcloud.net.cn/uploads/avatar/001/43/07/62_avatar_max.jpg?=1705916918'


			getChatLog({
				page: '1',
				page_size: '10',
				session_id: '1'
			}).then((res) => {
				console.log(res)
				const messages = [];
				res.data.data.forEach(item => {
					// 添加用户消息
					messages.push({
						content: item.user_input,
						userType: 'self',
						avatar: this._selfAvatar
					});

					// 添加AI回复消息
					messages.push({
						content: `${Math.ceil(item.duration)}''`,
						audioSrc: item.audio_url,
						userType: 'friend',
						avatar: this._friendAvatar,
						messageType: 'voice',
						isplay: false // 明确设置初始值
					});

					// 使用数组赋值而不是push，确保响应式更新
					this.list = messages;

				});
			}).catch((err) => {
				console.log(err)
			}).finally(() => {
				this.scrollToBottom();
			})


			// this.list = [{
			// 		content: '历史消息',
			// 		userType: 'friend',
			// 		messageType: 'voice',
			// 		avatar: this._friendAvatar
			// 	},
			// 	{
			// 		content: '历史消息',
			// 		userType: 'self',
			// 		avatar: this._selfAvatar
			// 	}, {
			// 		content: '历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,',
			// 		userType: 'friend',
			// 		avatar: this._friendAvatar
			// 	},
			// 	{
			// 		content: '历史消息',
			// 		userType: 'self',
			// 		avatar: this._selfAvatar
			// 	}, {
			// 		content: '历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,历史消息,',
			// 		userType: 'friend',
			// 		avatar: this._friendAvatar
			// 	},
			// 	{
			// 		content: '历史消息',
			// 		userType: 'self',
			// 		avatar: this._selfAvatar
			// 	}
			// ]

			manager.onStart = () => {
				console.log('==onStart==')
				this.recordStart = true
			};

			manager.onStop = (res) => {
				console.log('==onStop==', res)
				this.recordStart = false
				this.voicePath = res.tempFilePath;
				this.voiceText = res.result;
				if (this.voiceText == '') {
					this.voiceText = '周围太安静啦~再试试~';
				}

				// 创建新的消息数组
				const newList = [...this.list];

				// 添加用户消息
				newList.push({
					content: this.voiceText,
					userType: 'self',
					avatar: this._selfAvatar
				});

				// 添加loading消息
				const loadingIndex = newList.length;
				newList.push({
					content: 'loading',
					userType: 'friend',
					avatar: this._friendAvatar,
					isLoading: true,
					isplay: false
				});

				// 更新整个列表
				this.list = newList;
				this.scrollToBottom();

				// this.list.push({
				// 	content: this.voiceText,
				// 	userType: 'self',
				// 	avatar: this._selfAvatar
				// })

				// this.scrollToBottom();

				// // 先添加一个loading状态的消息
				// this.isLoading = true;
				// this.list.push({
				// 	content: 'loading',
				// 	userType: 'friend',
				// 	avatar: this._friendAvatar,
				// 	isLoading: true,
				// 	isplay: false
				// })
				// this.loadingMessageIndex = this.list.length - 1;
				// this.scrollToBottom();

				getAIReply({
					prompt: this.voiceText,
					session_id: '1'
				}).then((res) => {
					// this.list[this.loadingMessageIndex] = {
					// 	content: `${Math.ceil(res.data.duration)}''`,
					// 	audioSrc: res.data.url,
					// 	userType: 'friend',
					// 	avatar: this._friendAvatar,
					// 	messageType: 'voice',
					// 	isplay: false
					// }
					// 再次创建新数组以更新loading消息
					const updatedList = [...this.list];
					updatedList[loadingIndex] = {
						content: `${Math.ceil(res.data.duration)}''`,
						audioSrc: res.data.url,
						userType: 'friend',
						avatar: this._friendAvatar,
						messageType: 'voice',
						isplay: false
					};
					this.list = updatedList;
				}).catch((err) => {
					console.log(err)
					// 错误处理：将loading消息更新为错误提示
					this.list[this.loadingMessageIndex] = {
						content: '抱歉，获取回复失败，请重试',
						userType: 'friend',
						avatar: this._friendAvatar,
						isLoading: false
					};
				}).finally(() => {
					this.isLoading = false;
					this.scrollToBottom();
				})
			};
			// 识别错误事件  
			manager.onError = (err) => {
				uni.showToast({
					title: '错误(' + err.retcode + ')：' + err.msg,
					icon: 'none',
					duration: 2000, //持续时间为 2秒
				})
			};
		},
		onHide() {
			if (this._innerAudioContext) {
				this._innerAudioContext.stop()
			}
		},
		created() {
			this.checkPermission();
		},
		methods: {

			upx2px(upx) {
				return uni.upx2px(upx) + 'px';
			},
			send() {
				this.list.push({
					content: this.content,
					userType: 'self',
					avatar: this._selfAvatar
				})
				this.content = ''
				this.scrollToBottom()
				// 模拟对方回复
				setTimeout(() => {
					this.list.push({
						content: '好的',
						userType: 'friend',
						avatar: this._friendAvatar
					})
					this.scrollToBottom()
				}, 1500)
			},

			chooseImage() {
				uni.chooseImage({
					// sourceType: 'album',
					success: (res) => {
						this.list.push({
							content: res.tempFilePaths[0],
							userType: 'self',
							messageType: 'image',
							avatar: this._selfAvatar
						})
						this.scrollToBottom()
						// 模拟对方回复
						setTimeout(() => {
							this.list.push({
								content: '风景好漂亮啊~',
								userType: 'friend',
								avatar: this._friendAvatar
							})
							this.scrollToBottom()
						}, 1500)
					}
				})
			},

			scrollToBottom() {
				this.top = this.list.length * 1000
			},

			msgClick(data, index) {
				if (data.messageType === 'voice') {
					// 先停止之前可能在播放的音频
					innerAudioContext.stop();

					// 重置所有消息的播放状态
					this.list.forEach((msg, i) => {
						if (msg.messageType === 'voice') {
							this.$set(this.list[i], 'isplay', false);
						}
					});

					// 设置当前消息的播放状态
					this.$set(this.list[index], 'isplay', true);

					// 播放音频
					innerAudioContext.src = data.audioSrc;
					innerAudioContext.play();

					// 监听播放结束事件
					innerAudioContext.onEnded(() => {
						this.$set(this.list[index], 'isplay', false);
					});

					// 监听错误事件
					innerAudioContext.onError(() => {
						this.$set(this.list[index], 'isplay', false);
					});
				}
				/*
				if (data.messageType === 'voice') {
					// 设置当前播放的消息索引
					// data.isplay = true;
					this.list[index].isplay = true;

					innerAudioContext.src = data.audioSrc;
					innerAudioContext.play();

					// 监听播放结束事件
					innerAudioContext.onEnded(() => {
						// 播放完毕，重置播放状态
						// data.isplay = false;
						this.list[index].isplay = false;
					});

					// 监听错误事件
					innerAudioContext.onError(() => {
						// data.isplay = false;
						this.list[index].isplay = false;
					});
				}
				*/
				arguments
			},

			authTips() {
				uni.showModal({
					title: '提示',
					content: '您拒绝了麦克风权限，将导致功能不能正常使用，去设置权限？',
					confirmText: '去设置',
					cancelText: '取消',
					success: (res) => {
						if (res.confirm) {
							uni.openSetting({
								success: (res) => {
									if (res.authSetting['scope.record']) {
										console.log("已授权麦克风");
										this._recordAuth = true
									} else {
										// 未授权
										wx.showModal({
											title: '提示',
											content: '您未授权麦克风，功能将无法使用',
											showCancel: false,
											confirmText: '知道了'
										})
									}
								}
							})
						}
					}
				})
			},

			touchstart() {
				if (!this.permisionState) {
					this.checkPermission();
					return;
				}
				manager.start({
					duration: 60000,
					lang: "zh_CN"
				})
				/*
								//开始录音
								const _permission = 'scope.record'
								uni.getSetting({
									success: (res) => {
										// 判断是否有相关权限属性
										if (res.authSetting.hasOwnProperty(_permission)) {
											// 属性存在，且为false，用户拒绝过权限
											if (!res.authSetting[_permission]) {
												this.authTips()
											} else {
												// 已授权
												this._recordAuth = true

												manager.start({
													duration: 60000,
													lang: "zh_CN"
												})
											}
										} else {
											// 属性不存在，需要授权
											uni.authorize({
												scope: _permission,
												success: () => {
													// 授权成功
													this._recordAuth = true
												},
												fail: (res) => {

													// 104 未授权隐私协议
													// 用户可能拒绝官方隐私授权弹窗，为了避免过度弹窗打扰用户，开发者再次调用隐私相关接口时，
													// * 若距上次用户拒绝不足10秒，将不再触发弹窗，直接给到开发者用户拒绝隐私授权弹窗的报错

													if (res.errno == 104) {
														uni.showModal({
															title: '温馨提示',
															content: '您拒绝了隐私协议，请稍后再试',
															confirmText: '知道了',
															showCancel: false,
															success: () => {}
														})
													} else {
														// 用户拒绝授权
														this.authTips()
													}
												}
											})
										}
									}
								})
								*/
			},

			async checkPermission() {
				var that = this;
				// #ifdef APP-PLUS
				// 先判断os
				let os = uni.getSystemInfoSync().osName;
				if (os == 'ios') {
					this.permisionState = await permision.judgeIosPermission('record');
				} else {
					this.permisionState = await permision.requestAndroidPermission('android.permission.RECORD_AUDIO');
				}
				if (this.permisionState !== true && this.permisionState !== 1) {
					uni.showToast({
						title: '请先授权使用录音',
						icon: 'none'
					});
					return;
				}
				// #endif			

				// #ifdef MP-WEIXIN
				uni.authorize({
					scope: 'scope.record',
					success(e) {
						that.permisionState = true;
					},
					fail() {
						uni.showToast({
							title: '请授权使用录音',
							icon: 'none'
						});
					}
				});
				// #endif
			},

			touchend() {
				if (!this.recordStart) return
				manager.stop();
			},

			//播放声音
			play(src) {
				this._innerAudioContext = wx.createInnerAudioContext()
				this._innerAudioContext.src = src
				this._innerAudioContext.play()
				this._innerAudioContext.onPlay(() => {
					console.log('开始播放')
				})
				this._innerAudioContext.onEnded(() => {
					// 播放完毕，清除音频链接
					console.log('播放完毕');
				})
				this._innerAudioContext.onError((res) => {
					console.log('audio play error', res)
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.scroll-view {
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
		/* #ifndef H5 */
		height: 100vh;
		/* #endif */
		background: #eee;
		box-sizing: border-box;
	}

	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 10rpx;
			margin-right: 30rpx;
		}

		.content {
			min-height: 80rpx;
			max-width: 60vw;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;

			image {
				width: 200rpx;
			}
		}

		.voice-content {
			display: flex;
			align-items: center;
		}

		&.self {
			justify-content: flex-end;

			.avatar {
				margin: 0 0 0 30rpx;
			}

			.content {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}

		&.friend {
			.content {
				position: relative;

				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}

	.tool {
		position: fixed;
		width: 100%;
		min-height: 120rpx;
		left: 0;
		bottom: 0;
		background: #fff;
		display: flex;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 24rpx 20rpx 40rpx;
		padding-bottom: calc(20rpx + constant(safe-area-inset-bottom)/2) !important;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom)/2) !important;

		.left-icon {
			width: 56rpx;
			height: 56rpx;
			margin-right: 10rpx;
		}

		.input,
		.voice-crl {
			background: #eee;
			border-radius: 10rpx;
			height: 70rpx;
			margin-right: 30rpx;
			flex: 1;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 28rpx;
		}

		.thumb {
			width: 64rpx;
			height: 64rpx;
		}

		.voice-crl {
			text-align: center;
			line-height: 70rpx;
			font-weight: bold;
		}
	}

	.audio-animation {
		position: fixed;
		// width: 100vw;
		// height: 100vh;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: 202410;
		display: flex;
		justify-content: center;
		align-items: center;

		.text {
			text-align: center;
			font-size: 28rpx;
			color: #333;
			margin-top: 60rpx;
		}

		.audio-wave {
			padding: 50rpx;

			.audio-wave-text {
				background-color: blue;
				width: 7rpx;
				height: 12rpx;
				margin: 0 6rpx;
				border-radius: 5rpx;
				display: inline-block;
				border: none;
				animation: wave 0.25s ease-in-out;
				animation-iteration-count: infinite;
				animation-direction: alternate;
			}

			/*  声波动画  */
			@keyframes wave {
				from {
					transform: scaleY(1);
				}

				to {
					transform: scaleY(4);
				}
			}
		}
	}

	.loading-content {
		min-width: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.loading-dots {
		display: flex;
		align-items: center;
	}

	.dot {
		width: 12rpx;
		height: 12rpx;
		background-color: #999;
		border-radius: 50%;
		margin: 0 6rpx;
		animation: dot-animation 1.4s infinite ease-in-out both;
	}

	.dot:nth-child(1) {
		animation-delay: -0.32s;
	}

	.dot:nth-child(2) {
		animation-delay: -0.16s;
	}

	@keyframes dot-animation {

		0%,
		80%,
		100% {
			transform: scale(0);
		}

		40% {
			transform: scale(1);
		}
	}
</style>