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

2020-09-18 11:19 更新

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

扫码体验

示例代码

{
   "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,
   });
 },
});

属性

属性 类型 默认值 描述
fixed Boolean false 需要常驻页面底部。可选值:true、false。
related Boolean true 是否需要勾选复选框。可选值:true、false。
agreeBth Object {"title":"", "subtitle":"", "type":"primary", "data":1, "checked":false } 同意按钮配置。
cancelBtn Object {"title":"", "subtitle":"", "type":"default", "data":2 } 取消按钮配置。
capsuleSize String medium 胶囊按钮大小。可选值:large、medium、small。
shape String default 按钮形状。可选值:default, capsule。
capsuleMinWidth Boolean false 是否启用胶囊按钮最小宽度。可选值:true、false。
hasDesc Boolean false 是否有协议相关的描述信息。可选值:true、false。
onSelect EventHandle - 点击按钮事件。
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号