wangfukang
3 years ago
1 changed files with 661 additions and 0 deletions
@ -0,0 +1,661 @@ |
|||
<template> |
|||
<view class="page1"> |
|||
<!-- <view class="title-box"> |
|||
<uni-search-bar class="uni-mt-10" radius="5" placeholder="请输入商品名称" cancelButton="none" @confirm="search" /> |
|||
</view> --> |
|||
<view class="content-box" :style="{height:height - 120 + 'rpx'}"> |
|||
<view class="content-left"> |
|||
<view class="left-box" v-for="(item, index) in indexList" :key="index" |
|||
:class="item.parentId ? 'left-box-hover':''" @tap="clickLeftBtn(index)"> |
|||
<text style="width: 100%;height: 90rpx;line-height: 90rpx;display: inline-block;overflow: hidden;" |
|||
:class="item.parentId ? 'red' :''">{{item.categoryName}}</text> |
|||
</view> |
|||
</view> |
|||
<view class="content-right"> |
|||
<view class="right-box" v-for="(item,index) in goodsList" :key="index" v-if="item.delFlag"> |
|||
<view class="box-left"> |
|||
<img class="img-radius" :src="item.productPicture" alt="" v-if="item.productPicture"> |
|||
<view class="noPic" v-else>暂无图片</view> |
|||
</view> |
|||
<view class="box-right"> |
|||
<view class="box-right-name">{{item.productName}}</view> |
|||
<view class="box-right-num">{{item.productSn}}</view> |
|||
<view class="box-right-price" v-if="item.wholesalePrice"> |
|||
<view class="price-box"> |
|||
<text>{{item.wholesalePrice}}</text> |
|||
<text>批发价</text> |
|||
</view> |
|||
<view class="price-box"> |
|||
<text>{{item.price}}</text> |
|||
<text>零售价</text> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<checkbox-group @tap="checkboxChange(item)" v-if="item.wholesalePrice"> |
|||
<label> |
|||
<checkbox :checked="item.checked" class="checkbox" /> |
|||
</label> |
|||
</checkbox-group> |
|||
</view> |
|||
</view> |
|||
</view> |
|||
<view class="bottom-box"> |
|||
<view class="bottom-right"> |
|||
<button class="bottom-btn" @tap="clickPrint">批量打印</button> |
|||
</view> |
|||
</view> |
|||
<!-- 弹出输入框 --> |
|||
<uni-popup ref="payDialog" background-color="#fff"> |
|||
<view class="popup-pay-content"> |
|||
<view class="popup-pay-title"> |
|||
<text>已选商品</text> |
|||
</view> |
|||
<view v-for="(item,index) in carList"> |
|||
<view class="box-right"> |
|||
<text class="box-right-name" style="font-size: 24rpx;">{{item.productName}}</text> |
|||
<text class="box-right-num">（{{item.productSn}})</text> |
|||
</view> |
|||
</view> |
|||
<view class="popup-pay-title" style="margin-top: 50rpx;"> |
|||
<text>请选择需要打印的字段</text> |
|||
</view> |
|||
<view class="content-fur"> |
|||
<view class="content-low" v-for="(item1,index1) in list" :key="index1" |
|||
@tap.stop="addMultipleType(item1)" :class="item1.checked?'checked':''">{{item1.type}}</view> |
|||
</view> |
|||
<view class="popup-pay-container" > |
|||
<view class="" @tap="goPrint"> |
|||
确认打印 |
|||
</view> |
|||
<!-- <kk-printer ref="kkprinter" :bufferData="bufferData" @onPrint="goPrint" :defaultText="'确认打印'"></kk-printer> --> |
|||
</view> |
|||
</view> |
|||
</uni-popup> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
import gbk from '@/components/kk-printer/utils/printUtil-GBK.js'; |
|||
import util from '@/components/kk-printer/utils/util.js'; |
|||
import * as blesdk from '@/components/kk-printer/utils/bluetoolth.js'; |
|||
import kkPrinter from '@/components/kk-printer/index.vue'; |
|||
export default { |
|||
components: { |
|||
kkPrinter |
|||
}, |
|||
data() { |
|||
return { |
|||
indexList: [], |
|||
pageNum: 1, //分页的页码 |
|||
shopList: [], |
|||
info: 0, |
|||
goodsList: [], |
|||
categoryId: '', //分类id |
|||
searchName: '', //搜索框输入值 |
|||
shopId: '', //店铺id, |
|||
checkbox: '', //需要分享的商品id |
|||
id: '', |
|||
carList: [], |
|||
carNum: 0, |
|||
carType: 0, |
|||
type: '', |
|||
checkPayData:'', |
|||
data:{}, |
|||
height:0, |
|||
list:[{ |
|||
type:'供应商', |
|||
checked:false, |
|||
},{ |
|||
type:'货号', |
|||
checked:false, |
|||
},{ |
|||
type:'零售价', |
|||
checked:false, |
|||
},{ |
|||
type:'批发价', |
|||
checked:false, |
|||
}], |
|||
multipleList:[] |
|||
} |
|||
}, |
|||
onLoad(options) { |
|||
this.height = wx.getSystemInfoSync().windowHeight |
|||
if (options.khid != undefined) { |
|||
uni.redirectTo({ |
|||
url: "/pages/index/downStearmList?khid=" + options.khid |
|||
}) |
|||
}else{ |
|||
this.type = uni.getStorageSync('type') |
|||
this.getGategoryList() |
|||
} |
|||
|
|||
}, |
|||
methods: { |
|||
//初始化获取分类列表 |
|||
getGategoryList() { |
|||
this.shopList = [] |
|||
this.indexList = [] |
|||
this.goodsList = [] |
|||
this.tui.request("/app/productCategory/list", "get", {}, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.indexList = res.result; |
|||
for (var i = 0; i < this.indexList.length; i++) { |
|||
if (i == 0) { |
|||
this.indexList[i].parentId = true |
|||
} else { |
|||
this.indexList[i].parentId = false |
|||
} |
|||
let data = { |
|||
categoryId: this.indexList[i].id |
|||
} |
|||
this.shopList.push(data) |
|||
this.categoryId = this.indexList[i].id |
|||
this.getShareList(this.indexList[i].id) |
|||
|
|||
} |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//点击分类获取商品列表 |
|||
getShareList(id) { |
|||
this.tui.request("/app/product/getShareList", "POST", { |
|||
categoryId: id, |
|||
searchStr: this.searchName, |
|||
pageNum: this.pageNum, |
|||
pageSize: '100' |
|||
}, false, false).then((res) => { |
|||
if (res.code == 200) { |
|||
for (var i = 0; i < this.shopList.length; i++) { |
|||
if(res.result.records != []){ |
|||
if(this.shopList[i].categoryId == res.result.records[0].categoryId){ |
|||
this.shopList[i] = res.result.records |
|||
} |
|||
}else{ |
|||
this.shopList[i] = [] |
|||
} |
|||
|
|||
} |
|||
this.goodsList = this.shopList[0] |
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
}, |
|||
//顶部搜索框 |
|||
search(res) { |
|||
this.searchName = res.value |
|||
this.getGategoryList() |
|||
}, |
|||
//未入库遮罩 |
|||
clickMask() { |
|||
uni.showToast({ |
|||
title: '请将商品上架或入库后再操作！', |
|||
icon: 'none' |
|||
}) |
|||
}, |
|||
//点击左侧菜单切换 |
|||
clickLeftBtn(index) { |
|||
for (var i = 0; i < this.indexList.length; i++) { |
|||
if (i == index) { |
|||
this.indexList[i].parentId = true |
|||
} else { |
|||
this.indexList[i].parentId = false |
|||
} |
|||
} |
|||
this.categoryId = this.shopList[index].id |
|||
this.goodsList = this.shopList[index] |
|||
}, |
|||
//选中商品 |
|||
checkboxChange(item) { |
|||
item.checked = !item.checked |
|||
if(this.carList == ''){ |
|||
this.carList.push(item) |
|||
}else{ |
|||
for(let i=0;i<this.carList.length;i++){ |
|||
if(this.carList[i].id == item.id){ |
|||
this.carList.splice(i, 1) |
|||
return; |
|||
}else{ |
|||
if(i+1 == this.carList.length){ |
|||
this.carList.push(item) |
|||
return; |
|||
} |
|||
|
|||
} |
|||
} |
|||
} |
|||
console.log(this.carList) |
|||
}, |
|||
//点击批量打印按钮 |
|||
clickPrint() { |
|||
this.$refs.payDialog.open('center') |
|||
}, |
|||
checkPay(type){ |
|||
this.data.priceType = type |
|||
this.tui.request("/app/productShare/save", "POST", this.data, false, true).then((res) => { |
|||
if (res.code == 200) { |
|||
this.khid = res.result.id |
|||
|
|||
} else { |
|||
this.tui.toast(res.message) |
|||
} |
|||
}).catch((res) => {}) |
|||
this.checkPayData = type |
|||
this.$refs.payDialog.close() |
|||
this.$refs.share.open() |
|||
}, |
|||
//选择多个规格保存 |
|||
addMultipleType(item1){ |
|||
|
|||
item1.checked = !item1.checked |
|||
if(this.multipleList == ''){ |
|||
this.multipleList.push(item1.type) |
|||
}else{ |
|||
for(var i=0;i<this.multipleList.length;i++){ |
|||
if(this.multipleList[i] == item1.type){ //相同 |
|||
this.multipleList.splice(i,1) |
|||
return; |
|||
}else{ //不同 |
|||
if(i+1 == this.multipleList.length){ |
|||
this.multipleList.push(item1.type) |
|||
return; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
console.log(this.multipleList); |
|||
}, |
|||
//点击打印按钮 |
|||
goPrint(){ |
|||
//打开蓝牙适配器 |
|||
blesdk.openBlue().then((res)=>{ |
|||
//获取已连接设备 |
|||
blesdk.getConnectedBluetoothDevices().then((res)=>{ |
|||
if(uni.getStorageSync('deviceId') != '' && uni.getStorageSync('serviceId') != ''){ |
|||
if(res.devices.length==0 || res.length==0){ |
|||
blesdk.createBLEConnection(uni.getStorageSync('deviceId'), this.onConnectSuccess, this.onConnectFail); |
|||
}else{ |
|||
let datalen=20; |
|||
|
|||
this.isPrinting = true; |
|||
for(var i=0;i<this.carList.length;i++){ |
|||
this.onPrint(this.multipleList,this.carList[i]) |
|||
this.$nextTick(()=>{ |
|||
if(this.bufferData!=''){ |
|||
let buffer = gbk.strToGBKByte(this.bufferData) |
|||
let opt = { |
|||
deviceId: uni.getStorageSync('deviceId'), |
|||
serviceId: uni.getStorageSync('serviceId'), |
|||
characteristicId: uni.getStorageSync('writeId'), |
|||
value:buffer, |
|||
lasterSuccess: this.onPrintSuccess, |
|||
onceLength:datalen |
|||
} |
|||
blesdk.sendDataToDevice(opt); |
|||
this.isPrinting = false; |
|||
//打印成功跳转页面 |
|||
} |
|||
|
|||
}) |
|||
} |
|||
|
|||
} |
|||
|
|||
}else{ |
|||
this.iosNo = true |
|||
this.isShowSearch = true |
|||
} |
|||
|
|||
}).catch((err)=>{ |
|||
blesdk.catchToast(err); |
|||
}) |
|||
}).catch((err)=>{ |
|||
blesdk.catchToast(err); |
|||
}) |
|||
}, |
|||
onPrint(opt,item) { |
|||
let strCmd = blesdk.CreatCPCLPage(440, 320, 1, 0); |
|||
strCmd += blesdk.addCPCLText('0', '30', '24', '0', 0, '商品名：'+item.productName) |
|||
if(opt.indexOf('货号') != -1){ |
|||
strCmd += blesdk.addCPCLText('0', '80', '24', '0', 0, '货 号：'+item.productSn) |
|||
} |
|||
if(opt.indexOf('供应商') != -1){ |
|||
strCmd += blesdk.addCPCLText('0', '130', '24', '0', 0, '供应商：'+item.supplierName) |
|||
} |
|||
if(opt.indexOf('批发价') != -1){ |
|||
strCmd += blesdk.addCPCLText('0', '180', '24', '0', 0, '批发价：'+item.wholesalePrice) |
|||
} |
|||
if(opt.indexOf('零售价') != -1){ |
|||
strCmd += blesdk.addCPCLText('0', '230', '24', '0', 0, '零售价：'+item.price) |
|||
} |
|||
strCmd += blesdk.addCPCLQRCode(200, 140, 'H', '1', 6, [item.id,uni.getStorageSync('shopId')]) //二维码 |
|||
strCmd += blesdk.addCPCLLocation(0); //对齐指令 0-左对齐 1-右对齐 2-居中 |
|||
strCmd += blesdk.addCPCLPrint(); |
|||
this.bufferData = strCmd; |
|||
}, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss"> |
|||
page { |
|||
height: 100%; |
|||
} |
|||
|
|||
.page1 { |
|||
display: flex; |
|||
flex-direction: column; |
|||
height: 92%; |
|||
} |
|||
|
|||
.uni-tab__dot { |
|||
padding: 0 4px; |
|||
line-height: 15px; |
|||
color: #ffffff; |
|||
text-align: center; |
|||
font-size: 12px; |
|||
background-color: #ff0000; |
|||
border-radius: 15px; |
|||
} |
|||
|
|||
.uni-tab__text { |
|||
font-size: 12px; |
|||
color: #646566; |
|||
} |
|||
|
|||
.title-box { |
|||
background: #fff; |
|||
position: fixed; |
|||
z-index: 99; |
|||
width: 100%; |
|||
top: 0; |
|||
} |
|||
|
|||
.bottom-box { |
|||
width: 100%; |
|||
height: 120rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
display: flex; |
|||
background: #fff; |
|||
z-index: 98; |
|||
} |
|||
|
|||
.bottom-left { |
|||
width: 15%; |
|||
position: relative; |
|||
} |
|||
|
|||
.bottom-right { |
|||
width: 100%; |
|||
display: flex; |
|||
|
|||
.bottom-btn { |
|||
margin: 0 auto; |
|||
padding: 0; |
|||
width: 90%; |
|||
line-height: 80rpx; |
|||
height: 80rpx; |
|||
text-align: center; |
|||
margin-top: 10rpx; |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
border-radius: 5px; |
|||
} |
|||
} |
|||
|
|||
.bottom-left-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
text-align: center; |
|||
} |
|||
|
|||
.content-box { |
|||
background: #fff; |
|||
flex: 1; |
|||
display: flex; |
|||
overflow: scroll; |
|||
} |
|||
|
|||
.content-left { |
|||
width: 170rpx; |
|||
background: #eee; |
|||
height: 100%; |
|||
} |
|||
|
|||
.left-box { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
line-height: 90rpx; |
|||
border-bottom: 1px solid #fff; |
|||
} |
|||
|
|||
.left-box-hover { |
|||
width: 100%; |
|||
height: 90rpx; |
|||
font-size: 30rpx; |
|||
text-align: center; |
|||
line-height: 90rpx; |
|||
border-bottom: 1px solid #fff; |
|||
background-color: #fff; |
|||
} |
|||
|
|||
.red { |
|||
border-right: 3px solid red; |
|||
} |
|||
|
|||
.content-right { |
|||
flex: 1; |
|||
overflow-y: scroll; |
|||
} |
|||
|
|||
.right-box { |
|||
width: 100%; |
|||
height: 190rpx; |
|||
display: flex; |
|||
border-bottom: 1px solid #eee; |
|||
position: relative; |
|||
} |
|||
|
|||
.box-left { |
|||
width: 130rpx; |
|||
height: 131rpx; |
|||
background-size: 100%; |
|||
margin: 25rpx 30rpx 35rpx 10rpx; |
|||
border-radius: 20rpx; |
|||
} |
|||
|
|||
.box-left img { |
|||
width: 100%; |
|||
height: 100%; |
|||
|
|||
} |
|||
|
|||
.box-right { |
|||
margin-top: 17rpx; |
|||
} |
|||
|
|||
.box-right-name { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.box-right-num { |
|||
padding: 5rpx 0; |
|||
color: #777; |
|||
} |
|||
|
|||
.box-right-price { |
|||
display: flex; |
|||
font-size: 25rpx; |
|||
} |
|||
|
|||
.checkbox { |
|||
width: 40rpx; |
|||
height: 40rpx; |
|||
position: absolute; |
|||
top: 20rpx; |
|||
right: 30rpx; |
|||
} |
|||
|
|||
.price-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
margin-right: 20rpx; |
|||
} |
|||
|
|||
.price-box text:first-child { |
|||
color: #ffa200 |
|||
} |
|||
|
|||
.uni-tab__cart-button-right, |
|||
.uni-tab__cart-sub-right { |
|||
display: none; |
|||
flex: none; |
|||
} |
|||
|
|||
.popup-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
height: 1200rpx; |
|||
background-color: #fff; |
|||
margin-bottom: 30rpx; |
|||
overflow: scroll; |
|||
} |
|||
|
|||
.popup-title-right-box { |
|||
height: 50rpx; |
|||
line-height: 50rpx; |
|||
} |
|||
|
|||
.popup-title-right { |
|||
width: 400rpx; |
|||
margin-left: 30rpx; |
|||
} |
|||
|
|||
.popup-title-left { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
} |
|||
|
|||
.popup-title-left image { |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
|
|||
} |
|||
|
|||
.popup-title { |
|||
display: flex; |
|||
height: 180rpx; |
|||
border-bottom: 1px solid #eee; |
|||
margin-top: 20rpx; |
|||
} |
|||
|
|||
.popup-bottom { |
|||
width: 95%; |
|||
height: 100rpx; |
|||
position: fixed; |
|||
bottom: 0; |
|||
left: 2.5%; |
|||
display: flex; |
|||
z-index: 99; |
|||
background: #fff; |
|||
} |
|||
|
|||
.popup-bottom-left { |
|||
width: 50%; |
|||
line-height: 80rpx; |
|||
} |
|||
|
|||
.popup-bottom-right { |
|||
width: 50%; |
|||
line-height: 100rpx; |
|||
|
|||
.bottom-btn { |
|||
width: 70%; |
|||
line-height: 35px; |
|||
height: 70rpx; |
|||
text-align: center; |
|||
/* margin-top: 10rpx; */ |
|||
color: #fff; |
|||
font-size: 28rpx; |
|||
margin: 0 auto; |
|||
background: linear-gradient(90deg, #60F3FF, #088FEB); |
|||
border-radius: 70rpx; |
|||
} |
|||
} |
|||
|
|||
.shop-mask { |
|||
width: 100%; |
|||
height: 190rpx; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
background: rgba(0, 0, 0, 0.1); |
|||
z-index: 99; |
|||
} |
|||
.popup-pay-content { |
|||
align-items: center; |
|||
justify-content: center; |
|||
padding: 15px; |
|||
width: 500rpx; |
|||
height: auto; |
|||
max-height: 1000rpx; |
|||
overflow: scroll; |
|||
background-color: #fff; |
|||
} |
|||
.popup-pay-title { |
|||
font-size: 30rpx; |
|||
font-weight: bold; |
|||
text-align: center; |
|||
position: relative; |
|||
border-bottom: 1px solid #eee; |
|||
padding-bottom: 20rpx; |
|||
} |
|||
.popup-pay-container { |
|||
margin-top: 20rpx; |
|||
height: 100rpx; |
|||
border-radius: 10px; |
|||
background: #088FEB; |
|||
line-height: 100rpx; |
|||
text-align: center; |
|||
border-bottom: 1px solid #eee; |
|||
border-top: 1px solid #eee; |
|||
color: #fff; |
|||
} |
|||
.noPic{ |
|||
border-radius: 10px; |
|||
width: 150rpx; |
|||
height: 150rpx; |
|||
text-align: center; |
|||
line-height: 140rpx; |
|||
color: #777; |
|||
background: #eee; |
|||
} |
|||
.checked{ |
|||
background: #60F3FF; |
|||
color: #fff !important; |
|||
} |
|||
.content-fur { |
|||
padding-bottom: 25rpx; |
|||
} |
|||
|
|||
.content-low { |
|||
width: auto; |
|||
border: 1px solid #eee; |
|||
display: inline-block; |
|||
min-width: 90rpx; |
|||
padding: 5rpx; |
|||
font-size: 35rpx; |
|||
text-align: center; |
|||
color: #777; |
|||
margin: 20rpx 0 0 20rpx; |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue