支付宝小程序 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	""	否	容器类名