更新记录

1.0.0（2025-08-27） 下载此版本

初版

平台兼容性

云端兼容性

uni-app(4.07)

x-protocol-confirm 组件使用说明

概述

x-protocol-confirm 是一个用于显示用户协议和隐私政策确认弹窗的组件。

Props 属性

Events 事件

Slots 插槽

使用自定义插槽

<x-protocol-confirm v-model="showProtocol">
  <view class="custom-content">
    <text>这里是自定义的协议内容</text>
    <text>可以根据需要修改文案</text>
  </view>
</x-protocol-confirm>

样式自定义

通过 Props 自定义

<x-protocol-confirm
  v-model="showProtocol"
  width="700rpx"
  height="500rpx"
  radius="16rpx"
  padding="40rpx"
  bg-color="#f8f9fa"
  :custom-style="{ boxShadow: '0 10rpx 30rpx rgba(0,0,0,0.15)' }"
/>

通过 CSS 覆盖样式

// 修改按钮样式
.x-protocol-confirm .btn .accept {
  background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
}

.x-protocol-confirm .btn .reject {
  background: #e9ecef;
  color: #495057;
}

完整示例

<template>
    <view class="page">
        <button @click="showProtocol = true">显示协议确认</button>

        <x-protocol-confirm v-model="showProtocol" :custom-style="customStyle" @accept="handleAccept" @reject="handleReject" @user-agreement="viewUserAgreement" @privacy-policy="viewPrivacyPolicy">
            <!-- 可选：使用自定义内容 -->
            <!-- <view class="custom-protocol">
                <text class="title-text">欢迎使用我们的服务</text>
                <text class="content-text">
                    请仔细阅读并同意我们的
                    <text class="link" @click="viewUserAgreement">用户协议</text>
                    和
                    <text class="link" @click="viewPrivacyPolicy">隐私政策</text>
                </text>
            </view> -->
        </x-protocol-confirm>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                showProtocol: false,
                customStyle: {
                    boxShadow: '0 16rpx 48rpx rgba(0, 0, 0, 0.15)'
                }
            }
        },
        methods: {
            handleAccept() {
                // 用户同意协议后的处理逻辑
                uni.setStorageSync('protocolAccepted', true)
                uni.showToast({
                    title: '感谢您的同意',
                    icon: 'success'
                })
            },

            handleReject() {
                // 用户拒绝协议后的处理逻辑
                uni.showToast({
                    title: '您已拒绝服务协议',
                    icon: 'none'
                })
            },

            viewUserAgreement() {
                // 跳转到用户协议页面
                uni.navigateTo({
                    url: '/pages/legal/user-agreement'
                })
            },

            viewPrivacyPolicy() {
                // 跳转到隐私政策页面
                uni.navigateTo({
                    url: '/pages/legal/privacy-policy'
                })
            }
        }
    }
</script>

注意事项

1. 链接点击事件需要在父组件中处理具体的跳转逻辑