支付寶小程序擴展組件 協(xié)議·Terms

需用戶主動操作后，才能開通或激活服務(wù)時；通常包含了用戶授權(quán)協(xié)議詳細說明的跳轉(zhuǎn)入口。

掃碼體驗

示例代碼

{
   "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">《用戶授權(quán)協(xié)議》</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服務(wù)用戶協(xié)議》</navigator>
       ，授權(quán)ETC服務(wù)獲取身份證、收貨地址用于申請ETC，關(guān)注車主服務(wù)生活號獲取審核；
     </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">《用戶授權(quán)協(xié)議》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">捆綁協(xié)議已選中</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">《用戶授權(quán)協(xié)議》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">捆綁協(xié)議未選中</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">《用戶授權(quán)協(xié)議》</navigator>
     </text>
   </view>
 </terms>
 <text class="title">無捆綁協(xié)議</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">《用戶授權(quán)協(xié)議》</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: '同意協(xié)議并開通',
   },
   cancelBtn: {
     title: '暫不開通，僅手動繳費',
   },
   hasDesc: false,
 },
 c2: {
   related: false,
   agreeBtn: {
     title: '同意協(xié)議并開通',
   },
   hasDesc: true,
 },
 c3: {
   related: true,
   agreeBtn: {
     checked: true,
     title: '提交',
   },
 },
 c4: {
   related: true,
   agreeBtn: {
     title: '提交',
   },
 },
 c5: {
   related: false,
   agreeBtn: {
     title: '同意協(xié)議并提交',
   },
 },
 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,
   });
 },
});

屬性