deepChartVueApp/pages/customerServicePlatform/questionDetail.vue

<template>
	<view class="main">
		<view class="top" :style="{ height: iSMT + 'px' }"></view>

		<!-- 头部导航 -->
		<view class="header">
			<view class="back-icon">
				<image @click="onBack" src="/static/customer-service-platform/cs-platform-back.png"
					class="header-icon-image"></image>
			</view>
			<view class="title">{{ headerTitle }}</view>
			<view class="notification-icon">
				<image src="/static/customer-service-platform/message.png" class="header-icon-image"></image>
			</view>
		</view>

		<scroll-view scroll-y class="content-container">

			<view class="content-header">
				<view class="content-header-area">
					<view class="logo">
						<image mode="aspectFit" src="/static/customer-service-platform/ellipse-dc-img.png"></image>
					</view>
					<view class="greeting">
						<text class="greet-title">嗨，我能为你做点什么？</text>
						<text class="greet-sub">DeepChart随时为您提供服务</text>
					</view>
				</view>
			</view>

			<!-- 卡片部分 -->
			<view class="card">
				<!-- 问题头部-->
				<view class="question-header">
					<view class="question-row">
						<image class="question-avatar" src="/static/customer-service-platform/robot-head.png"
							mode="aspectFill"></image>
						<view class="question-title">{{ questionTitle }}</view>
					</view>
				</view>

				<!-- 卡片内容区-->
				<view class="card-body">
					<image class="card-logo" src="/static/customer-service-platform/ellipse-dc-img.png"
						mode="aspectFit"></image>

					<view class="card-text">

						<rich-text :nodes="renderMarkdown(answerContent)"></rich-text>

						<!-- 		<text class="card-paragraph">
							{{answerContent}}
						</text> -->
					</view>
				</view>

			</view>

			<view class="login-row" v-if="showLoginRegister">
				<button class="login-btn" @click="toLogin">登录</button>
				<button class="register-btn" @click="toRegistration">注册</button>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		getAnswerApi
	} from "../../api/customerServicePlatform/customerServicePlatform";
	import marked from "marked"; // 引入 marked 库

	export default {
		data() {
			return {
				headerTitle: '智能客服中台',
				iSMT: 0,
				questionTitle: '',
				answerContent: '正在思考...',
				showLoginRegister: false,
			};
		},
		mounted() {
			this.iSMT = uni.getSystemInfoSync().statusBarHeight || 0;
			this.getAnswerContent()
		},
		onLoad(options) {
			if (options.question) {
				this.questionTitle = decodeURIComponent(options.question);
				if (this.questionTitle.includes("如何注册")) {
					this.showLoginRegister = true
				} else {
					this.showLoginRegister = false
				}
			}
		},
		methods: {
			renderMarkdown(content) {
				const renderer = new marked.Renderer();
				// renderer.heading = function (text, level) {
				//   return `<p>${text}</p>`;
				// };
				// 设置 marked 选项
				marked.setOptions({
					renderer: renderer,
					highlight: null, // 如果需要代码高亮，可以设置适当的函数
					langPrefix: "language-",
					pedantic: false,
					gfm: true,
					breaks: false,
					sanitize: false,
					smartLists: true,
					smartypants: false,
					xhtml: false,
				});
				if (!content) return "";
				let renderedContent = marked.parse(content);
				renderedContent = renderedContent.replace(/\*/g, '');
				return renderedContent;
			},
			async getAnswerContent() {
				let conversationId = '';
				try {
					const cache = uni.getStorageSync('conversationId');
					if (cache) conversationId = cache;
				} catch (e) {
					conversationId = '';
				}
				try {
					const res = await getAnswerApi({
						question: this.questionTitle,
						conversationId: conversationId,
					})
					console.log(res)

					if (res.code == 200) {
						uni.setStorageSync('conversationId', res.data.conversationId);
						const answer = res.data.answer
						// 流式输出逻辑
						let currentIndex = 0;
						const answerLength = answer.length;

						// 每隔一定时间显示一部分内容
						this.interval = setInterval(() => {
							this.answerContent = answer.slice(0, currentIndex);
							currentIndex++;

							if (currentIndex > answerLength) {
								clearInterval(this.interval);
							}
						}, Math.floor(Math.random() * (150 - 30 + 1)) + 30);
					} else {
						this.answerContent = '获取回答失败，请重试';
					}
				} catch {
					this.answerContent = '获取回答失败，请重试';
				}
			},
			sleepTime() {
				const ms = Math.floor(Math.random() * (300 - 30 + 1)) + 30;
				return ms;
			},

			toRegistration() {
				uni.redirectTo({
					url: "/pages/start/Registration/Registration",
				});
			},
			toLogin() {
				uni.redirectTo({
					url: "/pages/start/login/login",
				});
			},
			onBack() {
				if (typeof uni !== 'undefined') uni.navigateBack();
			}
		}
	};
</script>

<style scoped>
	.main {
		display: flex;
		flex-direction: column;
		height: 100vh;
		background-color: #ffffff;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #ffffff;
	}

	.title {
		color: #000000;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
	}

	.back-icon,
	.notification-icon {
		width: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.header-icon-image {
		width: 40rpx;
		height: 40rpx;
		object-fit: contain;
	}

	.content-container {
		padding: 20rpx;
		width: 100%;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.content-header {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 24rpx;
		padding: 0 60rpx;
		width: 100%;
		box-sizing: border-box;
		height: 188rpx;
	}

	.content-header-area {
		display: flex;
		gap: 20rpx;
	}

	.logo {
		width: 120rpx;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 0 0 112rpx;
	}

	.greeting {
		display: flex;
		flex-direction: column;
		justify-content: center;
		flex: 1 1 auto;
	}

	.greet-title {
		color: #000;
		font-size: 40rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;
		margin: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.greet-sub {
		color: #838383;
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		margin-top: 12rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.card {
		width: 90%;
		margin: 0 auto 20rpx;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 16rpx;
		border: 4rpx solid #FF7C99;
		background: #fff;
	}

	/* 问题头部 */
	.question-header {
		width: 100%;
		margin-bottom: 48rpx;
	}

	.question-row {
		display: flex;
		align-items: center;
	}

	.question-avatar {
		width: 52rpx;
		height: 52rpx;
		border-radius: 999rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.question-title {
		color: #000000;
		font-size: 34rpx;
	}

	/* 卡片内部布局 */
	.card-body {
		display: flex;
		gap: 20rpx;
		align-items: flex-start;
	}

	.card-logo {
		width: 52rpx;
		height: 52rpx;
		flex: 0 0 52rpx;
		border-radius: 8rpx;
	}

	.card-text {
		flex: 1 1 auto;
	}

	.card-paragraph {
		display: block;
		color: #000000;
		font-size: 28rpx;
		margin-bottom: 14rpx;
		font-style: normal;
		font-weight: 500;
	}

	.login-row {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		margin-top: 100rpx;
	}

	.login-btn {
		width: 260rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: #F3F3F3;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		margin-right: 20rpx;
	}

	.register-btn {
		width: 260rpx;
		height: 100rpx;
		border-radius: 60rpx;
		background: #000;
		color: #ffffff;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
	}
</style>