关于tab栏切换时数据接口的调用

关于tab栏切换时数据接口的调用

<template>
  <view class="container">
    <view class="tabBox" :style="{ position: headerPosition, top: headerTop }">
      <u-tabs
        :is-scroll="tabs.length > 4"
        :current="current"
        @change="changeTab"
        height="90"
        font-size="28"
        :list="tabs"
        active-color="#FF8810"
        :show-bar="false"
        class="tab-1"
      >
      </u-tabs>
    </view>

    <view class="content">
      <view v-if="!tabs[current].nomore" class="listblock">
        <view
          v-for="(item, key) in tabs[current].list"
          :key="key"
          class="item"
          @click="
            handleToUrl(
              item.acci_type == '1'
                ? '/pages/case/caseDetail/trafficDetail'
                : '/pages/case/caseDetail/injuryDetail',
              item
            )
          "
        >
          <view
            :class="[
              'status',
              'iconfont',
              'icondaitijiao',
              filterCss(item.exa_status)
            ]"
          >
            <text>{{ getValue(item.exa_status, dic.processDic) }}</text>
          </view>
          <view class="top">
            <view class="title">
              <image
                :src="'/static/images/case_type' + item.acci_type + '.png'"
                mode="scaleToFill"
              ></image>
              {{
                (item.client_name && item.client_name.substring(0, 6)) || '-'
              }}
              <text>&middot;</text>
              {{ item.client_phone || '-' }}
            </view>
            <view class="role" v-if="item.acci_type == '1'">
              客户角色：{{ getValue(item.role, dic.roleDic) }}
            </view>
            <view class="role" v-else>
              客户角色：{{ getValue(item.role, dic.roleInjuryDic) }}
            </view>
          </view>
          <view class="middle">
            <view class="type">
              <view
                >案件类型：{{ getValue(item.acci_type, dic.caseTypeDic) }}</view
              >
              <view v-if="item.acci_type == '1' && item.is_insure"
                >有无保险：{{ getValue(item.is_insure, dic.hasDic) }}</view
              >
              <view v-if="item.acci_type == '1' && item.client_responsibility"
                >客户责任：{{
                  getValue(item.client_responsibility, dic.dutyDic)
                }}</view
              >
              <view v-if="item.acci_type == '2' && item.has_injury_insur"
                >有无工伤保险：{{
                  getValue(item.has_injury_insur, dic.hasDic)
                }}</view
              >
              <view v-if="item.acci_type == '2' && item.has_contract"
                >有无劳动合同：{{
                  getValue(item.has_contract, dic.dutyDic)
                }}</view
              >
              <view
                >事故时间：{{
                  item.acci_time && dayjs(item.acci_time).format('YYYY-MM-DD')
                }}</view
              >
            </view>
            <!-- <view class="label" v-if="item.assess_fee">
              评估费用：{{ item.assess_fee }} 元
            </view> -->
          </view>
          <view class="line"> </view>
          <view class="bottom">
            <view class="time"> <b>NO：</b>{{ item.case_id }} </view>
          </view>
        </view>
        <view
          class="nomore"
          v-if="
            tabs[current].list.length > 0 && tabs[current].status == 'nomore'
          "
          >没有更多了</view
        >
      </view>
      c
    </view>
  </view>
</template>

<script>
import dayjs from 'dayjs';
import {
  caseTypeDic,
  carTypeDic,
  roleDic,
  dutyDic,
  processDic,
  hasDic,
  roleInjuryDic
} from '@/const/dic';
import { getValue } from '@/utils/data';
export default {
  components: {},
  data() {
    return {
      dic: {
        caseTypeDic,
        carTypeDic,
        roleDic,
        dutyDic,
        processDic,
        hasDic,
        roleInjuryDic
      },
      headerPosition: 'fixed',
      headerTop: '0px',
      current: 0,
      tabs: [
        {
          name: '全部',
          state: '03,31,99',
          nomore: false,
          status: 'loadmore',
          page: {
            total: 0, //总页数
            currentPage: 1, //当前页数
            pageSize: 10 //每页显示多少条
          },
          list: []
        },
        {
          name: '已完结',
          state: '31',
          nomore: false,
          status: 'loadmore',
          page: {
            total: 0, //总页数
            currentPage: 1, //当前页数
            pageSize: 10 //每页显示多少条
          },
          list: []
        },
        {
          name: '未受理',
          state: '03',
          nomore: false,
          status: 'loadmore',
          page: {
            total: 0, //总页数
            currentPage: 1, //当前页数
            pageSize: 10 //每页显示多少条
          },
          list: []
        },
        {
          name: '已放弃',
          state: '99',
          nomore: false,
          status: 'loadmore',
          page: {
            total: 0, //总页数
            currentPage: 1, //当前页数
            pageSize: 10 //每页显示多少条
          },
          list: []
        }
      ],
      scroll: false,
      dayjs,
      getValue,
      processArr: [
        {
          label: '橙色',
          code: ['03'],
          css: ''
        },
        {
          label: '绿色',
          code: ['31'],
          css: 'success'
        },
        {
          label: '灰色',
          code: ['99'],
          css: 'default'
        }
      ]
    };
  },
  computed: {
    filterCss: function () {
      return function (current) {
        let arr = this.processArr.filter((action) =>
          action.code.includes(current)
        );
        return arr[0].css;
      };
    }
  },
  onLoad(options) {
    this.headerTop = '44px';
    // #ifdef APP-PLUS
    this.headerTop = '0px';
    // #endif
    this.tabs[this.current].page.currentPage = 1;
    this.tabs[this.current].page.total = 0;
    this.tabs[this.current].list = [];

    this.loadData();
  },
  onPageScroll(e) {
    //兼容iOS端下拉时顶部漂移
    if (e.scrollTop >= 0) {
      this.headerPosition = 'fixed';
    } else {
      this.headerPosition = 'absolute';
    }
  },
  onPullDownRefresh() {
    this.tabs[this.current].page.currentPage = 1;
    this.tabs[this.current].page.total = 0;
    this.tabs[this.current].list = [];

    this.loadData();
  },
  onReachBottom() {
    if (
      this.tabs[this.current].list.length === this.tabs[this.current].page.total
    )
      return;
    this.tabs[this.current].status = true;

    this.loadData();
  },
  methods: {
    changeTab(index) {
      this.current = index;
      if (this.tabs[this.current].list.length > 0) return;
      this.tabs[this.current].page.currentPage = 1;
      this.tabs[this.current].page.total = 0;
      this.tabs[this.current].list = [];
      this.loadData();
    },
    async loadData() {
      const page = this.tabs[this.current].page;
      const result = await this.$H.post('/case/appCaseList', {
        start: (page.currentPage - 1) * page.pageSize,
        length: page.pageSize,
        exa_status: this.tabs[this.current].state
      });
      this.keywords = '';
      if (Number(result.code) == 200) {
        this.tabs[this.current].page.currentPage = ++this.tabs[this.current]
          .page.currentPage;
        this.tabs[this.current].page.total = result.data.total;
        this.tabs[this.current].list = [
          ...this.tabs[this.current].list,
          ...result.data.list
        ];
      }
      this.tabs[this.current].list.forEach((item) => {
        item.labels = item.lable_name ? item.lable_name.split(',') : [];
      });
      if (
        this.tabs[this.current].list.length ===
        this.tabs[this.current].page.total
      )
        this.tabs[this.current].status = 'nomore';
      else this.tabs[this.current].status = 'loading';
      this.tabs[this.current].page.total === 0
        ? (this.tabs[this.current].nomore = true)
        : (this.tabs[this.current].nomore = false);
      uni.stopPullDownRefresh();
    },
    handleToUrl(url, item) {
      if (item) {
        uni.setStorageSync('addBaseData', {
          case_id: item.case_id,
          increment_id: item.increment_id,
          role: item.role
        });
      }
      uni.navigateTo({
        url: `${url}`
      });
    }
  }
};
</script>