支付寶小程序 UI·歷史記錄-公積金繳存

本示例主要實(shí)現(xiàn)歷史公積金繳存、提取記錄的查詢功能。

使用說明

• 本示例為純客戶端代碼，可直接在模擬器和在真機(jī)預(yù)覽。
• 更多詳情請參見 代碼市場。

使用指南

安裝

在 IDE 安裝以下依賴

npm i mashi-open-snippets --save

注冊

在 JSON 中引入組件路徑

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

調(diào)用

分別在 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: '杭州市西湖區(qū)住房公積金管理中心',
        value: '30000.00',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司匯繳-6月',
        isIn: true,
        source: '螞蟻金服（杭州）網(wǎng)絡(luò)技術(shù)有限公司',
        total: '27568.00',
        value: '5442.16',
        dateTime: '2019-06-15 12:14',
      }, {
        title: '公司匯繳-5月',
        isIn: true,
        source: '螞蟻金服（杭州）網(wǎng)絡(luò)技術(shù)有限公司',
        total: '22126.00',
        value: '5442.16',
        dateTime: '2019-05-15 12:14',
      }, {
        title: '租房提取',
        isIn: false,
        source: '杭州市西湖區(qū)住房公積金管理中心',
        value: '30000.00',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司匯繳-4月',
        isIn: true,
        source: '螞蟻金服（杭州）網(wǎng)絡(luò)技術(shù)有限公司',
        total: '46684.00',
        value: '5442.16',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司匯繳-3月',
        isIn: true,
        source: '螞蟻金服（杭州）網(wǎng)絡(luò)技術(shù)有限公司',
        total: '41242.00',
        value: '5442.16',
        dateTime: '2019-04-15 12:14',
      }, {
        title: '公司匯繳-2月',
        isIn: true,
        source: '螞蟻金服（杭州）網(wǎng)絡(luò)技術(shù)有限公司',
        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;


}

屬性