<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="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 flex justify_between"> <text style="maring-right:10px;">{{item.shelfName}}</text> <u-tag size='mini' type="info" shape="circle" v-if="item.state=='WRITE_OFF'" text="已注销"></u-tag> <u-tag size='mini' type="info" shape="circle" v-if="item.state=='DISABLED'" text="已停用"></u-tag> </view> <view class="item-detail"> <view> 货位数量: <text class="item-detail-text">{{item.shelfPlaceNum}}</text> </view> <view> 已绑定产品款数: <text class="item-detail-text">{{item.shelfPlaceBindNum}}</text> </view> <view> 设置完成: <text class="item-detail-text">{{item.finishFlag == 1 ? '是': '否'}}</text> </view> </view> </view> <view class="arrow" v-if="item.state!='WRITE_OFF'&&item.state!='SUSPEND'"> <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) }) uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: this.$config('primaryColor') }) }, 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){ if(item.state=='WRITE_OFF'){ uni.showToast({ icon: 'none', title: "此货架已注销" }) return } if(item.state=='SUSPEND'){ return } this.tempData = item // 又关联客户 if(item.customerEntity){ uni.navigateTo({ url: "/pages/shelfSetting/shelfSet?shelfSn="+item.shelfSn }) }else{ uni.navigateTo({ url: "/pages/sales/chooseCustomer?backPage=shelfSeting&shelfName="+item.shelfName }) } } } } </script> <style lang="less"> .moreShelfPart{ width: 100%; height: 100vh; .moreShelfPart-search{ padding: 20rpx; background-color: #FFFFFF; } .moreShelfPart-body{ flex-grow: 1; background-color: #fff; } .nav-right{ padding: 0 30upx; height: calc(100vh - 110rpx); box-sizing: border-box; .nav-right-item{ padding:20upx 10upx; border-bottom: 2rpx solid #f5f5f5; 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: #9DA8B5; font-size: 26upx; .item-detail-text{ font-size: 26upx; color: #333; } } } } } } </style>