uni-fans-score/subPackages/other/legal/agreement.vue

<template>
	<!-- 加载状态 -->
	<view v-if="loading" class="loading-page">
		<view class="loading-content">
			<view class="loading-spinner"></view>
			<text>{{ $t('common.loading') }}</text>
		</view>
	</view>

	<!-- 错误状态 -->
	<view v-else-if="error" class="error-page">
		<view class="error-content">
			<text class="error-icon">⚠️</text>
			<text class="error-message">{{ errorMessage }}</text>
			<button class="retry-btn" @click="loadAgreement">{{ $t('common.retry') }}</button>
		</view>
	</view>

	<!-- 内容显示 -->
	<view v-else class="legal-page">
		<view class="header">
			<text class="title">{{ agreementData.title || $t('legal.agreement') }}</text>
			<text v-if="agreementData.remark" class="subtitle">{{ agreementData.remark }}</text>
		</view>

		<scroll-view class="content" scroll-y>
			<rich-text :nodes="agreementData.content"></rich-text>
		</scroll-view>

		<view class="footer">
			<text>{{ $t('legal.footerNotice') }}</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, onMounted } from 'vue'
	import { useI18n } from '@/utils/i18n.js'
	import { getCurrentAgreement } from '@/config/api/system.js'

	const { t } = useI18n()

	// 响应式数据
	const loading = ref(true)
	const error = ref(false)
	const errorMessage = ref('')
	const agreementData = ref({
		title: '',
		content: '',
		remark: ''
	})

	// 加载协议内容
	const loadAgreement = async () => {
		loading.value = true
		error.value = false
		errorMessage.value = ''

		try {
			console.log('加载用户协议')

			// 调用接口获取协议内容
			const res = await getCurrentAgreement({
				agreementCode: 'USER_AGREEMENT',
				appPlatform: 'wechat',
				appType: 'user'
			})

			console.log('用户协议响应:', res)

			if (res && res.code === 200 && res.data) {
				agreementData.value = {
					title: res.data.title || t('legal.agreement'),
					content: res.data.content || '',
					remark: res.data.remark || ''
				}
				
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: agreementData.value.title
				})
			} else {
				throw new Error(res?.msg || t('common.loadFailed'))
			}
		} catch (err) {
			console.error('加载用户协议失败:', err)
			error.value = true
			errorMessage.value = err.message || t('common.loadFailed')
		} finally {
			loading.value = false
		}
	}

	onMounted(() => {
		loadAgreement()
	})
</script>

<style lang="scss" scoped>
	.loading-page {
		min-height: 100vh;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.loading-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24rpx;
	}
	
	.loading-spinner {
		width: 60rpx;
		height: 60rpx;
		border: 4rpx solid #f0f0f0;
		border-top: 4rpx solid #07c160;
		border-radius: 50%;
		animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
		0% { transform: rotate(0deg); }
		100% { transform: rotate(360deg); }
	}

	.error-page {
		min-height: 100vh;
		background: #f8f8f8;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.error-content {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 24rpx;

		.error-icon {
			font-size: 80rpx;
		}

		.error-message {
			font-size: 28rpx;
			color: #666;
			text-align: center;
		}

		.retry-btn {
			margin-top: 20rpx;
			padding: 20rpx 60rpx;
			background: #07c160;
			color: #fff;
			border-radius: 8rpx;
			font-size: 28rpx;
			border: none;
		}
	}
	
	.legal-page {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 24rpx 24rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.header {
			margin-bottom: 16rpx;

			.title {
				font-size: 40rpx;
				font-weight: 600;
				color: #222;
				margin-bottom: 8rpx;
				display: block;
			}

			.subtitle {
				font-size: 24rpx;
				color: #888;
				display: block;
			}
		}

		.content {
			background: #fff;
			border-radius: 16rpx;
			padding: 20rpx;
			flex: 1;
			box-sizing: border-box;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
		}

		.footer {
			text-align: center;
			margin-top: 16rpx;
			font-size: 24rpx;
			color: #888;
		}
	}
</style>