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

对接台桌列表

Browse Source
This commit is contained in:
gyq
2024-02-28 15:02:31 +08:00
parent 56f9d83447
commit d65e3db7c0
17 changed files with 655 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/table/components/countCard.vue Normal file
View File

@@ -0,0 +1,97 @@
<template>
<div class="count_wrap">
<div class="date_wrap">
<div class="time">{{ nowTime }}</div>
<div class="date">
<span>{{ nowDate }}</span>
<span>{{ week }}</span>
</div>
</div>
<div class="order_info">
<div class="item">
<div class="title">未结算订单</div>
<div class="num">0</div>
</div>
<div class="item">
<div class="title">未结算金额</div>
<div class="num">0.00</div>
</div>
</div>
</div>
</template>
<script setup>
import dayjs from 'dayjs'
import weekday from 'dayjs/plugin/weekday'
dayjs.extend(weekday)
import { ref, onMounted, onUnmounted } from 'vue'
const nowTime = ref(dayjs().format('HH:mm'))
const nowDate = ref(dayjs().format('M月D日 '))
const weekFormat = {
1: '星期一',
2: '星期二',
3: '星期三',
4: '星期四',
5: '星期五',
6: '星期六',
7: '星期天',
}
const week = ref(weekFormat[dayjs().weekday()])
const timer = ref(null)
function updateTime() {
timer.value = setInterval(() => {
nowTime.value = dayjs().format('HH:mm')
console.log('时间更新了')
}, 30000)
}
onMounted(() => {
updateTime()
})
onUnmounted(() => {
clearInterval(timer.value)
timer.value = null
})
</script>
<style scoped lang="scss">
.time {
font-family: 'num';
font-size: 82px;
letter-spacing: 10px;
}
.count_wrap {
padding: 0 20px;
.date_wrap {
padding: 40px 0;
border-bottom: 1px solid #ececec;
.date {
font-size: 26px;
padding-left: 6px;
}
}
.order_info {
padding: 40px 0;
display: flex;
.item {
flex: 1;
.num {
font-family: 'num';
font-size: 46px;
letter-spacing: 4px;
padding-top: 10px;
}
}
}
}
</style>

141
src/views/table/components/tableInfo.vue Normal file
View File

@@ -0,0 +1,141 @@
<!-- 空闲台桌 -->
<template>
<div class="table_wrap">
<div class="header">
<span class="t">{{ props.tableInfo.name }}</span>
<div class="close" @click="close">
<el-icon class="icon">
<Close />
</el-icon>
</div>
</div>
<div class="status_wrap">
<el-icon class="icon">
<Clock />
</el-icon>
<span class="t">{{ status[props.tableInfo.status] }}</span>
</div>
<div class="place_order">
<router-link class="btn" :to="{ name: 'home', query: { table_code: 1 } }">
<div class="top">
<el-icon class="icon">
<TakeawayBox />
</el-icon>
<span class="t">点单</span>
</div>
<span class="tips">开始新订单</span>
</router-link>
</div>
</div>
</template>
<script setup>
import { ref, defineEmits } from 'vue'
const emit = defineEmits(['close'])
const props = defineProps({
tableInfo: {
type: Object,
default: {}
}
})
const status = ref({
'subscribe': '预定',
'closed': '关台',
'opening': '开台中',
'cleaning': '台桌清理中'
})
// 关闭
function close() {
emit('close')
}
</script>
<style scoped lang="scss">
.table_wrap {
padding: 20px;
.header {
display: flex;
align-items: center;
justify-content: space-between;
.t {
font-size: 26px;
}
.close {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: flex-end;
.icon {
font-size: 30px;
color: #999;
}
}
}
.status_wrap {
display: flex;
align-items: center;
padding-bottom: 20px;
.icon {
color: #666;
font-size: 24px;
}
.t {
color: #666;
margin-left: 4px;
}
}
.place_order {
background-color: #efefef;
height: calc(100vh - 180px);
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
.btn {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
.top {
background-color: var(--el-color-danger);
width: 130px;
height: 130px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 6px;
.icon {
color: #fff;
font-size: 50px;
}
.t {
color: #fff;
}
}
.tips {
color: #999;
padding-top: 6px;
}
}
}
}
</style>