代码可以复制直接使用
使用了Uview中的u-moda组件
样式可以自定义修改
<template>
<!-- 隐私弹窗 -->
<view class="A">
<u-modal :show="show" title="用户隐私保护提示" :showCancelButton="true">
<view class="padding-xl">
<view>感谢您使用本小程序,您使用本小程序前应当阅井同意</view>
<view class="text-blue" @click="handleOpenPrivacyContract">{{privacyContractName}}</view>
<view>当您点击同意并开始时用产品服务时,即表示你已理解并同息该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入小程序。</view>
</view>
<view slot="confirmButton" class="flex">
<button class="modal-button reject" @click="exitMiniProgram">取消</button>
<button id="agree-btn" class="modal-button agree" open-type="agreePrivacyAuthorization"
@agreeprivacyauthorization="handleAgreePrivacyAuthorization">确认</button>
</view>
</u-modal>
</view>
</template>
<script>
import {
reqIndexList,
} from '@/api/common.js'
export default {
name: "Privacypopup",
data() {
return {
show: false,
resolvePrivacyAuthorization: null,
privacyContractName: '',
};
},
created() {
wx.getPrivacySetting({
success: res => {
console.log(
res
if (res.needAuthorization === false) {
reqIndexList()
}
if (res.needAuthorization) {
// 需要弹出隐私协议
this.show = res.needAuthorization
this.privacyContractName = res.privacyContractName
} else {}
},
fail: () => {},
complete: () => {}
})
},
methods: {
exitMiniProgram() {
wx.showToast({
title: '必须同意后才可以继续使用当前小程序',
icon: 'none'
})
},
// 用户同意隐私协议事件回调
handleAgreePrivacyAuthorization() {
uni.setStorageSync('privacySetting', true)
this.show = false
this.$emit('ok')
},
// 打开隐私协议页面
handleOpenPrivacyContract() {
wx.openPrivacyContract({
success: () => {}, // 打开成功
})
},
}
}
</script>
<style lang="scss">
.text-blue {
color: #07c160;
text-decoration: underline;
}
.agree {
background: #07c160;
color: #fff;
}
.reject {
background: #f4f4f5;
color: #909399;
}
.modal-button {
justify-content: space-between;
width: 244rpx;
height: 80rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 16rpx;
box-sizing: border-box;
border: none;
}
</style>
网友评论