VberAdminPlus/UI/VAP.APP/src/pages/account/forgetPwd.vue

<template>
  <view class="page-container">
    <vb-cell-group outset>
      <uni-forms ref="formRef" :modelValue="form" :label-width="75" border validate-trigger="blur">
        <uni-forms-item
          required
          label="手机号码"
          name="phonenumber"
          :rules="[
            { required: true, errorMessage: '请填写手机号码' },
            { pattern: /^1[3-9]\d{9}$/, errorMessage: '请填写正确的手机号码' },
          ]"
        >
          <uni-easyinput type="text" v-model="form.phonenumber" :inputBorder="false" placeholder="请输入手机号码" />
        </uni-forms-item>
        <uni-forms-item
          required
          label="用户姓名"
          name="name"
          :rules="[{ required: true, errorMessage: '请填写用户姓名' }]"
        >
          <uni-easyinput type="text" v-model="form.name" :inputBorder="false" placeholder="请填写真实姓名" />
        </uni-forms-item>
        <uni-forms-item
          label="验证码"
          required
          name="smsCode"
          :rules="[{ required: true, errorMessage: '请填写验证码' }]"
        >
          <uni-easyinput type="text" v-model="form.smsCode" :inputBorder="false" placeholder="请填写验证码">
            <template #right>
              <view class="d-fc w-100px h-35px" :class="codeClass" @click="getCode">{{ codeText }}</view>
            </template>
          </uni-easyinput>
        </uni-forms-item>
        <uni-forms-item
          required
          label="用户密码"
          name="password"
          :rules="[{ required: true, errorMessage: '请填写用户密码' }]"
        >
          <uni-easyinput type="password" v-model="form.password" :inputBorder="false" placeholder="请填写用户密码" />
        </uni-forms-item>
      </uni-forms>
    </vb-cell-group>

    <vb-cell-group>
      <vb-button round block custom-class="mb-15" @click="onSubmit" size="large">重置密码</vb-button>
      <vb-button round block plain class="mt" @click="onBack" size="large">返回登录</vb-button>
    </vb-cell-group>
  </view>
</template>

<script lang="ts" setup>
import apis from "@/api"
import route from "@/route"

const formRef = ref()
const form = ref({
  phonenumber: "",
  name: "",
  smsCode: "",
  password: "",
  username: "000",
})
const codeText = ref("获取验证码")
const canGetCode = computed(() => {
  return codeText.value == "获取验证码"
})
const codeClass = computed(() => {
  return canGetCode.value ? "bg-vb text-white" : "bg-gray-2 text-gray-6"
})
let timer: any
function disabledGetCode() {
  let second = 60
  clearTimeout(Number(timer))
  function changeText() {
    second--
    if (second == 0) {
      codeText.value = "获取验证码"
      second = 60
      return
    }
    codeText.value = `${second}s 后获取`
    timer = setTimeout(changeText, 1000)
  }
  changeText()
}
function onSubmit() {
  formRef.value.validate().then(() => {
    // 提交注册表单
    apis.loginApi.resetPwd(form.value).then(() => {
      message.msgSuccess("重置成功")
      setTimeout(() => {
        route.navigate("login")
      }, 1500)
    })
  })
}
function onBack() {
  route.navigate("login")
}

function getCode() {
  // if (!canGetCode.value) {
  //   return
  // }
  if (form.value.phonenumber == "") {
    message.msgError("请填写手机号")
    return
  }
  if (form.value.name == "") {
    message.msgError("请填写用户名")
    return
  }
  disabledGetCode()
  apis.loginApi.getPhoneCode(form.value.phonenumber, form.value.name).then((res: any) => {
    message.msgSuccess("发送成功")
  })
}
</script>

<style scoped></style>