template view class=container br p问题输入框p view class=input-container input type=text v-model=prompt placeholder=再此输入您在骑行时遇到的问题 view view class=button-container button click=submit class=confi

<template>
	<view class="container">
		<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">
				{{ response }}
			</text>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				prompt: "",
				response: "",
				loading: false
			};
		},
		methods: {
			submit() {
				if (this.prompt !== '') {
					this.submitData();
				} else {
					uni.showModal({
						title: '操作错误',
						content: '提交内容不能为空\n请在问题输入框中输入你要咨询的问题\n来自开发者冯楠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-c6e3c04b15af4afd933f4d15282ed524"
					},
					success: res => {
						let responseData = res.data;
						responseData = responseData.replace("你当前使用的模型为gpt-3.5-turbo!", "欢迎使用Clever Helmet智慧问答系统\n");
						console.log(responseData);
						this.loading = false;
						this.response = "";
						this.appendResponse(responseData);
					},
					complete: () => {
						uni.hideLoading(); // 隐藏等待框
						this.loading = false;
					}
				});
			},

			appendResponse(responseData) {
				const length = responseData.length;
				let i = 0;
				const intervalId = setInterval(() => {
					if (i === length) {
						clearInterval(intervalId);
					} else {
						this.response += responseData.charAt(i);
						i++;
					}
				}, 50);
			}

		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.input-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.button-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}

	.confirm {
		background-color: #007AFF;
		color: #fff;
		padding: 10px 20px;
		border-radius: 20px;
	}

	.bubble {
		box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
	}

	.response-container {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		margin-top: 20px;
	}

	.response-container-text {
		font-size: 16px;
		line-height: 1.5;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 10px;
		background-color: #f2f2f2;
		width: 80vw;
		height: 40vh;
		overflow: scroll;
	}
</style