From 318045292e8d5bc2840d3bbbeb3e9003b950aba6 Mon Sep 17 00:00:00 2001
From: maochaoying <925670706@qq.com>
Date: Tue, 15 Aug 2023 22:50:29 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=99=AE=E9=80=9A=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Setting/components/User.vue | 41 +++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/components/Setting/components/User.vue b/src/components/Setting/components/User.vue
index 875ac30..a5f0d0d 100644
--- a/src/components/Setting/components/User.vue
+++ b/src/components/Setting/components/User.vue
@@ -34,7 +34,9 @@
         <input
           :type="showUpdateUserPasswordVisible ? 'text' : 'password'"
           class="password_input"
+          id="passKey"
           v-model="updateUserNewPassword"
+          @focus="showpasswordKey"
         />
         <p class="tip">{{ updateUserInfoTip }}</p>
       </div>
@@ -106,17 +108,37 @@
       :hideUserModal="hideUserModal"
       :userWarnInfo="userWarnInfo"
     />
+    <div class="key_wrap" v-if="showkeyboard">
+      <SimpleKeyboard
+        :hideKeyBoard="hideKeyBoard"
+        @onChange="onChange"
+        :input="updateUserNewPassword"
+      />
+    </div>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import UserModal from 'cpns/dialogs/UserModal'
+import SimpleKeyboard from 'cpns/SimpleKeyboard'
 import Eye from '@/assets/img/login/eye.png'
 import Open from '@/assets/img/login/open.png'
 import { useUserStore, useWebSocketStore } from '@/store'
 import { chpasswdJSON } from '@/mock/command'
 
+const showkeyboard = ref(false)
+const hideKeyBoard = () => {
+  showkeyboard.value = false
+}
+
+const showpasswordKey = () => {
+  showkeyboard.value = true
+}
+const onChange = a => {
+  updateUserNewPassword.value = a
+}
+
 const userStore = useUserStore()
 const webSocketStore = useWebSocketStore()
 const userFormVisible = ref(false)
@@ -166,6 +188,16 @@ const returnToList = () => {
   changePasswordVisible.value = false
 }
 
+onMounted(() => {
+  document.addEventListener('click', e => {
+    let box = document.getElementById('keyboard')
+    let room = document.getElementById('passKey')
+    if (!box?.contains(e.target) && e.target != room) {
+      hideKeyBoard()
+    }
+  })
+})
+
 const returnList = () => {
   userFormVisible.value = false
 }
@@ -191,6 +223,13 @@ const hideUserModal = () => {
   height: 100%;
   padding: 32px 43px;
   background: #ffffff;
+  .key_wrap {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 230px;
+  }
   .title_wrap {
     margin-bottom: 19px;
     padding-left: 5px;