企业修改密码

src/router/modules/remaining.js

@@ -50,6 +50,15 @@ const remainingRouter = [
       title: '找回密码'
     }
   },
+  {
+    path: '/forgotPasswordEnt',
+    component: () => import('@/views/login/forgotPasswordEnt.vue'),
+    name: 'forgotPasswordEnt',
+    meta: {
+      hidden: true,
+      title: '找回密码'
+    }
+  },
   {
     path: '/userAgreement',
     component: Layout,

src/views/login/components/editPasswordEnt.vue

@@ -0,0 +1,119 @@
+<template>
+  <div>
+    <v-form ref="passwordRef" style="width: 370px;">
+      <v-text-field
+        v-model="query.email"
+        placeholder="请输入企业邮箱" 
+        variant="outlined" 
+        density="compact"
+        color="primary"
+        prepend-inner-icon="mdi-email-outline" 
+        :rules="[v=> !!v || '请输入企业邮箱', v=> checkEmail(v)]"
+      ></v-text-field>
+      <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 || '请再次输入密码', confirmPassword]"
+        @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: 'editPasswordEnt'})
+import { ref, reactive, computed } from 'vue'
+import { updatePassword, resetPassword } from '@/api/common/index'
+import Snackbar from '@/plugins/snackbar'
+import { checkEmail } from '@/utils/validate'
+
+const emit = defineEmits(['cancel'])
+const props = defineProps({
+  phone: {
+    type: String,
+    default: ''
+  },
+  showCancelBtn: {
+    type: Boolean,
+    default: true
+  },
+  isReset: {
+    type: Boolean,
+    default: false
+  }
+})
+
+let query = reactive({
+  email: '',
+  password: '',
+  checkPassword: ''
+})
+const passwordRef = ref(false)
+const show = ref(false)
+const loading = ref(false)
+const passwordType = ref(false)
+
+// 密码效验
+const regex = /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
+const validPassword = computed(() => {
+  return regex.test(query.password) || '请输入8-16位数由数字、大小写字母组成的密码'
+})
+
+const confirmPassword = computed(() => {
+  return query.checkPassword === query.password || '两次输入密码不一致'
+})
+
+
+const handleClose = () => {
+  query = {
+    password: '',
+    checkPassword: ''
+  }
+  passwordType.value = false
+  loading.value = false
+  emit('cancel')
+}
+
+// 修改
+const handleSubmit = async () => {
+  const passwordValid = await passwordRef.value.validate()
+  if (!passwordValid.valid) return
+  const data = {
+    password: query.password,
+  }
+  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,5 +1,6 @@
 <template>
   <div class="box">
+    <navBar :showLoginBtn="false" class="navBar"></navBar>
     <div class="content pa-10">
       <div class="resume-header">
         <div class="resume-title">修改密码</div>
@@ -12,12 +13,18 @@
 <script setup>
 defineOptions({ name: 'forgotPassword'})
 import { useRouter } from 'vue-router'
+import navBar from '@/layout/personal/navBar.vue'
 import editPasswordPage from '@/views/login/components/editPassword.vue'
 
 const router = useRouter()
 </script>
 
 <style scoped lang="scss">
+.navBar {
+  position: absolute;
+  top: 0;
+  z-index: 2;
+}
 .box {
   position: relative;
   width: 100%;

src/views/login/forgotPasswordEnt.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="box">
+    <navBar :showLoginBtn="false" class="navBar"></navBar>
+    <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: 'forgotPasswordEnt'})
+import { useRouter } from 'vue-router'
+import navBar from '@/layout/personal/navBar.vue'
+import editPasswordPage from '@/views/login/components/editPasswordEnt.vue'
+
+const router = useRouter()
+</script>
+
+<style scoped lang="scss">
+.navBar {
+  position: absolute;
+  top: 0;
+  z-index: 2;
+}
+.box {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  background-image: url('https://www.mendunerhr.com/images/userfiles/92d7e4a755e2428b94aab3636d5047f3/images/recruitment/adImages/2018/11/1920x940.jpg');
+  background-size: cover;
+}
+.content {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  translate: -50% -50%;
+  width: 450px;
+  height: 390px;
+  background-color: #fff;
+  border-radius: 10px;
+}
+</style>

src/views/login/index.vue

@@ -48,7 +48,7 @@
             </v-window>
           </div>
           <div class="font-size-14 tips">
-            <span class="float-left color-666 cursor-pointer" v-if="tab === 2 && !isEnterpriseLogin" @click="router.push('/forgotPassword')">忘记密码</span>
+            <span class="float-left color-666 cursor-pointer" v-if="tab === 2" @click="router.push(isEnterpriseLogin ? '/forgotPasswordEnt': '/forgotPassword')">忘记密码</span>
             <span class="float-right color-error cursor-pointer text-decoration-underline" @click="router.push('/register/selected')">还没有登录账户？去注册</span>
           </div>
           <v-btn :loading="loginLoading" color="primary" class="white--text mt-5" min-width="350" @click="handleLogin">