支付宝小程序 UI·历史记录-出行消费
本示例展示车辆通过 ETC 的交易记录，可实时查看 ETC 历史交易时间、交易地点、交易金额记录。
使用说明
本示例为纯客户端代码，可直接在模拟器和在真机预览。
更多详情请参见 代码市场。
使用指南
安装
在 IDE 安装以下依赖
npm i mashi-open-snippets --save注册
在 JSON 中引入组件路径
{
"usingComponents": {
"move-demo": "mashi-open-snippets/transaction-record/es/index"
}}调用
分别在 AXML、JS、ACSS 中输入以下代码
<view class="transaction-record-page">
<view>
<transaction-record data="{{item1}}"/>
</view>
<view>
<transaction-record data="{{item2}}"/>
</view>
<view>
<transaction-record data="{{item3}}"/>
</view>
</view>Page({
data: {
item1: {
title: '10月3日 11:40-13:40',
value: '40.00元',
inAddress: '杭州东',
outAddress: '宁波高速公路收费站',
status: '待支付',
statusColor: '#FF6010'
},
item2: {
title: '10月3日 11:40-13:40',
value: '40.00元',
inAddress: '杭州东',
outAddress: '宁波高速公路收费站',
status: '支付成功',
statusColor: ''
},
item3: {
title: '10月3日 11:40-13:40',
value: '40.00元',
inAddress: '杭州东',
outAddress: '宁波高速公路收费站',
status: '支付成功',
statusColor: ''
}
},
onLoad() { },
});.transaction-record-page {
background-color:rgb(248, 248, 248);
padding:16px 12px;
height:100vh;
box-sizing:border-box;
}
.transaction-record-page > view{
margin-bottom:24rpx;
}属性
| 属性 | 类型 | 默认值 | 必填 | 描述 |
|---|---|---|---|---|
| data | Object | {} | 否 | 接收一个对象，其中statusColor属性用来控制状态的文案颜色如果不传则是默认的灰色。 |
| containerClassName | string | "" | 否 | 容器类名 |