Skip to content

J
jwhx
Commit 9caa333a authored by xieyishang's avatar xieyishang
Browse files
Options

~~

parent 46183d5f
Hide whitespace changes
Inline Side-by-side
Showing with 728 additions and 68 deletions
resources/admin/src/api/module/cashier.js 0 → 100644
View file @ 9caa333a
import config from "@/config"
import http from "@/utils/request"
export default {
cart: {
list:{
url: `${config.API_URL}order/cashier/index`,
name: "购物车列表",
get: async function(data){
return await http.get(this.url, data);
}
},
edit: {
url: `${config.API_URL}order/cashier/edit`,
name: "修改购物车",
post: async function(params){
return await http.put(this.url, params);
}
},
delete: {
url: `${config.API_URL}order/cashier/delete`,
name: "删除购物车产品",
post: async function(params){
return await http.delete(this.url, params);
}
},
add: {
url: `${config.API_URL}order/cashier/add`,
name: "添加购物车",
post: async function(params){
return await http.post(this.url, params);
}
},
}
}
\ No newline at end of file
resources/admin/src/pages/cashierhome/cashierhome.scss
View file @ 9caa333a
...@@ -87,4 +87,228 @@ font-size: 18px; ...@@ -87,4 +87,228 @@ font-size: 18px;
.total small { .total small {
padding: 0 10px; padding: 0 10px;
text-align: center; text-align: center;
}
.sku_card {
.sku_card_title {
font-size: 15px;
line-height: 40px;
color: #222;
font-weight: bold;
}
.sku_card_main {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
.sku_card_item {
font-size: 12px;
line-height: 24px;
background-color: #f1f2f2;
color: #373737;
margin-right: 10px;
margin-bottom: 10px;
padding: 0 10px;
flex-shrink: 0;
border-radius: 3px;
cursor: pointer;
}
.sku_card_item_active {
background-color: #409eff !important;
color: #fff !important;
}
}
}
.card {
margin: 18px auto 0;
background-color: #fff;
.top {
display: flex;
justify-content: flex-start;
align-items: center;
height: 50px;
font-size: 16px;
line-height: 1;
.shop_name {
margin-left: 5px;
font-size: 15px;
font-weight: normal;
font-stretch: normal;
color: #222222;
}
}
.select_box {
width: 40px;
display: flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
font-size: 16px;
.circle {
color: #666;
}
.checked {
color: #f64f15;
}
}
.main {
padding-bottom: 23px;
.card_wrap {
margin-top: 15px;
&:first-child {
margin-top: 0;
}
}
.card_item {
width: 100%;
box-sizing: border-box;
}
.card_item_wrap {
display: flex;
justify-content: flex-start;
align-items: center;
}
.img_wrap {
width: 70px;
height: 70px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
img {
display: block;
width: 70px;
height:70px;
}
}
.info {
margin-left: 20px;
padding-right: 20px;
width: calc(100% - 40px - 100px - 15px);
height: 70px;
display: flex;
flex-direction: column;
justify-content: space-between;
.it {
.goods_title {
display: block;
width: 100%;
font-size: 12px;
font-weight: bold;
font-stretch: normal;
color: #222222;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.deleteicon{
margin: 6px 0;
display: flex;
justify-content: flex-end;
}
.delete{
cursor: pointer;
color: red;
}
.sku {
height: 26px;
border-radius: 5px;
margin-top: 11px;
font-size: 12px;
line-height: 26px;
font-stretch: normal;
color: #838383;
display: flex;
justify-content: flex-start;
align-items: center;
.text {
padding-left: 10px;
background-color: #f6f6f6;
}
.sku_arr {
display: block;
padding-left: 10px;
padding-right: 10px;
background-color: #f6f6f6;
}
}
}
.ib {
display: flex;
justify-content: space-between;
.pricebox{
display: flex;
align-items: center;
}
.jfprice{
margin-left: 8px;
.price_icon,.price_main{
font-size: 12px !important;
color: #a5a5a5 !important;
}
}
.price {
display: flex;
justify-content: flex-start;
align-items: baseline;
.price_icon {
font-size: 13px;
font-weight: bold;
font-stretch: normal;
color: #f64f15;
}
.price_main {
font-size: 16px;
font-weight: bold;
font-stretch: normal;
color: #f64f15;
.mini {
font-size: 15px;
}
}
.ori {
font-size: 12px;
font-stretch: normal;
color: #8a8a8a;
}
}
.num {
flex-shrink: 0;
--stepper-input-disabled-text-color: #323233;
}
}
}
}
} }
\ No newline at end of file
resources/admin/src/pages/cashierhome/cashierhome.vue
View file @ 9caa333a
...@@ -8,25 +8,72 @@ ...@@ -8,25 +8,72 @@
<el-col :span='9' class="pos_order" id="order_list"> <el-col :span='9' class="pos_order" id="order_list">
<el-tabs style="padding-left:10px;"> <el-tabs style="padding-left:10px;">
<el-tab-pane label="购物单"> <el-tab-pane label="购物单">
<!-- <p v-if="scannedCode">{{ scannedCode }}</p> -->
<el-table :data="tableData" border style="width:100%;">
<el-table-column prop="title" label="商品名称"> </el-table-column> <div class="card" v-for="(item, index) in listdata" :key="index">
<el-table-column prop="count" label="数量"> <div class="top">
<template slot-scope='scope' #default="scope"> <div class="shop_name">{{ item.title }}</div>
<el-input-number :min="1" @change="(e)=>changenums(e, scope.$index)" size="small" v-model="scope.row.count"></el-input-number> </div>
</template> <div class="main">
</el-table-column> <div class="card_wrap" v-for="(cc, inner) in item.content" :key="inner">
<el-table-column prop="price" width="80" label="金额"> </el-table-column> <div class="card_item" right-width="65">
<el-table-column label="操作" width="80" fixed='right'> <div class="card_item_wrap">
<template slot-scope='scope' #default="scope"> <div class="select_box" @click="goodsSelectedHandle(cc.goods_id, cc.goods_sku_id)">
<!-- <el-button size="small" @click="addOrderList(scope.row)">增加</el-button> -->
<!-- <el-button size="small" @click="addOrderList(scope.row)">减少</el-button> --> </div>
<el-button type="danger" size="small" @click="delGoods(scope.row)">删除</el-button> <div class="img_wrap">
</template> <img :src="cc.goods.cover" mode="aspectFill" />
</el-table-column> </div>
</el-table> <div class="info">
<div class="it">
<div class="goods_title">
{{ cc.goods.title }}
</div>
<div class="deleteicon">
<div class="delete" @click="goodsDeleteHandle(cc.goods_id, cc.goods_sku_id)">删除</div>
</div>
<!-- @click="skuChangeHandle(cc)" -->
<div class="sku" v-if="cc.sku" >
<div class="text">{{ cc.sku.sku }}</div>
</div>
</div>
<div class="ib">
<div class="pricebox">
<div class="price">
<div class="price_icon">¥</div>
<div class="price_main din">
{{ cc.formatBig }}
<text class="mini">{{ cc.formatMini }}</text>
</div>
</div>
<div class="price jfprice">
<div class="price_icon">积分:</div>
<div class="price_main din">
{{ cc.goods.integral }}
</div>
</div>
</div>
<div class="num">
<el-input-number :data-gid="cc.goods_id" :data-sid="cc.goods_sku_id"
:data-cid="cc.cart_id" :min="1" @change="(e)=>stepMinusHandle(e, cc)" size="small" v-model="cc.num"></el-input-number>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="total"> <div class="total">
<small>数量:</small>{{ totalCount }}<small>金额:</small>￥{{ totalMoney }} <small>数量:</small>{{ totalCount }}<small>金额:</small>￥{{ totalMoney }}
<small>所需积分:</small>{{ totaljifen }}
</div> </div>
<div class="pos_btn"> <div class="pos_btn">
<el-button size="large" type="primary" @click="focusfun" >监听扫码枪识别</el-button> <el-button size="large" type="primary" @click="focusfun" >监听扫码枪识别</el-button>
...@@ -72,18 +119,52 @@ ...@@ -72,18 +119,52 @@
</el-row> </el-row>
</div> </div>
<!-- 弹窗选择规则 -->
<el-dialog
v-model="dialogVisible"
title="选择规格"
width="500"
:before-close="handleClose"
>
<div>
<div class="sku_card" v-for="(item, outer) in childgoods.spec_list" :key="outer">
<div class="sku_card_title">{{ item.name }}</div>
<div class="sku_card_main">
<div :class="{
sku_card_item: true,
sku_card_item_active: item.value[inner] === item.selected,
}" v-for="(cc, inner) in item.value" :key="inner" @click="skuTapHandle(item, outer, cc)">
{{ cc }}
</div>
</div>
</div>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="addCartHandle()">
确定
</el-button>
</div>
</template>
</el-dialog>
</el-main> </el-main>
</el-container> </el-container>
</template> </template>
<script > <script >
import { ElLoading, ElMessage } from "element-plus"; import { ElLoading, ElMessage } from "element-plus";
import { ElMessageBox } from 'element-plus'
export default { export default {
name: "ucenter.cashierhome", name: "ucenter.cashierhome",
components: {}, components: {},
data() { data() {
return { return {
childgoods:{spec_list:[]},
dialogVisible:false,
dialog: {search: false, import: false, print: false}, dialog: {search: false, import: false, print: false},
list: { list: {
apiObj: this.$API.goods.lists.list, apiObj: this.$API.goods.lists.list,
...@@ -100,7 +181,6 @@ export default { ...@@ -100,7 +181,6 @@ export default {
selection: [], selection: [],
search: {}, search: {},
tableData: [],
totalMoney: 0, totalMoney: 0,
totalCount: 0, totalCount: 0,
...@@ -109,17 +189,348 @@ export default { ...@@ -109,17 +189,348 @@ export default {
scannedCode: '', // 存储扫码后的结果 结果 scannedCode: '', // 存储扫码后的结果 结果
isTyping: false, // 用户是否正在手动输入 isTyping: false, // 用户是否正在手动输入
typingTimeout: null, // 用于判断输入间隔的定时器 typingTimeout: null, // 用于判断输入间隔的定时器
// 原始数据 购物车
odata: [],
listdata: [],
mirror: [],
total: 0,
totaljifen:0,//总共所需积分
totalFormatBig: 0,
totalFormatMini: ".00",
}; };
}, },
mounted(){ mounted(){
var orderHeight = document.body.clientHeight; var orderHeight = document.body.clientHeight;
document.getElementById("order_list").style.height = orderHeight + "px"; document.getElementById("order_list").style.height = orderHeight + "px";
}, },
created: function() { created: function() {
this.getCartList();//获取购物清单
},
watch:{
listdata:{
handler(newValue) {
let total = 0;
let totalCount = 0;
let totaljifen = 0;
newValue.forEach((item) => {
item.content.forEach((cc) => {
total += Number(cc.readyPrice) * Number(cc.num);
totalCount = totalCount + cc.num;
totaljifen += Number(cc.ready_integral) * Number(cc.num)
});
});
total = total.toFixed(2);
const priceParts = total.split(".");
const formatBig = priceParts[0];
const formatMini = priceParts.length > 1 ? `.${priceParts[1]}` : ".00";
this.totalMoney = total;
this.totalCount = totalCount;
this.totaljifen = totaljifen;//积分
// this.totalFormatBig = formatBig;
// this.totalFormatMini = formatMini;
},
deep: true,
}
}, },
methods: { methods: {
//---规格加入购物车-------------------------------------------------------------------------
popCloseHandle() {
this.$emit("close");
},
//规格提交
addCartHandle() {
this.dialogVisible = false;
let skuId = this.childgoods.skuId;
let number = this.childgoods.popNumber;
// this.$emit("popAddCart", skuId, number);
this.addCart("multiple", skuId, number);
},
//提交加入购物车
addCart(type, skuId, number) {
let that = this;
let req = {};
if (type === "single") {//没有规格
req = {
goods_sn:that.childgoods.goods_sn,//商品编号
goods_id: that.childgoods.id,
goods_sku_id: 0,
num: 1,
store_id: that.childgoods.store_id,
};
} else {//有规格
req = {
goods_sn:that.childgoods.popSkuGoods_sn,//商品编号
goods_id: that.childgoods.id,
goods_sku_id: skuId,
num: number,
store_id: that.childgoods.store_id,
};
}
console.info('req',req);
this.$API.cashier.cart.add.post(req).then(res=>{
if (res.code == 1) {
this.$message({
message: "添加成功~",
type: "success"
});
// getApp().getMyCarList();
// this.show = false;
// this.$forceUpdate();
this.getCartList();//获取购物清单
}else{
this.$message.error(res.message);
}
}).catch((err) => {
console.log("🚀 ~ cart ~ err:", err);
});
},
//购物车产品数量加减
stepMinusHandle(num,cc) {
console.info('stepMinusHandle',num,cc);
let that = this;
let goods_id = cc.goods_id;
let goods_sku_id = cc.goods_sku_id;
let cart_id = cc.cart_id;
let obj = that.odata.find((v) => v.id == cart_id);
console.log("🚀 ~ stepMinusHandle ~ obj:", obj);
// let num = obj.num - 1;
if (num != 0) {
let req = {
id: cart_id,
goods_id: goods_id,
goods_sku_id: goods_sku_id,
num: num,
};
this.$API.cashier.cart.edit.post(req)
.then((res) => {
console.log("🚀 ~ editCart ~ res:", res);
if (res.code == 1) {
that.getCartList();
}else{
this.$message.error(res.message);
}
})
.catch((err) => {
console.log("🚀 ~ editCart ~ err:", err);
});
} else {
//删除
let req = {
id: cart_id,
};
this.$API.cashier.cart.delete.post(req)
.then((res) => {
console.log("🚀 ~ delCart ~ res:", res);
if (res.code == 1) {
that.getCartList();
}else{
this.$message.error(res.message);
}
})
.catch((err) => {
console.log("🚀 ~ delCart ~ err:", err);
});
}
},
//数量加减
numberChangeHandle(e) {
console.log(e.detail);
console.log(this.childgoods.popStock.match(/\d+/)[0]);
if (Number(e.detail) > Number(this.childgoods.popStock.match(/\d+/)[0])) {
this.$message.error("库存不足~");
} else {
this.childgoods.popNumber = e.detail;
}
},
//规格被选择
skuTapHandle(item, outer, cc) {
// this.$set(this.childgoods.spec_list[outer], "selected", cc);
this.childgoods.spec_list[outer]["selected"] = cc;
this.changeSku();
},
// 更新 detail 的方法
updateDetail(newContent) {
this.childgoods = {
...newContent
};
},
//修改规格
changeSku() {
let arr = this.childgoods.spec_list;
if (arr.every((item) => item.selected)) {
console.log("所有规格已选择");
// 取出item的name和selected，组成{name:selected}格式
let sku = arr.reduce((acc, cur) => {
acc[cur.name] = cur.selected;
return acc;
}, {});
let skuObj = this.childgoods.sku.find(
(item) => JSON.stringify(item.sku_value) === JSON.stringify(sku)
);
console.log("🚀 ~ changeSku ~ skuObj:", skuObj);
let parts = skuObj.price.split(".");
this.childgoods.popFormatBig = parts[0];
this.childgoods.popFormatMini = parts[1] ? "." + parts[1] : ".00";
this.childgoods.popStock = "库存 " + skuObj.stock;
this.childgoods.popNumber = 1;
this.childgoods.popSkuGoods_sn = skuObj.goods_sn;
this.childgoods["skuId"] = skuObj.id;
} else {
console.log("还有规格未选择");
}
},
//删除产品
goodsDeleteHandle(gid, sid) {
let that = this;
let cid = that.odata
.filter((v) => v.goods_id == gid && v.goods_sku_id == sid)
.map((v) => v.id);
let req = {
ids: cid,
};
this.$API.cashier.cart.delete.post(req)
.then((res) => {
console.log("🚀 ~ delCart ~ res:", res);
if (res.code == 1) {
that.getCartList();
}else{
this.$message.error(res.message);
}
})
.catch((err) => {
console.log("🚀 ~ delCart ~ err:", err);
});
},
//获取购物车列表
getCartList(){
let that = this;
this.$API.cashier.cart.list.get({page:1,limit:100}).then((res) => {
console.log("🚀 ~ getCartList ~ res:", res);
if (res.code == 1) {
let data = res.data;
that.odata = data;
const groupedData = data.reduce((acc, item) => {
const storeId = item.store_id;
if (!acc[storeId]) {
acc[storeId] = {
id: storeId,
title: item.store.title,
cover: item.store.cover,
content: [],
selected: 0,
};
}
acc[storeId].content.push({
cart_id: item.id,
member_id: item.member_id,
goods_id: item.goods_id,
goods_sku_id: item.goods_sku_id,
num: item.num,
created_at: item.created_at,
updated_at: item.updated_at,
goods: item.goods,
sku: item.sku,
});
return acc;
}, {});
const result = Object.values(groupedData);
result.forEach((store) => {
store.content.forEach((item) => {
if (item.sku && item.sku.price) {
const priceParts = item.sku.price.split(".");
const formatBig = priceParts[0];
const formatMini =
priceParts.length > 1 ? `.${priceParts[1]}` : ".00";
item.formatBig = formatBig;
item.formatMini = formatMini;
item.readyPrice = item.sku.price;
item.selected = 0;
item.ready_integral = item.sku.integral;//积分
} else {
const priceParts = item.goods.price.split(".");
const formatBig = priceParts[0];
const formatMini =
priceParts.length > 1 ? `.${priceParts[1]}` : ".00";
item.formatBig = formatBig;
item.formatMini = formatMini;
item.readyPrice = item.goods.price;
item.selected = 0;
item.ready_integral = item.goods.integral;////积分
}
});
const mergedData = Object.values(
that.mergeObjects(store.content)
);
console.log("🚀 ~ result.forEach ~ mergedData:", mergedData);
store.content = mergedData;
});
console.log("🚀 ~ result.forEach ~ result:", result);
that.listdata = result;
}else{
this.$message.error(res.message);
}
})
.catch((err) => {
console.log("🚀 ~ getCartList ~ err:", err);
});
},
// 合并购物车相同规格的商品
mergeObjects(arr) {
return arr.reduce((acc, curr) => {
const key = curr.sku ?
`${curr.goods.id}-${curr.sku.id}` :
`${curr.goods.id}`;
if (acc[key]) {
acc[key].num += curr.num;
} else {
acc[key] = {
...curr,
goods: {
...curr.goods
},
sku: curr.sku ? {
...curr.sku
} : null,
};
delete acc[key].id;
}
return acc;
}, {});
},
//---规格加入购物车-------------------------------------------------------------------------
//关闭
handleClose(done) {
ElMessageBox.confirm('Are you sure to close this dialog?')
.then(() => {
done()
})
.catch(() => {
// catch error
})
},
focusfun(){ focusfun(){
// 自动聚焦到输入框，方便直接扫描 // 自动聚焦到输入框，方便直接扫描
this.loading = ElLoading.service({ this.loading = ElLoading.service({
...@@ -147,6 +558,14 @@ export default { ...@@ -147,6 +558,14 @@ export default {
console.log('Scanned code:', this.scannedCode); console.log('Scanned code:', this.scannedCode);
console.log('input.value:', input.value ); console.log('input.value:', input.value );
if(input.value){
this.childgoods.goods_sn = input.value;
this.childgoods.store_id = 0;
this.addCart("single", "", 1);
}
// 清空输入框以便下一次扫描 // 清空输入框以便下一次扫描
input.value = ''; input.value = '';
// 处理扫码后的业务逻辑... // 处理扫码后的业务逻辑...
...@@ -160,6 +579,12 @@ export default { ...@@ -160,6 +579,12 @@ export default {
this.scannedCode = input.value; this.scannedCode = input.value;
console.log('Scanned code:', this.scannedCode); console.log('Scanned code:', this.scannedCode);
if(input.value){
this.childgoods.goods_sn = input.value;
this.childgoods.store_id = 0;
this.addCart("single", "", 1);
}
console.log('input.value:', input.value ); console.log('input.value:', input.value );
// 清空输入框以便下一次扫描 // 清空输入框以便下一次扫描
input.value = ''; input.value = '';
...@@ -176,73 +601,49 @@ export default { ...@@ -176,73 +601,49 @@ export default {
this.isTyping = false; this.isTyping = false;
this.loading.close(); this.loading.close();
}, },
changenums(e,index){
this.$nextTick(()=>{
this.getAllMoney();
})
},
// 添加和计算商品价格 // 添加和计算商品价格
addOrderList(goods,index) { addOrderList(goods,index) {
// 商品是否已经存在于订单列表中 // 商品是否已经存在于订单列表中
let isHave = false; if(goods.sku.length){
for (let i = 0; i < this.tableData.length; i++) { //规格
if (this.tableData[i].id == goods.id) { this.dialogVisible = true;
isHave = true; this.childgoods = goods;
} return false;
}else{
//非规格
this.childgoods = goods;
this.addCart("single", 0, 1);
return false;
} }
if (isHave) {
// 改变列表中商品数量
let arr = this.tableData.filter(o => o.id == goods.id);
arr[0].count++;
} else {
let newGoods = {
id: goods.id,
title: goods.title,
price: goods.price,
count: 1
};
this.tableData.push(newGoods);
}
this.getAllMoney();
},
// 删除单个商品
delGoods(goods) {
console.log(goods.id, "删除了" + goods.id);
this.tableData = this.tableData.filter(o => o.id != goods.id);
this.getAllMoney();
}, },
// 全部删除商品 // 全部删除商品
delAllGoods() { delAllGoods() {
this.tableData = []; this.odata = [];
this.listdata = [];
this.totalMoney = 0; this.totalMoney = 0;
this.totalCount = 0; this.totalCount = 0;
this.totaljifen = 0;
this.childgoods = {spec_list:[]};
}, },
// 数量和价格的汇总计算
getAllMoney() {
this.totalMoney = 0;
this.totalCount = 0;
if (this.tableData) {
let totalMoney = 0;
console.info('tableData',this.tableData);
this.tableData.forEach(element => {
this.totalCount += element.count;
console.info('element.price',element.price,element.count);
totalMoney += element.price * element.count;
});
console.info(totalMoney,'totalMoney');
this.totalMoney = parseFloat(totalMoney).toFixed(2);
}
},
// 模拟结账 // 模拟结账
checkOut() { checkOut() {
if (this.totalCount != 0) { if (this.totalCount != 0) {
this.tableData = []; this.odata = [];
this.listdata = [];
this.totalMoney = 0; this.totalMoney = 0;
this.totalCount = 0; this.totalCount = 0;
this.totaljifen = 0;
this.childgoods = {spec_list:[]};
this.$message({ this.$message({
message: "结账成功,辛苦啦~", message: "结账成功,辛苦啦~",
type: "success" type: "success"
}); });
} else { } else {
this.$message.error("店员，没有东西，怎么结账呀~"); this.$message.error("店员，没有东西，怎么结账呀~");
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment