新增增加打印机
This commit is contained in:
@@ -1,317 +1,349 @@
|
||||
<!-- 结算订单 -->
|
||||
|
||||
<template>
|
||||
<el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
|
||||
<div class="drawer_wrap">
|
||||
<div class="cart_list">
|
||||
<div class="nav_wrap card">
|
||||
<div class="return" @click="dialogVisible = false">
|
||||
<el-icon class="icon">
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="master_id">{{ props.masterId }}</div>
|
||||
<div class="btm">
|
||||
<span class="p">服务员：{{ store.userInfo.shopName || '暂无' }}</span>
|
||||
<span class="t">{{ props.orderInfo.createdAt &&
|
||||
dayjs(props.orderInfo.createdAt).format('MM-DD HH:mm') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list_wrap card" style="margin-top: var(--el-font-size-base);">
|
||||
<div class="item" v-for="item in props.cart" :key="item.id">
|
||||
<div class="top">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="n">x{{ item.number }}</span>
|
||||
<span class="p">￥{{ item.salePrice }}</span>
|
||||
</div>
|
||||
<div class="gift_wrap" v-if="item.isGift == 'true'">
|
||||
<span>[赠送]</span>
|
||||
<span>￥-{{ item.salePrice }}</span>
|
||||
</div>
|
||||
<div class="tag_wrap" v-if="item.skuName">
|
||||
<div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
|
||||
</div>
|
||||
<div class="packge_Wrap" v-if="item.isPack == 'true'">
|
||||
<div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
|
||||
<el-icon class="icon" style="color: var(--primary-color);">
|
||||
<Box />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<!-- <el-button icon="Edit"></el-button> -->
|
||||
<div class="button">
|
||||
<el-checkbox v-model="isPrint" border label="打印结算小票" style="width: 100%;" />
|
||||
</div>
|
||||
<div class="print">
|
||||
<el-button type="primary" v-loading="printLoading" @click="printHandle">打印预结单</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay_wrap">
|
||||
<payCard :amount="props.amount" :orderId="props.orderInfo.id" @paySuccess="paySuccess" />
|
||||
<el-drawer
|
||||
size="100%"
|
||||
:with-header="false"
|
||||
direction="btt"
|
||||
v-model="dialogVisible"
|
||||
>
|
||||
<div class="drawer_wrap">
|
||||
<div class="cart_list">
|
||||
<div class="nav_wrap card">
|
||||
<div class="return" @click="dialogVisible = false">
|
||||
<el-icon class="icon">
|
||||
<ArrowLeftBold />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="info">
|
||||
<div class="master_id">{{ props.masterId }}</div>
|
||||
<div class="btm">
|
||||
<span class="p"
|
||||
>服务员：{{ store.userInfo.shopName || "暂无" }}</span
|
||||
>
|
||||
<span class="t">{{
|
||||
props.orderInfo.createdAt &&
|
||||
dayjs(props.orderInfo.createdAt).format("MM-DD HH:mm")
|
||||
}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
<div
|
||||
class="list_wrap card"
|
||||
style="margin-top: var(--el-font-size-base)"
|
||||
>
|
||||
<div class="item" v-for="item in props.cart" :key="item.id">
|
||||
<div class="top">
|
||||
<span class="name">{{ item.name }}</span>
|
||||
<span class="n">x{{ item.number }}</span>
|
||||
<span class="p">￥{{ item.salePrice }}</span>
|
||||
</div>
|
||||
<div class="gift_wrap" v-if="item.isGift == 'true'">
|
||||
<span>[赠送]</span>
|
||||
<span>￥-{{ item.salePrice }}</span>
|
||||
</div>
|
||||
<div class="tag_wrap" v-if="item.skuName">
|
||||
<div class="tag" v-for="item in item.skuName.split(',')">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="packge_Wrap" v-if="item.isPack == 'true'">
|
||||
<div
|
||||
class="icon_item"
|
||||
v-if="item.isPack == 'true'"
|
||||
@click="giftPackHandle('isPack', item)"
|
||||
>
|
||||
<el-icon class="icon" style="color: var(--primary-color)">
|
||||
<Box />
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<!-- <el-button icon="Edit"></el-button> -->
|
||||
<div class="button">
|
||||
<el-checkbox
|
||||
v-model="isPrint"
|
||||
border
|
||||
label="打印结算小票"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</div>
|
||||
<div class="print">
|
||||
<el-button
|
||||
type="primary"
|
||||
v-loading="printLoading"
|
||||
@click="printHandle"
|
||||
>打印预结单</el-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pay_wrap">
|
||||
<payCard
|
||||
:amount="props.amount"
|
||||
:orderId="props.orderInfo.id"
|
||||
@paySuccess="paySuccess"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useUser } from "@/store/user.js"
|
||||
import payCard from '@/components/payCard/payCard.vue'
|
||||
import { print } from '@/api/pay'
|
||||
import { ref } from "vue";
|
||||
import { useUser } from "@/store/user.js";
|
||||
import payCard from "@/components/payCard/payCard.vue";
|
||||
import { print } from "@/api/pay";
|
||||
import { ElMessage } from "element-plus";
|
||||
import dayjs from 'dayjs'
|
||||
import dayjs from "dayjs";
|
||||
|
||||
import { ipcRenderer } from 'electron'
|
||||
import { ipcRenderer } from "electron";
|
||||
|
||||
const store = useUser()
|
||||
const store = useUser();
|
||||
|
||||
const emit = defineEmits('paySuccess')
|
||||
const emit = defineEmits("paySuccess");
|
||||
|
||||
const printLoading = ref(false)
|
||||
const printLoading = ref(false);
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const dialogVisible = ref(false);
|
||||
const props = defineProps({
|
||||
cart: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
amount: {
|
||||
type: [Number, String],
|
||||
default: 0
|
||||
},
|
||||
remark: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: ''
|
||||
},
|
||||
masterId: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
})
|
||||
cart: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
amount: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
remark: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
orderInfo: {
|
||||
type: Object,
|
||||
default: "",
|
||||
},
|
||||
masterId: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const isPrint = ref(true)
|
||||
const isPrint = ref(true);
|
||||
|
||||
async function printHandle() {
|
||||
// if (!isPrint.value) return
|
||||
// const data = {
|
||||
// shop_name: store.userInfo.merchantName,
|
||||
// carts: props.cart,
|
||||
// amount: props.amount,
|
||||
// remark: props.remark,
|
||||
// orderId: props.orderId
|
||||
// }
|
||||
// ipcRenderer.send('printerInfoSync', JSON.stringify(data))
|
||||
try {
|
||||
printLoading.value = true
|
||||
await print({
|
||||
type: 'normal',
|
||||
ispre: true,
|
||||
orderId: props.orderInfo.id
|
||||
})
|
||||
printLoading.value = false
|
||||
ElMessage.success('打印成功')
|
||||
} catch (error) {
|
||||
printLoading.value = false
|
||||
console.log(error)
|
||||
}
|
||||
if (!isPrint.value) return;
|
||||
const data = {
|
||||
shop_name: store.userInfo.merchantName,
|
||||
carts: props.cart,
|
||||
amount: props.amount,
|
||||
remark: props.remark,
|
||||
orderInfo: props.orderInfo,
|
||||
deviceName: printForm.value.deviceName,
|
||||
};
|
||||
ipcRenderer.send("printerInfoSync", JSON.stringify(data));
|
||||
// try {
|
||||
// printLoading.value = true
|
||||
// await print({
|
||||
// type: 'normal',
|
||||
// ispre: true,
|
||||
// orderId: props.orderInfo.id
|
||||
// })
|
||||
// printLoading.value = false
|
||||
// ElMessage.success('打印成功')
|
||||
// } catch (error) {
|
||||
// printLoading.value = false
|
||||
// console.log(error)
|
||||
// }
|
||||
}
|
||||
|
||||
// 订单已支付
|
||||
function paySuccess() {
|
||||
dialogVisible.value = false
|
||||
emit('paySuccess')
|
||||
dialogVisible.value = false;
|
||||
emit("paySuccess");
|
||||
}
|
||||
|
||||
function show() {
|
||||
dialogVisible.value = true
|
||||
dialogVisible.value = true;
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
show
|
||||
})
|
||||
show,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-drawer {
|
||||
background-color: #efefef !important;
|
||||
background-color: #efefef !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.drawer_wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: var(--el-font-size-base) 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
padding: var(--el-font-size-base) 0;
|
||||
|
||||
.cart_list {
|
||||
.cart_list {
|
||||
flex: 1;
|
||||
|
||||
.nav_wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--el-font-size-base);
|
||||
|
||||
.return {
|
||||
$size: 50px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
color: #333;
|
||||
font-size: var(--el-font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: var(--el-font-size-base);
|
||||
$padding: 10px;
|
||||
|
||||
.nav_wrap {
|
||||
.master_id {
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: $padding 0;
|
||||
}
|
||||
|
||||
.btm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $padding 0;
|
||||
|
||||
.p {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_wrap {
|
||||
padding: var(--el-font-size-base);
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
padding-bottom: var(--el-font-size-base);
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
padding-bottom: 6px;
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.n {
|
||||
margin-right: 50px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.gift_wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tag_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.tag {
|
||||
padding: 2px 6px;
|
||||
background-color: var(--el-color-danger);
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.packge_Wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon_item {
|
||||
$size: 40px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
background-color: #e2e2e2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 var(--el-font-size-base);
|
||||
|
||||
.return {
|
||||
$size: 50px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
border-radius: 50%;
|
||||
border: 2px solid #333;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.icon {
|
||||
color: #333;
|
||||
font-size: var(--el-font-size-base);
|
||||
}
|
||||
}
|
||||
|
||||
.info {
|
||||
flex: 1;
|
||||
padding-left: var(--el-font-size-base);
|
||||
$padding: 10px;
|
||||
|
||||
.master_id {
|
||||
font-size: calc(var(--el-font-size-base) + 10px);
|
||||
border-bottom: 1px solid #ececec;
|
||||
padding: $padding 0;
|
||||
}
|
||||
|
||||
.btm {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: $padding 0;
|
||||
|
||||
|
||||
.p {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_wrap {
|
||||
padding: var(--el-font-size-base);
|
||||
height: calc(100vh - 200px);
|
||||
overflow-y: auto;
|
||||
|
||||
.item {
|
||||
padding-bottom: var(--el-font-size-base);
|
||||
|
||||
.top {
|
||||
display: flex;
|
||||
padding-bottom: 6px;
|
||||
|
||||
.name {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.n {
|
||||
margin-right: 50px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.p {
|
||||
color: #555;
|
||||
}
|
||||
}
|
||||
|
||||
.gift_wrap {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #999;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.tag_wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
|
||||
.tag {
|
||||
padding: 2px 6px;
|
||||
background-color: var(--el-color-danger);
|
||||
color: #fff;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.packge_Wrap {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.icon_item {
|
||||
$size: 40px;
|
||||
width: $size;
|
||||
height: $size;
|
||||
background-color: #e2e2e2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
padding-top: var(--el-font-size-base);
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.editor {
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
|
||||
:deep(.el-checkbox.el-checkbox--large) {
|
||||
height: var(--el-component-size-large);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&::after {
|
||||
border-width: 2px;
|
||||
top: 3px;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
font-size: var(--el-font-size-base) !important;
|
||||
}
|
||||
}
|
||||
justify-content: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay_wrap {
|
||||
flex: 1.5;
|
||||
padding-left: 20px;
|
||||
.footer {
|
||||
display: flex;
|
||||
padding-top: var(--el-font-size-base);
|
||||
gap: var(--el-font-size-base);
|
||||
|
||||
.editor {
|
||||
border: 1px solid #ececec;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.button {
|
||||
flex: 1;
|
||||
|
||||
:deep(.el-checkbox.el-checkbox--large) {
|
||||
height: var(--el-component-size-large);
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__inner) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
|
||||
&::after {
|
||||
border-width: 2px;
|
||||
top: 3px;
|
||||
left: 7px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-checkbox__label) {
|
||||
font-size: var(--el-font-size-base) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay_wrap {
|
||||
flex: 1.5;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -23,24 +23,39 @@
|
||||
</div>
|
||||
<div class="shop_operation" v-loading="cartLoading">
|
||||
<div class="shop_list">
|
||||
<div class="item" :class="{ active: cartListActive == index }" v-for="(item, index) in cartList"
|
||||
:key="item.id" @click="selectCartItemHandle(item, index)">
|
||||
<div
|
||||
class="item"
|
||||
:class="{ active: cartListActive == index }"
|
||||
v-for="(item, index) in cartList"
|
||||
:key="item.id"
|
||||
@click="selectCartItemHandle(item, index)"
|
||||
>
|
||||
<div class="name_wrap">
|
||||
<span>{{ item.name }}</span>
|
||||
<span>￥{{ item.salePrice }}</span>
|
||||
</div>
|
||||
<div class="sku_list" v-if="item.skuName">
|
||||
<div class="tag" v-for="item in item.skuName.split(',')">{{ item }}</div>
|
||||
<div class="tag" v-for="item in item.skuName.split(',')">
|
||||
{{ item }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="num">
|
||||
<div class="left">
|
||||
<div class="icon_item" v-if="item.isGift == 'true'" @click="giftPackHandle('isGift', item)">
|
||||
<div
|
||||
class="icon_item"
|
||||
v-if="item.isGift == 'true'"
|
||||
@click="giftPackHandle('isGift', item)"
|
||||
>
|
||||
<el-icon class="icon">
|
||||
<ShoppingBag />
|
||||
</el-icon>
|
||||
</div>
|
||||
<div class="icon_item" v-if="item.isPack == 'true'" @click="giftPackHandle('isPack', item)">
|
||||
<el-icon class="icon" style="color: var(--primary-color);">
|
||||
<div
|
||||
class="icon_item"
|
||||
v-if="item.isPack == 'true'"
|
||||
@click="giftPackHandle('isPack', item)"
|
||||
>
|
||||
<el-icon class="icon" style="color: var(--primary-color)">
|
||||
<Box />
|
||||
</el-icon>
|
||||
</div>
|
||||
@@ -53,8 +68,13 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 购物车操作栏 -->
|
||||
<cartOperation :item="cartList[cartListActive]" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
|
||||
@pending="pendingCart" @clearCart="clearCartHandle" />
|
||||
<cartOperation
|
||||
:item="cartList[cartListActive]"
|
||||
@confirm="(res) => addCart(res, 'edit')"
|
||||
@delete="delCartHandle"
|
||||
@pending="pendingCart"
|
||||
@clearCart="clearCartHandle"
|
||||
/>
|
||||
</div>
|
||||
<div class="footer">
|
||||
<div class="top">
|
||||
@@ -68,15 +88,26 @@
|
||||
<el-text class="t">打包(￥{{ cartInfo.packAmount || 0 }})</el-text>
|
||||
</div>
|
||||
<div class="num-wrap">
|
||||
<el-text>共{{ cartInfo.productNum || 0 }}种商品，{{ cartInfo.productSum || 0 }}件</el-text>
|
||||
<el-text
|
||||
>共{{ cartInfo.productNum || 0 }}种商品，{{
|
||||
cartInfo.productSum || 0
|
||||
}}件</el-text
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<div class="btm">
|
||||
<el-button icon="Edit" @click="remarkRef.show()"></el-button>
|
||||
<div class="button">
|
||||
<el-button type="primary" style="width: 100%;" :disabled="!cartList.length" v-loading="createOrderLoading"
|
||||
@click="createOrderHandle">
|
||||
<span v-if="!createOrderLoading">结算(￥{{ cartInfo.totalAmount || 0 }})</span>
|
||||
<el-button
|
||||
type="primary"
|
||||
style="width: 100%"
|
||||
:disabled="!cartList.length"
|
||||
v-loading="createOrderLoading"
|
||||
@click="createOrderHandle"
|
||||
>
|
||||
<span v-if="!createOrderLoading"
|
||||
>结算(￥{{ cartInfo.totalAmount || 0 }})</span
|
||||
>
|
||||
<span v-else>下单中...</span>
|
||||
</el-button>
|
||||
</div>
|
||||
@@ -90,82 +121,106 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- 备注 -->
|
||||
<remarkModal ref="remarkRef" @success="e => remark = e" />
|
||||
<remarkModal ref="remarkRef" @success="(e) => (remark = e)" />
|
||||
<!-- 修改取餐号 -->
|
||||
<takeFoodCode />
|
||||
<el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员">
|
||||
<el-drawer
|
||||
v-model="membershow"
|
||||
:with-header="true"
|
||||
size="90%"
|
||||
title="选择会员"
|
||||
>
|
||||
<member :membershow="'1'"></member>
|
||||
</el-drawer>
|
||||
<takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
|
||||
<takeFoodCode
|
||||
ref="takeFoodCodeRef"
|
||||
title="修改取餐号"
|
||||
placeholder="请输入取餐号"
|
||||
@success="takeFoodCodeSuccess"
|
||||
/>
|
||||
<!-- 结算订单 -->
|
||||
<settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark"
|
||||
:masterId="masterId" :orderInfo="orderInfo" @paySuccess="createCodeAjax(1)" />
|
||||
<settleAccount
|
||||
ref="settleAccountRef"
|
||||
:cart="cartList"
|
||||
:amount="cartInfo.totalAmount"
|
||||
:remark="remark"
|
||||
:masterId="masterId"
|
||||
:orderInfo="orderInfo"
|
||||
@paySuccess="createCodeAjax(1)"
|
||||
/>
|
||||
<!-- 挂起订单 -->
|
||||
<pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'home'
|
||||
}
|
||||
name: "home",
|
||||
};
|
||||
</script>
|
||||
<script setup>
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useUser } from "@/store/user.js"
|
||||
import remarkModal from '@/components/remarkModal.vue'
|
||||
import takeFoodCode from '@/components/takeFoodCode.vue'
|
||||
import cartOperation from '@/views/home/components/cartOperation.vue'
|
||||
import settleAccount from '@/views/home/components/settleAccount.vue'
|
||||
import pendingCartModal from '@/views/home/components/pendingCartModal.vue'
|
||||
import { onMounted, ref } from "vue";
|
||||
import { useUser } from "@/store/user.js";
|
||||
import remarkModal from "@/components/remarkModal.vue";
|
||||
import takeFoodCode from "@/components/takeFoodCode.vue";
|
||||
import cartOperation from "@/views/home/components/cartOperation.vue";
|
||||
import settleAccount from "@/views/home/components/settleAccount.vue";
|
||||
import pendingCartModal from "@/views/home/components/pendingCartModal.vue";
|
||||
|
||||
import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearCart, createOrder } from '@/api/product'
|
||||
import {
|
||||
createCart,
|
||||
queryCart,
|
||||
createCode,
|
||||
packall,
|
||||
delCart,
|
||||
cartStatus,
|
||||
clearCart,
|
||||
createOrder,
|
||||
} from "@/api/product";
|
||||
|
||||
// 商品列表
|
||||
import goods from '@/views/home/components/goods.vue'
|
||||
import member from '@/views/member/index.vue'
|
||||
import goods from "@/views/home/components/goods.vue";
|
||||
import member from "@/views/member/index.vue";
|
||||
|
||||
// import packageData from '../../../package.json'
|
||||
const membershow = ref(false);
|
||||
const store = useUser();
|
||||
const remarkRef = ref(null);
|
||||
const takeFoodCodeRef = ref(null);
|
||||
const goodsRef = ref(null);
|
||||
const pendingCartModalRef = ref(null);
|
||||
const settleAccountRef = ref(null);
|
||||
|
||||
const membershow = ref(false)
|
||||
const store = useUser()
|
||||
const remarkRef = ref(null)
|
||||
const takeFoodCodeRef = ref(null)
|
||||
const goodsRef = ref(null)
|
||||
const pendingCartModalRef = ref(null)
|
||||
const settleAccountRef = ref(null)
|
||||
const allSelected = ref(false);
|
||||
|
||||
const allSelected = ref(false)
|
||||
const remark = ref("");
|
||||
const cartListActive = ref(0);
|
||||
const cartList = ref([]);
|
||||
const cartInfo = ref({});
|
||||
const cartLoading = ref(false);
|
||||
|
||||
const remark = ref('')
|
||||
const cartListActive = ref(0)
|
||||
const cartList = ref([])
|
||||
const cartInfo = ref({})
|
||||
const cartLoading = ref(false)
|
||||
|
||||
const orderInfo = ref({})
|
||||
const createOrderLoading = ref(false)
|
||||
const orderInfo = ref({});
|
||||
const createOrderLoading = ref(false);
|
||||
|
||||
// 取餐码
|
||||
const masterId = ref('')
|
||||
const masterId = ref("");
|
||||
|
||||
// 挂单量
|
||||
const pendingCartNum = ref(0)
|
||||
const pendingCartNum = ref(0);
|
||||
|
||||
// 生成订单
|
||||
async function createOrderHandle() {
|
||||
try {
|
||||
createOrderLoading.value = true
|
||||
createOrderLoading.value = true;
|
||||
const res = await createOrder({
|
||||
masterId: masterId.value,
|
||||
shopId: store.userInfo.shopId,
|
||||
remark: remark.value
|
||||
})
|
||||
orderInfo.value = res
|
||||
settleAccountRef.value.show()
|
||||
createOrderLoading.value = false
|
||||
remark: remark.value,
|
||||
});
|
||||
orderInfo.value = res;
|
||||
settleAccountRef.value.show();
|
||||
createOrderLoading.value = false;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
createOrderLoading.value = false
|
||||
console.log(error);
|
||||
createOrderLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -174,119 +229,121 @@ async function clearCartHandle() {
|
||||
try {
|
||||
await clearCart({
|
||||
shopId: store.userInfo.shopId,
|
||||
masterId: masterId.value
|
||||
})
|
||||
queryCartAjax()
|
||||
masterId: masterId.value,
|
||||
});
|
||||
queryCartAjax();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 恢复挂单
|
||||
async function pendingCartHandle(item) {
|
||||
const nItem = { ...item }
|
||||
const nItem = { ...item };
|
||||
if (cartList.value.length) {
|
||||
// 当购物车有数据时，先挂起当前购物车
|
||||
await pendingCart({ masterId: masterId.value })
|
||||
await pendingCart({ masterId: masterId.value });
|
||||
}
|
||||
masterId.value = nItem.masterId
|
||||
await pendingCart(nItem, false)
|
||||
await queryCartAjax()
|
||||
masterId.value = nItem.masterId;
|
||||
await pendingCart(nItem, false);
|
||||
await queryCartAjax();
|
||||
}
|
||||
|
||||
// 挂单
|
||||
async function pendingCart(params, status = true) {
|
||||
try {
|
||||
cartLoading.value = true
|
||||
cartLoading.value = true;
|
||||
await cartStatus({
|
||||
shopId: store.userInfo.shopId,
|
||||
masterId: params.masterId,
|
||||
status: status,
|
||||
uuid: params.uuid
|
||||
})
|
||||
uuid: params.uuid,
|
||||
});
|
||||
if (status && cartList.value.length) {
|
||||
await createCodeAjax()
|
||||
cartLoading.value = false
|
||||
await createCodeAjax();
|
||||
cartLoading.value = false;
|
||||
} else {
|
||||
cartLoading.value = false
|
||||
cartLoading.value = false;
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 删除购物车
|
||||
async function delCartHandle(params) {
|
||||
try {
|
||||
cartLoading.value = true
|
||||
cartLoading.value = true;
|
||||
await delCart({
|
||||
masterId: params.masterId,
|
||||
cartId: params.id
|
||||
})
|
||||
await queryCartAjax()
|
||||
cartLoading.value = false
|
||||
cartListActive.value = 0
|
||||
cartId: params.id,
|
||||
});
|
||||
await queryCartAjax();
|
||||
cartLoading.value = false;
|
||||
cartListActive.value = 0;
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
// 赠送打包操作
|
||||
function giftPackHandle(key, item) {
|
||||
item[key] = false
|
||||
addCart(item, 'edit')
|
||||
item[key] = false;
|
||||
addCart(item, "edit");
|
||||
}
|
||||
|
||||
// 打包全选
|
||||
const allSelectedHandle = async () => {
|
||||
if (!cartList.value.length) return
|
||||
allSelected.value = !allSelected.value
|
||||
if (!cartList.value.length) return;
|
||||
allSelected.value = !allSelected.value;
|
||||
await packall({
|
||||
shopId: store.userInfo.shopId,
|
||||
status: allSelected.value,
|
||||
masterId: masterId.value
|
||||
})
|
||||
queryCartAjax()
|
||||
}
|
||||
masterId: masterId.value,
|
||||
});
|
||||
queryCartAjax();
|
||||
};
|
||||
|
||||
// 确认取餐号
|
||||
async function takeFoodCodeSuccess(code) {
|
||||
if (cartList.value.length) {
|
||||
await pendingCart({ masterId: masterId.value, uuid: cartList.value[0].uuid })
|
||||
await pendingCart({
|
||||
masterId: masterId.value,
|
||||
uuid: cartList.value[0].uuid,
|
||||
});
|
||||
}
|
||||
masterId.value = `#${code}`
|
||||
queryCartAjax()
|
||||
masterId.value = `#${code}`;
|
||||
queryCartAjax();
|
||||
}
|
||||
|
||||
// 从购物车选择商品
|
||||
function selectCartItemHandle(item, index) {
|
||||
cartListActive.value = index
|
||||
cartListActive.value = index;
|
||||
}
|
||||
|
||||
// 选择完规格开始添加购物车
|
||||
async function addCart(params, type = 'add') {
|
||||
async function addCart(params, type = "add") {
|
||||
try {
|
||||
cartLoading.value = true
|
||||
cartLoading.value = true;
|
||||
const res = await createCart({
|
||||
productId: params.productId,
|
||||
masterId: masterId.value,
|
||||
shopId: store.userInfo.shopId,
|
||||
skuId: type == 'add' ? params.id : params.skuId,
|
||||
skuId: type == "add" ? params.id : params.skuId,
|
||||
number: params.number || 1,
|
||||
isPack: params.isPack || false,
|
||||
isPack: allSelected.value ? true : params.isPack || false,
|
||||
isGift: params.isGift || false,
|
||||
cartId: type == 'add' ? '' : params.id,
|
||||
cartId: type == "add" ? "" : params.id,
|
||||
uuid: params.uuid || store.userInfo.uuid,
|
||||
type: type
|
||||
})
|
||||
cartLoading.value = false
|
||||
masterId.value = res
|
||||
goodsRef.value.updateData()
|
||||
queryCartAjax()
|
||||
type: type,
|
||||
});
|
||||
cartLoading.value = false;
|
||||
masterId.value = res;
|
||||
goodsRef.value.updateData();
|
||||
queryCartAjax();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
cartLoading.value = false
|
||||
console.log(error);
|
||||
cartLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -295,19 +352,29 @@ async function queryCartAjax() {
|
||||
try {
|
||||
const res = await queryCart({
|
||||
masterId: masterId.value,
|
||||
shopId: store.userInfo.shopId
|
||||
})
|
||||
cartList.value = res.list
|
||||
cartInfo.value = res.amount
|
||||
pendingCartNum.value = res.num
|
||||
goodsRef.value.updateData()
|
||||
shopId: store.userInfo.shopId,
|
||||
});
|
||||
cartList.value = res.list;
|
||||
cartInfo.value = res.amount;
|
||||
pendingCartNum.value = res.num;
|
||||
goodsRef.value.updateData();
|
||||
|
||||
let i = 0;
|
||||
res.list.map((item) => {
|
||||
if (item.isPack == "true") {
|
||||
i++;
|
||||
}
|
||||
});
|
||||
if (i == res.list.length) {
|
||||
allSelected.value = true;
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取购物车商品', error)
|
||||
console.log("获取购物车商品", error);
|
||||
}
|
||||
}
|
||||
|
||||
// 获取取餐码
|
||||
async function createCodeAjax(type = '0') {
|
||||
async function createCodeAjax(type = "0") {
|
||||
try {
|
||||
// if (!process.env.VITE_DEV_SERVER_URL) {
|
||||
// masterId.value = '#20'
|
||||
@@ -319,18 +386,18 @@ async function createCodeAjax(type = '0') {
|
||||
// }
|
||||
const res = await createCode({
|
||||
shopId: store.userInfo.shopId,
|
||||
type: type
|
||||
})
|
||||
masterId.value = res.code
|
||||
queryCartAjax()
|
||||
type: type,
|
||||
});
|
||||
masterId.value = res.code;
|
||||
queryCartAjax();
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
createCodeAjax()
|
||||
})
|
||||
createCodeAjax();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@@ -537,9 +604,7 @@ onMounted(() => {
|
||||
.button {
|
||||
flex: 1;
|
||||
|
||||
|
||||
.js {
|
||||
|
||||
.t {
|
||||
color: #fff;
|
||||
font-size: var(--el-font-size-base);
|
||||
|
||||
Reference in New Issue
Block a user