PrivacyPopup.vue
3.55 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!--
* @Date: 2026-02-02 15:58:03
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-02-02 16:18:17
* @FilePath: /xyxBooking-weapp/src/components/PrivacyPopup.vue
* @Description: 隐私协议弹窗组件
-->
<template>
<nut-popup
:visible="visible"
:close-on-click-overlay="false"
round
:style="{ width: '80%', padding: '0' }"
>
<view class="bg-white rounded-[24rpx] overflow-hidden">
<view class="pt-[48rpx] pb-[32rpx] text-center">
<text class="text-[36rpx] font-semibold text-[#333]">温馨提示</text>
</view>
<view class="px-[48rpx] pb-[48rpx] text-[30rpx] text-[#666] leading-relaxed text-center">
<text>请您在使用前仔细阅读并同意</text>
<text class="text-[#A67939] inline" @tap="showAgreement('user')">《用户服务协议》</text>
<text>和</text>
<text class="text-[#A67939] inline" @tap="showAgreement('privacy')">《隐私政策》</text>
</view>
<view class="flex border-t border-[#eee]">
<view class="flex-1 h-[96rpx] leading-[96rpx] text-center text-[32rpx] text-[#999] border-r border-[#eee] active:bg-gray-50" @tap="handleDisagree">不同意</view>
<view class="flex-1 h-[96rpx] leading-[96rpx] text-center text-[32rpx] font-medium text-[#A67939] active:bg-gray-50" @tap="handleAgree">同意</view>
</view>
</view>
</nut-popup>
<!-- 协议详情弹窗 -->
<nut-popup
:visible="detailVisible"
position="bottom"
round
:style="{ height: '80%' }"
@update:visible="val => detailVisible = val"
>
<view class="flex flex-col h-full bg-white relative overflow-hidden">
<!-- 标题栏 -->
<view class="flex-none flex items-center justify-center h-[96rpx] border-b border-[#eee] relative">
<text class="text-[32rpx] font-semibold text-[#333]">{{ detailTitle }}</text>
<view
class="absolute right-[32rpx] top-0 h-[96rpx] flex items-center justify-center text-[#999] text-[40rpx] px-[20rpx]"
@tap="detailVisible = false"
>×</view>
</view>
<!-- 内容区域 -->
<scroll-view :scroll-y="true" class="flex-1 h-0 px-[32rpx] py-[24rpx] box-border w-full">
<view v-html="detailContent"></view>
</scroll-view>
<!-- 底部确认按钮 -->
<view class="flex-none p-[32rpx] border-t border-[#eee] bg-white">
<button
class="w-full h-[88rpx] leading-[88rpx] bg-[#A67939] text-white text-[32rpx] rounded-[44rpx] active:opacity-90"
@tap="detailVisible = false"
>
我已阅读
</button>
</view>
</view>
</nut-popup>
</template>
<script setup>
import { ref } from 'vue'
import { USER_AGREEMENT, PRIVACY_POLICY } from '@/constants/privacy'
import Taro from '@tarojs/taro'
const props = defineProps({
visible: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['update:visible', 'agree', 'disagree'])
// 协议详情控制
const detailVisible = ref(false)
const detailTitle = ref('')
const detailContent = ref('')
/**
* @description 显示协议内容
* @param {string} type - 协议类型 'user' | 'privacy'
*/
const showAgreement = (type) => {
detailTitle.value = type === 'user' ? '用户服务协议' : '隐私政策'
detailContent.value = type === 'user' ? USER_AGREEMENT : PRIVACY_POLICY
detailVisible.value = true
}
/**
* @description 处理不同意操作
*/
const handleDisagree = () => {
emit('disagree')
}
/**
* @description 处理同意操作
*/
const handleAgree = () => {
emit('agree')
emit('update:visible', false)
}
</script>