shanghaikangshi_tj/上海康仕小程序/components/YinSi.vue

<template>
	<view>
		<uni-popup ref="ys_popup" border-radius="20px" @change="popupChange">
			<view class="privacy-popup">
				<view class="privacy-title">隐私协议</view>
				<view class="privacy-content">
					<view class="privacy-text" v-html="YinSiContent.content">
						 
					</view>
				</view>
				<view class="privacy-agree">
					<view class="checkbox-wrapper" @click="toggleAgree">
						<view class="checkbox" :class="{ 'checked': agree }">
							<text v-if="agree" class="checkbox-text">✓</text>
						</view>
						<text class="agree-text">我已阅读并同意隐私协议</text>
					</view>
				</view>
				<view class="privacy-buttons">
					<view class="cancel-button" @click="closePopup">取消</view>
					<view class="confirm-button" :class="{ 'disabled': !agree }" @click="confirmAgree">同意</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		ref, nextTick,watch
	} from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import {
		 PostInfo,
		$response
	} from '@/api'
	
	const emit = defineEmits(['agree', 'close'])
	
	let ys_popup = ref(null)
	const agree = ref(false)
	const show = ref(false)
	const props = defineProps({
	  IsOpenYinSi: {
	    type: Boolean,
	    required: true
	  } 
	})
	watch(
	  () => props.IsOpenYinSi,
	  (newVal, oldVal) => {
	    console.log('visible 从', oldVal, '变为', newVal)
	    if (newVal) {
	      if(newVal===true){
			  openPopup()
		  }
	    }  
	  }
	)
	let YinSiContent=ref('')
	const GetPostInfo = async () => {
		const response = await PostInfo({
			id: 1
		})
		$response(response, () => {
			YinSiContent.value=response.data.info 
		})
	}
	
	// 打开弹窗
	const openPopup = async() => {
		await GetPostInfo()
		agree.value = false
		show.value = true
		nextTick(() => {
		    ys_popup.value.open('center')
		})
	}
	
	// 关闭弹窗
	const closePopup = () => {
		show.value = false
		ys_popup.value.close()
		emit('close')
	}
	
	// 切换同意状态
	const toggleAgree = () => {
		agree.value = !agree.value
	}
	
	// 确认同意
	const confirmAgree = () => {
		if (agree.value) {
			closePopup()
			emit('agree','agree_report')
		}
	}
	
	// 弹窗状态变化
	const popupChange = ({ show: popupShow }) => {
		show.value = popupShow
	}
	
 
</script>

<style scoped>
	.privacy-popup {
		width: 560rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx;
	}
	
	.privacy-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333333;
		text-align: center;
		margin-bottom: 30rpx;
	}
	
	.privacy-content {
		max-height: 600rpx;
		overflow-y: auto;
		margin-bottom: 40rpx;
	}
	
	.privacy-text {
		font-size: 26rpx;
		color: #666666;
		line-height: 42rpx;
		text-align: justify;
	}
	
	.privacy-agree {
		margin-bottom: 40rpx;
	}
	
	.checkbox-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.checkbox {
		width: 32rpx;
		height: 32rpx;
		border: 2rpx solid #CCCCCC;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 12rpx;
		transition: all 0.3s;
	}
	
	.checkbox.checked {
		background: #0BBACF;
		border-color: #0BBACF;
	}
	
	.checkbox-text {
		font-size: 20rpx;
		color: #FFFFFF;
		font-weight: bold;
	}
	
	.agree-text {
		font-size: 24rpx;
		color: #666666;
	}
	
	.privacy-buttons {
		display: flex;
		justify-content: space-between;
		gap: 30rpx;
	}
	
	.cancel-button {
		flex: 1;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #666666;
		line-height: 80rpx;
		text-align: center;
	}
	
	.confirm-button {
		flex: 1;
		height: 80rpx;
		background: #0BBACF;
		border-radius: 40rpx;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		transition: all 0.3s;
	}
	
	.confirm-button.disabled {
		background: #CCCCCC;
		color: #FFFFFF;
	}
</style>