支付寶小程序 UI·歷史記錄-繳款記錄

本示例展示因交通違法而產(chǎn)生的繳費(fèi)記錄，主要包含繳款金額、繳款狀態(tài)、繳款車牌號、繳款時間。

使用說明

本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。

更多詳情請參見 代碼市場。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

{
  "usingComponents": {
    "move-demo": "mashi-open-snippets/es/traffic-offence-record/index"
  }}

調(diào)用

分別在 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;
}

屬性