初始上传
This commit is contained in:
828
addon/cashier/source/os/components/ns-goods/index.js
Executable file
828
addon/cashier/source/os/components/ns-goods/index.js
Executable file
@@ -0,0 +1,828 @@
|
||||
var self;
|
||||
|
||||
import {
|
||||
getGoodsList,
|
||||
getGoodsCategory,
|
||||
getServiceCategory,
|
||||
getServiceList,
|
||||
getGoodsSkuList,
|
||||
getElectronicScaleInformation,
|
||||
getGoodsInfoByCode
|
||||
} from '@/api/goods'
|
||||
import {mapGetters} from 'vuex';
|
||||
|
||||
export default {
|
||||
name: 'nsGoods',
|
||||
props: {
|
||||
indexFocus: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
type: 'goods',
|
||||
serviceCategory: [],
|
||||
serviceCategoryId: 'all',
|
||||
serviceData: {
|
||||
size: 12,
|
||||
index: 1,
|
||||
total: 0,
|
||||
list: []
|
||||
},
|
||||
goodsCategoryId: 'all',
|
||||
goodsCategory: [],
|
||||
goodsData: {
|
||||
size: 30,
|
||||
index: 1,
|
||||
total: 0,
|
||||
list: []
|
||||
},
|
||||
skuInfo: null,
|
||||
allSku: null,
|
||||
searchText: '',
|
||||
itemNum: 3,
|
||||
mediaQueryOb: null,
|
||||
paymentMoney: '',
|
||||
cashierScale: null,
|
||||
actionIndex: 0,
|
||||
inputFocus: false,
|
||||
goodsCategoryShow: false,
|
||||
goodsCategoryIndex: 0,
|
||||
serviceCategoryShow: false,
|
||||
serviceCategoryIndex: 0,
|
||||
scanCode: {
|
||||
code: '',
|
||||
lastTime: 0
|
||||
},
|
||||
isGoodsLoad: false,
|
||||
goodsItems:{},//点击商品后如果是可转换库存商品存储商品数据
|
||||
scanCodeSearch:false,
|
||||
goodsNextPage: true,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
serviceCategoryId: function (nval) {
|
||||
this.serviceData.page = 0;
|
||||
this.serviceData.index = 1;
|
||||
this.$refs.loading.show();
|
||||
this.getService();
|
||||
},
|
||||
goodsCategoryId: function (nval) {
|
||||
this.goodsData.page = 0;
|
||||
this.goodsData.index = 1;
|
||||
this.$refs.goodsLoading.show();
|
||||
this.getGoods();
|
||||
},
|
||||
type: function () {
|
||||
this.searchText = '';
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
goodsSpec() {
|
||||
if (this.allSku && this.skuInfo) {
|
||||
let data = [];
|
||||
if (this.skuInfo.goods_class != 6 || (this.skuInfo.goods_class == 6 && this.skuInfo.goods_spec_format)) {
|
||||
data = this.allSku['sku_id_' + this.skuInfo.sku_id].goods_spec_format;
|
||||
}
|
||||
return data;
|
||||
}
|
||||
return [];
|
||||
},
|
||||
...mapGetters(['billingGoodsIds', 'billingGoodsData', 'billingActive', 'billingIsScanTrigger','billingIsShowCashBox'])
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
this.addScanCodeEvent();
|
||||
this.addKeyDownEvent();
|
||||
},
|
||||
mounted() {
|
||||
this.mediaQueryOb = uni.createMediaQueryObserver(this);
|
||||
|
||||
this.mediaQueryOb.observe({maxWidth: 1500}, matches => {
|
||||
if (matches) this.itemNum = 2;
|
||||
});
|
||||
|
||||
this.mediaQueryOb.observe({minWidth: 1501, maxWidth: 1700}, matches => {
|
||||
if (matches) this.itemNum = 3;
|
||||
});
|
||||
|
||||
this.mediaQueryOb.observe({minWidth: 1701}, matches => {
|
||||
if (matches) this.itemNum = 4;
|
||||
});
|
||||
|
||||
document.addEventListener('click', this.isListShow)
|
||||
},
|
||||
beforeDestroy() {
|
||||
document.removeEventListener("click", this.isListShow);
|
||||
},
|
||||
methods: {
|
||||
nextGoodsLiist(){
|
||||
if(!this.goodsNextPage) return;
|
||||
this.goodsData.index ++;
|
||||
this.getGoods();
|
||||
},
|
||||
init() {
|
||||
self = this;
|
||||
this.getServiceCategoryFn();
|
||||
this.getGoodsCategoryFn();
|
||||
this.getService();
|
||||
this.getGoods();
|
||||
},
|
||||
getServiceCategoryFn() {
|
||||
getServiceCategory().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.serviceCategory = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
getGoodsCategoryFn() {
|
||||
getGoodsCategory().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.goodsCategory = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
getService() {
|
||||
getServiceList({
|
||||
page: this.serviceData.index,
|
||||
page_size: this.serviceData.size,
|
||||
category: this.serviceCategoryId,
|
||||
search_text: this.searchText,
|
||||
status: 1
|
||||
}).then(res => {
|
||||
if (this.$refs.loading) this.$refs.loading.hide();
|
||||
if (res.code == 0) {
|
||||
this.serviceData.total = res.data.count;
|
||||
this.serviceData.list = res.data.list || [];
|
||||
this.searchText = '';
|
||||
}
|
||||
});
|
||||
},
|
||||
getGoods() {
|
||||
this.isGoodsLoad = false;
|
||||
getGoodsList({
|
||||
page: this.goodsData.index,
|
||||
page_size: this.goodsData.size,
|
||||
category: this.goodsCategoryId,
|
||||
search_text: this.searchText,
|
||||
goods_class: '1,6',
|
||||
status: 1,
|
||||
scene:'billing',
|
||||
}).then((res) => {
|
||||
if (this.$refs.goodsLoading) this.$refs.goodsLoading.hide();
|
||||
if (res.code == 0) {
|
||||
this.goodsData.total = res.data.count;
|
||||
// this.goodsData.list = res.data.list || [];
|
||||
res.data.list.forEach(item => {
|
||||
item.adjust = {}; // 存储规格调价
|
||||
});
|
||||
if (this.goodsData.index == 1) this.goodsData.list = []; //如果是第一页需手动制空列表
|
||||
this.goodsData.list.push(...res.data.list);
|
||||
if(res.data.list.length) this.goodsNextPage = true;
|
||||
else this.goodsNextPage = false;
|
||||
if(this.scanCodeSearch) this.searchText = '';
|
||||
this.scanCodeSearch = false;
|
||||
}
|
||||
this.isGoodsLoad = true;
|
||||
})
|
||||
},
|
||||
goodsSelect(data, index) {
|
||||
if (this.type == 'goods' && !data.stock) return;
|
||||
if (index != undefined) this.actionIndex = index;
|
||||
|
||||
if (data.goods_class != 6 && data.adjust && data.adjust['sku_id_' + data.sku_id]) {
|
||||
data.adjust_price = data.adjust['sku_id_' + data.sku_id].adjust_price;
|
||||
data.is_adjust = data.adjust['sku_id_' + data.sku_id].is_adjust;
|
||||
}
|
||||
|
||||
// 满足条件：多规格，称重商品计重模式，编辑数量
|
||||
if (data.goods_spec_format || (data.goods_class == 6 && data.pricing_type == 'weight') || (data.status && data.status == 'edit')) {
|
||||
this.setActive('SelectGoodsSku');
|
||||
getGoodsSkuList(data.goods_id).then(res => {
|
||||
if (res.code == 0) {
|
||||
let obj = {};
|
||||
res.data.forEach(item => {
|
||||
try{
|
||||
item.goods_spec_format = JSON.parse(item.goods_spec_format);
|
||||
}catch(e){
|
||||
item.goods_spec_format = [];
|
||||
}
|
||||
obj['sku_id_' + item.sku_id] = item;
|
||||
});
|
||||
this.allSku = obj;
|
||||
this.skuInfo = obj['sku_id_' + data.sku_id];
|
||||
// 调整价格，称重商品不参与永久调价，每次都是初始原价
|
||||
if (data.goods_class != 6 && data.adjust_price) {
|
||||
this.skuInfo.adjust_price = data.adjust_price; // 使用调价
|
||||
} else {
|
||||
this.skuInfo.adjust_price = data.price; // 未调价，使用原价
|
||||
}
|
||||
|
||||
this.skuInfo.adjust_price = parseFloat(this.skuInfo.adjust_price).toFixed(2);
|
||||
|
||||
this.$set(this.skuInfo, 'status', data.status || '');
|
||||
this.$set(this.skuInfo, 'editKey', data.editKey || '');
|
||||
|
||||
if (data.goods_class != 6) {
|
||||
this.skuInfo.num = data.num || 1; // 默认购买数量为1
|
||||
}
|
||||
|
||||
// 称重商品，计重模式
|
||||
if (data.goods_class == 6 && data.pricing_type == 'weight') {
|
||||
let num = data.num || '';
|
||||
|
||||
if (num) {
|
||||
this.$set(this.skuInfo, 'weigh', num);
|
||||
Object.values(this.allSku).forEach((item, index) => {
|
||||
this.$set(item, 'weigh', num);
|
||||
});
|
||||
}
|
||||
|
||||
// 打开收银秤
|
||||
this.openCashierScale()
|
||||
}
|
||||
|
||||
this.$refs.skuPopup.open();
|
||||
|
||||
setTimeout(() => {
|
||||
this.inputFocus = true;
|
||||
}, 200);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.handleSelectGoods(data);
|
||||
this.scanCode = {
|
||||
lastTime: 0,
|
||||
code: ''
|
||||
};
|
||||
this.$store.commit('billing/setActive', 'SelectGoodsAfter'); // 记录页面当前活跃值：选择完商品
|
||||
}
|
||||
},
|
||||
skuSelect(sku_id) {
|
||||
if (!this.skuInfo.status) {
|
||||
this.skuInfo = this.allSku['sku_id_' + sku_id];
|
||||
this.goodsItems.sku_id = sku_id
|
||||
let skuData = this.goodsData.list[this.actionIndex];
|
||||
|
||||
// 调整价格
|
||||
if (skuData.adjust && skuData.adjust['sku_id_' + sku_id]) {
|
||||
this.skuInfo.adjust_price = skuData.adjust['sku_id_' + sku_id].adjust_price;
|
||||
this.skuInfo.is_adjust = skuData.adjust['sku_id_' + sku_id].is_adjust;
|
||||
} else {
|
||||
// 使用原价
|
||||
this.skuInfo.adjust_price = this.skuInfo.price;
|
||||
}
|
||||
this.skuInfo.adjust_price = parseFloat(this.skuInfo.adjust_price).toFixed(2);
|
||||
|
||||
if (this.skuInfo.goods_class != 6) {
|
||||
this.skuInfo.num = this.skuInfo.num || 1; // 默认购买数量为1
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
skuConfirm() {
|
||||
if (!this.skuInfo) return;
|
||||
if (this.skuInfo.stock <= 0) {
|
||||
this.$util.showToast({
|
||||
title: '商品库存不足'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.skuInfo.price.length == 0 || this.skuInfo.adjust_price.length == 0) {
|
||||
this.$util.showToast({
|
||||
title: '请输入单价'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.skuInfo.price < 0 || this.skuInfo.adjust_price < 0) {
|
||||
this.$util.showToast({
|
||||
title: '单价不能小于0'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.skuInfo.goods_class != 6) {
|
||||
if (Number.parseInt(this.skuInfo.num) <= 0 || !/^\d{0,10}$/.test(Number.parseInt(this.skuInfo.num))) {
|
||||
this.$util.showToast({
|
||||
title: '请输入合法的数值，数值要大于零'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.skuInfo.stock < this.skuInfo.num) {
|
||||
this.$util.showToast({
|
||||
title: '商品库存不足'
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
if (this.skuInfo.goods_class == 6 && this.skuInfo.pricing_type == 'weight') {
|
||||
if (Number.parseFloat(this.skuInfo.weigh) <= 0 || !/^\d{0,10}(.?\d{0,3})$/.test(Number.parseFloat(this.skuInfo.weigh))) {
|
||||
this.$util.showToast({
|
||||
title: '请输入合法的数值，数值要大于零且小数位不能超过三位'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.skuInfo.stock < this.skuInfo.weigh) {
|
||||
this.$util.showToast({
|
||||
title: '商品库存不足'
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
this.$pos.send('CloseWeigher');
|
||||
} catch (e) {
|
||||
}
|
||||
}
|
||||
|
||||
this.skuInfo.is_adjust = this.skuInfo.adjust_price != this.skuInfo.price;
|
||||
|
||||
// 设置右侧商品的调价
|
||||
if (!this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuInfo.sku_id]) {
|
||||
this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuInfo.sku_id] = {};
|
||||
}
|
||||
this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuInfo.sku_id].adjust_price = this.skuInfo.adjust_price;
|
||||
this.goodsData.list[this.actionIndex].adjust['sku_id_' + this.skuInfo.sku_id].is_adjust = this.skuInfo.is_adjust;
|
||||
|
||||
this.handleSelectGoods(this.skuInfo);
|
||||
this.scanCode = {
|
||||
lastTime: 0,
|
||||
code: ''
|
||||
};
|
||||
this.$store.commit('billing/setActive', 'SelectGoodsAfter'); // 记录页面当前活跃值：选择完商品
|
||||
this.$refs.skuPopup.close();
|
||||
},
|
||||
search() {
|
||||
switch (this.type) {
|
||||
case 'service':
|
||||
this.serviceData.page = 0;
|
||||
this.serviceData.index = 1;
|
||||
this.$refs.loading.show();
|
||||
this.getService();
|
||||
break;
|
||||
case 'goods':
|
||||
this.goodsData.page = 0;
|
||||
this.goodsData.index = 1;
|
||||
this.$refs.goodsLoading.show();
|
||||
this.getGoods();
|
||||
break;
|
||||
}
|
||||
},
|
||||
destroyed() {
|
||||
this.mediaQueryOb.disconnect();
|
||||
},
|
||||
switchStoreAfter() {
|
||||
this.serviceCategory = [];
|
||||
this.serviceCategoryId = 'all';
|
||||
this.serviceData = {
|
||||
size: 12,
|
||||
index: 1,
|
||||
page: 0,
|
||||
total: 1,
|
||||
list: []
|
||||
};
|
||||
this.goodsCategoryId = 'all';
|
||||
this.goodsCategory = [];
|
||||
this.goodsData = {
|
||||
size: 30,
|
||||
index: 1,
|
||||
page: 0,
|
||||
total: 1,
|
||||
list: []
|
||||
};
|
||||
this.getServiceCategoryFn();
|
||||
this.getGoodsCategoryFn();
|
||||
this.getService();
|
||||
this.getGoods();
|
||||
},
|
||||
pageChange(e) {
|
||||
if (this.type == 'goods') {
|
||||
this.goodsData.index = e.current;
|
||||
this.getGoods();
|
||||
} else if (this.type == 'service') {
|
||||
this.serviceData.index = e.current;
|
||||
this.getService();
|
||||
}
|
||||
},
|
||||
switchItem(type) {
|
||||
this.type = type;
|
||||
if (this.type == 'goods') {
|
||||
this.goodsData.index = 1;
|
||||
this.getGoods();
|
||||
} else if (this.type == 'service') {
|
||||
this.serviceData.index = 1;
|
||||
this.getService();
|
||||
} else if (this.type == 'money') {
|
||||
// 无码商品
|
||||
this.setActive('UnnumberedGoods');
|
||||
}
|
||||
},
|
||||
keydown(value) {
|
||||
let arr = this.paymentMoney.split('.');
|
||||
if (arr[1]) {
|
||||
if (value == '.' || arr[1].length == 2) return;
|
||||
if (value == '00' && arr[1].length == 1) value = '0';
|
||||
}
|
||||
if (parseFloat(this.paymentMoney + value) > 1000000) {
|
||||
this.$util.showToast({
|
||||
title: '最大不能超过1000000'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.paymentMoney += value;
|
||||
},
|
||||
deleteCode() {
|
||||
this.paymentMoney = this.paymentMoney.substr(0, this.paymentMoney.length - 1);
|
||||
},
|
||||
paymentMoneyConfirm() {
|
||||
if (!this.paymentMoney.length) {
|
||||
this.$util.showToast({
|
||||
title: '请输入收款金额'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (isNaN(parseFloat(this.paymentMoney)) || !/^(([0-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/.test(parseFloat(this.paymentMoney))) {
|
||||
this.$util.showToast({
|
||||
title: '收款金额格式错误'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (this.paymentMoney <= 0) {
|
||||
this.$util.showToast({
|
||||
title: '收款金额不能小于等于0'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (parseFloat(this.paymentMoney) > 1000000) {
|
||||
this.$util.showToast({
|
||||
title: '最大不能超过1000000'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.handleSelectGoods({
|
||||
goods_id: parseInt(new Date().getTime() / 1000),
|
||||
sku_id: parseInt(new Date().getTime() / 1000),
|
||||
num: 1,
|
||||
money: parseFloat(this.paymentMoney)
|
||||
});
|
||||
this.scanCode = {
|
||||
lastTime: 0,
|
||||
code: ''
|
||||
};
|
||||
this.$store.commit('billing/setActive', 'SelectGoodsAfter'); // 记录页面当前活跃值：选择完商品
|
||||
this.paymentMoney = '';
|
||||
},
|
||||
/**
|
||||
* 打开收银秤
|
||||
*/
|
||||
openCashierScale() {
|
||||
if (this.addon.includes('scale')) {
|
||||
if (!this.cashierScale) {
|
||||
getElectronicScaleInformation().then(res => {
|
||||
if (res.code == 0 && res.data) {
|
||||
this.cashierScale = res.data.config;
|
||||
try {
|
||||
this.$pos.send('OpenWeigher', `OS2X:${this.cashierScale.serialport}:${this.cashierScale.baudrate}`);
|
||||
} catch (e) {
|
||||
this.cashierScale = null
|
||||
}
|
||||
}
|
||||
})
|
||||
} else {
|
||||
try {
|
||||
this.$pos.send('OpenWeigher', `OS2X:${this.cashierScale.serialport}:${this.cashierScale.baudrate}`);
|
||||
} catch (e) {
|
||||
this.cashierScale = null
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 去皮
|
||||
*/
|
||||
tare() {
|
||||
this.$pos.send('Tare')
|
||||
},
|
||||
/**
|
||||
* 清零
|
||||
*/
|
||||
zero() {
|
||||
this.$pos.send('Zero');
|
||||
},
|
||||
setActive(key) {
|
||||
this.$store.commit('billing/setActive', key);
|
||||
},
|
||||
paymentMoneyChange(event) {
|
||||
if (this.paymentMoney.length == 0) {
|
||||
// 如果没有输入则结账
|
||||
this.setActive('SelectGoodsAfter')
|
||||
} else {
|
||||
this.setActive('UnnumberedGoods')
|
||||
}
|
||||
},
|
||||
// 商品数量减少
|
||||
dec(data) {
|
||||
if (this.skuInfo) {
|
||||
if (this.skuInfo.num <= 1 && this.skuInfo.stock > 0) {
|
||||
this.skuInfo.num = 1;
|
||||
} else if(this.skuInfo.stock > 0) {
|
||||
this.skuInfo.num--;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
// 商品数量增加
|
||||
inc(data) {
|
||||
if (this.skuInfo) {
|
||||
if (this.skuInfo.num >= this.skuInfo.stock && this.skuInfo.stock > 0) {
|
||||
this.skuInfo.num = this.skuInfo.stock;
|
||||
} else if(this.skuInfo.stock > 0){
|
||||
this.skuInfo.num++;
|
||||
}
|
||||
this.$forceUpdate();
|
||||
}
|
||||
},
|
||||
// 打开钱箱
|
||||
openCashBox() {
|
||||
this.$emit('openCashBox')
|
||||
},
|
||||
setGoodsCategoryShow(id, index) {
|
||||
if (!this.goodsCategoryShow) {
|
||||
if (id === 'all') {
|
||||
if (this.goodsCategory.length > 13) {
|
||||
this.goodsCategoryShow = !this.goodsCategoryShow
|
||||
} else {
|
||||
this.goodsCategoryId = id
|
||||
}
|
||||
} else {
|
||||
this.goodsCategoryId = id
|
||||
}
|
||||
} else {
|
||||
this.goodsCategoryId = id;
|
||||
this.goodsCategoryIndex = index;
|
||||
this.goodsCategoryShow = false
|
||||
}
|
||||
},
|
||||
setServiceCategoryShow(id, index) {
|
||||
if (!this.serviceCategoryShow) {
|
||||
if (id === 'all') {
|
||||
if (this.serviceCategory.length > 13) {
|
||||
this.serviceCategoryShow = !this.serviceCategoryShow
|
||||
} else {
|
||||
this.serviceCategoryId = id
|
||||
}
|
||||
|
||||
} else {
|
||||
this.serviceCategoryId = id
|
||||
}
|
||||
} else {
|
||||
this.serviceCategoryId = id;
|
||||
this.serviceCategoryIndex = index;
|
||||
this.serviceCategoryShow = false
|
||||
}
|
||||
},
|
||||
isListShow() {
|
||||
this.goodsCategoryShow = false;
|
||||
this.serviceCategoryShow = false;
|
||||
},
|
||||
// 获取商品信息通过条形码
|
||||
getSkuByCode(code) {
|
||||
if (this.type != 'goods' || this.billingActive == 'ShowMember' || this.billingActive == 'OrderCreate') return;
|
||||
|
||||
code = code.toString().trim();
|
||||
getGoodsInfoByCode(code).then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.data) {
|
||||
if (res.data.goods_state == 0) {
|
||||
this.$util.showToast({
|
||||
title: '该商品已下架'
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (res.data.stock == 0) {
|
||||
this.$util.showToast({
|
||||
title: '该商品库存不足！'
|
||||
});
|
||||
return;
|
||||
}
|
||||
this.handleSelectGoods(res.data);
|
||||
this.scanCode = {
|
||||
lastTime: 0,
|
||||
code: ''
|
||||
};
|
||||
this.$store.commit('billing/setActive', 'SelectGoodsAfter'); // 记录页面当前活跃值：选择完商品
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: '未找到该商品！'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
this.$util.showToast({
|
||||
title: res.message,
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 处理选中商品数据
|
||||
handleSelectGoods(data) {
|
||||
let key = 'sku_' + data.sku_id;
|
||||
let num = data.num || 1;
|
||||
num = parseInt(num);
|
||||
|
||||
// 项目服务和称重商品每次都是新增，重新定义key
|
||||
if (data.goods_class == 4 || data.goods_class == 6) {
|
||||
if (data.status == 'edit') {
|
||||
// 编辑
|
||||
key = data.editKey;
|
||||
} else {
|
||||
//新增
|
||||
var index = 0;
|
||||
Object.keys(this.billingGoodsData).forEach(k => {
|
||||
if (k.indexOf(key) != -1) {
|
||||
index++;
|
||||
}
|
||||
});
|
||||
key += '_' + index;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// 称重商品，计价方式：计重
|
||||
if (data.goods_class == 6 && data.pricing_type == 'weight') num = Number.parseFloat(data.weigh);
|
||||
|
||||
let _billingGoodsData = this.$util.deepClone(this.billingGoodsData);
|
||||
|
||||
// 已加入清单，追加数量
|
||||
if (_billingGoodsData[key]) {
|
||||
_billingGoodsData[key].num += num;
|
||||
} else {
|
||||
// 第一次加入清单，设置数据
|
||||
_billingGoodsData[key] = this.$util.deepClone(data);
|
||||
_billingGoodsData[key].num = num;
|
||||
}
|
||||
|
||||
// 编辑商品数量
|
||||
if (data.status && data.status == 'edit') {
|
||||
_billingGoodsData[key].num = num;
|
||||
}
|
||||
|
||||
// 称重商品每次覆盖数量
|
||||
if (data.goods_class == 6 && data.pricing_type == 'weight') {
|
||||
_billingGoodsData[key].num = parseFloat(_billingGoodsData[key].num.toFixed(3))
|
||||
}
|
||||
|
||||
// 调整单价
|
||||
if (data.adjust_price) {
|
||||
_billingGoodsData[key].price = parseFloat(data.adjust_price);
|
||||
_billingGoodsData[key].adjust_price = parseFloat(data.adjust_price);
|
||||
}
|
||||
|
||||
_billingGoodsData[key].is_adjust = data.is_adjust || false;
|
||||
|
||||
this.$store.commit('billing/setGoodsData', _billingGoodsData);
|
||||
|
||||
},
|
||||
/**
|
||||
* 添加扫码监听事件
|
||||
*/
|
||||
addScanCodeEvent() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.addEventListener('keyup', this.listenerScanCode, true);
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
window.addEventListener('keypress', this.listenerScanCode, true);
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 移除扫码监听事件
|
||||
*/
|
||||
removeScanCodeEvent() {
|
||||
// #ifdef APP-PLUS
|
||||
plus.key.removeEventListener('keyup', this.listenerScanCode, true);
|
||||
// #endif
|
||||
|
||||
// #ifdef H5
|
||||
window.removeEventListener('keypress', this.listenerScanCode, true);
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 监听扫码事件
|
||||
* @param {Object} e
|
||||
*/
|
||||
listenerScanCode(e) {
|
||||
const clearBarCode = () => {
|
||||
this.scanCode = {
|
||||
lastTime: 0,
|
||||
code: ''
|
||||
};
|
||||
this.$store.commit('billing/setIsScanTrigger', false);
|
||||
};
|
||||
|
||||
// #ifdef H5
|
||||
var currCode = e.keyCode || e.which || e.charCode;
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
const keyArr = {
|
||||
'keycode_7': 0,
|
||||
'keycode_8': 1,
|
||||
'keycode_9': 2,
|
||||
'keycode_10': 3,
|
||||
'keycode_11': 4,
|
||||
'keycode_12': 5,
|
||||
'keycode_13': 6,
|
||||
'keycode_14': 7,
|
||||
'keycode_15': 8,
|
||||
'keycode_16': 9
|
||||
};
|
||||
var currCode = keyArr['keycode_' + e.keyCode] || '';
|
||||
// #endif
|
||||
|
||||
var currTime = new Date().getTime();
|
||||
if (this.scanCode.lastTime > 0) {
|
||||
if (currTime - this.scanCode.lastTime <= 100) {
|
||||
this.scanCode.code += String.fromCharCode(currCode);
|
||||
this.$store.commit('billing/setIsScanTrigger', true);
|
||||
} else if (currTime - this.scanCode.lastTime > 500) {
|
||||
// 输入间隔500毫秒清空
|
||||
clearBarCode();
|
||||
}
|
||||
} else {
|
||||
this.scanCode.code = String.fromCharCode(currCode);
|
||||
}
|
||||
this.scanCode.lastTime = currTime;
|
||||
|
||||
// #ifdef H5
|
||||
var code = 13;
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
var code = 66;
|
||||
// #endif
|
||||
|
||||
if (currCode == code) {
|
||||
|
||||
// 扫码枪
|
||||
if (this.scanCode.code && this.scanCode.code.length >= 8) {
|
||||
this.scanCodeSearch = true;
|
||||
this.getSkuByCode(this.scanCode.code);
|
||||
this.$store.commit('billing/setIsScanTrigger', true);
|
||||
}
|
||||
|
||||
// 回车输入后清空
|
||||
clearBarCode();
|
||||
}
|
||||
|
||||
},
|
||||
/**
|
||||
* 添加键盘监听事件
|
||||
*/
|
||||
addKeyDownEvent() {
|
||||
// #ifdef H5
|
||||
window.addEventListener("keydown", this.listenerKeyDown, true);
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 移除键盘监听事件
|
||||
*/
|
||||
removeKeyDownEvent() {
|
||||
// #ifdef H5
|
||||
window.removeEventListener("keydown", this.listenerKeyDown, true);
|
||||
// #endif
|
||||
},
|
||||
// 监听键盘按下事件
|
||||
listenerKeyDown(e) {
|
||||
var code = e.code;
|
||||
|
||||
if (this.billingActive == 'SelectGoodsSku') {
|
||||
|
||||
// 打开商品规格项弹出框
|
||||
if (code == 'Enter' || code == 'NumpadEnter') {
|
||||
this.skuConfirm();
|
||||
}
|
||||
|
||||
} else if (this.billingActive == 'UnnumberedGoods') {
|
||||
// 无码商品
|
||||
|
||||
if (code == 'Enter' || code == 'NumpadEnter') {
|
||||
|
||||
if (!this.billingIsScanTrigger) this.paymentMoneyConfirm();
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
/**
|
||||
* 监听重量变化
|
||||
* @param {Object} text
|
||||
*/
|
||||
window.WEIGHER_DATA_CALLBACK = function (text) {
|
||||
let data = text.split(':');
|
||||
self.$set(self.skuInfo, 'weigh', data[0] != '-' ? data[0] : '')
|
||||
};
|
||||
628
addon/cashier/source/os/components/ns-goods/index.scss
Executable file
628
addon/cashier/source/os/components/ns-goods/index.scss
Executable file
@@ -0,0 +1,628 @@
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.header-action {
|
||||
padding: 0.22rem 0.24rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border-radius: 0.04rem;
|
||||
margin-bottom: 0.2rem;
|
||||
height: 0.88rem;
|
||||
|
||||
.header-action-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.44rem;
|
||||
background-color: var(--primary-color-light-9);
|
||||
border-radius: 0.22rem;
|
||||
|
||||
view {
|
||||
min-width: 1.02rem;
|
||||
height: 0.44rem;
|
||||
line-height: 0.44rem;
|
||||
text-align: center;
|
||||
font-size: 0.14rem;
|
||||
border-left-width: 0;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border-radius: 0.22rem;
|
||||
color: $primary-color;
|
||||
|
||||
&.active {
|
||||
color: #fff;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.header-action-center {
|
||||
margin-left: 0.29rem;
|
||||
|
||||
.left {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
|
||||
view {
|
||||
min-width: 1.02rem;
|
||||
height: 0.44rem;
|
||||
line-height: 0.44rem;
|
||||
text-align: center;
|
||||
font-size: 0.14rem;
|
||||
border-left-width: 0;
|
||||
transition: all 0.3s;
|
||||
cursor: pointer;
|
||||
border-radius: 0.22rem;
|
||||
color: #fff;
|
||||
background-color: $primary-color;
|
||||
}
|
||||
}
|
||||
|
||||
.header-action-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 0.4rem;
|
||||
border-radius: 0.2rem;
|
||||
border: 0.01rem solid #CCCCCC;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
|
||||
input {
|
||||
background: #ffffff;
|
||||
border-radius: 0.02rem;
|
||||
height: 0.36rem;
|
||||
padding-left: 0.24rem;
|
||||
font-size: 0.14rem;
|
||||
width: 2.80rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
width: 0.36rem;
|
||||
height: 0.36rem;
|
||||
background: #ffffff;
|
||||
border-radius: 0.02rem;
|
||||
border-left: 0;
|
||||
text-align: center;
|
||||
line-height: 0.36rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
height: calc(100% - 1.08rem);
|
||||
transform: rotate(0);
|
||||
display: flex;
|
||||
|
||||
.table-pages {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 1.72rem;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
padding: 0.24rem 0.20rem;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.type-switch {
|
||||
width: 1.52rem;
|
||||
margin-right: 0.2rem;
|
||||
padding: 0.24rem 0;
|
||||
font-size: 0.14rem;
|
||||
white-space: nowrap;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.04rem;
|
||||
position: relative;
|
||||
|
||||
.list {
|
||||
height: calc(100% - 0.6rem) !important;
|
||||
}
|
||||
|
||||
.list-all {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
top: 0;
|
||||
z-index: 99;
|
||||
box-shadow: 0.04rem 0 0.12rem 0 rgba(0, 0, 0, 0.04);
|
||||
transition: width 0.3s;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-radius: 0.04rem;
|
||||
|
||||
&.show {
|
||||
width: 4.08rem;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.center {
|
||||
width: 4.08rem;
|
||||
height: 100%;
|
||||
padding: 0.24rem;
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.switch-item {
|
||||
margin-right: 0.24rem;
|
||||
width: 1.04rem;
|
||||
&:nth-child(2n+2){
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/deep/ .uni-scroll-view-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
// align-items: center;
|
||||
}
|
||||
|
||||
// /deep/ .uni-scroll-view {
|
||||
// width: 1.1rem !important;
|
||||
// }
|
||||
|
||||
.switch-item {
|
||||
width: 1.04rem;
|
||||
border-radius: 0.04rem;
|
||||
padding: 0.1rem 0.1rem;
|
||||
font-size: 0.14rem;
|
||||
text-align: center;
|
||||
margin-left: 0.24rem;
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border: 0.01rem solid #DCDEE2;
|
||||
.item-title{
|
||||
white-space: normal;
|
||||
max-height: 0.4rem;
|
||||
overflow: hidden;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
.all-category{
|
||||
.switch-item {
|
||||
height: 0.4rem;
|
||||
width: 1.04rem;
|
||||
border-radius: 0.04rem;
|
||||
padding: 0 0.1rem;
|
||||
font-size: 0.14rem;
|
||||
text-align: center;
|
||||
line-height: 0.4rem;
|
||||
margin-left: 0.24rem;
|
||||
cursor: pointer;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border: 0.01rem solid #DCDEE2;
|
||||
}
|
||||
}
|
||||
.switch-item.active {
|
||||
background-color: $primary-color;
|
||||
border-color: $primary-color;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.switch-item:not(:last-child) {
|
||||
margin-bottom: 0.20rem;
|
||||
}
|
||||
}
|
||||
|
||||
.list-wrap {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
padding-bottom: 0.78rem;
|
||||
}
|
||||
|
||||
.money-pages {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.money-wrap {
|
||||
background: #fff;
|
||||
border-radius: 0.05rem;
|
||||
padding-top: 0.3rem;
|
||||
|
||||
.head {
|
||||
height: 0.6rem;
|
||||
line-height: 0.6rem;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
position: relative;
|
||||
|
||||
text {
|
||||
font-size: 0.16rem;
|
||||
}
|
||||
|
||||
.iconguanbi1 {
|
||||
position: absolute;
|
||||
right: 0.15rem;
|
||||
font-size: 0.22rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
display: flex;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
height: 0.6rem;
|
||||
align-items: center;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0 0.15rem;
|
||||
|
||||
.unit {
|
||||
font-size: 0.25rem;
|
||||
}
|
||||
|
||||
.money {
|
||||
margin-left: 0.05rem;
|
||||
font-size: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.keyboard-wrap {
|
||||
width: 4rem;
|
||||
padding: 0 0.2rem 0.3rem 0.2rem;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: calc(100% + 0.12rem);
|
||||
|
||||
.table-item {
|
||||
border: 0.01rem solid #fff;
|
||||
box-sizing: border-box;
|
||||
padding: 0.1rem 0.18rem 0.1rem 0.1rem;
|
||||
background-color: #fff;
|
||||
margin-bottom: 0.12rem;
|
||||
margin-right: 0.12rem;
|
||||
cursor: pointer;
|
||||
transition: border-color, background-color 0.3s;
|
||||
position: relative;
|
||||
border-radius: 0.04rem;
|
||||
&.item-mum-2{
|
||||
width: calc((100% - 0.25rem) / 2);
|
||||
}
|
||||
&.item-mum-3{
|
||||
width: calc((100% - 0.37rem) / 3);
|
||||
}
|
||||
&.item-mum-4{
|
||||
width: calc((100% - 0.49rem) / 4);
|
||||
}
|
||||
&:focus{
|
||||
outline: none;
|
||||
}
|
||||
.item-other {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0.1rem;
|
||||
|
||||
}
|
||||
|
||||
.item-img {
|
||||
width: 0.9rem;
|
||||
height: 0.9rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
-ms-flex-negative: 0;
|
||||
-webkit-flex-shrink: 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
border-radius: 0.03rem;
|
||||
}
|
||||
}
|
||||
|
||||
.item-name {
|
||||
height: 0.4rem;
|
||||
line-height: 0.2rem;
|
||||
max-width: 1.58rem;
|
||||
margin-bottom: 0.05rem;
|
||||
word-break: break-all;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
}
|
||||
|
||||
.item-info {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
|
||||
.item-time {
|
||||
font-size: 0.12rem;
|
||||
color: #909399;
|
||||
}
|
||||
|
||||
.item-money {
|
||||
font-size: 0.14rem;
|
||||
color: $primary-color;
|
||||
height: 0.19rem;
|
||||
line-height: 0.19rem;
|
||||
}
|
||||
|
||||
.item-stock {
|
||||
height: 0.17rem;
|
||||
font-size: 0.12rem;
|
||||
color: #808695;
|
||||
line-height: 0.17rem;
|
||||
}
|
||||
}
|
||||
|
||||
.no-stock {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
cursor: not-allowed;
|
||||
|
||||
image {
|
||||
height: 60%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.table-item.yes-stock {
|
||||
&:hover {
|
||||
background-color: var(--primary-color-light-9);
|
||||
border-color: $primary-color;
|
||||
}
|
||||
|
||||
&.focus,
|
||||
&:focus {
|
||||
background-color: var(--primary-color-light-9);
|
||||
border-color: $primary-color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&.active {
|
||||
border-color: $primary-color;
|
||||
background-color: $primary-color;
|
||||
color: #fff;
|
||||
|
||||
.item-time,
|
||||
.item-money,
|
||||
.item-stock {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sku-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 7rem;
|
||||
height: 4rem;
|
||||
background-color: #fff;
|
||||
border-radius: 0.04rem;
|
||||
box-shadow: 0 0.01rem 0.12rem 0 rgba(0, 0, 0, 0.1);
|
||||
|
||||
.header,
|
||||
.footer {
|
||||
height: 0.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom: 0.01rem solid #e6e6e6;
|
||||
position: relative;
|
||||
|
||||
.title {
|
||||
font-size: 0.16rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
line-height: 1;
|
||||
position: absolute;
|
||||
right: 0.15rem;
|
||||
font-size: 0.2rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.body {
|
||||
flex: 1;
|
||||
padding: 0.15rem;
|
||||
|
||||
scroll-view {
|
||||
height: 2.55rem;
|
||||
}
|
||||
}
|
||||
|
||||
.spec {
|
||||
line-height: 0.35rem;
|
||||
font-weight: bold;
|
||||
margin-top: 0.1rem;
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
.value-item {
|
||||
display: inline-block;
|
||||
height: 0.3rem;
|
||||
line-height: 0.3rem;
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
margin: 0.05rem 0.1rem 0 0;
|
||||
padding: 0 0.1rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border-radius: 0.04rem;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: var(--primary-color-light-9);
|
||||
border-color: $primary-color;
|
||||
color: $primary-color;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: #999;
|
||||
cursor: not-allowed;
|
||||
background: #f7f7f7;
|
||||
border-color: #f7f7f7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.spec-value-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.spec-value-input {
|
||||
margin-right: 0.05rem;
|
||||
border-width: 0.01rem;
|
||||
border-style: solid;
|
||||
background-color: #fff;
|
||||
color: rgba(0, 0, 0, 0.85);
|
||||
padding-left: 0.1rem;
|
||||
height: 0.38rem;
|
||||
line-height: 0.38rem;
|
||||
font-size: 0.14rem;
|
||||
border-color: #e6e6e6;
|
||||
border-radius: 0.02rem;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.num-dec {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background: #e6e6e6;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
border-radius: 30%;
|
||||
text-align: center;
|
||||
line-height: 0.23rem;
|
||||
font-size: 0.25rem;
|
||||
margin-right: 0.1rem;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.num-inc {
|
||||
width: 0.25rem;
|
||||
height: 0.25rem;
|
||||
background: $primary-color;
|
||||
border: 0.01rem solid #e6e6e6;
|
||||
border-radius: 30%;
|
||||
text-align: center;
|
||||
line-height: 0.23rem;
|
||||
font-size: 0.25rem;
|
||||
margin-left: 0.1rem;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.scale-action {
|
||||
button {
|
||||
width: .8rem;
|
||||
margin: .15rem .15rem 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
display: flex;
|
||||
|
||||
.image {
|
||||
width: 0.7rem;
|
||||
height: 0.7rem;
|
||||
margin-right: 0.1rem;
|
||||
flex-shrink: 0;
|
||||
overflow: hidden;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
line-height: 1;
|
||||
margin-top: 0.05rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
border: 0;
|
||||
height: 0.6rem;
|
||||
|
||||
button {
|
||||
width: 95%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding-top: 1.2rem;
|
||||
|
||||
image {
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.tips {
|
||||
color: #999;
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 450px) and (max-width: 950px) {
|
||||
.type-switch .list-all.show {
|
||||
width: 2.78rem;
|
||||
.center{
|
||||
width: 2.78rem;
|
||||
.switch-item:nth-child(2n+2) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.switch-item:nth-child(3n+3) {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1201px) and (max-width: 1900px) {
|
||||
.type-switch .list-all.show {
|
||||
width: 6.6rem;
|
||||
.center{
|
||||
width: 6.6rem;
|
||||
.switch-item:nth-child(5n+5) {
|
||||
margin-right: 0;
|
||||
}
|
||||
.switch-item:nth-child(3n+3) {
|
||||
margin-right: 0.24rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
239
addon/cashier/source/os/components/ns-goods/ns-goods.vue
Executable file
239
addon/cashier/source/os/components/ns-goods/ns-goods.vue
Executable file
@@ -0,0 +1,239 @@
|
||||
<template>
|
||||
<view class="container goods-container">
|
||||
<view class="header-action common-wrap">
|
||||
<view class="flex items-center">
|
||||
<view class="header-action-left">
|
||||
<view class="flex-1" :class="{ active: type == 'goods' }" @click="switchItem('goods')">商品</view>
|
||||
<view class="flex-1" :class="{ active: type == 'service' }" @click="switchItem('service')">项目</view>
|
||||
<view class="flex-1" :class="{ active: type == 'money' }" @click="switchItem('money')">无码商品</view>
|
||||
</view>
|
||||
<view class="header-action-center flex" v-if="billingIsShowCashBox">
|
||||
<view class="flex-1" @click="openCashBox()">打开钱箱</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="header-action-right">
|
||||
<input placeholder="请输入商品/项目名称/编码" placeholder-style="font-size:0.14rem;color:#ACACAC;" v-model="searchText" @focus="setActive('inputSearchText')" @blur="setActive('')" @confirm="search" />
|
||||
<view class="search-btn" @click="search">
|
||||
<text class="iconfont icon31sousuo"></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<view class="type-switch common-wrap flex-shrink-0 flex uni-column" v-if="serviceCategory.length && type == 'service'">
|
||||
<view class="switch-item flex-shrink-0" :class="{ active: serviceCategoryId == 'all' }" @click.stop="setServiceCategoryShow('all',0)">所有分类</view>
|
||||
<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-into-view="'serviceCategory-' + serviceCategoryIndex" class="list flex-shrink-0 common-scrollbar">
|
||||
<view :id="'serviceCategory-' + index" class="switch-item flex-shrink-0" :class="{ active: serviceCategoryId == item.category_id }" v-for="(item, index) in serviceCategory" :key="index" @click.stop="setServiceCategoryShow(item.category_id,index)">
|
||||
<view class="item-title">{{ item.category_name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-if="serviceCategory.length > 13" class="list-all common-wrap" :class="{ 'show': serviceCategoryShow }" @click.stop="() => { return false }">
|
||||
<view class="all-category center flex content-start">
|
||||
<view class="switch-item flex-shrink-0" :class="{ active: serviceCategoryId == 'all' }" @click="setServiceCategoryShow('all', 0)">所有分类</view>
|
||||
<view class="switch-item flex-shrink-0" :class="{ active: serviceCategoryId == item.category_id }" v-for="(item, index) in serviceCategory" :key="index" @click="setServiceCategoryShow(item.category_id, index)">
|
||||
<view class="item-title">{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="type-switch common-wrap flex-shrink-0 flex uni-column" v-if="goodsCategory.length && type == 'goods'">
|
||||
<view class="switch-item flex-shrink-0" :class="{ active: goodsCategoryId == 'all' }" @click.stop.prevent="setGoodsCategoryShow('all',0)">所有分类</view>
|
||||
<scroll-view scroll-y="true" :show-scrollbar="false" :scroll-into-view="'goodsCategory-' + goodsCategoryIndex" class="list flex-shrink-0 common-scrollbar" v-show="goodsCategory.length && type == 'goods'">
|
||||
<view :id="'goodsCategory-' + index" class="switch-item flex-shrink-0" :class="{ active: goodsCategoryId == item.category_id }" v-for="(item, index) in goodsCategory" :key="index" @click.stop="setGoodsCategoryShow(item.category_id,index)">
|
||||
<view class="item-title">{{ item.category_name }}</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-if="goodsCategory.length > 13" class="list-all common-wrap" :class="{ 'show': goodsCategoryShow }" @click.stop="() => { return false }">
|
||||
<view class="all-category center flex content-start">
|
||||
<view class="switch-item flex-shrink-0" :class="{ active: goodsCategoryId == 'all' }" @click="setGoodsCategoryShow('all')">所有分类</view>
|
||||
<view class="switch-item flex-shrink-0" :class="{ active: goodsCategoryId == item.category_id }" v-for="(item, index) in goodsCategory" :key="index" @click="setGoodsCategoryShow(item.category_id, index)">
|
||||
<view class="item-title">{{ item.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-y="true" class="list-wrap goods" v-show="type == 'goods'" @scrolltolower="nextGoodsLiist">
|
||||
<view class="table-list" v-show="goodsData.list.length" data-focus="true">
|
||||
<view class="table-item goods-select-focus goods-focus"
|
||||
:class="{ 'yes-stock': item.stock>0, 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: billingGoodsIds.indexOf(item.goods_id) != -1, focus: indexFocus == index }"
|
||||
v-for="(item, index) in goodsData.list" :key="index" @click="goodsSelect(item, index)" tabindex="0" :data-tab-index="index">
|
||||
|
||||
<view class="item-info">
|
||||
<view class="item-img">
|
||||
<image v-if="item.goods_image == '@/static/goods/goods.png'" src="@/static/goods/goods.png" mode="widthFix"/>
|
||||
<image v-else :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" @error="item.goods_image = '@/static/goods/goods.png'" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="item-other flex-1">
|
||||
<view class="item-name multi-hidden">{{ item.goods_name }}</view>
|
||||
<view class="w-full flex justify-between items-center self-end">
|
||||
<view class="item-money">￥{{ item.price | moneyFormat }}</view>
|
||||
<view class="item-stock">库存：{{ item.stock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-stock" v-if="item.stock <= 0">
|
||||
<image src="@/static/stock/stock_empty.png" mode="heightFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-show="isGoodsLoad && !goodsData.list.length">
|
||||
<image src="@/static/goods/goods_empty.png" mode="widthFix"/>
|
||||
<view class="tips">暂无商品</view>
|
||||
</view>
|
||||
<ns-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false" ref="goodsLoading"></ns-loading>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y="true" class="list-wrap service" v-show="type == 'service'">
|
||||
<view class="table-list" v-show="serviceData.list.length">
|
||||
|
||||
<view class="table-item goods-select-focus service-focus"
|
||||
:class="{ 'yes-stock': item.stock > 0, 'item-mum-2': itemNum == 2, 'item-mum-3': itemNum == 3, 'item-mum-4': itemNum == 4, active: billingGoodsIds.indexOf(item.goods_id) != -1, focus: indexFocus == index }"
|
||||
v-for="(item, index) in serviceData.list" :key="index" @click="goodsSelect(item, index)" tabindex="0" :data-tab-index="index">
|
||||
|
||||
<view class="item-info">
|
||||
<view class="item-img">
|
||||
<image v-if="item.goods_image == '@/static/goods/goods.png'" src="@/static/goods/goods.png" mode="widthFix"/>
|
||||
<image v-else :src="$util.img(item.goods_image.split(',')[0], { size: 'small' })" @error="item.goods_image = '@/static/goods/goods.png'" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="item-other">
|
||||
<view class="item-name multi-hidden">{{ item.goods_name }}</view>
|
||||
<view class="w-full flex justify-between items-center self-end">
|
||||
<view class="item-money">￥{{ item.price | moneyFormat }}</view>
|
||||
<view class="item-time" v-if="item.service_length">时长：{{ item.service_length }}分钟</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="no-stock" v-if="item.stock <= 0">
|
||||
<image src="@/static/stock/stock_empty.png" mode="heightFix"/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="empty" v-show="!serviceData.list.length">
|
||||
<image src="@/static/goods/goods_empty.png" mode="widthFix"/>
|
||||
<view class="tips">暂无商品</view>
|
||||
</view>
|
||||
<ns-loading :layer-background="{ background: 'rgba(255,255,255,.6)' }" :default-show="false" ref="loading"></ns-loading>
|
||||
</scroll-view>
|
||||
|
||||
<view class="table-pages" v-show="type == 'service' && serviceData.list.length">
|
||||
<uni-pagination :total="serviceData.total" :showIcon="true" @change="pageChange" :pageSize="serviceData.size" :value="serviceData.index" />
|
||||
</view>
|
||||
<!-- <view class="table-pages" v-show="type == 'goods' && goodsData.list.length">
|
||||
<uni-pagination :total="goodsData.total" :showIcon="true" @change="pageChange" :pageSize="goodsData.size" :value="goodsData.index" />
|
||||
</view> -->
|
||||
|
||||
<view class="money-pages" v-show="type == 'money'">
|
||||
<view class="money-wrap">
|
||||
<view class="content-wrap">
|
||||
<view class="unit">￥</view>
|
||||
<input type="text" class="money" v-model="paymentMoney" @input="paymentMoneyChange" />
|
||||
</view>
|
||||
<view class="keyboard-wrap">
|
||||
<view class="num-wrap">
|
||||
<view class="key-item" @click="keydown('1')">1</view>
|
||||
<view class="key-item" @click="keydown('2')">2</view>
|
||||
<view class="key-item" @click="keydown('3')">3</view>
|
||||
<view class="key-item" @click="keydown('4')">4</view>
|
||||
<view class="key-item" @click="keydown('5')">5</view>
|
||||
<view class="key-item" @click="keydown('6')">6</view>
|
||||
<view class="key-item" @click="keydown('7')">7</view>
|
||||
<view class="key-item" @click="keydown('8')">8</view>
|
||||
<view class="key-item" @click="keydown('9')">9</view>
|
||||
<view class="key-item" @click="keydown('00')">00</view>
|
||||
<view class="key-item" @click="keydown('0')">0</view>
|
||||
<view class="key-item" @click="keydown('.')">.</view>
|
||||
</view>
|
||||
<view class="action-wrap">
|
||||
<view class="delete" @click="deleteCode">删除</view>
|
||||
<view class="delete" @click="paymentMoney = ''">清空</view>
|
||||
<view class="confirm" @click="paymentMoneyConfirm">确认</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-popup ref="skuPopup" type="center">
|
||||
<view class="sku-wrap">
|
||||
<view class="header">
|
||||
<text class="title">{{ skuInfo && skuInfo.status == 'edit' ? '调整' : '选择' }}</text>
|
||||
<text class="iconfont iconguanbi1" @click="$refs.skuPopup.close()"></text>
|
||||
</view>
|
||||
<view class="body">
|
||||
<scroll-view scroll-y="true">
|
||||
<view class="goods-info" v-if="skuInfo">
|
||||
<view class="image">
|
||||
<image v-if="skuInfo.sku_image == '@/static/goods/goods.png'" src="@/static/goods/goods.png" mode="widthFix"/>
|
||||
<image v-else :src="$util.img(skuInfo.sku_image, { size: 'small' })" @error="skuInfo.sku_image = '@/static/goods/goods.png'" mode="widthFix"/>
|
||||
</view>
|
||||
<view class="info">
|
||||
<view class="multi-hidden">{{ skuInfo.goods_name }}</view>
|
||||
<view class="price">￥{{ skuInfo.adjust_price }} / {{ skuInfo.unit ? skuInfo.unit : '件' }}</view>
|
||||
<view>库存：{{ skuInfo.stock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-for="(item, index) in goodsSpec" :key="index">
|
||||
<view class="spec">{{ item.spec_name }}</view>
|
||||
<view class="spec-value">
|
||||
<view class="value-item" :class="{ active: spec.selected, disabled: (!spec.selected && skuInfo.status == 'edit') }" v-for="(spec, sindex) in item.value" :key="sindex" @click="skuSelect(spec.sku_id)">
|
||||
{{ spec.spec_value_name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<block v-if="skuInfo">
|
||||
<view class="spec">单价</view>
|
||||
<view class="spec-value spec-value-form">
|
||||
<input type="text" class="spec-value-input" v-model="skuInfo.adjust_price" placeholder="请输入单价" />
|
||||
<text>元</text>
|
||||
</view>
|
||||
<block v-if="skuInfo.goods_class != 6">
|
||||
<view class="spec">数量</view>
|
||||
<view class="spec-value spec-value-form">
|
||||
<view class="num-dec" @click.stop="dec">-</view>
|
||||
<input type="text" class="spec-value-input" v-model="skuInfo.num" placeholder="请输入数量" :focus="inputFocus" @focus="inputFocus = true" @blur="inputFocus = false" />
|
||||
<view class="num-inc" @click.stop="inc">+</view>
|
||||
<text>{{ skuInfo.unit }}</text>
|
||||
</view>
|
||||
</block>
|
||||
<block v-if="skuInfo.goods_class == 6 && skuInfo.pricing_type == 'weight'">
|
||||
<view class="info">
|
||||
<view class="spec">剩余库存</view>
|
||||
<view>{{ skuInfo.stock }}<text>{{ skuInfo.unit }}</text></view>
|
||||
</view>
|
||||
<view>
|
||||
<view class="spec">称重</view>
|
||||
<view class="spec-value spec-value-form">
|
||||
<input type="text" class="spec-value-input" v-model="skuInfo.weigh" placeholder="请输入重量" :focus="inputFocus" @focus="inputFocus = true" @blur="inputFocus = false" />
|
||||
<text>{{ skuInfo.unit }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex scale-action" v-if="addon.includes('scale') && cashierScale">
|
||||
<button type="primary" class="default-btn" plain @click="zero">归零</button>
|
||||
<button type="primary" class="default-btn" plain @click="tare">去皮</button>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<button type="default" class="primary-btn" @click="skuConfirm" :disabled="skuInfo && skuInfo.stock <= 0">确认</button>
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import index from './index.js';
|
||||
export default {
|
||||
mixins: [index],
|
||||
components:{
|
||||
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import './index.scss';
|
||||
</style>
|
||||
Reference in New Issue
Block a user