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

11

This commit is contained in:
魏啾 2024-02-23 15:29:58 +08:00
parent 3cb4828476
commit b69be492d7
1 changed files with 201 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

210
src/views/order/index.vue
View File

@ -8,7 +8,7 @@
<el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button>
</div>
<div class="demo_tabs_box">
<div class="demo_tabs_boxitem">
<div class="demo_tabs_boxitem" @click="itemboxshow = true">
<div class="demo_tabs_boxitem_one">
<el-image style="width: 100px; height: 70px;border-radius: 10px;"
src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
@ -23,11 +23,12 @@
</div>
<div class="demo_tabs_boxitem_onetow">
<div>
<span>销售</span><span
<span style="font-size: var(--el-font-size-base);">销售</span><span
style="font-size: 16px; color: #757575;">11111111111111111111111111</span>
</div>
<div>
<span style="color: #5a31f1;">[222]</span><span>待点单</span>
<span
style="color: #5a31f1;font-size: var(--el-font-size-base);">[222]</span><span>待点单</span>
</div>
</div>
</div>
@ -46,7 +47,77 @@
<el-tab-pane label="退单" name="third">退单</el-tab-pane>
</el-tabs>
</div>
<div class="orderbox_right">order</div>
<div class="orderbox_rightbox">
<div class="orderbox_rightbox_top">
<el-icon size="40">
<Document />
</el-icon>
<div class="orderbox_rightbox_top_div">
<div>今日普通订单</div>
<div style="font-size:14px;">今日本终端处理的订单</div>
</div>
</div>
</div>
<div class="orderbox_right" v-if="itemboxshow">
<div class="orderbox_right_top">
<span>堂食订单</span>
<el-icon size="32" style="color: var(--primary-color) ;" @click="itemboxshow = false">
<CircleCloseFilled />
</el-icon>
</div>
<div class="tableDataclass">
<div class="orderbox_right_item">
<span class="span">订单号：</span><span class="nunber">200000000000</span>
</div>
<div class="orderbox_right_item">
<span class="span">收银员：</span><span class="nunber">V1</span>
</div>
<div class="orderbox_right_item">
<span class="span">创建时间：</span><span class="nunber">2024-20-01 11:49:06</span>
</div>
<div class="orderbox_right_item">
<span class="span">终端：</span><span class="nunber">mobile</span>
</div>
<div class="orderbox_right_item">
<span class="span">会员：</span><span class="nunber">微信用户</span>
</div>
<div class="orderbox_right_item">
<span class="span">台桌：</span><span class="nunber">222</span>
</div>
<div class="orderbox_right_item">
<span class="span">流水号：</span><span class="nunber">#1</span>
</div>
<div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc;">
<span>合计：</span>
<span>￥0.00</span>
</div>
<div class="orderbox_right_top" style="margin-top: 20px; border-bottom: 2px solid #ccc;">
<span style="font-size: 16px;">未支付</span>
</div>
<div class="orderbox_right_top" style="margin-top: 20px;">
<span>商品明细</span>
<span>0项</span>
</div>
<div class="orderbox_right_list" style="margin-top: 20px;">
<div>商品</div>
<div>数量</div>
<div>单价</div>
<div>小计</div>
</div>
<div class="orderbox_right_list_item" style="margin-top: 20px;">
<div>1号商品</div>
<div style="text-align: center;">3</div>
<div style="text-align: center;">3</div>
<div>3</div>
</div>
</div>
<div class="orderbox_right_button">
<el-button style="width: 100%;" type="primary" @click="onSubmit">点单</el-button>
<el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger"
@click="onSubmit">取消</el-button>
</div>
</div>
</div>
</template>
@ -57,6 +128,7 @@ import { ElMessage } from 'element-plus'
const route = useRoute()
console.log(route)
const activeName = ref('first')//定义初始name
const itemboxshow = ref(false)
const handleClick = (Name) => {
console.log(Name)
}
@ -79,7 +151,7 @@ const onSubmit = () => {
height: 100%;
.orderbox_left {
width: 70%;
width: 60%;
height: 100%;
background: #fff;
border-radius: 10px;
@ -91,6 +163,7 @@ const onSubmit = () => {
:deep(.el-tabs__item) {
width: 33.33%;
// width: 10px !important;
}
:deep(.el-is-active) {
@ -115,6 +188,7 @@ const onSubmit = () => {
justify-content: space-between;
// background: #eeeeee;
border-bottom: 1px solid #ccc;
.demo_tabs_boxitem_one {
display: flex;
justify-content: flex-start;
@ -151,12 +225,130 @@ const onSubmit = () => {
}
.orderbox_right {
width: 30%;
.orderbox_rightbox {
position: relative;
width: 40%;
padding: 20px;
margin-left: 10px;
background: #fff;
border-radius: 10px;
.orderbox_rightbox_top {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 16px;
width: 100%;
border-radius: 10px;
background: #bdb8b8;
.orderbox_rightbox_top_div {
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
}
}
</style>
.orderbox_right {
position: relative;
width: 40%;
padding: 20px;
margin-left: 10px;
background: #fff;
border-radius: 10px;
.orderbox_right_top {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
border-bottom: 2px solid #000;
}
.orderbox_right_list {
display: flex;
font-size: 14px;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
text-align: center;
border-bottom: 2px solid #ccc;
div:nth-child(1) {
text-align: left;
width: 45%;
}
div:nth-child(2) {
width: 15%;
align-items: center;
}
div:nth-child(3) {
width: 15%;
align-items: center;
}
div:nth-child(4) {
text-align: right;
width: 25%;
}
}
.orderbox_right_list_item {
display: flex;
font-size: 14px;
justify-content: space-between;
align-items: center;
padding-bottom: 10px;
div:nth-child(1) {
text-align: left;
width: 45%;
}
div:nth-child(2) {
width: 15%;
align-items: center;
}
div:nth-child(3) {
width: 15%;
align-items: center;
}
div:nth-child(4) {
text-align: right;
width: 25%;
}
}
.tableDataclass {
width: 100%;
overflow: auto;
height: 75%;
.orderbox_right_item {
margin-top: 16px;
span {
font-size: var(--el-font-size-base);
// color: var(--primary-color);
}
}
}
.orderbox_right_button {
position: absolute;
width: 90%;
left: 50%;
bottom: 16px;
transform: translateX(-50%) !important;
}
}
}</style>