新增结算页面
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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
258
src/views/home/components/settleAccount.vue
Normal 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>
|
||||
Reference in New Issue
Block a user