支付宝小程序 UI·历史记录-缴款记录

2020-09-08 16:09 更新

本示例展示因交通违法而产生的缴费记录,主要包含缴款金额、缴款状态、缴款车牌号、缴款时间。

使用说明

本示例为纯客户端代码,可直接在模拟器和在真机预览。

更多详情请参见 代码市场

使用指南

安装

在 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 "" 容器类名
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号