<template> <view class="digitShelf-pagesCons"> <view class="tab-body"> <view> <u-tabs-swiper ref="uTabs" :list="tabList" bar-width='100' active-color="#1283d4" 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" style="height: 100%;width: 100%;overflow: hidden;" v-for="(tabs, indexs) in tabList" :key="indexs"> <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom"> <view style="height: 20rpx;" ></view> <view class="check-order-list" v-for="(item,index) in list" :key="item.id" @click="viewRow(item)" > <view class="check-row"> <view class="orderNo">{{item.replenishBillNo||'--'}}</view> <view class="times" v-if="item.billState=='WAIT_CHECK'">{{item.outStockTime}}</view> <view class="times" v-if="item.billState=='FINISH'">{{item.putStockTime}}</view> </view> <view class="check-row flex align-center"> <view> <view class="carModel"> {{item.dealerName||'--'}} </view> <view class="carVin" v-if="item.billState=='WAIT_CHECK'"> 待入库数量:<text>{{item.totalConfirmQty||item.totalConfirmQty==0?item.totalConfirmQty:'--'}}</text> </view> <view class="carVin" v-if="item.billState=='FINISH'"> 入库数量:<text>{{item.totalPutQty||item.totalPutQty==0?item.totalPutQty:'--'}}</text> </view> </view> <view> <button :hover-stop-propagation="true" @click.stop="viewRow(item)" class="action finish" size="mini">查看详情</button> </view> </view> </view> <view style="padding:0 30upx 30upx;"> <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="list.length==0 && status!='loading'" mode="list"></u-empty> <u-loadmore v-if="(total>=list.length&&list.length)||status=='loading'" :status="status" /> </view> </scroll-view> </swiper-item> </swiper> </view> </view> </template> <script> import { getShelfReplenishBilllList } from '@/api/shelf' import moment from 'moment' export default { components: {}, data() { return { theme:'', status: 'loading', noDataText: '暂无数据', tabList: [ { dispName: '待入库', typeId: 'WAIT_CHECK' }, { dispName: '已入库', typeId: 'FINISH' }, ], current: 0, swiperCurrent: 0, // 查询条件 pageNo: 1, pageSize: 10, list: [], total: 0, billState:'', // 状态 } }, onLoad() { let _this = this _this.pageInit() _this.theme = getApp().globalData.theme uni.$on('refreshOrder',function(data){ _this.list = [] _this.status = "loading" _this.pageInit() }) }, methods:{ // 复制 copyVin(){ uni.setClipboardData({ data: this.vinNumber||'', }) }, message(title){ uni.showToast({ icon:'none', title: title }) }, pageInit(){ this.total = 0 this.billState = this.tabList[this.current].typeId this.pageNo = 1 // 待取货 if(this.swiperCurrent == 0){ this.finishFlag = '' this.orderFlags = [] } // 已取货 if(this.swiperCurrent == 1){ this.finishFlag = 'SAVE' this.orderFlags = [] } // 已取消 if(this.swiperCurrent == 2){ this.finishFlag = 'FINI' this.orderFlags = ['UNPA','INPA'] } this.getRow() }, // tabs通知swiper切换 tabsChange(index) { this.swiperCurrent = index; }, swiperChange(event){ console.log(event.detail) this.list = [] 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; if(current != this.current){ this.$refs.uTabs.setFinishCurrent(current); this.swiperCurrent = current; this.current = current; this.pageInit() } }, // scroll-view到底部加载更多 onreachBottom() { console.log(this.list.length, this.total) if(this.list.length < this.total){ this.pageNo += 1 this.getRow() }else{ this.status = "nomore" } }, checkNums (states, i){ if(states){ let arr = states.split(',') return arr[i] } return 0 }, // 查询列表 getRow (pageNo) { let _this = this if (pageNo) { this.pageNo = pageNo } let params = { pageNo: this.pageNo, pageSize: this.pageSize, billState:this.tabList[this.current].typeId } this.status = "loading" getShelfReplenishBilllList(params).then(res => { if (res.code == 200 || res.status == 204 || 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 = _this.total>=_this.list.length ? "nomore" : 'loadmore' }) }, // 详细页 viewRow(item){ uni.navigateTo({ url: "/pagesA/digitalShelf/stockPutDetail?sn="+item.replenishBillSn }) }, // 立即入库 toPut (params,index) { let _this = this uni.showModal({ title: '提示', content: '确认立即入库?', success: (ret) => { if(ret.confirm||ret.index==0){ } } }) }, } } </script> <style lang="scss"> page{ height: 100vh; background-color: #F8F8F8; } .digitShelf-pagesCons{ width: 100%; height: 100vh; .tab-body{ width: 100%; height: 100vh; display: flex; flex-direction: column; .check-list{ height: calc(100vh - 44px); } .check-order-list{ background: #ffffff; padding: 10upx 20upx; margin: 0 25rpx 25rpx 25rpx; border-radius: 20upx; box-shadow: 1px 1px 3px #EEEEEE; .check-row{ display: flex; align-items: center; padding: 20upx 10upx; font-size: 28upx; &:first-child{ color: #666E75; font-size: 28upx; padding-bottom: 10upx; .orderNo{ font-size: 34upx; color: #222222; width: 45%; } border-bottom: 2upx solid #f5f5f5; } > view{ justify-content: space-between; &:first-child{ flex-grow: 1; width: 65%; } .carModel{ color: #222222; font-size: 32upx; font-weight: bold; line-height: normal; margin-bottom: 20rpx; } .carVin{ color: #666E75; text{ color: #033692; } } } .carImage{ padding-right: 20rpx; } .action{ padding: 0 30rpx; color: #fff; border-radius: 100rpx; font-size: 24upx; &:after{ border: 0; } &:active{ opacity: 0.5; } } .finish{ background-color: #066cff; } .del{ color: #666; border:2rpx solid #EDEDED; background: none; } } } } } .search-popup{ .search-title{ text-align: center; padding: 20upx; color: #333; border-bottom: 1px solid #eee; } .uni-list{ padding:10upx 20upx; margin: 0; border-bottom: 1px solid #EEEEEE; .uni-list-cell{ border: 0; .uni-list-cell-db{ flex: 1; width: 100%; } .uni-input{ height: 2.5em; line-height: 2.5em; font-size: 28upx; display: flex; align-items: center; > view{ &:first-child{ flex-grow: 1; color: #666; } &:last-child{ color: #999; } } } .item-icon{ margin-left: 10upx; } } } .uni-list-btns{ display: flex; padding: 50upx 20upx; uni-button{ font-size: 28upx; margin: 0 30upx; flex:1; border-radius: 100upx; &:after{ border: 0; } } } .checkbox-items{ display: flex; flex-wrap: wrap; justify-content: space-between; .checkbox{ width: 24%; background: #F8F8F8; text-align: center; margin: 20upx 0; padding: 10upx 0; border-radius: 50upx; font-size: 24upx; border:1upx solid #eee; } .checked{ background: rgba(4, 133, 246, 0.15); border-color: rgba(4, 133, 246, 0.5); color: rgba(4, 133, 246, 1); } } } </style>