list.vue

<style lang="less" >
    @import url('../../../styles/common.less');
    #healthCardStatisticsList{
        background: #f6f5f9;
        height:100%;
        display: flex;
        flex-direction: column;
        .CONTENT{
            flex-grow: 1;
            height:1px;
            display: flex;
            flex-direction: column;
            .activeTab2{
                flex-grow: 1;
                height:1px;
                background: white;
                overflow: auto;
                -webkit-overflow-scrolling: touch;
                .items{
                    display: flex;
                    height:60px;
                    align-items: center;
                    margin:10px;
                    .avatar{
                        height:50px;
                        width:50px;
                        border-radius: 50%;
                        background: #3a8af7;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        color:white;
                        font-size:22px;
                        margin-right:10px;
                    }
                    .item{
                        flex:1;
                        height:60px;
                        border-bottom:1px solid #f6f6f6;
                        box-sizing: border-box;
                        display: flex;
                        align-items: center;
                        .name{
                            font-size:14px;
                        }
                        >div{
                            flex:1;
                        }
                    }
                }
                
            }
        }
        .img{
            width:100%;
            display: flex;
            justify-content: center;
            img{
                width:100%;
                height:300px;
            }
        }
    }
</style>

<template>
  <div id="healthCardStatisticsList">
      <div class="CONTENT">
        <tab v-model="activeTab" prevent-default @on-before-index-change="switchTabItem" bar-active-color="#4572d7" active-color="#4572d7" default-color="#8a8a8a">
            <tab-item :selected="activeTab == 0">已填写（{{list1.length}}）</tab-item>
            <tab-item :selected="activeTab == 1">未填写（{{list2.length}}）</tab-item>
        </tab>
        <div class="activeTab2">
            <div class="items" v-for="(item,index) in (activeTab == 0 ? list1 : list2)" :key="index">
                <div class="avatar">
                    <img src="" alt="">
                    <span>{{item.sEmploeeName[0]}}</span>
                </div>
                <div class="item">
                    <div class="name">{{item.sEmploeeName}}</div>
                </div>
            </div>
            <div class="img" v-if="(activeTab == 0 ? list1 : list2).length <= 0">
                <img src="@/assets/noData.jpg" class="_img" alt="">
            </div>
        </div>
      </div>
  </div>
</template>

<script>
import Util from '@/libs/util.js';
import {mapState} from 'vuex';
import { Tab, TabItem } from 'vux'

export default {
  name: 'healthCardStatisticsList',
  data () {
    return {
        activeTab:0,
        page1:1,
        per_page1:20,
        page2:1,
        per_page2:20,
        list1:[],
        list2:[]
    }
  },
  components:{
      Tab, TabItem
  },
  computed:{
    ...mapState({
        hdr:state => state.healthStatistics.hdr
    })
  },
  async mounted(){
    
  },
  async activated(){
    window.d = this;
    this.activeTab = this.$route.params.type;
    this.clean();
    await this.getList1();
    await this.getList2();
  },
  methods:{
    clean(){
        this.page1 = 1;
        this.per_page1 = 20;
        this.list1 = [];
        this.page2 = 1;
        this.per_page2 = 20;
        this.list2 = [];
    },
    switchTabItem(index){
        this.activeTab = index;
        if(this.activeTab == 0){
            this.getList1();
        }else{this.activeTab == 1}{
            this.getList2();
        }
    },
    async getList1(){
        if(this.per_page1 < 20){
            this.$vux.toast.text('已加载全部数据!', 'middle')
            return false;
        }
        let res = await this.request('getStatisticalDetails',{
            data:[
                {key:'url',value:'HealthLog'},
                {key:'dDate',value: this.hdr.dDate},
                {key:'iCompanyId',value:'1'},
                {key:'iType',value:'1'}
            ],
            params:{
                page:this.page1,
                per_page:this.per_page1
            },
        },'加载中',{});
        if(res && res.length > 0){
            this.list1 = this.list1.concat(res);
            this.page1++;
            this.per_page1 = res.length;
        }
    },
    async getList2(){
        if(this.per_page2 < 20){
            this.$vux.toast.text('已加载全部数据!', 'middle')
            return false;
        }
        let res = await this.request('getStatisticalDetails',{
            data:[
                {key:'url',value:'HealthLog'},
                {key:'dDate',value:this.hdr.dDate},
                {key:'iCompanyId',value:'1'},
                {key:'iType',value:'0'}
            ],
            params:{
                page:this.page2,
                per_page:this.per_page2
            },
        },'加载中',{});
        if(res && res.length > 0){
            this.list2 = this.list2.concat(res);
            this.page2++;
            this.per_page2 = res.length;
        }
    },
    scrollToBottom(){
        let scrollDom = this.$refs['scrollDom'];
        if(Util.scrollToBottom(scrollDom)){
            if(this.activeTab == 0){
                this.getList1();
            }else{this.activeTab == 1}{
                this.getList2();
            }
        }
    }
  }
}
</script>