Agreement 协议弹窗 4.4.0

基础用法

<template>
  <view class="container">
    <up-agreement 
      :isAgree="isAgree"
      @confirm="handleAgree"
      url-protocol="/pages/user_agreement/agreement/info?title=用户协议"
      url-privacy="/pages/user_agreement/agreement/info?title=隐私政策"
    />
    
    <!-- 其他页面内容 -->
    <view v-if="isAgree" class="content">
      <text>用户已同意协议，可以正常使用功能</text>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isAgree = ref(0); // 0表示未同意，1表示已同意

const handleAgree = (status) => {
  isAgree.value = status;
  console.log('用户已同意协议');
  // 可以在这里执行用户同意后的逻辑
};
</script>

自定义内容插槽用法

<template>
  <view class="container">
    <up-agreement 
      :isAgree="isAgree"
      @confirm="handleAgree"
    >
      <template #default>
        <view class="custom-content">
          <text class="title">请仔细阅读并同意以下协议：</text>
          <view class="agreement-item">
            <text>《</text>
            <navigator class="inline-link" :url="urlProtocol">用户服务协议</navigator>
            <text>》</text>
          </view>
          <view class="agreement-item">
            <text>《</text>
            <navigator class="inline-link" :url="urlPrivacy">隐私保护政策</navigator>
            <text>》</text>
          </view>
          <view class="agreement-item">
            <text>《</text>
            <navigator class="inline-link" :url="urlThird">第三方信息共享清单</navigator>
            <text>》</text>
          </view>
        </view>
      </template>
    </up-agreement>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const isAgree = ref(0);
const urlProtocol = ref('/pages/agreement/protocol');
const urlPrivacy = ref('/pages/agreement/privacy');
const urlThird = ref('/pages/agreement/third-party');

const handleAgree = (status) => {
  isAgree.value = status;
  uni.showToast({
    title: '同意协议成功',
    icon: 'success'
  });
};
</script>

<style scoped>
.custom-content {
  padding: 20rpx;
  display: inline-block;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
  display: block;
}

.agreement-item {
  margin-bottom: 20rpx;
  display: inline-block;
}

.inline-link {
  color: #007AFF;
  display: inline-block;
}
</style>

属性说明

属性名	类型	默认值	说明
isAgree	Number	0	协议是否已同意，0-未同意，1-已同意
urlProtocol	String	'/pages/user_agreement/agreement/info?title=用户协议'	用户协议页面路径
urlPrivacy	String	'/pages/user_agreement/agreement/info?title=隐私政策'	隐私政策页面路径

事件说明

事件名	说明	回调参数
confirm	用户点击同意按钮时触发	status(1-已同意)

插槽说明

插槽名	说明
default	自定义协议弹窗内容

注意事项

1. 组件会在 isAgree 为 0 时自动弹出协议弹窗
2. 用户点击"同意并继续"后会自动关闭弹窗并触发 [confirm] 事件
3. 用户点击"取消"按钮时会尝试关闭应用（H5关闭窗口，APP退出应用）
4. 可通过插槽自定义协议内容和样式
5. 建议在用户首次打开应用使用该组件