xinkeaboard/xinkeaboard-web/pages/member/email.vue

<!--
 * @Author: wangwei
 * @Date: 2020-12-29 16:05:36
 * @LastEditTime: 2021-01-25 09:56:17
 * @LastEditors: Please set LastEditors
 * @Description: 邮箱管理
 * @FilePath: /java-pc/src/views/member/center/accountSafe.vue
-->
<template>
  <div class="sld_email_mange"  v-if="getLatestMemberInfo">
    <MemberTitle :memberTitle="L['邮箱管理']"></MemberTitle>
    <div class="container" >
      <div class="title">
        {{ memberInfo.data.memberEmail ? L["修改电子邮箱"] : L["绑定电子邮箱"] }}
      </div>
      <div class="mange_con">
        <!--会员未绑定邮箱 start-->
        <template v-if="!memberInfo.data.memberEmail">
          <el-input
            class="password input"
            v-model="new_mobile"
            :placeholder="L['请输入新邮箱']"
          ></el-input>
          <div class="sms_code_con flex_row_center_center margin">
            <el-input
              v-model="new_sms_code"
              :placeholder="L['请输入邮箱验证码']"
              type="number"
            ></el-input>
            <div class="get_sms pointer" @click="showHMVerify">
              {{ countDownM ? countDownM + L["s后获取"] : L["获取验证码"] }}
            </div>
          </div>
          <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" @click="bindEmail">{{L["确定提交"]}}</div>
        </template>
        <!--会员未绑定邮箱 end-->


        <!--会员修改邮箱 start-->
        <template v-if="memberInfo.data.memberEmail">
          <span class="current"
            >{{L["当前邮箱账号"]}} {{ memberInfo.data.memberEmail }}</span
          >
          <div v-if="step == 1" class="sms_code_con flex_row_center_center">
            <el-input
              v-model="old_sms_code"
              :placeholder="L['请输入邮箱验证码']"
              type="number"
            ></el-input>
            <el-button :disabled="countDownM" :loading="getSmsLoading" class="get_sms pointer" @click="showHMVerify">
              {{ countDownM ? countDownM + L["s后获取"] : L["获取验证码"] }}
            </el-button>
          </div>
          <el-input
            v-if="step == 2"
            class="password input"
            v-model="new_mobile"
            :placeholder="L['请输入新邮箱']"
          >
          </el-input>
          <div class="error_tip" v-if="emailErrorMsg">
            <span
              style="color: #e1251b; font-size: 14px"
              class="iconfont icon-jubao"
            ></span>
            {{ emailErrorMsg }}
          </div>
          <div
            v-if="step == 2"
            class="sms_code_con flex_row_center_center margin"
          >
            <el-input
              v-model="new_sms_code"
              :placeholder="L['请输入邮箱验证码']"
              maxlength="6"
            ></el-input>
            <el-button :disabled="countDownM" :loading="getSmsLoading" class="get_sms pointer" @click="showHMVerify">
              {{ countDownM ? countDownM + L["s后获取"] : L["获取验证码"] }}
            </el-button>
          </div>
          <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" @click="next">
            {{ step == 1 ? L['下一步'] : L['确定'] }}
          </div>
        </template>
        <!--会员修改邮箱 start-->
      </div>
<!--      <div class="manage_tips">-->
<!--        <p class="tips_title">{{ 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="email-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, ElMessageBox } from "element-plus";
import { getCurrentInstance, reactive, ref, onMounted, watch } from "vue";
// import { lang_zn } from "@/assets/language/zh";
import { getCurLanguage } from '@/composables/common.js';
import { useFiltersStore } from "@/store/filter.js";
const filtersStore = useFiltersStore();
// const L = lang_zn;
const L = getCurLanguage();
definePageMeta({
  layout: "member",
  middleware: ["auth"],
});
const { proxy } = getCurrentInstance();
const step = ref(1);
const errorMsg = ref("");
const emailErrorMsg = ref("");
const old_sms_code = ref("");
const new_sms_code = ref("");
const new_mobile = ref("");
const timeOutId = ref(""); //定时器的返回值
const countDownM = ref(0); //短信验证码倒计时
const memberInfo = reactive({ data: filtersStore.getMemberInfo });
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) {
        filtersStore.setMemberInfo(res.data)
        getLatestMemberInfo.value = true
      }
    });
}

//开启人机校验
const showHMVerify = () => {
  //验证新邮箱是否正确
  if (step.value == 2) {
    if (!new_mobile.value) {
      emailErrorMsg.value = L["请输入邮箱号"];
      return;
    } else {
      let checkEmailVal = checkEmail(new_mobile.value);
      if (checkEmailVal !== true) {
        emailErrorMsg.value = checkEmailVal;
        return;
      } else {
        emailErrorMsg.value = "";
      }
    }
  }
  modalVisible.value = true;
};

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

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

const getSmsCode = () => {
    var param = {};
    param.verifyType = 1;
    //未绑定邮箱
    if (!memberInfo.data.memberEmail) {
      param.verifyAddr = new_mobile.value;
      param.changeType = "";
    } else {
      param.verifyAddr =
        step.value == 1 ? memberInfo.data.memberEmail : new_mobile.value;
      param.changeType = step.value == 1 ? "old" : "new";
    }
    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 bindEmail = () => {
  //验证邮箱是否正确
  if (step.value == 2) {
    if (!new_mobile.value) {
      emailErrorMsg.value = L["请输入邮箱号"];
      return false;
    } else {
      let checkEmailVal = checkEmail(new_mobile.value);
      if (checkEmailVal !== true) {
        emailErrorMsg.value = checkEmailVal;
        return false;
      }
    }
    emailErrorMsg.value = ''
  }
  //验证码校验
  if (!new_sms_code.value) {
    errorMsg.value = L["请输入邮箱验证码"];
    return false;
  } else {
    let checkEmailCodeVal = checkEmailCode(new_sms_code.value);
    if (checkEmailCodeVal !== true) {
      errorMsg.value = checkEmailCodeVal;
      return false;
    } else {
      errorMsg.value = "";
    }
  }
  post("v3/member/front/memberPassword/editEmail", {
      memberEmail: new_mobile.value,
      emailCode: new_sms_code.value,
    })
    .then((res) => {
      if (res.state == 200) {
        clearTimeout(timeOutId.value);
        countDownM.value = 0;
        errorMsg.value = "";
        new_sms_code.value = "";
        ElMessage.success(res.msg);
        //更新个人信息
        memberInfo.data.memberEmail = new_mobile.value;
        filtersStore.setMemberInfo(memberInfo.data)
      } else if (res.state == 267) {
        ElMessageBox.confirm(res.msg, L["提示"], {
          confirmButtonText: L["确定"],
          cancelButtonText: L["取消"],
          type: "warning",
        }).then(() => {
          post("v3/member/front/memberPassword/editEmail", {
              memberEmail: new_mobile.value,
              emailCode: new_sms_code.value,
              isUnbound: 1,
            })
            .then((res) => {
              if (res.state == 200) {
                ElMessage.success(res.msg);
                memberInfo.data.memberEmail = new_mobile.value;
                filtersStore.setMemberInfo(memberInfo.data)
                errorMsg.value = "";
                new_mobile.value = "";
                new_sms_code.value = "";
                //更新个人信息
              } else {
                ElMessage.error(res.msg);
              }
            });
        });
      } else {
        errorMsg.value = res.msg;
      }
    });
};
const next = () => {
  let param = {};
  let url = "";
  if (step.value == 1) {
    //验证码校验
    if (!old_sms_code.value) {
      errorMsg.value = L["请输入邮箱验证码"];
      return false;
    } else {
      let checkEmailCodeVal = checkEmailCode(old_sms_code.value);
      if (checkEmailCodeVal !== true) {
        errorMsg.value = checkEmailCodeVal;
        return false;
      }
    }
    url = "v3/member/front/memberPassword/verifyOldEmail";
    param.memberEmail = memberInfo.data.memberEmail;
    param.emailCode = old_sms_code.value;
  } else if (step.value == 2) {
    let checkEmailVal = checkEmail(new_mobile.value);
    if (checkEmailVal !== true) {
      return false;
    }
    url = "v3/member/front/memberPassword/editEmail";
    param.memberEmail = new_mobile.value;
    param.emailCode = new_sms_code.value;
  }
  post(url, param).then((res) => {
    if (res.state == 200) {
      if (step.value == 1) {
        step.value = 2;
      }
      if (step.value == 2) {
        //更新个人信息
        memberInfo.data.memberEmail = new_mobile.value;
        filtersStore.setMemberInfo(memberInfo.data)
        step.value = 1;
      }
      errorMsg.value = "";
      clearTimeout(timeOutId.value);
      countDownM.value = 0;
    } else if (res.state == 267) {
      ElMessageBox.confirm(res.msg, L["提示"], {
        confirmButtonText: L["确定"],
        cancelButtonText: L["取消"],
        type: "warning",
      }).then(() => {
        post("v3/member/front/memberPassword/editEmail", {
            memberEmail: new_mobile.value,
            emailCode: new_sms_code.value,
            isUnbound: 1,
          })
          .then((res) => {
            if (res.state == 200) {
              ElMessage.success(res.msg);
              //更新个人信息
              memberInfo.data.memberEmail = new_mobile.value;
              filtersStore.setMemberInfo(memberInfo.data)
              errorMsg.value = "";
              step.value = 1;
            } else {
              ElMessage.error(res.msg);
            }
          });
      });
    } else {
      errorMsg.value = res.msg;
    }
  });
};
//倒计时
const countDown = () => {
  countDownM.value--;
  if (countDownM.value == 0) {
    clearTimeout(timeOutId.value);
  } else {
    timeOutId.value = setTimeout(countDown, 1000);
  }
};

watch(new_mobile, () => {
  new_mobile.value = new_mobile.value.substring(0, 50);
  errorMsg.value = "";
});

watch([old_sms_code, new_sms_code], () => {
  old_sms_code.value = old_sms_code.value.substring(0, 4);
  new_sms_code.value = new_sms_code.value.substring(0, 4);
  errorMsg.value = "";
});

onMounted(() => {
  getMemberInfo()
  if (!memberInfo.data.memberEmail) {
    step.value = 2;
  }
});

onUnmounted(() => {
  getMemberInfo()
})

</script>
<style lang="scss">
.email-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>
.sld_email_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;
    min-height: 600px;

    .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: 460px;
      margin: 62px auto 0;

      .current {
        line-height: 56px;
        font-size: 14px;
        color: #333333;
        width: 100%;
        text-align: center;
        display: block;
      }

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

        i {
          margin-right: 10px;
        }
      }

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

        .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;
      }

      .input {
        width: 100%;
        height: 44px;
        margin-top: 20px;

        .el-input__inner {
          height: 54px;
        }
      }

      .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;
        cursor: pointer;
      }
    }
  }
}
</style>
<style lang="scss">
.sld_email_mange {
  .el-input {
    width: 360px;
    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__inner {
      height: 40px;
      border-radius: 3px;
      width: 100%;
    }
  }
}

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

input[type="number"] {
  -moz-appearance: textfield;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

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