Commit 74c1d691 authored by tangfh's avatar tangfh

Update base-tab.vue

parent 2fa40a8e
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) --> <!-- [uni-nav-bar 自定义导航栏](https://uniapp.dcloud.net.cn/component/uniui/uni-nav-bar.html) -->
<uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true" <uni-nav-bar ref="navBar" class="uni-navi-bar" status-bar="true" :border="false" color="#333333" fixed="true"
left-icon="left" left-text="返回" :title="title" @clickLeft="onNavBarLeftClick" left-icon="left" left-text="返回" :title="title" @clickLeft="onNavBarLeftClick"
:titleRightIcon="tabBars[tabIndex].isNeedFilter ? titleRightIcon : ''" :titleRightIcon="tabBars[tabIndex].isNeedFilter ? titleRightIcon : ''" :titleRightIcon2="titleRightIcon2"
:titleRightIcon2="titleRightIcon2" @onClickTitleRightIcon="onClickTitleRightIcon" @onClickTitleRightIcon="onClickTitleRightIcon" @onClickTitleRightIcon2="onClickTitleRightIcon2">
@onClickTitleRightIcon2="onClickTitleRightIcon2">
</uni-nav-bar> </uni-nav-bar>
<c-tab-bar :tabBars="tabBars" :tabIndex="tabIndex" :tabWidth="tabWidth" :scrollInto="scrollInto" <c-tab-bar :tabBars="tabBars" :tabIndex="tabIndex" :tabWidth="tabWidth" :scrollInto="scrollInto"
: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"
...@@ -15,18 +15,22 @@ ...@@ -15,18 +15,22 @@
<scroll-view class="scroll-v" scroll-y :refresher-enabled="tab.content.refresherEnable" <scroll-view class="scroll-v" scroll-y :refresher-enabled="tab.content.refresherEnable"
@refresherrefresh="onRefresh()" :enable-back-to-top="true" :lower-threshold="75" @refresherrefresh="onRefresh()" :enable-back-to-top="true" :lower-threshold="75"
:refresher-triggered="tab.content.refreshing" @scrolltolower="onLoadMore(index)" :refresher-triggered="tab.content.refreshing" @scrolltolower="onLoadMore(index)"
:style="{height: (swiperHeight) + 'px'}"> :style="{height: (swiperHeight) + 'px'}"
:scroll-top="tab.content.scrollTopReal"
:show-scrollbar="true"
@scroll="onScroll"
>
<view class="flex-column" v-if="tab.content.list.length > 0" <view class="flex-column" v-if="tab.content.list.length > 0"
:style="{'min-height': (swiperHeight + 'px')}"> :style="{'min-height': (swiperHeight + 'px')}">
<view class="view-tmp1 active" v-for="(item2, index2) in tab.content.list" :index="index2" <iooItem v-for="(item2, index2) in tab.content.list" :index="index2" :key="item2.id" :item="item2"
:key="index2" :item="item2" @onItemClick="onItemClick(item2, index2)"> @onItemClick="onItemClick(item2, index2)">
<text>hello</text>
</view> </iooItem>
</view> </view>
<c-status-view v-if="tab.content.list.length == 0 && !tab.content.firstRequest" <c-status-view v-if="tab.content.list.length == 0 && !tab.content.firstRequest"
:status="tab.content.contentStatus" @onStatusClick="onStatusClick"></c-status-view> :status="tab.content.contentStatus" @onStatusClick="onStatusClick"></c-status-view>
<uni-load-more :status="tab.content.loadStatus" :icon-size="16" <uni-load-more :status="tab.content.loadStatus" :icon-size="16"
v-if="tab.content.isLoading || tab.content.list.length > 0" v-if="tab.content.isLoading || tab.content.list.length > 0 || tab.content.hide"
:content-text="loadMoreViewContentText" /> :content-text="loadMoreViewContentText" />
</scroll-view> </scroll-view>
</swiper-item> </swiper-item>
...@@ -42,30 +46,62 @@ ...@@ -42,30 +46,62 @@
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' import MSC from './../../utils/mishang_constant.js'
import IOOC from './../../pages-ioo/utils/ioo-constants.js'
// 缓存每页最多 // 缓存每页最多
const MAX_CACHE_DATA = 100; const MAX_CACHE_DATA = 100;
// 缓存页签数量 // 缓存页签数量
const MAX_CACHE_PAGE = 3; const MAX_CACHE_PAGE = 6;
const TABBARS = { const TABBARS = {
apply: { tab1: {
type: 1, type: 1,
name: '店员申请', name: '待审核',
isNeedFilter: false, isNeedFilter: false,
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT)) content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
}, },
passed: { tab2: {
type: 2, type: 2,
name: '我的店员', name: '批准进场',
isNeedFilter: true,
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
},
tab3: {
type: 3,
name: '不通过',
isNeedFilter: true,
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
},
tab4: {
type: 4,
name: '已完成',
isNeedFilter: true,
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
},
tab5: {
type: 5,
name: '已取消',
isNeedFilter: true,
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
},
tab6: {
type: 6,
name: '已失效',
isNeedFilter: true, isNeedFilter: true,
content: JSON.parse(JSON.stringify(constant.LIST_CONTENT)) content: JSON.parse(JSON.stringify(constant.LIST_CONTENT))
} }
}; };
// 1. 导入组件
import iooItem from '@/pages-ioo/components/ioo-item/ioo-item.vue'
export default { export default {
components: {
iooItem
}, // 2. 注册组件
data() { data() {
return { return {
title: '通行证管理', title: '装修物料进场单',
navBarHeight: 0, navBarHeight: 0,
refresherTriggered: false, refresherTriggered: false,
loadMoreViewShow: false, loadMoreViewShow: false,
...@@ -75,7 +111,7 @@ ...@@ -75,7 +111,7 @@
loadMoreViewStatus: 'noMore', loadMoreViewStatus: 'noMore',
cacheTab: [], cacheTab: [],
tabIndex: 0, tabIndex: 0,
tabBars: [TABBARS.apply, TABBARS.passed], tabBars: [TABBARS.tab1, TABBARS.tab2, TABBARS.tab3, TABBARS.tab4, TABBARS.tab5, TABBARS.tab6],
screen: "", screen: "",
tabItemMargin: 30, //tabItem第一个margin-left和最后一个margin-right的margin tabItemMargin: 30, //tabItem第一个margin-left和最后一个margin-right的margin
tabWidth: 0, tabWidth: 0,
...@@ -87,6 +123,7 @@ ...@@ -87,6 +123,7 @@
}, },
titleRightIcon: "/static/btn_bar_screen.png", titleRightIcon: "/static/btn_bar_screen.png",
titleRightIcon2: "/static/btn_problem.png", titleRightIcon2: "/static/btn_problem.png",
scrollTop: -1,
} }
}, },
onLoad(option) { onLoad(option) {
...@@ -110,6 +147,9 @@ ...@@ -110,6 +147,9 @@
}, },
methods: { methods: {
init(option) { init(option) {
//TODO remove
IOOC.setMock();
this.refresh(); this.refresh();
}, },
refresh() { refresh() {
...@@ -122,10 +162,10 @@ ...@@ -122,10 +162,10 @@
uni.navigateBack(); uni.navigateBack();
}, },
onClickTitleRightIcon() { onClickTitleRightIcon() {
IOOC.setMock()
}, },
onClickTitleRightIcon2() { onClickTitleRightIcon2() {
IOOC.setMock()
}, },
onFilterEnsureBtnClick(items) { onFilterEnsureBtnClick(items) {
this.$refs.filter.dismiss(); this.$refs.filter.dismiss();
...@@ -143,9 +183,13 @@ ...@@ -143,9 +183,13 @@
onStatusClick() { onStatusClick() {
this.refresh(); this.refresh();
}, },
onScroll(event) {
var tab = this.tabBars[this.tabIndex];
tab.content.scrollTop = event.detail.scrollTop;
},
onRefresh(e) { onRefresh(e) {
var tab = this.tabBars[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
if (!tab.content.refreshing && !tab.content.refreshFlag) { if (tab.content.refreshing && !tab.content.refreshFlag) { //
return; return;
} }
tab.content.page = 1; tab.content.page = 1;
...@@ -164,14 +208,14 @@ ...@@ -164,14 +208,14 @@
this.getList(this.tabIndex); this.getList(this.tabIndex);
}, },
getList(index) { getList(index) {
let url = MSC.URLS.audit_clerk_list; const url = IOOC.list();
if (!url) { if (!url) {
return; return;
} }
var tab = this.tabBars[this.tabIndex]; var tab = this.tabBars[this.tabIndex];
let param = { let param = {
status: tab.type, status: tab.type,
screen: tab.isNeedFilter ? this.screen : '', page: tab.content.page,
}; };
let option = { let option = {
isNeedShowLoading: false isNeedShowLoading: false
...@@ -192,6 +236,7 @@ ...@@ -192,6 +236,7 @@
tab.content.firstRequest = false; tab.content.firstRequest = false;
let data = res.data.data; let data = res.data.data;
let list = data.list; let list = data.list;
if (tab.content.refreshing || tab.content.refreshFlag || tab.content.list.length == 0) { if (tab.content.refreshing || tab.content.refreshFlag || tab.content.list.length == 0) {
tab.content.total_pages = util.calTotalPage(data.total_list); tab.content.total_pages = util.calTotalPage(data.total_list);
this.clearTabData(this.tabIndex); this.clearTabData(this.tabIndex);
...@@ -199,11 +244,19 @@ ...@@ -199,11 +244,19 @@
tab.content.loadStatus = tab.content.total_pages == 1 ? constant.LOAD_STATUS.noMore : constant tab.content.loadStatus = tab.content.total_pages == 1 ? constant.LOAD_STATUS.noMore : constant
.LOAD_STATUS.more; .LOAD_STATUS.more;
} else if (tab.content.loadStatus == constant.LOAD_STATUS.loading) { } else if (tab.content.loadStatus == constant.LOAD_STATUS.loading) {
tab.content.hide = true;
if (list.length > 0) { if (list.length > 0) {
tab.content.list = tab.content.list.concat(list); tab.content.list = tab.content.list.concat(list);
} }
tab.content.loadStatus = tab.content.page >= tab.content.total_pages ? constant.LOAD_STATUS.noMore : tab.content.loadStatus = tab.content.page > tab.content.total_pages ? constant.LOAD_STATUS
constant.LOAD_STATUS.more; .noMore : constant.LOAD_STATUS.more;
const _this = this;
//解决分页数据很少时,加载更多显示问题
tab.content.scrollTopReal = -1
setTimeout(()=>{
//_this.scrollTop = 0
tab.content.scrollTopReal = tab.content.scrollTop - 40
}, 300)
} }
tab.content.contentStatus = tab.content.list.length == 0 ? constant.CONTENT_STATUS.EMPTY : {}; tab.content.contentStatus = tab.content.list.length == 0 ? constant.CONTENT_STATUS.EMPTY : {};
}, },
......
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