beta

2026-02-10 09:51:18 +08:00
commit 634e0b9456
150 changed files with 18730 additions and 0 deletions
@@ -0,0 +1,118 @@
+<template>
+    <a-modal v-model:visible="visible"           
+        @ok="handleOk"
+        class="my-modal"
+        :footer="null"
+        :centered="true" :destroyOnClose="true">
+        <template #title>
+            <div class="title">
+                <span class="title-text">密码验证</span>
+            </div>
+        </template>
+
+        <div class="content">
+            <a-row class="code" type="flex" justify="center" align="center">
+                <a-col>
+                    <span v-for="item in value" :key="item">
+                        <b v-if="item != ' '">*</b>
+                    </span>
+                </a-col>
+            </a-row>
+            <input-num 
+				class="input-num" 
+				:type="2" 
+				ref="inputNum" 
+				@enter="enter" 
+				@input="input" 
+				@backspace="backspace">
+			</input-num>
+        </div>
+
+    </a-modal>
+
+</template>
+
+<script>
+import { trim } from 'lodash';
+import InputNum from './InputNum.vue';
+export default {
+    components: {
+        InputNum
+    },
+
+    data() {
+        return {
+            visible: false,
+            value: [" ", " ", " ", " "]
+        }
+    },
+    methods: {
+        show() {
+            this.visible = true
+            this.value = [" ", " ", " ", " "]
+        },
+        close() {
+            this.visible = false
+        },
+        handleOk() {
+            this.visible = false
+        },
+        backspace() {
+            let cur = this.value.findLastIndex(el => el !== " ")
+            if (cur >= 0) {
+                this.value[cur] = " "
+            }
+        },
+        input(val) {
+            let cur = this.value.findIndex(el => el === " ")
+            if (cur >= 0) {
+                this.value[cur] = val
+            }
+        },
+        enter() { 
+            let value = this.value.toString()
+            value = value.replace(/,/g, "")
+            if (trim(value).length == 4) {
+                this.$emit("submit", value)
+            }
+        }
+    }
+}
+</script>
+
+<style scoped>
+
+.my-modal .title{
+    text-align: center;
+    font-size: 30px;
+    color: #fff;
+}
+
+.input-num :deep(.number){
+    background-color: #fff;
+    color: #5A5A5A;
+    font-weight: 700;
+    border-radius: 10px;
+}
+
+.code{
+    width: 100%;
+    margin-bottom: 20px;
+}
+.code .ant-col{
+    display: flex;
+    justify-content: space-around;
+    flex: 0 0 290px;
+}
+.code span{
+    text-align: center;
+    width: 56px;
+    height: 52px;
+    background-color: #fff;
+    border-radius: 10px;
+    color: #5A5A5A;
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 52px;
+}
+</style>