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

---
 src/App.vue                          |  10 +
 src/views/home/components/member.vue | 492 +++++++++++++++++++++++++++
 src/views/home/index.vue             |   9 +-
 src/views/member/index.vue           |  59 +++-
 4 files changed, 558 insertions(+), 12 deletions(-)
 create mode 100644 src/views/home/components/member.vue

diff --git a/src/App.vue b/src/App.vue
index bad7438..e1e1605 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -88,6 +88,16 @@ html {
   top: 10px !important;
 }
 
+.el-drawer__header {
+  // padding: 0 !important;
+  margin-bottom: 5px !important;
+}
+
+.el-drawer__body {
+  padding: 0 var(--el-drawer-padding-primary) !important;
+
+}
+
 .el-textarea {
   font-size: var(--el-font-size-base) !important;
 }
diff --git a/src/views/home/components/member.vue b/src/views/home/components/member.vue
new file mode 100644
index 0000000..faef1e0
--- /dev/null
+++ b/src/views/home/components/member.vue
@@ -0,0 +1,492 @@
+<template>
+    <div class="orderbox">
+        <div class="orderbox_left">
+            <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" @click="stored = true">
+                    <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">
+                        <span>0</span>
+                        <el-icon size="10">
+                            <ArrowRight />
+                        </el-icon>
+                    </div>
+                </div>
+            </div>
+            <div class="orderbox_right_input">
+                <el-input placeholder="请输入会员手机号或者编号" v-model="moneys.money" clearable @input="inputChange"></el-input>
+            </div>
+            <div class="orderbox_right_inputkeyboard">
+                <div class='keyboard'>
+                    <div class='key-row'>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='1'>1</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='2'>2</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='3'>3</el-button>
+                    </div>
+                    <div class='key-row'>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='4'>4</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='5'>5</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='6'>6</el-button>
+                    </div>
+                    <div class='key-row'>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='7'>7</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='8'>8</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='9'>9</el-button>
+                    </div>
+                    <div class='key-row'>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='.'>.</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='0'>0</el-button>
+                        <el-button type="primary" @click.stop='_handleKeyPress' plain class='key-cell cell_b'
+                            data-num='D'>c</el-button>
+                    </div>
+                </div>
+            </div>
+            <div class="orderbox_right_button">
+                <el-button style="width: 35%;"  @click="recharge = true">添加会员</el-button>
+                <el-button style="width: 60%;" type="primary"
+                    @click="onSubmit">确认</el-button>
+
+            </div>
+        </div>
+        <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
+            <div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
+                <div class="dialog_footer_left">
+                    <span>微信用户</span>
+                    <span>2021-02-22 18:05:53</span>
+                </div>
+                <div class="dialog_footer_right">
+                    <span>19000</span>
+                    <span>26300</span>
+                </div>
+            </div>
+
+        </el-dialog>
+        <el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
+            <div class="recharge_footer">
+                <div class="recharge_footer_item">
+                    qq
+                </div>
+                <div class="recharge_footer_itemright">
+                    <div class="recharge_footer_itemright_input">
+                        <div>充值金额：</div>
+                        <div v-if="moneys.money">{{ moneys.money ? moneys.money : '请输入充值金额' }}</div>
+
+                    </div>
+
+                </div>
+
+            </div>
+
+        </el-dialog>
+    </div>
+</template>
+
+<script setup>
+import { ref, reactive, watch } from 'vue'
+import { useRoute } from "vue-router"
+import { ElMessage } from 'element-plus'
+import lodash_ from 'lodash'
+
+const route = useRoute()
+
+
+const stored = ref(false)//储值余额
+// const inputChange = lodash_.debounce(function (e) {
+//     productqueryCommodityInfoAjax()
+// }, 500)
+const handleClose = () => {
+    stored.value = !stored.value
+}
+const recharge = ref(false)//充值
+
+const onSubmit = () => {
+    ElMessage({
+        message: '请输入订单号查询',
+        type: 'warning',
+    })
+}
+const handlerecharge = () => {
+    recharge.value = !recharge.value
+}
+const tableData = [
+    {
+        date: '2016-05-03',
+        name: 'Tom',
+        address: '1',
+    },
+    {
+        date: '2016-05-02',
+        name: 'Tom',
+        address: '1',
+    },
+    {
+        date: '2016-05-04',
+        name: 'Tom',
+        address: '1',
+    },
+    {
+        date: '2016-05-01',
+        name: 'Tom',
+        address: '1',
+    },
+]
+const moneys = reactive({
+    money: ''
+})
+const _handleKeyPress = (e) => {
+    console.log('点击传e', e.target.dataset.num);
+    let num = e.target.dataset.num;
+    console.log(num)
+    //不同按键处理逻辑
+    // -1 代表无效按键，直接返回
+    if (num == -1) return false;
+    switch (String(num)) {
+        //小数点
+        case '.':
+            _handleDecimalPoint();
+            break;
+        //删除键
+        case 'D':
+            _handleDeleteKey();
+            break;
+        default:
+            _handleNumberKey(num);
+            break;
+    }
+}
+watch(() => moneys.money, (newVal, oldVal) => {
+    console.log(`New: ${newVal}, Old: ${oldVal}`)
+})
+//处理数字
+const _handleNumberKey = (num) => {
+    if (moneys.money.length == 10) {
+        return
+    }
+    console.log(num, 247)
+    let S = moneys.money;
+    //如果有小数点且小数点位数不小于2
+    if (S.indexOf('.') > -1 && S.substring(S.indexOf('.') + 1).length < 2)
+        moneys.money = S + num;
+    //没有小数点
+    if (!(S.indexOf('.') > -1)) {
+        //如果第一位是0，只能输入小数点
+        if (num == 0 && S.length == 0)
+            moneys.money = '0.';
+        else {
+            if (S.length && Number(S.charAt(0)) === 0) return;
+            moneys.money = S + num;
+        }
+    }
+}
+//处理小数点函数
+const _handleDecimalPoint = () => {
+    //如果包含小数点，直接返回
+    if (moneys.money.indexOf('.') > -1) return false;
+    //如果小数点是第一位，补0
+    if (!moneys.money.length) {
+        moneys.money = '0.';
+    } else {
+        //如果不是，添加一个小数点
+        moneys.money = moneys.money + '.';
+    }
+}
+//处理删除键
+const _handleDeleteKey = () => {
+    let S = moneys.money;
+    //如果没有输入，直接返回
+    if (!S.length) return false;
+    //否则删除最后一个
+    moneys.money = S.substring(0, S.length - 1);
+}
+</script>
+
+<style scoped lang="scss">
+.orderbox {
+    display: flex;
+    height: 100%;
+
+    .orderbox_left {
+        width: 70%;
+        height: 100%;
+        background: #fff;
+        border-radius: 10px;
+        padding: 16px 0;
+
+    }
+
+    .orderbox_right {
+        position: relative;
+        width: 30%;
+        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 {
+                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_input {
+            margin-top: 10px;
+        }
+
+        .orderbox_right_inputkeyboard {
+            margin-top: 20px;
+
+            .keyboard {
+                width: 100%;
+                background: #FFFFFF;
+
+                .key-row {
+                    display: flex;
+                    display: -webkit-flex;
+                    position: relative;
+                    height: 8vh;
+                    line-height: 8vh;
+                }
+            }
+
+            .keyboard .key-cell {
+                flex: 1;
+                -webkit-box-flex: 1;
+                font-size: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+        }
+
+        .orderbox_right_button {
+            position: absolute;
+            width: 90%;
+            left: 50%;
+            bottom: 16px;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            transform: translateX(-50%) !important;
+        }
+    }
+
+    .dialog_footer:nth-child(1) {
+        margin-top: 0;
+    }
+
+    .dialog_footer {
+        margin-top: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #ccc;
+        padding-bottom: 6px;
+
+        .dialog_footer_left {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            span:nth-child(1) {
+                font-size: 18px;
+                font-weight: 500;
+
+            }
+
+            span:nth-child(2) {
+                margin-top: 10px;
+                color: #333;
+            }
+        }
+
+        .dialog_footer_right {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-end;
+
+            span:nth-child(1) {
+                color: #fc3d3d;
+                font-size: 16px;
+
+            }
+
+            span:nth-child(2) {
+                margin-top: 10px;
+                font-size: 14px;
+            }
+        }
+    }
+
+    .recharge_footer {
+        display: flex;
+        justify-content: space-between;
+
+        .recharge_footer_item {
+            width: 50%;
+        }
+
+        .recharge_footer_itemright {
+            width: 50%;
+            position: relative;
+            bottom: 0;
+            left: 0;
+
+            .recharge_footer_itemright_input {
+                width: 100%;
+                background: #333333;
+                border-radius: 10px;
+                padding: 0 6px;
+                display: flex;
+                height: 60px;
+                justify-content: space-between;
+                align-items: center;
+
+                div:nth-child(1) {
+                    color: #56792e;
+                    font-size: 16px;
+                }
+
+                div:nth-child(2) {
+                    color: #88937c;
+                    font-size: 20px;
+                }
+            }
+
+            .key-zero-and-point {
+                display: flex;
+                height: 10vh;
+                justify-content: center;
+                align-items: center;
+                width: 75%;
+                font-size: 30px;
+
+                .zero {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 66.66%;
+                    font-size: 30px;
+                    text-align: center;
+                    height: 100%;
+                }
+
+                .point {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 33.33%;
+                    font-size: 30px;
+                    text-align: center;
+                    height: 100%;
+                }
+            }
+
+            .key-cell:active {
+                color: white;
+                background: black; //黑色
+                opacity: 0.1; //这里重要，就是通过这个透明度来设置
+            }
+
+            .a:active,
+            .key-confirm2:active {
+                color: white;
+                background: black; //黑色
+                opacity: 0.1; //这里重要，就是通过这个透明度来设置
+            }
+        }
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index 4590688..9d28865 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -11,7 +11,7 @@
         <div class="number">
           <el-text class="t">#2</el-text>
         </div>
-        <div class="select_user">
+        <div class="select_user" @click="membershow = true">
           <el-icon class="icon">
             <UserFilled />
           </el-icon>
@@ -127,6 +127,9 @@
   <remarkModal ref="remarkRef" />
   <!-- 修改取餐号 -->
   <takeFoodCode />
+  <el-drawer v-model="membershow" :with-header="true" size="90%" title="选择会员" >
+    <member></member>
+  </el-drawer>
 </template>
 
 <script setup>
@@ -137,9 +140,9 @@ import takeFoodCode from '@/components/takeFoodCode.vue'
 
 // 商品列表
 import goods from '@/views/home/components/goods.vue'
-
+import member from '@/views/home/components/member.vue'
+const membershow = ref(false)
 const remarkRef = ref(null)
-
 const allSelected = ref(false)
 </script>
 
diff --git a/src/views/member/index.vue b/src/views/member/index.vue
index 0843dd6..f7d3520 100644
--- a/src/views/member/index.vue
+++ b/src/views/member/index.vue
@@ -81,6 +81,18 @@
 
             </div>
         </div>
+        <!-- <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
+            <div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
+                <div class="dialog_footer_left">
+                    <span>微信用户</span>
+                    <span>2021-02-22 18:05:53</span>
+                </div>
+                <div class="dialog_footer_right">
+                    <span>19000</span>
+                    <span>26300</span>
+                </div>
+            </div>
+        </el-dialog> -->
         <el-dialog v-model="stored" title="余额明细" width="500" :before-close="handleClose">
             <div class="dialog_footer" v-for="(iten, index) in 6" :key="index">
                 <div class="dialog_footer_left">
@@ -92,12 +104,14 @@
                     <span>26300</span>
                 </div>
             </div>
-
         </el-dialog>
         <el-dialog v-model="recharge" title="会员充值" width="800" :before-close="handlerecharge">
             <div class="recharge_footer">
                 <div class="recharge_footer_item">
-                    qq
+                    <div class="recharge_footer_items" v-for="(item, index) in 6" :key="index">
+                        <div>充1000送300</div>
+                        <div>充1000.00到13000.00</div>
+                    </div>
                 </div>
                 <div class="recharge_footer_itemright">
                     <div class="recharge_footer_itemright_input">
@@ -158,7 +172,7 @@ const stored = ref(false)//储值余额
 const handleClose = () => {
     stored.value = !stored.value
 }
-const recharge = ref(true)//充值
+const recharge = ref(false)//充值
 
 const onSubmit = () => {
     if (firstinput.value) {
@@ -177,22 +191,22 @@ const tableData = [
     {
         date: '2016-05-03',
         name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
+        address: '1s',
     },
     {
         date: '2016-05-02',
         name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
+        address: '1s',
     },
     {
         date: '2016-05-04',
         name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
+        address: '1s',
     },
     {
         date: '2016-05-01',
         name: 'Tom',
-        address: 'No. 189, Grove St, Los Angeles',
+        address: '1s',
     },
 ]
 const moneys = reactive({
@@ -477,11 +491,38 @@ const _handleConfirmKey = () => {
         justify-content: space-between;
 
         .recharge_footer_item {
-            width: 50%;
+            width: 60%;
+            background: #f2f2f2;
+            border-radius: 10px;
+            padding: 20px;
+            display: flex;
+            justify-content: space-between;
+            flex-flow: wrap;
+
+            .recharge_footer_items {
+                background: #187ead;
+                padding: 16px 22px;
+                width: 45%;
+                height: fit-content;
+                text-align: center;
+                border-radius: 10px;
+
+                div:nth-child(1) {
+                    color: #fff;
+                    font-size: 20px;
+                }
+
+                div:nth-child(2) {
+                    color: #bad9e7;
+                    font-size: 14px;
+
+                }
+            }
         }
 
         .recharge_footer_itemright {
-            width: 50%;
+            padding-left: 20px;
+            width: 40%;
             position: relative;
             bottom: 0;
             left: 0;