exam/exam-06173-vue/src/views/login/index.vue

<template>
  <div>
    <el-row>
      <el-col :lg="14" :md="10" class="left hidden-sm-and-down">
        <img src="@/assets/web/images/login2.png" style="height: 45vh" />
      </el-col>
      <el-col :lg="10" :md="14" class="right">
        <div class="box">
          <el-tabs v-model="activeName">
            <el-tab-pane label="账号登录" name="account">
              <el-form
                v-if="activeName === 'account'"
                ref="postForm"
                :model="postForm"
                :rules="loginRules"
              >
                <el-form-item prop="username">
                  <el-input
                    v-model="postForm.username"
                    style="width: 100%"
                    placeholder="用户名"
                    prefix-icon="el-icon-user"
                  />
                </el-form-item>

                <el-form-item prop="password">
                  <el-input
                    v-model="postForm.password"
                    style="width: 100%"
                    placeholder="密码"
                    type="password"
                    prefix-icon="el-icon-lock"
                  />
                </el-form-item>

                <el-form-item prop="captchaValue">
                  <yf-captcha ref="captcha" v-model="postForm" />
                </el-form-item>

                <el-form-item>
                  <el-button
                    :loading="loading"
                    type="primary"
                    style="width: 100%"
                    @click.native.prevent="accountLogin"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane label="手机登录" name="mobile" v-if="false">
              <el-form
                v-if="activeName === 'mobile'"
                ref="postForm"
                :model="postForm"
                :rules="loginRules"
              >
                <el-form-item prop="mobile">
                  <el-input
                    v-model="postForm.mobile"
                    style="width: 100%"
                    placeholder="手机号码"
                    prefix-icon="el-icon-mobile"
                  />
                </el-form-item>

                <el-form-item prop="smsCode">
                  <sms-input ref="sms" v-model="postForm" :type="2" />
                </el-form-item>

                <el-form-item>
                  <el-button
                    :loading="loading"
                    type="primary"
                    style="width: 100%"
                    @click.native.prevent="mobileLogin"
                    >登录</el-button
                  >
                </el-form-item>
              </el-form>
            </el-tab-pane>
          </el-tabs>

          <div style="text-align: right; line-height: 10px">
            <el-link href="/#/register">立即注册</el-link>
            <el-link href="/#/forgot" style="margin-left: 10px"
              >忘记密码？</el-link
            >
          </div>

          <login-demo v-if="isDemo" />

          <div
            v-if="siteData.h5Code || siteData.mpCode"
            style="line-height: 35px; margin-top: 10px"
          >
            <div class="title-line">手机端</div>
            <el-button
              v-if="siteData.h5Code"
              size="mini"
              round
              @click="showH5Code"
              >H5学员端</el-button
            >
            <el-button
              v-if="siteData.mpCode"
              size="mini"
              type="success"
              round
              @click="showMpCode"
              >小程序学员端</el-button
            >
          </div>

          <third-login />
        </div>
      </el-col>
    </el-row>

    <el-dialog
      :visible.sync="h5Visible"
      width="340px"
      style="text-align: center"
    >
      <div class="code-tips">扫码进入H5学员端</div>
      <img
        :src="siteData.h5Code"
        style="width: 300px; border: #ddd 1px solid"
      />
    </el-dialog>

    <el-dialog
      :visible.sync="mpVisible"
      width="340px"
      style="text-align: center"
    >
      <div class="code-tips">扫码进入小程序学员端</div>
      <img
        :src="siteData.mpCode"
        style="width: 300px; border: #ddd 1px solid"
      />
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import LoginDemo from "./components/demo";
import YfCaptcha from "@/components/Captcha";
import SmsInput from "@/components/SmsInput";
import ThirdLogin from "@/views/login/components/third-login";

export default {
  components: { ThirdLogin, SmsInput, YfCaptcha, LoginDemo },
  data() {
    return {
      isDemo: this.$demo,
      activeName: "account",
      loading: false,
      h5Visible: false,
      mpVisible: false,
      wxVisible: false,
      postForm: {
        smsCode: "",
        captchaKey: "",
        captchaValue: "",
      },
      loginRules: {
        username: [
          { required: true, trigger: "blur", message: "用户名不能为空" },
        ],
        password: [
          { required: true, trigger: "blur", message: "密码不能为空" },
        ],
        captchaValue: [
          { required: true, trigger: "blur", message: "验证码不能为空" },
        ],
        smsCode: [
          { required: true, trigger: "blur", message: "短信验证码不能为空" },
        ],
        mobile: [
          { required: true, trigger: "blur", message: "手机号不能为空" },
        ],
      },
    };
  },

  computed: {
    ...mapGetters(["siteData"]),
  },

  mounted() {
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    window.removeEventListener("keydown", this.keyDown, false);
  },

  methods: {
    showH5Code() {
      this.h5Visible = true;
    },
    showMpCode() {
      this.mpVisible = true;
    },

    loginBack(res) {
      // 学员端
      if (res.roleType === 1) {
        this.$router.push({ path: "/" });
      } else {
        // 其它跳到后台
        this.$router.push({ path: "/admin/dashboard" });
      }
    },

    async mobileLogin() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/mobileLogin", this.postForm)
            .then((res) => {
              this.loginBack(res);
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },

    accountLogin() {
      this.$refs.postForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$store
            .dispatch("user/login", this.postForm)
            .then((res) => {
              this.loginBack(res);
            })
            .catch(() => {
              this.loading = false;
            });
        }
      });
    },

    studentRegister() {
      this.$router.push({ name: "Register" });
    },

    keyDown(e) {
      if (e.keyCode == 13) {
        if (this.activeName === "account") {
          this.accountLogin();
        }

        if (this.activeName === "mobile") {
          this.mobileLogin();
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  position: relative;
  z-index: 50;
}
</style>