骑行问题智能解答 - Clever Helmet 智慧问答系统

<template>
	<view class='containers'>
		<br>
		<p>问题输入框</p>
		<view class='input-container'>
			<input type='text' v-model='prompt' placeholder='在此输入您在骑行时遇到的问题' />
		</view>
		<view class='button-container'>
			<button @click='submit' class='confirm bubble'>提交</button>
		</view>
		<br>
		<p>回答结果</p>
		<view class='response-container'>
			<text selectable='true' class='response-container-text'>
				{{ renderResponse }}
			</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				prompt: '',
				responseData: '',
				response: '',
				loading: 'false',
				renderResponse: ''
			};
		},
		methods: {
			submit() {
				if (this.prompt !== '') {
					this.submitData();
				} else {
					// uni.showToast({
					// 	title: '提交内容为空',
					// 	icon: 'error'
					// });
					uni.showModal({
						title: '操作错误',
						content: '提交内容不能为空
请在问题输入框中输入你要咨询的问题
来自开发者冯楠2010188的提示',
						showCancel: false,
						confirmText: '确定'
					});
				}
			},


			submitData() {
				uni.showLoading({
					title: '请耐心等待回答结果...'
				}); // 显示等待框
				this.loading = true;
				uni.request({
					url: 'https://svip1-api.cveoy.top/v3/completions', // 假设接口地址为 http://localhost:3000/data
					method: 'POST',
					data: {
						prompt: this.prompt,
						keys: 'sk-eae8a6f4e46c49fb9c1c8e933b2a33e7'
					},
					success: res => {
						let responseData = res.data;
						responseData = responseData.replace('你当前使用的模型为gpt-3.5-turbo!', '欢迎使用Clever Helmet智慧问答系统
');
						console.log(responseData);
						this.responseData = responseData;
						this.renderResponse = ''; // 清空之前的渲染结果
						this.renderText(); // 开始渲染打字机效果
						// this.responseData = res.data;
					},
					complete: () => {
						uni.hideLoading(); // 隐藏等待框
						this.loading = false;
					}
				});
			},

			renderText() {
				let i = 0;
				const timer = setInterval(() => {
					if (i < this.responseData.length) {
						this.renderResponse += this.responseData[i];
						i++;
					} else {
						clearInterval(timer); // 清除定时器
					}
				}, 100);
			}

		}
	};
</script>