Battery/src/views/AccountManagement/safeSetting.vue

<template>
    <div class="first_step">
      <div class="step_title">{{ is_safety ? "安全设置" : "修改密码" }}</div>
      <div class="form_part" v-if="!is_safety">
        <!-- <div class="form_item">
          <div class="form_title">原密码</div>
          <CommonInput v-model="form_value.old_pwd" inputType="password" />
        </div> -->
        <div class="form_item">
          <div class="form_title">新密码</div>
          <CommonInput
            v-model="form_value.new_pwd"
            inputType="password"
            width="600"
          ></CommonInput>
        </div>
        <div class="form_item">
          <div class="form_title">确认密码</div>
          <CommonInput
            v-model="form_value.check_pwd"
            inputType="password"
            width="600"
          ></CommonInput>
        </div>
      </div>
      <div class="form_part" v-else>
        <div class="form_item">
          <div class="form_title">是否双人登录</div>
          <select v-model="form_value.need_two_face" style="font-size: 24px;">
            <option value="1" class="ipt">否</option>
            <option value="2" class="ipt">是</option>
          </select>
        </div>
      </div>
      <div class="footer_btn">
        <CommonButton
          msg="返回"
          size="default"
          type="info"
          class="btn"
          @click="router.push('/home')"
        ></CommonButton>
        <CommonButton
          v-if="!is_safety"
          msg="保存"
          size="default"
          type="danger"
          class="btn"
          @click="save"
        ></CommonButton>
        <CommonButton
          v-else
          msg="保存"
          size="default"
          class="btn"
          type="danger"
          @click="handleSet"
        ></CommonButton>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive } from "vue";
  import { useRouter, useRoute } from "vue-router";
  import { isEmpty } from "@/utils/index";
  import { notify } from "@/utils/message";
  import { resetPwd, getDeviceInfo, setSafetyInfo } from "@/api/user";
  const router = useRouter();
  const { path } = useRoute();
  let is_safety = ref(false);
  const getDeviceInfoMethods = async () => {
    let { data } = await getDeviceInfo();
    if (data.code == 200) {
      device_id.value = data.data.device_id;
      form_value.value.need_two_face = data.data.need_two_face;
      console.log(form_value.value.need_two_face, "11111111");
    }
  };
  if (path !== "/changePassword") {
    is_safety.value = true;
    getDeviceInfoMethods();
  }
  let device_id = ref("");
  const form_value = ref({
    old_pwd: "",
    new_pwd: "",
    check_pwd: "",
    need_two_face: "",
  });
  const save = async () => {
    // if (form_value.value.old_pwd === '') {
    //   return notify('请输入原密码', 'danger');
    // }
    if (form_value.value.new_pwd === "") {
      return notify("请输入新密码", "danger");
    }
    if (form_value.value.check_pwd === "") {
      return notify("确认密码不能为空", "danger");
    }
    if (form_value.value.new_pwd !== form_value.value.check_pwd) {
      return notify("新密码与确认密码不一致", "danger");
    }
    let useInfo = JSON.parse(sessionStorage.getItem("userInfo"));
    let { userId } = useInfo;
    let params = {
      userId: userId,
      userPwd: form_value.value.new_pwd,
    };
    let res = await resetPwd(params);
    let { status, message } = res.data;
    if (status) {
      notify(message, "success");
      router.push("/home");
    } else {
      return notify(message, "danger");
    }
  };
  const handleSet = async () => {
    if (!form_value.value.need_two_face) return notify("请填写验证人数！", "danger");
    const regex = /^[1-9]\d*$/;
    if (!regex.test(form_value.value.need_two_face)) {
      return notify("请输入正确的数字！", "danger");
    }
    if (form_value.value.need_two_face == 0)
      return notify("验证人员至少为一人！", "danger");
    if (form_value.value.need_two_face > 2)
      return notify("验证人数不能超过2人！", "danger");
    let { data } = await setSafetyInfo(device_id.value, {
      need_two_face: Number(form_value.value.need_two_face),
      device_id: "1",
    });
    if (data.code == 200) {
      notify("设置成功", "success");
      router.push("/home");
    } else {
      notify(data.desc);
    }
  };
  </script>
  <style lang="less" scoped>
  @COOMSIZE: 16px;
  
  .first_step {
    padding: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #ececec 100%);
    box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.26);
    border-radius: 2px 2px 2px 2px;
    width: 100%;
  
    .step_title {
      font-size: @COOMSIZE;
      font-weight: bold;
      color: #3a3a3a;
    }
  
    .suffix {
      position: absolute;
      right: 6px;
      color: #b8b8b8;
    }
  
    .form_part {
      margin-top: 36px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
  
      .form_item {
        font-size: @COOMSIZE;
        display: flex;
        align-items: center;
        color: #666666;
        margin-bottom: 12px;
  
        .form_title {
          margin-right: 8px;
          min-width: 64px;
        }
      }
    }
  
    .btn {
      margin: 0;
      width: 80px;
      font-size: 13px !important;
    }
  .footer_btn {
    margin-top: 80px;
    display: flex;
    justify-content: space-between;
  }
  }
  select {
    width: 60px;
    height: 30px;
    // font-size: 16px;
    margin-left: 2px;
    border-radius: 5px;
    padding: 0 10px;
  }
  
  </style>