<template> <view class="pagesCons"> <view class="utabs"> <u-tabs-swiper ref="uTabs" :list="tabList" name="dispName" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs-swiper> </view> <swiper class="check-list" :current="swiperCurrent" @transition="transition" @change="swiperChange" @animationfinish="animationfinish"> <swiper-item class="swiper-item" v-for="(tabs, index) in tabList" :key="index"> <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom"> <view class="check-order-list" v-if="index==current" v-for="(item,sindex) in list" :key="item.id+'-'+sindex" @click="viewRow(item)" > <view class="check-row"> <view> <text style="margin-right: 0.5rem;">{{item.shelfInfo&&item.shelfInfo.shelfName}}</text> <u-tag size='mini' type="info" shape="circle" v-if="item.shelfInfo&&item.shelfInfo.state=='WRITE_OFF'" text="已注销"></u-tag> <u-tag size='mini' type="info" shape="circle" v-if="item.shelfInfo&&item.shelfInfo.state=='SUSPEND'" text="已暂停"></u-tag> <u-tag size='mini' type="info" shape="circle" v-if="item.shelfInfo&&item.shelfInfo.state=='DISABLED'" text="已停用"></u-tag> </view> <view> <text :style="{color: item.billState=='FINISH'?$config('successColor'):item.billState=='CANCEL'?$config('infoColor'):$config('errorColor')}">{{item.billStateDictValue}}</text> </view> </view> <view class="check-col"> <view>调货单号:{{item.recallBillNo}}</view> <view> <view v-if="item.billState=='FINISH'">实退数量:<text>{{(item.totalConfirmQty || item.totalConfirmQty==0)?item.totalConfirmQty:'--'}}</text></view> <view v-else>调回数量:<text>{{(item.totalQty || item.totalQty==0)?item.totalQty:'--'}}</text></view> </view> <view>{{item.createDate}}</view> </view> </view> <u-empty :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty> <view v-if="index==current" style="padding: 20upx;"> <u-loadmore :load-text="$config('loadText')" v-if="total>pageSize || status=='loading'" :status="status" /> </view> </scroll-view> </swiper-item> </swiper> </view> </template> <script> import { queryStateCount, shelfRecallList } from '@/api/shelfRecall.js' export default { components: { }, data() { return { status: 'loadmore', noDataText: '暂无数据', tabList: [ { dispName: '全部', status: 'ALL' }, { dispName: '待退库', status: 'WAIT_CONFIRM', count: 0 }, { dispName: '已完成', status: 'FINISH' }, { dispName: '已取消', status: 'CANCEL' } ], current: 0, swiperCurrent: 0, pageNo: 1, pageSize: 6, list: [], total: 0, action:'swiperChange', // 操作类型,上划分页,或左右滑动 } }, onLoad(options) { const _this = this uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: this.$config('primaryColor') }) if(options&&options.billState){ // 指定单据状态 this.tabList.map((item,index) => { if(item.status == options.billState){ _this.swiperCurrent = index _this.current = index } }) }else{ _this.swiperCurrent = 0 _this.current = 0 } // 监听整改完成后刷新事件 uni.$on('refreshBL', this.pageInit) }, onShow() { this.pageInit() }, onNavigationBarButtonTap(){ uni.navigateTo({ url:'/pages/shuntBackManage/shelfList' }) }, onUnload() { uni.$off('refreshBL') }, methods:{ pageInit(){ queryStateCount({}).then(res =>{ if(res.status==200 && res.data){ this.tabList[1].count = res.data.WAIT_CONFIRM || 0 this.getRow(1) }else{ this.getRow(1) } }) }, // tabs通知swiper切换 tabsChange(index) { this.swiperCurrent = index }, swiperChange(event){ this.action = 'swiperChange' this.status = 'loading' }, // swiper-item左右移动,通知tabs的滑块跟随移动 transition(e) { let dx = e.detail.dx this.$refs.uTabs.setDx(dx) }, // 由于swiper的内部机制问题,快速切换swiper不会触发dx的连续变化,需要在结束时重置状态 // swiper滑动结束,分别设置tabs和swiper的状态 animationfinish(e) { let current = e.detail.current let isCurtab = this.current == current if(this.status!="nomore"){ let loadData = this.action == 'swiperChange' ? !isCurtab : isCurtab if(loadData){ this.$refs.uTabs.setFinishCurrent(current) this.swiperCurrent = current this.current = current this.resetPage() } } }, // scroll-view到底部加载更多 onreachBottom() { this.action = 'onreachBottom' if(this.list.length < this.total){ this.resetPage() }else{ this.status = "nomore" } }, // 查询列表 getRow (pageNo) { if (pageNo) { this.pageNo = pageNo } let params = { pageNo: this.pageNo, pageSize: this.pageSize, billState: this.tabList[this.current].status=='ALL'?'':this.tabList[this.current].status } this.status = "loading" shelfRecallList(params).then(res => { if (res.status == 200) { if(this.pageNo>1){ this.list = this.list.concat(res.data.list || []) }else{ this.list = res.data.list || [] } this.total = res.data.count || 0 } else { this.list = [] this.total = 0 this.noDataText = res.message } this.status = "loadmore" }) }, resetPage(){ this.status = 'loading'; // 上划分页 if(this.action == 'onreachBottom'){ this.pageNo += 1 this.getRow() } // 左右切换tab if(this.action == 'swiperChange'){ this.list = [] this.getRow(1) } }, // 详细页 viewRow(item){ if(item.billState=='WAIT_CONFIRM'){ // 待退库 uni.navigateTo({ url: "/pages/shuntBackManage/cancellingStocks?sn="+item.recallBillSn }) }else if(item.billState=='FINISH'){ // 已完成 uni.navigateTo({ url: "/pages/shuntBackManage/detail?sn="+item.recallBillSn+"&type=success" }) }else if(item.billState=='CANCEL'){ // 已取消 uni.navigateTo({ url: "/pages/shuntBackManage/detail?sn="+item.recallBillSn+"&type=cancel" }) } } } } </script> <style lang="scss"> page { height: 100%; } .pagesCons{ width: 100%; height: 100%; display: flex; flex-direction: column; .text-right { text-align: right; } .utabs{ border-bottom: 1px solid #eee; } .check-list{ flex: 1; .swiper-item{ width: 100%; height: 100%; overflow: hidden; .scroll-view { width: 100%; height: 100%; overflow: auto; } } } // 列表样式 .check-order-list{ background: #ffffff; padding: 25upx 35upx; margin: 25upx; border-radius: 25upx; box-shadow: 1px 1px 3px #EEEEEE; .check-row{ display: flex; justify-content: space-between; margin-bottom: 10rpx; >view{ &:first-child{ color: #222; font-size: 32rpx; width: 80%; } &:last-child{ font-size: 28rpx; margin-top: 5rpx; } } } .check-col{ > view{ padding: 2rpx 0; color: #707070; font-size: 26rpx; } } } } </style>