hfysite/pages/manger/Login.vue

<template>
  <div id="app" class="bgImg w-full h-full flex bg-black">
    <div class=" w-8/12 h-full hidden md:flex justify-center items-center p-10 bg-blue-400 relative bg-map">
        <div class="w-full h-full bgImg absolute"></div>
        <div class="w-full h-4/5 bottom-0 absolute flex items-center justify-center relative">
          <div class="lbx absolute">
            <img src="/image/big/lbx.png" alt="lbx">
          </div>

          <div class="jt absolute ">
            <img src="/image/big/jt.png" alt="背景图片">
          </div>
          <div class="map absolute ">
            <img src="/image/big/map.png" alt="地球">
          </div>
          <div class="rounded-img absolute ">
            <img src="/image/big/rounded.png" alt="地球">
          </div>
          <div class="w-auto relative bottom-1/5">
            <h1 class="text-7xl text-white">合方圆管理平台</h1>
            <h2 class="text-2xl mt-3 text-gray-200">合天地方圆·尽在掌握</h2>
            <h2 class="mt-0.5 text-gray-500">HFY·<a href="/hfy">深圳合方圆</a></h2>
          </div>

        </div>
    </div>
<!--    登陆框逻辑-->
    <div class="w-full md:w-3/12   h-full flex justify-center md:justify-start items-center relative">
      <div class="blur w-full h-full absolute bg-blue-300 opacity-50 bgImg"></div>
      <div class="login-box w-80 h-auto rounded px-0.5 text-gray-200 relative">
        <h2 class="pt-2 text-xl">欢迎您,请登陆</h2>

        <div class="w-full px-1.5 flex">
          <div class="w-4/12 flex items-center u px-1"><p class="w-full text-justify">用户名</p> </div>
          <div class="w-8/12">
              <a-input placeholder="用户名" v-model="form.owner.val"  @focus="form.owner.msg=''" @blur="checkFormItem('owner')"></a-input>
              <div class="w-full  text-red-600" v-show="form.owner.msg" >
                {{form.owner.msg}}
              </div>
          </div>
        </div>
        <div class="w-full px-1.5 mt-3.5 flex">
          <div class="w-4/12 flex items-center u px-1 "><p class="w-full text-justify">登陆密码</p> </div>
          <div class="w-8/12">
            <a-input-password placeholder="登陆密码" v-model="form.password.val" @focus="form.password.msg=''"  @blur="checkFormItem('password')"></a-input-password>
            <div class="w-full text-red-600" v-show="form.password.msg" >
              {{form.password.msg}}
            </div>
          </div>
        </div>

        <div class="w-full px-1.5 mt-3.5 flex">
          <div class="w-4/12 u px-1 pt-1.5"><p class="w-full text-justify">验证码</p> </div>
          <div class="w-8/12">
            <a-input
                class="w-full"
                placeholder="验证码,忽略大小写"
                @keydown.enter="submitHandle"
                v-model="form.captcha.val"
                @focus="form.captcha.msg=''"
                @blur="checkFormItem('captcha')"
            />
            <div class="w-full  text-red-600" v-show="form.captcha.msg" >
              {{form.captcha.msg}}
            </div>
            <captcha class="w-full h-24 overflow-hidden mt-1.5 rounded" ref="captchaImg" captcha-url="/api/captcha/"></captcha>
          </div>
        </div>

        <div class="w-full">
          <div class="px-2">

            <light-button @click.native="submitHandle" >登陆</light-button>
          </div>
        </div>
        <div class="border-t px-2  ">
          <span class="mr-4 text-blue-300" >
            <a href="/">备案号</a>
          </span>
          <a href="/">首页</a>
        </div>
      </div>
    </div>
    <div class="w-1/12 h-full hidden md:flex bg-gray-800 opacity-30"></div>
  </div>
</template>

<script>

import Vue from 'vue'
// 引用ant-design-vue的input组件
import antInput from 'ant-design-vue/lib/input';
import 'ant-design-vue/dist/antd.css'
import { message } from 'ant-design-vue';
import { Modal } from 'ant-design-vue';

// import apis from '@/apis/apis'
import handle from "~/until/handle";
import fieldIsAllow from "~/until/fieldIsAllow"

import Captcha from "~/components/public/captcha";
import LightButton from "~/components/public/lightButton";
import {login_types} from "../../store/login";
import {rCode} from "../../map/rcodeMap_esm";

Vue.use(antInput);
// 引用message组件
Vue.prototype.$message = message;
// 引用modal组件
Vue.prototype.$success = Modal.success;
export default {
  name: 'App',
  components: {
    LightButton,
    Captcha,
  },
  async asyncData(ctx) {

  },
  beforeCreate() {
    // 修改页面title nuxt
    // this.$store.commit('setPageTitle', '合方圆管理平台');

  },
  data(){
    return {
      test: 'test',
      // 是否为固定
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
      form: {
        owner: {
          val:'',
          msg: '',
          state: 0,
        },
        password: {
          val:'',
          msg: '',
          state: 0,
        },
        captcha: {
          val:'',
          msg: '',
          state: 0,
        },
      },
      // 要切换的url地址
      jumpUrl: '/manger',
    }
  },
  computed:{
    captcha () {
      return this.$store.state.login.captcha
    }
  },
  beforeMount(){
  },
  mounted(){
    let url = window.sessionStorage.getItem('lastUrl');
    if(url){
      this.jumpUrl = url;
    }

  },
  methods:{
    setCaptcha(captcha){
      // this.$store..commit(login_types.mutations.SET_CAPTCHA, captcha);
      this.$store.commit('login/'+login_types.mutations.SET_CAPTCHA, captcha);
    },
    resetForm(){
      this.form.owner = '';
      this.form.password = '';
      this.form.captcha = '';
    },
    checkFormItem(field){
      // console.log(field);
      if (field){
        this.form[field].msg = fieldIsAllow({
          [field]:this.form[field].val,
        })
      }else{
        let r = true;
        for (const fieldKey in this.form) {
          this.form[fieldKey].msg = fieldIsAllow({
            [fieldKey]:this.form[fieldKey].val,
          })
          if (this.form[fieldKey].msg){
            r = false;
          }
        }
        return r
      }
    },
    async submitHandle(e){
      if(!this.checkFormItem()){
        return this.$message.warn("请检查登陆参数");
      }
      let owner = this.form.owner.val;
      let passwd = this.form.password.val;
      let captcha = this.form.captcha.val;
      // apis.user.login(owner,passwd,captcha)
      let [err,res] = await handle(this.$axios.post('/api/user/login',{
        owner,
        passwd,
        captcha,
      }));
      this.$refs.captchaImg.refreshCaptcha();
      if(err){
        console.log(err);
        return {};
      }
      let result = res.data;
      if(result.code === rCode.OK){
        this.countDown();
      }else{
        this.$message.error(result.msg);
        return {solutions:[]}
      }
    },
    // 登陆成功
    countDown() {
      let secondsToGo = 5,that=this;

      const modal = this.$success({
        title: '登陆成功',
        content: `将在${secondsToGo} 秒后自动跳转页面.`,
        okText:'立即跳转',
        onOk() {
          window.location.href=that.jumpUrl;
        },
      });
      const interval = setInterval(() => {
        secondsToGo -= 1;
        modal.update({
          content: `将在${secondsToGo} 秒后自动跳转页面.`,
        });
      }, 1000);
      setTimeout(() => {
        window.location.href=that.jumpUrl;
      }, 1+(secondsToGo * 1000));
    },
  }
}
</script>

<style>
html,body{
  margin: 0;
  padding: 0;
  height: 100vh;
  font-family: sans-serif;
}
.bgImg{
  background: url("/image/big/bg.png") center no-repeat;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100vw;
  height: 100vh;
}
.login-box{
  transform: translate(-50%, -0%);
  background: rgba(0,0,0,.4);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
  /*filter: blur(5px);*/
  transition: all .7s;
}
.blur{
  filter: blur(5px);
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
}
.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}
.u{
  text-align: justify;
  text-align-last:justify;
}

.lbx{
  animation: rounded-anim1 15s linear infinite;
}
.map{
  animation: rounded-anim1 60s linear infinite;
}
.jt{
  animation: rounded-anim1 15s reverse infinite ;
}
.rounded-img{
  animation: rounded-anim1 5s reverse infinite ;
}
@keyframes rounded-anim1 {
  0% {
    transform:rotate(0deg);
  }
  100% {
    transform:rotate(360deg);
  }
}



</style>