<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="getShelfList" @search="getShelfList" @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"> <view class="nav-right"> <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> 累计扫描VIN数量: <text class="item-detail-text">{{item.scanVinCount || 0}}</text> </view> </view> </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="100"></u-empty> </view> <view style="padding: 20upx;" v-if="shelfList.length"> <u-loadmore :status="status" /> </view> </view> </view> </view> </template> <script> import { getShelfList } from '@/api/shelf' import { clzConfirm } from '@/libs/tools' export default { data() { return { shelfName: '', isGobleSearch: false, shelfList: [], noDataText: '暂无货架', status: 'loading', tempData: null, pageNo:1, pageSize:20 } }, onLoad() { this.getShelfList() uni.setNavigationBarColor({ frontColor: '#ffffff', backgroundColor: this.$config('primaryColor') }) }, methods: { clearSearch(){ this.shelfName = '' this.shelfList = [] this.getShelfList() }, change(v){ if(v==''){ this.clearSearch() } }, // 获取数字货架列表 getShelfList(){ const _this = this // if(this.shelfName == ''){ // this.pageNo = 1 // this.total = 0 // } let params = { pageNo: _this.pageNo, pageSize: _this.pageSize, shelfName: _this.shelfName } _this.status = 'loading' getShelfList(params).then(res => { 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 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 : '网络似乎出错了,请稍后再试' } }) }, viewDetail(item){ uni.navigateTo({ url:"/pages/vinAnalyse/shelfAnalyse?shelfSn="+item.shelfSn + '&shelfName='+item.shelfName }) }, }, // 上拉加载更多 onReachBottom () { if(this.shelfList.length < this.total ){ if(this.isGobleSearch&&this.shelfName==''){ return } this.pageNo++ this.getShelfList() }else{ this.status = "nomore" } } } </script> <style lang="less"> .moreShelfPart{ width: 100%; height: 100vh; background-color: #f8f8f8; .moreShelfPart-search{ padding: 20rpx; } .moreShelfPart-body{ flex-grow: 1; } .nav-right{ padding: 0 30upx; box-sizing: border-box; overflow: auto; .nav-right-item{ padding:20upx; border: 2rpx solid #f5f5f5; border-radius: 15upx; margin-bottom: 20upx; box-shadow: 3rpx 3rpx 8rpx #eee; background-color: #ffff; &:active{ background: #f8f8f8; } .item-info{ .item-name{ font-size: 30upx; display: flex; align-items: center; } .item-detail{ margin-top: 15rpx; display: flex; align-items: center; justify-content: space-between; color: #9DA8B5; font-size: 26upx; .item-detail-text{ font-size: 26upx; color: #333; } } } .button-box{ display: flex; margin-top: 20upx; button{ margin: 0 10upx; } > text{ font-size: 24upx; color: #00aaff; } } } } } </style>