frame/layout/register/login.vue

<template>
  <div id="login">
    <el-row>
      <el-col :span="24" class="style" :style="'background: url(' + loginBei + ')no-repeat center center;'">
        <el-col :span="24" class="login">
          <el-col :span="16" class="left">
            <el-image class="image" :src="logoUrl"></el-image>
            <p class="title">吉林省高等学校毕业生就业信息网</p>
          </el-col>
          <el-col :span="8" class="right">
            <el-col :span="24" class="title">
              教师甄选登录系统
            </el-col>
            <el-col :span="24">
              <el-tabs v-model="activeName" type="border-card" :stretch="true">
                <el-tab-pane label="账号登录" name="first">
                  <data-form
                    :data="{}"
                    :fields="fields"
                    :rules="rules"
                    @save="handleSave"
                    :isNew="true"
                    label-width="80px"
                    :styles="{}"
                    submitText="登陆"
                  ></data-form>
                </el-tab-pane>
                <el-tab-pane label="扫码登录" name="second">
                  <el-row v-if="!loading" v-loading="loading" style="text-align:center">
                    <qrcode exchange="qrcode.login" :uri="qrUri" :config="config" :qrcode="qrcode" @toReturn="toReturn"></qrcode>
                  </el-row>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-col>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Vue from 'vue';
import '@frame/plugins/setting';
import qrcode from '@frame/components/qrcode.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
import dataForm from '@frame/components/form';
import _ from 'lodash';
const { mapActions } = createNamespacedHelpers('login');
export default {
  name: 'login',
  metaInfo: { title: '登陆' },
  props: {},
  components: { dataForm, qrcode },
  data: () => ({
    loginBei: require('../../assets/bg.jpg'),
    activeName: 'first',
    fields: [
      { label: '手机号', required: true, model: 'mobile', options: { maxLength: 11, minLength: 11 } },
      { label: '密码', required: true, model: 'passwd', type: 'password' },
    ],
    rules: {
      mobile: [{ required: true, message: '请输入手机号' }],
      passwd: [{ required: true, message: '请输入密码' }],
    },
    form: {},
    logoUrl: require('../../assets/logo.png'),
    qrUri: '',
    config: {},
    qrcode: '',
    loading: true,
  }),
  created() {
    this.toConnection();
  },
  computed: {},
  methods: {
    ...mapActions(['login', 'getQrcode']),
    async handleSave({ data }) {
      let res = await this.login({ user: data, router: this.$router });
    },
    async toConnection() {
      let res = await this.getQrcode();
      this.$set(this, `qrcode`, res);
      this.$set(this, `config`, { weixin: Vue.config.weixin, stomp: Vue.config.stomp });
      let uri = `/api/train/auth?redirect_uri=${Vue.config.weixin.target}/confirm&type=2&qrcode=${res}`;
      this.$set(this, `qrUri`, uri);
      this.loading = false;
    },
    async toReturn(message) {
      let openid = message.headers.openid;
      let res = await this.login({ user: { openid: openid, qrcode: this.qrcode }, router: this.$router, isWx: true });
    },
  },
};
</script>

<style lang="less" scoped>
.style {
  width: 100%;
  height: 100vh;
  background: #5dac81;
  background-size: cover;
  text-align: center;
}
.login {
  position: absolute;
  top: 20%;
  left: 15%;
  width: 850px;
  height: 400px;
  background-color: #ffffff8f;
  border: 1px solid #3f7dff;
  border-radius: 10px;
}
.login .left .image {
  margin: 80px 0 0 0;
}
.login .left .title {
  font-size: 30px;
  padding: 15px 0;
  color: #1770c4;
  font-family: cursive;
  text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff;
  font-weight: 600;
}
.login .right {
  height: 398px;
  background: #fff;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
.login .right .title {
  font-size: 20px;
  padding: 20px 0;
  font-weight: bold;
}
.el-tabs {
  height: 330px;
  border-bottom-right-radius: 10px;
}
/deep/.el-tabs__header {
  margin: 0;
}
/deep/.el-tabs__nav-wrap::after {
  background-color: transparent;
}
/deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
  padding-left: 30px;
}
/deep/.el-tabs--top .el-tabs__item.is-top:last-child {
  padding-right: 30px;
}
/deep/.el-tabs__item {
  padding: 0 30px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
  padding: 0;
}
</style>