修改密码

src/api/common/index.js

@@ -35,7 +35,7 @@ export const logout = async () => {
 
 // 修改密码
 export const updatePassword = async (data) => {
-  return await request.post({
+  return await request.put({
     url: '/app-api/menduner/system/mde-user/update-password',
     data
   })

src/views/Home/personal/account/dynamic/editPassword.vue

@@ -3,38 +3,56 @@
     <h3>修改密码</h3>
     <v-divider class="mb-4"></v-divider>
     <div class="login-user mb-4">当前登录账号： <span style="color: var(--v-primary-base);">{{ userInfo.phone }}</span></div>
-    <div style="width: 300px;">
-      <PhonePage ref="phoneRef"></PhonePage>
-      <v-form ref="passwordRef">
-        <v-text-field
-          v-model="query.password"
-          placeholder="请输入密码" 
-          variant="outlined" 
-          density="compact"
-          color="primary"
-          prepend-inner-icon="mdi-lock-outline" 
-          :append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-          :type="passwordType ? 'text' : 'password'"
-          :rules="[v=> !!v || '请填写密码']"
-          @click:append-inner="passwordType = !passwordType"
-        ></v-text-field>
-        <v-text-field
-          v-model="query.checkPassword"
-          placeholder="请再次输入密码" 
-          variant="outlined" 
-          density="compact"
-          color="primary"
-          prepend-inner-icon="mdi-lock-outline" 
-          :append-inner-icon="show ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
-          :type="show ? 'text' : 'password'"
-          :rules="[v=> !!v || '请再次输入密码', passwordCheck]"
-          @click:append-inner="show = !show"
-        ></v-text-field>
-      </v-form>
-      <div class="text-center">
-        <v-btn class="buttons" color="primary" @click="handleSubmit" :loading="loading">确认密码</v-btn>
-      </div>
-    </div>
+    <v-stepper v-model="stepper" color="primary">
+      <v-stepper-header>
+        <v-stepper-item title="手机验证" value="1"></v-stepper-item>
+        <v-divider></v-divider>
+        <v-stepper-item title="修改密码" value="2"></v-stepper-item>
+      </v-stepper-header>
+      <v-stepper-window>
+        <v-stepper-window-item value="1">
+          <div class="d-flex justify-center">
+            <PhonePage ref="phoneRef" style="width: 300px;"></PhonePage>
+          </div>
+          <div class="text-center">
+            <v-btn class="buttons" color="primary" @click="handleValidate">立即验证</v-btn>
+          </div>
+        </v-stepper-window-item>
+        <v-stepper-window-item value="2">
+          <div class="d-flex justify-center">
+            <v-form ref="passwordRef" style="width: 300px;">
+              <v-text-field
+                v-model="query.password"
+                placeholder="请输入密码" 
+                variant="outlined" 
+                density="compact"
+                color="primary"
+                prepend-inner-icon="mdi-lock-outline" 
+                :append-inner-icon="passwordType ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+                :type="passwordType ? 'text' : 'password'"
+                :rules="[v=> !!v || '请填写密码']"
+                @click:append-inner="passwordType = !passwordType"
+              ></v-text-field>
+              <v-text-field
+                v-model="query.checkPassword"
+                placeholder="请再次输入密码" 
+                variant="outlined" 
+                density="compact"
+                color="primary"
+                prepend-inner-icon="mdi-lock-outline" 
+                :append-inner-icon="show ? 'mdi-eye-outline' : 'mdi-eye-off-outline'"
+                :type="show ? 'text' : 'password'"
+                :rules="[v=> !!v || '请再次输入密码', passwordCheck]"
+                @click:append-inner="show = !show"
+              ></v-text-field>
+            </v-form>
+          </div>
+          <div class="text-center">
+            <v-btn class="buttons" color="primary" @click="handleSubmit" :loading="loading">确认密码</v-btn>
+          </div>
+        </v-stepper-window-item>
+      </v-stepper-window>
+    </v-stepper>
   </div>
 </template>
 
@@ -49,6 +67,7 @@ const passwordRef = ref()
 const passwordType = ref(false)
 const show = ref(false)
 const loading = ref(false)
+const stepper = ref('1')
 const query = reactive({
   password: '',
   checkPassword: ''
@@ -61,9 +80,8 @@ const passwordCheck = computed(() => {
 const userInfo = JSON.parse(localStorage.getItem('userInfo'))
 
 const handleSubmit = async () => {
-  const { valid: phoneValid } = await phoneRef.value.phoneForm.validate()
-  const { valid: passValid} = await passwordRef.value.validate()
-  if (!phoneValid || !passValid) return
+  const { valid} = await passwordRef.value.validate()
+  if (!valid) return
   loading.value = true
   try {
     await updatePassword({ password: query.password, code: phoneRef.value.loginData.code })
@@ -72,6 +90,12 @@ const handleSubmit = async () => {
     loading.value = false
   }
 }
+
+const handleValidate = async () => {
+  const { valid } = await phoneRef.value.phoneForm.validate()
+  if (!valid) return
+  stepper.value = '2'
+}
 </script>
 
 <style lang="scss" scoped>