bocai_supplyChain_pc/src/views/login.vue

<template>
  <div class="login-container">
    <div class="contentbox">
      <div class="center centerall">
        <div class="logo">
          <img src="../assets/logo.png" alt="" />
        </div>
        <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" style="text-align: center">
            <a-form
              id="components-form-demo-normal-login"
              :form="form"
              class="login-form"
              @submit="handleSubmit"
            >
              <a-form-item>
                <a-input
                  v-decorator="[
                    'tel',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入用户名',
                        },
                      ],
                    },
                  ]"
                  placeholder="请输入用户名"
                >
                  <i
                    slot="prefix"
                    class="iconfont icon-yonghuming"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'password',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入正确的密码',
                        },
                      ],
                    },
                  ]"
                  type="password"
                  placeholder="请输入密码"
                >
                  <i
                    slot="prefix"
                    class="iconfont icon-mima"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-item>
              <div class="autologin">
                <a-checkbox
                  v-decorator="[
                    'remember',
                    {
                      valuePropName: 'checked',
                      initialValue: true,
                    },
                  ]"
                >
                  下次自动登录
                </a-checkbox>
                <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">
              <span><i class="iconfont icon-weixin"></i>微信登录</span>
              <a href="">还没有账号，立即注册</a>
            </div>
          </template>
          <template v-if="loginway === 2" style="text-align: center">
            <a-form
              id="components-form-demo-normal-login"
              :form="form"
              class="login-form"
              @submit="handleSubmit"
            >
              <a-form-item>
                <a-input
                  v-decorator="[
                    'tel',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入手机号',
                        },
                      ],
                    },
                  ]"
                  placeholder="请输入手机号"
                >
                  <i
                    slot="prefix"
                    class="icon-shouji iconfont"
                    style="color: rgba(0, 0, 0, 0.25)"
                  />
                </a-input>
              </a-form-item>
              <a-form-item>
                <a-input
                  v-decorator="[
                    'code',
                    {
                      rules: [
                        {
                          required: true,
                          message: '请输入验证码',
                        },
                      ],
                    },
                  ]"
                  type="text"
                  placeholder="请输入验证码"
                >
                  <i
                    slot="prefix"
                    class="icon-duanxinyanzheng iconfont"
                    style="color: rgba(0, 0, 0, 0.25); font-size: 18px"
                  />
                  <span class="getrulecode" slot="suffix" @click="getPhoneCode"
                    >获取验证码</span
                  >
                </a-input>
              </a-form-item>
              <div class="autologin">
                <a-checkbox
                  v-decorator="[
                    'remember',
                    {
                      valuePropName: 'checked',
                      initialValue: true,
                    },
                  ]"
                >
                  下次自动登录
                </a-checkbox>
                <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">
              <span><i class="iconfont icon-weixin"></i>微信登录</span>
              <a href="">还没有账号，立即注册</a>
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="imgbox">
      <img src="../assets/loginimg.png" alt="" />
    </div>
  </div>
</template>

<script>
import { loginApi, getPhoneCodeApi } from "../api/login";
export default {
  // 组件名称
  name: "login",
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      loginway: 1,
      form: this.$form.createForm(this, { name: "normal_login" }),
    };
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {},
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    handleSubmit(e) {
      e.preventDefault();
      const that = this;
      let params;
      this.form.validateFields(async (err, values) => {
        console.log(values);
        if (that.loginway === 1) {
          params = { ...values, loginType: 0 };
        } else {
          params = { ...values, loginType: 1 };
        }
        console.log(params);
        try {
          const data = await loginApi(params);
          console.log(data);
        } catch (err) {
          console.log(err);
        }
        if (!err) {
          console.log("Received values of form: ", values);
        }
      });
    },
    async getPhoneCode() {
      this.form.validateFields(async (err, values) => {
        console.log(values);
        try {
          const data = await getPhoneCodeApi({ tel: values.tel });
          console.log(data);
        } catch (error) {
          console.log(error);
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.login-container {
  display: flex;
  width: 100vw;
  > div {
    flex: 1;
    height: 100vh;
  }
  .contentbox {
    background-color: white;
    position: relative;
    .centerall {
      margin: 0 auto;
    }
    .center {
      width: 497px;
      overflow: hidden;
      .logo {
        width: 420px;
        height: 60px;
        margin: 100px auto;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .loginchange {
        display: flex;
        width: 290px;
        justify-content: space-between;
        .loginactive {
          color: #4d575e;
          border-bottom: 2px solid #4d575e;
        }
        li {
          padding: 8px 0;
          margin-bottom: 60px;
          font-size: 16px;
          text-align: left;
          color: #cccccc;
          line-height: 22px;
          cursor: pointer;
        }
      }
      .formbox {
        /deep/.ant-input-affix-wrapper {
          i {
            font-size: 24px;
          }
          .ant-input {
            height: 70px;
            text-indent: 15px;

            &::placeholder {
              font-size: 16px;
              text-indent: 15px;
            }
          }
        }
        .login-form-button {
          width: 100%;
          height: 70px;
          margin-top: 50px;
          background-color: #ff6a00;
          font-size: 20px;
          border: none;
          color: white;
        }
        .register {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          span {
            color: #4d575e;
            i {
              vertical-align: middle;
              margin-right: 10px;
            }
          }
          a {
            color: #ff6a00;
          }
        }
        .autologin {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          a {
            color: #ff6a00;
          }
        }
        .getrulecode {
          padding: 0 0 0 10px;
          font-size: 16px;

          border-left: 2px #cccccc solid;
          line-height: 16px;
          color: #ff6a00;
        }
      }
    }
  }
  .imgbox {
    background-color: skyblue;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>