<template> <view class="content flex flex_column"> <view class="searchBar"> <view class="search flex align_center"> <view class="input"> <u-search focus v-model="queryWord" @input="change" @custom="search" @search="search" @clear="clearSearch" :height="90" bg-color="#fff" :action-style="{borderRadius:'50rpx',color:'#ffffff',width: '120rpx',padding:'12rpx 20rpx',background:'#00aaff'}" placeholder="请输入产品编码搜索"></u-search> </view> </view> </view> <view class="check-list"> <scroll-view scroll-y class="scroll-view" @scrolltolower="onreachBottom"> <view class="partList-list-box" v-for="item in partList" :key="item.id"> <view class="product flex align_center" @click="toEdit(item)"> <view class="flex align_center flex_1"> <view class="pimgs"> <u-image :src="item.images?item.images:`/static/def_imgs.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="pinfo"> <view class="pname flex align_center justify_between"> <view class="code"><text>{{item.shelfPlaceCode}}</text>{{item.code}}</view> </view> <view class="ptxt"> <view> <text class="pcode">{{item.name}}</text> </view> </view> <view class="pname flex align_center justify_between"> <view class="pcode" v-if="showPrice[0]"> <view v-if="showPrice[1]=='PURCHASES_PRICE'"> <text class="item-price" v-if="isAdmin || showPrice[2]">价格:{{item.cost||0}}</text> </view> <text v-else class="item-price">价格:{{item.price||0}}</text> </view> <view class="kc">库存:<text>{{item.currentInven}}</text>{{item.unit}}</view> </view> </view> </view> </view> </view> <view style="padding: 20upx;"> <u-empty :src="`/static/nodata.png`" icon-size="180" :text="noDataText" img-width="120" v-if="partList.length==0 && status!='loading'" mode="list"></u-empty> <u-loadmore v-if="(total>=partList.length&&partList.length)||status=='loading'" :status="status" /> </view> </scroll-view> </view> </view> </template> <script> import { getShelfProductList } from '@/api/shelf' export default { data() { return { queryWord: '', shelfName:'', shelfSn: '', pageNo:1, pageSize: 20, total: 0, // 列表总数 noDataText: '暂无产品', status: 'nomore', partList: [], } }, onLoad(opts) { this.shelfSn = this.$store.state.vuex_storeShelf.shelfSn uni.$on("updateQueryByCodeList",()=>{ this.getpartList() }) }, computed: { userInfo(){ return this.$store.state.vuex_userInfo }, showPrice(){ return this.$store.state.vuex_showPrice }, isAdmin(){ return this.userInfo.superAdmin == 1 } }, onUnload() { uni.$off("updateQueryByCodeList") }, methods: { //拿货 toEdit(item){ if(item.currentInven){ const params = { shelfSn: this.shelfSn, billSource: 'product_code' } this.$store.state.vuex_tempData = Object.assign(params, item) uni.navigateTo({ url: '/pagesA/queryByCode/confirmQh' }) }else{ uni.showToast({ icon:'none', title: '库存不足,不能拿货!', duration: 4000 }) } }, change(v){ if(v==''){ this.clearSearch() } }, clearSearch(){ this.queryWord = '' this.search() }, search(){ this.pageNo = 1 this.partList = [] this.getpartList() }, // 获取数字货架列表 getpartList(){ const _this = this let params = { pageNo: this.pageNo, pageSize: this.pageSize, code: this.queryWord.trim(), } _this.status = 'loading' getShelfProductList(params).then(res => { uni.hideLoading() if(res.status == 200){ let list = res.data.list console.log(list) if (list && list.length){ // 分页 拼接数据 if (_this.pageNo != 1) { _this.partList = _this.partList ? _this.partList.concat(list) : list } else { _this.partList = list } this.total = res.data.count if (_this.partList.length == res.data.count) { _this.status = 'nomore' } else { _this.status = 'loadmore' } } else { _this.partList = list || [] this.total = 0 _this.status = 'nomore' } _this.noDataText = '暂无匹配产品' }else{ _this.status = 'loadmore' _this.partList = [] _this.total = 0 _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } this.showTab = false }) }, // 加载更多 onreachBottom () { if(this.partList.length < this.total ){ this.pageNo++ this.getpartList() }else{ this.status = "nomore" } }, } } </script> <style lang="less"> .content{ height: 100vh; width: 100%; padding: 0 0.5rem; background: #fff; .searchBar{ padding: 0 0.3rem; .search{ padding: 0.5rem 0.5rem 0.3rem 0.5rem; .input{ flex-grow: 1; border:0.1rpx solid #eee; padding: 0.1rpx; border-radius: 50rpx; padding-right: 10rpx; } } } .check-list{ flex-grow: 1; .scroll-view{ height: calc(100vh - 180rpx); box-sizing: border-box; } .partList-list-box{ padding: 20rpx 30rpx; border-bottom: 2rpx solid #f5f5f5; &:last-child{ border:0; } .product{ flex-grow: 1; &:active{ opacity: 0.6; background-color: #f8f8f8; } .pinfo{ flex-grow: 1; padding-left: 20rpx; .pname{ font-size: 28rpx; color: #191919; .code{ text{ font-weight: normal; margin-right: 6rpx; padding: 0 10rpx; background: rgba(3, 54, 146, 0.15); border-radius: 20rpx; color: #033692; font-size: 24rpx; } } .kc{ color: #999; text{ color: #333; } } } .ptxt{ font-size: 28rpx; color: #333; font-weight: bold; margin: 10rpx 0; .pnums{ color: #222; } } } } } } } </style>