fix(password): change password

src/view/users-password-edit.vue

@@ -6,7 +6,8 @@
     </el-form-item>
     <el-form-item label="验证码" prop="msgAuthCode" required>
       <el-input v-model="data.msgAuthCode" style="width: 190px" :maxlength="500" placeholder="请输入" />
-      <el-button :disabled="isDisableMsg" type="danger" style="margin-left: 10px" @click="getMsgCode">获取验证码</el-button>
+      <el-button :loading="checkCodeBtn.loading" :disabled="checkCodeBtn.disabled" type="danger"
+        style="margin-left: 10px" @click="getCheckCode"> {{ checkCodeBtn.text }}</el-button>
     </el-form-item>
     <el-form-item label="密码" prop="password" required>
       <el-input autocomplete="off" readonly onfocus="this.removeAttribute('readonly');" v-model="data.password"
@@ -113,6 +114,14 @@ const data = ref<UserType>({
 });
 const isDisableMsg = ref(false)
 
+let checkCodeBtn = reactive<any>({
+  text: '获取验证码',
+  loading: false,
+  disabled: false,
+  duration: 60,
+  timer: null
+})
+
 onMounted(async () => {
   const data = await getOrgListFetch({
     pageNum: 1,
@@ -138,21 +147,37 @@ watchEffect(() => {
     console.log('data', data)
   }
 })
-
-const getMsgCode = async () => {
-
+const getCheckCode = async () => {
+  // 倒计时期间按钮不能单击
   const phoneNum = data.value.userName
-  console.log('getMsgCode',phoneNum)
+  console.log('getMsgCode', phoneNum)
   const res = await getMsgAuthCode('+86', phoneNum)
-  console.log('res', res)
-  let timer = null
   if (res.success) {
-    timer && clearTimeout(timer)
-    isDisableMsg.value = true
-    timer = setTimeout(() => {
-      isDisableMsg.value = false
-    }, 60 * 1000)
+    ElMessage.success(res.data);
+  }
+  if (checkCodeBtn.duration !== 60) {
+    checkCodeBtn.disabled = true
   }
+  // 清除掉定时器
+  checkCodeBtn.timer && clearInterval(checkCodeBtn.timer)
+  // 开启定时器
+  checkCodeBtn.timer = setInterval(() => {
+    const tmp = checkCodeBtn.duration--
+    checkCodeBtn.text = `${tmp}秒`
+    if (tmp <= 0) {
+      // 清除掉定时器
+      clearInterval(checkCodeBtn.timer)
+      checkCodeBtn.duration = 60
+      checkCodeBtn.text = '重新获取'
+      // 设置按钮可以单击
+      checkCodeBtn.disabled = false
+    }
+    console.info(checkCodeBtn.duration)
+  }, 1000)
+}
+
+const getMsgCode = async () => {
+
 }
 
 // const handleSelect = (orgId: number) => {