bocai_supplyChain_pc/src/components/Login/register.vue

<template>
  <div class="formcontainer">
    <div class="title centerall">新用户注册</div>
    <a-form
      id="components-form-demo-normal-login"
      :form="form"
      class="login-form"
      @submit="registerSubmit"
    >
      <a-form-item style="text-align: left">
        <a-input
          v-decorator="[
            'tel',
            {
              rules: rules.tel,
              validateTrigger: 'submit',

              validateFirst: true,
            },
          ]"
          autocomplete="off"
          :maxLength="11"
          placeholder="请输入手机号"
        >
          <i slot="prefix" class="icon-shouji iconfont" />
        </a-input>
      </a-form-item>
      <a-form-item style="text-align: left">
        <a-input
          v-decorator="[
            'code',
            {
              rules: rules.code,
              validateTrigger: 'submit',

              validateFirst: true,
            },
          ]"
          type="text"
          autocomplete="off"
          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: rules.password,
              validateTrigger: 'submit',

              validateFirst: true,
            },
          ]"
          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: rules.newpassword,
              validateTrigger: 'submit',

              validateFirst: true,
            },
          ]"
          type="password"
          placeholder="请再次输入密码"
        >
          <i slot="prefix" class="iconfont icon-mima" />
        </a-input>
      </a-form-item>
      <div style="text-align: left">
        <input
          type="checkbox"
          name="register"
          v-model="ischecked"
          @change="checked"
          style="margin-right: 5px; vertical-align: middle"
          va
        />
        <span label="register">注册即表示您已阅读并同意</span>

        <span style="color: #ff4400; font-size: 12px">《平台用户协议》</span>
      </div>
      <a-form-item>
        <span></span>
        <a-button type="primary" html-type="submit" class="login-form-button">
          注册
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { getPhoneCodeApi, registerApi } from "../../api/login";
import timmer from "./components/countback.vue";
export default {
  // 组件名称
  name: "login",
  // 局部注册的组件
  components: {
    timmer,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      loginway: 1,
      form: this.$form.createForm(this),
      timedata: {
        isfinish: true,
        deadline: 60,
        timmer: null,
      },
      setpassword: "",
      ischecked: false,
      rules: {
        tel: [
          {
            required: true,
            message: "请输入手机号",
          },
          {
            pattern: /^1[3456789]\d{9}$/,
            message: "请输入正确手机号",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入验证码",
          },
        ],
        password: [
          {
            required: true,
            message: "请输入密码",
          },
        ],
        newpassword: [
          {
            required: true,
            message: "请再次输入密码",
          },
          {
            validator: this.replacepassword,
          },
        ],
      },
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    registerSubmit(e) {
      e.preventDefault();
      console.log(1);
      this.form.validateFields(
        // ["tel", "code", "password"],
        async (err, values) => {
          console.log(values);
          console.log(err);

          if (!err && this.ischecked === true) {
            try {
              const { data } = await registerApi(values);
              console.log(data);
              if (data.status === 200) {
                this.$message.success("注册成功");
                this.$router.push("/login");
              } else {
                this.$message.warning(data.msg);
              }
            } catch (error) {
              console.log(error);
            }
          } else if (this.ischecked !== true) {
            this.$message.warning("请阅读并同意《平台用户协议》");
          }
        }
      );
    },
    getPhoneCode() {
      const that = this;

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

        if (!err) {
          that.timedata.isfinish = false;
          console.log(that.timedata.isfinish);
          console.log(this.setpassword + 1212121);

          try {
            const data = await getPhoneCodeApi({ tel: values.tel });
            console.log(data);
          } catch (error) {
            console.log(error);
          }
        } else {
          console.log(err);
        }
      });
    },
    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);
    },
    checked() {
      console.log(this.ischecked);
    },
  },
};
</script>

<style scoped lang="less">
.formcontainer {
  .centerall {
    margin: 0 auto;
  }
  .title {
    display: inline-block;
    text-align: center;
    color: #4d575e;
    border-bottom: 1px solid #4d575e;
    padding: 0 0 4px 0;
    margin-bottom: 25px;
    font-size: 14px;
    text-align: left;
    line-height: 22px;
    cursor: pointer;
  }
  /deep/.ant-input-affix-wrapper {
    i {
      font-size: 26px;
    }
    .ant-input {
      height: 36px;
      text-indent: 15px;
      border: none;
      background-color: #f6f6f6;
      &:focus {
        box-shadow: none;
      }
      &::placeholder {
        font-size: 14px;
        text-indent: 15px;
      }
    }
  }
  .login-form-button {
    width: 100%;
    height: 36px;
    margin-top: 20px;
    background-color: #ff4400;
    font-size: 20px;
    border: none;
    border-radius: 27px;
    color: white;
  }
  .register {
    display: flex;
    justify-content: space-between;
    font-size: 12px;

    span {
      color: #4d575e;
      i {
        vertical-align: middle;
        margin-right: 10px;
      }
    }
    a {
      color: #ff4400;
    }
  }
  .autologin {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    a {
      color: #ff4400;
    }
  }
  .getrulecode {
    padding: 0 0 0 10px;
    width: 89px;
    font-size: 14px;
    text-align: center;
    border-left: 1px #cccccc solid;
    line-height: 14px;
    color: #4d575e;
    span[data-mark="getcode"] {
      cursor: pointer;
    }
  }
}
</style>