关于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>·</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';
this.headerTop = '0px';
this.tabs[this.current].page.currentPage = 1;
this.tabs[this.current].page.total = 0;
this.tabs[this.current].list = [];
this.loadData();
},
onPageScroll(e) {
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>
