feat: 优化修改密码输入框

src/components/pay-password-dialog.vue

@@ -5,39 +5,22 @@
         <text class="title">{{ getDialogTitle }}</text>
         <u-icon name="close" size="20" color="#999" @click="hide" />
       </view>
-      
+
       <view class="form-container">
         <!-- 关闭支付密码选项 -->
         <view class="switch-item" v-if="hasOldPassword">
           <text>关闭支付密码</text>
-          <u-switch
+          <u-switch v-model="isClosePassword" activeColor="#F32B2B" @change="handleSwitchChange" />
-            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
+            <u-input v-model="oldPassword" type="number" :border="false" placeholder="请输入原密码" :maxlength="6"
-              v-model="oldPassword"
+              :disabled="isClosePassword" :password="!showOldPassword" @input="handleInput($event, 'oldPassword')" />
-              type="text"
+            <u-icon :name="showOldPassword ? 'eye-off' : 'eye-fill'" size="20" color="#999"
-              placeholder="请输入原密码"
+              v-if="hasOldPassword && !isClosePassword" @click="showOldPassword = !showOldPassword" />
-              :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"
-            />
           </view>
         </view>
 
@@ -47,22 +30,10 @@
           <view class="form-item">
             <text class="label">新密码：</text>
             <view class="input-wrapper">
-              <u-input
+              <u-input v-model="newPassword" type="number" placeholder="请输入6位数字密码" maxlength="6" :border="false"
-                v-model="newPassword"
+                :password="!showNewPassword" @input="handleInput($event, 'newPassword')" />
-                type="text"
+              <u-icon :name="showNewPassword ? 'eye-off' : 'eye-fill'" size="20" color="#999"
-                placeholder="请输入6位数字密码"
+                @click="showNewPassword = !showNewPassword" />
-                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"
-              />
             </view>
           </view>
 
@@ -70,36 +41,21 @@
           <view class="form-item">
             <text class="label">确认密码：</text>
             <view class="input-wrapper">
-              <u-input
+              <u-input v-model="confirmPassword" type="number" :border="false" placeholder="请再次输入密码" maxlength="6"
-                v-model="confirmPassword"
+                :password="!showConfirmPassword" @input="handleInput($event, 'confirmPassword')" />
-                type="text"
+              <u-icon :name="showConfirmPassword ? 'eye-off' : 'eye-fill'" size="20" color="#999"
-                placeholder="请再次输入密码"
+                @click="showConfirmPassword = !showConfirmPassword" />
-                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"
-              />
             </view>
           </view>
         </template>
       </view>
 
       <view class="footer">
-        <button 
+        <button :class="{ 'primary-button': isFormValid, 'disabled-button': !isFormValid }" :disabled="!isFormValid"
-          :class="{'primary-button': isFormValid, 'disabled-button': !isFormValid}" 
+          @click.stop='handleConfirm'>
-          :disabled="!isFormValid"
-          @click.stop='handleConfirm'
-        >
           完成
         </button>
-      </view>   
+      </view>
     </view>
   </uni-popup>
 </template>
@@ -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(() => {
   }
 })
 
-// 输入验证（只允许数字）
+// 处理输入，限制只能输入数字且最多6位
-const validateInput = (value: string) => {
+const handleInput = (value: string, field: 'oldPassword' | 'newPassword' | 'confirmPassword') => {
-  const numericValue = value.replace(/\D/g, '')
+  // 只保留数字且最多6位
-  if (value !== numericValue) {
+  const numericValue = value?.replace(/[^\d]/g, '').slice(0, 6)
-    newPassword.value = numericValue
+
-    confirmPassword.value = numericValue
+  // 更新对应字段的值
+  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()
+  return Math.floor(Math.random() * 1000000).toString().padStart(6, '0')
-}
-
-// 处理开关切换
-const handleSwitchChange = (value: boolean) => {
-  isClosePassword.value = value
-  // 切换时重置密码输入
-  if (value) {
-    newPassword.value = ''
-    confirmPassword.value = ''
-    oldPassword.value = generateRandomPassword() // 生成随机6位数字
-  } else {
-    oldPassword.value = ''
-  }
 }
 
 // 重置表单更新
@@ -184,33 +144,24 @@ const resetForm = () => {
   oldPassword.value = ''
   newPassword.value = ''
   confirmPassword.value = ''
-  showOldPassword.value = false
+  resetPasswordVisibility()
-  showNewPassword.value = false
-  showConfirmPassword.value = false
   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,
@@ -249,20 +214,20 @@ defineExpose({
   background-color: #fff;
   border-radius: 24rpx;
   position: relative;
-  
+
   .dialog-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 40rpx;
-    
+
     .title {
       font-size: 36rpx;
       font-weight: bold;
       color: #333;
     }
   }
-  
+
   .form-container {
     .switch-item {
       display: flex;
@@ -270,23 +235,23 @@ defineExpose({
       align-items: center;
       padding: 20rpx 0;
       margin-bottom: 20rpx;
-      
+
       text {
         font-size: 28rpx;
         color: #333;
       }
     }
-    
+
     .form-item {
       margin-bottom: 30rpx;
-      
+
       .label {
         font-size: 30rpx;
         color: #333;
         margin-bottom: 16rpx;
         display: block;
       }
-      
+
       .input-wrapper {
         display: flex;
         align-items: center;
@@ -294,22 +259,32 @@ defineExpose({
         border-radius: 12rpx;
         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) {    
+        :deep(.u-input__input) {
           height: 100%;
           line-height: 60rpx;
+          font-size: 10rpx;
+          border: none;
+          padding: 0;
         }
       }
     }
   }
-  
+
   .footer {
     padding: 0 30rpx;
   }
 }
-</style> 
+</style>

src/manifest.json

@@ -25,7 +25,7 @@
     "usingComponents": true,
     "plugins": {
       "sqb-pay": {
-        "version": "1.3.0",
+        "version": "1.3.1",
         "provider": "wx55540b288c5ce319"
       }
     }

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": [

src/pages/mine/index.vue

@@ -156,7 +156,6 @@ onShow(async () => {
     const { cardurl } = await getCardLink();
     cardLink.value = cardurl;
     await userStore.getProfile();
-    await userStore.getPayPasswordStatus();
   }
 });
 

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;
+  }
 }