af-mobile-client-vue3 1.3.16 → 1.3.18

package/src/views/user/my/comm/ModifyPassword.vue

@@ -1,346 +1,346 @@
-<script setup lang="ts">
-import { modifyPassword } from '@af-mobile-client-vue3/services/api/user'
-import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
-import { showDialog, showToast, Button as vanButton, Field as vanField, Form as vanForm, Icon as vanIcon, Popup as vanPopup } from 'vant'
-import { reactive, ref, watch } from 'vue'
-import { useRouter } from 'vue-router'
-
-// 定义 props 和 emits
-const props = defineProps<{
-  visible: boolean
-}>()
-
-const emit = defineEmits<{
-  (event: 'update:visible', value: boolean): void
-}>()
-
-const router = useRouter()
-const userStore = useUserStore()
-
-// 表单引用
-const formRef = ref()
-
-// 表单数据
-const formData = reactive({
-  oldPassword: '',
-  newPassword: '',
-  confirmPassword: '',
-})
-
-// 密码显示状态
-const showOldPassword = ref(false)
-const showNewPassword = ref(false)
-const showConfirmPassword = ref(false)
-
-// 加载状态
-const loading = ref(false)
-
-// 密码强度验证正则
-const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
-
-// 验证密码强度
-function validatePasswordStrength(password: string): boolean {
-  return strongPasswordRegex.test(password)
-}
-
-// 验证确认密码
-function validateConfirmPassword(value: string): boolean {
-  return value === formData.newPassword
-}
-
-// 表单验证规则
-const rules = {
-  oldPassword: [
-    { required: true, message: '请输入旧密码' },
-  ],
-  newPassword: [
-    { required: true, message: '请输入新密码' },
-    {
-      validator: (value: string) => {
-        if (value && !validatePasswordStrength(value)) {
-          return '新密码必须包含大小写字母、数字和特殊字符，且长度不少于8位'
-        }
-        return true
-      },
-    },
-  ],
-  confirmPassword: [
-    { required: true, message: '请再次输入新密码' },
-    {
-      validator: (value: string) => {
-        if (value && !validateConfirmPassword(value)) {
-          return '两次密码输入不一致'
-        }
-        return true
-      },
-    },
-  ],
-}
-
-// 提交表单
-async function handleSubmit() {
-  try {
-    loading.value = true
-
-    // 验证表单
-    await formRef.value?.validate()
-
-    // 调用修改密码API
-    const result = await handleModifyPassword({ data: {
-      ename: userStore.getUserInfo().username,
-      password: formData.oldPassword,
-      newpassword: formData.newPassword,
-      affirmpassword: formData.confirmPassword,
-    } })
-    if (result.success) {
-      showDialog({
-        title: '成功',
-        message: '修改密码成功，请重新登录',
-        confirmButtonText: '立即重新登录',
-      }).then(() => {
-        // 退出登录
-        userStore.logout()
-        // 跳转到登录页
-        router.push('/login')
-      })
-    }
-    else {
-      showToast(result.message || '修改密码失败')
-    }
-  }
-  catch (error) {
-    console.error('修改密码失败:', error)
-    showToast('修改密码失败，请检查输入信息')
-  }
-  finally {
-    loading.value = false
-  }
-}
-
-// 关闭弹窗
-function closeModal() {
-  emit('update:visible', false)
-}
-
-// 修改密码API调用
-async function handleModifyPassword(data: any) {
-  try {
-    const res = await modifyPassword(data)
-    if (res && res === 'true') {
-      return {
-        success: true,
-        message: '修改成功',
-      }
-    }
-    else {
-      return {
-        success: false,
-        message: '修改密码失败,请检查原始密码是否正确！',
-      }
-    }
-  }
-  catch (error: any) {
-    return {
-      success: false,
-      message: error?.message || '修改密码失败',
-    }
-  }
-}
-
-// 监听visible变化，重置表单
-watch(() => props.visible, (newVal) => {
-  if (!newVal) {
-    // 弹窗关闭时重置表单
-    formData.oldPassword = ''
-    formData.newPassword = ''
-    formData.confirmPassword = ''
-    showOldPassword.value = false
-    showNewPassword.value = false
-    showConfirmPassword.value = false
-  }
-})
-</script>
-
-<template>
-  <van-popup
-    :show="props.visible"
-    position="center"
-    :close-on-click-overlay="false"
-    round
-    class="modify-password-popup"
-    @update:show="emit('update:visible', $event)"
-  >
-    <div class="popup-content">
-      <!-- 标题 -->
-      <div class="popup-header">
-        <h3 class="popup-title">
-          修改密码
-        </h3>
-        <van-icon name="cross" class="close-icon" @click="closeModal" />
-      </div>
-
-      <!-- 表单 -->
-      <van-form ref="formRef" class="password-form" @submit="handleSubmit">
-        <!-- 旧密码 -->
-        <van-field
-          v-model="formData.oldPassword"
-          name="oldPassword"
-          label="旧密码"
-          placeholder="请输入旧密码"
-          :type="showOldPassword ? 'text' : 'password'"
-          :rules="rules.oldPassword"
-          @click-right-icon="showOldPassword = !showOldPassword"
-        >
-          <template #right-icon>
-            <van-icon
-              :name="showOldPassword ? 'eye-o' : 'closed-eye'"
-              color="#666"
-            />
-          </template>
-        </van-field>
-
-        <!-- 新密码 -->
-        <van-field
-          v-model="formData.newPassword"
-          name="newPassword"
-          label="新密码"
-          placeholder="请输入新密码"
-          :type="showNewPassword ? 'text' : 'password'"
-          :rules="rules.newPassword"
-          @click-right-icon="showNewPassword = !showNewPassword"
-        >
-          <template #right-icon>
-            <van-icon
-              :name="showNewPassword ? 'eye-o' : 'closed-eye'"
-              color="#666"
-            />
-          </template>
-        </van-field>
-
-        <!-- 确认新密码 -->
-        <van-field
-          v-model="formData.confirmPassword"
-          name="confirmPassword"
-          label="确认新密码"
-          placeholder="请再次输入新密码"
-          :type="showConfirmPassword ? 'text' : 'password'"
-          :rules="rules.confirmPassword"
-          @click-right-icon="showConfirmPassword = !showConfirmPassword"
-        >
-          <template #right-icon>
-            <van-icon
-              :name="showConfirmPassword ? 'eye-o' : 'closed-eye'"
-              color="#666"
-            />
-          </template>
-        </van-field>
-
-        <!-- 按钮组 -->
-        <div class="form-buttons">
-          <van-button
-            plain
-            type="default"
-            size="large"
-            class="cancel-btn"
-            @click="closeModal"
-          >
-            取消
-          </van-button>
-          <van-button
-            type="primary"
-            size="large"
-            native-type="submit"
-            :loading="loading"
-            class="submit-btn"
-          >
-            确认修改
-          </van-button>
-        </div>
-      </van-form>
-    </div>
-  </van-popup>
-</template>
-
-<style scoped lang="less">
-.modify-password-popup {
-  width: 90%;
-  max-width: 400px;
-
-  .popup-content {
-    padding: 20px;
-
-    .popup-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      margin-bottom: 20px;
-
-      .popup-title {
-        font-size: 18px;
-        font-weight: 600;
-        color: #333;
-        margin: 0;
-      }
-
-      .close-icon {
-        font-size: 20px;
-        color: #999;
-        cursor: pointer;
-        padding: 4px;
-
-        &:hover {
-          color: #666;
-        }
-      }
-    }
-
-    .password-form {
-      .form-buttons {
-        display: flex;
-        gap: 12px;
-        margin-top: 24px;
-
-        .cancel-btn,
-        .submit-btn {
-          flex: 1;
-          height: 44px;
-          border-radius: 8px;
-          font-size: 16px;
-        }
-
-        .cancel-btn {
-          border-color: #ddd;
-          color: #666;
-        }
-
-        .submit-btn {
-          background-color: #3b82f6;
-          border-color: #3b82f6;
-        }
-      }
-    }
-  }
-}
-
-// 覆盖vant默认样式
-:deep(.van-field) {
-  padding: 12px 0;
-
-  .van-field__label {
-    color: #333;
-    font-weight: 500;
-  }
-
-  .van-field__control {
-    color: #333;
-  }
-
-  .van-field__right-icon {
-    padding: 4px;
-  }
-}
-
-:deep(.van-popup) {
-  border-radius: 12px;
-}
-</style>
+<script setup lang="ts">
+import { modifyPassword } from '@af-mobile-client-vue3/services/api/user'
+import { useUserStore } from '@af-mobile-client-vue3/stores/modules/user'
+import { showDialog, showToast, Button as vanButton, Field as vanField, Form as vanForm, Icon as vanIcon, Popup as vanPopup } from 'vant'
+import { reactive, ref, watch } from 'vue'
+import { useRouter } from 'vue-router'
+
+// 定义 props 和 emits
+const props = defineProps<{
+  visible: boolean
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:visible', value: boolean): void
+}>()
+
+const router = useRouter()
+const userStore = useUserStore()
+
+// 表单引用
+const formRef = ref()
+
+// 表单数据
+const formData = reactive({
+  oldPassword: '',
+  newPassword: '',
+  confirmPassword: '',
+})
+
+// 密码显示状态
+const showOldPassword = ref(false)
+const showNewPassword = ref(false)
+const showConfirmPassword = ref(false)
+
+// 加载状态
+const loading = ref(false)
+
+// 密码强度验证正则
+const strongPasswordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/
+
+// 验证密码强度
+function validatePasswordStrength(password: string): boolean {
+  return strongPasswordRegex.test(password)
+}
+
+// 验证确认密码
+function validateConfirmPassword(value: string): boolean {
+  return value === formData.newPassword
+}
+
+// 表单验证规则
+const rules = {
+  oldPassword: [
+    { required: true, message: '请输入旧密码' },
+  ],
+  newPassword: [
+    { required: true, message: '请输入新密码' },
+    {
+      validator: (value: string) => {
+        if (value && !validatePasswordStrength(value)) {
+          return '新密码必须包含大小写字母、数字和特殊字符，且长度不少于8位'
+        }
+        return true
+      },
+    },
+  ],
+  confirmPassword: [
+    { required: true, message: '请再次输入新密码' },
+    {
+      validator: (value: string) => {
+        if (value && !validateConfirmPassword(value)) {
+          return '两次密码输入不一致'
+        }
+        return true
+      },
+    },
+  ],
+}
+
+// 提交表单
+async function handleSubmit() {
+  try {
+    loading.value = true
+
+    // 验证表单
+    await formRef.value?.validate()
+
+    // 调用修改密码API
+    const result = await handleModifyPassword({ data: {
+      ename: userStore.getUserInfo().username,
+      password: formData.oldPassword,
+      newpassword: formData.newPassword,
+      affirmpassword: formData.confirmPassword,
+    } })
+    if (result.success) {
+      showDialog({
+        title: '成功',
+        message: '修改密码成功，请重新登录',
+        confirmButtonText: '立即重新登录',
+      }).then(() => {
+        // 退出登录
+        userStore.logout()
+        // 跳转到登录页
+        router.push('/login')
+      })
+    }
+    else {
+      showToast(result.message || '修改密码失败')
+    }
+  }
+  catch (error) {
+    console.error('修改密码失败:', error)
+    showToast('修改密码失败，请检查输入信息')
+  }
+  finally {
+    loading.value = false
+  }
+}
+
+// 关闭弹窗
+function closeModal() {
+  emit('update:visible', false)
+}
+
+// 修改密码API调用
+async function handleModifyPassword(data: any) {
+  try {
+    const res = await modifyPassword(data)
+    if (res && res === 'true') {
+      return {
+        success: true,
+        message: '修改成功',
+      }
+    }
+    else {
+      return {
+        success: false,
+        message: '修改密码失败,请检查原始密码是否正确！',
+      }
+    }
+  }
+  catch (error: any) {
+    return {
+      success: false,
+      message: error?.message || '修改密码失败',
+    }
+  }
+}
+
+// 监听visible变化，重置表单
+watch(() => props.visible, (newVal) => {
+  if (!newVal) {
+    // 弹窗关闭时重置表单
+    formData.oldPassword = ''
+    formData.newPassword = ''
+    formData.confirmPassword = ''
+    showOldPassword.value = false
+    showNewPassword.value = false
+    showConfirmPassword.value = false
+  }
+})
+</script>
+
+<template>
+  <van-popup
+    :show="props.visible"
+    position="center"
+    :close-on-click-overlay="false"
+    round
+    class="modify-password-popup"
+    @update:show="emit('update:visible', $event)"
+  >
+    <div class="popup-content">
+      <!-- 标题 -->
+      <div class="popup-header">
+        <h3 class="popup-title">
+          修改密码
+        </h3>
+        <van-icon name="cross" class="close-icon" @click="closeModal" />
+      </div>
+
+      <!-- 表单 -->
+      <van-form ref="formRef" class="password-form" @submit="handleSubmit">
+        <!-- 旧密码 -->
+        <van-field
+          v-model="formData.oldPassword"
+          name="oldPassword"
+          label="旧密码"
+          placeholder="请输入旧密码"
+          :type="showOldPassword ? 'text' : 'password'"
+          :rules="rules.oldPassword"
+          @click-right-icon="showOldPassword = !showOldPassword"
+        >
+          <template #right-icon>
+            <van-icon
+              :name="showOldPassword ? 'eye-o' : 'closed-eye'"
+              color="#666"
+            />
+          </template>
+        </van-field>
+
+        <!-- 新密码 -->
+        <van-field
+          v-model="formData.newPassword"
+          name="newPassword"
+          label="新密码"
+          placeholder="请输入新密码"
+          :type="showNewPassword ? 'text' : 'password'"
+          :rules="rules.newPassword"
+          @click-right-icon="showNewPassword = !showNewPassword"
+        >
+          <template #right-icon>
+            <van-icon
+              :name="showNewPassword ? 'eye-o' : 'closed-eye'"
+              color="#666"
+            />
+          </template>
+        </van-field>
+
+        <!-- 确认新密码 -->
+        <van-field
+          v-model="formData.confirmPassword"
+          name="confirmPassword"
+          label="确认新密码"
+          placeholder="请再次输入新密码"
+          :type="showConfirmPassword ? 'text' : 'password'"
+          :rules="rules.confirmPassword"
+          @click-right-icon="showConfirmPassword = !showConfirmPassword"
+        >
+          <template #right-icon>
+            <van-icon
+              :name="showConfirmPassword ? 'eye-o' : 'closed-eye'"
+              color="#666"
+            />
+          </template>
+        </van-field>
+
+        <!-- 按钮组 -->
+        <div class="form-buttons">
+          <van-button
+            plain
+            type="default"
+            size="large"
+            class="cancel-btn"
+            @click="closeModal"
+          >
+            取消
+          </van-button>
+          <van-button
+            type="primary"
+            size="large"
+            native-type="submit"
+            :loading="loading"
+            class="submit-btn"
+          >
+            确认修改
+          </van-button>
+        </div>
+      </van-form>
+    </div>
+  </van-popup>
+</template>
+
+<style scoped lang="less">
+.modify-password-popup {
+  width: 90%;
+  max-width: 400px;
+
+  .popup-content {
+    padding: 20px;
+
+    .popup-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 20px;
+
+      .popup-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+        margin: 0;
+      }
+
+      .close-icon {
+        font-size: 20px;
+        color: #999;
+        cursor: pointer;
+        padding: 4px;
+
+        &:hover {
+          color: #666;
+        }
+      }
+    }
+
+    .password-form {
+      .form-buttons {
+        display: flex;
+        gap: 12px;
+        margin-top: 24px;
+
+        .cancel-btn,
+        .submit-btn {
+          flex: 1;
+          height: 44px;
+          border-radius: 8px;
+          font-size: 16px;
+        }
+
+        .cancel-btn {
+          border-color: #ddd;
+          color: #666;
+        }
+
+        .submit-btn {
+          background-color: #3b82f6;
+          border-color: #3b82f6;
+        }
+      }
+    }
+  }
+}
+
+// 覆盖vant默认样式
+:deep(.van-field) {
+  padding: 12px 0;
+
+  .van-field__label {
+    color: #333;
+    font-weight: 500;
+  }
+
+  .van-field__control {
+    color: #333;
+  }
+
+  .van-field__right-icon {
+    padding: 4px;
+  }
+}
+
+:deep(.van-popup) {
+  border-radius: 12px;
+}
+</style>