Skip to content

U
uni-app-base
Commit 9e2f1536 authored by tangfh's avatar tangfh
Browse files
Options

+

parent a8f86323
Hide whitespace changes
Inline Side-by-side
Showing with 84 additions and 144 deletions
pages/template/base-tab.vue
View file @ 9e2f1536
...@@ -8,17 +8,21 @@ ...@@ -8,17 +8,21 @@
:marginL="tabItemMargin" :marginR="tabItemMargin" @onTabItemClick="onTabItemClick"></c-tab-bar> :marginL="tabItemMargin" :marginR="tabItemMargin" @onTabItemClick="onTabItemClick"></c-tab-bar>
<swiper :current="tabIndex" class="swiper-box" :duration="300" @change="onTabChange" <swiper :current="tabIndex" class="swiper-box" :duration="300" @change="onTabChange"
:style="{height: swiperHeight + 'px'}"> :style="{height: swiperHeight + 'px'}">
<swiper-item class="swiper-item" v-for="(tab,index) in tabList" :key="index"> <swiper-item class="swiper-item" v-for="(tab,index) in tabBars" :key="index">
<scroll-view class="scroll-v" scroll-y :refresher-enabled="true" @refresherrefresh="onRefresh()" <scroll-view class="scroll-v" scroll-y :refresher-enabled="tab.content.refresherEnable" @refresherrefresh="onRefresh()"
:enable-back-to-top="true" :lower-threshold="75" :refresher-triggered="tab.refreshing" :enable-back-to-top="true" :lower-threshold="75" :refresher-triggered="tab.content.refreshing"
@scrolltolower="onLoadMore(index)" :style="{height: (swiperHeight) + 'px'}"> @scrolltolower="onLoadMore(index)" :style="{height: (swiperHeight) + 'px'}">
<view class="flex-column" v-if="tab.data.length > 0" :style="{'min-height': (svHeight + 'rpx')}"> <view class="flex-column" v-if="tab.content.list.length > 0"
<view class="view-tmp1 active" v-for="(item2, index2) in tab.data" :index="index2" :key="index2" :style="{'min-height': (swiperHeight + 'px')}">
:item="item2" @onItemClick="onItemClick"></view> <view class="view-tmp1 active" v-for="(item2, index2) in tab.content.list" :index="index2"
:key="index2" :item="item2" @onItemClick="onItemClick(item2, index2)">
<text>hello</text>
</view>
</view> </view>
<c-status-view v-if="tab.data.length == 0 && !tab.firstRequest" :status="tab.contentStatus" <c-status-view v-if="tab.content.list.length == 0 && !tab.content.firstRequest"
@onStatusClick="onStatusClick"></c-status-view> :status="tab.content.contentStatus" @onStatusClick="onStatusClick"></c-status-view>
<uni-load-more :status="tab.loadStatus" :icon-size="16" v-if="tab.isLoading || tab.data.length > 0" <uni-load-more :status="tab.content.loadStatus" :icon-size="16"
v-if="tab.content.isLoading || tab.content.list.length > 0"
:content-text="loadMoreViewContentText" /> :content-text="loadMoreViewContentText" />
</scroll-view> </scroll-view>
</swiper-item> </swiper-item>
...@@ -29,224 +33,160 @@ ...@@ -29,224 +33,160 @@
<script> <script>
import constant from './../../utils/constant.js' import constant from './../../utils/constant.js'
import util from './../../utils/util.js' import util from './../../utils/util.js'
import MSC from './../../utils/mishang_constant.js'
// 缓存每页最多 // 缓存每页最多
const MAX_CACHE_DATA = 100; const MAX_CACHE_DATA = 100;
// 缓存页签数量 // 缓存页签数量
const MAX_CACHE_PAGE = 3; const MAX_CACHE_PAGE = 3;
const REPAIR_LIST_TYPE = { const TABBARS = {
wait_alloc: { apply: {
type: 1, type: 1,
text: 'alloc', name: '店员申请',
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
}, },
alloced: { passed: {
type: 2, type: 2,
text: 'alloced', name: '我的店员',
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
} }
}; };
export default { export default {
data() { data() {
return { return {
title: '报修单分配', title: '通行证管理',
navBarHeight: 0, navBarHeight: 0,
scrollViewHeight: 1000,
refresherTriggered: false, refresherTriggered: false,
loadMoreViewShow: false, loadMoreViewShow: false,
loadMoreViewContentText: { loadMoreViewContentText: {
contentnomore: "到底啦~" contentnomore: "到底啦~"
}, },
loadMoreViewStatus: 'noMore', loadMoreViewStatus: 'noMore',
tabList: [],
cacheTab: [], cacheTab: [],
tabIndex: 0, tabIndex: 0,
tabBars: [{ tabBars: [TABBARS.apply, TABBARS.passed],
name: '待分配（0）', screen: "",
type: REPAIR_LIST_TYPE.wait_alloc.type
}, {
name: '已分配（0）',
type: REPAIR_LIST_TYPE.alloced.type
}],
tabItemMargin: 30, //tabItem第一个margin-left和最后一个margin-right的margin tabItemMargin: 30, //tabItem第一个margin-left和最后一个margin-right的margin
tabWidth: 0, tabWidth: 0,
scrollInto: "", scrollInto: "",
swiperHeight: 1000, swiperHeight: 1000,
svHeight: 1000, loadTexts: constant.LOAD_TEXTS,
loadTexts: {
contentdown: '上拉加载更多',
contentrefresh: '加载中',
contentnomore: '没有更多~'
},
seletedItem: { seletedItem: {
range_name: "" range_name: ""
}, },
itemTmp: {
title: "内部报修",
statusAlias: "抢单中",
order_sn: "SN2023050813",
date: "2023-05-06-08 13:16",
item: "公共照明",
},
} }
}, },
onLoad(option) { onLoad(option) {
var systemInfo = uni.getSystemInfoSync(); var systemInfo = uni.getSystemInfoSync();
//scroll-view的高度 = 屏幕高度 -（顶部状态栏高度 + 导航栏高度） -（底部tabBar高度 + 底部安全区域高度） //scroll-view的高度 = 屏幕高度 -（顶部状态栏高度 + 导航栏高度） -（底部tabBar高度 + 底部安全区域高度）
this.scrollViewHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom);
this.swiperHeight = this.scrollViewHeight - (80) / getApp().globalData.pxToRpxScale;
this.svHeight = this.swiperHeight;
this.tabWidth = (getApp().globalData.screenWidth - this.tabItemMargin * 2) / this.tabBars.length; this.tabWidth = (getApp().globalData.screenWidth - this.tabItemMargin * 2) / this.tabBars.length;
let contentHeight = systemInfo.screenHeight - (uni.getSystemInfoSync()
.statusBarHeight + this.$refs.navBar.height) - (systemInfo.safeAreaInsets.bottom);
//80 tabBar的高度
this.swiperHeight = contentHeight - 80 / getApp().globalData.pxToRpxScale;
this.init(option); this.init(option);
}, },
onShow() { onShow() {
if(!this.firstRequest) { var tab = this.tabBars[this.tabIndex];
//this.getList() if (!tab.content.firstRequest && tab.content.page == 1) {
this.getList();
} }
}, },
methods: { methods: {
init(option) { init(option) {
this.initTabBar(); this.refresh();
}, },
initTabBar() { refresh() {
var _this = this; var tab = this.tabBars[this.tabIndex];
setTimeout(() => { setTimeout(() => {
_this.tabBars.forEach((tabBar) => { tab.content.refreshing = true;
var tab = { }, 1000)
data: [],
isLoading: false,
refreshing: false,
refreshFlag: true,
loadMoreFlag: true,
loadStatus: constant.LOAD_STATUS.loading,
page: 1,
total_pages: 1,
loadingText: '加载更多...',
isRequestComplete: false,
channel: ""
};
if (tabBar.type == REPAIR_LIST_TYPE.wait_alloc.type) {
tab.limit = 10;
tab.loadStatus = constant.LOAD_STATUS.more;
tab.total_pages = 1;
// tab.data.push([{},{},{}]);
tab.channel = REPAIR_LIST_TYPE.wait_alloc.text
} else if (tabBar.type == REPAIR_LIST_TYPE.alloced.type) {
tab.limit = 5;
tab.loadStatus = constant.LOAD_STATUS.more;
tab.total_pages = 1;
// tab.data.push([{},{},{},{},{},{}]);
tab.channel = REPAIR_LIST_TYPE.alloced.text
}
if (tab.total_pages == 1) {
tab.loadStatus = constant.LOAD_STATUS.noMore;
tab.loadingText = _this.loadTexts.contentnomore;
}
_this.tabList.push(tab);
});
var tab = _this.tabList[_this.tabIndex];
setTimeout(() => {
tab.refreshing = true;
}, 35)
}, 350)
}, },
onNavBarLeftClick() { onNavBarLeftClick() {
uni.navigateBack(); uni.navigateBack();
}, },
onStatusClick() { onStatusClick() {
var tab = this.tabList[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
tab.refreshing = true; tab.content.refreshing = true;
this.onRefresh(); this.onRefresh();
}, },
onRefresh(e) { onRefresh(e) {
var tab = this.tabList[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
if (!tab.refreshFlag) { if (!tab.content.refreshFlag) {
return; return;
} }
tab.page = 1; tab.content.page = 1;
tab.loadStatus = tab.page == tab.total_pages ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS.more; tab.content.loadStatus = tab.content.page == tab.content.total_pages ? constant.LOAD_STATUS.noMore :
tab.refreshing = true; constant.LOAD_STATUS.more;
tab.content.refreshing = true;
this.getList(this.tabIndex) this.getList(this.tabIndex)
}, },
onLoadMore(e) { onLoadMore(e) {
var tab = this.tabList[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
if (tab.loadStatus == constant.LOAD_STATUS.noMore) { if (tab.content.loadStatus == constant.LOAD_STATUS.noMore) {
return; return;
} }
tab.loadStatus = constant.LOAD_STATUS.loading; tab.content.loadStatus = constant.LOAD_STATUS.loading;
tab.page++; tab.content.page++;
this.getList(this.tabIndex); this.getList(this.tabIndex);
}, },
getList(index) { getList(index) {
let url = ""; let url = MSC.URLS.audit_clerk_list;
if(!url) { if (!url) {
return; return;
} }
let param = { let param = {
channel: this.tabList[index].channel, status: this.tabBars[index].type,
keywords: "", screen: this.screen,
search_status: "",
page: this.tabList[index].page
}; };
let option = { let option = {
isNeedShowLoading: false isNeedShowLoading: false
}; };
util.request(url, param, option, { util.request(url, param, option, {
success: this.requestSuccess, success: this.requestSuccess,
fail: this.requestFail, fail: this.requestFail,
complete: this.requestComplete complete: this.requestComplete
}); });
}, },
requestSuccess(res) { requestSuccess(res) {
var tab = this.tabList[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
if (res.statusCode != 200) { if (res.statusCode != 200) {
tab.refreshing = false; tab.content.refreshing = false;
tab.isRequestComplete = true; tab.content.isRequestComplete = true;
return; return;
} }
tab.firstRequest = false; tab.content.firstRequest = false;
let data = res.data.data; let data = res.data.data;
let list = data.list; let list = data.list;
// let tabBars = [{ if (tab.content.refreshing || tab.content.list.length == 0) {
// name: '待分配（' + data.channel_ct.alloc + '）', tab.content.total_pages = util.calTotalPage(data.total_list);
// type: REPAIR_LIST_TYPE.wait_alloc.type
// }, {
// name: '已分配（' + data.channel_ct.alloced + '）',
// type: REPAIR_LIST_TYPE.alloced.type
// }];
// this.tabBars = tabBars;
// list.forEach((item, index) => {
// item.ui = {
//
// }
// })
if (tab.refreshing || tab.data.length == 0) {
tab.total_pages = util.calTotalPage(data.total_list);
this.clearTabData(this.tabIndex); this.clearTabData(this.tabIndex);
tab.data = list; tab.content.list = list;
tab.loadStatus = tab.total_pages == 1 ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS.more; tab.content.loadStatus = tab.content.total_pages == 1 ? constant.LOAD_STATUS.noMore : constant
} else if (tab.loadStatus == constant.LOAD_STATUS.loading) { .LOAD_STATUS.more;
} else if (tab.content.loadStatus == constant.LOAD_STATUS.loading) {
if (list.length > 0) { if (list.length > 0) {
tab.data = tab.data.concat(list); tab.content.list = tab.content.list.concat(list);
} }
tab.loadStatus = tab.page == tab.total_pages ? constant.LOAD_STATUS.noMore : constant.LOAD_STATUS.more; tab.content.loadStatus = tab.content.page == tab.content.total_pages ? constant.LOAD_STATUS.noMore :
constant.LOAD_STATUS.more;
} }
tab.contentStatus = tab.data.length == 0 ? constant.CONTENT_STATUS.EMPTY : {}; tab.content.contentStatus = tab.content.list.length == 0 ? constant.CONTENT_STATUS.EMPTY : {};
}, },
requestFail(res, status) { requestFail(res, status) {
if (this.tabList[this.tabIndex].data.length == 0) { if (this.tabBars[this.tabIndex].content.list.length == 0) {
this.tabList[this.tabIndex].contentStatus = status; this.tabBars[this.tabIndex].content.contentStatus = status;
} }
}, },
requestComplete() { requestComplete() {
var tab = this.tabList[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
tab.firstRequest = false; tab.content.firstRequest = false;
tab.refreshing = false; tab.content.refreshing = false;
tab.isRequestComplete = true; tab.content.isRequestComplete = true;
uni.hideLoading() uni.hideLoading()
}, },
onTabItemClick(index) { onTabItemClick(index) {
...@@ -255,12 +195,12 @@ ...@@ -255,12 +195,12 @@
onTabChange(e) { onTabChange(e) {
let index = e.target.current || e.detail.current; let index = e.target.current || e.detail.current;
this.switchTab(index); this.switchTab(index);
if (this.tabList[index].data.length > 0) { if (this.tabBars[index].content.list.length > 0) {
return; return;
} }
var tab = this.tabList[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
setTimeout(() => { setTimeout(() => {
tab.refreshing = true; tab.content.refreshing = true;
}, 35) }, 35)
}, },
switchTab(index) { switchTab(index) {
...@@ -269,7 +209,7 @@ ...@@ -269,7 +209,7 @@
} }
// 缓存 tabId // 缓存 tabId
if (this.tabList[this.tabIndex].data.length > MAX_CACHE_DATA) { if (this.tabBars[this.tabIndex].content.list.length > MAX_CACHE_DATA) {
let isExist = this.cacheTab.indexOf(this.tabIndex); let isExist = this.cacheTab.indexOf(this.tabIndex);
if (isExist < 0) { if (isExist < 0) {
this.cacheTab.push(this.tabIndex); this.cacheTab.push(this.tabIndex);
...@@ -287,10 +227,10 @@ ...@@ -287,10 +227,10 @@
} }
}, },
clearTabData(cacheIndex) { clearTabData(cacheIndex) {
this.tabList[cacheIndex].data.length = 0; this.tabBars[cacheIndex].content.list.length = 0;
this.tabList[cacheIndex].loadingText = "加载更多..."; this.tabBars[cacheIndex].content.loadingText = "加载更多...";
}, },
onItemClick(index2) { onItemClick(item) {
uni.navigateTo({ uni.navigateTo({
url: '/pages/repair-detail/repair-detail' url: '/pages/repair-detail/repair-detail'
}) })
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment