支付宝小程序 UI·历史记录-缴款记录
本示例展示因交通违法而产生的缴费记录，主要包含缴款金额、缴款状态、缴款车牌号、缴款时间。
使用说明
本示例为纯客户端代码，可直接在模拟器和在真机预览。
更多详情请参见 代码市场。
使用指南
安装
在 IDE 安装以下依赖
npm i mashi-open-snippets --save注册
在 JSON 中引入组件路径
{
"usingComponents": {
"move-demo": "mashi-open-snippets/es/traffic-offence-record/index"
}}调用
分别在 AXML、JS、ACSS 中输入以下代码
<view class="traffic-offence-record-page">
<view>
<traffic-offence-record data="{{item1}}" onDetail="onClickDetail"/>
</view>
<view>
<traffic-offence-record data="{{item1}}" onDetail="onClickDetail"/>
</view>
<view>
<traffic-offence-record data="{{item1}}" onDetail="onClickDetail"/>
</view>
</view>Page({
data: {
item1: {
title: '缴款记录',
titleIconUrl: 'https://gw.alipayobjects.com/mdn/industry_l/afts/img/A*c1YIRJk2AvcAAAAAAAAAAABkARQnAQ',
value: '826.00',
valueUnit: '￥',
status: '缴款成功',
statusColor: '#FF6010',
licensePlate: '冀A33697',
dateTime: '2018-06-03 10:00:00',
showDetail: true
}
},
onLoad() { },
onClickDetail(val) {
console.log('click:', val);
}
});.traffic-offence-record-page {
background-color:rgb(242, 242, 242);
padding:16px 12px;
height:100vh;
box-sizing:border-box;
}
.traffic-offence-record-page > view {
margin-bottom:24rpx;
}属性
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| data | Object | {} | 否 | 接收一个对象，其中 statusColor 属性用来控制状态的文案颜色如果不传则是默认的黑色，showDetail 属性如果为 false 则不显示 查看详情 > 按钮。 |
| onDetail | Function | () => {} | 否 | 接收一个函数，返回点击事件 |
| containerClassName | string | "" | 否 | 容器类名 |