OfficeApp/pages/oaExamine/oaExamine.vue

<template>
  <view class="all_box">
    <u-sticky bgColor="#0022C7">
      <u-tabs :list="tabLists" @click="changeCurrent" lineColor='white' :scrollable="false" lineWidth='20'
        inactiveStyle='color:white' activeStyle="color:white"></u-tabs>
    </u-sticky>
    <u-tabs style="background-color: #fff;" :list="typeTabLists" @click="changeTypeCurrent" lineColor='#0022C7' lineWidth='40'
      inactiveStyle='color:#0022C7' activeStyle="color:#0022C7"></u-tabs>
    <view v-if="check_status==2||check_status==3" class="p_list">
      <block v-for="(item,index) in list" :key="index">
        <merchantAudit :datas="item"></merchantAudit>
      </block>
    </view>
    
    <u-empty v-if="list.length==0&&loadConfig.status=='nomore'" icon="/static/img/empty/data.png"></u-empty>
    <u-loadmore v-else :status="loadConfig.status" :loading-text="loadConfig.loadingText"
    	:loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
  </view>
</template>

<script>
  import { Toast } from '@/libs/uniApi.js'
  import { approveLists, approveTypes } from "@/api/approve.js"
  import merchantAudit from '@/components/merchantAudit/merchantAudit.vue'
  export default {
    components: {
      merchantAudit
    },
    data() {
      return {
        tabLists: [ {
          name: '审核中',
          id: 1
        }, {
          name: '已通过',
          id: 2
        }, {
          name: '未通过',
          id: 3
        }, {
          name: '全部',
          id: 0
        },],
        typeTabLists: [],
        current: 0,
        currentID: 1, // 审核中,已通过,为通过,全部 
        typeCurrent: 0,
        check_status: 0, // 审批类型
        list: [],
        loadConfig: {
        	page: 1,
        	limit: 10,
        	lastpage: '',
        	loadingText: '努力加载中',
        	loadmoreText: '轻轻上拉',
        	nomoreText: '我也是有底线的~~',
        	status: 'loadmore'
        },
      }
    },
    onLoad() {
      this.initType();
    },
    onShow() {
      if(this.typeTabLists.length>0){
        this.loadConfig.page = 1;
        this.loadConfig.status = "loading";
        this.list = [];
        this.$u.sleep(200).then(()=>{
          this.loadList();
        })
      }
    },
    async onPullDownRefresh() {
      await this.initList();
      this.$u.sleep(200).then(()=>{
        uni.stopPullDownRefresh();
      })
    },
    onReachBottom() {
      this.loadList();
    },
    methods: {
      async initType(){
        let res = await approveTypes();
        res.data.forEach((item)=>{
          if(item.id!=1) this.typeTabLists.push({
            id: item.id,
            name: item.title
          })
        })
        this.check_status = this.typeTabLists[0].id;
        this.$nextTick(()=>{
          this.initList();
        })
      },
      async initList(){
        this.loadConfig.page = 1;
        this.loadConfig.status = "loadmore";
        this.list = [];
        await this.loadList();
      },
      async loadList(){
        if (this.loadConfig.status == "nomore") return;
        this.loadConfig.status = "loading";
        let query = {
          type: this.check_status,
        	page: this.loadConfig.page,
        	limit: this.loadConfig.limit
        }
        this.currentID?query.check_status=this.currentID:null;
        let res = await approveLists(query);
        this.loadConfig.status = "loadmore"
        if (res.data.lists.length < this.loadConfig.limit) {
        	this.loadConfig.status = "nomore"
        } else {
        	this.loadConfig.page++;
        }
        this.list = [...this.list, ...res.data?.lists];
      },
      changeCurrent(e) {
        this.current = e.index;
        this.currentID = e.id;
        this.initList();
      },
      changeTypeCurrent(e) {
        this.typeCurrent = e.index;
        this.check_status = e.id;
        this.initList();
      },
    },
  }
</script>

<style lang="scss" scoped>
  .all_box {
    padding-bottom: 21rpx;
  }
  .p_list{
    padding-top: 28rpx;
  }
</style>