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

Merge branch 'wwz' of gitee.com:shaanxi-super-shopkeeper_1/cashierdesktop into gyq

This commit is contained in:
gyq 2024-02-26 11:46:27 +08:00
parent 9744a968bb b37811ced5
commit 33225b0aef
6 changed files with 3887 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3152
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -18,6 +18,7 @@
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
"electron": "^28.2.3",
"path": "^0.12.7",
"sass": "^1.69.5",
"sass-loader": "^13.3.2",

2
src/components/leftMenu.vue
View File

@ -50,7 +50,7 @@ const menus = ref([
},
{
label: '会员',
path: '/user',
path: '/member',
icon: 'User'
},
{

16
src/router/index.js
View File

@ -30,6 +30,22 @@ const routes = [
index: 1,
},
component: () => import("@/views/table.vue"),
},
{
path: "/order",
name: "order",
meta: {
index: 1,
},
component: () => import("@/views/order/index.vue"),
},
{
path: "/member",
name: "member",
meta: {
index: 1,
},
component: () => import("@/views/member/index.vue"),
}
];

314
src/views/member/index.vue Normal file
View File

@ -0,0 +1,314 @@
<template>
<div class="orderbox">
<div class="orderbox_left">
<div class="demo_tabs">
<div class="demo_tabs_div">
<el-input v-model="firstinput" placeholder="请输入手机号或编号" clearable />
<el-button style="margin-left: 10px;" type="primary" @click="onSubmit">添加</el-button>
</div>
</div>
<el-table :data="tableData" height="90%" style="width: 100%;margin-top: 10px;">
<el-table-column prop="date" label="昵称" width="" />
<el-table-column prop="name" label="手机" width="" />
<el-table-column prop="address" label="编号" />
<el-table-column prop="address" label="等级" />
<el-table-column prop="address" label="积分" />
<el-table-column prop="address" label="余额" />
</el-table>
</div>
<div class="orderbox_right">
<div class="orderbox_right_top">
<div class="orderbox_right_topdiv">
<span>会员昵称：</span>
<span>admin</span>
</div>
<div class="orderbox_right_topdiv">
<span>手机号码：</span>
<span>1999999999999</span>
</div>
<div class="orderbox_right_topdiv">
<span>会员编号：</span>
<span>1245</span>
</div>
<div class="orderbox_right_topdiv">
<span>会员等级：</span>
<span>未设置</span>
</div>
<div class="orderbox_right_top_item">
<div class="orderbox_right_top_item_one">
<el-icon :size="24" style="color:#ffbc42 ;">
<Money />
</el-icon>
<span class="orderbox_right_top_item_onespan">会员积分</span>
</div>
<div class="orderbox_right_top_item_tow">0</div>
</div>
<div class="orderbox_right_top_item">
<div class="orderbox_right_top_item_one">
<el-icon :size="24" style="color:#00b58d ;">
<Box />
</el-icon>
<span class="orderbox_right_top_item_onespan">储值会员</span>
</div>
<div class="orderbox_right_top_item_tow">0</div>
</div>
<div class="orderbox_right_top_item">
<div class="orderbox_right_top_item_one">
<el-icon :size="24" style="color:#00b58d ;">
<CopyDocument />
</el-icon>
<span class="orderbox_right_top_item_onespan">优惠券</span>
</div>
<div class="orderbox_right_top_item_tow">0</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>
<script setup>
import { ref } from 'vue'
import { useRoute } from "vue-router"
import { ElMessage } from 'element-plus'
const route = useRoute()
console.log(route)
const itemboxshow = ref(false)
const handleClick = (Name) => {
console.log(Name)
}
const firstinput = ref('')//搜索输入框
const tableData = [
{
date: '2016-05-03',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-02',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-04',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
{
date: '2016-05-01',
name: 'Tom',
address: 'No. 189, Grove St, Los Angeles',
},
]
</script>
<style scoped lang="scss">
.orderbox {
display: flex;
height: 100%;
.orderbox_left {
width: 60%;
height: 100%;
background: #fff;
border-radius: 10px;
padding: 16px 0;
.demo_tabs {
.demo_tabs_div {
padding: 0 20px;
display: flex;
}
.demo_tabs_box {
width: 100%;
padding: 10px 20px;
.demo_tabs_boxitem {
width: 100%;
padding: 6px 16px;
border-radius: 6px;
display: flex;
justify-content: space-between;
// background: #eeeeee;
border-bottom: 1px solid #ccc;
.demo_tabs_boxitem_one {
display: flex;
justify-content: flex-start;
.demo_tabs_boxitem_oneone {
display: flex;
margin-left: 20px;
flex-direction: column;
height: 70px;
justify-content: space-around;
}
.demo_tabs_boxitem_onetow {
display: flex;
margin-left: 20px;
flex-direction: column;
height: 70px;
justify-content: space-around;
}
}
}
.demo_tabs_boxitem_tow {
display: flex;
flex-direction: column;
height: 70px;
justify-content: space-around;
align-items: flex-end;
}
}
}
}
.orderbox_rightbox {
position: relative;
width: 40%;
padding: 20px;
margin-left: 10px;
background: #fff;
border-radius: 10px;
.orderbox_rightbox_top:nth-child(1) {
margin-top: 0;
}
.orderbox_rightbox_top {
margin-top: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 16px;
width: 100%;
border-radius: 10px;
background: #e7e5e5;
.orderbox_rightbox_top_div {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
}
.orderbox_right {
position: relative;
width: 40%;
padding: 20px;
margin-left: 10px;
background: #fff;
border-radius: 10px;
.orderbox_right_top {
color: #fff;
width: 100%;
background: #8b008b;
padding: 10px;
border-radius: 10px;
.orderbox_right_topdiv:nth-child(1) {
margin-top: 0px;
}
.orderbox_right_topdiv {
display: flex;
margin-top: 10px;
justify-content: space-between;
}
// .orderbox_right_top_item::after:nth-child(1){
// position: absolute;
// top: 2px;
// content: '';
// display: inline-block;
// height: 2px;
// width: 100%;
// background: #fff;
// }
.orderbox_right_top_item {
position: relative;
background: #fff;
padding: 6px 10px;
display: flex;
margin-top: 10px;
border-radius: 10px;
justify-content: space-between;
align-items: center;
.orderbox_right_top_item_one {
display: flex;
align-items: center;
.orderbox_right_top_item_onespan {
color: black;
margin-left: 10px;
font-size: 16px;
}
}
.orderbox_right_top_item_tow {
color: black;
margin-left: 10px;
font-size: 14px;
font-weight: bold;
}
}
}
.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%;
}
}
.orderbox_right_button {
position: absolute;
width: 90%;
left: 50%;
bottom: 16px;
transform: translateX(-50%) !important;
}
}
}</style>

403
src/views/order/index.vue Normal file
View File

@ -0,0 +1,403 @@
<template>
<div class="orderbox">
<div class="orderbox_left">
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick(activeName)">
<el-tab-pane label="全部" name="first">
<div class="demo_tabs_div">
<el-input v-model="firstinput" placeholder="请输入订单号查询" clearable />
<el-button style="margin-left: 10px;" type="primary" @click="onSubmit">搜索</el-button>
</div>
<div class="demo_tabs_box">
<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"
fit="scale-down" />
<div class="demo_tabs_boxitem_oneone">
<div>
11:19
</div>
<div style="color: #757575;">
2024/02/01
</div>
</div>
<div class="demo_tabs_boxitem_onetow">
<div>
<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;font-size: var(--el-font-size-base);">[222]</span><span>待点单</span>
</div>
</div>
</div>
<div class="demo_tabs_boxitem_tow">
<div>
￥0.0
</div>
<div style="color:#ff9e01;">
开台
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="销售" name="second">销售</el-tab-pane>
<el-tab-pane label="退单" name="third">退单</el-tab-pane>
</el-tabs>
</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 class="orderbox_rightbox" v-else>
<div class="orderbox_rightbox_top">
<div
style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
<el-icon :size="30" color="#fff">
<Document />
</el-icon>
</div>
<div class="orderbox_rightbox_top_div">
<div>今日普通订单</div>
<div style="font-size:14px;">今日本终端处理的订单</div>
</div>
</div>
<div class="orderbox_rightbox_top">
<div
style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
<el-icon :size="30" color="#fff">
<Connection />
</el-icon>
</div>
<div class="orderbox_rightbox_top_div">
<div>今日普通订单</div>
<div style="font-size:14px;">今日本终端处理的订单</div>
</div>
</div>
<div class="orderbox_rightbox_top">
<div
style="padding: 6px; background:#187ead; border-radius:50%;width: 50px;height: 50px; display: flex; align-items: center; justify-content: center;">
<el-icon :size="30" color="#fff">
<Crop />
</el-icon>
</div>
<div class="orderbox_rightbox_top_div">
<div>今日普通订单</div>
<div style="font-size:14px;">今日本终端处理的订单</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue'
import { useRoute } from "vue-router"
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)
}
const firstinput = ref('')//搜索输入框
const onSubmit = () => {
if (firstinput.value) {
} else {
ElMessage({
message: '请输入订单号查询',
type: 'warning',
})
}
}
</script>
<style scoped lang="scss">
.orderbox {
display: flex;
height: 100%;
.orderbox_left {
width: 60%;
height: 100%;
background: #fff;
border-radius: 10px;
.demo-tabs {
:deep(.el-tabs__nav) {
width: 100%;
}
:deep(.el-tabs__item) {
width: 33.33%;
padding: 0;
position: relative;
// width: 10px !important;
}
:deep(.el-tabs__active-bar){
height:0 !important;
}
:deep(.el-tabs__active-bar)::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
height: 2px;
width: 10px;
background: red;
transform:translateX(-50%);
// width: 10px !important;
}
:deep(.el-is-active) {
width: 33.33%;
color: var(--primary-color);
}
.demo_tabs_div {
padding: 0 20px;
display: flex;
}
.demo_tabs_box {
width: 100%;
padding: 10px 20px;
.demo_tabs_boxitem {
width: 100%;
padding: 6px 16px;
border-radius: 6px;
display: flex;
justify-content: space-between;
// background: #eeeeee;
border-bottom: 1px solid #ccc;
.demo_tabs_boxitem_one {
display: flex;
justify-content: flex-start;
.demo_tabs_boxitem_oneone {
display: flex;
margin-left: 20px;
flex-direction: column;
height: 70px;
justify-content: space-around;
}
.demo_tabs_boxitem_onetow {
display: flex;
margin-left: 20px;
flex-direction: column;
height: 70px;
justify-content: space-around;
}
}
}
.demo_tabs_boxitem_tow {
display: flex;
flex-direction: column;
height: 70px;
justify-content: space-around;
align-items: flex-end;
}
}
}
}
.orderbox_rightbox {
position: relative;
width: 40%;
padding: 20px;
margin-left: 10px;
background: #fff;
border-radius: 10px;
.orderbox_rightbox_top:nth-child(1) {
margin-top: 0;
}
.orderbox_rightbox_top {
margin-top: 10px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 16px;
width: 100%;
border-radius: 10px;
background: #e7e5e5;
.orderbox_rightbox_top_div {
margin-left: 10px;
display: flex;
flex-direction: column;
justify-content: space-around;
}
}
}
.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>