public-fuse/src/view/system/updatePsw.vue

<template>
  <el-form ref="form" :model="data" label-width="90px">
    <div class="stop-psw">
      <input type="text" />
      <input type="password" name="" id="" />
    </div>

    <el-form-item label="手机号：" class="mandatory">
      <el-input v-model="data.phone" placeholder="请输入手机号码" disabled></el-input>
    </el-form-item>
    <el-form-item label="验证码：" class="mandatory">
      <el-input v-model="data.code" placeholder="请输入验证码">
        <template v-slot:suffix>
          <el-button
            type="primary"
            plain
            class="input-inner-btn"
            @click="sendCode"
            :disabled="msgStatus && msgStatus.status !== CountdownStuts.never"
          >
            {{
              msgStatus?.status === CountdownStuts.effective
                ? `${msgStatus.miss}S后可重新发送`
                : "获取验证码"
            }}
          </el-button>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item label="新密码：" class="mandatory">
      <el-input
        v-model="data.password"
        type="password"
        :maxlength="16"
        placeholder="请输入8-16位数字、英文大小写组合"
      ></el-input>
    </el-form-item>
    <el-form-item label="密码确认：" class="mandatory">
      <el-input
        v-model="data.confimPsw"
        type="password"
        placeholder="请输入8-16位数字、英文大小写组合"
      ></el-input>
    </el-form-item>
  </el-form>
</template>

<script setup lang="ts">
import { encodePwd } from "@/util";
import { openErrorMsg } from "@/request";
import {
  CountdownStore,
  CountdownStuts,
  sendPhoneCode,
  updatePassword,
  user,
} from "@/store/user";
import { ref, reactive } from "vue";
import { PSW } from "@/constant/REG";
import { QuiskExpose } from "@/helper/mount";

const data = ref({
  oldPassword: "",
  password: "",
  confimPsw: "",
  phone: user.value.info.userName,
  code: "",
});
const msgStatus = ref<CountdownStore>();
const sendCode = async () => {
  msgStatus.value = await sendPhoneCode(data.value.phone);
};

defineExpose<QuiskExpose>({
  async submit() {
    if (data.value.password !== data.value.confimPsw) {
      openErrorMsg("两次密码不一致！");
      throw "两次密码不一致！";
    }
    if (!PSW.REG.test(data.value.password)) {
      openErrorMsg(PSW.tip);
      throw PSW.tip;
    }
    if (!data.value.code || !data.value.code.trim()) {
      openErrorMsg("请输入验证码");
      throw "请输入验证码";
    }

    await updatePassword({
      userName: data.value.phone,
      code: data.value.code,
      password: data.value.password,
    });
    data.value.oldPassword = data.value.password = data.value.confimPsw = "";
  },
});
</script>