feat: 优化修改密码输入框

2025-02-13 23:32:57 +08:00 · 2025-02-13 23:32:57 +08:00 · 8352b02110
commit 8352b02110
parent 2d3147d65d
5 changed files with 91 additions and 108 deletions
--- a/src/components/pay-password-dialog.vue
+++ b/src/components/pay-password-dialog.vue
@ -10,34 +10,17 @@
        <!-- 关闭支付密码选项 -->
        <view class="switch-item" v-if="hasOldPassword">
          <text>关闭支付密码</text>
-          <u-switch
-            v-model="isClosePassword"
-            activeColor="#F32B2B"
-            @change="handleSwitchChange"
-          />
+          <u-switch v-model="isClosePassword" activeColor="#F32B2B" @change="handleSwitchChange" />
        </view>

        <!-- 旧密码 - 只在修改密码或关闭密码时显示 -->
        <view class="form-item" v-if="hasOldPassword">
          <text class="label">原密码：</text>
          <view class="input-wrapper">
-            <u-input
-              v-model="oldPassword"
-              type="text"
-              placeholder="请输入原密码"
-              :maxlength="6"
-              :border="false"
-              fontSize="28rpx"
-              :disabled="isClosePassword"
-              :password="!showOldPassword"
-            />
-            <u-icon
-              :name="showOldPassword ? 'eye-fill' : 'eye-off'"
-              size="22"
-              color="#999"
-              v-if="!isClosePassword"
-              @click="showOldPassword = !showOldPassword"
-            />
+            <u-input v-model="oldPassword" type="number" :border="false" placeholder="请输入原密码" :maxlength="6"
+              :disabled="isClosePassword" :password="!showOldPassword" @input="handleInput($event, 'oldPassword')" />
+            <u-icon :name="showOldPassword ? 'eye-off' : 'eye-fill'" size="20" color="#999"
+              v-if="hasOldPassword && !isClosePassword" @click="showOldPassword = !showOldPassword" />
          </view>
        </view>

@ -47,22 +30,10 @@
          <view class="form-item">
            <text class="label">新密码：</text>
            <view class="input-wrapper">
-              <u-input
-                v-model="newPassword"
-                type="text"
-                placeholder="请输入6位数字密码"
-                maxlength="6"
-                :border="false"
-                fontSize="28rpx"
-                :password="!showNewPassword"
-                @input="validateInput"
-              />
-              <u-icon
-                :name="showNewPassword ? 'eye-fill' : 'eye-off'"
-                size="22"
-                color="#999"
-                @click="showNewPassword = !showNewPassword"
-              />
+              <u-input v-model="newPassword" type="number" placeholder="请输入6位数字密码" maxlength="6" :border="false"
+                :password="!showNewPassword" @input="handleInput($event, 'newPassword')" />
+              <u-icon :name="showNewPassword ? 'eye-off' : 'eye-fill'" size="20" color="#999"
+                @click="showNewPassword = !showNewPassword" />
            </view>
          </view>

@ -70,33 +41,18 @@
          <view class="form-item">
            <text class="label">确认密码：</text>
            <view class="input-wrapper">
-              <u-input
-                v-model="confirmPassword"
-                type="text"
-                placeholder="请再次输入密码"
-                maxlength="6"
-                :border="false"
-                fontSize="28rpx"
-                :password="!showConfirmPassword"
-                @input="validateInput"
-              />
-              <u-icon
-                :name="showConfirmPassword ? 'eye-fill' : 'eye-off'"
-                size="22"
-                color="#999"
-                @click="showConfirmPassword = !showConfirmPassword"
-              />
+              <u-input v-model="confirmPassword" type="number" :border="false" placeholder="请再次输入密码" maxlength="6"
+                :password="!showConfirmPassword" @input="handleInput($event, 'confirmPassword')" />
+              <u-icon :name="showConfirmPassword ? 'eye-off' : 'eye-fill'" size="20" color="#999"
+                @click="showConfirmPassword = !showConfirmPassword" />
            </view>
          </view>
        </template>
      </view>

      <view class="footer">
-        <button 
-          :class="{'primary-button': isFormValid, 'disabled-button': !isFormValid}" 
-          :disabled="!isFormValid"
-          @click.stop='handleConfirm'
-        >
+        <button :class="{ 'primary-button': isFormValid, 'disabled-button': !isFormValid }" :disabled="!isFormValid"
+          @click.stop='handleConfirm'>
          完成
        </button>
      </view>
@ -111,11 +67,18 @@ import { useUserStore } from '@/store'
 const userStore = useUserStore()
 const popup = ref<any>(null)

-// 密码显示状态
+// 密码显示状态 - 默认都是不可见的
 const showOldPassword = ref(false)
 const showNewPassword = ref(false)
 const showConfirmPassword = ref(false)

+// 重置密码可见性
+const resetPasswordVisibility = () => {
+  showOldPassword.value = false
+  showNewPassword.value = false
+  showConfirmPassword.value = false
+}
+
 // 表单数据
 const oldPassword = ref('')
 const newPassword = ref('')
@ -152,31 +115,28 @@ const isFormValid = computed(() => {
  }
 })

-// 输入验证（只允许数字）
-const validateInput = (value: string) => {
-  const numericValue = value.replace(/\D/g, '')
-  if (value !== numericValue) {
+// 处理输入，限制只能输入数字且最多6位
+const handleInput = (value: string, field: 'oldPassword' | 'newPassword' | 'confirmPassword') => {
+  // 只保留数字且最多6位
+  const numericValue = value?.replace(/[^\d]/g, '').slice(0, 6)
+
+  // 更新对应字段的值
+  switch (field) {
+    case 'oldPassword':
+      oldPassword.value = numericValue
+      break
+    case 'newPassword':
      newPassword.value = numericValue
+      break
+    case 'confirmPassword':
      confirmPassword.value = numericValue
+      break
  }
 }

 // 生成随机6位数字
 const generateRandomPassword = () => {
-  return Math.floor(100000 + Math.random() * 900000).toString()
-}
-
-// 处理开关切换
-const handleSwitchChange = (value: boolean) => {
-  isClosePassword.value = value
-  // 切换时重置密码输入
-  if (value) {
-    newPassword.value = ''
-    confirmPassword.value = ''
-    oldPassword.value = generateRandomPassword() // 生成随机6位数字
-  } else {
-    oldPassword.value = ''
-  }
+  return Math.floor(Math.random() * 1000000).toString().padStart(6, '0')
 }

 // 重置表单更新
@ -184,33 +144,24 @@ const resetForm = () => {
  oldPassword.value = ''
  newPassword.value = ''
  confirmPassword.value = ''
-  showOldPassword.value = false
-  showNewPassword.value = false
-  showConfirmPassword.value = false
+  resetPasswordVisibility()
  isClosePassword.value = false
 }

 // 显示弹框
 const show = async () => {
-  console.log('show pay password dialog')
  hasOldPassword.value = userStore.userInfo.paywithpwd === 1
  isClosePassword.value = false
+  resetPasswordVisibility()
  popup.value?.open('center')
 }

 // 隐藏弹框
 const hide = () => {
-  console.log('hide pay password dialog')
  popup.value?.close()
  resetForm()
 }

-// 取消
-const handleCancel = () => {
-  hide()
-  resetForm()
-}
-
 // 确认按钮处理更新
 const handleConfirm = async () => {
  try {
@ -235,6 +186,20 @@ const handleConfirm = async () => {
  }
 }

+// 处理开关切换
+const handleSwitchChange = (value: boolean) => {
+  isClosePassword.value = value
+  // 切换时重置密码输入
+  if (value) {
+    newPassword.value = ''
+    confirmPassword.value = ''
+    oldPassword.value = generateRandomPassword() // 生成随机6位数字
+    resetPasswordVisibility()
+  } else {
+    oldPassword.value = ''
+  }
+}
+
 // 暴露方法给父组件使用
 defineExpose({
  show,
@ -295,14 +260,24 @@ defineExpose({
        padding: 20rpx;
        height: 50rpx;

+        :deep(.u-border) {
+          border-style: hidden;
+        }
+
        :deep(.u-input) {
          flex: 1;
          height: 100%;
+          background-color: transparent;
+          border: none;
+          font-size: 10rpx;
        }

        :deep(.u-input__input) {
          height: 100%;
          line-height: 60rpx;
+          font-size: 10rpx;
+          border: none;
+          padding: 0;
        }
      }
    }
--- a/src/manifest.json
+++ b/src/manifest.json
@ -25,7 +25,7 @@
    "usingComponents": true,
    "plugins": {
      "sqb-pay": {
-        "version": "1.3.0",
+        "version": "1.3.1",
        "provider": "wx55540b288c5ce319"
      }
    }
--- a/src/pages.json
+++ b/src/pages.json
@ -4,7 +4,8 @@
      "^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
      "^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
-      "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue"
+      "^(?!z-paging-refresh|z-paging-load-more)z-paging(.*)": "z-paging/components/z-paging$1/z-paging$1.vue",
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
    }
  },
  "pages": [
--- a/src/pages/mine/index.vue
+++ b/src/pages/mine/index.vue
@ -156,7 +156,6 @@ onShow(async () => {
    const { cardurl } = await getCardLink();
    cardLink.value = cardurl;
    await userStore.getProfile();
-    await userStore.getPayPasswordStatus();
  }
 });

--- a/src/static/styles/common.scss
+++ b/src/static/styles/common.scss
@ -76,9 +76,17 @@ page {
  justify-content: center;
  min-width: 80%;
  color: #FFFFFF;
+  border: none !important;
+  outline: none;
+    &::after {
+      display: none;
+    }
 }

 .disabled-button {
  @extend .primary-button;
  background: #cccccc;
+  &::after {
+    display: none;
+  }
 }