book-hi/components/privacy-authorize-popup.vue

<template>
    <u-popup
        v-model="visible"
        mode="center"
        border-radius="20"
        width="620rpx"
        :mask-close-able="false"
        :z-index="privacyZIndex"
    >
        <view class="privacy-modal">
            <view class="privacy-modal__title">隐私保护提示</view>
            <view class="privacy-modal__desc">
                在使用相关功能前，请你阅读并同意
                <text class="privacy-modal__link" @click="openPrivacyContract">《隐私保护指引》</text>
                。我们将严格按照指引处理你的个人信息。
            </view>
            <view class="privacy-modal__footer">
                <button class="privacy-modal__btn privacy-modal__btn--cancel" @click="handleDisagree">拒绝</button>
                <button
                    id="agree-privacy-btn"
                    class="privacy-modal__btn privacy-modal__btn--confirm"
                    open-type="agreePrivacyAuthorization"
                    @agreeprivacyauthorization="handleAgree"
                >
                    同意
                </button>
            </view>
        </view>
    </u-popup>
</template>

<script>
import {
    clearPrivacyPopupFlag,
    clearPrivacyResolve,
    getPrivacyResolve,
} from '@/utils/policy-consent-manager.js'
import { PRIVACY_POPUP_Z_INDEX } from '@/utils/policy-config.js'

export default {
    data() {
        return {
            visible: false,
            privacyZIndex: PRIVACY_POPUP_Z_INDEX,
        }
    },
    methods: {
        open() {
            this.visible = true
        },
        close() {
            this.visible = false
            clearPrivacyPopupFlag()
        },
        openPrivacyContract() {
            // #ifdef MP-WEIXIN
            if (typeof wx !== 'undefined' && wx.openPrivacyContract) {
                wx.openPrivacyContract({
                    fail: () => {
                        uni.$u.toast('暂无法打开隐私指引')
                    },
                })
            }
            // #endif
        },
        handleAgree() {
            const resolve = getPrivacyResolve()
            if (resolve) {
                resolve({ buttonId: 'agree-privacy-btn', event: 'agree' })
            }
            clearPrivacyResolve()
            this.close()
        },
        handleDisagree() {
            const resolve = getPrivacyResolve()
            if (resolve) {
                resolve({ event: 'disagree' })
            }
            clearPrivacyResolve()
            this.close()
        },
    },
}
</script>

<style lang="scss" scoped>
.privacy-modal {
    padding: 40rpx 36rpx 32rpx;
    background: #fff;

    &__title {
        font-size: 34rpx;
        font-weight: 600;
        color: #333;
        text-align: center;
        margin-bottom: 24rpx;
    }

    &__desc {
        font-size: 26rpx;
        color: #666;
        line-height: 1.7;
        margin-bottom: 32rpx;
    }

    &__link {
        color: #38c148;
    }

    &__footer {
        display: flex;
        gap: 20rpx;
    }

    &__btn {
        flex: 1;
        height: 80rpx;
        line-height: 80rpx;
        font-size: 28rpx;
        border-radius: 10rpx;
        border: none;
        margin: 0;
        padding: 0;

        &::after {
            border: none;
        }

        &--cancel {
            background: #f1f1f1;
            color: #666;
        }

        &--confirm {
            background: #38c148;
            color: #fff;
        }
    }
}
</style>