cytx_mp/pages/content/content.vue

<template>
	<view class="page">
		<view class="content-body" v-if="loaded">
			<mp-html :content="content" :tag-style="mpHtmlTagStyle" />
		</view>
		<view v-else class="loading">
			<u-loading-icon />
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { get } from '@/utils/request.js'
import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'

const mpHtmlTagStyle = {
	h1: 'font-size:inherit;font-weight:inherit;',
	h2: 'font-size:inherit;font-weight:inherit;',
	h3: 'font-size:inherit;font-weight:inherit;',
	h4: 'font-size:inherit;font-weight:inherit;',
	h5: 'font-size:inherit;font-weight:inherit;',
	h6: 'font-size:inherit;font-weight:inherit;',
	ol: 'list-style:none;margin:0;padding:0;',
	ul: 'list-style:none;margin:0;padding:0;',
	menu: 'list-style:none;'
}

const content = ref('')
const loaded = ref(false)

onLoad((options) => {
	const key = (options && options.key) || ''
	if (key) {
		loadContent(key)
	}
})

const loadContent = async (key) => {
	try {
		const res = await get('/api/content', { key })
		if (res.data) {
			content.value = res.data.content || ''
			uni.setNavigationBarTitle({ title: res.data.title || '' })
		}
	} catch (e) {
		console.error('获取内容失败', e)
	} finally {
		loaded.value = true
	}
}
</script>

<style lang="scss" scoped>
.page {
	min-height: 100vh;
	background: #fff;
}

.content-body {
	padding: 32rpx;
}

.loading {
	display: flex;
	justify-content: center;
	padding: 100rpx 0;
}
</style>