151 lines
3.2 KiB
Vue
151 lines
3.2 KiB
Vue
<script setup>
|
||
const showPrivacyModal = ref(true)
|
||
|
||
function openPage(url) {
|
||
uni.navigateTo({ url })
|
||
}
|
||
|
||
function acceptPrivacy() {
|
||
uni.setStorageSync('privacyAccepted', true)
|
||
showPrivacyModal.value = false
|
||
}
|
||
|
||
function refusePrivacy() {
|
||
uni.showModal({
|
||
title: '确认提示',
|
||
content: '您点击同意并继续视为您已同意上述协议的全部内容。',
|
||
confirmText: '同意并继续',
|
||
cancelText: '退出',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
acceptPrivacy()
|
||
}
|
||
else {
|
||
const platform = uni.getSystemInfoSync().platform
|
||
if (platform === 'android') {
|
||
plus.runtime.quit()
|
||
}
|
||
else if (platform === 'ios') {
|
||
plus.runtime.launchApplication({ action: 'QUIT' })
|
||
}
|
||
}
|
||
},
|
||
})
|
||
}
|
||
|
||
// 检查隐私协议是否已经同意
|
||
onMounted(() => {
|
||
const accepted = uni.getStorageSync('privacyAccepted')
|
||
if (accepted) {
|
||
showPrivacyModal.value = false
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<view v-if="showPrivacyModal" class="privacy-modal">
|
||
<view class="modal-mask" />
|
||
<view class="modal-content">
|
||
<view class="modal-title">
|
||
用户协议和隐私政策
|
||
</view>
|
||
<view class="modal-message">
|
||
感谢您使用全能查APP! 我们非常重视您的隐私保护和个人信息保护，在您使用全能查APP前，请您仔细阅读、充分理解
|
||
<text class="link" @click="openPage('/pages/userAgreement')">
|
||
《用户协议》
|
||
</text>
|
||
和
|
||
<text class="link" @click="openPage('/pages/privacyPolicy')">
|
||
《隐私政策》
|
||
</text>
|
||
的各项条款。如果您同意，请点击下方按钮开始接受我们的服务。
|
||
</view>
|
||
<view class="modal-buttons">
|
||
<view class="button refuse" @click="refusePrivacy">
|
||
退出应用
|
||
</view>
|
||
<view class="button accept" @click="acceptPrivacy">
|
||
同意并继续
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.privacy-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 1000;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.modal-mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
.modal-content {
|
||
background: #fff;
|
||
padding: 20px;
|
||
border-radius: 10px;
|
||
width: 80%;
|
||
max-width: 320px;
|
||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||
z-index:1001;
|
||
}
|
||
.modal-title {
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
.modal-message {
|
||
font-size: 14px;
|
||
line-height: 1.5;
|
||
color: #333;
|
||
margin-bottom: 20px;
|
||
}
|
||
.link {
|
||
color: #007aff;
|
||
text-decoration: underline;
|
||
cursor: pointer;
|
||
}
|
||
.modal-buttons {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
.button {
|
||
flex: 1;
|
||
padding: 10px 0;
|
||
margin: 0 5px;
|
||
border: none;
|
||
border-radius: 5px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
}
|
||
.button.accept {
|
||
background: #007aff;
|
||
color: #fff;
|
||
}
|
||
.button.accept:active{
|
||
background: #016ee2;
|
||
color: #fff;
|
||
}
|
||
.button.refuse {
|
||
background: #f0f0f0;
|
||
color: #333;
|
||
}
|
||
.button.refuse:active {
|
||
background: #c6c6c6;
|
||
color: #333;
|
||
}
|
||
</style>
|