From ee54919d10dea640af38b8b3873710bca356d82a Mon Sep 17 00:00:00 2001
From: longz <longzhaoz@qq.com>
Date: 星期五, 03 七月 2026 15:16:43 +0800
Subject: [PATCH] 部分优化
---
traditionalApp/pages/protocol/protocol.vue | 266 +++++++++++++++++++++++++++-------------------------
1 files changed, 139 insertions(+), 127 deletions(-)
diff --git a/traditionalApp/pages/protocol/protocol.vue b/traditionalApp/pages/protocol/protocol.vue
index d1f58ec..3762124 100644
--- a/traditionalApp/pages/protocol/protocol.vue
+++ b/traditionalApp/pages/protocol/protocol.vue
@@ -11,151 +11,156 @@
<rich-text :nodes="expertIntroNodes" class="section-rich-content"></rich-text>
</view>
</view>
- <rich-text v-else :nodes="htmlContent" class="rich-content"></rich-text>
+ <view v-else class="protocol-content">
+ <rich-text :nodes="htmlContent" class="rich-content"></rich-text>
+ </view>
</view>
</template>
-<script setup lang="ts">
-import { ref } from 'vue'
-import { onLoad } from '@dcloudio/uni-app'
+<script>
import { getLiveExpertDetail } from '../liveDetail/service'
import { getAgreementContentDetail } from './service'
-
-interface ExpertDetail {
- id?: number | string | null
- name: string
- avatar: string
- specialty: string
- intro: string
-}
const DEFAULT_USER_AGREEMENT_TITLE = '用户服务协议'
const DEFAULT_PRIVACY_TITLE = '隐私协议'
-const pageType = ref('')
-const htmlContent = ref('')
-const expertDetail = ref<ExpertDetail>(createFallbackExpertDetail())
-const expertIntroNodes = ref(buildRichTextNodes(createFallbackExpertDetail().intro, '暂无专家介绍'))
+export default {
+ data() {
+ return {
+ pageType: '',
+ htmlContent: '',
+ expertDetail: this.createFallbackExpertDetail(),
+ expertIntroNodes: this.buildRichTextNodes(this.createFallbackExpertDetail().intro, '暂无专家介绍')
+ }
+ },
+ onLoad(options) {
+ this.pageType = typeof options?.type === 'string' ? options.type : ''
-/**
- * 创建专家介绍页的兜底静态数据，避免旧入口无参时页面空白。
- */
-function createFallbackExpertDetail(): ExpertDetail {
- return {
- id: null,
- name: '张雨泽',
- avatar: '/static/image/home/avatr.png',
- specialty: '中医文化传播',
- intro: '专家老师详细介绍内容。张雨泽老师在相关领域拥有多年的丰富经验，致力于传播中医文化，培养优秀的专业人才。',
- }
-}
-
-/**
- * 加载协议详情页真实接口，未配置时返回空富文本兜底。
- */
-async function loadAgreementContent(type: string) {
- uni.setNavigationBarTitle({
- title: resolveAgreementTitle(type),
- })
- htmlContent.value = buildRichTextNodes('', '暂无协议内容')
- try {
- const response = await getAgreementContentDetail(type)
- if (response?.code !== 0 || !response.data) {
+ if (this.pageType === 'user') {
+ this.loadAgreementContent(this.pageType)
return
}
- const agreementName = normalizeText(response.data.agreementName) || resolveAgreementTitle(type)
- uni.setNavigationBarTitle({
- title: agreementName,
- })
- htmlContent.value = buildRichTextNodes(normalizeText(response.data.contentHtml), '暂无协议内容')
- } catch {
- // 请求层会统一处理异常提示，这里保留兜底空内容即可。
- }
-}
-/**
- * 将接口返回的富文本正文转换为 `rich-text` 可直接渲染的节点字符串。
- */
-function buildRichTextNodes(content?: string, fallbackText?: string): string {
- if (typeof content === 'string' && content.trim()) {
- return content
- }
- if (typeof fallbackText === 'string' && fallbackText.trim()) {
- return `<p>${fallbackText.trim()}</p>`
- }
- return '<p></p>'
-}
-
-/**
- * 根据页面类型返回协议页默认标题。
- */
-function resolveAgreementTitle(type: string) {
- if (type === 'privacy') {
- return DEFAULT_PRIVACY_TITLE
- }
- return DEFAULT_USER_AGREEMENT_TITLE
-}
-
-/**
- * 将可选文本归一化为空字符串。
- */
-function normalizeText(value: unknown) {
- if (typeof value !== 'string') {
- return ''
- }
- return value.trim()
-}
-
-/**
- * 加载专家介绍页真实接口，失败时回退到静态内容。
- */
-async function loadExpertDetail(expertId?: string) {
- if (!expertId) {
- expertDetail.value = createFallbackExpertDetail()
- expertIntroNodes.value = buildRichTextNodes(expertDetail.value.intro, '暂无专家介绍')
- return
- }
- try {
- const response = await getLiveExpertDetail(expertId)
- if (response?.code !== 0 || !response.data) {
- expertDetail.value = createFallbackExpertDetail()
- expertIntroNodes.value = buildRichTextNodes(expertDetail.value.intro, '暂无专家介绍')
+ if (this.pageType === 'privacy') {
+ this.loadAgreementContent(this.pageType)
return
}
- expertDetail.value = {
- ...createFallbackExpertDetail(),
- ...response.data,
+
+ if (this.pageType === 'expert') {
+ uni.setNavigationBarTitle({
+ title: '专家老师介绍'
+ })
+ this.loadExpertDetail(typeof options?.id === 'string' ? options.id : '')
}
- expertIntroNodes.value = buildRichTextNodes(expertDetail.value.intro, '暂无专家介绍')
- } catch {
- expertDetail.value = createFallbackExpertDetail()
- expertIntroNodes.value = buildRichTextNodes(expertDetail.value.intro, '暂无专家介绍')
+ },
+ methods: {
+ /**
+ * 创建专家介绍页的兜底静态数据，避免旧入口无参时页面空白。
+ */
+ createFallbackExpertDetail() {
+ return {
+ id: null,
+ name: '张雨泽',
+ avatar: '/static/image/home/avatr.png',
+ specialty: '中医文化传播',
+ intro: '专家老师详细介绍内容。张雨泽老师在相关领域拥有多年的丰富经验，致力于传播中医文化，培养优秀的专业人才。',
+ }
+ },
+
+ /**
+ * 加载协议详情页真实接口，未配置时返回空富文本兜底。
+ */
+ async loadAgreementContent(type) {
+ uni.setNavigationBarTitle({
+ title: this.resolveAgreementTitle(type),
+ })
+ this.htmlContent = this.buildRichTextNodes('', '暂无协议内容')
+
+ try {
+ const response = await getAgreementContentDetail(type)
+ if (!response || response.code !== 0 || !response.data) {
+ return
+ }
+
+ const agreementName = this.normalizeText(response.data.agreementName) || this.resolveAgreementTitle(type)
+ uni.setNavigationBarTitle({
+ title: agreementName,
+ })
+ const contentHtml = this.normalizeText(response.data.contentHtml)
+ if (!contentHtml) {
+ return
+ }
+
+ this.htmlContent = this.buildRichTextNodes(contentHtml, '暂无协议内容')
+ } catch (error) {
+ // 请求层会统一处理异常提示，这里保留兜底空内容即可。
+ }
+ },
+
+ /**
+ * 将接口返回的富文本正文转换为 `rich-text` 可直接渲染的节点字符串。
+ */
+ buildRichTextNodes(content, fallbackText) {
+ if (typeof content === 'string' && content.trim()) {
+ return content
+ .replace(/<img/gi, '<img style="max-width:100%;height:auto;margin:0 auto;display:block"')
+ .replace(/<p/gi, '<p style="margin:10px 0;line-height:1.8;word-break:break-all"')
+ .replace(/<div/gi, '<div style="word-break:break-all"')
+ }
+ if (typeof fallbackText === 'string' && fallbackText.trim()) {
+ return `<p>${fallbackText.trim()}</p>`
+ }
+ return '<p></p>'
+ },
+
+ /**
+ * 根据页面类型返回协议页默认标题。
+ */
+ resolveAgreementTitle(type) {
+ if (type === 'privacy') {
+ return DEFAULT_PRIVACY_TITLE
+ }
+ return DEFAULT_USER_AGREEMENT_TITLE
+ },
+
+ /**
+ * 将可选文本归一化为空字符串。
+ */
+ normalizeText(value) {
+ if (typeof value !== 'string') {
+ return ''
+ }
+ return value.trim()
+ },
+
+ /**
+ * 加载专家介绍页真实接口，失败时回退到静态内容。
+ */
+ async loadExpertDetail(expertId) {
+ if (!expertId) {
+ this.expertDetail = this.createFallbackExpertDetail()
+ this.expertIntroNodes = this.buildRichTextNodes(this.expertDetail.intro, '暂无专家介绍')
+ return
+ }
+ try {
+ const response = await getLiveExpertDetail(expertId)
+ if (response?.code !== 0 || !response.data) {
+ this.expertDetail = this.createFallbackExpertDetail()
+ this.expertIntroNodes = this.buildRichTextNodes(this.expertDetail.intro, '暂无专家介绍')
+ return
+ }
+ this.expertDetail = {
+ ...this.createFallbackExpertDetail(),
+ ...response.data,
+ }
+ this.expertIntroNodes = this.buildRichTextNodes(this.expertDetail.intro, '暂无专家介绍')
+ } catch {
+ this.expertDetail = this.createFallbackExpertDetail()
+ this.expertIntroNodes = this.buildRichTextNodes(this.expertDetail.intro, '暂无专家介绍')
+ }
+ }
}
}
-
-/**
- * 页面加载时根据 type 参数分发到协议页或专家介绍页。
- */
-onLoad((options) => {
- pageType.value = typeof options?.type === 'string' ? options.type : ''
-
- if (pageType.value === 'user') {
- loadAgreementContent(pageType.value)
- return
- }
-
- if (pageType.value === 'privacy') {
- loadAgreementContent(pageType.value)
- return
- }
-
- if (pageType.value === 'expert') {
- uni.setNavigationBarTitle({
- title: '专家老师介绍'
- })
- loadExpertDetail(typeof options?.id === 'string' ? options.id : '')
- }
-})
</script>
<style lang="scss" scoped>
@@ -165,8 +170,15 @@
box-sizing: border-box;
}
+.protocol-content {
+ padding: 32rpx;
+}
+
.rich-content {
width: 100%;
+ font-size: 28rpx;
+ line-height: 1.8;
+ color: #333;
}
.expert-page {
--
Gitblit v1.7.1