支付寶小程序 UI·歷史記錄-出入境記錄

本示例展示出入境相關(guān)信息，主要包含出入境時(shí)間、口岸、證件號碼、證件類型、交通工具。

使用說明

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

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

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

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

調(diào)用

分別在 AXML、JS、ACSS 中輸入以下代碼

<view class="entry-exit-record-page">
    <view class="entry-exit-record-page-top">
        <view onTap="datePicker">
            <text>{{selectYear}}年</text>
            <view></view>
        </view>
        <text>近期共有35條記錄</text>
    </view>
    <view class="entry-exit-record-page-middle">
        <view>
            <entry-exit-record data="{{item1}}"/>
        </view>
        <view>
            <entry-exit-record data="{{item2}}"/>
        </view>
        <view>
            <entry-exit-record data="{{item3}}"/>
        </view>
        <view>
            <entry-exit-record data="{{item4}}"/>
        </view>
    </view>
    <view class="entry-exit-record-page-bottom">
        <view>查看其他證件</view>
        <view>下載記錄</view>
    </view>
</view>

Page({
  data: {
    nowYear: new Date(),
    selectYear: '',
    // array: ['2008年', '2009年', '2010年', '2011年'],
    item1: {
      isEntry: true,
      dateTime: '2017-03-18  20:45:26',
      port: '羅湖',
      credentialNumber: 'E*********8',
      credentialType: '護(hù)照',
      trafficTools: '飛機(jī)',
    },
    item2: {
      isEntry: false,
      dateTime: '2017-03-18  20:45:26',
      port: '羅湖',
      credentialNumber: 'E*********8',
      credentialType: '護(hù)照',
      trafficTools: '飛機(jī)',
    },
    item3: {
      isEntry: true,
      dateTime: '2017-03-18  20:45:26',
      port: '羅湖',
      credentialNumber: 'E*********8',
      credentialType: '護(hù)照',
      trafficTools: '飛機(jī)',
    },
    item4: {
      isEntry: false,
      dateTime: '2017-03-18  20:45:26',
      port: '羅湖',
      credentialNumber: 'E*********8',
      credentialType: '護(hù)照',
      trafficTools: '飛機(jī)',
    },
  },
  onLoad() {
    this.setData({
      selectYear: `${this.data.nowYear.getFullYear()}`
    })
  },
  datePicker() {
    my.datePicker({
      format: 'yyyy',
      currentDate: this.data.selectYear,
      startDate: '2000',
      endDate: `${this.data.nowYear.getFullYear()}`,
      success: (res) => {
        this.setData({
          selectYear: res.date
        })
        // my.alert({
        //   title: 'datePicker response: ' + JSON.stringify(res)
        // });
      },
    });
  }
});

.entry-exit-record-page {
    background-color:rgb(242, 242, 242);
    height: 100vh;
    display:flex;
    flex-direction: column;
}


.entry-exit-record-page-top {
    height:77rpx;
    background: #FFFFFF;
    display:flex;
    border-bottom: 1px solid #EEEEEE;
    justify-content: space-between;
    align-items: center;
    padding:0 32rpx;
    box-sizing:border-box;
}


.entry-exit-record-page-top >view{
    display:flex;
}


.entry-exit-record-page-top >view >view{
    margin-left:22rpx;
    margin-top:14rpx;
    font-size: 0;
    line-height: 0;
    border-width: 9rpx;
    border-color: #D8D8D8;
    border-bottom-width: 0;
    border-style: dashed;
    border-top-style: solid;
    border-left-color: transparent;
    border-right-color: transparent;
}


.entry-exit-record-page-top >view >text{
    font-family: Helvetica;
    font-size: 32rpx;
    color: #999999;
}


.entry-exit-record-page-top >text{
    font-family: PingFangSC-Regular;
    font-size: 32rpx;
    color: #999999;
}


.entry-exit-record-page-middle{
    padding:16px 12px;
    box-sizing:border-box;
    flex:1;
    overflow:auto;
}
.entry-exit-record-page-middle >view {
    margin-bottom:24rpx;
}
.entry-exit-record-page-middle >:last-child{
    margin:0;
}


.entry-exit-record-page-bottom{
    background-color:#FFFFFF;
    margin:0!important;
    width:100%;
    height:146rpx;
    display:flex;
    justify-content: space-between;
    align-items: center;
    box-sizing:border-box;
    padding:0 24rpx;
    border-top: 1px solid #EEEEEE;
}
.entry-exit-record-page-bottom :first-child{
    width:339rpx;
    height:98rpx;
    line-height:98rpx;
    background: #FFFFFF;
    border: 2px solid #E5E5E5;
    box-sizing:border-box;
    border-radius: 4rpx;
    font-family: PingFangSC-Regular;
    font-size: 36rpx;
    color: #333333;
    text-align: center;
}
.entry-exit-record-page-bottom :last-child{
    width:339rpx;
    height:98rpx;
    line-height:98rpx;
    background: #1677FF;
    border-radius: 4rpx;
    font-family: PingFangSC-Regular;
    font-size: 36rpx;
    color: #FFFFFF;
    text-align: center;
}

屬性