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.oldPassword" placeholder="请输入旧密码"> </el-input> -->
      <el-input
        autocomplete="off"
        readonly
        onfocus="this.removeAttribute('readonly');"
        v-model="data.oldPassword"
        :type="addPassoldFlag ? 'text' : 'password'"
        :maxlength="16"
        placeholder="请输入旧密码"
      >
        <template #suffix>
          <span @click="addPassoldFlag = !addPassoldFlag" style="cursor: pointer">
            <el-icon v-if="addPassoldFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </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-input
        autocomplete="off"
        readonly
        onfocus="this.removeAttribute('readonly');"
        v-model="data.password"
        :type="addPassFlag ? 'text' : 'password'"
        :maxlength="16"
        placeholder="请输入8-16位数字、字母大小写组合"
      >
        <template #suffix>
          <span @click="addPassFlag = !addPassFlag" style="cursor: pointer">
            <el-icon v-if="addPassFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </template>
      </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-input
        autocomplete="off"
        readonly
        onfocus="this.removeAttribute('readonly');"
        v-model="data.confimPsw"
        :type="addPassPwFlag ? 'text' : 'password'"
        :maxlength="16"
        placeholder="请输入8-16位数字、字母大小写组合"
      >
        <template #suffix>
          <span @click="addPassPwFlag = !addPassPwFlag" style="cursor: pointer">
            <el-icon v-if="addPassPwFlag">
              <View />
            </el-icon>
            <el-icon v-else>
              <Hide />
            </el-icon>
          </span>
        </template>
      </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 addPassoldFlag = ref(false);
const addPassFlag = ref(false);
const addPassPwFlag = ref(false);
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,
      oldPassword: data.value.oldPassword,
      password: data.value.password,
    });
    // data.value.oldPassword = data.value.password = data.value.confimPsw = "";
  },
});
</script>