<template> <view class="productList flex flex_column"> <view class="productList-search"> <view class="search flex align_center"> <view class="input"> <u-search v-model="queryWord" @input="$u.debounce(getProductList, 800)" @custom="$u.debounce(getProductList, 500)" @search="$u.debounce(getProductList, 500)" @clear="clearSearch" bg-color="#fff" :show-action="false" placeholder="请输入产品编码查询并选择产品"></u-search> </view> <view class="icon" @click="toScan"> <u-icon name="scan"></u-icon> </view> </view> </view> <view class="productList-body"> <view class="nav-right-item" v-for="(item, index) in productList" :key="item.id" @click="choose(item)"> <view class="item-info"> {{item.code}} </view> <view class="arrow"> <u-icon name="arrow-right" color="#969da3" size="28"></u-icon> </view> </view> <view v-if="productList&&productList.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="50"></u-empty> </view> <view style="padding: 20upx;" v-if="total>pageSize || status=='loading'"> <u-loadmore :status="status" :load-text="loadText" /> </view> </view> </view> </template> <script> import { bindProductList } from '@/api/shelf' export default { data() { return { queryWord: '', isGobleSearch: false, productList: [], pageNo:1, pageSize: 20, total: 0, // 列表总数 noDataText: '暂无产品', status: 'nomore', customerSn: null, shelfSn: null, loadText: { loading: '搜索中..', nomore: '最多显示前20条匹配的产品,请尝试输入更多内容' } } }, onLoad(opts) { this.customerSn = opts.customerSn||'' this.shelfSn = opts.shelfSn console.log(this.customerSn) }, methods: { clearSearch(){ this.queryWord = '' this.pageNo = 1 this.total = 0 this.productList = [] this.getProductList() }, // 获取产品列表 getProductList(){ if(this.queryWord == ''){ this.pageNo = 1 this.total = 0 this.productList = [] return } const _this = this let params = { pageNo: this.pageNo, pageSize: this.pageSize, code: this.queryWord, customerSn: this.customerSn } _this.status = 'loading' bindProductList(params).then(res => { uni.hideLoading() if(res.status == 200){ let list = res.data.list if (list && list.length){ // 分页 拼接数据 if (_this.pageNo != 1) { _this.productList = _this.productList ? _this.productList.concat(list) : list } else { _this.productList = list } this.total = res.data.count _this.status = 'nomore' } else { _this.productList = list || [] this.total = 0 _this.status = 'nomore' _this.noDataText = '没有查询到相关产品' } }else{ _this.status = 'nomore' _this.productList = [] _this.total = 0 _this.noDataText = res.message ? res.message : '网络似乎出错了,请稍后再试' } }) }, // 选择产品 choose(item){ uni.$emit("addProductToHw",item) uni.navigateBack() }, // 扫描 toScan(){ this.mpaasScanModule = uni.requireNativePlugin("wss-scan") this.mpaasScanModule.scan( { "scanMode":"Customized", "scanStyle":{ "scanFrameSizePlus":{"width":250,"height":250}, "scanFrameSize":200, "scanLight":"visible", "scanText":"对准条形码/二维码进行识别", "scanTitle":"扫码搜索货位产品", } }, (result) => { console.log(result) if(result.scanStatus == 1){ this.scanResult(result) } }) }, // 扫描结果 scanResult(data){ const params = { pageNo: 1, pageSize:1, customerSn: this.customerSn } // 二维码 if(data.scanType == 'QRCODE'){ const ret = data.scanValue.split("&") params.code = ret[1] // 产品编码 }else{ params.qrCode = data.scanValue } bindProductList(params).then(res => { console.log(res) if(res.status == 200){ if(res.data&&res.data.list.length){ this.choose(res.data.list[0]) }else{ uni.showToast({ icon: "none", title: "没有查找到此产品,请重新扫描", duration: 5000 }) } } }) } } } </script> <style lang="less"> .productList{ width: 100%; height: 100vh; .productList-search{ padding: 20rpx 30rpx; background-color: #FFFFFF; .search{ padding: 0.1rem; border-radius: 50rpx; border:1rpx solid #eee; .input{ flex-grow: 1; padding: 4rpx; } .icon{ width: 13%; text-align: center; font-size: 46rpx; color: #999; } } } .productList-body{ flex-grow: 1; background-color: #fff; padding: 0 40upx; overflow: auto; .nav-right-item{ padding:20upx 0; border-bottom: 2rpx solid #f5f5f5; display: flex; align-items: center; &:active{ background: #f8f8f8; } .arrow{ text-align: right; padding-left: 20rpx; } .item-info{ font-size: 30upx; flex-grow:1; } } } } </style>