shuquAi/pages/chat/chat.vue

<template>
	<!-- <view style="padding-bottom: 248rpx;"> -->
	<view style="">
		<!-- #ifdef H5 -->
		<view style="color: #000;">
			<tn-nav-bar backgroundColor="#fff">GPT</tn-nav-bar>
			<view :style="{ height: tobheight + 'px' }"></view>
		</view>
		<!-- #endif -->

		<view class="content" @touchmove="">
			<view class="msg-list">
				<!-- 顶部切换模型内容块 -->
				<view class="row">
					<block>
						<view class="other">
							<view class="left" @click="">
								<u-image
									src="https://dev.iduomi.cc/addons/wike_chatgpt/public/static/storage/presets/mode/1.png"
									mode="widthFix" radius="5" width="40" height="40"></u-image>
							</view>
							<view class="right">
								<view class="username">
									<view class="name"></view>
									<view class="time">{{robotName}}</view>
								</view>
								<view class="bubble">
									<view class="content">
										<view style="font-size: 32rpx;">我是您的AI助手，您可以向我提出任何问题~</view>
									</view>
								</view>
							</view>
						</view>
					</block>
				</view>



				<block v-for="(row, index) in talkList" :key="index" :id="'msg' + row.id">
					<view class="row">
						<block>
							<view class="my" v-if="row.fromid==1">
								<view class="left">
									<view class="username">
										<view class="name">{{ row.nickname }}</view>
									</view>
									<u-icon v-if="row.content !='该问题已被隐藏!'" @click="copyText(index)" name="file-text"
										color="#9e9e9e82" size="22"></u-icon>

									<view v-if="row.type == 1" class="bubble" style="color: #fff;margin-left: 15rpx;">
										<rich-text :nodes="row.content" @longtap="copy" :data-text="row.content"
											selectable="true"></rich-text>
									</view>

								</view>
								<view class="right">
									<u-image :src="row.avatar?row.avatar:'/static/images/head.jpg'" mode="widthFix"
										radius="5" width="42" height="42"></u-image>
								</view>
							</view>

							<!-- GPT -->
							<view class="other" v-if="row.fromid==-1">
								<view class="left" v-if="true" @click="">
									<u-image
										src="https://dev.iduomi.cc/addons/wike_chatgpt/public/static/storage/presets/mode/1.png"
										mode="widthFix" radius="5" width="42" height="42"></u-image>
								</view>

								<view class="right">
									<view class="username" v-if="true">
										<view class="name"></view>
										<view class="time">{{row.nickname}}</view>
									</view>

									<view v-if="row.type == 1" class="bubble"
										style="display: block;position: relative;">
										<view>
											<zero-markdown-view v-if="row.done" :themeColor="themeColor"
												:markdown="row.content"></zero-markdown-view>

											<text v-else @longtap="copy"
												:data-text="row.content">{{ row.content.replace(/^\s+|\s+$/g, '') }}</text>

											<!-- <text v-if="row.content == '正在思考中...'">{{ second }}s</text> -->

											<text class="flash" v-if="row.show_flash">│</text>
										</view>
									</view>


									<view v-if="row.done" class="tn-flex align-center justify-between operate">
										<view @click="copyText(index)" hover-class="hoversubmit"
											class="tn-flex align-center">
											<u-icon name="file-text" top="1" color="#68d7bb" size="20"></u-icon>
											<view class="duplicate">复制回答</view>
										</view>
									</view>

								</view>
							</view>
						</block>
					</view>
				</block>
			</view>
			<view class="bottomheight"></view>
			<view class="env"></view>
		</view>
		<view class="box-2">
			<view class="flex_col">
				<view class="flex_grow">
					<u--textarea height="45" @blur="" @focus="focusinput" fixed :showConfirmBar="false"
						v-model="content" placeholder="请输入您的问题..." maxlength="-1" border="none"
						:cursorSpacing="80"></u--textarea>
				</view>
				<button class="send" @click.prevent="send(content)">发送</button>
				<!-- <button class="send" @click.prevent="test">测试</button> -->
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendGpt
	} from '@/api/public/index.js';
	import uploadUrl from '@/common/config.js'

	import {
		userInfo,
		sysParms
	} from '@/api/my/index.js'

	export default {
		components: {

		},
		data() {
			return {
				robotName: '数趣AI小助手',

				talkList: [],
				thecontent: '',
				content: '',
				scrollTop: 999999,
				scrollAnimation: false,
				tobheight: 45,
				themeColor: '#007AFF',
				codeBgColor: '#26B3A0',
				userInfo: {},

				freeCount: 5,
				freeCountSum: 0
			};
		},
		computed: {

		},
		onShow() {
			if (uni.getStorageSync('clickStudyBtn')) {
				uni.removeStorageSync('clickStudyBtn')
			}
			if (uni.getStorageSync('myScoreId')) {
				uni.removeStorageSync('myScoreId')
			}
		},
		async onLoad() {
			let ress = await sysParms()
			console.log('gpt页系统设置信息返回值', ress.data[6].value);
			if (ress.code == 0) {
				this.freeCount = ress.data[6].value
				this.freeCountSum = ress.data[6].value
			}


			if (uni.getStorageSync('token')) {
				// if (!uni.getStorageSync('hasForbidden').status) {
				// 	return uni.showToast({
				// 		title: uni.getStorageSync('hasForbidden').msg,
				// 		icon: 'none'
				// 	});
				// }


				this.freeCount = 99999

				let res = await userInfo()
				console.log('gpt页用户个人信息返回值', res);
				if (res.code == 0) {
					uni.removeStorageSync('hasForbidden')
					this.userInfo = res.data
				} else {
					// console.log('您的账号已被禁用，请练习管理员', res);
				}
			}




		},
		methods: {
			async test() {
				console.log('sendGpt()66666666666666666');
				let res = await sendGpt({
					message: '3699+1'
				})
				if (res.code == 0) {
					console.log('sendGpt()', res);
				}
			},
			copy(e) {
				var that = this;
				var text = e.currentTarget.dataset.text;
				uni.setClipboardData({
					data: text,
					success(res) {
						uni.getClipboardData({
							success(res) {}
						});
					}
				});
			},

			focusinput() {
				this.showexpand = false;
				this.$nextTick(() => {
					uni.pageScrollTo({
						scrollTop: 9999,
						duration: 300
					});
				});
			},

			// 发送信息
			async send(e) {
				if (uni.getStorageSync('hasForbidden').status == 0) {
					return uni.showToast({
						title: '抱歉，您的账号已被禁用，请联系管理员解封后使用！',
						icon: 'none'
					});
				}

				if (this.freeCount <= 0) {
					uni.showToast({
						title: `抱歉，您的免费次数(${this.freeCountSum}次)已用完！`,
						icon: 'none'
					});
					return;
				}


				let that = this;
				if (that.talkList.length > 1 && !that.talkList[that.talkList.length - 1].done) {
					uni.showToast({
						title: '正在输入回答,请等待输入完成',
						icon: 'none'
					});
					return;
				}
				if (!e) {
					uni.showToast({
						title: '请输入有效的内容',
						icon: 'none'
					});
					return;
				}
				this.thecontent = e;
				// 将当前发送信息 添加到消息列表。
				let data = {
					id: new Date().getTime(),
					content: e,
					type: 1,
					toid: 666,
					fromid: 1,
					avatar: this.userInfo.avatar,
					nickname: '我',
					done: true
				};
				this.talkList.push(data);

				let chat_data = {
					id: new Date().getTime(),
					content: '正在思考中...',
					type: 1,
					toid: 666,
					fromid: -1,
					avatar: 'https://nywhcm.com/addons/wike_aging/public/static/storage/presets/mode/1.png',
					nickname: this.robotName,

					show_flash: true,
					done: false
				};
				this.talkList.push(chat_data);
				this.$nextTick(() => {
					// 清空内容框中的内容
					this.content = '';
					uni.pageScrollTo({
						scrollTop: 99999,
						duration: 300
					});
				});

				// 修改，方案二
				// let res9 = await sendGpt({
				// 	message: that.thecontent
				// })
				// if (res9.code == 0) {
				// 	console.log('sendGpt()', res9);


				// }else{

				// }

				// 原方案

				// let url = 'https://www.ai5566.top/api/chat/send'
				let url = uploadUrl.chatUrl
				fetch(url, {
					method: 'POST',
					headers: {
						'Content-Type': 'application/json',
						'Authorization': uni.getStorageSync('token')
					},
					body: JSON.stringify({
						// message:'介绍一下思维定制'
						message: that.thecontent
					})
				}).then(async (resp) => {
					let result = await resp.text()
					const res = JSON.parse(result)
					if ((resp.status >= 200 && resp.status < 300) && res.code == 0) {
						that.talkList[that.talkList.length - 1].done = true
						that.talkList[that.talkList.length - 1].show_flash = false
						that.talkList[that.talkList.length - 1].content = res.data
						that.$nextTick(() => {
							uni.pageScrollTo({
								scrollTop: 9999,
								duration: 1000
							});
						})
						that.freeCount--
						console.log('游客剩余提问次数', that.freeCount)


						// 此处发送记录问答记录的请求
						console.log('每次记录问答参数', {
							ques_content: that.talkList[that.talkList.length - 2].content,
							ai_aswerContent: that.talkList[that.talkList.length - 1].content
						})
					} else {
						that.talkList[that.talkList.length - 1].done = true
						that.talkList[that.talkList.length - 1].show_flash = false
						that.talkList[that.talkList.length - 1].content = '本次提问由于网络超时出错啦,请稍后重新提问'
						uni.showToast({
							title: '本次提问由于网络超时出错啦,请稍后重新提问',
							icon: 'none'
						})

					}
				}).catch((err) => {
					that.talkList[that.talkList.length - 1].done = true
					that.talkList[that.talkList.length - 1].show_flash = false
					that.talkList[that.talkList.length - 1].content = '本次提问由于网络超时出错啦,请稍后重新提问'
					uni.showToast({
						title: '本次提问由于网络超时出错啦,请稍后重新提问',
						icon: 'none'
					})
				})
			},






			// 复制文本
			copyText(e) {
				uni.setClipboardData({
					data: this.talkList[e].content,
					success: function() {
						// console.log('success');
						uni.showToast({
							title: '复制成功'
						});
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	@import '@/pages/chat/global.scss';
	@import './chat.scss';
</style>