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

完成交班

Browse Source
This commit is contained in:
魏啾
2024-03-07 09:47:06 +08:00
parent 5d96435125
commit dc2d7124d0
6 changed files with 629 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

271
src/views/work/index.vue
View File

@@ -1,16 +1,279 @@
<template>
<el-drawer size="100%" :with-header="false" direction="btt" v-model="dialogVisible">
<div class="drawer_wrap">
<div class="box">
<div class="box_top">
<router-link to="/">
<div class="box_top_left">
<el-icon size="20">
<ArrowLeft />
</el-icon>
<div style="margin-left: 10px;"> 交班</div>
</div>
</router-link>
<router-link to='/workrecord' class="box_top_right">
交班记录
</router-link>
</div>
<div class="box_content">
<div class="box_content_left">
<div class="box_content_left_top">
<div class="box_content_left_top_item">
<div class="box_content_left_top_item_top">
<div style="color:#ff5252; font-size: 30px;">
{{ infoData.orderNum }}
</div>
<div style="margin-top: 6px; color: #666;">
总订单
</div>
</div>
<div class="box_content_left_top_item_top">
<div style="color:#ff5252; font-size: 30px;">
{{ infoData.amount }}
</div>
<div style="margin-top: 6px; color: #666;">
营业额
</div>
</div>
</div>
<div class="box_content_left_top_item">
<div class="box_content_left_top_item_botton">
<div style=" font-size: 20px;">
{{ infoData.cashAmount }}
</div>
<div style="margin-top: 6px;">
现金支付
</div>
<div style="margin-top: 6px;font-size: 14px;">
查看详情
</div>
</div>
<div class="box_content_left_top_item_botton">
<div style=" font-size: 20px;">
{{ infoData.returnAmount }}
</div>
<div style="margin-top: 6px;">
退款金额
</div>
<div style="margin-top: 6px;font-size: 14px;">
查看详情
</div>
</div>
</div>
</div>
<div class="box_content_left_bottom">
<el-table :data="infoData.detailList" style="width: 100%;" height="400px">
<el-table-column prop="productName" label="商品名称" width="200" />
<el-table-column prop="skuName" label="规格名称" width="200" />
<el-table-column prop="amount" label="商品数量" width="200" />
<el-table-column prop="num" label="商品金额" />
</el-table>
</div>
</div>
<div class="box_content_right">
<div class="box_content_right_tiem">
<div class="box_content_right_tiemleft">
上岗时间：
</div>
<div class="box_content_right_tiemright">
{{ dayjs(infoData.loginTime).format("YYYY-MM-DD HH:mm:ss") }}
</div>
</div>
<div class="box_content_right_tiem">
<div class="box_content_right_tiemleft">
交班时间：
</div>
<div class="box_content_right_tiemright">
{{ dayjs(infoData.loginOutTime).format("YYYY-MM-DD") }}
</div>
</div>
<div class="box_content_right_tiem">
<div class="box_content_right_tiemleft">
终端名称：
</div>
<div class="box_content_right_tiemright">
{{ infoData.equipment }}
</div>
</div>
<div class="box_content_right_tiem">
<div class="box_content_right_tiemleft">
备用金：
</div>
<div class="box_content_right_tiemright">
{{ infoData.pettyCash }}
</div>
</div>
<div class="box_content_right_tiem">
<div class="box_content_right_tiemleft">
收营员：
</div>
<div class="box_content_right_tiemright">
{{ infoData.userName }}
</div>
</div>
<div class="box_content_right_tiembutton">
关班/退出
</div>
</div>
</div>
</div>
</el-drawer>
</template>
<script setup>
import { ref } from 'vue'
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
const dialogVisible = ref(false)
import { ElMessage, dayjs } from 'element-plus'
import { shopInfoqueryDuty } from '@/api/work/index.js'
const dialogVisible = ref(true) //交班
//详情数据
const infoData = ref({})
const infoshopInfoqueryDutys = async () => {
let res = await shopInfoqueryDuty({
page: 1,
pageSize: 10
})
infoData.value = res
console.log(res)
}
onMounted(() => {
infoshopInfoqueryDutys()
})
</script>
<style scoped lang="scss"></style>
<style scoped lang="scss">
.box {
padding: 16px 0;
height: 100%;
.box_top {
display: flex;
justify-content: space-between;
align-items: center;
background: #fff;
padding: 6px 10px;
border-radius: 6px;
color: #161718;
text-decoration: none;
/* 取消下划线效果 */
.box_top_left {
display: flex;
justify-content: flex-start;
align-items: center;
}
.box_top_right {
color: #161718;
text-decoration: none;
/* 取消下划线效果 */
}
}
.box_content {
margin-top: 10px;
width: 100%;
height: 92%;
display: flex;
.box_content_left {
background: #fff;
width: 70%;
height: 100%;
border-radius: 6px;
padding: 30px 20px;
.box_content_left_top {
display: flex;
flex-direction: column;
border-bottom: 1px solid #ccc;
padding-bottom: 20px;
.box_content_left_top_item {
display: flex;
align-items: center;
.box_content_left_top_item_top {
margin-left: 30px;
display: flex;
align-items: center;
flex-direction: column;
}
.box_content_left_top_item_botton:nth-child(1) {
margin-left: 0;
}
.box_content_left_top_item_botton {
position: relative;
margin-left: 10px;
margin-top: 10px;
display: flex;
align-items: center;
flex-direction: column;
width: 200px;
padding: 20px 0;
background: #e0e0e0;
border-radius: 10px;
}
.box_content_left_top_item_botton::after {
position: absolute;
top: 0;
content: '';
display: inline-block;
width: 200px;
height: 8px;
background: #ff5252;
border-radius: 10px 10px 0 0;
}
}
}
}
.box_content_right {
width: 30%;
height: 100%;
background: #fff;
margin-left: 10px;
border-radius: 6px;
padding: 10px 12px;
position: relative;
.box_content_right_tiem:nth-child(1) {
margin-top: 0;
}
.box_content_right_tiem {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.box_content_right_tiemleft {
color: #9e9e9e;
}
}
.box_content_right_tiembutton {
position: absolute;
bottom: 10px;
left: 5%;
background: #ba5050;
width: 90%;
border-radius: 5px;
color: #fff;
text-align: center;
height: 60px;
line-height: 60px;
}
}
}
}
</style>