Terms
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
{
"defaultTitle": "Terms",
"usingComponents": {
"terms": "mini-ali-ui/es/terms/index"
}
}
.axml
<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
.title{
text-align: center;
display: block;
width: 100%;
margin: 20px 0;
}
page {
padding: 24px 12px;
}
.js
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 |
related | Boolean | An indicator of whether the user needs to select the checkbox. The default value is |
agreeBth | Object | The button that users can click to agree with the terms. The default value is |
cancelBtn | Object | The button that users can click to not agree with the terms. The default value is |
capsuleSize | String | Capsule button size. Valid values are:
The default value is |
shape | String | Button shape. Valid values are:
The default value is |
capsuleMinWidth | Boolean | An indicator of whether to use the minimum width for the capsule button. The default value is |
hasDesc | Boolean | An indicator of whether to display the description about the terms. The default value is |
onSelect | EventHandle | The event that is triggered when users click the agree button. |