Pad_New/src/pages/my/modifyPassword.vue

<template>
  <div class="page_noPassword">
    <div class="nopasswordTitle">
      <i class="iconfont icon-zuojiantou jiantou" @click="$router.go(-1)"></i>
      <span class="titleName">修改密码</span>
    </div>
    <div class="forgetmyInput">
      <el-form ref="forgetForm" :model="forgetForm" :rules="rules">
        <el-form-item required prop="phone">
          <div class="phoneLine">
            <i class="el-icon-mobile mobile"></i>
            <el-input
              class="phoneInput"
              placeholder="请填写手机号码"
              v-model="forgetForm.phone"
              v-on:input="watchNum"
              maxlength="11"
              readonly
              @input="change(forgetForm.phone)"
            ></el-input>
          </div>
        </el-form-item>
        <el-form-item required prop="code">
          <div class="code">
            <i class="iconfont icon-dunpai dunpai"></i>
            <el-input
              v-model="forgetForm.code"
              placeholder="请填写验证码"
              v-on:input="watchNum"
            ></el-input>
            <div class="getCode" @click="getVerifyCode()">
              {{ code_btn_title }}
            </div>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="phoneLine">
            <i class="el-icon-lock lock"></i>
            <el-input
              class="phoneInput"
              v-model="psd"
              placeholder="请填写新密码"
              show-password
              v-on:input="watchNum"
              clearable
            ></el-input>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <div class="login" @click="modifyAndLogin()" v-show="loginshow">保存</div>
    <div class="logintwo" v-show="loginshowtwo">保存</div>
    <div class="problem">
      遇到问题？点击
      <span @click="contact = true">联系客服</span>
    </div>

    <!-- 弹窗 联系客服 -->
    <el-dialog
      title="客服电话"
      :visible.sync="contact"
      width="19.1875rem"
      top="12.5rem"
      center
      class="myDialog"
    >
      <span class="telephone">0755-86526342</span>
      <span slot="footer" class="dialog-footer">
        <span @click="contact = false">取消</span>
        <span>|</span>
        <span type="primary" @click="callPhone()">拨打</span>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import { getCode, NextStep } from "@/api/login/login";
import "@/styles/newStyle.scss";
import { getCodeInit, getVerifyCode, forgetPassWord } from "@/api/login";
import { checkMobile } from "@/utils/tools";
import { hex_md5 } from "@/utils/md5";
import { setRem } from "@/libs/functionRem";

export default {
  data() {
    var checkMobileRule = (rule, value, callback) => {
      if (!checkMobile(value)) {
        callback(new Error("请填写正确的手机号"));
      } else {
        callback();
      }
    };
    return {
      phone: "",
      code: "",
      psd: "",
      contact: false,
      count_downing: false,
      count_down: 0,
      aespass: "",
      forgetForm: {
        phone: "",
        code: ""
      },
      rules: {
        phone: [
          { required: true, message: "手机号码不能为空" },
          { validator: checkMobileRule }
        ],
        code: [{ required: true, message: "验证码不能为空" }]
      },
      loginshow: false,
      loginshowtwo: true,
      codeshow: false,
      codeshowtwo: true
    };
  },
  created() {
    setRem()
    this.GetCodeInit();
    this.forgetForm.phone = this.$store.getters.user.admin.mobile;
  },
  methods: {
    modifyAndLogin() {
      if (this.forgetForm.phone.trim().length == 0) {
        this.$toast({
          message: "手机号码不能为空!"
        });
        return;
      }
      if (!checkMobile(this.forgetForm.phone)) {
        this.$toast({
          message: "请填写正确的手机号码!"
        });
        return;
      }
      if (this.forgetForm.code.trim().length == 0) {
        this.$toast({
          message: "验证码不能为空!"
        });
        return;
      }

      let params = {
        mobile: this.forgetForm.phone,
        code: this.forgetForm.code,
        password: hex_md5(this.psd)
      };
      forgetPassWord(params).then(response => {
        if (response.data.state === 1) {
          this.$router.go(-1);
        } else {
          this.$toast({
            message: response.data.msg
          });
        }
      });
    },
    GetCodeInit() {
      getCodeInit().then(response => {
        if (response.data.state === 1) {
          this.aespass = response.data.data.aespass;
        }
      });
    },
    getVerifyCode() {
      if (this.forgetForm.phone.length == 0) {
        this.$toast({
          message: "手机号码不能为空!"
        });
        return;
      }
      if (!checkMobile(this.forgetForm.phone)) {
        this.$toast({
          message: "请填写正确的手机号码!"
        });
        return;
      }

      if (!this.count_downing) {
        let parms = {
          phone: this.forgetForm.phone,
          aespass: this.aespass
        };
        getVerifyCode(parms).then(response => {
          if (response.data.state === 1) {
            this.count_downing = true;
            this.count_down = 61;
            this.countDown();
          }
        });
      }
    },

    callPhone() {
      window.location.href = "tel://075586526342";
    },
    countDown: function() {
      this.count_down = this.count_down - 1;
      if (this.count_down === 0) {
        this.count_downing = false;
        return;
      }
      var t = this;
      setTimeout(() => {
        this.countDown();
      }, 1000);
    },
    watchNum() {
      if (this.forgetForm.phone.length === 11) {
        this.codeshow = true;
        this.codeshowtwo = false;
      } else {
        this.codeshow = false;
        this.codeshowtwo = true;
      }

      if (
        this.forgetForm.phone === "" ||
        this.forgetForm.code === "" ||
        this.psd === ""
      ) {
        this.loginshow = false;
        this.loginshowtwo = true;
      } else {
        this.loginshow = true;
        this.loginshowtwo = false;
      }
    },
    change(value) {
      this.forgetForm.phone = value.replace(/[^0-9]+/g, "");
    }
  },
  computed: {
    code_btn_title: function() {
      if (this.count_down == 0) {
        return "获取验证码";
      } else {
        return "重新发送(" + this.count_down + ")";
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page_noPassword {
  overflow: hidden;
  height: 100%;
  .nopasswordTitle {
    height: 3.125rem;
    line-height: 3.125rem;
    display: flex;
    align-items: center;
  }
  .jiantou {
    margin-left: 1.25rem;
    font-size: 1.5rem;
    font-weight: 600;
    margin-right: 7rem;
  }
  .titleName {
    font-size: 1.125rem;
    font-weight: 600;
  }
  .forgetmyInput {
    margin-top: 4rem;
    .phoneLine {
      width: 84%;
      margin: 0 auto;
      display: flex;
      border-bottom: 1px solid #e6e6e6;
      .mobile {
        float: left;
        color: #acacac;
        font-size: 1.5rem;
        // margin-left: 0.375rem;
        line-height: 3.375rem;
        width: 1.5rem;
      }
      .phoneInput {
        width: 95%;
      }
    }

    .lock {
      float: left;
      color: #acacac;
      font-size: 1.5rem;
      // margin-left: 0.375rem;
      line-height: 3.375rem;
      width: 1.5rem;
    }
    .code {
      line-height: 3.375rem;
      width: 84%;
      height: 3.375rem;
      margin: 0 auto;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      align-items: center;

      .dunpai {
        float: left;
        color: #acacac;
        font-size: 1.5rem;
        // margin-left: 0.375rem;
      }
      .el-input {
        float: left;
        width: 10.6rem;
        border: none;
        padding: 0;
      }
      .el-input__inner {
        padding: 0;
        padding-left: 0.75rem;
      }
      .getCode {
        // float: left;
        width: 5.75rem;
        height: 2rem;
        line-height: 2rem;
        text-align: center;
        color: #fff;
        background: #338afb;
        border-radius: 1.4375rem;
        font-size: 0.8125rem;
      }
      .getCodetwo {
        width: 5.75rem;
        height: 2rem;
        // line-height: 2rem;
        text-align: center;
        color: #fff;
        background: #e5e5e5;
        border-radius: 1.4375rem;
        font-size: 0.8125rem;
      }

      .el-button--primary {
        border-color: transparent;
      }
    }
  }
  .login {
    width: 19.25rem;
    height: 2.875rem;
    background: linear-gradient(
      -90deg,
      rgba(129, 159, 246, 1),
      rgba(81, 119, 238, 1),
      rgba(75, 102, 234, 1)
    );
    border-radius: 1.4375rem;
    margin: 0 auto;
    line-height: 2.875rem;
    text-align: center;
    color: #fff;
    margin-top: 2.875rem;
    font-size: 1rem;
  }
  .problem {
    width: 84%;
    font-size: 0.8125rem;
    margin: 15rem auto 0;
    text-align: center;
    span {
      color: #338afb;
    }
  }
}

.el-form-item__error {
  margin-left: 2.5rem;
}

.logintwo {
  width: 19.25rem;
  height: 2.875rem;
  background: #e5e5e5;
  border-radius: 1.4375rem;
  margin: 0 auto;
  line-height: 2.875rem;
  text-align: center;
  color: #fff;
  margin-top: 2.875rem;
  font-size: 1rem;
}
.el-button--medium {
  padding: 0;
}
</style>
<style lang="scss">
.forgetmyInput {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-input {
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: rgba(155, 155, 155, 1);
    padding-left: 0.75rem;
    box-sizing: border-box;
    height: 3.375rem;
    line-height: 3.375rem;
  }
  .el-input__inner {
    border: none;
    font-size: 1rem;
    padding-left: 0;
  }
  .el-input__prefix {
    font-size: 1.5rem;
    color: #acacac;
  }

  .phoneLine {
    .el-input__clear {
      // margin-right: 0.625rem;
    }
    .el-input__icon {
      line-height: 3.375rem;
      font-size: 1.5rem;
    }
  }
}
.myDialog {
  line-height: 50%;
  height: 100%;
  .el-dialog {
    border-radius: 10px;
  }
  .el-dialog__title {
    color: #000000;
  }
  .telephone {
    width: 12.5rem;
    height: 1.125rem;
    font-size: 1.5rem;
    font-weight: 500;
    color: #338afb;
    margin-left: 2.5rem;
  }
  .dialog-footer {
    font-size:1rem;
    > span:nth-of-type(1) {
      color: #9b9b9b;
    }
    > span:nth-of-type(2) {
      padding: 0 3.125rem;
      color: #e6e6e6;
    }
    > span:nth-of-type(3) {
      color: #000000;
    }
  }
}
</style>