<template> <view class="moreShelfPart flex flex_column"> <view class="moreShelfPart-search"> <u-search placeholder="请输入货架名称搜索" v-model="shelfName" :show-action="isGobleSearch" @input="change" @focus="isGobleSearch=true" @blur="isGobleSearch=false" @custom="search" @search="search" @clear="clearSearch" :action-style="{'color': '#fff', 'font-size': '24upx', 'background-color': '#57a3f3', 'border-radius': '6upx', 'padding': '12upx 0'}"> </u-search> </view> <view class="flex align_center justify_between" style="padding: 10rpx 20rpx 20rpx;"> <view class="flex align_center"> <text>待补货产品款数</text> <view class="flex flex_column" style="margin-left: 5rpx;"> <u-icon name="arrow-up-fill" size="12" color="#333"></u-icon> <u-icon name="arrow-down-fill" size="12" color="#ccc"></u-icon> </view> </view> <view class="flex align_center"> <text>待补货产品数量</text> <view class="flex flex_column" style="margin-left: 5rpx;"> <u-icon name="arrow-up-fill" size="12" color="#ccc"></u-icon> <u-icon name="arrow-down-fill" size="12" color="#ccc"></u-icon> </view> </view> <view class="flex align_center"> <text>最后一次补货时间</text> <view class="flex flex_column" style="margin-left: 5rpx;"> <u-icon name="arrow-up-fill" size="12" color="#ccc"></u-icon> <u-icon name="arrow-down-fill" size="12" color="#ccc"></u-icon> </view> </view> </view> <view class="moreShelfPart-body"> <scroll-view class="nav-right" scroll-y @scrolltolower="onreachBottom"> <view class="nav-right-item" v-for="(item, index) in shelfList" :key="item.id" @click="viewDetail(item)"> <view class="item-info"> <view class="item-name"> <text>{{item.shelfName}}</text> </view> <view class="item-detail"> <view> 待补货产品款数: <text class="item-detail-text">{{item.shelfPlaceBindNum}}</text> </view> <view> 待补货产品数量: <text class="item-detail-text">{{item.shelfPlaceNum}}</text> </view> </view> <view class="item-detail"> <view> 最后一次补货时间: <text class="item-detail-text">{{item.createDate}}</text> </view> </view> </view> <view class="arrow"> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view v-if="shelfList&&shelfList.length==0"> <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="180" :text="noDataText" mode="list" :margin-top="50"></u-empty> </view> <view style="padding: 20upx;" v-else> <u-loadmore :status="status" /> </view> </scroll-view> </view> </view> </template> <script> import { getShelfList, shelfSave } from '@/api/shelf' export default { data() { return { shelfName: '', isGobleSearch: false, shelfList: [], pageNo:1, pageSize: 15, total: 0, // 列表总数 noDataText: '暂无货架', status: 'loading', tempData: null } }, onLoad(opts) { uni.$on("setCustome",(data)=>{ this.saveShelf(data) }) }, onUnload() { uni.$off("setCustome") }, onShow() { this.search() }, methods: { clearSearch(){ this.shelfName = '' this.search() }, change(v){ if(v==''){ this.clearSearch() } }, search(){ this.pageNo = 1 this.shelfList = [] this.getShelfList() }, // 关联客户 saveShelf(data){ uni.showLoading({ mask: true, title: '正在关联客户...' }) shelfSave({ shelfSn: this.tempData.shelfSn, customerSn: data.customerSn }).then(res => { if(res.status == 200){ uni.navigateTo({ url: "/pages/shelfSetting/shelfSet?shelfSn="+this.tempData.shelfSn }) } uni.hideLoading() }) }, // 获取数字货架列表 getShelfList(){ const _this = this let params = { pageNo: this.pageNo, pageSize: this.pageSize, shelfName: this.shelfName } _this.status = 'loading' getShelfList(params).then(res => { uni.hideLoading() if(res.status == 200){ let list = res.data.list if (list && list.length){ // 分页 拼接数据 if(_this.pageNo>1){ _this.shelfList = _this.shelfList.concat(res.data.list || []) }else{ _this.shelfList = res.data.list } _this.total = res.data.count console.log(res.data.count) if (_this.shelfList.length == res.data.count) { _this.status = 'nomore' } else { _this.status = 'loadmore' } } else { _this.shelfList = list || [] _this.total = 0 _this.status = 'nomore' _this.noDataText = '没有查询到相关货架' } _this.noDataText = '暂无货架' }else{ _this.status = 'loadmore' _this.shelfList = [] _this.total = 0 _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } }) }, // 加载更多 onreachBottom () { if(this.shelfList.length < this.total ){ if(this.isGobleSearch&&this.shelfName==''){ return } this.pageNo++ this.getShelfList() }else{ this.status = "nomore" } }, viewDetail(item){ this.tempData = item uni.navigateTo({ url: "/pages/soldOut/creatOrder?data="+encodeURIComponent(JSON.stringify(this.tempData)) }) } } } </script> <style lang="less"> .moreShelfPart{ width: 100%; height: 100vh; background-color: #f8f8f8; .moreShelfPart-search{ padding: 20rpx; background-color: #fff; } .moreShelfPart-body{ flex-grow: 1; } .nav-right{ padding: 0 30upx; height: calc(100vh - 170rpx); box-sizing: border-box; .nav-right-item{ padding:20upx; border: 2rpx solid #f5f5f5; border-radius: 15upx; margin-bottom: 20upx; box-shadow: 3rpx 3rpx 8rpx #eee; background-color: #fff; display: flex; align-items: center; &:active{ background: #f8f8f8; } .arrow{ text-align: right; padding-left: 20rpx; } .item-info{ flex:1; .item-name{ font-size: 30upx; display: flex; align-items: center; } .item-detail{ margin-top: 10rpx; display: flex; align-items: center; justify-content: space-between; color: #666; font-size: 26upx; .item-detail-text{ font-size: 26upx; } } } } } } </style>