<template>
	<view class="privacy-page">
		<!-- 1. 自定义导航栏 -->
		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="nav-content">
				<view class="back-area" @click="goBack">
					<text class="back-arrow"></text>
				</view>
				<view class="nav-title">隐私政策</view>
				<view class="right-placeholder"></view>
			</view>
		</view>

		<scroll-view scroll-y class="content-scroll" :style="{ height: scrollHeight }">
			<view class="article-body">
				<view class="title">ERP 系统隐私政策</view>
				<view class="update-time">发布日期：2024年04月28日</view>
				<rich-text :nodes="privacyNodes"></rich-text>
				<view class="safe-bottom-hint">
					<text>加密存储 · 严格保密</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				privacyNodes: `
					<div style="line-height: 1.8; color: #444; font-size: 14px;">
						<h3 style="color: #000; margin-top: 20px;">1. 我们收集的信息</h3>
						<p>我们仅收集实现业务功能所必需的信息。包括您的登录手机号、企业授权名称、操作日志以及必要业务参数。</p>
						<h3 style="color: #000; margin-top: 20px;">2. 信息安全保障</h3>
						<p>我们采用行业标准的加密技术对您的数据进行存储，并建立了严格的内部访问控制体系。</p>
					</div>
				`
			}
		},
		computed: {
			scrollHeight() {
				return `calc(100vh - ${this.statusBarHeight + 44}px)`;
			}
		},
		onLoad() {
			const info = uni.getSystemInfoSync();
			this.statusBarHeight = info.statusBarHeight;
		},
		methods: {
			goBack() { uni.navigateBack(); }
		}
	}
</script>

<style scoped>
	.privacy-page { width: 100vw; height: 100vh; background: #ffffff; display: flex; flex-direction: column; }
	.custom-navbar { background: #fff; flex-shrink: 0; }
	.nav-content { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0 30rpx; }
	.back-area { width: 60rpx; height: 44px; display: flex; align-items: center; }
	.back-arrow { width: 22rpx; height: 22rpx; border-left: 4rpx solid #333; border-bottom: 4rpx solid #333; transform: rotate(45deg); margin-left: 10rpx; }
	.nav-title { font-size: 34rpx; font-weight: bold; color: #333; }
	.right-placeholder { width: 60rpx; }

	.content-scroll { width: 100%; }
	.article-body { padding: 40rpx; padding-top: 20rpx; }
	.title { font-size: 40rpx; font-weight: bold; color: #1a1a1a; margin-bottom: 16rpx; text-align: center; }
	.update-time { font-size: 24rpx; color: #999; margin-bottom: 40rpx; text-align: center; }
	.safe-bottom-hint { margin-top: 80rpx; text-align: center; color: #52c41a; font-size: 24rpx; opacity: 0.6; }
</style>
