uniapp隐私协议组件

这里用到了uv-ui的组件：uv-popup
组件弹出时，隐藏底部tabbar，组件关闭时，底部tabbat显示
用户隐私协议这里配置可跳转页面
点击允许时获取用户手机号，并通过getPhoneNumber事件向外传递参数

<template>
    <view>
        <uv-popup ref="popup" mode="bottom" :safeAreaInsetBottom="true" :closeOnClickOverlay="false">
            <view class="chunk">
                <view class="title">为给你提供更好的服务</view>
                <view class="content">
                    允许我们在必要场景下，合理使用你的个人信息，并充分保障你的合法权利。请你在使用前仔细查阅以下协议条款，点击"允许"即表示你已阅读并同意对应的协议内容。
                </view>
                <view class="content">
                    <text class="text" @click="toUserPage">《用户隐私协议》</text>
                    <text class="text" @click="toPrivacyPage">《隐私协议政策》</text>
                </view>
                <view class="btn_sure" @click="btnSure">
                    <text>允许</text>
                    <button v-if="!IsChange" class="btn" open-type="getPhoneNumber"
                        @getphonenumber="getPhoneNumber">进入</button>
                </view>
                <view class="btn_reject" @click="btnReject">
                    拒绝
                </view>
            </view>
        </uv-popup>
    </view>
</template>

<script>
    export default {
        components: {},
        props: {
            IsChange: {
                type: Boolean,
                defaule: false,
            }
        },
        data() {
            return {};
        },
        watch: {},
        methods: {
            open() {
                uni.hideTabBar();
                this.$refs.popup.open();
            },
            toUserPage() {
                uni.navigateTo({
                    url: "/pages/note/note?type=user_agreement&title=用户协议"
                })
            },
            toPrivacyPage() {
                uni.navigateTo({
                    url: "/pages/note/note?type=privacy_policy&title=隐私条款"
                })
            },
            btnSure() {
                const app = getApp()
                app.globalData.privacy = true;
            },
            getPhoneNumber(e){
                if(e.detail.code){
                   this.$refs.popup.close();
                   uni.showTabBar();
                    this.$emit('getPhoneNumber', e)
                }
            },
            btnReject() {
                const app = getApp()
                app.globalData.privacy = false;
                this.$refs.popup.close();
                uni.showTabBar();
            },
        }
    }
</script>

<style scoped>
    .chunk {
        height: 500rpx;
        padding: 30rpx;
        background-color: #fff;
        border-radius: 10rpx;
    }

    .title {
        font-size: 35rpx;
        font-weight: bold;
    }

    .content {
        margin-top: 10rpx;
        font-size: 30rpx;
    }

    .text {
        color: #2d8cf0;
    }

    .btn_sure {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        background-color: #e8f2fe;
        color: #2b5c98;
        text-align: center;
        paddign: 10rpx;
        margin-top: 20rpx;
        font-size: 30rpx;
        position: relative;
    }

    .btn_reject {
        width: 100%;
        height: 60rpx;
        line-height: 60rpx;
        color: #596d8d;
        text-align: center;
        paddign: 10rpx;
        margin-top: 30rpx;
        font-size: 30rpx;
    }
    .btn {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
        opacity: 0;
    }
</style>