103 lines
2.2 KiB
Vue
103 lines
2.2 KiB
Vue
<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>
|