重置密码+修改密码

src/api/common/index.js

@@ -83,8 +83,8 @@ export const updatePassword = async (data) => {
 
 // 重置密码
 export const resetPassword = async (data) => {
-  return await request.post({
-    url: '/admin-api/menduner/system/mde-user/update-password',
+  return await request.put({
+    url: '/app-api/menduner/system/mde-user/reset-password',
     data
   })
 }

src/components/VerificationCode/index.vue

@@ -5,7 +5,7 @@
         <template v-slot:prepend-inner>
           <span class="d-flex">
             <v-icon icon="mdi-cellphone" size="20"></v-icon>
-            <span class="d-flex" id="menu-activator">
+            <!-- <span class="d-flex" id="menu-activator">
               <span class="phone-number">{{ currentArea }}</span>
               <v-icon size="20">mdi-chevron-down</v-icon>
             </span>
@@ -15,7 +15,7 @@
                   <v-list-item-title>{{ item.label }}</v-list-item-title>
                 </v-list-item>
               </v-list>
-            </v-menu>
+            </v-menu> -->
           </span>
         </template>
       </v-text-field>
@@ -72,13 +72,13 @@ const codeValid = ref([
 ])
 
 // 手机号区域
-const currentArea = ref('0086')
-const items = [
-  { label: '中国大陆-0086', value: '0086' }
-]
-const handleChangeCurrentArea = (e) => {
-  currentArea.value = e.value
-}
+// const currentArea = ref('0086')
+// const items = [
+//   { label: '中国大陆-0086', value: '0086' }
+// ]
+// const handleChangeCurrentArea = (e) => {
+//   currentArea.value = e.value
+// }
 
 // 获取验证码
 const showCode = ref(true)

src/views/login/components/editPassword.vue

@@ -0,0 +1,114 @@
+<template>
+  <div>
+    <PhonePage ref="phoneRef" style="width: 370px;" :phone="phone" :phoneDisabled="phone ? true : false"></PhonePage>
+    <v-form ref="passwordRef" style="width: 370px;">
+      <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 || '请填写新密码', validPassword]"
+        @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 mt-5">
+      <v-btn v-if="showCancelBtn" class="mr-5" color="primary" variant="outlined" @click="handleClose">取 消</v-btn>
+      <v-btn color="primary" :max-width="showCancelBtn ? 370 : 95" :min-width="showCancelBtn ? 95 : 370" @click="handleSubmit" :loading="loading">确认修改</v-btn>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineOptions({ name: 'editPasswordCommonPage'})
+import { ref, reactive, computed } from 'vue'
+import PhonePage from '@/components/VerificationCode'
+import { updatePassword, resetPassword } from '@/api/common/index'
+import Snackbar from '@/plugins/snackbar'
+
+const emit = defineEmits(['cancel'])
+const props = defineProps({
+  phone: {
+    type: String,
+    default: ''
+  },
+  showCancelBtn: {
+    type: Boolean,
+    default: true
+  },
+  isReset: {
+    type: Boolean,
+    default: false
+  }
+})
+
+let query = reactive({
+  password: '',
+  checkPassword: ''
+})
+const passwordRef = ref(false)
+const show = ref(false)
+const loading = ref(false)
+const passwordType = ref(false)
+const phoneRef = ref()
+
+// 密码效验
+const regex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
+const validPassword = computed(() => {
+  return regex.test(query.password) || '请输入8-16位数由数字、大小写字母组成的密码'
+})
+const passwordCheck = computed(() => {
+  return (query.checkPassword === query.password && regex.test(query.checkPassword)) || '两次密码输入不一致'
+})
+
+
+const handleClose = () => {
+  query = {
+    password: '',
+    checkPassword: ''
+  }
+  passwordType.value = false
+  loading.value = false
+  emit('cancel')
+}
+
+// 修改
+const handleSubmit = async () => {
+  const passwordValid = await passwordRef.value.validate()
+  const phoneValid = await phoneRef.value.phoneForm.validate()
+  if (!passwordValid.valid || !phoneValid.valid) return
+  const data = {
+    password: query.password,
+    code: phoneRef.value.loginData.code
+  }
+  // 重置密码需要手机号
+  if (props.isReset) data.phone = phoneRef.value.loginData.phone
+  loading.value = true
+  const api = props.isReset ? resetPassword : updatePassword
+  try {
+    await api(data)
+    Snackbar.success('修改成功')
+  } finally {
+    loading.value = false
+    handleClose()
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/login/forgotPassword.vue

@@ -1,19 +1,20 @@
 <template>
   <div class="box">
     <div class="content pa-10">
-      找回密码
+      <div class="resume-header">
+        <div class="resume-title">修改密码</div>
+      </div>
+      <editPasswordPage class="mt-5" :showCancelBtn="false" :isReset="true" @cancel="router.push('/login')"></editPasswordPage>
     </div>
   </div>
 </template>
 
 <script setup>
 defineOptions({ name: 'forgotPassword'})
-// import { ref } from 'vue'
-// import { useRouter } from 'vue-router'
-// import Snackbar from '@/plugins/snackbar'
+import { useRouter } from 'vue-router'
+import editPasswordPage from '@/views/login/components/editPassword.vue'
 
-// const router = useRouter()
-// const loading = ref(false)
+const router = useRouter()
 </script>
 
 <style scoped lang="scss">
@@ -30,7 +31,7 @@ defineOptions({ name: 'forgotPassword'})
   left: 50%;
   translate: -50% -50%;
   width: 450px;
-  height: 400px;
+  height: 450px;
   background-color: #fff;
   border-radius: 10px;
 }

src/views/recruit/personal/accountSettings/dynamic/editPassword.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div style="position: relative; width: 100%; height: 100%;">
     <h3>{{ $t('setting.editPassword') }}</h3>
     <v-divider class="mb-4"></v-divider>
     <div v-if="!showEdit" class="login-user mb-4">
@@ -7,124 +7,18 @@
       <span>{{ userInfo.phone }}</span>
       <span class="color-primary ml-5 text-decoration-underline cursor-pointer" @click="showEdit = true">修改密码</span>
     </div>
-    <v-stepper v-if="showEdit" 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;" :phone="userInfo.phone" :phoneDisabled="true"></PhonePage>
-          </div>
-          <div class="text-center mt-5">
-            <v-btn class="buttons" color="primary" @click="handleValidate">立即验证</v-btn>
-          </div>
-          <div class="text-end">
-            <v-btn color="primary" variant="outlined" @click="handleClose">取 消</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 || '请填写新密码', validPassword]"
-                @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 mt-5">
-            <v-btn class="buttons" color="primary" @click="handleSubmit" :loading="loading">确认修改</v-btn>
-          </div>
-          <div class="text-end">
-            <v-btn color="primary" variant="outlined" @click="handleClose">取 消</v-btn>
-          </div>
-        </v-stepper-window-item>
-      </v-stepper-window>
-    </v-stepper>
+    <editPasswordPage v-if="showEdit" :phone="userInfo.phone" @cancel="showEdit = false" class="editPage"></editPasswordPage>
   </div>
 </template>
 
 <script setup name="editPassword">
-import PhonePage from '@/components/VerificationCode'
-import { updatePassword } from '@/api/common/index'
-import { ref, reactive, computed } from 'vue'
-import Snackbar from '@/plugins/snackbar'
+import { ref } from 'vue'
+import editPasswordPage from '@/views/login/components/editPassword.vue'
 
-const phoneRef = ref()
-const passwordRef = ref()
-const passwordType = ref(false)
-const show = ref(false)
-const loading = ref(false)
-const stepper = ref('1')
 const showEdit = ref(false)
-let query = reactive({
-  password: '',
-  checkPassword: ''
-})
-
-const handleClose = () => {
-  showEdit.value = false
-  query = {
-    password: '',
-    checkPassword: ''
-  }
-  stepper.value = '1'
-  passwordType.value = false
-  loading.value = false
-}
-
-// 密码效验
-const regex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{4,10}$/
-const validPassword = computed(() => {
-  return regex.test(query.password) || '请输入4-10位数由数字、大小写字母组成的密码'
-})
-const passwordCheck = computed(() => {
-  return (query.checkPassword === query.password && regex.test(query.checkPassword)) || '两次密码输入不一致'
-})
 
 // 当前登录的用户信息
 const userInfo = JSON.parse(localStorage.getItem('userInfo'))
-
-const handleSubmit = async () => {
-  const { valid} = await passwordRef.value.validate()
-  if (!valid) return
-  loading.value = true
-  try {
-    await updatePassword({ password: query.password, code: phoneRef.value.loginData.code })
-    Snackbar.success('修改成功')
-  } finally {
-    loading.value = false
-    showEdit.value = false
-  }
-}
-
-const handleValidate = async () => {
-  const { valid } = await phoneRef.value.phoneForm.validate()
-  if (!valid) return
-  stepper.value = '2'
-}
 </script>
 
 <style lang="scss" scoped>
@@ -138,4 +32,10 @@ h3 {
   color: var(--color-666);
   font-weight: 600;
 }
+.editPage {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

src/views/recruit/personal/accountSettings/index.vue

@@ -28,10 +28,10 @@ import { useI18n } from '@/hooks/web/useI18n'
 const { t } = useI18n()
 
 const items = [
-  { title: t('setting.accountBinding'), path: '/recruit/personal/accountSettings/accountBinding', },
-  { title: t('setting.realNameAuthentication'), path: '/recruit/personal/accountSettings/realAuthentication', },
+  // { title: t('setting.accountBinding'), path: '/recruit/personal/accountSettings/accountBinding', },
+  // { title: t('setting.realNameAuthentication'), path: '/recruit/personal/accountSettings/realAuthentication', },
   { title: t('setting.editPassword'), path: '/recruit/personal/accountSettings/editPassword', },
-  { title: t('setting.privacyPolicySettings'), path: '/recruit/personal/accountSettings/privacySettings' }
+  // { title: t('setting.privacyPolicySettings'), path: '/recruit/personal/accountSettings/privacySettings' }
 ]
 </script>