sxc-frontend/miniprogram/components/SsDisclaimer.vue

<template>
	<!-- 透明遮罩层，点击后弹出免责声明 -->
	<view v-if="showOverlay" class="disclaimer-overlay" @tap="handleOverlayTap"></view>

	<!-- 免责声明弹窗 -->
	<view v-if="visible" class="disclaimer-modal">
		<view class="disclaimer-mask"></view>
		<view class="disclaimer-content">
			<view class="disclaimer-title">免责声明</view>
			<scroll-view class="disclaimer-body" scroll-y :show-scrollbar="false">
				<view class="disclaimer-text">
					<view class="disclaimer-item">1、四川商务智能体（商小川）运行期间，若回答与事实有所出入，最终解释权归四川省商务厅（以下简称商务厅）所有。智能体回复内容不代表商务厅官方立场，任何截屏、转发不具备法律效力，商务厅不对此承担任何责任。</view>
					<view class="disclaimer-item">2、当智能体以链接形式推荐其他网站内容时,任何因使用从此类网站或资源上获取的内容、服务而造成的任何损失，商务厅网站不对此承担任何责任。</view>
					<view class="disclaimer-item">3、用户上传、发表、转载于智能体上的信息仅代表用户或作者个人观点，若侵犯了第三方的知识产权或其他合法权利，责任由用户本人承担，商务厅不对此承担任何责任。</view>
				</view>
			</scroll-view>
			<view class="disclaimer-footer">
				<button class="btn-cancel" @tap="handleCancel">不同意</button>
				<button class="btn-confirm" @tap="handleConfirm">同意并继续</button>
			</view>
		</view>
	</view>
</template>

<script>
const DISCLAIMER_KEY = 'ss_disclaimer_accepted'

export default {
	name: 'SsDisclaimer',
	data() {
		return {
			visible: false,
			showOverlay: false,
			hasAccepted: false
		}
	},
	mounted() {
		this.checkAccepted()
	},
	methods: {
		checkAccepted() {
			const accepted = uni.getStorageSync(DISCLAIMER_KEY)
			if (accepted === 'true') {
				this.hasAccepted = true
				this.showOverlay = false
			} else {
				this.showOverlay = true
			}
		},
		handleOverlayTap() {
			this.visible = true
		},
		handleConfirm() {
			uni.setStorageSync(DISCLAIMER_KEY, 'true')
			this.hasAccepted = true
			this.showOverlay = false
			this.visible = false
		},
		handleCancel() {
			// 小程序无法直接跳转外部链接，显示提示并关闭小程序
			uni.showModal({
				title: '提示',
				content: '您需要同意免责声明才能使用本服务，点击确定将退出小程序',
				showCancel: false,
				success: () => {
					// 退出小程序
					uni.exitMiniProgram({
						fail: () => {
							// 如果退出失败，返回上一页或关闭当前页面
							uni.navigateBack({
								fail: () => {
									// 都失败则重新显示弹窗
									this.visible = true
								}
							})
						}
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="scss">
.disclaimer-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9998;
	background: transparent;
}

.disclaimer-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;

	.disclaimer-mask {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.disclaimer-content {
		position: relative;
		width: 600rpx;
		max-height: 80vh;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 24rpx;
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		.disclaimer-title {
			flex-shrink: 0;
			padding: 32rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: bold;
			color: #333;
			border-bottom: 1rpx solid #eee;
			box-sizing: border-box;
		}

		.disclaimer-body {
			flex: 1;
			min-height: 0;
			height: 500rpx;
			box-sizing: border-box;
			overflow: hidden;

			.disclaimer-text {
				padding: 32rpx;

				.disclaimer-item {
					font-size: 28rpx;
					color: #333;
					line-height: 1.8;
					margin-bottom: 24rpx;
					text-align: justify;
					word-break: break-all;

					&:last-child {
						margin-bottom: 0;
					}
				}
			}

			// 隐藏滚动条
			::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
				background: transparent;
			}
		}

		.disclaimer-footer {
			flex-shrink: 0;
			display: flex;
			padding: 24rpx 20rpx 32rpx;
			box-sizing: border-box;
			background: #ffffff;
			border-top: 1rpx solid #eee;

			button {
				flex: 1;
				height: 80rpx !important;
				min-height: 80rpx !important;
				max-height: 80rpx !important;
				line-height: 80rpx !important;
				font-size: 28rpx;
				border-radius: 40rpx;
				margin: 0 12rpx;
				padding: 0 !important;
				overflow: hidden;

				&::after {
					display: none;
				}
			}

			.btn-cancel {
				background: #f5f5f5;
				color: #666;
			}

			.btn-confirm {
				background: #2943d6;
				color: #ffffff;
			}
		}
	}
}
</style>