dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterSecuritySettingChangeMail.vue

<template>
  <div
      style="width: 100%; background: #fff; min-height: 700px; position: relative"
      class="userCenterSecuritySettingChangePhone"
  >
    <div
        style="
        height: 80px;
        line-height: 80px;
        margin-top: 20px;
        margin: 0 20px;
        color: #666;
        font-size: 15px;
        border-bottom: 1px solid #bcbcbc;
      "
    >
      {{ $t("common.Verify Mailbox") }}
      <!-- <span style="float: right;margin-top: 27px;"> <i class="el-icon-edit"></i> 修改</span> -->
    </div>
    <div style="width: 600px">
      <el-form
          ref="form"
          :model="form"
          label-width="160px"
          class="demo-ruleForm"
          :rules="rules"
          style="margin-left: 120px; margin-top: 40px; width: 700px"
      >
        <el-form-item :label="$t('common.EmailNumber')" prop="name">
          <el-input
              v-model="form.userEmail"
              style="width: 70%"
              maxlength="30"
              show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('common.VerificationCode')">
          <el-input
              v-model="form.vervification"
              style="width: 70%"
              maxlength="10"
              show-word-limit
          >
          </el-input>
          <span
              v-show="show"
              @click="getCode"
              style="margin-left: 20px; color: #2c5589"
              class="cursor"
          >{{ $t("common.getVerificationCode") }}</span
          >
          <span
              v-show="!show"
              class="count"
              style="margin-left: 20px; color: #999"
          >{{ count }}{{ $t("common.SendInSeconds") }}</span
          >
        </el-form-item>
      </el-form>
    </div>
    <div style="height: 100px">
      <div style="margin-top: 50px">
        <el-button
            type="primary"
            style="margin-left: 310px; width: 296px"
            @click="goAithentication"
        >{{ $t("common.OK") }}
        </el-button
        >
      </div>
    </div>
    <div
        style="
        height: 180px;
        position: absolute;
        bottom: 20px;
        left: 0;
        width: 100%;
      "
    >
      <div
          class="securBox"
          :style="active == 1 ? 'height:145px' : 'height:129px'"
      >
        <div class="div">{{ $t("common.CommonProblem") }}</div>
        <div class="div1">{{ $t("common.secremark") }}</div>
        <div class="div2">{{ $t("common.secremark1") }}</div>
        <div class="div2">{{ $t("common.secremark2") }}</div>
        <div class="div2">{{ $t("common.secremark3") }}</div>
      </div>
    </div>
  </div>
</template>
<script>
import {sendTelCode, updateEmail} from "@/api/user";
import {addIntegral} from "@/utils/toCompleteTask";
import {getUserInfoByTel} from "@/api/login";
import {getUserPointPage} from "@/api/user";

export default {
  name: "userCenterSecuritySettingChangeMail",
  data() {
    return {
      informationsClass: "1",
      dialogVisible: false,
      realnameAuthenticationPersonal: true,
      ifDiaslog: "",
      title: "",
      isSendCode: "",
      active: "1",
      show: true,
      count: "",
      timer: null,
      form: {
        userEmail: "",
        vervification: "",
        date1: "2018-05-19",
        date3: "2018-05-19",
        date2: "2020-05-25  11：20：23",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      user: {
        umsUser: {},
      },
      pointStatus: null,
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      getUserPointPage().then((res) => {
        this.pointStatus = res.data.umsUserPoints[0].pointStatus;
      });
    },
    async goAithentication() {
      if (!this.valid()) {
        return;
      }
      await updateEmail(this.form.userEmail, this.form.vervification)
          .then((result) => {
            if (result.status == "200") {
              if (
                  this.user.umsUser.userUsertypeDict !== "2" &&
                  this.pointStatus == "y"
              ) {
                addIntegral("point_task_bind_email", "20");
              }
              this.msg(this.$t("common.ValidationSuccessful"), "success");
              this.$router.push({
                name: "securitySetting",
              });
            }
          })
          .catch((error) => {
            this.msg(error.msg, "error");
          });
    },
    valid: function () {
      if (this.form.userEmail == "") {
        this.$message.warning(this.$t("common.Themailboxcannotbeempty"));
        return false;
      }
      //验证邮箱
      /* if (!this.isSendCode) {
                    this.$message.warning("请先发送验证码！");
                    return false;
                }*/
      if (this.form.vervification == "") {
        this.$message.warning(this.$t("common.Verificationcodecannotbeempty"));
        return false;
      }
      //验证邮箱
      const regEmail =
          /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
      if (!regEmail.test(this.form.userEmail)) {
        this.$message.warning(this.$t("common.Pleaseenterlegalemail"));
        return false;
      }
      return true;
    },
    getCode() {
      if (this.form.userEmail == "") {
        this.$message.warning(this.$t("common.Themailboxcannotbeempty"));
        return;
      }
      //验证邮箱
      const regEmail =
          /^[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*@[a-zA-Z0-9]+([-_.][a-zA-Z0-9]+)*\.[a-z]{2,}$/;
      if (!regEmail.test(this.form.userEmail)) {
        this.$message.warning(this.$t("common.Pleaseenterlegalemail"));
        return;
      }

      let locale = window.localStorage.getItem("locale");
      //获取验证码信息
      sendTelCode(this.form.userEmail, "YJ", locale)
          .then((result) => {
            if (result.status == "200") {
              // this.msg(this.$t("common.Verificationcodehasbeensent"), "success");
              this.msg(result.msg, "success");
              this.isSendCode = true;
            }
          })
          .catch((error) => {
            this.msg(error.msg, "error");
          });
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    msg: function (msg, type) {
      if (msg == "error") {
        msg = this.$t("common.ThesystemisbusyPleasetryagainlater");
      }
      return this.$message({
        message: msg,
        type: type,
      });
    },
  },
};
</script>
<style scoped>
.el-button {
  width: 200px;
  height: 45px;
}

.authenticationBox1 {
  margin-left: 35px;
  margin-right: 150px;
  height: 100px;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 10px;
  margin-top: 50px;
  position: relative;
}

.authenticationBox2 {
  margin: 50px 150px 0 35px;
  height: 100px;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 10px;
  position: relative;
}

.authenticationBox1:hover,
.authenticationBox2:hover {
  border: 1px solid #ff8400;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.userCenterSecuritySettingChangePhone
>>> .el-step.is-horizontal
.el-step__line {
  top: 24px;
}

.userCenterSecuritySettingChangePhone >>> .el-step__icon {
  width: 50px;
  height: 50px;
  font-size: 25px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.securBox {
  margin: 50px 20px 20px 20px;
  height: 145px;
  background: #f2f2f2;
  line-height: 29px;
  padding-left: 10px;
}

.securBox .div {
  font-size: 14px;
  color: #666;
  font-weight: 600;
}

.securBox .div1 {
  font-size: 14px;
  color: #666;
}

.securBox .div2 {
  font-size: 14px;
  color: #999;
  margin-left: 20px;
}
</style>