支付寶小程序 UI·歷史記錄-出行消費(fèi)

本示例展示車輛通過 ETC 的交易記錄，可實(shí)時查看 ETC 歷史交易時間、交易地點(diǎn)、交易金額記錄。

使用說明

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

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

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

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

調(diào)用

分別在 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: '寧波高速公路收費(fèi)站',
      status: '待支付',
      statusColor: '#FF6010'
    },
    item2: {
      title: '10月3日  11:40-13:40',
      value: '40.00元',
      inAddress: '杭州東',
      outAddress: '寧波高速公路收費(fèi)站',
      status: '支付成功',
      statusColor: ''
    },
    item3: {
      title: '10月3日  11:40-13:40',
      value: '40.00元',
      inAddress: '杭州東',
      outAddress: '寧波高速公路收費(fèi)站',
      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;
}

屬性