ai-interface/pages/historyDetail/index.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="linkToBack()">记录详情</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>
						<image class="img" :src="item.fromUserHeadImg" mode=""></image>
					</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:`${130+(item.contentDuration*2)}rpx`}">
						<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 class="">{{ item.contentDuration }}''</view>

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

		<!-- 底部聊天输入框 -->
		<view v-if="false" 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>
	</view>
</template>

<script>
	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,
				voiceTime: 0, //总共录音时长
				canSend: true, //是否可以发送
				PointY: 0, //坐标位置
				voiceIconText: "正在录音...",
				showFunBtn: false, //是否展示功能型按钮
				AudioExam: null, //正在播放音频的实例
				funList: [{
						icon: "photo-fill",
						title: "照片",
						uploadType: ["album"]
					},
					{
						icon: "camera-fill",
						title: "拍摄",
						uploadType: ["camera"]
					},
				],
			};
		},
		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 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);
				});
			},
			//切换语音或者键盘方式
			switchChatType(type) {
				this.chatType = type;
				this.showFunBtn = false;
			},
			//切换功能性按钮
			switchFun() {
				this.chatType = 'keyboard'
				this.showFunBtn = !this.showFunBtn;
				uni.hideKeyboard()
			},
			//发送消息
			sendMsg(data) {
				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;
					}
				} 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'
				})
			},
			//准备开始录音
			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
				});
			},
			createrTime(timestamp) {
				if (!timestamp) return "";
				// 时间戳 
				// 此处时间戳以毫秒为单位
				let date = new Date(parseInt(timestamp) * 1000);
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				let GMT = Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
				return GMT;
			},
			linkToBack(){
				uni.navigateBack()
			}
		},
		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();
			});
			
		},
		mounted() {
			let pages = getCurrentPages(); //获取当前页面栈
			let currentPage = pages[pages.length - 1]; //获取当前页面对象
			let interviewid = currentPage.options.interviewid;
			let that = this;
			uni.request({
				url: getApp().globalData.services.interviewdetail, //需要设置为全局
				method: 'POST',
				header: {
					'content-type': 'application/x-www-form-urlencoded'
				},
				data: {
					accesstoken: that.$store.state._token,
					jwtcode: that.$store.state._jwtcode,
					interviewid
				},
				success: ({
					data: {
						errmsg,
						data
					}
				}) => {
					if (errmsg === "OK") {
						let a = data.map(item => ({
							hasBeenSentId: item.id, //已发送过去消息的id
							content: item.content || "",
							fromUserHeadImg: item.issystem === 2 ? that.$store._user_info.headImg : that.fromUserInfo.fromUserHeadImg, //用户头像
							fromUserId: item.userid,
							isItMe: item.issystem === 2, //true此条信息是我发送的 false别人发送的
							createTime: that.createrTime(item.addtime),
							contentType: !!item.file ? 2 : 1, // 1文字文本 2语音
							anmitionPlay: false //标识音频是否在播放
						}))
						that.messageList=a;
					}
				}
			});
		},
		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;
				}
			});
		}
	};
</script>

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