支付宝小程序 UI·历史记录-出入境记录

本示例展示出入境相关信息，主要包含出入境时间、口岸、证件号码、证件类型、交通工具。

使用说明

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

更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

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

调用

分别在 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: '护照',
      trafficTools: '飞机',
    },
    item2: {
      isEntry: false,
      dateTime: '2017-03-18  20:45:26',
      port: '罗湖',
      credentialNumber: 'E*********8',
      credentialType: '护照',
      trafficTools: '飞机',
    },
    item3: {
      isEntry: true,
      dateTime: '2017-03-18  20:45:26',
      port: '罗湖',
      credentialNumber: 'E*********8',
      credentialType: '护照',
      trafficTools: '飞机',
    },
    item4: {
      isEntry: false,
      dateTime: '2017-03-18  20:45:26',
      port: '罗湖',
      credentialNumber: 'E*********8',
      credentialType: '护照',
      trafficTools: '飞机',
    },
  },
  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;
}

属性