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

2023-11-02  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读