373 lines
9.1 KiB
Vue
373 lines
9.1 KiB
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>
|