<template> <view class="stockSearch-wrap"> <!-- 统计 --> <view class="panel-box"> <view class="item-box"> <view>查询结果</view> <view>{{toThousands(totalNum||0)}}条</view> </view> <view class="item-box"> <view>可用库存数量</view> <view>{{toThousands(totalData&&totalData.totalCurrentStockQty||0)}}个</view> </view> <view class="item-box"> <view>可用库存成本</view> <view>¥{{toThousands(totalData&&totalData.totalCurrentStockCost||0, 2)}}</view> </view> </view> <!-- 查询结果 --> <scroll-view class="stockSearch-con" scroll-y @scrolltolower="onreachBottom"> <view class="stockSearch-main"> <view class="stockSearch-main-item" v-for="(item, index) in listData" :key="item.id" @click.stop="getDetail(item)"> <view class="stockSearch-tit flex"> <!-- <view class="u-line" :style="{backgroundColor: $config('primaryColor')}"></view> --> <view class="u-name"> {{item.productName}} </view> <view class="u-last"> <copyText :text="item.productName" label="产品名称"></copyText> </view> </view> <view class="stockSearch-item-con flex align_center"> <view class="pimgs"> <u-image :src="item.productMsg?item.productMsg:`../../static/${theme}/def_img@2x.png`" width="128" height="128" border-radius="10"></u-image> </view> <view class="flex_1"> <view>产品编码:{{item.productCode || '--'}}</view> <view class="padding_3">原厂编码:{{item.productOrigCode || '--'}}</view> <view class="flex align_center justify_between"> <view class="font_13"> 可用数量:{{toThousands(item.currentStockQty||0)}}{{item.productUnit}} </view> <view class="font_13"> 库存成本: ¥{{toThousands(item.currentStockCost||0, 2)}} </view> </view> </view> </view> </view> <view v-if="listData&&listData.length==0"> <u-empty v-if="status!='loading'" :src="`/static/${$config('themePath')}/def_no_data@3x.png`" icon-size="240" :text="noDataText" mode="list" :margin-top="50"></u-empty> </view> <view style="padding: 20upx;" v-if="totalNum>pageSize || status=='loading'"> <u-loadmore :status="status" /> </view> </view> </scroll-view> </view> </template> <script> import { toThousands } from '@/libs/tools' import { stockList, stockCount } from '@/api/stock' import copyText from '@/pages/common/copyText.vue' export default{ components:{copyText}, data(){ return { totalData: null, totalNum: 0, status: 'loading', listData: [], pageNo: 1, pageSize: 50, params: {}, noDataText: '暂无数据', theme: '', toThousands } }, onLoad(option) { this.theme = getApp().globalData.theme this.params = option.data ? JSON.parse(option.data) : {} this.getList() }, methods: { // 列表 getList(pageNo){ const _this = this if (pageNo) { this.pageNo = pageNo } this.status = 'loading' let params = Object.assign(this.params, { pageNo: this.pageNo, pageSize: this.pageSize }) stockList(params).then(res => { this.getTotal(params) if(res.status == 200){ let list = res.data.list if (list && list.length){ // 分页 拼接数据 if (_this.pageNo != 1) { _this.listData = _this.listData ? _this.listData.concat(list) : list } else { _this.listData = list } this.totalNum = res.data.count if (_this.listData.length == res.data.count) { _this.status = 'nomore' } else { _this.status = 'loadmore' } } else { _this.listData = list || [] this.totalNum = 0 _this.status = 'nomore' } _this.noDataText = '暂无配件' }else{ _this.status = 'loadmore' _this.listData = [] _this.totalNum = 0 _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } }) }, // 合计 getTotal (params) { stockCount(params).then(res => { if (res.status == 200 && res.data) { this.totalData = res.data } else { this.totalData = null } }) }, // scroll-view到底部加载更多 onreachBottom() { if(this.listData.length < this.totalNum){ this.pageNo += 1 this.getList() }else{ this.status = "nomore" } }, // 详情 getDetail(data){ uni.navigateTo({ url: "/pages/stock/detaiList?data="+JSON.stringify(data) }) } } } </script> <style lang="scss"> .stockSearch-wrap{ width: 100%; height: 100vh; .panel-box { background-color: #ffffff; padding: 20upx 0; box-shadow: 3upx 2upx 6upx #eee; margin-bottom: 20upx; display: flex; justify-content: space-between; align-items: center; .item-box{ text-align: center; width: 33.33%; border-right: 1px solid #e4e7ed; } .item-box:last-child{ border-right: none; } } .stockSearch-con{ height: calc(100vh - 138upx); .stockSearch-main{ .stockSearch-main-item{ background: #ffffff; padding: 20upx; margin-bottom: 25upx; border-radius: 25upx; box-shadow: 1px 1px 3px #EEEEEE; .stockSearch-tit{ padding-bottom: 20upx; border-bottom: 1px solid #e4e7ed; font-weight: 900; // white-space: nowrap; // overflow: hidden; // text-overflow: ellipsis; .u-line{ display: inline-block; width: 6upx; height: 40upx; background-color: red; vertical-align: bottom; margin: 0 20upx 0 10upx; } } .stockSearch-item-con{ padding: 20upx 20upx 6upx; font-size: 26upx; .pimgs{ margin-right: 16upx; } .font_13{ font-size: 26upx; } .padding_3{ padding: 6upx 0; } } } } } } </style>