web3-202226701037/chexnet-master-MP/pages/ai/ai.vue

<template>
	<view>
		<!-- <view class="tips color_fff size_12 align_c" :class="{ 'show':ajax.loading }" @tap="getHistoryMsg">{{ajax.loadText}}</view> -->
		<!-- <image @click="openpopup" class="history" src="/static/img/ai.png"></image> -->
		<view class="box-1">
			<view class="talk-list">
				<view v-for="(item,index) in talkList" :key="index" :id="`msg-${item.id}`">
					<view class="item flex_col" :class=" item.type == 1 ? 'push':'pull' ">
						<image v-if="item.pic" :src="item.pic" mode="aspectFill" class="pic"></image>
						<view class="content">{{item.content}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="box-2">
			<view class="flex_col" :style="{position: 'relative',bottom:inputHeight+'px'}">
				<image @click="openpopup" class="history" src="/static/img/ai.png"></image>
				<view class="flex_grow">
					<input @confirm="send" :adjust-position="false" @focus="inputBindFocus" 
						@blur="inputBindBlur" type="text" class="content" v-model="content" 
						placeholder="请输入聊天内容" placeholder-style="color:#DDD;" 
						:cursor-spacing="6" @click="$content_check.checkLogin" :disabled="$content_check.isDisabled"
					/>
				</view>
				<button class="send" @tap="send">发送</button>
			</view>
		</view>
		
		<uv-popup ref="popup" mode="left" bgColor="#f5f5f5" style="overflow-y: scroll;" >
			<scroll-view class="popup scroll-Y" scroll-y="true">
				<view class="chart-con">
					<view class="chart-wrap">
						<view v-if="ai_talk_history && Object.keys(ai_talk_history).length > 0" class="flex justify-between">
							<view class="title">
								<view class="ver-line"></view>
								<text>AI 问诊记录</text>
							</view>
							<button @click="check_delAllHistoryMsg" class="del-button button-all center">删除所有记录</button>
						</view>
						
						<view v-else class="no-data center">暂无数据</view>
						
						<uv-gap height="10"></uv-gap>
						
						<view @longpress="check_delHistoryMsg(key)" @click="getHistoryMsg(key)" class="history_item" v-if="refresh" v-for="(value, key) in ai_talk_history" :key="key">
							<view>
								<text class="block">{{value['timeString']}}</text>
								<div class="block talk-text"><text style="color: #99d7ff;">{{name}}：</text>{{value['talkList'][1]['content']}}</div>
								<view class="divider"></view>
								<div class="block talk-text"><text style="color: #adecaf;">AI：</text>{{value['talkList'][2]['content']}}</div>
								<view class="divider"></view>
							</view>
						</view>
						<view v-else style="height: 3000px;"></view>
						<!-- {{ai_talk_history}} -->
					</view>
				</view>
				
				<button @click="new_talk" class="button-all center new-button">新建对话</button>
			</scroll-view>
		</uv-popup>
	</view>
</template>

<script>
	export default {
		onPullDownRefresh() {
			setTimeout(() => {uni.stopPullDownRefresh();}, 1000);
		},
		onShow() {
			// 获取全局变量
			const ai_history = uni.getStorageSync('ai_history');
			if(ai_history){
				uni.setStorageSync('ai_history', false);
				this.openpopup();
			}
			
			// 设置医生性别
			let doctor_gender = uni.getStorageSync('doctor_gender');
			if(doctor_gender === 0) this.doctor_gender = 0;
			else this.doctor_gender = 1;
			
			// 设置用户名
			this.name = uni.getStorageSync("name");
		},
		data() {
			return {
				
				doctor_woman: '/static/img/女医生.png',
				doctor_man: '/static/img/男医生.png',
				doctor_gender: 1,
				
				name: '微信用户',
				content: '',
				talkList: [],
				ai_talk_history: null,
				timestamp: null,
				
				request: 1,
				// ajax:{
				// 	rows:20,	//每页数量
				// 	page:1,	//页码
				// 	flag:true,	// 请求开关
				// 	loading:true,	// 加载中
				// 	loadText:'正在获取消息'
				// },
				
				inputHeight: 0,
				refresh: true,
				
			}
		},
		mounted() {
			this.new_talk();
			// this.$nextTick(()=>{
			// 	this.getHistoryMsg();
			// });
		},
		onPageScroll(e){
			// if(e.scrollTop<5){
			// 	this.getHistoryMsg();
			// }
		},
		methods: {
			new_talk(){
				this.timestamp = Date.now();
				this.talkList = [{"id":1,"content":"请问有什么需要帮助的吗？"
				,"type":0,"pic":this.doctor_gender == 1 ? this.doctor_woman : this.doctor_man}];
			},
			openpopup(){
				this.$refs.popup.open();
				this.ai_talk_history = this.$util.reversedObject(uni.getStorageSync('ai_talk_history'));
			},
			inputBindFocus(e) {
				if(e.detail.height) {
					this.inputHeight = e.detail.height - this.getBottomBarHeight(); //这个高度就是软键盘的高度
					console.log('this.inputHeight: ',this.inputHeight);
				}
			},
			inputBindBlur(){
				this.inputHeight = 0;
				this.$content_check.textCheck(this.content, this);
			},
			getBottomBarHeight() {
				let res = uni.getSystemInfoSync();
				const windowHeight = res.windowHeight; // 屏幕可用高度
				const screenHeight = res.screenHeight; // 屏幕总高度
				let bottomBarHeight = screenHeight - windowHeight - getTopHeight();
				bottomBarHeight = bottomBarHeight > 0 ? bottomBarHeight : 0;
				
				console.log('Bottom Bar Height:',bottomBarHeight);
				return bottomBarHeight;
				
				function getTopHeight(){
					// 状态栏高度
					const statusBarHeight = uni.getSystemInfoSync().statusBarHeight
					
					// #ifdef MP-WEIXIN
					// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
					const custom = wx.getMenuButtonBoundingClientRect()
					// console.log(custom)
					
					// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
					const navigationBarHeight = custom.height + (custom.top - statusBarHeight) * 2
					// console.log("导航栏高度："+navigationBarHeight)
					
					// 总体高度 = 状态栏高度 + 导航栏高度
					const navHeight = navigationBarHeight + statusBarHeight
					
					// #endif
					
					console.log(navHeight);
					return navHeight;
				}
			},
			check_delAllHistoryMsg(){
				uni.showModal({
					title: '清除历史纪录',
					content: '是否要清除全部历史纪录？',
					success: (res) => { 
						if (res.confirm) 
							this.delAllHistoryMsg(); 
					}  
				})
			},
			delAllHistoryMsg(){
				this.new_talk();
				
				this.ai_talk_history = null;
				
				uni.setStorageSync('ai_talk_history', {});
			},
			check_delHistoryMsg(key){
				uni.showModal({
					title: '删除历史纪录',
					content: '是否要删除此历史纪录？',
					success: (res) => { 
						if (res.confirm) 
							this.delHistoryMsg(key); 
					}  
				})	
			},
			delHistoryMsg(key){
				if(this.timestamp == key) this.new_talk();
				
				let ai_talk_history = uni.getStorageSync('ai_talk_history');
				delete ai_talk_history[key];
				
				this.ai_talk_history = ai_talk_history;
				uni.setStorageSync('ai_talk_history', ai_talk_history);
			},
			// 获取历史消息
			getHistoryMsg(key){
				console.log('key: ',key);
				this.timestamp = key;
				this.talkList = this.ai_talk_history[key]['talkList'];
				this.$refs.popup.close();
				
				
			},
			// 设置页面滚动位置
			setPageScrollTo(selector){
				let view = uni.createSelectorQuery().in(this).select(selector);
				view.boundingClientRect((res) => {
					uni.pageScrollTo({
					    scrollTop:res.top - 30,	// -30 为多显示出大半个消息的高度，示意上面还有信息。
					    duration: 0
					});
				}).exec();
			},
			// 隐藏加载提示
			hideLoadTips(flag){
				if(flag){
					this.ajax.loadText = '消息获取成功';
					setTimeout(()=>{
						this.ajax.loading = false;
					},300);
				}else{
					this.ajax.loading = true;
					this.ajax.loadText = '正在获取消息';
				}
			},
			// 发送信息
			async send(){
				if(!this.content){
					uni.showToast({
						title:'请输入有效的内容',
						icon:'none'
					});
					return ;
				}
				
				if(this.request == 0){
					uni.showToast({duration:1000,icon:'none',title: '消息发送中，请稍等...'});
					setTimeout(() => uni.showLoading({title:'正在发送...'}), 1500);
					return ;
				}
				
				let isCheck = await this.$content_check.textCheck(this.content, this);
				console.log('isCheck: ',isCheck);
				if(isCheck !== true) return ;
				
				this.request = 0;
				uni.showLoading({title:'正在发送...'});
				
				// 将当前发送信息 添加到消息列表。
				let data = {
					"id":new Date().getTime(),
					"content":this.content,
					"type":1,
					"pic":null
				}
				this.talkList.push(data);
				
				let content = this.content;
				this.$nextTick(()=>{
					// 清空内容框中的内容
					this.content = '';
					uni.pageScrollTo({
						scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
						duration: 500
					});
				});
				
				send_message_ai(content).then(res => {
					console.log('send: res: ',res);
					let data = {
						"id":new Date().getTime(),
						"content":res,
						"type":0,
						"pic":this.doctor_gender == 1 ? this.doctor_woman : this.doctor_man
					}
					this.talkList.push(data);
					uni.hideLoading();
					uni.pageScrollTo({
						scrollTop: 999999,	// 设置一个超大值，以保证滚动条滚动到底部
						duration: 500
					});
					this.request = 1;
					
					this.save_talk(this.talkList, this.timestamp);
				}).catch(err => {
					console.log('send: err: ',err);
					uni.hideLoading();
					this.imgshow = false;
					this.request = 1;
				});
			},
			save_talk(talkList, timestamp){
				let timeString = this.$util.formatDateTime(timestamp);
				let talkData = {talkList, timeString};
				
				let ai_talk_history = uni.getStorageSync('ai_talk_history');
				if(ai_talk_history) ai_talk_history[timestamp] = talkData;
				else{
					ai_talk_history = {};
					ai_talk_history[timestamp] = talkData;
				}
				uni.setStorageSync('ai_talk_history', ai_talk_history);
			}
		}
	}
</script>

<style lang="scss">
	@import "talk.scss";
	page{
		background-color: #f5f5f5;
		font-size: 28rpx;
	}
	.scroll-Y {
		/* #ifndef MP */
		height: calc(100vh - 155px);
		/* #endif */
		
		/* #ifdef MP */
		height: calc(100vh - 65px);
		/* #endif */
	}
	.popup{
		padding: 10px;
		width: 75vw;
		
		.new-button{
			color: #666;
			position: fixed;
			bottom: 15px;
			background-color: #d4f4c2;
			height: 50px;
			width: calc(100% - 20px);
			font-size: 15px;
			font-weight: 550;
			border-radius: 25px;
		}
		
		.history_item{
			margin-bottom: 10px;
			background-color: #fff;
			border-radius: 20px;
			padding: 10px 20px 20px;
			color: #666;
			font-size: 14px;
			
			text{
				margin: 10px 0;
			}
			
			.talk-text{
				margin: 10px 0 5px;
				color: #565;
				font-weight: 550;
				font-size: 18px;
				overflow-wrap: break-word;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
		.history_item:active{
			opacity: 0.5;
		}
	}
	.history{
		width: 32px;
		height: 32px;
		margin-right: 5px;
	}
	.history:active {
		opacity: 0.5;
	}
	
	/* 加载数据提示 */
	.tips{
		position: fixed;
		left: 0;
		top:var(--window-top);
		width: 100%;
		z-index: 9;
		color: #333;
		// background-color: rgba(0,0,0,0.15);
		height: 72rpx;
		line-height: 72rpx;
		transform:translateY(-80rpx);
		transition: transform 0.3s ease-in-out 0s;
		
		&.show{
			transform:translateY(0);
		}
	}
	
	.box-1{
		width: 100%;
		height: auto;
		padding-bottom: 100rpx;
		box-sizing: content-box;
		
		/* 兼容iPhoneX */
		margin-bottom: 0;  
		margin-bottom: constant(safe-area-inset-bottom);  
		margin-bottom: env(safe-area-inset-bottom);  
	}
	.box-2{
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		height: auto;
		z-index: 2;
		// border-top: #e5e5e5 solid 1px;
		box-sizing: content-box;
		background-color: #f5f5f5;
		
		/* 兼容iPhoneX */
		padding-bottom: 0;  
		padding-bottom: constant(safe-area-inset-bottom);  
		padding-bottom: env(safe-area-inset-bottom);  
		
		>view{
			padding: 0 20rpx;
			height: 100rpx;
		}
		
		.content{
			background-color: #fff;
			height: 64rpx;
			padding: 0 20rpx;
			border-radius: 32rpx;
			font-size: 28rpx;
		}
		
		.send{
			background-color: #b7d7a5;
			color: #fff;
			height: 64rpx;
			margin-left: 20rpx;
			border-radius: 32rpx;
			padding: 0;
			width: 120rpx;
			line-height: 62rpx;
			
			&:active{
				opacity: 1;
				filter: brightness(80%);
				transform: translateY(1px) translateX(1px);
			}
		}
	}
	
	.talk-list{
		padding-bottom: 20rpx;
		
		/* 消息项，基础类 */
		.item{
			padding: 20rpx 20rpx 0 20rpx;
			align-items:flex-start;
			align-content:flex-start;
			color: #333;
			
			.pic{
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
				border: #fff solid 1px;
			}
			
			.content{
				padding: 20rpx;
				border-radius: 4px;
				max-width: 500rpx;
				word-break: break-all;
				line-height: 52rpx;
				position: relative;
			}
			
			/* 收到的消息 */
			&.pull{
				.content{
					margin-left: 32rpx;
					background-color: #fff;
					
					&::after{
						content: '';
						display: block;
						width: 0;
						height: 0;
						border-top: 16rpx solid transparent;
						border-bottom: 16rpx solid transparent;
						border-right: 20rpx solid #fff;
						position: absolute;
						top: 30rpx;
						left: -18rpx;
					}
				}
			}
			
			/* 发出的消息 */
			&.push{
				/* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
				flex-direction: row-reverse;
				
				.content{
					margin-right: 32rpx;
					background-color: #c7e7b5;
				}
			}
		}
	}
</style>

<style lang="scss" scoped>
	.no-data{
		height: 30vw;
		font-size: 24px;
		color: #777;
		padding: 10px;
	}
	.del-button{
		height: 30px;
		width: 250px;
		margin-right: 10px;
		color: #666;
		background-color: #ffffff;
	}
	.chart-con {
		width: 100%;
		box-sizing: border-box;

		.chart-wrap {
			width: 100%;
			box-sizing: border-box;
			background-color: #f5f5f5;
			padding: 32rpx 0rpx;
			border-radius: 20rpx;

			.title {
				box-sizing: border-box;
				width: 100%;
				padding: 0rpx 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
			}

			.ver-line {
				height: 30rpx;
				width: 8rpx;
				border-radius: 10rpx;
				background-color: #4e9d77;
				margin-right: 5px;
			}

			.title-desc {
				font-size: 30rpx;
				color: #222222;
				margin-left: 22rpx;
				font-weight: bold;
			}

			
			.line-chart-con {
				width: 100%;
				box-sizing: border-box;
				padding: 0rpx 28rpx;

				.fun-tabs {
					margin-top: 42rpx;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-self: center;
					width: 100%;
					box-sizing: border-box;

					.tab-item {
						width: 200rpx;
						height: 120rpx;
						border-radius: 10rpx;
						padding-left: 20rpx;
						background: #ffffff;
						border: 1rpx solid #ececec;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: flex-start;
						box-sizing: border-box;

						.item-name {
							color: #6e6e6e;
							font-size: 20rpx;
						}

						.item-val {
							color: #222222;
							font-size: 24rpx;
							font-weight: bold;
							margin-top: 20rpx;
						}
					}

					.selected {
						background: #edf5f1 !important;
						border: 1rpx solid #4e9d77 !important;

						.item-name {
							color: #4e9d77 !important;
						}

						.item-val {
							color: #4e9d77 !important;
						}
					}
				}
				.line-chart {
					margin-top: 30rpx;
					height: 380rpx;
				}
			}
		}
	}
</style>