bocai_supplyChain_pc/src/components/Login/updatepsw.vue

<template>
  <div class="center">
    <div class="formcontainer">
      <ul class="loginchange centerall">
        <li class="loginactive">找回密码</li>
      </ul>
      <div class="formbox">
        <template>
          <a-form
            id="components-form-demo-normal-login"
            :form="form1"
            class="login-form"
            @submit="phonehandleSubmit"
          >
            <a-form-item style="text-align: left">
              <a-input
                v-decorator="[
                  'tel',
                  {
                    rules: [
                      { required: true, message: '请输入手机号' },
                      {
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确手机号',
                      },
                    ],
                    validateTrigger: 'submit',
                  },
                ]"
                autocomplete="off"
                :maxLength="11"
                placeholder="请输入手机号"
              >
                <i
                  slot="prefix"
                  class="icon-shouji iconfont"
                  style="font-size: 24px"
                />
              </a-input>
            </a-form-item>
            <a-form-item style="text-align: left">
              <a-input
                v-decorator="[
                  'code',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入验证码',
                      },
                    ],
                    validateTrigger: 'submit',
                  },
                ]"
                type="text"
                placeholder="请输入短信验证码"
              >
                <i slot="prefix" class="icon-duanxinyanzheng iconfont" />
                <span class="getrulecode" slot="suffix"
                  ><span
                    @click="getPhoneCode"
                    data-mark="getcode"
                    v-if="timedata.isfinish"
                    >获取验证码</span
                  ><timmer :timedata="timedata" v-if="!timedata.isfinish"
                /></span>
              </a-input>
            </a-form-item>
            <a-form-item style="text-align: left">
              <a-input
                @input="getpassword"
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入密码',
                      },
                    ],
                    validateTrigger: 'submit',
                  },
                ]"
                type="password"
                placeholder="请输入密码"
              >
                <i slot="prefix" class="iconfont icon-mima" />
              </a-input>
            </a-form-item>
            <a-form-item style="text-align: left">
              <a-input
                v-decorator="[
                  'newpassword',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请再次输入密码',
                      },
                      {
                        validator: replacepassword,
                      },
                    ],
                    validateTrigger: 'submit',
                    validateFirst: true,
                  },
                ]"
                type="password"
                placeholder="请再次输入密码"
              >
                <i slot="prefix" class="iconfont icon-mima" />
              </a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
                class="login-form-button"
              >
                提交
              </a-button>
            </a-form-item>
          </a-form>
          <!-- <div class="register">
            <router-link to="/register">还没有账号，立即注册</router-link>
          </div> -->
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import { getPhoneCodeApi, updatePswApi } from "../../api/login";
import timmer from "./components/countback.vue";

export default {
  inject: ["reload"],
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {
    timmer,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      loginway: 1,
      ischecked: false,
      setpassword: "", // 重置密码的密码字段
      form1: this.$form.createForm(this),
      timedata: {
        isfinish: true,
        deadline: 60,
        timmer: null,
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    phonehandleSubmit(e) {
      e.preventDefault();
      let params;
      this.form1.validateFields(async (err, values) => {
        console.log(err);
        console.log(values);
        if (!err) {
          params = { ...values };
          try {
            const { data } = await updatePswApi(params);
            console.log(data);
            if (data.status !== 200) {
              this.$message.warning(data.msg);
              return;
            }
            // localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
            this.$router.push("/login");
            this.reload();
          } catch (err) {
            console.log(err);
          }
        } else {
          console.log(err);
        }
      });
    },
    async getPhoneCode() {
      const that = this;

      this.form1.validateFields(["tel"], async (err, values) => {
        console.log(values);

        if (!err) {
          that.timedata.isfinish = false;

          try {
            const { data } = await getPhoneCodeApi({ tel: values.tel });
            console.log(data);
            if (data.status !== 200) {
              this.$message.warning(data.msg);
            }
          } catch (error) {
            console.log(error);
          }
        } else {
          console.log(err);
        }
      });
    },
    checked() {
      console.log(this.ischecked);
    },
    getpassword(e) {
      this.setpassword = e.target.value;
      console.log(e);
    },
    // 检验密码不一致的回调
    replacepassword(rule, value, callback) {
      console.log(rule);
      console.log(value);
      if (this.setpassword !== value) {
        callback("两次密码不一致");
      }
      callback();

      // console.log(callback);
    },
  },
};
</script>

<style scoped lang="less">
.center {
  width: 240px;
  overflow: hidden;
  margin: 0 auto;
  /deep/ .login-form {
    background-color: #fff !important;
  }
  .centerall {
    margin: 0 auto;
  }
  .loginchange {
    display: flex;
    width: 230px;
    justify-content: center;
    margin-top: 32px;

    .loginactive {
      color: #4d575e;
      border-bottom: 1px solid #4d575e;
    }
    li {
      padding: 0 0 4px 0;
      margin-bottom: 24px;
      font-size: 14px;
      text-align: left;
      color: #cccccc;
      line-height: 22px;
      cursor: pointer;
    }
  }
  .formbox {
    // /deep/ .ant-form-item {
    // margin-bottom: 0px !important;
    // padding-bottom: 20px !important;
    // }
    // .ant-form-item {
    // margin-top: -8px !important;
    // }
    /deep/ .ant-form-explain {
      margin-top: -2px;
      line-height: 20px;
      min-height: 20px !important;
    }
    /deep/.ant-input-affix-wrapper {
      i {
        font-size: 26px;
        // margin: 0 8px 0 4px;
        color: #4d575e;
      }

      .ant-input {
        height: 36px;
        text-indent: 15px;
        // background-color: #f6f6f6;
        // border: none;
        padding: 0 0 0 23px !important;
        border: 1px solid #dddddd;
        &:hover {
          border-color: #ff6a00;
        }
        &:focus {
          box-shadow: none;
        }
        &::placeholder {
          opacity: 0.4;
          color: #4d575e;
          font-size: 14px;
          text-indent: 15px;
        }
      }
    }
    .login-form-button {
      width: 100%;
      height: 36px;
      margin-top: 8px;
      border-radius: 27px;
      background-color: #ff6a00;
      font-size: 16px;
      border: none;
      color: white;
    }
    .register {
      display: flex;
      justify-content: center;
      font-size: 12px;
      span {
        color: #4d575e;
        i {
          vertical-align: middle;
          margin-right: 10px;
        }
      }
      a {
        color: #353649;
      }
    }
    .autologin {
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      > span {
        cursor: pointer;
        line-height: 18px;
        margin-top: 2px;

        input {
          margin-top: -3px;
          vertical-align: bottom;
        }
        label {
          transition: all 0.2s;
        }
        &:hover {
          color: #ff6a00;
        }
      }
      a {
        color: #4d575e;
      }
    }
    .getrulecode {
      font-size: 12px;
      width: 67px;
      text-align: center;
      border-left: 1px #cccccc solid;
      line-height: 12px;
      color: #4d575e;
      span[data-mark="getcode"] {
        padding: 0 0 0 5px;
        cursor: pointer;
      }
    }
  }
}
</style>