<template> <view class="sockQuery flex flex_column"> <view class="search-box"> <u-search placeholder="请输入货位号/产品编码/产品名称搜索" @search="pageInit()" @custom="pageInit()" v-model="queryWord"></u-search> </view> <swiper class="list-box"> <swiper-item class="swiper-item" style="height: 100%;width: 100%;overflow: hidden;"> <scroll-view scroll-y style="height: 100%;width: 100%;overflow: auto;" @scrolltolower="onreachBottom"> <view class="list-item flex align_center justify_between" v-for="item in list" :key="item.id"> <view> <u-image :src="item.images||'@/static/def_imgs.png'" width='120' height="120"></u-image> </view> <view> <view class="flex align_center justify_between"> <view class="vin-text"> <text class="hj-no">{{item.shelfPlaceCode}}</text> <text>{{item.code}}</text> </view> <view class="time-text"> 库存:<text>{{item.qty}}个</text> </view> </view> <view class="flex" v-if="item.productTypeSn3=='543766811373752320'" style="padding-top: 5px;"> <text style="width: 4.5rem;color: #999;">原厂编码:</text> <view style="width: 50%;flex-grow: 1;"> <u-tag :text="item.origCode" mode="light" borderColor="#ffffff" type="warning" size="large"></u-tag> </view> </view> <view>{{item.productName}}</view> </view> </view> <view style="padding: 20upx;"> <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> </template> <script> import { getShelfProductStockList } from '@/api/shelf.js' export default { data() { return { status: 'loading', noDataText: '暂无数据', pageNo: 1, pageSize: 10, total: 0, queryWord: "", list: [] } }, onLoad() { this.getList() }, methods: { pageInit(){ this.total = 0 this.pageNo = 1 this.list = [] this.getList() }, // 查询列表 getList (pageNo) { let _this = this if (pageNo) { this.pageNo = pageNo } // 状态条件 let params = { pageNo: this.pageNo, pageSize: this.pageSize, queryWord: this.queryWord } this.status = "loading" getShelfProductStockList(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' }) }, // scroll-view到底部加载更多 onreachBottom() { if(this.list.length < this.total){ this.pageNo += 1 this.getList() }else{ this.status = "nomore" } }, } } </script> <style lang="less"> .sockQuery{ width: 100%; height: 100vh; background: #f8f8f8; .search-box{ padding: 20rpx 30rpx; } .list-box{ flex-grow: 1; overflow: auto; /deep/ .u-tag{ word-break: break-all; } } .list-item{ margin: 20rpx 30rpx; border:2rpx solid #f8f8f8; box-shadow: 2rpx 2rpx 6rpx #eee; border-radius: 20rpx; padding: 20rpx 15rpx; background: #ffffff; > view{ padding: 0 10rpx; &:last-child{ flex-grow: 1; >view{ padding: 10rpx 0; } } } .time-text{ color: #999; text{ color: #333; } } .vin-text{ .hj-no{ background: #2196F3; color: #ffffff; display: inline-block; border-radius: 10rpx; padding: 0 10rpx; margin-right: 10rpx; } } &:first-child{ margin-top: 0; } &:active{ opacity: 0.6; transform:scale(0.9); } } } </style>