From b37811ced5fc4d542c7d5957598992981b9bab64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Fri, 23 Feb 2024 18:32:41 +0800
Subject: [PATCH] 11

---
 src/components/leftMenu.vue |   2 +-
 src/router/index.js         |   8 +
 src/views/member/index.vue  | 314 ++++++++++++++++++++++++++++++++++++
 3 files changed, 323 insertions(+), 1 deletion(-)
 create mode 100644 src/views/member/index.vue

diff --git a/src/components/leftMenu.vue b/src/components/leftMenu.vue
index e0ece87..d154aee 100644
--- a/src/components/leftMenu.vue
+++ b/src/components/leftMenu.vue
@@ -50,7 +50,7 @@ const menus = ref([
     },
     {
         label: '会员',
-        path: '/user',
+        path: '/member',
         icon: 'User'
     },
     {
diff --git a/src/router/index.js b/src/router/index.js
index e1d0596..a9357f7 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -38,6 +38,14 @@ const routes = [
       index: 1,
     },
     component: () => import("@/views/order/index.vue"),
+  },
+  {
+    path: "/member",
+    name: "member",
+    meta: {
+      index: 1,
+    },
+    component: () => import("@/views/member/index.vue"),
   }
 ];
 
diff --git a/src/views/member/index.vue b/src/views/member/index.vue
new file mode 100644
index 0000000..8c73b19
--- /dev/null
+++ b/src/views/member/index.vue
@@ -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>
\ No newline at end of file