197 lines
4.0 KiB
Vue
197 lines
4.0 KiB
Vue
<template>
|
||
<view v-if="showPrivacy" :class="privacyClass">
|
||
<view :class="contentClass">
|
||
<view class="title">用户隐私保护指引</view>
|
||
<view class="des">
|
||
感谢您选择使用预约商家端小程序，我们非常重视您的个人信息安全和隐私保护。使用我们的产品前，请您仔细阅读“
|
||
<text class="link" @tap="openPrivacyContract">{{privacyContractName}} </text>”，
|
||
如您同意此隐私保护指引,请点击同意按钮,开始使用此小程序,我们将尽全力保护您的个人信息及合法权益，感谢您的信任！<br />
|
||
</view>
|
||
<view class="btns">
|
||
<button class="item reject" @click="exitMiniProgram">拒绝</button>
|
||
<button id="agree-btn" class="item agree" open-type="agreePrivacyAuthorization"
|
||
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">同意</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'PrivacyPopup',
|
||
data() {
|
||
return {
|
||
isRead: false,
|
||
showPrivacy: false,
|
||
privacyContractName: '',
|
||
resolvePrivacyAuthorization: null,
|
||
};
|
||
},
|
||
props: {
|
||
position: {
|
||
type: String,
|
||
default: 'center'
|
||
}
|
||
},
|
||
computed: {
|
||
privacyClass() {
|
||
return this.position === 'bottom' ? 'privacy privacy-bottom' : 'privacy';
|
||
},
|
||
contentClass() {
|
||
return this.position === 'bottom' ? 'content content-bottom' : 'content';
|
||
}
|
||
},
|
||
mounted() {
|
||
if (uni.onNeedPrivacyAuthorization) {
|
||
uni.onNeedPrivacyAuthorization((resolve) => {
|
||
this.resolvePrivacyAuthorization = resolve;
|
||
});
|
||
}
|
||
|
||
if (uni.getPrivacySetting) {
|
||
uni.getPrivacySetting({
|
||
success: (res) => {
|
||
if (res.needAuthorization) {
|
||
this.privacyContractName = res.privacyContractName;
|
||
this.showPrivacy = true;
|
||
} else {
|
||
this.showPrivacy = false;
|
||
}
|
||
},
|
||
});
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
openPrivacyContract() {
|
||
uni.openPrivacyContract({
|
||
success: () => {
|
||
this.isRead = true;
|
||
},
|
||
fail: () => {
|
||
uni.showToast({
|
||
title: '遇到错误',
|
||
icon: 'error',
|
||
});
|
||
},
|
||
});
|
||
},
|
||
exitMiniProgram() {
|
||
// uni.navigateBack();
|
||
wx.exitMiniProgram();
|
||
|
||
},
|
||
handleAgreePrivacyAuthorization() {
|
||
this.showPrivacy = false;
|
||
this.$emit('allowPrivacy');
|
||
if (typeof this.resolvePrivacyAuthorization === 'function') {
|
||
this.resolvePrivacyAuthorization({
|
||
buttonId: 'agree-btn',
|
||
event: 'agree',
|
||
});
|
||
}
|
||
},
|
||
closePrivacy() {
|
||
this.showPrivacy = false;
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.privacy {
|
||
position: fixed;
|
||
top: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
left: 0;
|
||
background: rgba(0, 0, 0, .5);
|
||
z-index: 9999999;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.privacy-bottom {
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.content {
|
||
width: 632rpx;
|
||
padding: 48rpx;
|
||
box-sizing: border-box;
|
||
background: #fff;
|
||
border-radius: 16rpx;
|
||
}
|
||
|
||
.content-bottom {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 96%;
|
||
padding: 36rpx;
|
||
padding-bottom: constant(safe-area-inset-bottom);
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
border-radius: 16rpx 16rpx 0 0;
|
||
}
|
||
|
||
.content .title {
|
||
text-align: center;
|
||
color: #333;
|
||
font-weight: bold;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.content .des {
|
||
font-size: 26rpx;
|
||
color: #666;
|
||
margin-top: 40rpx;
|
||
text-align: justify;
|
||
line-height: 1.6;
|
||
}
|
||
|
||
.content .des .link {
|
||
color: #1989ff;
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.btns {
|
||
margin-top: 48rpx;
|
||
margin-bottom: 12rpx;
|
||
display: flex;
|
||
}
|
||
|
||
.btns .item {
|
||
width: 200rpx;
|
||
height: 72rpx;
|
||
overflow: visible;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
justify-content: center;
|
||
/* border-radius: 16rpx; */
|
||
box-sizing: border-box;
|
||
border: none !important;
|
||
}
|
||
|
||
.btns .reject {
|
||
background: #f4f4f5;
|
||
color: #1989ff;
|
||
font-size: 14px;
|
||
background: #edf5fe;
|
||
font-weight: 300;
|
||
margin-right: 16rpx;
|
||
}
|
||
|
||
.btns .agree {
|
||
width: 200rpx;
|
||
background: #1989ff;
|
||
color: #fff;
|
||
font-size: 16px;
|
||
|
||
}
|
||
|
||
.privacy-bottom .btns .agree {
|
||
width: 440rpx;
|
||
|
||
}
|
||
</style> |