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.
675 lines
16 KiB
675 lines
16 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}}</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.lsprice}}</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}}</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)">
|
|
<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" >
|
|
<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';
|
|
export default {
|
|
data() {
|
|
return {
|
|
indexList: [],
|
|
pageNum: 1, //分页的页码
|
|
shopList: [],
|
|
goodsList: [],
|
|
categoryId: '', //分类id
|
|
searchName: '', //搜索框输入值
|
|
id: '',
|
|
carList: [],
|
|
type: '',
|
|
bufferData:[],
|
|
checkPayData:'',
|
|
data:{},
|
|
height:0,
|
|
list:[{
|
|
type:'供应商',
|
|
checked:false,
|
|
},{
|
|
type:'货号',
|
|
checked:false,
|
|
},{
|
|
type:'零售价',
|
|
checked:false,
|
|
},{
|
|
type:'批发价',
|
|
checked:false,
|
|
}],
|
|
multipleList:[],
|
|
purchase:''
|
|
}
|
|
},
|
|
components: {
|
|
kkPrinter
|
|
},
|
|
onLoad(options) {
|
|
this.height = wx.getSystemInfoSync().windowHeight
|
|
if (options.khid != undefined) {
|
|
uni.redirectTo({
|
|
url: "/pages/index/downStearmList?khid=" + options.khid
|
|
})
|
|
}else{
|
|
if(options.purchase){
|
|
this.purchase = JSON.parse(options.purchase)
|
|
this.goodsList = JSON.parse(options.purchaseDetails)
|
|
|
|
console.log("新增入库打印");
|
|
console.log(this.goodsList);
|
|
}else{
|
|
console.log("普通批量打印");
|
|
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;
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
console.log(this.carList)
|
|
},
|
|
//选中商品
|
|
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(){
|
|
uni.setStorageSync('small',true)
|
|
let that = this;
|
|
for(var i=0;i<that.carList.length;i++){
|
|
let item = that.carList[i]
|
|
let strCmd = blesdk.CreatCPCLPage(440, 320, 1, 0);
|
|
strCmd += blesdk.addCPCLText('0', '30', '24', '0', 0, '商品名：'+item.productName)
|
|
if(this.multipleList.indexOf('货号') != -1){
|
|
console.log(this.multipleList.indexOf('货号'))
|
|
strCmd += blesdk.addCPCLText('0', '80', '24', '0', 0, '货 号：'+item.productSn)
|
|
}
|
|
if(this.multipleList.indexOf('供应商') != -1){
|
|
console.log(this.multipleList.indexOf('供应商'))
|
|
strCmd += blesdk.addCPCLText('0', '130', '24', '0', 0, '供应商：'+(this.purchase !=''?this.purchase.supplierName:item.supplierName))
|
|
}
|
|
if(this.multipleList.indexOf('批发价') != -1){
|
|
console.log(this.multipleList.indexOf('批发价'))
|
|
strCmd += blesdk.addCPCLText('0', '180', '24', '0', 0, '批发价：'+item.wholesalePrice)
|
|
}
|
|
if(this.multipleList.indexOf('零售价') != -1){
|
|
console.log(this.multipleList.indexOf('零售价'))
|
|
strCmd += blesdk.addCPCLText('0', '230', '24', '0', 0, '零售价：'+(item.lsprice || item.price))
|
|
}
|
|
strCmd += blesdk.addCPCLQRCode(200, 140, 'H', '1', 6, [item.id,item.shopId]) //二维码
|
|
strCmd += blesdk.addCPCLLocation(0); //对齐指令 0-左对齐 1-右对齐 2-居中
|
|
strCmd += blesdk.addCPCLPrint();
|
|
this.bufferData.push(strCmd);
|
|
this.$refs.payDialog.close();
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</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%;
|
|
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: 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>
|