删除 '项目/ai.vue'

项目/ai.vue

@@ -1,728 +0,0 @@
-<template>
-	<view>
-		<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">
-				</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>
-	import send_message_ai from "@/data/medical_ai.js"
-	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;
-			},
-			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();
-				
-				// if(!this.ajax.flag){
-				// 	return; //
-				// }
-				
-				// // 此处用到 ES7 的 async/await 知识，为使代码更加优美。不懂的请自行学习。
-				// let get = async ()=>{
-				// 	this.hideLoadTips();
-				// 	this.ajax.flag = false;
-				// 	let data = await this.joinHistoryMsg();
-					
-				// 	console.log('----- 模拟数据格式，供参考 -----');
-				// 	console.log(data);	// 查看请求返回的数据结构 
-					
-				// 	// 获取待滚动元素选择器，解决插入数据后，滚动条定位时使用
-				// 	let selector = '';
-										
-				// 	if(this.ajax.page>1){
-				// 		// 非第一页，则取历史消息数据的第一条信息元素
-				// 		selector = `#msg-${this.talkList[0].id}`;
-				// 	}else{
-				// 		// 第一页，则取当前消息数据的最后一条信息元素
-				// 		selector = `#msg-${data[data.length-1].id}`;
-				// 	}
-					
-				// 	// 将获取到的消息数据合并到消息数组中
-				// 	this.talkList = [...data,...this.talkList];	
-					
-				// 	// 数据挂载后执行，不懂的请自行阅读 Vue.js 文档对 Vue.nextTick 函数说明。
-				// 	this.$nextTick(()=>{
-				// 		// 设置当前滚动的位置
-				// 		this.setPageScrollTo(selector);
-						
-				// 		this.hideLoadTips(true);
-												
-				// 		if(data.length < this.ajax.rows){
-				// 			// 当前消息数据条数小于请求要求条数时，则无更多消息，不再允许请求。
-				// 			// 可在此处编写无更多消息数据时的逻辑
-				// 		}else{
-				// 			this.ajax.page ++;
-							
-				// 			// 延迟 200ms ，以保证设置窗口滚动已完成
-				// 			setTimeout(()=>{
-				// 				this.ajax.flag = true;
-				// 			},200)
-				// 		}
-						
-				// 	})
-				// }
-				// get();
-			},
-			// 拼接历史记录消息，正式项目可替换为请求历史记录接口
-			joinHistoryMsg(){
-				// let join = ()=>{
-				// 	let arr = [];
-					
-				// 	//通过当前页码及页数，模拟数据内容
-				// 	let startIndex = (this.ajax.page-1) * this.ajax.rows;
-				// 	let endIndex = startIndex + this.ajax.rows;
-				// 	for(let i = startIndex; i < endIndex; i++){
-				// 		arr.push({
-				// 			"id":i,	// 消息的ID
-				// 			"content":`这是历史记录的第${i+1}条消息`,	// 消息内容
-				// 			"type":Math.random() > 0.5 ? 1 : 0	,// 此为消息类别，设 1 为发出去的消息，0 为收到对方的消息,
-				// 			"pic": this.doctor_gender == 1 ? this.doctor_woman : this.doctor_man	// 头像
-				// 		})
-				// 	}
-					
-				// 	/*
-				// 		颠倒数组中元素的顺序。将最新的数据排在本次接口返回数据的最后面。
-				// 		后端接口按 消息的时间降序查找出当前页的数据后，再将本页数据按消息时间降序排序返回。
-				// 		这是数据的重点，因为页面滚动条和上拉加载历史的问题。
-				// 	 */
-				// 	arr.reverse();
-					
-				// 	return arr;
-				// }
-				
-				// // 此处用到 ES6 的 Promise 知识，不懂的请自行学习。
-				// return new Promise((done,fail)=>{
-				// 	// 无数据请求接口，由 setTimeout 模拟，正式项目替换为 ajax 即可。
-				// 	setTimeout(()=>{
-				// 		let data = join();
-				// 		done(data);
-				// 	},1500);
-				// })
-			},
-			// 设置页面滚动位置
-			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 = '正在获取消息';
-				}
-			},
-			// 发送信息
-			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;
-				}
-				
-				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;
-					
-					// &::after{
-					// 	content: '';
-					// 	display: block;
-					// 	width: 0;
-					// 	height: 0;
-					// 	border-top: 16rpx solid transparent;
-					// 	border-bottom: 16rpx solid transparent;
-					// 	border-left: 20rpx solid #c7e7b5;
-					// 	position: absolute;
-					// 	top: 30rpx;
-					// 	right: -18rpx;
-					// }
-				}
-			}
-		}
-	}
-</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>