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

<template>
  <div
      style="width: 100%; background: #fff; min-height: 700px; position: relative"
      class="userCenterSecuritySettingBindPhone"
  >
    <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.BindPhone") }}
      <!-- <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="120px"
          class="demo-ruleForm"
          style="margin-left: 120px; margin-top: 40px; width: 700px"
      >
        <el-form-item :label="$t('common.mobilePhone')" prop="mobilePhone">
          <GlobalRoaming
              ref="GlobalRoaming"
              :size="{ width: '460px' }"
              v-model="form.mobilePhone"
              @getAreaCode="getPassAreaCode"
          ></GlobalRoaming>
        </el-form-item>
        <el-form-item :label="$t('common.VerificationCode')">
          <el-input v-model="form.vervification" style="width: 70%"></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: 25px">
        <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:170px' : 'height:129px'"
      >
        <div class="div">{{ $t("common.SecurityTips") }}</div>
        <div class="div1">{{ $t("common.remarkSecPhone5") }}</div>
        <div class="div2">{{ $t("common.remarkSecPhone6") }}</div>
        <div class="div1">{{ $t("common.remarkSecPhone8") }}</div>
        <div class="div2">
          {{ $t("common.remarkSecPhone9") }}{{
            $t("common.remarkSecPhone10")
          }}{{ $t("common.remarkSecPhone11") }}
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {sendTelCode, updateMobile} from "@/api/user";
import GlobalRoaming from "@/components/GlobalRoaming";
import {getUserInfoByTel} from "@/api/login";
import {addIntegral} from "@/utils/toCompleteTask";
import {getUserPointPage} from "@/api/user";

export default {
  name: "userCenterSecuritySettingBindPhone",
  components: {
    GlobalRoaming,
  },
  data() {
    return {
      informationsClass: "1",
      dialogVisible: false,
      realnameAuthenticationPersonal: true,
      ifDiaslog: "",
      title: "",
      isSendCode: "",
      active: "1",
      show: true,
      count: "",
      timer: null,
      form: {
        mobilePhone: "",
        vervification: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
      user: {
        umsUser: {},
      },
      pointStatus: null,
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    getPassAreaCode(code) {
      this.select = code;
      console.log("select=" + this.select);
    },
    init() {
      getUserPointPage().then((res) => {
        this.pointStatus = res.data.umsUserPoints[0].pointStatus;
      });
    },
    async goAithentication() {
      this.init();
      if (!this.valid()) {
        return;
      }
      let phones = this.select.concat(this.form.mobilePhone);
      await updateMobile(phones, this.form.vervification)
          .then((result) => {
            if (result.status == "200") {
              if (
                  this.user.umsUser.userUsertypeDict !== "2" &&
                  this.pointStatus == "y"
              ) {
                addIntegral("point_task_bind_phone", "20");
              }
              // this.msg(this.$t("common.bindSuccess"), "success");
	            this.msg(result.msg, "success");
              this.$router.push({
                name: "securitySetting",
              });
            }
          })
          .catch((error) => {
            this.msg(error.msg, "error");
          });
    },
    valid: function () {
      if (!this.form.mobilePhone) {
        this.$message.warning(this.$t("common.Mobilephonenumbercannotbeempty"));
        return false;
      }
      /* const regPhone = /^(0|86|17951)?(13[0-9]|15[123456789]|16[6]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
                if (!regPhone.test(this.form.mobilePhone)) {
                    this.$message.warning(this.$t('common.Pleaseenteravalidmobilephonenumber'));
                    return false;
                }*/
      /* if(!this.isSendCode){
                    this.$message.warning("请先发送验证码！");
                    return false;
                }*/
      if (!this.form.vervification) {
        this.$message.warning(this.$t("common.Verificationcodecannotbeempty"));
        return false;
      }
      return true;
    },
    getCode() {
      if (!this.form.mobilePhone) {
        this.$message.warning(this.$t("common.Mobilephonenumbercannotbeempty"));
        return false;
      }
      /* const regPhone = /^(0|86|17951)?(13[0-9]|15[123456789]|16[6]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
                if (!regPhone.test(this.form.mobilePhone)) {
                    this.$message.warning(this.$t('common.Pleaseenteravalidmobilephonenumber'));
                    return false;
                }*/
      let locale = window.localStorage.getItem("locale");
      let phone = this.select.concat(this.form.mobilePhone);
      //获取验证码信息
      sendTelCode(phone, "TX", locale)
          .then((result) => {
            if (result.status == "200") {
	            this.msg(result.msg, "success");
              // this.msg(this.$t("common.Verificationcodehasbeensent"), "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;
}

.el-form >>> .el-select {
  width: 150px;
}

.el-form >>> .dcp_input .el-input__inner[type="text"] {
  width: 255px !important;
}

.el-form >>> .dcp_input .el-input-group__prepend .el-input__inner[type="text"] {
  width: 150px !important;
}

el-input .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: 25px 20px 20px 20px;
  height: 170px;
  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>