123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226 |
- <template>
- <view class="productList flex flex_column">
- <view class="productList-search">
- <view class="search flex align_center">
- <view class="input">
- <u-search
- focus
- 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>
|