You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 

818 lines
21 KiB

<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'}" v-if="purchase != ''">
<view class="content-right">
<view class="right-box" v-for="(item,index) in goodsList" :key="index">
<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== null?'':item.productName}}</view>
<view class="box-right-num">{{item.productSn}}</view>
<view class="box-right-price" v-if="shopId != '1960543009070256129'">
<view class="price-box">
<text>{{item.wholesalePrice == null ?'暂无':item.wholesalePrice}}</text>
<text>批发价</text>
</view>
<view class="price-box">
<text>{{item.lsprice || item.price}}</text>
<text>零售价</text>
</view>
</view>
<view class="box-right-price" v-else>
<view class="price-box">
<text>{{item.wholesalePrice == null ?'暂无':item.wholesalePrice}}</text>
<text>直播价</text>
</view>
<view class="price-box">
<text>{{item.lsprice || item.price}}</text>
<text>日常价</text>
</view>
</view>
</view>
<checkbox-group @tap="goInvPrint(item)">
<label>
<checkbox :checked="item.checked" class="checkbox" />
</label>
</checkbox-group>
</view>
</view>
</view>
<view class="content-box" :style="{height:height - 120 + 'rpx'}" v-else>
<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==null?'':item.productName}}</view>
<view class="box-right-num">{{item.productSn}}</view>
<view class="box-right-price" v-if="item.wholesalePrice !='' && shopId != '1960543009070256129'">
<view class="price-box">
<text>{{item.wholesalePrice}}</text>
<text>批发价</text>
</view>
<view class="price-box">
<text>{{item.price}}</text>
<text>零售价</text>
</view>
</view>
<view class="box-right-price" v-if="item.wholesalePrice !='' && shopId == '1960543009070256129'">
<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)">
<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">
<uni-forms-item label="打印方式" name="type" labelWidth="170rpx">
<uni-data-select style="width: 100%" v-model="printingMethod" :localdata="typeList"></uni-data-select>
</uni-forms-item>
<view class="popup-pay-title">
<text>已选商品</text>
</view>
<view v-for="(item,index) in carList" :key="index">
<view class="box-right">
<text class="box-right-name" style="font-size: 24rpx;">{{item.productName==null?'':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 v-if="shopId != '1960543009070256129'">
<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 v-if="list[0].checked && purchase != ''" style="display: flex;height: 80rpx;width: 100%;line-height: 80rpx;margin-top: 20rpx;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
供应商:
</text>
<input v-model="purchase.supplierName" @change="changeText" :disabled="closetanPopup" type="text" placeholder="请输入供应商名称" style="display: flex;height: 80rpx;width: 300rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
</view>
<view v-else>
<view class="content-fur">
<view class="content-low" v-for="(item1,index1) in list1" :key="index1"
@tap.stop="addMultipleType(item1)" :class="item1.checked?'checked':''">{{item1.type}}
</view>
</view>
<view v-if="list1[0].checked && purchase != ''" style="display: flex;height: 80rpx;width: 100%;line-height: 80rpx;margin-top: 20rpx;">
<text style="display:inline-block;width:100rpx;font-size:22rpx;">
供应商:
</text>
<input v-model="purchase.supplierName" @change="changeText" :disabled="closetanPopup" type="text" placeholder="请输入供应商名称" style="display: flex;height: 80rpx;width: 300rpx;line-height: 80rpx;padding-left: 20rpx;border: 1px solid #eee;">
</view>
</view>
<view class="popup-pay-container" >
<kk-printer ref="kkprinter" :bufferData="bufferData" @goPrint="goPrint" :defaultText="'确认打印'"></kk-printer>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
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';
import base from '@/utils/ossUploadFile/base64.js';
export default {
data() {
return {
indexList: [],
pageNum: 1, //分页的页码
shopList: [],
goodsList: [],
categoryId: '', //分类id
searchName: '', //搜索框输入值
id: '',
carList: [],
type: '',
bufferData:[],
typeList: [{
value: '0',
text: "打印长票"
},
{
value: '1',
text: "打印短票"
},
],
printingMethod:"0",
checkPayData:'',
data:{},
height:0,
list:[{
type:'供应商',
checked:false,
},{
type:'货号',
checked:false,
},{
type:'零售价',
checked:false,
},{
type:'批发价',
checked:false,
}],
list1:[{
type:'供应商',
checked:false,
},{
type:'货号',
checked:false,
},{
type:'日常价',
checked:false,
},{
type:'直播价',
checked:false,
}],
multipleList:[],
purchase:'',
shopId:''
}
},
components: {
kkPrinter
},
onHide(){
setTimeout(res=>{
uni.closeBLEConnection({
deviceId:uni.getStorageSync('deviceId'),
success(res) {
},fail(err){
}
})
},5000)
},
onLoad(options) {
wx.openBluetoothAdapter({mode: 'central'})
this.height = wx.getSystemInfoSync().windowHeight
this.shopId = uni.getStorageSync('shopId')
if (options.khid != undefined) {
uni.redirectTo({
url: "/package1/index/downStearmList?khid=" + options.khid
})
}else{
if(options.purchase){
this.purchase = JSON.parse(options.purchase)
this.goodsList = JSON.parse(options.purchaseDetails)
}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]
},
goInvPrint(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].productName == item.productName){
this.carList.splice(i, 1)
return;
}else{
if(i+1 == this.carList.length){
this.carList.push(item)
return;
}
}
}
}
},
//选中商品
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;
}
}
}
}
},
//点击批量打印按钮
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;
}
}
}
}
},
//点击打印按钮
goPrint(){
uni.setStorageSync('small',true)
let that = this;
for(var i=0;i<that.carList.length;i++){
let item = that.carList[i]
that.yNum = 10
if(this.printingMethod == "0"){ //长票打印
//宽5.1 高4.1
let strCmd = blesdk.CreatCPCLPage(320, 480, 1, 0);
if(this.multipleList.indexOf('供应商') != -1){
strCmd += blesdk.addCPCLSETMAG(2, 2)
strCmd += blesdk.addCPCLLocation(2);
strCmd += blesdk.addCPCLSETBOLD('400');
strCmd += blesdk.addCPCLText('0', that.yNum += 10, '24', '0', 0, this.purchase !=''?this.purchase.supplierName:item.supplierName)
}
strCmd += blesdk.addCPCLSETMAG(1, 1)
strCmd += blesdk.addCPCLLocation(0);
strCmd += blesdk.addCPCLSETBOLD('0');
strCmd += blesdk.addCPCLText('20', that.yNum += 70, '24', '0', 0, '品名: '+(item.productName==null?'':item.productName))
if(this.multipleList.indexOf('货号') != -1){
strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '货号: '+item.productSn)
}
if(this.multipleList.indexOf('批发价') != -1){
strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '批发价: '+item.wholesalePrice)
}
if(this.multipleList.indexOf('直播价') != -1){
strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '直播价: '+item.wholesalePrice)
}
if(this.multipleList.indexOf('零售价') != -1){
strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '零售价: '+(item.lsprice || item.price))
}
if(this.multipleList.indexOf('日常价') != -1){
strCmd += blesdk.addCPCLText('20', that.yNum += 50, '24', '0', 0, '日常价: '+(item.lsprice || item.price))
}
strCmd += blesdk.addCPCLLocation(2);
strCmd += blesdk.addCPCLQRCode(0, that.yNum += 70, 'H', '1', 4, [this.purchase!=''?base.encode(item.productId):base.encode(item.id),base.encode(this.shopId)]) //二维码
strCmd += blesdk.addCPCLLocation(0); //对齐指令 0-左对齐 1-右对齐 2-居中
strCmd += blesdk.addCPCLPrint();
this.bufferData.push(strCmd);
}else{
//宽5.1 高4.1
let strCmd = blesdk.CreatCPCLPage(410, 320, 1, 0);
if(this.multipleList.indexOf('供应商') != -1){
strCmd += blesdk.addCPCLSETMAG(2, 2)
strCmd += blesdk.addCPCLLocation(2);
strCmd += blesdk.addCPCLSETBOLD('400');
strCmd += blesdk.addCPCLText('0', that.yNum += 10, '24', '0', 0, this.purchase !=''?this.purchase.supplierName:item.supplierName)
}
strCmd += blesdk.addCPCLSETMAG(1, 1)
strCmd += blesdk.addCPCLLocation(0);
strCmd += blesdk.addCPCLSETBOLD('0');
strCmd += blesdk.addCPCLText('30', that.yNum += 60, '24', '0', 0, '商品名:'+(item.productName==null?'':item.productName))
strCmd += blesdk.addCPCLSETMAG(2, 2)
if(this.multipleList.indexOf('货号') != -1){
strCmd += blesdk.addCPCLText('30', that.yNum += 40, '24', '0', 0, '货号:'+item.productSn)
}
strCmd += blesdk.addCPCLSETMAG(1, 1)
if(this.multipleList.indexOf('批发价') != -1){
strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '批发价:'+item.wholesalePrice)
}
if(this.multipleList.indexOf('直播价') != -1){
strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '直播价:'+item.wholesalePrice)
}
if(this.multipleList.indexOf('零售价') != -1){
strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '零售价:'+(item.lsprice || item.price))
}
if(this.multipleList.indexOf('日常价') != -1){
strCmd += blesdk.addCPCLText('30', that.yNum += 50, '24', '0', 0, '日常价:'+(item.lsprice || item.price))
}
strCmd += blesdk.addCPCLQRCode(240, 160, 'H', '1', 4, [this.purchase!=''?base.encode(item.productId):base.encode(item.id),base.encode(uni.getStorageSync('shopId').substring('10','12'))]) //二维码
strCmd += blesdk.addCPCLLocation(0); //对齐指令 0-左对齐 1-右对齐 2-居中
strCmd += blesdk.addCPCLPrint();
this.bufferData.push(strCmd);
}
}
that.$nextTick(()=>{
that.$refs.payDialog.close();
that.bufferData = []
uni.navigateBack({
delta: 1
})
})
}
}
}
</script>
<style lang="scss">
page {
height: 100%;
font-size: 24rpx;
}
.page1 {
display: flex;
flex-direction: column;
height: 92%;
font-size: 28rpx;
}
.uni-tab__dot {
padding: 0 8rpx;
line-height: 30rpx;
color: #ffffff;
text-align: center;
font-size: 24rpx;
background-color: #ff0000;
border-radius: 30rpx;
}
.uni-tab__text {
font-size: 24rpx;
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%;
overflow: scroll;
}
.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: 30rpx;
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: 70rpx;
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: 30rpx;
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>