aida_front/src/views/Login.vue

<template>
  <div class="loginPage">
    <div class="left">
		<div class="imgBox">
			<video src="@/assets/images/homePage/login_banner.mp4" autoplay muted loop playsinline webkit-playsinline x5-playsinline></video>
		</div>
		<div class="fixed">Designed with AiDA</div>
		<div class="mask" v-show="loginType">
			<!-- <div class="bg"></div> -->
			<img src="@/assets/images/homePage/maskIcon.png" alt="">
		</div>
    </div>
    <div class="right">
    	<i class="fi fi-br-angle-left" @click="toBack" v-show="!loginType"></i>
      <div class="Text" v-show="!loginType">
		<img src="@/assets/images/homePage/aidaIcon.png" alt="">
        <div class="title">
			<p>Welcome to <span>AiDA</span></p>
		</div>
        <div class="info">
			AiDA, a first-to-market technology that empowers fashion designers, based on their creative inspirations, to work with AI to create original designs. 
        </div>
      </div>
      <div class="loginBox" :class="{'active':loginType}">
        <div class="selectType" v-show="!loginType">
          <div class="text">Continue with one of these:</div>
          <div class="typeList">
            <div class="gallery_btn" @click="setLoginType('personal')">
				Individual
            </div>
            <div class="gallery_btn" @click="setLoginType('school')">
				Academic
            </div>
            <!-- <div class="gallery_btn" @click="setLoginType('enterprise')">
				Enterprise
            </div> -->
          </div>
        </div>
        <div class="login" v-show="loginType">
          <div class="title">
			<i class="fi fi-br-angle-left" @click="loginBack"></i>
            <!-- <i class="fi fi-rr-arrow-left" @click="()=>loginType = ''"></i> -->
            <span>Log on to AiDA 3.1</span>
          </div>
		  <div class="info" v-show="!loginType">Please fill your information below</div>
          <personal ref="personal" v-if="loginType == 'personal'" v-model:isMask="isMask"></personal>
          <school ref="school" v-if="loginType == 'school'"></school>
          <enterprise ref="enterprise" v-if="loginType == 'enterprise'"></enterprise>

        </div>
      </div>
	  	<div class="mark_loading" v-show="isMask">
			<a-spin size="large" />
		</div>
    </div>
  </div>
</template>
<script lang="ts">
import {
  defineComponent,
  computed,
  ref,
  provide,
  nextTick,
  createVNode,
  toRefs,
  reactive,
  onMounted
} from "vue";
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { Https } from "@/tool/https";
import { useStore } from "vuex";
import { useI18n } from "vue-i18n";
import md5 from "md5";
import Works from "@/views/HomeView/Works.vue";
import { message } from "ant-design-vue";
import { isEmail } from "@/tool/util";
import personal from "@/component/LoginPage/login/personal.vue";
import { useRoute,useRouter } from 'vue-router';
import school from "@/component/LoginPage/login/school.vue";
import enterprise from "@/component/LoginPage/login/enterprise.vue";
import { setCookie, WriteCookie } from "@/tool/cookie";
export default defineComponent({
  components: {
    Works,
    personal,
    school,
    enterprise,
  },
  props: {},
  emits: [],
  setup(props, { emit }) {
    const store = useStore();
	const router = useRouter()
	const route = useRoute()
    const loginData = reactive({
      loginType: "",
      isMask: false,
    });
    const dataDom = reactive({
		personal: null as any,
		school: null as any,
		enterprise: null as any,
	}) as any;
    const setLoginType = (str: any) => {
      loginData.loginType = str;
    };
	const loginBack = ()=>{
		if(dataDom?.[loginData.loginType].emailStap == 2){
			dataDom[loginData.loginType].emailLastStepFun()
		}else{
			loginData.loginType = ''
		}
	}
	const toBack = ()=>{
		router.push('/Square')
	}
	const setSuccessLogin = (rv: any)=>{
      if (rv) {
        if (rv.systemUser == 4) {
          rv.systemUser = 1;
        }
        let isTest = rv.systemUser == 3 ? true : false;
        let isBeginner = rv?.isBeginner == 1 ? true : false;
        let token = rv.token;
        setCookie("isMurmur", false);
        setCookie("token", token);
        setCookie("isTest", isTest);
        setCookie("isBeginner", isBeginner);
        setCookie("isBeginnerNum", 0); //从第一步开始，机器人开始的话就是从第二部开始
        setCookie("userInfo", JSON.stringify(rv));
        let userid: any = {
          ueserId: rv.userId,
          systemUser: rv.systemUser,
        };
        if (rv.email) userid.email = rv.email;
        	store.commit("upUserDetail", userid);
        if (window.innerWidth < 768) {
          message.info(
            "If you need to design, please log in using an iPad or computer."
          );
          	turnToHomePage("/Square");
        } else {
          	turnToHomePage("/home");
        }
        sessionStorage.setItem("isTimeOne", JSON.stringify(false)); //是否需要公告 提示 弹窗
        let randomNum: any =
          Math.floor(Math.random() * 9000000000000000) + 1000000000000000;
        sessionStorage.setItem("sessionId", randomNum);
        sessionStorage.setItem("record", JSON.stringify([]));
      }
    }
	const turnToHomePage = (str: any)=>{
      store.commit("clearAllData");
      store.commit("clearAllCollection");
      store.commit("setAllBoardDataChoose", {});
      store.commit("clearShowSketchboard", {});
      router.push(str);
    }
	const wechatLogin =(value: any)=>{
      let data = {
        code: value.code,
        type: 2,
      };
      Https.axiosGet(Https.httpUrls.parseWeChatCode, { params: data })
        .then((rv: any) => {
          setSuccessLogin(rv);
        })
        .catch((res) => {
        });
    }
	onMounted(()=>{
		const data = route.query;
		if (data?.state == "weiXin") {
			wechatLogin(data);
		}
	}) 
    return {
      ...toRefs(dataDom),
      ...toRefs(loginData),
      setLoginType,
	  loginBack,
	  toBack,
    };
  },
  provide() {
    return {};
  },
});
</script>
<style lang="less" scoped>
.loginPage {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  background: #000;
  > .left,
  > .right {
    height: 100%;
  }
  > .left {
    width: 41%;
    // width: 55%;
    position: relative;
	background: #000;
	overflow: hidden;
	> .mask{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, rgba(49, 49, 49, 0.3) -4.74%, rgba(0, 0, 0, 0.55) 103.32%);

	}
	> .fixed{
		position: absolute;
		bottom: 1rem;
		right: 1rem;
		color: #fff;
	}
	> .imgBox{
		background: #000;
		height: 100%;
		width: 100%;
		position: relative;
		
		> video{
			width: 100%;
			object-fit: cover;
			height: 100%;
		}
	}
  }
  > .right {
	flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
	background: #fff;
	overflow: hidden;
	text-align: center;
	position: relative;
	> i{
		position: absolute;
		margin-right: 2.8rem;
		font-size: 2rem;
		cursor: pointer;
		align-items: center;
		width: 4.6rem;
		height: 4.6rem;
		border-radius: 1.2rem;
		display: flex;
		justify-content: center;
		border: 1px solid #D8DADC;
		left: 4rem;
		top: 4rem;
	}
    > .Text {
      width: 63rem;
      text-align: center;
	  > img{
			width: 12rem;
			height: 12rem;
			margin-bottom: 2rem;
		}
      > .title {
        font-size: 6.4rem;
		line-height: 1.2;
		margin-bottom: 2.4rem;
		p{
			margin-bottom: 0;
			font-weight: 400;
			font-family: 'pingfang_regular';
			> span{
				font-weight: 500;
				font-family: 'pingfang_medium';
			}
		}
      }
      > .info {
        font-size: 2.4rem;
		// margin-bottom: 4rem;
		margin-bottom: 7rem;
		font-weight: 300;
		line-height: 1.2;
		letter-spacing:-.5px;
		font-family: 'satoshi_light';
      }
      > .continue {
        > i {
          margin-left: 1rem;
        }
      }
    }
    > .loginBox {
      width: 36.9rem;
	//   margin-top: 7rem;
	  &.active{
		width: 63rem;
	  }
      > .selectType {
        width: 100%;
        text-align: center;
        > .text {
          font-size: 2.8rem;
          font-weight: 500;
		  margin-bottom: 2.4rem;
        }
        > .typeList {
			> .gallery_btn{
				
			}
          > div {
            margin: 0 auto;
			width: 100%;
			background: transparent;
            border-radius: 9rem;
            border: 1.3px solid;
            display: flex;
            align-items: center;
            justify-content: center;
			margin-bottom: 2.4rem;
			font-size: 2.4rem;
			font-weight: 500;
			color: #000;
			&:hover{
				background: #000;
				color: #fff;
			}
          }
        }
      }
      > .login {
        position: relative;
        > .title {
          font-size: 3.6rem;
		  font-weight: 500;
          display: flex;
          align-items: center;
		  margin-bottom: 1.2rem;
          > i {
            margin-right: 2.8rem;
            font-size: 2rem;
            display: flex;
            cursor: pointer;
            align-items: center;
			width: 4.6rem;
			height: 4.6rem;
			border-radius: 1.2rem;
			display: flex;
			justify-content: center;
			border: 1px solid #D8DADC;
          }
		 
        }
		> .info{
			font-weight: 500;
			font-size: 1.6rem;
			text-align: left;
			color: #667085;
		}
      }
    }
  }
}
</style>