支付宝小程序扩展组件 协议·Terms

需用户主动操作后，才能开通或激活服务时；通常包含了用户授权协议详细说明的跳转入口。

扫码体验

示例代码

{
   "defaultTitle": "Terms",
   "usingComponents": {
     "terms": "mini-ali-ui/es/terms/index"
   }
}

<view>
 <terms onSelect="onSelect" related="{{c1.related}}" hasDesc="{{c1.hasDesc}}" agreeBtn="{{c1.agreeBtn}}" cancelBtn="{{c1.cancelBtn}}">
   <view class="text" slot="header">
     <text>
       同意
       <navigator class="link" url="https://m.alipay.com">《用户授权协议》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">双按钮</text>
</view>
<view>
 <terms onSelect="onSelect" fixed="{{c2.fixed}}" related="{{c2.related}}" hasDesc="{{c2.hasDesc}}" agreeBtn="{{c2.agreeBtn}}" cancelBtn="{{c2.cancelBtn}}" shape="{{c2.shape}}" capsuleMinWidth="{{c2.capsuleMinWidth}}" capsuleSize="{{c2.capsuleSize}}">
   <view class="text" slot="desc">
     <text>
       查看
       <navigator class="link" url="https://m.alipay.com">《ETC服务用户协议》</navigator>
       ，授权ETC服务获取身份证、收货地址用于申请ETC，关注车主服务生活号获取审核；
     </text>
   </view>
 </terms>
 <text class="title">带辅助描述</text>
</view>
<view>
 <terms onSelect="onSelect" fixed="{{c3.fixed}}" related="{{c3.related}}" hasDesc="{{c3.hasDesc}}" agreeBtn="{{c3.agreeBtn}}" cancelBtn="{{c3.cancelBtn}}">
   <view class="text" slot="header">
     <text>
       同意
       <navigator class="link" url="https://m.alipay.com">《用户授权协议》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">捆绑协议已选中</text>
</view>
<view>
 <terms onSelect="onSelect" fixed="{{c4.fixed}}" related="{{c4.related}}" hasDesc="{{c4.hasDesc}}" agreeBtn="{{c4.agreeBtn}}" cancelBtn="{{c4.cancelBtn}}" shape="{{c4.shape}}" capsuleMinWidth="{{c4.capsuleMinWidth}}" capsuleSize="{{c4.capsuleSize}}">
   <view class="text" slot="header">
     <text>
       同意
       <navigator class="link" url="https://m.alipay.com">《用户授权协议》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">捆绑协议未选中</text>
</view>
<view>
 <terms fixed="{{c5.fixed}}" related="{{c5.related}}" hasDesc="{{c5.hasDesc}}"  agreeBtn="{{c5.agreeBtn}}" cancelBtn="{{c5.cancelBtn}}" shape="{{c5.shape}}" capsuleMinWidth="{{c5.capsuleMinWidth}}" capsuleSize="{{c5.capsuleSize}}">
   <view class="text" slot="header">
     <text>
       同意
       <navigator class="link" url="https://m.alipay.com">《用户授权协议》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">无捆绑协议</text>
</view>
<view style="padding-bottom:30px;">
 <terms fixed="{{c6.fixed}}" related="{{c6.related}}" hasDesc="{{c6.hasDesc}}" agreeBtn="{{c6.agreeBtn}}" cancelBtn="{{c6.cancelBtn}}" shape="{{c6.shape}}" capsuleMinWidth="{{c6.capsuleMinWidth}}" capsuleSize="{{c6.capsuleSize}}">
   <view class="text" slot="header">
     <text>
       同意
       <navigator class="link" url="https://m.alipay.com">《用户授权协议》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">吸底</text>
</view>

.title{
   text-align: center;
   display: block;
   width: 100%;
   margin: 20px 0;
}
page {
   padding: 24px  12px;
}

const cfg = {
 c1: {
   related: false,
   agreeBtn: {
     title: '同意协议并开通',
   },
   cancelBtn: {
     title: '暂不开通，仅手动缴费',
   },
   hasDesc: false,
 },
 c2: {
   related: false,
   agreeBtn: {
     title: '同意协议并开通',
   },
   hasDesc: true,
 },
 c3: {
   related: true,
   agreeBtn: {
     checked: true,
     title: '提交',
   },
 },
 c4: {
   related: true,
   agreeBtn: {
     title: '提交',
   },
 },
 c5: {
   related: false,
   agreeBtn: {
     title: '同意协议并提交',
   },
 },
 c6: {
   related: true,
   fixed: true,
   agreeBtn: {
     checked: true,
     title: '提交',
   },
 },
};
Page({
 data: cfg,
 onLoad() {
 },
 onSelect(e) {
   const selectedData = e.currentTarget.dataset.name || '';
   selectedData && my.alert({
     title: 'Terms Btns',
     content: selectedData,
   });
 },
});

属性