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

<template>
  <div>
    <h3>{{ $t('setting.editPassword') }}</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>
    <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 || '请填写密码', 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">
            <v-btn class="buttons" color="primary" @click="handleSubmit" :loading="loading">确认密码</v-btn>
          </div>
        </v-stepper-window-item>
      </v-stepper-window>
    </v-stepper>
  </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'

const phoneRef = ref()
const passwordRef = ref()
const passwordType = ref(false)
const show = ref(false)
const loading = ref(false)
const stepper = ref('1')
const query = reactive({
  password: '',
  checkPassword: ''
})

// 密码效验
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
  }
}

const handleValidate = async () => {
  const { valid } = await phoneRef.value.phoneForm.validate()
  if (!valid) return
  stepper.value = '2'
}
</script>

<style lang="scss" scoped>
h3 {
  font-size: 20px;
  text-align: left;
  font-weight: 600;
  padding-bottom: 25px;
}
.login-user {
  color: var(--color-666);
  font-weight: 600;
}
</style>