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