bocai_supplyChain_pc/src/components/Login/login.vue

<template>
  <div class="center">
    <div class="formcontainer">
      <ul class="loginchange centerall">
        <li :class="{ loginactive: loginway === 1 }" @click="loginway = 1">
          用户名密码登录
        </li>
        <li :class="{ loginactive: loginway === 2 }" @click="loginway = 2">
          手机验证码登录
        </li>
      </ul>
      <div class="formbox">
        <template v-if="loginway === 1">
          <a-form
            id="components-form-demo-normal-login"
            :form="form"
            class="login-form"
            @submit="userhandleSubmit"
          >
            <a-form-item style="text-align: left">
              <a-input
                v-decorator="[
                  'tel',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入用户名',
                      },
                      {
                        pattern: /^1[3456789]\d{9}$/,
                        message: '请输入正确手机号',
                      },
                    ],
                    validateTrigger: 'submit',
                  },
                ]"
                :maxLength="11"
                placeholder="请输入用户名"
              >
                <i
                  slot="prefix"
                  class="iconfont icon-yonghuming"
                  style="font-size: 24px"
                />
              </a-input>
            </a-form-item>
            <a-form-item style="text-align: left">
              <a-input
                v-decorator="[
                  'password',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入密码',
                      },
                    ],
                    validateTrigger: 'submit',
                  },
                ]"
                type="password"
                placeholder="请输入密码"
              >
                <i slot="prefix" class="iconfont icon-mima" />
              </a-input>
            </a-form-item>
            <div class="autologin">
              <span
                ><input
                  type="checkbox"
                  name="register"
                  v-model="ischecked"
                  @change="checked"
                  style="margin-right: 5px; vertical-align: middle"
                  va
                />
                <span>下次自动登录</span></span
              >
              <a class="login-form-forgot" href="">忘记密码</a>
            </div>
            <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>
        <template v-if="loginway === 2">
          <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="[
                  'phone',
                  {
                    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>
            <div class="autologin">
              <span>
                <input
                  type="checkbox"
                  name="register"
                  v-model="ischecked"
                  @change="checked"
                  style="margin-right: 5px; vertical-align: middle"
                />
                <span>下次自动登录</span>
              </span>
              <a class="login-form-forgot" href="">忘记密码</a>
            </div>
            <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 { loginApi, getPhoneCodeApi } from "../../api/login";
import timmer from "./components/countback.vue";

export default {
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {
    timmer,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      loginway: 1,
      ischecked: false,
      form: this.$form.createForm(this),
      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: {
    userhandleSubmit(e) {
      // 用户名登录提交
      e.preventDefault();
      let params;
      this.form.validateFields(async (err, values) => {
        console.log(values);
        if (!err) {
          params = { ...values, loginType: 0 };

          console.log(params);
          try {
            const { data } = await loginApi(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("/list");

            // this.$router.push("/list");
          } catch (err) {
            console.log(err);
          }
        } else {
          console.log(err);
        }
      });
    },
    phonehandleSubmit(e) {
      e.preventDefault();
      let params;
      this.form1.validateFields(async (err, values) => {
        console.log(err);
        if (!err) {
          params = { ...values, loginType: 1 };
          try {
            const data = await loginApi(params);
            console.log(data);
          } catch (err) {
            console.log(err);
          }
        } else {
          console.log(err);
        }
      });
    },
    async getPhoneCode() {
      const that = this;

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

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

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

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

    .loginactive {
      color: #4d575e;
      border-bottom: 1px solid #4d575e;
    }
    li {
      padding: 0 0 4px 0;
      margin-bottom: 30px;
      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;
    // }
    /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;
        &: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: 40px;
      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: 14px;
      > span {
        cursor: pointer;
        input {
          &:hover {
            border-color: #ff6a00;
          }
        }
        span {
          transition: all 0.5s;
        }
        &:hover {
          color: #ff6a00;
        }
      }
      a {
        color: #4d575e;
      }
    }
    .getrulecode {
      padding: 0 0 0 10px;
      font-size: 14px;
      width: 82px;
      text-align: center;
      border-left: 1px #cccccc solid;
      line-height: 14px;
      color: #4d575e;

      span[data-mark="getcode"] {
        cursor: pointer;
      }
    }
  }
}
</style>