优化小程序登录工作空间与法律协议

uniapp/pages/legal/document.vue

@@ -0,0 +1,102 @@
+<template>
+	<view class="page">
+		<view v-if="loading" class="state"><text>正在加载内容…</text></view>
+		<view v-else-if="error" class="state error" @tap="load"><text>{{ error }}，点此重试</text></view>
+		<view v-else-if="!document" class="state"><text>暂未发布此内容，请联系管理员</text></view>
+		<scroll-view v-else class="content-scroll" scroll-y>
+			<view class="article">
+				<text class="title">{{ document.title || pageTitle }}</text>
+				<rich-text class="rich-content" :nodes="document.content || ''" />
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { fetchLegalDocument } from '@/api/legal.js'
+
+const pageTitle = ref('法律条款')
+const path = ref('')
+const loading = ref(true)
+const error = ref('')
+const document = ref(null)
+
+onLoad((options = {}) => {
+	path.value = String(options.path || '')
+	pageTitle.value = String(options.title || '法律条款')
+	uni.setNavigationBarTitle({ title: pageTitle.value })
+	load()
+})
+
+async function load() {
+	if (!path.value) {
+		loading.value = false
+		error.value = '内容地址无效'
+		return
+	}
+	loading.value = true
+	error.value = ''
+	try {
+		const result = await fetchLegalDocument(path.value)
+		const data = result && (result.data || result)
+		document.value = data && data.id ? data : null
+	} catch (err) {
+		error.value = (err && err.message) || '内容加载失败'
+	} finally {
+		loading.value = false
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/src/styles/page-common.scss';
+
+.page {
+	min-height: 100vh;
+	background: #f4f8fc;
+}
+
+.content-scroll {
+	height: 100vh;
+	box-sizing: border-box;
+	padding: 24rpx;
+}
+
+.article {
+	padding: 36rpx 30rpx 52rpx;
+	border-radius: 24rpx;
+	background: #fff;
+	box-shadow: 0 8rpx 32rpx rgba(47, 91, 130, 0.06);
+}
+
+.title {
+	display: block;
+	margin-bottom: 28rpx;
+	font-size: 36rpx;
+	font-weight: 700;
+	line-height: 1.5;
+	color: #203c57;
+}
+
+.rich-content {
+	font-size: 28rpx;
+	line-height: 1.9;
+	color: #43586c;
+	word-break: break-word;
+}
+
+.state {
+	min-height: 70vh;
+	padding: 48rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	font-size: 26rpx;
+	color: #8094a8;
+}
+
+.error { color: #d94841; }
+</style>