menduner/src/views/login/components/editPassword.vue

<template>
  <div class="mt-3">
    <PhonePage ref="phoneRef" style="width: 370px;" :phone="phone" :scene="scene" openVerify :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 || '请再次输入密码', confirmPassword]"
        @click:append-inner="show = !show"
      ></v-text-field>
    </v-form>
    <slot name="custom"></slot>
    <div class="text-center mt-5">
      <v-btn v-if="props.showCancelBtn" class="mr-5" color="primary" variant="outlined" @click="handleClose">取 消</v-btn>
      <v-btn color="primary" :max-width="props.showCancelBtn ? 370 : 95" :min-width="props.showCancelBtn ? 95 : 370" @click="handleSubmit" :loading="loading">确认修改</v-btn>
    </div>
  </div>
  <div class="VerifyBox">
  </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
  }
})

const scene = ref()
scene.value = props.isReset ? 33 : 32 // 32-修改密码  33-忘记密码
// scene.value = 30 // 暂时都用30

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}$/
// 请输入8-16位数由数字、大小写字母组成的密码

const regex = /^.{8,}$/
const validPassword = computed(() => {
  return regex.test(query.password) || '请输入至少8位数的密码'
})

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()
  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>