school_uni/package5/legal/agreementDetail.vue

<template>
	<view class="detail-page">
		<view class="detail-bg"></view>
		<view class="nav" :style="{height: navHeight + 'px', paddingTop: statusBarHeight + 'px'}">
			<view class="nav-back" @tap="goBack">
				<text class="nav-back-icon">‹</text>
			</view>
			<view class="nav-title">{{title || '协议详情'}}</view>
		</view>

		<scroll-view scroll-y class="detail-scroll" :style="{paddingTop: (navHeight + 18) + 'px'}">
			<view class="content-card">
				<view class="detail-title">{{title || detail.title || '协议详情'}}</view>
				<view v-if="loading" class="empty-text">正在加载内容...</view>
				<rich-text v-else-if="detail.content" class="rich-content" :nodes="detail.content"></rich-text>
				<view v-else class="empty-text">内容待完善</view>
			</view>
			<view class="bottom-space"></view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 20,
				navHeight: 64,
				code: '',
				title: '',
				loading: false,
				detail: {}
			}
		},
		onLoad(options) {
			const sys = uni.getSystemInfoSync()
			this.statusBarHeight = sys.statusBarHeight || 20
			this.initNavHeight()
			this.code = options.code || ''
			this.title = options.title ? decodeURIComponent(options.title) : ''
			this.loadDetail()
		},
		methods: {
			initNavHeight() {
				try {
					const menu = uni.getMenuButtonBoundingClientRect && uni.getMenuButtonBoundingClientRect()
					if (menu && menu.top && menu.height) {
						this.navHeight = menu.top + menu.height + 8
						return
					}
				} catch (e) {}
				this.navHeight = this.statusBarHeight + 44
			},
			goBack() {
				uni.navigateBack({
					fail: () => {
						uni.navigateTo({
							url: '/package5/legal/qualification'
						})
					}
				})
			},
			loadDetail() {
				if (!this.code) return
				this.loading = true
				this.tui.request('/app/agreementSetting/getByCode', 'GET', {
					code: this.code
				}, false, false, true).then((res) => {
					if (res.code == 200 && res.result) {
						this.detail = res.result || {}
						if (this.detail.title) this.title = this.detail.title
					}
				}).catch(() => {}).finally(() => {
					this.loading = false
				})
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100%;
		background: #F8FCFA;
	}

	.detail-page {
		position: relative;
		width: 100%;
		height: 100%;
		overflow: hidden;
		color: #073D33;
		background:
			radial-gradient(circle at 8% 0%, rgba(52, 200, 160, .14) 0, rgba(52, 200, 160, 0) 320rpx),
			radial-gradient(circle at 94% 28%, rgba(255, 166, 61, .12) 0, rgba(255, 166, 61, 0) 360rpx),
			#F8FCFA;
	}

	.detail-bg {
		position: absolute;
		top: -160rpx;
		right: -120rpx;
		width: 360rpx;
		height: 360rpx;
		border-radius: 50%;
		background: rgba(166, 255, 234, .42);
		filter: blur(10rpx);
		pointer-events: none;
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
		box-sizing: border-box;
		background: rgba(248, 252, 250, .9);
		backdrop-filter: blur(20rpx);
	}

	.nav-back {
		position: absolute;
		left: 22rpx;
		bottom: 11rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 64rpx;
		height: 64rpx;
		border-radius: 50%;
		background: rgba(255, 255, 255, .82);
		box-shadow: 0 12rpx 34rpx rgba(7, 61, 51, .08);
	}

	.nav-back-icon {
		margin-top: -4rpx;
		color: #073D33;
		font-size: 54rpx;
		line-height: 54rpx;
	}

	.nav-title {
		position: absolute;
		left: 110rpx;
		right: 110rpx;
		bottom: 22rpx;
		color: #073D33;
		font-size: 32rpx;
		font-weight: 900;
		line-height: 44rpx;
		text-align: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.detail-scroll {
		position: relative;
		z-index: 1;
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		padding: 0 30rpx;
	}

	.content-card {
		box-sizing: border-box;
		min-height: 420rpx;
		padding: 34rpx 30rpx;
		border-radius: 34rpx;
		background: rgba(255, 255, 255, .92);
		box-shadow: 0 12rpx 40rpx rgba(30, 80, 60, .06);
	}

	.detail-title {
		margin-bottom: 28rpx;
		color: #073D33;
		font-size: 38rpx;
		font-weight: 900;
		line-height: 52rpx;
	}

	.rich-content {
		color: #202124;
		font-size: 28rpx;
		line-height: 1.8;
		word-break: break-word;
	}

	.empty-text {
		padding: 120rpx 0;
		color: rgba(7, 61, 51, .45);
		font-size: 28rpx;
		text-align: center;
	}

	.bottom-space {
		height: 80rpx;
	}
</style>