美文网首页
uniapp中微信小程序隐私授权组件

uniapp中微信小程序隐私授权组件

作者: 一颗得道的仙丹 | 来源:发表于2023-11-02 09:24 被阅读0次

    代码可以复制直接使用
    使用了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>
    

    相关文章

      网友评论

          本文标题:uniapp中微信小程序隐私授权组件

          本文链接:https://www.haomeiwen.com/subject/untnidtx.html