From 2ac2a3209a6ea68d6b4fef470639f1208098deb4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=AD=8F=E5=95=BE?= <1144797966@qq.com>
Date: Tue, 27 Feb 2024 09:02:37 +0800
Subject: [PATCH] 1

---
 src/views/member/index.vue | 371 +++++++++++++++++++++++++++++++++++--
 1 file changed, 358 insertions(+), 13 deletions(-)

diff --git a/src/views/member/index.vue b/src/views/member/index.vue
index 1d691ee..0843dd6 100644
--- a/src/views/member/index.vue
+++ b/src/views/member/index.vue
@@ -52,7 +52,12 @@
                         </el-icon>
                         <span class="orderbox_right_top_item_onespan">储值余额</span>
                     </div>
-                    <div class="orderbox_right_top_item_tow">0</div>
+                    <div class="orderbox_right_top_item_tow">
+                        <span>0</span>
+                        <el-icon size="10">
+                            <ArrowRight />
+                        </el-icon>
+                    </div>
                 </div>
                 <div class="orderbox_right_top_item">
                     <div class="orderbox_right_top_item_one">
@@ -61,39 +66,100 @@
                         </el-icon>
                         <span class="orderbox_right_top_item_onespan">优惠券</span>
                     </div>
-                    <div class="orderbox_right_top_item_tow">0</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_button">
-                <el-button style="width: 100%;" type="primary" @click="onSubmit">点单</el-button>
+                <el-button style="width: 100%;" type="primary" @click="recharge = true">会员充值</el-button>
                 <el-button style="width: 100%; margin-top: 10px; margin-left:0px;" type="danger"
                     @click="onSubmit">取消</el-button>
 
             </div>
         </div>
-        <el-dialog v-model="stored" title="Tips" width="500" :before-close="handleClose">
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button type="primary" @click="stored = false">
-                        Confirm
-                    </el-button>
+        <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>
-            </template>
+                <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 class='keyboard' @click.stop='_handleKeyPress'>
+                        <div class='key-row'>
+                            <div class='key-cell cell_b' data-num='7'>7</div>
+                            <div class='key-cell cell_b' data-num='8'>8</div>
+                            <div class='key-cell cell_b' data-num='9'>9</div>
+                            <div class='key-cell cell_b' data-num='-1'></div>
+                        </div>
+                        <div class='key-row'>
+                            <div class='key-cell cell_b' data-num='4'>4</div>
+                            <div class='key-cell cell_b' data-num='5'>5</div>
+                            <div class='key-cell cell_b' data-num='6'>6</div>
+                            <div class='key-cell cell_b' data-num='-1'></div>
+                        </div>
+                        <div class='key-row'>
+                            <div class='key-cell cell_b' data-num='1'>1</div>
+                            <div class='key-cell cell_b' data-num='2'>2</div>
+                            <div class='key-cell cell_b' data-num='3'>3</div>
+                            <div class='key-cell cell_b' data-num='-1'></div>
+                        </div>
+                        <div class="key-zero-and-point">
+                            <div class="a cell_b zero" data-num='0'>0</div>
+                            <div class="a cell_b point" data-num='.'>.</div>
+                        </div>
+
+                        <div @touchstart="touchstart" @touchend="touchend" data-num='D' class="key-confirm2">
+                            <text data-num='D'>C</text>
+                        </div>
+
+                        <div class='key-confirm' style="background:green">
+                            <div data-num='S'>
+                                <div data-num='S' class="title">确认</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+            </div>
+
         </el-dialog>
     </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, reactive, watch } from 'vue'
 import { useRoute } from "vue-router"
 import { ElMessage } from 'element-plus'
 const route = useRoute()
 
 const firstinput = ref('')//搜索输入框
-const stored = ref(true)//储值余额
+const stored = ref(false)//储值余额
 const handleClose = () => {
     stored.value = !stored.value
 }
+const recharge = ref(true)//充值
+
 const onSubmit = () => {
     if (firstinput.value) {
 
@@ -104,6 +170,9 @@ const onSubmit = () => {
         })
     }
 }
+const handlerecharge = () => {
+    recharge.value = !recharge.value
+}
 const tableData = [
     {
         date: '2016-05-03',
@@ -126,6 +195,103 @@ const tableData = [
         address: 'No. 189, Grove St, Los Angeles',
     },
 ]
+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;
+        //清空键
+        case 'C':
+            _handleClearKey();
+            break;
+        //确认键
+        case 'S':
+            _handleConfirmKey();
+            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
+    }
+    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);
+}
+
+//处理清空键
+const _handleClearKey = () => {
+    moneys.money = '';
+}
+const _handleConfirmKey = () => {
+    let S = moneys.money;
+    //未输入
+    if (!S.length || S == 0) {
+        ElMessage({
+            message: '请输入正确的数值',
+            type: 'warning',
+        })
+        return false;
+    }
+    //将 8. 这种转换成 8.00
+    if (S.indexOf('.') > -1 && S.indexOf('.') == (S.length - 1))
+        S = Number(S.substring(0, S.length - 1)).toFixed(2);
+    //保留两位
+    S = Number(S).toFixed(2);
+    this.$emit('confirmEvent', S);    //提交参数
+}
 </script>
 
 <style scoped lang="scss">
@@ -250,7 +416,6 @@ const tableData = [
             }
         }
 
-
         .orderbox_right_button {
             position: absolute;
             width: 90%;
@@ -258,8 +423,188 @@ const tableData = [
             bottom: 16px;
             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;
+                }
+            }
+
+            .keyboard {
+                width: 100%;
+                height: 40vh;
+                background: #FFFFFF;
+
+                .key-row {
+                    display: flex;
+                    display: -webkit-flex;
+                    position: relative;
+                    height: 10vh;
+                    line-height: 10vh;
 
 
+                }
+            }
+
+
+            .keyboard .key-cell {
+                flex: 1;
+                -webkit-box-flex: 1;
+                font-size: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .keyboard .key-confirm {
+                position: absolute;
+                text-align: center;
+                height: 30vh;
+                width: 25%;
+                line-height: 30vh;
+                color: #FFFFFF;
+                z-index: 5;
+                right: 0;
+                bottom: 0;
+
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .keyboard .key-confirm2 {
+                position: absolute;
+                height: 10vh;
+                width: 25%;
+                line-height: 10vh;
+                z-index: 9999;
+                right: 0;
+                top: 60px;
+                font-size: 30px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+            }
+
+            .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