ai-interface/pages/chat/chat.vue

<template>
	<view class="content">
		<view class="content-box" @touchstart="touchstart" id="content-box" :class="{'content-showfn':showFunBtn}">
			<!-- 背景图- 定位方式 -->
			<image class="content-box-bg" :src="_user_info.chatBgImg" :style="{ height: imgHeight }"></image>
			<view class="content-box-loading" v-if="loading"><u-loading mode="flower"></u-loading></view>
			<view class="history-font" @tap="linkToHistory()">历史记录</view>
			<view class="message" v-for="(item, index) in messageList" :key="index" :id="`msg-${item.hasBeenSentId}`"
				:class="index === 0 ? 'marginTop50' : ' '">
				<view class="message-item " :class="item.isItMe ? 'right' : 'left'">
					<image class="img" :src="item.fromUserHeadImg" mode=""></image>
					<!-- contentType = 1 文本 -->
					<view class="content" v-if="item.contentType == 1">{{ item.content }}
						<button class="pay-btn-class" @tap="goPayPage" v-show="index == 2">前往缴费</button>
					</view>
					<!-- contentType = 2 语音 -->
					<view class="content contentType2" :class="[{ 'content-type-right': item.isItMe }]"
						v-if="item.contentType == 2" @tap="handleAudio(item)" hover-class="contentType2-hover-class"
						:style="{width:`${200+(item.contentDuration*2)}rpx`}" style=" justify-content: space-between;">
						<image src="/static/comment.png" mode="aspectFit" style="width: 30rpx;height:40rpx"
							@click.stop="translateVoice(item)"></image>
						<view class="">{{ item.contentDuration }}''</view>
						<view class="voice_icon" :class="[
								{ voice_icon_right: item.isItMe },
								{ voice_icon_left: !item.isItMe },
								{ voice_icon_right_an: item.anmitionPlay && item.isItMe },
								{ voice_icon_left_an: item.anmitionPlay && !item.isItMe }
								
							]"></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部聊天输入框 -->
		<view class="input-box" :class="{ 'input-box-mpInputMargin': mpInputMargin }">
			<view class="input-box-flex">
				<!-- #ifndef H5 -->
				<!-- 			<image v-if="chatType === 'voice'" class="icon_img" :src="require('@/static/voice.png')"  @click="switchChatType('keyboard')"></image>
				<image v-if="chatType === 'keyboard'" class="icon_img" :src="require('@/static/keyboard.png')"  @click="switchChatType('voice')"></image> -->
				<!-- #endif -->
				<view class="input-box-flex-grow">
					<!-- 				<input
						v-if="chatType === 'voice'"
						type="text"
						class="content"
						id="input"
						v-model="formData.content"
						:hold-keyboard="true"
						:confirm-type="'send'"
						:confirm-hold="true"
						placeholder-style="color:#DDDDDD;"
						:cursor-spacing="10"
						@confirm="sendMsg(null)"
					/> -->
					<view class="voice_title" @touchstart.stop.prevent="startVoice" @touchmove.stop.prevent="moveVoice"
						@touchend.stop="endVoice" @touchcancel.stop="cancelVoice">
						{{ voiceTitle }}
					</view>
				</view>

				<!-- 功能性按钮 -->
				<!-- <image class=" icon_btn_add" :src="require('@/static/add.png')" @tap="switchFun"></image> -->

				<!-- #ifdef H5 -->
				<!-- 	<button class="btn" type="primary" size="mini" @touchend.prevent="sendMsg(null)">发送</button> -->
				<!-- #endif -->
			</view>

			<view class="fun-box" :class="{'show-fun-box':showFunBtn}">
				<u-grid :col="4" hover-class="contentType2-hover-class" :border="false" @click="clickGrid">
					<u-grid-item v-for="(item, index) in funList" :index="index" :key="index" bg-color="#eaeaea">
						<u-icon :name="item.icon" :size="52"></u-icon>
						<view class="grid-text">{{ item.title }}</view>
					</u-grid-item>
				</u-grid>
			</view>

		</view>

		<!-- //语音动画 -->
		<view class="voice_an" v-if="recording">
			<view class="voice_an_icon">
				<view id="one" class="wave"></view>
				<view id="two" class="wave"></view>
				<view id="three" class="wave"></view>
				<view id="four" class="wave"></view>
				<view id="five" class="wave"></view>
				<view id="six" class="wave"></view>
				<view id="seven" class="wave"></view>
			</view>
			<view class="text">{{voiceIconText}}</view>
		</view>
		<uni-popup ref="popup" type="center" :mask-click="false">
			<view class="uni-tip">
				<view class="pop-title">
					<text>文本信息</text>
					<image src="/static//close-pop.svg" @click="closePop"></image>
				</view>
				<view class="pop-content">我叫陈斌，今天21岁，毕业于西安电子科技大学</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				fromUserInfo: {},
				formData: {
					content: '',
					limit: 15,
					index: 1
				},
				messageList: [],
				loading: true, //标识是否正在获取数据
				imgHeight: '1000px',
				mpInputMargin: false, //适配微信小程序 底部输入框高度被顶起的问题
				chatType: "voice", // 图标类型 'voice'语音 'keyboard'键盘
				voiceTitle: '点击开始面试',
				Recorder: uni.getRecorderManager(),
				Audio: uni.createInnerAudioContext(),
				recording: false, //标识是否正在录音
				isStopVoice: false, //加锁 防止点击过快引起的当录音正在准备(还没有开始录音)的时候,却调用了stop方法但并不能阻止录音的问题
				voiceInterval: null,
				interviewid: "",
				voiceTime: 0, //总共录音时长
				canSend: true, //是否可以发送
				PointY: 0, //坐标位置
				voiceIconText: "正在录音...",
				showFunBtn: false, //是否展示功能型按钮
				AudioExam: null, //正在播放音频的实例
				funList: [{
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					{
						icon: "camera-fill",
						title: "拍摄",
						uploadType: ["camera"]
					},

				],
			};
		},
		computed: {
			...mapState(["_token", "_user_info"])
		},
		methods: {
			//拼接消息 处理滚动
			async joinData() {
				if (!this.loading) {
					//如果没有获取数据 即loading为false时，return 避免用户重复上拉触发加载
					return;
				}
				this.loading = false;
				const data = await this.getMessageData();
				//获取节点信息
				const {
					index
				} = this.formData;
				const sel =
					`#msg-${index > 1 ? this.messageList[0].hasBeenSentId : data[data.length - 1].hasBeenSentId}`;
				this.messageList = [...data, ...this.messageList];
				//填充数据后，视图会自动滚动到最上面一层然后瞬间再跳回bindScroll的指定位置 ---体验不是很好，后期优化
				// this.$nextTick(() => {
				// 	this.bindScroll(sel);
				// 	//如果还有数据
				// 	if (this.formData.limit >= data.length) {
				// 		this.formData.index++;
				// 		setTimeout(() => {
				// 			this.loading = true;
				// 		}, 200);
				// 	}
				// });
			},
			//处理滚动
			// bindScroll(sel, duration = 0) {
			// 	const query = uni.createSelectorQuery().in(this);
			// 	query
			// 		.select(sel)
			// 		.boundingClientRect(data => {
			// 			uni.pageScrollTo({
			// 				scrollTop: data && data.top - 40,
			// 				duration
			// 			});
			// 		})
			// 		.exec();
			// },
			//获取消息
			getMessageData() {
				let arr = [];
				if (!this.$data.interviewid) {
					arr.push({
						hasBeenSentId: 0, //已发送过去消息的id
						content: `欢迎使用chart智能面试系统`,
						fromUserHeadImg: this.fromUserInfo.fromUserHeadImg, //用户头像
						fromUserId: "",
						isItMe: false, //true此条信息是我发送的 false别人发送的
						createTime: Date.now(),
						contentType: 1, // 1文字文本 2语音
						anmitionPlay: false //标识音频是否在播放
					})

					arr.push({
						hasBeenSentId: 0, //已发送过去消息的id
						content: `如需面试请点击下方按钮`,
						fromUserHeadImg: this.fromUserInfo.fromUserHeadImg, //用户头像
						fromUserId: "",
						isItMe: false, //true此条信息是我发送的 false别人发送的
						createTime: Date.now(),
						contentType: 1, // 1文字文本 2语音
						anmitionPlay: false //标识音频是否在播放
					})
					arr.push({
						hasBeenSentId: 0, //已发送过去消息的id
						content: `请提交岗位信息并进行缴费`,
						fromUserHeadImg: this.fromUserInfo.fromUserHeadImg, //用户头像
						fromUserId: "",
						isItMe: false, //true此条信息是我发送的 false别人发送的
						createTime: Date.now(),
						contentType: 1, // 1文字文本 2语音
						anmitionPlay: false //标识音频是否在播放
					})


				} else {
					arr.push({
						hasBeenSentId: 0, //已发送过去消息的id
						content: `下面我们将开始正式面试，所有问题您直接回复语音即可,因为每条语音最长时长为1分钟，如需回复多条语音，间隔时间不能超过15秒，请问准备好了吗?`,
						fromUserHeadImg: this.fromUserInfo.fromUserHeadImg, //用户头像
						fromUserId: "",
						isItMe: false, //true此条信息是我发送的 false别人发送的
						createTime: Date.now(),
						contentType: 1, // 1文字文本 2语音
						anmitionPlay: false //标识音频是否在播放
					})
				}
				return arr
				// let getData = () => {
				// 	let arr = [];
				// 	let startIndex = (this.formData.index - 1) * this.formData.limit;
				// 	let endIndex = startIndex + this.formData.limit;
				// 	for (let i = startIndex; i < endIndex; i++) {
				// 		const isItMe = Math.random() > 0.5 ? true : false;
				// 		arr.unshift({
				// 			hasBeenSentId: i, //已发送过去消息的id
				// 			content: `很高兴认识你，这是第${i + 1}条消息。`,
				// 			fromUserHeadImg: isItMe ? this._user_info.headImg : this.fromUserInfo
				// 				.fromUserHeadImg, //用户头像
				// 			fromUserId: isItMe ? this._user_info.id : this.fromUserInfo.fromUserId,
				// 			isItMe, //true此条信息是我发送的 false别人发送的
				// 			createTime: Date.now(),
				// 			contentType: 1, // 1文字文本 2语音
				// 			anmitionPlay: false //标识音频是否在播放
				// 		});
				// 	}
				// 	return arr;
				// };
				// return new Promise((resolve, reject) => {
				// 	const data = getData();
				// 	setTimeout(() => {
				// 		resolve(data);
				// 	}, 500);
				// });
			},
			//发送消息
			sendMsg(data) {
				let that = this;
				if (!that.$data.interviewid) {
					uni.showToast({
						title: "请进入付款操作，填写相应信息，进行面试！",
						icon: "none"
					});
					return
				}
				const params = {
					hasBeenSentId: Date.now(), //已发送过去消息的id
					content: this.formData.content,
					fromUserHeadImg: this._user_info.headImg, //用户头像
					fromUserId: this._user_info.id,
					isItMe: true, //true此条信息是我发送的  false别人发送的
					createTime: Date.now(),
					contentType: 1
				};

				if (data) {
					if (data.contentType == 2) {
						//说明是发送语音
						params.content = data.content;
						params.contentType = data.contentType;
						params.contentDuration = data.contentDuration;
						params.anmitionPlay = false;
					} else if (data.contentType == 3) {
						//发送图片
						params.content = data.content;
						params.contentType = data.contentType;
					}

					uni.uploadFile({
						url: getApp().globalData.services.chatInterviewUrl, //需要设置为全局
						filePath: params.content,
						name:"upfile",
						formData: {
							accesstoken: that.$store.state._token,
							jwtcode: that.$store.state._jwtcode,
							interviewid: that.$data.interviewid,

						},
						success: ({
							data: {
								errcode,
								errmsg
							}
						}) => {
							if (errcode === "0") {
								that.$data.messageList.push({
									hasBeenSentId: 0, //已发送过去消息的id
									content: errmsg,
									fromUserHeadImg: this.fromUserInfo.fromUserHeadImg, //用户头像
									fromUserId: "",
									isItMe: false, //true此条信息是我发送的 false别人发送的
									createTime: Date.now(),
									contentType: 1, // 1文字文本 2语音
									anmitionPlay: false //标识音频是否在播放
								})
							} else {
								uni.showToast({
									title: errmsg,
									icon: "none"
								});
							}
						},
						fail(e) {
							debugger;
						}
					});

				} else if (!this.$u.trim(this.formData.content)) {
					//验证输入框书否为空字符传
					return;
				}

				this.messageList.push(params);

				this.$nextTick(() => {
					this.formData.content = '';
					// #ifdef MP-WEIXIN
					if (params.contentType == 1) {
						uni.pageScrollTo({
							scrollTop: 99999,
							duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
						});
					} else {
						setTimeout(() => {
							uni.pageScrollTo({
								scrollTop: 99999,
								duration: 0, //小程序如果有滚动效果 input的焦点也会随着页面滚动...
							});
						}, 150)
					}
					// #endif

					// #ifndef MP-WEIXIN
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 100
					});
					// #endif

					if (this.showFunBtn) {
						this.showFunBtn = false;
					}

					// #ifdef MP-WEIXIN 
					if (params.contentType == 1) {
						this.mpInputMargin = true;
					}
					// #endif
					//h5浏览器并没有很好的办法控制键盘一直处于唤起状态 而且会有样式性的问题
					// #ifdef H5
					uni.hideKeyboard();
					// #endif
				});
			},
			//用户触摸屏幕的时候隐藏键盘
			touchstart() {
				uni.hideKeyboard();
			},
			// userid 用户id
			linkToBusinessCard(userId) {
				this.$u.route({
					url: 'pages/businessCard/businessCard',
					params: {
						userId
					}
				});
			},
			linkToHistory() {
				uni.navigateTo({
					url: '../history/index'
				})
			},
			goPayPage() {
				uni.navigateTo({
					url: '../payPage/index'
				})
			},
			translateVoice(params) {
				this.$refs.popup.open()
			},
			closePop() {
				this.$refs.popup.close()
			},
			//准备开始录音
			startVoice(e) {
				if (!this.Audio.paused) {
					//如果音频正在播放 先暂停。
					this.stopAudio(this.AudioExam)
				}
				this.recording = true;
				this.isStopVoice = false;
				this.canSend = true;
				this.voiceIconText = "正在录音..."
				this.PointY = e.touches[0].clientY;
				this.Recorder.start({
					format: 'mp3'
				});
			},
			//录音已经开始
			beginVoice() {
				if (this.isStopVoice) {
					this.Recorder.stop();
					return;
				}
				this.voiceTitle = '松开 结束'
				this.voiceInterval = setInterval(() => {
					this.voiceTime++;
				}, 1000)
			},
			//move 正在录音中
			moveVoice(e) {
				const PointY = e.touches[0].clientY
				const slideY = this.PointY - PointY;
				if (slideY > uni.upx2px(120)) {
					this.canSend = false;
					this.voiceIconText = '松开手指 取消发送 '
				} else if (slideY > uni.upx2px(60)) {
					this.canSend = true;
					this.voiceIconText = '手指上滑 取消发送 '
				} else {
					this.voiceIconText = '正在录音... '
				}
			},
			//结束录音
			endVoice() {
				this.isStopVoice = true; //加锁 确保已经结束录音并不会录制
				this.Recorder.stop();
				this.voiceTitle = '点击开始面试'
			},
			//录音被打断
			cancelVoice(e) {
				this.voiceTime = 0;
				this.voiceTitle = '点击开始面试';
				this.canSend = false;
				this.Recorder.stop();
			},
			//处理录音文件
			handleRecorder({
				tempFilePath,
				duration
			}) {
				let contentDuration;
				// #ifdef MP-WEIXIN
				this.voiceTime = 0;
				if (duration < 600) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 200)
					return;
				}
				contentDuration = duration / 1000;
				// #endif

				// #ifdef APP-PLUS
				contentDuration = this.voiceTime + 1;
				this.voiceTime = 0;
				if (contentDuration <= 0) {
					this.voiceIconText = "说话时间过短";
					setTimeout(() => {
						this.recording = false;
					}, 200)
					return;
				};
				// #endif

				this.recording = false;
				const params = {
					contentType: 2,
					content: tempFilePath,
					contentDuration: Math.ceil(contentDuration)
				};
				this.canSend && this.sendMsg(params);
			},
			//控制播放还是暂停音频文件
			handleAudio(item) {
				this.AudioExam = item;
				this.Audio.paused ? this.playAudio(item) : this.stopAudio(item);
			},
			//播放音频
			playAudio(item) {
				this.Audio.src = item.content;
				this.Audio.hasBeenSentId = item.hasBeenSentId;
				this.Audio.play();
				item.anmitionPlay = true;
			},
			//停止音频
			stopAudio(item) {
				item.anmitionPlay = false;
				this.Audio.src = '';
				this.Audio.stop();
			},
			//关闭动画
			closeAnmition() {
				const hasBeenSentId = this.Audio.hasBeenSentId;
				const item = this.messageList.find(it => it.hasBeenSentId == hasBeenSentId);
				item.anmitionPlay = false;
			},
			//点击宫格时触发
			clickGrid(index) {
				if (index == 0) {
					this.chooseImage(['album'])
				} else if (index == 1) {
					this.chooseImage(['camera'])
				}
			},
			//发送图片
			chooseImage(sourceType) {
				uni.chooseImage({
					sourceType,
					sizeType: ['compressed'],
					success: res => {
						this.showFunBtn = false;
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							const params = {
								contentType: 3,
								content: res.tempFilePaths[i],
							};
							this.sendMsg(params)
						}
					}
				})
			},
			//查看大图
			viewImg(imgList) {
				uni.previewImage({
					urls: imgList,
					// #ifndef MP-WEIXIN
					indicator: 'number'
					// #endif
				});
			},
			login(accesstoken, code) {
				let that = this;
				uni.request({
					url: getApp().globalData.services.loginUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						accesstoken,
						code
					},
					success: ({
						errMsg,
						data: {
							jwtcode
						}
					}) => {
						if (errMsg === "request:ok") {
							that.$store.commit("setJwtcode", jwtcode)
						}
					}
				});
			},
		},
		onPageScroll(e) {
			if (e.scrollTop < 50) {
				this.joinData();
			}
		},
		onNavigationBarButtonTap({
			index
		}) {
			if (index == 0) {
				//用户详情 设置
			} else if (index == 1) {
				//返回按钮
				this.$u.route({
					type: 'switchTab',
					url: 'pages/home/home'
				});
			}
		},
		//返回按钮事件
		onBackPress(e) {
			//以下内容对h5不生效
			//--所以如果用浏览器自带的返回按钮进行返回的时候页面不会重定向 正在寻找合适的解决方案
			this.$u.route({
				type: 'switchTab',
				url: 'pages/home/home'
			});
			return true;
		},
		onLoad(info) {
			// { messageId,fromUserName,fromUserHeadImg } = info

			// const userInfo = this.firendList.filter(item => item.userId == info.fromUserId)[0];
			// console.log('userInfo')
			this.fromUserInfo = {
				fromUserName: 'ai-test',
				fromUserHeadImg: require('@/static/ai-bg.png'),
				fromUserId: 1,
				messageId: 666
			};

			//录音开始事件
			this.Recorder.onStart(e => {

				this.beginVoice();
			});
			//录音结束事件
			this.Recorder.onStop(res => {
				clearInterval(this.voiceInterval);
				this.handleRecorder(res);
			});

			//音频停止事件
			this.Audio.onStop(e => {
				this.closeAnmition();
			});

			//音频播放结束事件
			this.Audio.onEnded(e => {
				this.closeAnmition();
			});

			let pages = getCurrentPages(); //获取当前页面栈
			let currentPage = pages[pages.length - 1]; //获取当前页面对象
			let interviewid = currentPage.options.interviewid;
			this.$data.interviewid = interviewid || "";
		},

		onReady() {
			//自定义返回按钮 因为原生的返回按钮不可阻止默认事件
			// #ifdef H5
			const icon = document.getElementsByClassName('uni-page-head-btn')[0];
			icon.style.display = 'none';
			// #endif

			uni.setNavigationBarTitle({
				title: this.fromUserInfo.fromUserName
			});
			this.joinData();
			uni.getSystemInfo({
				success: res => {
					this.imgHeight = res.windowHeight + 'px';
				}
			});

			uni.onKeyboardHeightChange(res => {
				if (res.height == 0) {
					// #ifdef MP-WEIXIN
					this.mpInputMargin = false;
					// #endif
				} else {
					this.showFunBtn = false;
				}
			});

			let that = this;
			let {
				_token
			} = this.$data;
			let {
				services,
				appid,
				appsecret: secret
			} = getApp().globalData;
			//获取access tokens
			if (!_token) {
				uni.request({
					url: services.accessTokenUrl, //需要设置为全局
					method: 'POST',
					header: {
						'content-Type': 'application/x-www-form-urlencoded'
					},
					data: {
						appid,
						secret
					},
					success: ({
						errMsg,
						data: {
							accesstoken
						}
					}) => {
						if (errMsg === "request:ok") {
							that.$store.commit("setToken", accesstoken)
							//获取code
							uni.login({
								provider: 'weixin', //使用微信登录
								success: function({
									code,
									errMsg
								}) {
									if (errMsg === "login:ok") {
										that.login(accesstoken, code)
									}
								}
							})
						}
					}
				});
			}

			//获取用户信息
			if (!this._user_info) {
				uni.showModal({
					title: '授权',
					content: "需要您的授权",
					success: () => {
						uni.getUserProfile({
							desc: "获取您的昵称、头像、地区及性别",
							success: (res) => {
								if (res.errMsg === "getUserProfile:ok") {
									let data = {
										headImg: res.userInfo.avatarUrl,
										id: res.iv, //id
										userName: res.userInfo.nickName, //昵称
										wechatNumber: res.userInfo.nickName, //微信号
										signature: res.signature, //个性签名
										phone: '', //手机号
										pictureBanner: require(
											'@/static/image/address.png'), //相册背景图
										chatBgImg: require('@/static/ai-bg.png'), //聊天背景图
										address: res.userInfo.city
									}

									that.$store.commit("setUserInfo", data)
								}
							},
							fail(e) {}
						})
					}
				})
			}
		},

	};
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>