book-hi/components/policy-consent-modal.vue

<template>
    <u-popup
        v-model="visible"
        mode="center"
        border-radius="20"
        width="620rpx"
        :mask-close-able="false"
        :z-index="policyZIndex"
    >
        <view class="policy-modal">
            <view class="policy-modal__title">服务协议与隐私政策</view>
            <view class="policy-modal__desc">
                请你务必审慎阅读、充分理解相关协议。当你点击同意并开始使用本产品服务时，即表示你已阅读并同意下列条款。
            </view>
            <view class="policy-modal__links">
                <text>我已阅读并同意</text>
                <text class="policy-modal__link" @click.stop="openArticle('userAgreement')">《用户协议》</text>
                <text>和</text>
                <text class="policy-modal__link" @click.stop="openArticle('privacyPolicy')">《隐私政策》</text>
            </view>
            <u-checkbox v-model="checked" shape="circle" active-color="#38C148" class="policy-modal__checkbox">
                <text class="policy-modal__checkbox-text">我已阅读并同意上述协议</text>
            </u-checkbox>
            <view class="policy-modal__footer">
                <button class="policy-modal__btn policy-modal__btn--cancel" @click="handleDisagree">不同意</button>
                <button class="policy-modal__btn policy-modal__btn--confirm" @click="handleAgree">同意并继续</button>
            </view>
        </view>
    </u-popup>
</template>

<script>
import { ARTICLE_CODE, ARTICLE_TITLE, POLICY_POPUP_Z_INDEX } from '@/utils/policy-config.js'

export default {
    data() {
        return {
            visible: false,
            checked: false,
            policyZIndex: POLICY_POPUP_Z_INDEX,
        }
    },
    methods: {
        open() {
            this.checked = false
            this.visible = true
        },
        close() {
            this.visible = false
        },
        openArticle(type) {
            const code = ARTICLE_CODE[type] || ARTICLE_CODE.orderAgreement
            const title = ARTICLE_TITLE[type] || '协议'
            uni.navigateTo({
                url: `/pages-home/pages/user-agreement?code=${code}&title=${encodeURIComponent(title)}`,
            })
        },
        handleAgree() {
            if (!this.checked) {
                uni.$u.toast('请先阅读并勾选同意协议')
                return
            }
            this.$emit('accepted')
            this.close()
        },
        handleDisagree() {
            // #ifdef MP-WEIXIN
            if (typeof wx !== 'undefined' && wx.exitMiniProgram) {
                wx.exitMiniProgram()
                return
            }
            // #endif
            // #ifdef MP-ALIPAY
            if (typeof my !== 'undefined' && my.exitMiniProgram) {
                my.exitMiniProgram()
                return
            }
            // #endif
            uni.$u.toast('需同意协议后方可使用')
        },
    },
}
</script>

<style lang="scss" scoped>
.policy-modal {
    padding: 40rpx 50rpx;
    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: 24rpx;
    }

    &__links {
        font-size: 26rpx;
        color: #666;
        line-height: 1.8;
        margin-bottom: 20rpx;
    }

    &__link {
        color: #38c148;
    }

    &__checkbox {
        margin-bottom: 32rpx;
    }

    &__checkbox-text {
        font-size: 26rpx;
        color: #333;
    }

    &__footer {
        display: flex;
        gap: 20rpx;
        margin-top: 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>