<template> <view class="content flex flex_column"> <uni-nav-bar left-icon="back" title="按编码查询" @clickLeft="back" statusBar fixed></uni-nav-bar> <view class="check-list"> <scroll-view scroll-y type="custom" class="scroll-view" @scrolltolower="onreachBottom"> <sticky-header> <view class="searchBar"> <uni-search-bar radius="100" focus cancelButton="none" placeholder="请输入产品编码搜索" bg-color="#f3f3f3" @input="change" @confirm="search" @blur="search" @clear="clearSearch" v-model="queryWord" clearButton="auto"/> </view> </sticky-header> <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="flex align_center" v-if="item.productTypeSn=='543766811373752320'&&item.origCode" style="padding-top: 5px;"> <text class="item-detail-text">原厂编码:</text> <view style="width: 50%;flex-grow: 1;"> <uni-tag :text="item.origCode" inverted :circle="true" type="warning"></uni-tag> </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"> <text class="item-price" v-if="showCarPrice">价格:{{item.price?'¥'+item.price:'暂无'}}</text> <text class="item-price" v-if="showCostPrice">价格:{{item.cost?'¥'+item.cost:'暂无'}}</text> </view> <view class="kc">库存:<text>{{item.currentInven}}</text>{{item.unit}}</view> </view> </view> </view> <view class="flex align_center justify_center"> <uni-icons type="arrowright" size="20" color="#999"></uni-icons> </view> </view> </view> <view style="padding: 20upx;"> <sklineTemp v-if="partList.length==0 && status!='loading'" :text="noDataText"/> <uni-load-more v-if="(total>=partList.length&&partList.length)||status=='loading'" :status="status"/> </view> </scroll-view> </view> </view> </template> <script> import sklineTemp from '@/components/skline/sklineTemp.vue' import { getShelfProductList,findShelfUserParam } from '@/api/shelf' export default { components:{ sklineTemp }, data() { return { queryWord: '', shelfName:'', shelfSn: '', pageNo:1, pageSize: 20, total: 0, // 列表总数 noDataText: '暂无产品', status: 'nomore', partList: [], priceShowVal: null, // 是否可以查看所有价格 showCarPrice: false, // 显示车主价 showCostPrice: false, // 显示成本价 } }, onLoad(opts) { this.shelfSn = this.$store.state.vuex_storeShelf.shelfSn uni.$on("updateQueryByCodeList",()=>{ this.getpartList() }) // 价格显示权限 this.getShowPriceType() }, computed: { userInfo(){ return this.$store.state.vuex_userInfo }, isAdmin(){ return this.userInfo.superAdmin == 1 } }, onUnload() { uni.$off("updateQueryByCodeList") }, methods: { back(){ uni.navigateBack() }, getShowPriceType(){ findShelfUserParam({shelfSn: this.shelfSn}).then(res => { this.priceShowVal = res.data ? res.data.carOwnerPrice == '1' && res.data.purchasesPrice == '1' : false // 选中了2中价格,则从列表显示价格中取值 if(this.priceShowVal){ // 进货价 this.showCostPrice = res.data.priceShowType == 'PURCHASES_PRICE' // 车主价 this.showCarPrice = res.data.priceShowType == 'CAR_OWNER_PRICE' }else{ // 进货价 this.showCostPrice = res.data ? res.data.purchasesPrice == '1' : false // 车主价 this.showCarPrice = res.data ? res.data.carOwnerPrice == '1' : false } }) }, //拿货 toEdit(item){ if(item.currentInven){ const params = { shelfSn: this.shelfSn, billSource: 'product_code', showPrice: this.showCarPrice ? item.price : (this.showCostPrice?item.cost:'') } 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.pageNo = 1 this.partList = [] }, search(){ if(this.queryWord == ''){ return } 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 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; background: #fff; .check-list{ flex-grow: 1; background: #f8f8f8; .scroll-view{ height: 100%; box-sizing: border-box; .searchBar{ background-color: #fff; } } .partList-list-box{ padding: 10rpx 20rpx; &:last-child{ border:0; } .product{ flex-grow: 1; padding: 20rpx; background-color: #fff; border-radius: 10rpx; box-shadow: 1px 1px 3px #eee; &:active{ opacity: 0.6; background-color: #f8f8f8; } .pinfo{ flex-grow: 1; padding-left: 20rpx; width: 80%; /deep/ .uni-tag{ word-break: break-all; font-size: 28rpx; color: #0fab04eee; border: 0; padding: 0.2rem 0.3rem; } .item-detail-text{ color: #999; } .pname{ font-size: 28rpx; color: #191919; .code{ display: flex; align-items: center; 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{ display: flex; align-items: center; color: #999; text{ color: #333; } } } .ptxt{ font-size: 28rpx; color: #333; font-weight: bold; margin: 10rpx 0; .pnums{ color: #222; } } } } } } } </style>