<template> <view class="p-content"> <view class="p-head"> <view> <text>条形码:</text> <view style="flex-grow: 1;display: flex;align-items: center;"> <input class="uni-input" placeholder="扫描或输入条码" border="surround" @confirm="queryProduct(0)" v-model="query.qrCode"> </view> </view> <view> <text>产品编码:</text> <view style="flex-grow: 1;display: flex;align-items: center;"> <input class="uni-input" placeholder="请输入产品编码" @confirm="queryProduct(0)" border="surround" v-model="query.code"> </view> </view> <view> <text>产品名称:</text> <view style="flex-grow: 1;display: flex;align-items: center;"> <input class="uni-input" placeholder="请输入产品名称" @confirm="queryProduct(0)" border="surround" v-model="query.name"> </view> </view> <view> <button type="primary" size="mini" @click="queryProduct(0)" :style="{padding:'5px 30px'}">查询</button> </view> </view> <view class="p-body"> <view class="uni-table"> <!-- 表头行 --> <uni-tr> <uni-td width="30%" align="center">产品编码</uni-td> <uni-td width="40%" align="center">产品名称</uni-td> <uni-td width="30%" align="center">条形码</uni-td> </uni-tr> </view> <scroll-view enable-flex scroll-y="true" class="table-scroll-body" @scrolltolower="scrolltolower"> <uni-table style="width: 100%;" border :loading="loading"> <!-- 表格数据行 --> <uni-tr v-for="item in detailList" :key="item.id" :checkedRow="tempProduct&&tempProduct.id == item.id" @click="toEdit(item)"> <uni-td width="30%" align="center">{{item.code}}</uni-td> <uni-td width="40%" align="center">{{item.name}}</uni-td> <uni-td width="30%" align="center">{{item.qrCode}}</uni-td> </uni-tr> </uni-table> </scroll-view> </view> <scanCode></scanCode> <uni-popup ref="popup" :mask-click="false" type="dialog"> <view style=" font-size: 30rpx; background-color: #fff; padding: 30rpx 50rpx; border-radius: 30rpx; width: 80%; margin: 0 auto;"> <view style="line-height: 60rpx;width: 600rpx;" v-if="tempProduct"> <view> 产品编码:{{tempProduct.code}} </view> <view> 产品名称:{{tempProduct.name}} </view> <view style="display: flex;align-items: center;padding-top: 15rpx;"> <text>条形码:</text> <input :focus="true" style="width:350rpx;" class="uni-input" placeholder="扫描或输入条码" @confirm="okPop" border="surround" v-model="code"> </view> </view> <view style="display: flex;padding: 50rpx 15rpx 10rpx;justify-content: center;"> <button size="mini" @click="closePop" :style="{padding:'5px 20px'}">取消</button> <button size="mini" type="primary" :loading="subloading" @click="okPop" :style="{padding:'5px 20px'}">确定</button> </view> </view> </uni-popup> </view> </template> <script> import { dealerProductList, dealerProductSave } from '@/config/api.js' import scanCode from '@/libs/scan-code.vue'; import { playAudio } from '@/libs/tools.js' export default { components: { scanCode }, data() { return { loading: false, subloading: false, query:{ qrCode:'', name:'', code:'' }, detailList:[], code:'', tempProduct: null, pageNo: 1, pageSize: 10, total: 0, }; }, onLoad(opts) { var _this = this uni.$on('scancodedate', function(content) { console.log("扫描到的内容为:", content) if(_this.tempProduct){ _this.code = content||'' }else{ _this.query.qrCode = content||'' _this.queryProduct(0) } }) }, onShow() { this.hideKeyborder() }, onUnload() { uni.$off('scancodedate') }, onBackPress() { if(this.tempProduct){ this.closePop() return true } }, methods: { closePop(){ this.code = '' this.tempProduct = null this.$refs.popup.close() }, okPop(){ if(this.code){ this.productSave() }else{ uni.$u.toast("请输入或扫描条码!") } }, hideKeyborder(){ uni.hideKeyboard() }, productSave(){ this.subloading = true const prams = JSON.parse(JSON.stringify(this.tempProduct)) prams.qrCode = this.code console.log(prams) dealerProductSave(prams).then(res => { if(res.status == 200){ this.pageNo = 1 this.queryProduct(1) this.closePop() } this.subloading = false }) }, // 查询产品 queryProduct(flag){ if(this.query.code==''&&this.query.qrCode==''&&this.query.name==''){ if(!flag){ uni.$u.toast("请输入查询条件!") playAudio('error') return } } const params = { pageNo:this.pageNo, pageSize: this.pageSize , sysFlag: "0" } this.loading = true dealerProductList({...params,...this.query}).then(res => { console.log(res) if(res.status == 200){ const list = res.data.list||[] this.total = res.data.count if(this.pageNo == 1){ this.detailList = list }else{ this.detailList = this.detailList.concat(list) } } this.loading = false }) }, scrolltolower(e){ const pageNums = Math.ceil(this.total / this.pageSize) if(this.pageNo < pageNums){ this.pageNo = this.pageNo + 1 this.queryProduct() }else{ uni.$u.toast("没有更多数据了!") } }, // 编辑 toEdit(item) { this.tempProduct = item this.code = item.qrCode || '' this.$refs.popup.open() this.hideKeyborder() } }, } </script> <style lang="scss"> $border-color:#EBEEF5; .p-content{ button{ line-height: 1.7; } .uni-table { position: relative; width: 100%; border-radius: 5px; background-color: #fff; /* #ifndef APP-NVUE */ box-sizing: border-box; display: table; overflow-x: auto; ::v-deep .uni-table-tr:nth-child(n + 2) { &:hover { background-color: #f5f7fa; } } ::v-deep .uni-table-td{ border-right: 1px $border-color solid; } /* #endif */ } .table-scroll-body{ height: calc(100% - 32px); width: 100%; overflow: auto; } .p-head{ font-size: 32upx; color: $uni-text-color; >view{ display: flex; align-items: center; padding: 15upx 20upx; justify-content: space-between; > view{ display: flex; padding: 0 10upx; align-items: center; } } } .p-body{ overflow: auto; flex-grow: 1; height: 50%; } .uni-input{ border: 1px solid #eee; width: 100%; padding:10upx; font-size: 32rpx; } .p-footer{ padding:20upx 30upx; display: flex; > button{ width: 30%; } } } </style>