179 lines
3.7 KiB
Vue
179 lines
3.7 KiB
Vue
<template>
|
||
<view v-if="show" class="privacy-popup">
|
||
<view class="mask"></view>
|
||
<view class="content">
|
||
<view class="title">用户隐私保护指引</view>
|
||
<view class="desc">
|
||
感谢您使用本小程序。在使用前，请您仔细阅读
|
||
<text class="link" @click="openPrivacyContract">{{
|
||
privacyContractName
|
||
}}</text>
|
||
。当您点击“同意”并开始使用产品服务时，即表示您已理解并同意该条款内容，该条款将对您产生法律约束力。如您拒绝，将无法进入小程序。
|
||
</view>
|
||
<view class="btns">
|
||
<button class="btn refuse" @click="handleDisagree">拒绝</button>
|
||
<button
|
||
id="agree-btn"
|
||
class="btn agree"
|
||
open-type="agreePrivacyAuthorization"
|
||
@agreePrivacyAuthorization="handleAgree"
|
||
>
|
||
同意
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted } from "vue";
|
||
import { reportPrivacy } from "@/api/auth.js";
|
||
|
||
const show = ref(false);
|
||
const privacyContractName = ref("《用户隐私保护指引》");
|
||
|
||
// Only for WeChat Mini Program
|
||
// #ifdef MP-WEIXIN
|
||
onMounted(() => {
|
||
if (uni.getPrivacySetting) {
|
||
uni.getPrivacySetting({
|
||
success: (res) => {
|
||
console.log("getPrivacySetting", res);
|
||
if (res.needAuthorization) {
|
||
privacyContractName.value = res.privacyContractName;
|
||
show.value = true;
|
||
} else {
|
||
// Check local storage just in case
|
||
const hasAgreed = uni.getStorageSync("hasAgreedPrivacy");
|
||
if (!hasAgreed) {
|
||
uni.setStorageSync("hasAgreedPrivacy", true);
|
||
}
|
||
}
|
||
},
|
||
fail: () => {},
|
||
});
|
||
}
|
||
});
|
||
// #endif
|
||
|
||
const openPrivacyContract = () => {
|
||
uni.openPrivacyContract({
|
||
success: () => {},
|
||
fail: (err) => {
|
||
console.error("openPrivacyContract fail", err);
|
||
},
|
||
});
|
||
};
|
||
|
||
const handleAgree = async () => {
|
||
// 1. Save to local storage
|
||
uni.setStorageSync("hasAgreedPrivacy", true);
|
||
|
||
// 2. Hide popup
|
||
show.value = false;
|
||
|
||
// 3. Call server API
|
||
try {
|
||
await reportPrivacy();
|
||
} catch (e) {
|
||
console.error("Report privacy failed", e);
|
||
}
|
||
};
|
||
|
||
const handleDisagree = () => {
|
||
// Exit mini program
|
||
// #ifdef MP-WEIXIN
|
||
uni.exitMiniProgram({
|
||
success: () => {
|
||
console.log("Exit success");
|
||
},
|
||
});
|
||
// #endif
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.privacy-popup {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 9999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.mask {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
}
|
||
|
||
.content {
|
||
position: relative;
|
||
width: 600rpx;
|
||
background: #fff;
|
||
border-radius: 24rpx;
|
||
padding: 48rpx 40rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.title {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 32rpx;
|
||
}
|
||
|
||
.desc {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 48rpx;
|
||
text-align: justify;
|
||
|
||
.link {
|
||
color: #576b95;
|
||
display: inline;
|
||
}
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
|
||
.btn {
|
||
width: 240rpx;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
border-radius: 12rpx;
|
||
font-size: 32rpx;
|
||
font-weight: 500;
|
||
margin: 0;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
|
||
&.refuse {
|
||
background: #f2f2f2;
|
||
color: #666;
|
||
}
|
||
|
||
&.agree {
|
||
background: #07c160;
|
||
color: #fff;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|