czg_team
/
cashier_desktop
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

新增结算页面

This commit is contained in:
gyq 2024-03-01 20:30:41 +08:00
parent 2e783aa36c
commit 120c478b86
7 changed files with 520 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/api/product.js
View File

@ -130,4 +130,17 @@ export function getCartList(params) {
});
}
/**
* 清空购物车
* @param {*} params
* @returns
*/
export function clearCart(data) {
return request({
method: "post",
url: "/order/clearCart",
data
});
}

199
src/components/payCard.vue Normal file
View File

@ -0,0 +1,199 @@
<template>
<div class="card">
<div class="header">
<div class="t1">
<span class="title">应收:￥</span>
<span class="num">5.03</span>
</div>
<div class="t2">
<span>已付:￥0.00</span>
<span>优惠:￥0.00</span>
</div>
</div>
<div class="number_wrap">
<div class="menus">
<div class="item" :class="{ active: active == 1 }">
<div class="icon_wrap cz">
<el-icon class="icon">
<WalletFilled />
</el-icon>
</div>
<span class="title">储值</span>
</div>
<div class="item" :class="{ active: active == 2 }">
<div class="icon_wrap smzf">
<el-icon class="icon">
<FullScreen />
</el-icon>
</div>
<span class="title">扫码支付</span>
</div>
<div class="item">
<div class="icon_wrap yhk">
<el-icon class="icon">
<CreditCard />
</el-icon>
</div>
<span class="title">银行卡</span>
</div>
<div class="item">
<div class="icon_wrap xj">
<span class="icon_t">￥</span>
</div>
<span class="title">现金</span>
</div>
</div>
<div class="input_wrap">
<div class="input" style="flex: 1;">储值:￥{{ props.amount }}</div>
<div class="input">待支付:￥{{ waitPayMoney }}</div>
</div>
<div class="blance">
可用余额：0.00
</div>
<div class="keybord_wrap">
<div class="left">
<div class="item"></div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
amount: {
type: Number,
default: 0
}
})
const active = ref(1)
const waitPayMoney = ref(0)
function amountInput(e) {
console.log(e)
}
</script>
<style scoped lang="scss">
.card {
padding: 20px;
height: 100%;
}
.header {
padding-bottom: 30px;
border-bottom: 1px solid #ececec;
.t1 {
display: flex;
color: var(--el-color-danger);
font-weight: bold;
.title {
font-size: 24px;
position: relative;
top: 14px;
}
.num {
font-size: 40px;
}
}
.t2 {
display: flex;
gap: 20px;
color: #999;
padding-top: 10px;
}
}
.number_wrap {
padding: 20px 0;
.menus {
display: flex;
gap: 20px;
.item {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #efefef;
padding: 50px 0;
border-radius: 10px;
.icon_wrap {
$size: 60px;
width: $size;
height: $size;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
.icon,
.icon_t {
color: #fff;
}
.icon {
font-size: 30px;
}
.icon_t {
font-size: 24px;
}
&.cz {
background-color: var(--primary-color);
}
&.smzf {
background-color: var(--el-color-warning);
}
&.yhk {
background-color: var(--el-color-danger);
}
&.xj {
background-color: #e6d00f;
}
}
.title {
padding-top: 10px;
}
}
}
.input_wrap {
display: flex;
gap: 20px;
padding: 20px 0;
.input {
display: flex;
align-items: center;
height: 80px;
border-radius: 10px;
border: 1px solid var(--primary-color);
font-size: 26px;
font-weight: 400;
padding: 0 30px;
}
}
.blance {
color: var(--el-color-danger);
font-size: 26px;
}
}
</style>

20
src/components/settleAccount.vue
View File

@ -1,20 +0,0 @@
<!-- 结算订单 -->
<template>
<el-drawer size="100%" :with-header="false" direction="ttb" v-model="dialogVisible">
<div class="drawer_wrap">
</div>
</el-drawer>
</template>
<script setup>
import { ref } from 'vue'
const dialogVisible = ref(false)
</script>
<style scoped lang="scss">
.drawer_wrap {
width: 100%;
height: 100%;
}
</style>

18
src/views/home/components/cartOperation.vue
View File

@ -5,7 +5,7 @@
<SemiSelect />
</el-icon>
</div>
<div class="item number" @click="takeFoodCodeRef.show()">
<div class="item number" @click="props.item.id && takeFoodCodeRef.show()">
<el-text class="num">{{ props.item.number || 1 }}</el-text>
</div>
<div class="item" @click="numberChange('add')">
@ -13,7 +13,7 @@
<CloseBold />
</el-icon>
</div>
<div class="item" :class="{ disabled: !props.item.tbProductSpec }" @click="showSkuModal">
<div class="item" :class="{ disabled: (props.item.id && !props.item.tbProductSpec) }" @click="showSkuModal">
<el-icon class="icon">
<Filter />
</el-icon>
@ -31,19 +31,19 @@
</el-icon>
<el-text class="t">打包</el-text>
</div>
<div class="item" @click="emit('delete', props.item)">
<div class="item" @click="props.item.id && emit('delete', props.item)">
<el-icon class="icon">
<Delete />
</el-icon>
<el-text class="t">删除</el-text>
</div>
<div class="item" @click="emit('pending', props.item)">
<div class="item" @click="props.item.id && emit('pending', props.item)">
<el-icon class="icon">
<Sell />
</el-icon>
<el-text class="t">挂单</el-text>
</div>
<div class="item">
<div class="item" @click="props.item.id && emit('clearCart')">
<el-icon class="icon">
<RefreshRight />
</el-icon>
@ -65,13 +65,14 @@ const props = defineProps({
default: {}
}
})
const emit = defineEmits(['confirm', 'delete', 'pending'])
const emit = defineEmits(['confirm', 'delete', 'pending', 'clearCart'])
const takeFoodCodeRef = ref(null)
const skuModalRef = ref([])
// 赠送打包操作
function giftPackHandle(key) {
if (!props.item.id) return
if (props.item[key] == 'true') {
props.item[key] = false
} else {
@ -82,6 +83,7 @@ function giftPackHandle(key) {
// 加减修改数量
function numberChange(t) {
if (!props.item.id) return
switch (t) {
case 'sub':
if (props.item.number <= 1) return
@ -98,12 +100,14 @@ function numberChange(t) {
// 输入修改数量
function updateNumber(num) {
if (!props.item.id) return
props.item.number = num
emit('confirm', props.item)
}
// 显示规格
function showSkuModal() {
if (!props.item.id) return
if (props.item.tbProductSpec && props.item.tbProductSpec.specList) {
skuModalRef.value.show(props.item, 'cart')
}
@ -111,7 +115,7 @@ function showSkuModal() {
// 修改规格
function skuConfirm(e) {
console.log(e)
if (!props.item.id) return
emit('confirm', e)
}
</script>

1
src/views/home/components/goods.vue
View File

@ -172,7 +172,6 @@ async function queryCategoryAjax() {
// 查询商品信息
async function productqueryCommodityInfoAjax() {
try {
console.log(props.masterId)
const res = await productqueryCommodityInfo({
shopId: store.userInfo.shopId,
categoryId: categorys.value[categorysActive.value].id,

258
src/views/home/components/settleAccount.vue Normal file
View File

@ -0,0 +1,258 @@
<!-- 结算订单 -->
<template>
<el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
<div class="drawer_wrap">
<div class="cart_list" style="width: 500px;">
<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">#16</div>
<div class="btm">
<span class="p">服务员：溜溜</span>
<span class="t">03-01 09:05</span>
</div>
</div>
</div>
<div class="list_wrap card" style="margin-top: 20px;">
<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">打印预结单</el-button>
</div>
</div>
</div>
<div class="pay_wrap">
<payCard />
</div>
</div>
</el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import payCard from '@/components/payCard.vue'
const dialogVisible = ref(false)
const props = defineProps({
cart: {
type: Array,
default: []
},
amount: {
type: [Number, String],
default: 0
},
remark: {
type: String,
default: 0
}
})
const isPrint = ref(true)
function show() {
dialogVisible.value = true
}
defineExpose({
show
})
</script>
<style>
.el-drawer {
background-color: #efefef !important;
}
</style>
<style scoped lang="scss">
.drawer_wrap {
width: 100%;
height: 100%;
display: flex;
padding: 20px 0;
.cart_list {
.nav_wrap {
display: flex;
align-items: center;
padding: 0 20px;
.return {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #333;
display: flex;
align-items: center;
justify-content: center;
.icon {
color: #333;
font-size: 26px;
}
}
.info {
flex: 1;
padding-left: 20px;
.master_id {
font-size: calc(var(--el-font-size-base) + 10px);
border-bottom: 1px solid #ececec;
padding: 16px 0;
}
.btm {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
.p {
color: #999;
}
}
}
}
.list_wrap {
padding: 20px;
height: calc(100vh - 260px);
overflow-y: auto;
.item {
padding-bottom: 20px;
.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;
padding-top: 10px;
padding-bottom: 10px;
.tag {
padding: 4px 10px;
background-color: var(--el-color-danger);
color: #fff;
margin-right: 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: 20px;
gap: 20px;
.editor {
border: 1px solid #ececec;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
color: #555;
font-size: 22px;
}
.button {
flex: 1;
:deep(.el-checkbox.el-checkbox--large) {
height: 50px;
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;
padding-left: 20px;
}
}
</style>

88
src/views/home/index.vue
View File

@ -22,9 +22,9 @@
</div>
</div>
<div class="shop_operation">
<div class="shop_list" v-loading="cartLoading">
<div class="item" :class="{ active: item.active }" v-for="item in cartList" :key="item.id"
@click="selectCartItemHandle(item)">
<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="name_wrap">
<span>{{ item.name }}</span>
<span>￥{{ item.salePrice }}</span>
@ -53,8 +53,8 @@
</div>
</div>
<!-- 购物车操作栏 -->
<cartOperation :item="selectCartItem" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
@pending="pendingCart" />
<cartOperation :item="cartList[cartListActive]" @confirm="res => addCart(res, 'edit')" @delete="delCartHandle"
@pending="pendingCart" @clearCart="clearCartHandle" />
</div>
<div class="footer">
<div class="top">
@ -74,7 +74,7 @@
<div class="btm">
<el-button icon="Edit" @click="remarkRef.show()"></el-button>
<div class="button">
<el-button type="primary" style="width: 100%;">
<el-button type="primary" style="width: 100%;" @click="settleAccountRef.show()">
<div class="js">
<el-text class="t">￥{{ cartInfo.totalAmount }}</el-text>
<el-text class="t" style="margin-left: 250px;">结算</el-text>
@ -98,7 +98,7 @@
</el-drawer>
<takeFoodCode ref="takeFoodCodeRef" title="修改取餐号" placeholder="请输入取餐号" @success="takeFoodCodeSuccess" />
<!-- 结算订单 -->
<settleAccount />
<settleAccount ref="settleAccountRef" :cart="cartList" :amount="cartInfo.totalAmount" :remark="remark" />
<!-- 挂起订单 -->
<pendingCartModal ref="pendingCartModalRef" @select="pendingCartHandle" />
</template>
@ -109,10 +109,10 @@ 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 '@/components/settleAccount.vue'
import settleAccount from '@/views/home/components/settleAccount.vue'
import pendingCartModal from '@/views/home/components/pendingCartModal.vue'
import { createCart, queryCart, createCode, packall, delCart, cartStatus } from '@/api/product'
import { createCart, queryCart, createCode, packall, delCart, cartStatus, clearCart } from '@/api/product'
// 商品列表
import goods from '@/views/home/components/goods.vue'
@ -123,10 +123,12 @@ 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 cartLoading = ref(false)
const remark = ref('')
const cartListActive = ref(0)
const cartList = ref([])
const cartInfo = ref({})
@ -135,23 +137,40 @@ const masterId = ref('')
// 挂单量
const pendingCartNum = ref(0)
// 清空购物车
async function clearCartHandle() {
try {
await clearCart({
shopId: store.userInfo.shopId,
masterId: masterId.value
})
queryCartAjax()
} catch (error) {
console.log(error)
}
}
// 恢复挂单
async function pendingCartHandle(item) {
masterId.value = item.masterId
await pendingCart(item, false)
const nItem = { ...item }
if (cartList.value.length) {
// 当购物车有数据时，先挂起当前购物车
await pendingCart({ masterId: masterId.value })
}
masterId.value = nItem.masterId
await pendingCart(nItem, false)
await queryCartAjax()
}
// 挂单
async function pendingCart(params, status = true) {
try {
cartLoading.value = true
await cartStatus({
shopId: store.userInfo.shopId,
masterId: params.masterId,
status: status
})
if (status) createCodeAjax()
if (status && !cartList.value.length) createCodeAjax()
} catch (error) {
console.log(error)
}
@ -160,7 +179,6 @@ async function pendingCart(params, status = true) {
// 删除购物车
async function delCartHandle(params) {
try {
cartLoading.value = true
await delCart({
masterId: params.masterId,
cartId: params.id
@ -179,17 +197,7 @@ function giftPackHandle(key, item) {
// 打包全选
const allSelectedHandle = async () => {
if (allSelected.value) {
allSelected.value = false
cartList.value.map(item => {
item.isPack = false
})
} else {
allSelected.value = true
cartList.value.map(item => {
item.isPack = true
})
}
allSelected.value = !allSelected.value
await packall({
shopId: store.userInfo.shopId,
status: allSelected.value,
@ -204,20 +212,14 @@ function takeFoodCodeSuccess(code) {
queryCartAjax()
}
const selectCartItem = ref({})
// 从购物车选择商品
function selectCartItemHandle(item) {
cartList.value.map(val => {
val.active = false
})
item.active = true
selectCartItem.value = item
function selectCartItemHandle(item, index) {
cartListActive.value = index
}
// 选择完规格开始添加购物车
async function addCart(params, type = 'add') {
try {
cartLoading.value = true
const res = await createCart({
productId: params.productId,
masterId: masterId.value,
@ -239,27 +241,14 @@ async function addCart(params, type = 'add') {
// 获取购物车商品
async function queryCartAjax() {
try {
cartLoading.value = true
const res = await queryCart({
masterId: masterId.value,
shopId: store.userInfo.shopId
})
selectCartItem.value = {}
cartList.value = res.list.map((item, index) => {
if (index == 0) {
item.active = true
selectCartItem.value = item
} else {
item.active = false
}
return item
})
cartList.value = res.list
cartInfo.value = res.amount
pendingCartNum.value = res.num
goodsRef.value.updateData()
setTimeout(() => {
cartLoading.value = false
}, 100)
} catch (error) {
console.log('获取购物车商品', error)
}
@ -269,7 +258,8 @@ async function queryCartAjax() {
async function createCodeAjax() {
try {
const res = await createCode({ shopId: store.userInfo.shopId })
masterId.value = res.code
// masterId.value = res.code
masterId.value = '#51'
queryCartAjax()
} catch (error) {
console.log(error)