xinkeaboard/xinkeaboard-web/pages/member/pwd/login.vue

<!--
 * @Author: wangwei
 * @Date: 2020-12-29 16:05:36
 * @LastEditTime: 2021-01-15 19:08:07
 * @LastEditors: Please set LastEditors
 * @Description: 登录密码
 * @FilePath: /java-pc/src/views/member/center/accountSafe.vue
-->
<template>
  <div class="sld_login_password_mange" v-if="getLatestMemberInfo">
    <MemberTitle :memberTitle="L['登录密码']"></MemberTitle>
    <div class="container">
      <div class="title">
        {{ memberInfo.data.hasLoginPassword ? L["修改"] : L["设置"] }}
        {{ L["登录密码"] }}
      </div>
      <div class="mange_con">
        <div class="without_phone_tip" v-if="!memberInfo.data.memberEmail && contactType === 'email'">
          {{ L["请先绑定邮箱，再进行登陆密码操作!"] }}
        </div>
        <div class="without_phone_tip" v-if="!memberInfo.data.memberMobile && contactType === 'mobile'">
          {{ L["请先绑定手机号，再进行登陆密码操作!"] }}
        </div>
        <!-- 修改登录密码 start -->
        <template v-if="memberInfo.data.hasLoginPassword">
          <span class="current"
            >{{ L[contactType ==='email' ? "当前邮箱账号" : '当前手机号'] }}
            {{
              contactType ==='email' ? memberInfo.data.memberEmail ? memberInfo.data.memberEmail : "--" : memberInfo.data.memberMobile
            }}</span
          >
          <div class="sms_code_con">
            <el-input
              v-model="sms_code"
              :placeholder="L[contactType === 'email' ? '请输入邮件验证码' : '请输入短信验证码']"
            ></el-input>
            <el-button :disabled="countDownM" :loading="getSmsLoading" class="get_sms pointer" @click="showHMVerify">
              {{ countDownM ? countDownM + L["s后获取"] : L["获取验证码"] }}
            </el-button>
          </div>
          <el-input
            type="password"
            class="password input"
            v-model="old_password"
            :placeholder="L['请输入原密码']"
          ></el-input>
          <el-input
            type="password"
            class="password input"
            v-model="password"
            :placeholder="L['请输入新密码']"
          ></el-input>
          <el-input
            type="password"
            class="password input"
            v-model="confirm_password"
            :placeholder="L['请再次输入新密码']"
          ></el-input>
          <div class="error_tip">
            <span
              v-if="errorMsg"
              style="color: #e1251b; font-size: 14px"
              class="iconfont icon-jubao"
            ></span>
            {{ errorMsg }}
          </div>
          <div class="next flex_row_center_center pointer" @click="next">
            {{ L["修改密码"] }}
          </div>
        </template>
        <!-- 修改登录密码 end -->
      </div>
      <!--      <div class="manage_tips">-->
      <!--        <p class="tips_title">{{ L["温馨提示"] }}：</p>-->
      <!--        <p>• {{ L["为了保障您的账号安全，变更重要信息需进行身份验证。"] }}</p>-->
      <!--        <p>• {{ L["变更过程中有任何疑问请联系在线客服解决。"] }}</p>-->
      <!--        <p>-->
      <!--          •-->
      <!--          {{ L["如手机号/邮箱已不再使用无法获取验证码，请联系在线客服解决。"] }}-->
      <!--        </p>-->
      <!--        <p>• {{ L["复杂的密码可使账号更安全且建议定期更换密码。"] }}</p>-->
      <!--      </div>-->
    </div>
    <el-dialog
      :title="L['register']['滑动验证']"
      destroy-on-close
      width="500px"
      center
      modal-class="register-verify-model"
      v-model="modalVisible"
    >
      <SliderVerify
        :slideVerifyOptions="{ show: false, w: 450, h: 220 }"
        @onSuccess="verifySuccess"
        @onFail="verifyFail"
      />
    </el-dialog>
  </div>
</template>

<script setup>
import { ElInput, ElMessage } from "element-plus";
import { getCurrentInstance, reactive, ref, watch } from "vue";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from "@/composables/common.js";
import { useFiltersStore } from "@/store/filter.js";
import { getContactType } from "@/utils/common";

const contactType = getContactType();
const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
const sms_code = ref("");
const errorMsg = ref("");
const password = ref(""); //输入新密码
const confirm_password = ref(""); //再次输入新密码
const old_password = ref(""); //输入旧密码
// const confirm_password = ref("");
const timeOutId = ref(""); //定时器的返回值
const countDownM = ref(0); //短信验证码倒计时
const memberInfo = reactive({ data: {} });
const isSmsClick = ref(false);
const getLatestMemberInfo = ref(false);
const modalVisible = ref(false);
const getSmsLoading = ref(false)

const getMemberInfo = () => {
  get("v3/member/front/member/getInfo").then((res) => {
    if (res.state == 200) {
      memberInfo.data = res.data;
      filtersStore.setMemberInfo(res.data);
      getLatestMemberInfo.value = true;
    }
  });
};
getMemberInfo();

//开启人机校验
const showHMVerify = () => {
  modalVisible.value = true;
};

// 人机验证成功
const verifySuccess = () => {
  modalVisible.value = false;
  getSmsCode();
};

// 人机校验失败
const verifyFail = () => {
  showMessage({
    message: L["register"]["校验不通过"],
    type: "warning",
  });
};

const getSmsCode = () => {
  var param = {};
  param.verifyType = 1;
  const verifyAddr = contactType === 'email' ? memberInfo.data.memberEmail : memberInfo.data.memberMobile
  param.verifyAddr = verifyAddr;
  getSmsLoading.value = true;
  get("v3/msg/front/commons/sendVerifyCode", param).then((res) => {
    if (res.state == 200) {
      countDownM.value = 60;
      countDown();
    } else {
      ElMessage.error(res.msg);
    }
  }).finally(() => {
    getSmsLoading.value = false;
  })
};
const next = () => {
  let url = "";
  let param = {};
  if (memberInfo.data.hasLoginPassword) {
    if (!sms_code.value) {
      errorMsg.value = L["请输入验证码"];
      return false;
    }

    //修改登录密码
    if (!old_password.value) {
      errorMsg.value = L["请输入原密码"];
      return false;
    }
    if (!password.value) {
      errorMsg.value = L["请输入新密码"];
      return false;
    }
    if (!confirm_password.value) {
      errorMsg.value = L["请再次输入新密码"];
      return false;
    }

    if (password.value != confirm_password.value) {
      errorMsg.value = L["请输入一致的新密码"];
      return false;
    }

    //验证新密码是否符合规则
    let checkPwdVal = checkPwd(password.value);
    if (checkPwdVal !== true) {
      errorMsg.value = checkPwdVal;
      return false;
    }

    url = "v3/member/front/memberPassword/editLoginPwd";
    param.oldLoginPwd = old_password.value;
    param.loginPwd = password.value;
    param.memberEmail = memberInfo.data.memberEmail;
    param.verifyCode = sms_code.value;
  }
  post(url, param).then((res) => {
    if (res.state == 200) {
      ElMessage.success(res.msg);
      if (!memberInfo.data.hasLoginPassword) {
        memberInfo.data.hasLoginPassword = 1;
        filtersStore.setMemberInfo(memberInfo.data);
      }
      errorMsg.value = "";
      password.value = "";
      confirm_password.value = "";
      old_password.value = "";
    } else {
      errorMsg.value = res.msg;
    }
  });
};
//倒计时
const countDown = () => {
  countDownM.value--;
  if (countDownM.value == 0) {
    clearTimeout(timeOutId.value);
  } else {
    timeOutId.value = setTimeout(countDown, 1000);
  }
};

watch([old_password, password, confirm_password], () => {
  old_password.value = old_password.value.substring(0, 20);
  password.value = password.value.substring(0, 20);
  confirm_password.value = confirm_password.value.substring(0, 20);
});
</script>
<style lang="scss">
.register-verify-model {
  .el-dialog__title {
    font-weight: 900 !important;
  }

  .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>
<style lang="scss" scoped>
@import "@/assets/style/theme.scss";
.sld_login_password_mange {
  width: 957px;
  float: left;
  margin-left: 10px;

  .container {
    background-color: white;
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #eaeaea;
    padding: 25px 40px;

    .manage_tips {
      width: 938px;
      background: #fffdee;
      border: 1px solid #edd28b;
      padding: 15px 36px;
      margin-top: 117px;

      p {
        color: #555555;
        margin-top: 10px;
      }

      .tips_title {
        font-weight: bold;
        margin-bottom: 11px;
        margin-top: 0;
      }
    }

    .title {
      font-size: 18px;
      border-bottom: 1px dashed #eaeaea;
      padding-bottom: 25px;
      font-weight: 600;
      margin-bottom: 20px;
    }

    .mange_con {
      width: 360px;
      margin: 62px auto 0;

      .current {
        line-height: 56px;
        font-size: 14px;
        color: #000000;
      }

      .error_tip {
        height: 15px;
        margin-top: 10px;
        color: #f30213;

        i {
          margin-right: 10px;
        }
      }

      .without_phone_tip {
        line-height: 56px;
        font-size: 16px;
        color: $colorMain2;
      }

      .sms_code_con {
        position: relative;
        width: 100%;

        :deep(.el-input) {
          width: 250px;
          z-index: 1;
        }

        :deep(.el-input__inner) {
          width: 250px;
        }
        .get_sms {
          display: flex;
          justify-content: center; /* 水平居中 */
          align-items: center; /* 垂直居中 */
          text-align: center; /* 多行文本居中 */
          position: absolute;
          white-space: pre-wrap;
          right: -25px;
          top: 0;
          width: 120px;
          height: 40px;
          background: #00985e;
          color: white;
          font-size: 14px;
          border-radius: 0 3px 3px 0;
          padding: 5px 10px;
        }
      }

      .margin {
        margin-top: 20px;
      }

      .next {
        width: 170px;
        height: 40px;
        background: #00985e;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        color: white;
        margin-top: 20px;
        line-height: 40px;
        border-radius: 3px;
        margin: 42px auto 0;
      }
    }
  }
}
</style>
<style lang="scss">
.sld_login_password_mange {
  .el-input {
    width: 280px;
    height: 40px;
    border-radius: 3px 0 0 3px;
    position: inherit;
  }

  .el-input__inner {
    width: 280px;
    height: 40px;
    border-radius: 3px 0 0 3px;
  }

  .input {
    width: 100%;
    height: 40px;
    margin-top: 20px;
    border-radius: 3px;
    .el-input__wrapper {
      width: 100%;
    }

    .el-input__inner {
      height: 40px;
      border-radius: 3px;
      width: 100%;
    }
  }
}

.el-input__inner:focus {
  border-color: $colorMain;
  outline: 0;
}

/**
  * 解决el-input设置类型为number时，中文输入法光标上移问题
  **/
.el-input__inner {
  line-height: 1px !important;
}
</style>