支付宝小程序 UI·历史记录-公积金缴存

本示例主要实现历史公积金缴存、提取记录的查询功能。

使用说明

• 本示例为纯客户端代码，可直接在模拟器和在真机预览。
• 更多详情请参见 代码市场。

使用指南

安装

在 IDE 安装以下依赖

npm i mashi-open-snippets --save

注册

在 JSON 中引入组件路径

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

调用

分别在 AXML、JS、ACSS 中输入以下代码

<view class="housing-fund-record-page">
  <tabs
   tabs="{{tabs2}}"
   tabsName="activeTab2"
   onTabClick="handleTabClick"
   onChange="handleTabChange"
   activeTab="{{activeTab2}}"
   showPlus="{{false}}"
   capsule="{{false}}"
   hasSubTitle="{{false}}"
  >
   <block a:for="{{tabs2}}">
     <tab-content swipeable="{{true}}" key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:if="{{index === 0}}">
       <view class="housing-fund-record-page-content">
        <view a:for="{{filterList}}">
          <housing-fund-record data="{{item}}"/>
        </view>
       </view>
     </tab-content>
     <tab-content swipeable="{{true}}" key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:elif="{{index === 2}}">
       <view class="housing-fund-record-page-content">
        <view a:for="{{filterList}}">
          <housing-fund-record data="{{item}}"/>
        </view>
       </view>
     </tab-content>
     <tab-content swipeable="{{true}}" key="{{index}}" tabId="{{index}}" activeTab="{{activeTab2}}" a:else>
       <view class="housing-fund-record-page-content">
        <view a:for="{{filterList}}">
          <housing-fund-record data="{{item}}"/>
        </view>
       </view>
     </tab-content>
   </block>
  </tabs>
</view>

Page({
  data: {
    tabs2: [
      {
        title: '全部',
        subTitle: '全部',
      },
      {
        title: '缴存',
        subTitle: '缴存',
      },
      {
        title: '提取',
        subTitle: '提取',
      },
    ],
    activeTab2: 0,
    list: [
      {
        title: '租房提取',
        isIn: false,
        source: '杭州市西湖区住房公积金管理中心',
        value: '30000.00',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司汇缴-6月',
        isIn: true,
        source: '蚂蚁金服（杭州）网络技术有限公司',
        total: '27568.00',
        value: '5442.16',
        dateTime: '2019-06-15 12:14',
      }, {
        title: '公司汇缴-5月',
        isIn: true,
        source: '蚂蚁金服（杭州）网络技术有限公司',
        total: '22126.00',
        value: '5442.16',
        dateTime: '2019-05-15 12:14',
      }, {
        title: '租房提取',
        isIn: false,
        source: '杭州市西湖区住房公积金管理中心',
        value: '30000.00',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司汇缴-4月',
        isIn: true,
        source: '蚂蚁金服（杭州）网络技术有限公司',
        total: '46684.00',
        value: '5442.16',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司汇缴-3月',
        isIn: true,
        source: '蚂蚁金服（杭州）网络技术有限公司',
        total: '41242.00',
        value: '5442.16',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司汇缴-2月',
        isIn: true,
        source: '蚂蚁金服（杭州）网络技术有限公司',
        total: '35800.00',
        value: '5442.16',
        dateTime: '2019-02-15 12:14',
      },
    ],
    filterList: []
  },
  onLoad() {
    this.setData({
      filterList: this.data.list
    })
  },
  handleTabClick({ index, tabsName }) {
    const { activeTab2, list } = this.data;
    // tab 切换了
    if (activeTab2 !== index) {
      switch (index) {
        case 0:
          this.setData({
            filterList: list
          })
          break;
        case 1:
          this.setData({
            filterList: list.filter(item => item.isIn)
          })
          break;
        case 2:
          this.setData({
            filterList: list.filter(item => !item.isIn)
          })
          break;
        default:
          this.setData({
            filterList: list
          })
          break;
      }
    }
    this.setData({
      [tabsName]: index,
    });
  },
  handleTabChange({ index, tabsName }) {
    const { list } = this.data;
    switch (index) {
      case 0:
        this.setData({
          filterList: list
        })
        break;
      case 1:
        this.setData({
          filterList: list.filter(item => item.isIn)
        })
        break;
      case 2:
        this.setData({
          filterList: list.filter(item => !item.isIn)
        })
        break;
      default:
        this.setData({
          filterList: list
        })
        break;
    }
    this.setData({
      [tabsName]: index,
    });
  },
});

.housing-fund-record-page {
    //background-color:rgb(242, 242, 242);
    //padding:16px 12px;
    //height:100vh;
    //box-sizing:border-box;
}
.housing-fund-record-page-content {
    //position: absolute;    
    //width: 100%;
    //top: 0;
    //bottom: 0;
    //left: 0;
    //background-color:red;
    height:calc(100vh - 44px);
    overflow-y: auto;
    background-color:rgb(242, 242, 242);
    padding:16px 12px;
    box-sizing:border-box;
}
.housing-fund-record-page-content >view{
    margin-bottom:24rpx;
}

属性