uni微信小程式隱私協定

<!--
* @author: Jay
* @description: 小程式隱私協定 彈窗
* @createTime: 2023-08-31 10:07:54
 -->
<template>
    <view v-if="showPop">
        <view class="privacy-mask">
            <view class="privacy-wrap">
                <view class="privacy-title">
                    使用者隱私保護提示
                </view>
                <view class="privacy-desc">
                    感謝您使用本小程式，在使用前您應當閱讀井同意
                    <text class="privacy-link" @tap="openPrivacyContract">《使用者隱私保護指引》</text>，
                    當點選同意並繼續時，即表示您已理解並同意該條款內容，該條款將對您產生法律約束力；如您不同意，將無法繼續使用小程式相關功能。
                </view>
                <view class="privacy-button-flex">
                    <button class="privacy-button-btn bg-disagree" @tap="handleDisagree">
                        不同意
                    </button>
                    <button id="agree-btn" class="privacy-button-btn bg-agree" open-type="agreePrivacyAuthorization"
                        @agreeprivacyauthorization="handleAgree">
                        同意並繼續
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showPop: false,
                privacyAuthorization: null,
                privacyResolves: new Set(),
                closeOtherPagePopUpHooks: new Set(),
            }
        },
        mounted() {
            this.init()
            this.curPageShow()
        },
        created() {
            //查詢微信側記錄的使用者是否有待同意的隱私政策資訊
            wx.getPrivacySetting({
                success(res) {
                    console.log('隱私政策資訊', res)
                    // if (res.needAuthorization) {
                    //     //開啟彈窗
                    //     that.popUp()
                    // }
                }
            });
        },
        methods: {
            // 監聽何時需要提示使用者閱讀隱私政策
            init() {
                let that = this;
                if (wx.onNeedPrivacyAuthorization) {
                    wx.onNeedPrivacyAuthorization((resolve) => {
                        if (typeof that.privacyAuthorization === 'function') {
                            that.privacyAuthorization(resolve)
                        }
                    })
                }
            },
            //初始化監聽程式
            curPageShow() {
                this.privacyAuthorization = resolve => {
                    this.privacyResolves.add(resolve)
                    //開啟彈窗
                    this.popUp()
                    // 額外邏輯：當前頁面的隱私彈窗彈起的時候，關掉其他頁面的隱私彈窗
                    this.closeOtherPagePopUp(this.disPopUp)
                }
                this.closeOtherPagePopUpHooks.add(this.disPopUp)
            },
            // 額外邏輯：當前頁面的隱私彈窗彈起的時候，關掉其他頁面的隱私彈窗
            closeOtherPagePopUp(closePopUp) {
                this.closeOtherPagePopUpHooks.forEach(hook => {
                    if (closePopUp !== hook) {
                        hook()
                    }
                })
            },
            //開啟隱私協定
            openPrivacyContract() {
                wx.openPrivacyContract({
                    success(res) {
                        console.log('開啟隱私協定', res);
                    },
                    fail(err) {
                        console.error('開啟隱私協定失敗', err)
                    }
                });
            },
            // 不同意
            handleDisagree() {
                this.privacyResolves.forEach(resolve => {
                    resolve({
                        event: 'disagree',
                    })
                })
                this.privacyResolves.clear()
                //關閉彈窗
                this.disPopUp()
                //退出小程式
                // wx.exitMiniProgram();
            },
            // 同意並繼續
            handleAgree() {
                this.privacyResolves.forEach(resolve => {
                    resolve({
                        event: 'agree',
                        buttonId: 'agree-btn'
                    })
                })
                this.privacyResolves.clear()
                //關閉彈窗
                this.disPopUp()
            },
            //開啟彈窗
            popUp() {
                if (this.showPop === false) {
                    this.showPop = true
                }
            },
            //關閉彈窗
            disPopUp() {
                if (this.showPop === true) {
                    this.showPop = false
                }
            },
        }
    }
</script>

<style lang="scss" scoped>
    .privacy-mask {
        position: fixed;
        z-index: 5000;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .privacy-wrap {
        width: 632rpx;
        padding: 48rpx 30rpx;
        box-sizing: border-box;
        background: #fff;
        border-radius: 16rpx;
    }

    .privacy-title {
        padding: 0rpx 30rpx 40rpx 30rpx;
        font-weight: 700;
        font-size: 36rpx;
        text-align: center;
    }

    .privacy-desc {
        font-size: 30rpx;
        color: #555;
        line-height: 2;
        text-align: left;
        padding: 0 40rpx;
    }

    .privacy-link {
        color: #2f80ed;
    }

    .privacy-button-flex {
        display: flex;
        padding: 20rpx 40rpx;
    }

    .privacy-button-btn {
        color: #FFF;
        font-size: 30rpx;
        font-weight: 500;
        line-height: 100rpx;
        text-align: center;
        height: 100rpx;
        border-radius: 20rpx;
        border: none;
        background: #07c160;
        flex: 1;
        margin-right: 30rpx;
        justify-content: center;
    }

    .privacy-button-btn::after {
        border: none;
    }

    .bg-disagree {
        color: #07c160;
        background: #f2f2f2;
    }

    .bg-agree {
        margin-right: 0rpx;
    }
</style>