You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
148 lines
3.8 KiB
148 lines
3.8 KiB
<template>
|
|
<!-- 用户隐私保护弹窗 -->
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<view v-if="storeInfo" class="privacy-popup">
|
|
<u-popup v-model="showPrivacy" mode="bottom" border-radius="20" :safe-area-inset-bottom="true" :mask-close-able="false"
|
|
:mask-custom-style="{ background: 'rgba(0, 0, 0, 0.7)' }">
|
|
<view class="privacy-container">
|
|
<view class="title">用户隐私保护提示</view>
|
|
<view class="content">
|
|
<text>感谢您使用{{ storeInfo.store_name }}，同意并继续表示您已阅读并同意</text>
|
|
<text class="col-m" @click="handlePrivacyContract()">《隐私政策》</text>
|
|
<text>，否则将无法正常使用相关功能。</text>
|
|
</view>
|
|
<view class="actions">
|
|
<view class="btn-item btn-grey" @click="handleDisagree()">
|
|
<text>不同意</text>
|
|
</view>
|
|
<button class="btn-item btn-main btn-normal" open-type="agreePrivacyAuthorization"
|
|
@agreeprivacyauthorization="handleAgreePrivacyAuthorization()">
|
|
<text>同意并继续</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
</view>
|
|
<!-- #endif -->
|
|
</template>
|
|
|
|
<script>
|
|
import StoreModel from '@/common/model/Store'
|
|
|
|
export default {
|
|
props: {
|
|
// 弹出隐私窗口时是否隐藏tabbar
|
|
hideTabBar: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
|
|
data() {
|
|
return {
|
|
// 隐私协议弹窗
|
|
showPrivacy: false,
|
|
// 商城基本信息
|
|
storeInfo: undefined,
|
|
}
|
|
},
|
|
|
|
created() {
|
|
// 获取商城基本信息
|
|
this.getStoreInfo()
|
|
// #ifdef MP-WEIXIN
|
|
// 弹出隐私协议 (微信小程序端)
|
|
this.needAuthorization()
|
|
// #endif
|
|
},
|
|
|
|
methods: {
|
|
|
|
// 获取商城基本信息
|
|
getStoreInfo() {
|
|
StoreModel.storeInfo().then(storeInfo => this.storeInfo = storeInfo)
|
|
},
|
|
|
|
// 弹出隐私协议 (微信小程序端)
|
|
needAuthorization() {
|
|
const app = this
|
|
uni.getPrivacySetting({
|
|
success({ needAuthorization, privacyContractName }) {
|
|
console.info('getPrivacySetting', { needAuthorization, privacyContractName })
|
|
// 需要弹出隐私协议
|
|
if (needAuthorization) {
|
|
app.showPrivacy = true
|
|
app.hideTabBar && uni.hideTabBar()
|
|
}
|
|
}
|
|
})
|
|
},
|
|
|
|
// 查看隐私协议内容
|
|
handlePrivacyContract() {
|
|
uni.openPrivacyContract()
|
|
},
|
|
|
|
// 用户同意隐私协议事件回调
|
|
handleAgreePrivacyAuthorization() {
|
|
// 用户点击了同意，才可以调用隐私接口和组件，例如：
|
|
// wx.getUserProfile()
|
|
// wx.chooseImage()
|
|
// wx.saveImageToPhotosAlbum()
|
|
// wx.setClipboardData()
|
|
|
|
this.hideTabBar && uni.showTabBar()
|
|
this.showPrivacy = false
|
|
},
|
|
|
|
// 用户不同意隐私协议
|
|
handleDisagree() {
|
|
this.$toast('很抱歉，请先同意后可继续使用~', 2000)
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.privacy-container {
|
|
padding: 40rpx 60rpx;
|
|
|
|
.title {
|
|
text-align: center;
|
|
margin-bottom: 40rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.content {
|
|
margin-bottom: 50rpx;
|
|
font-size: 28rpx;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.actions {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0 20rpx;
|
|
|
|
.btn-item {
|
|
width: 280rpx;
|
|
height: 80rpx;
|
|
line-height: 80rpx;
|
|
border-radius: 20rpx;
|
|
text-align: center;
|
|
|
|
&.btn-grey {
|
|
background: #f8f8f8;
|
|
color: #000;
|
|
}
|
|
|
|
&.btn-main {
|
|
background: linear-gradient(to right, $main-bg, $main-bg2);
|
|
color: $main-text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |