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 @click="isauto = !isauto" style="opacity: 0">
                <i class="iconfont icon-xuanzhong" v-if="isauto"></i>
                <i
                  class="iconfont icon-weixuanzhong"
                  v-else
                  style="color: #999"
                ></i>
                <label for="register">下次自动登录</label></span
              >
              <router-link to="updatepsw" class="login-form-forgot" href=""
                >忘记密码</router-link
              >
            </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="[
                  '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>
            <div class="autologin">
              <span @click="isauto = !isauto" style="opacity: 0">
                <i class="iconfont icon-xuanzhong" v-if="isauto"></i>
                <i
                  class="iconfont icon-weixuanzhong"
                  v-else
                  style="color: #999"
                ></i>
                <label for="register">下次自动登录</label>
              </span>
              <router-link to="/updatepsw" class="login-form-forgot" href=""
                >忘记密码</router-link
              >
            </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 {
  inject: ["reload"],
  // 组件名称
  name: "",
  // 局部注册的组件
  components: {
    timmer,
  },
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {
      loginway: 1,
      ischecked: false,
      isauto: 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.reload();
            // 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);
            if (data.status !== 200) {
              this.$message.warning(data.msg);
              return;
            }
            localStorage.setItem("LOGIN_DATA", JSON.stringify(data.data));
            this.$router.push("/list");
            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);
    },
  },
};
</script>

<style scoped lang="less">
.center {
  width: 240px;
  margin: 0 auto;
  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: 50px;
      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-form-item {
      margin-top: -10px;
      /deep/ .ant-form-explain {
        margin-top: -2px;
        line-height: 20px;
        min-height: 20px !important;
      }
      i {
        font-size: 26px;
        // margin: 0 8px 0 4px;
        color: #4d575e;
      }

      .ant-input {
        height: 32px;
        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: 20px;
      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;
      margin-top: -16px;
      > span {
        cursor: pointer;
        line-height: 18px;
        margin-top: 2px;
        i {
          color: #ff6a00;
          font-size: 14px;
          vertical-align: middle;
          margin-right: 5px;
        }
        input {
          margin-top: -3px;
          vertical-align: bottom;
        }
        label {
          transition: all 0.2s;
          font-size: 12px;
          &:hover {
            color: #ff6a00;
          }
        }
      }
      a {
        color: #4d575e;
      }
    }
    .getrulecode {
      // padding: 0 0 0 10px;
      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>