Terms

2023-03-28 12:11

You can use the terms component when users must agree with terms before using or activating the service. Normally a link to the terms is provided for user's reference.

Sample code

See the sample codes in different languages:

.json

copy

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

.axml

copy

<view>
 <terms onSelect="onSelect" related="{{c1.related}}" hasDesc="{{c1.hasDesc}}" agreeBtn="{{c1.agreeBtn}}" cancelBtn="{{c1.cancelBtn}}">
   <view class="text" slot="header">
     <text>
       Agree
       <navigator class="link" url="https://example.com">user authorization terms</navigator>
     </text>
   </view>
 </terms>
 <text class="title">double button</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>
       check
       <navigator class="link" url="https://example.com">ETC Service User Terms</navigator>
       Authorize ETC service to obtain ID card and delivery address for ETC application. Pay attention to the owner's service life number for approval；
     </text>
   </view>
 </terms>
 <text class="title">Title with dditional description</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>
       agree
       <navigator class="link" url="https://example.com">User Authorization Terms</navigator>
     </text>
   </view>
 </terms>
 <text class="title">Binding protocol is selected</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>
       agree
       <navigator class="link" url="https://example.com">User Authorization Terms</navigator>
     </text>
   </view>
 </terms>
 <text class="title">Binding protocol is not selected</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>
       agree
       <navigator class="link" url="https://example.com">User Authorization Terms</navigator>
     </text>
   </view>
 </terms>
 <text class="title">without binding protocol</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>
       agree
       <navigator class="link" url="https://example.com">User Authorization Terms</navigator>
     </text>
   </view>
 </terms>
 <text class="title">bottom suction</text>
</view>

.acss

copy

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

.js

copy

const cfg = {
 c1: {
   related: false,
   agreeBtn: {
     title: 'agree the term and open',
   },
   cancelBtn: {
     title: 'Not open temporarily, manual payment',
   },
   hasDesc: false,
 },
 c2: {
   related: false,
   agreeBtn: {
     title: 'agree the term and open',
   },
   hasDesc: true,
 },
 c3: {
   related: true,
   agreeBtn: {
     checked: true,
     title: 'submit',
   },
 },
 c4: {
   related: true,
   agreeBtn: {
     title: 'submit',
   },
 },
 c5: {
   related: false,
   agreeBtn: {
     title: 'agree the term and submit',
   },
 },
 c6: {
   related: true,
   fixed: true,
   agreeBtn: {
     checked: true,
     title: 'submit',
   },
 },
};
Page({
 data: cfg,
 onLoad() {
 },
 onSelect(e) {
   const selectedData = e.currentTarget.dataset.name || '';
   selectedData && my.alert({
     title: 'Terms Btns',
     content: selectedData,
   });
 },
});

Parameters

Property	Type	Description
fixed	Boolean	An indicator of whether to display the terms at the bottom of the page. The default value is `false`.
related	Boolean	An indicator of whether the user needs to select the checkbox. The default value is `true`.
agreeBth	Object	The button that users can click to agree with the terms. The default value is `{"title":"", "subtitle":"", "type":"primary", "data":1, "checked":false }`.
cancelBtn	Object	The button that users can click to not agree with the terms. The default value is `{"title":"", "subtitle":"", "type":"default", "data":2 }`.
capsuleSize	String	Capsule button size. Valid values are: `large` `medium` `small` The default value is `medium`.
shape	String	Button shape. Valid values are: `default` `capsule` The default value is `default`.
capsuleMinWidth	Boolean	An indicator of whether to use the minimum width for the capsule button. The default value is `false`.
hasDesc	Boolean	An indicator of whether to display the description about the terms. The default value is `false`.
onSelect	EventHandle	The event that is triggered when users click the agree button.