fix
This commit is contained in:
X1627315083
275
src/component/mainPage/signUp/index.vue
Normal file
275
src/component/mainPage/signUp/index.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<template>
|
||||
<div class="signUp" v-if="signUp">
|
||||
<div class="selectSignUp" v-show="!isSelectSignUp">
|
||||
<div class="back" @click="close">
|
||||
< BACK
|
||||
</div>
|
||||
<div class="title">Choose your subscription plan</div>
|
||||
<div class="introduce" @click="()=>isSelectSignUp=true">LEARN MORE ALL OUR PRODUCT FEATURES</div>
|
||||
<div class="gallery_list product_list">
|
||||
<div class="gallery_item" v-for="item in productList" :key="item">
|
||||
<div class="product_signUp_box">
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="info">{{ item.info }}</div>
|
||||
<div class="detail">{{ item.detail }}</div>
|
||||
<div class="highlight">{{ item.highlight }}</div>
|
||||
<div class="gallery_btn gallery_btn_radius" @click="createAccount">Create account</div>
|
||||
</div>
|
||||
<ul class="product_detail">
|
||||
<li v-for="detailItem in item.detailList">{{ detailItem }}</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="introductDetail" v-show="isSelectSignUp">
|
||||
<div class="title">Choose your subscription plan</div>
|
||||
<div class="gallery_list introductList">
|
||||
<div class="gallery_item" v-for="item in introductList" :key="item">
|
||||
<div class="itemIcon">
|
||||
<img :src="item.img" alt="">
|
||||
</div>
|
||||
<div class="title">{{ item.title }}</div>
|
||||
<div class="info">{{ item.info }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="gallery_btn" style="width: 20rem;" @click="()=>isSelectSignUp=false">Create account</div>
|
||||
</div>
|
||||
<registerModel ref="registerModel"></registerModel>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { defineComponent, ref, reactive, watch, onMounted, nextTick, toRefs } from "vue";
|
||||
import registerModel from './registerModel.vue'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
registerModel,
|
||||
},
|
||||
name: "login",
|
||||
emits: ['close'],
|
||||
setup(props, { emit }) {
|
||||
let dom = reactive({
|
||||
registerModel:null
|
||||
})
|
||||
let data = reactive({
|
||||
signUp:false,
|
||||
isSelectSignUp:false,
|
||||
productList:[
|
||||
{
|
||||
title:"Personal version",
|
||||
info:"Try for 5 days",
|
||||
detail:"AI Fashion Design Assistant",
|
||||
highlight:"Free 5-day trial",
|
||||
detailList:[
|
||||
'AI Fashion Design Assistant',
|
||||
'Basic 3D service functions',
|
||||
'Individual Credit Limit for Independent Use',
|
||||
'Works can be shared in public galleries',
|
||||
'Support monthly/annual payment options',
|
||||
'Suitable for individual creators and freelance designers to use'
|
||||
]
|
||||
},{
|
||||
title:"Education Edition",
|
||||
info:"XXX / Year",
|
||||
detail:"Multi user management system for universities",
|
||||
highlight:"Free 5-day trial",
|
||||
detailList:[
|
||||
'Multi user management system for universities',
|
||||
'Credit limits are shared across the entire school',
|
||||
'AI assisted design teaching function',
|
||||
'Support sketch creativity and design inspiration teaching',
|
||||
'Basic 3D design functions',
|
||||
]
|
||||
},{
|
||||
title:"Enterprise Edition",
|
||||
info:"XXX / Year",
|
||||
detail:"Enterprise level multi person collaboration system",
|
||||
highlight:"Free 5-day trial",
|
||||
detailList:[
|
||||
'Enterprise level multi person collaboration system',
|
||||
'Internal Credit Sharing within Enterprises',
|
||||
'Brand DNA management system, customizable brand Exclusive design preferences',
|
||||
'Cloud based design generation and management',
|
||||
'Complete 3D design function, supporting high-definition printing output, professional plate making, and 3D rendering of renderings',
|
||||
'Enterprise level data security assurance',
|
||||
'Suitable for fashion design teams and brands to use',
|
||||
]
|
||||
},
|
||||
],
|
||||
introductList:[
|
||||
{
|
||||
img:'/image/homeIntroduct/introduct1.png',
|
||||
title:'Quickly generate images',
|
||||
info:'Based on your creative inspiration and brand DNA, it only takes 10 seconds to design a fashion collection',
|
||||
},{
|
||||
img:'/image/homeIntroduct/introduct2.png',
|
||||
title:'Generate plan',
|
||||
info:'Upload inspiration boards, colors, fabric printing patterns, and sketches to generate unlimited design suggestions',
|
||||
},{
|
||||
img:'/image/homeIntroduct/introduct3.png',
|
||||
title:'Simple operation',
|
||||
info:'Just a few clicks to save and retrieve your design',
|
||||
},{
|
||||
img:'/image/homeIntroduct/introduct4.png',
|
||||
title:'Cloud',
|
||||
info:'After subscribing, you can access it anytime and anywhere through the cloud system',
|
||||
},{
|
||||
img:'/image/homeIntroduct/introduct5.png',
|
||||
title:'Usage',
|
||||
info:'Simplified operation, it only takes about ten minutes to learn how to use it',
|
||||
},{
|
||||
img:'/image/homeIntroduct/introduct6.png',
|
||||
title:'Email',
|
||||
info:'By info@code-create.com.hk Contact us to learn more',
|
||||
},
|
||||
]
|
||||
})
|
||||
const init = ()=>{
|
||||
data.signUp = true
|
||||
}
|
||||
const close = ()=>{
|
||||
data.signUp = false
|
||||
emit('close')
|
||||
}
|
||||
const createAccount = ()=>{
|
||||
if(window.innerWidth < 768){
|
||||
dom.registerModel.pageWidth = '100%'
|
||||
}
|
||||
dom.registerModel.init()
|
||||
}
|
||||
onMounted(()=>{
|
||||
|
||||
})
|
||||
return {
|
||||
...toRefs(dom),
|
||||
...toRefs(data),
|
||||
init,
|
||||
close,
|
||||
createAccount,
|
||||
}
|
||||
},
|
||||
})
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.signUp{
|
||||
flex: 1;
|
||||
padding: 0rem 4rem;
|
||||
.back{
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
.back,.introduce{
|
||||
cursor: pointer;
|
||||
}
|
||||
.title,.introduce{
|
||||
font-weight: 600;
|
||||
margin-bottom: 4rem;
|
||||
}
|
||||
.title{
|
||||
font-size: 3rem;
|
||||
}
|
||||
.introduce{
|
||||
font-size: 2.4rem;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.gallery_list{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
.gallery_item{
|
||||
width: calc(33.333% - 3rem);
|
||||
.title,.info,.highlight{
|
||||
font-weight: 600;
|
||||
}
|
||||
.title{
|
||||
font-size: 2rem;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.info,.detail,.gallery_btn{
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
.detail{
|
||||
margin-top: 6rem;
|
||||
margin-bottom: 7.6rem;
|
||||
}
|
||||
.highlight{
|
||||
font-size: 2.4rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(88.13deg, #FBD2FF 0.91%, #E6D3FF 52.5%, #B694FF 101.09%);
|
||||
border-radius: 0px 2.8rem 0px 1rem;
|
||||
padding: 1rem 2rem;
|
||||
}
|
||||
.gallery_btn{
|
||||
line-height: 6rem;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.product_list{
|
||||
.gallery_item{
|
||||
.product_signUp_box{
|
||||
border-radius: 3rem;
|
||||
border: 2px solid #000;
|
||||
padding: 3rem;
|
||||
position: relative;
|
||||
}
|
||||
.product_detail{
|
||||
margin-top: 4rem;
|
||||
padding-left: 20px;
|
||||
li{
|
||||
list-style: disc;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
li:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.introductDetail{
|
||||
>.title{
|
||||
margin-top: 6rem;
|
||||
text-align: center;
|
||||
}
|
||||
.introductList{
|
||||
width: 130rem;
|
||||
margin: 8rem auto 0rem auto;
|
||||
}
|
||||
.gallery_item{
|
||||
margin-bottom: 6rem;
|
||||
.itemIcon{
|
||||
width: 8rem;
|
||||
height: 8rem;
|
||||
border-radius: 2rem;
|
||||
background: #000;
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.title{
|
||||
text-align: center;
|
||||
}
|
||||
.info{
|
||||
font-weight: 500;
|
||||
height: 9rem;
|
||||
}
|
||||
>div{
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
>div:last-child{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.gallery_btn{
|
||||
position: relative;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
977
src/component/mainPage/signUp/registerModel.vue
Normal file
977
src/component/mainPage/signUp/registerModel.vue
Normal file
@@ -0,0 +1,977 @@
|
||||
<template>
|
||||
<div ref="register"></div>
|
||||
<a-modal
|
||||
class="register generalModel"
|
||||
:get-container="() => $refs.register"
|
||||
v-model:visible="registerModel"
|
||||
:footer="null"
|
||||
:width="pageWidth"
|
||||
:maskClosable="false"
|
||||
:centered="true"
|
||||
:closable="false"
|
||||
:mask="registerModelMask"
|
||||
:keyboard="false"
|
||||
:destroyOnClose="true"
|
||||
:zIndex="1000"
|
||||
>
|
||||
<div class="generalModel_btn">
|
||||
<div class="generalModel_closeIcon" @click.stop="cancelDsign()">
|
||||
<!-- <i class="fi fi-rr-cross-small"></i> -->
|
||||
<svg width="46" height="46" viewBox="0 0 46 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="23" cy="23" r="23" fill="white" fill-opacity="0.3"/>
|
||||
<rect x="32.5063" y="12" width="3" height="29" rx="1.5" transform="rotate(45 32.5063 12)" fill="white"/>
|
||||
<rect x="34.6274" y="32.5059" width="3" height="29" rx="1.5" transform="rotate(135 34.6274 32.5059)" fill="white"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login_page">
|
||||
<div class="page_content">
|
||||
<!-- 账号密码和邮箱登录 start-->
|
||||
<div class="login_content" v-if="isLogin === 1">
|
||||
<div class="login_content_left">
|
||||
<div class="login_type_list">
|
||||
<div
|
||||
:class="[
|
||||
'login_type_item','username_login_item',
|
||||
'login_active',
|
||||
]"
|
||||
>
|
||||
Register for AiDA 3.0
|
||||
</div>
|
||||
</div>
|
||||
<!-- 账号密码登录 start -->
|
||||
<!-- v-show="loginType == 'username'" -->
|
||||
<div >
|
||||
<div class="login_form_content" :state="emailStap">
|
||||
<div class="login_form_title">Name</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your username"
|
||||
v-model="username"
|
||||
/>
|
||||
|
||||
<div class="login_form_title marign_top30">
|
||||
<div>Password</div>
|
||||
<!-- <div class="tip_content" @click="changeIsLogin(2)">
|
||||
Forgot password？
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="password_input_block">
|
||||
<input
|
||||
class="login_form_input"
|
||||
:type="passwordType"
|
||||
placeholder="Enter your password"
|
||||
v-model="password"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
<div class="icon iconfont icon-yanjing_yincang_o password_show_icon" @click="changePasswordType()"></div>
|
||||
</div>
|
||||
<div class="login_form_title marign_top30">Email</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your email address"
|
||||
v-model="email"
|
||||
@keydown.enter="submitPerLogin()"
|
||||
/>
|
||||
|
||||
<!-- 邮箱登录 start -->
|
||||
<div class="login_form_email" :class="{active:emailStap===2}">
|
||||
<!-- <div v-show="loginType == 'email'" class="login_form_email"> -->
|
||||
<!-- <div v-show="emailStap === 1" class="forget_password_content">
|
||||
<div class="forget_password_content_block" @click="changeLoginType('username')">
|
||||
<span class="icon iconfont fi-br-arrow-left"></span
|
||||
><span class="forget_password_content_title"
|
||||
>Log on to AiDA</span
|
||||
>
|
||||
</div>
|
||||
<div class="login_form_content">
|
||||
<div class="login_form_title">Email</div>
|
||||
<input
|
||||
class="login_form_input"
|
||||
placeholder="Enter your email address"
|
||||
v-model="email"
|
||||
@keydown.enter="emailNextStepFun()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="login_submit_button marign_top40"
|
||||
@click="emailNextStepFun()"
|
||||
>
|
||||
Sign In
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div v-show="emailStap === 2" class="email_last_step">
|
||||
|
||||
<div class="email_last_step_block" >
|
||||
<span class="email_last_step_content"
|
||||
>Verify with one-time verification code</span
|
||||
>
|
||||
<i class="fi fi-br-cross email_last_step_block_icon" @click="emailLastStepFun()"></i>
|
||||
</div>
|
||||
<div class="email_last_step_bottom">
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">
|
||||
Sent to {{ email }}
|
||||
</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{ time }}s</span>
|
||||
<span v-show="!time" @click="emailNextStepFun()"
|
||||
>Resend</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
<VerificationCodeInput
|
||||
:ct="emailCode"
|
||||
@sendCaptcha="submitEmailLogin($event)"
|
||||
></VerificationCodeInput>
|
||||
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content email_tip_content">
|
||||
Please check the junk box if you haven't received verification code
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="login_form_title marign_top30">
|
||||
<label :class="{active:emailStap == 2}">
|
||||
<input :state="emailStap" type="checkbox" v-model="checked">
|
||||
<span>I agree to all Term, Privacy Policy and Fees</span>
|
||||
</label>
|
||||
</div>
|
||||
<div class="thirdPartyLogin marign_top30">
|
||||
<googleLogin @googelLogin="googelLogin"></googleLogin>
|
||||
<weiXinLogin></weiXinLogin>
|
||||
<phoneLogin></phoneLogin>
|
||||
</div>
|
||||
<div
|
||||
class="login_submit_button marign_top40"
|
||||
style="width: 100%;"
|
||||
:state="emailStap"
|
||||
@click="submitPerLogin()"
|
||||
>
|
||||
Register
|
||||
</div>
|
||||
|
||||
<!-- <div class="login_text" >
|
||||
<div class="forget_password_text" @click="changeIsLogin(2)">Forgot your password</div>
|
||||
</div> -->
|
||||
|
||||
</div>
|
||||
<!-- 账号密码登录 end -->
|
||||
|
||||
</div>
|
||||
|
||||
<!-- 邮箱登录 end -->
|
||||
</div>
|
||||
|
||||
<!-- 忘记密码 start -->
|
||||
<div class="forget_password_content" v-else>
|
||||
<div class="forget_password_content_block" @click="forgetPasswordLastStepFun()">
|
||||
<!-- <span class="icon iconfont fi-br-arrow-left"></span
|
||||
> -->
|
||||
<i class="fi fi-br-arrow-left"></i>
|
||||
<span class="forget_password_content_title"
|
||||
>Retrieve password</span
|
||||
>
|
||||
</div>
|
||||
<div v-show="frogetPasswordStep === 1">
|
||||
<div class="forget_passored_form_content">
|
||||
<div class="forget_passored_form_title">Email</div>
|
||||
<input
|
||||
class="forget_passored_form_input"
|
||||
placeholder="Enter your email"
|
||||
v-model="forgetPasswordEmail"
|
||||
@keydown.enter="forgetPasswordNextStepFun()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="forget_submit_button marign_top40"
|
||||
@click="forgetPasswordNextStepFun()"
|
||||
>
|
||||
Next step
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="frogetPasswordStep === 2">
|
||||
<div class="forget_verif_code_des">Verification Code</div>
|
||||
<div class="email_last_step_des">
|
||||
<div class="sent_email_content">
|
||||
Sent to {{ forgetPasswordEmail }}
|
||||
</div>
|
||||
<div class="tip_content">
|
||||
<span v-show="time">{{ time }}s</span>
|
||||
<span
|
||||
v-show="!time"
|
||||
@click="forgetPasswordNextStepFun()"
|
||||
>Resend</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-show="frogetPasswordStep === 3">
|
||||
<div class="forget_passored_form_content">
|
||||
<div class="forget_passored_form_title">Password</div>
|
||||
<input
|
||||
class="forget_passored_form_input"
|
||||
placeholder="Enter a new password"
|
||||
v-model="newPassword"
|
||||
@keydown.enter="submitResetPassword()"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="forget_submit_button marign_top40"
|
||||
@click="submitResetPassword()"
|
||||
>
|
||||
Submit
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 忘记密码 end -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</a-modal>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent,ref,reactive,toRefs ,onMounted} from "vue";
|
||||
import { Https } from "@/tool/https";
|
||||
import { isEmail } from "@/tool/util";
|
||||
import { setCookie ,WriteCookie } from "@/tool/cookie";
|
||||
import { message } from "ant-design-vue";
|
||||
import VerificationCodeInput from "@/component/LoginPage/verificationCodeInput.vue";
|
||||
import googleLogin from "@/component/LoginPage/googleLogin.vue";
|
||||
import weiXinLogin from "@/component/LoginPage/weiXinLogin.vue";
|
||||
import phoneLogin from "@/component/LoginPage/phoneLogin.vue";
|
||||
import { useStore } from "vuex";
|
||||
import { useI18n } from "vue-i18n";
|
||||
import { setLang } from "@/tool/guide";
|
||||
const md5 = require("md5");
|
||||
export default defineComponent({
|
||||
components: {
|
||||
VerificationCodeInput,googleLogin,weiXinLogin,phoneLogin
|
||||
},
|
||||
setup(){
|
||||
let timer:any = 0;
|
||||
const {locale} = useI18n()
|
||||
const store = useStore();
|
||||
let register = reactive({
|
||||
registerModel:false,
|
||||
registerModelMask:true,
|
||||
pageWidth:'50%'
|
||||
})
|
||||
return{
|
||||
store,
|
||||
timer,
|
||||
...toRefs(register),
|
||||
locale
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked:false,
|
||||
isLogin: 1, //是否为登录 1-登录， 2-忘记密码
|
||||
loginType: "username",
|
||||
emailStap: 1, // 邮箱登录步骤
|
||||
emailCode: ["", "", "", "", "", ""], //邮箱验证码
|
||||
emailNextStep: true,
|
||||
username: "",
|
||||
password: "",
|
||||
email: "", //邮箱登录邮箱
|
||||
frogetPasswordStep: 1, //忘记密码的步骤
|
||||
forgetPasswordEmail: "",
|
||||
forgetEmailCode: ["", "", "", "", "", ""], //忘记密码的邮箱验证码
|
||||
forgetEmailValue: "", //忘记密码的邮箱验证码保存值
|
||||
newPassword: "", //新密码
|
||||
isCheckRobot: false,
|
||||
time: 60, //60秒倒计时
|
||||
passwordType:'password',
|
||||
userId:'',
|
||||
loginTime:true
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
init(){
|
||||
this.registerModel = true
|
||||
this.emailLastStepFun()
|
||||
|
||||
},
|
||||
changeLoginType(type: string) {
|
||||
this.loginType = type;
|
||||
},
|
||||
|
||||
//是否忘记密码页面
|
||||
changeIsLogin(isLogin: number) {
|
||||
if (isLogin === 1) {
|
||||
//登录
|
||||
this.forgetPasswordEmail = "";
|
||||
this.frogetPasswordStep = 1;
|
||||
this.forgetEmailCode = ["", "", "", "", "", ""];
|
||||
this.emailStap = 1;
|
||||
this.clearTimer();
|
||||
} else {
|
||||
this.username = "";
|
||||
this.password = "";
|
||||
}
|
||||
this.isLogin = isLogin;
|
||||
},
|
||||
|
||||
//邮箱登录的下一步
|
||||
emailNextStepFun() {
|
||||
if (!isEmail(this.email)) {
|
||||
message.info("The email format is incorrect");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
email: this.email,
|
||||
operationType: "LOGIN",
|
||||
};
|
||||
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.emailStap = 2;
|
||||
this.time = 60;
|
||||
this.emailCode = ["", "", "", "", "", ""]
|
||||
this.createTimer();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//邮箱登录的上一步
|
||||
emailLastStepFun() {
|
||||
this.emailStap = 1;
|
||||
this.username = "",
|
||||
this.password = "",
|
||||
this.email = "";
|
||||
this.checked=false,
|
||||
this.loginType = "username",
|
||||
(this.emailCode = ["", "", "", "", "", ""]), this.clearTimer();
|
||||
},
|
||||
|
||||
//忘记密码的下一步
|
||||
forgetPasswordNextStepFun() {
|
||||
if (!isEmail(this.forgetPasswordEmail)) {
|
||||
message.info("The email format is incorrect");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
email: this.forgetPasswordEmail,
|
||||
operationType: "FORGET_PWD",
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountSendEmail, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.frogetPasswordStep = 2;
|
||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
||||
this.createTimer();
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
//忘记密码的上一步
|
||||
forgetPasswordLastStepFun() {
|
||||
if (this.frogetPasswordStep === 1) {
|
||||
this.changeIsLogin(1);
|
||||
} else {
|
||||
this.frogetPasswordStep = this.frogetPasswordStep - 1;
|
||||
this.forgetPasswordEmail = "";
|
||||
(this.forgetEmailCode = ["", "", "", "", "", ""]),
|
||||
this.clearTimer();
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
//改变勾选是否是机器人
|
||||
checkRobot() {
|
||||
this.isCheckRobot = !this.isCheckRobot;
|
||||
},
|
||||
|
||||
//提交账号密码预先登录
|
||||
submitPerLogin() {
|
||||
|
||||
|
||||
//输入账号密码
|
||||
if(this.emailStap>=2){
|
||||
return;
|
||||
}else{
|
||||
if (!this.username || !this.password) {
|
||||
message.info("Please enter your account number or password");
|
||||
return;
|
||||
}
|
||||
//输入邮箱
|
||||
if (!this.email) {
|
||||
message.info("Please enter your email address");
|
||||
return;
|
||||
}
|
||||
//判断邮箱格式是否正确
|
||||
if (!isEmail(this.email)) {
|
||||
message.info("The email format is incorrect");
|
||||
return;
|
||||
}
|
||||
//判断是否同意隐私政策
|
||||
if (!this.checked) {
|
||||
message.info("Agree to all terms, privacy fees and policies");
|
||||
return;
|
||||
}
|
||||
let data = {
|
||||
userPassword: md5(this.password + "abc"),
|
||||
userName: this.username,
|
||||
userEmail: this.email,
|
||||
"browserIdentifiers": "",
|
||||
"country": "",
|
||||
"createDate": "",
|
||||
"credits": 0,
|
||||
"id": 0,
|
||||
"isBeginner": 0,
|
||||
"isTrial": 0,
|
||||
"language": "",
|
||||
"systemUser": 0,
|
||||
"updateDate": "",
|
||||
"validEndTime": 0,
|
||||
"validStartTime": 0
|
||||
};
|
||||
// this.loginType = 'email'
|
||||
if(this.loginTime){
|
||||
this.loginTime = false
|
||||
Https.axiosPost(Https.httpUrls.designWorksRegister, data).then(
|
||||
(rv: any) => {
|
||||
// if (rv) {
|
||||
// this.loginType = 'email'
|
||||
// }
|
||||
this.emailStap = 2;
|
||||
if (rv) {
|
||||
this.userId = rv.userId
|
||||
this.loginType = 'email'
|
||||
this.time = 60;
|
||||
this.emailCode = ["", "", "", "", "", ""]
|
||||
this.createTimer();
|
||||
}
|
||||
}
|
||||
).catch(res=>{
|
||||
this.emailStap = 1;
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.loginTime = true
|
||||
}, 2000);
|
||||
}
|
||||
|
||||
}
|
||||
},
|
||||
|
||||
changePasswordType(){
|
||||
this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
|
||||
},
|
||||
//微信登录
|
||||
wechatLogin(value:any) {
|
||||
let data = {
|
||||
code : value.code
|
||||
}
|
||||
Https.axiosGet(Https.httpUrls.parseWeChatCode, {params:data})
|
||||
.then((rv: any) => {
|
||||
this.setSuccessLogin(rv)
|
||||
})
|
||||
.catch((res) => {});
|
||||
},
|
||||
//谷歌登录
|
||||
googelLogin(value:any) {
|
||||
let data = {credential : value}
|
||||
Https.axiosGet(Https.httpUrls.parseGoogleCredential, {params:data})
|
||||
.then((rv: any) => {
|
||||
this.setSuccessLogin(rv)
|
||||
})
|
||||
.catch((res) => {});
|
||||
},
|
||||
setSuccessLogin(rv:any){
|
||||
if (rv) {
|
||||
if (rv.systemUser == 4) {
|
||||
rv.systemUser = 1;
|
||||
}
|
||||
this.createTimer();
|
||||
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));
|
||||
this.store.commit("setSystemUser", rv.systemUser);
|
||||
let obj: any = {
|
||||
avatar: rv.avatar,
|
||||
followeeCount: rv.followeeCount,
|
||||
followerCount: rv.followerCount,
|
||||
};
|
||||
|
||||
this.store.commit("setUserInfo", obj);
|
||||
if (rv.systemUser == 0) {
|
||||
this.turnToHomePage("/Square");
|
||||
} else {
|
||||
if (window.innerWidth < 768) {
|
||||
message.info(
|
||||
"If you need to design, please log in using an iPad or computer."
|
||||
);
|
||||
this.turnToHomePage("/Square");
|
||||
} else {
|
||||
this.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([]));
|
||||
}
|
||||
},
|
||||
//邮箱登录提交
|
||||
submitEmailLogin(emailVerifyCode: any) {
|
||||
let data = {
|
||||
email: this.email,
|
||||
emailVerifyCode: emailVerifyCode,
|
||||
loginType: "EMAIL",
|
||||
userId:this.userId,
|
||||
"userEmail": this.email,
|
||||
"userName": this.username,
|
||||
"userPassword": md5(this.password + "abc"),
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.designWorksRegisterCode, data).then(
|
||||
(rv: any) => {
|
||||
this.setSuccessLogin(rv)
|
||||
}
|
||||
).catch(res=>{
|
||||
});
|
||||
},
|
||||
|
||||
//修改密码提交
|
||||
submitResetPassword() {
|
||||
let data = {
|
||||
email: this.forgetPasswordEmail,
|
||||
emailVerifyCode: this.forgetEmailValue,
|
||||
password: md5(this.newPassword + "abc"),
|
||||
verifyEmail:false,
|
||||
};
|
||||
Https.axiosPost(Https.httpUrls.accountResetPwd, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
message.success("Changing the password successfully");
|
||||
this.changeIsLogin(1);
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
|
||||
//创建定时器
|
||||
createTimer() {
|
||||
this.timer = setInterval(() => {
|
||||
this.time--;
|
||||
if (!this.time) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
|
||||
//清除定时器
|
||||
clearTimer() {
|
||||
this.time = 60;
|
||||
if (this.timer) {
|
||||
clearInterval(this.timer);
|
||||
}
|
||||
},
|
||||
|
||||
//跳转到首页
|
||||
turnToHomePage(str:any) {
|
||||
this.getLang()
|
||||
// this.$router.push("/home");
|
||||
// console.log(window.location.search.substring(1));
|
||||
this.store.commit("clearAllData");
|
||||
this.store.commit("clearAllCollection");
|
||||
this.store.commit("setAllBoardDataChoose",{});
|
||||
this.store.commit("clearShowSketchboard",{});
|
||||
this.$router.push(str);
|
||||
},
|
||||
//获取当前语言
|
||||
getLang(){
|
||||
let data ={}
|
||||
Https.axiosPost(Https.httpUrls.getUserLanguage, data).then(
|
||||
(rv: any) => {
|
||||
if (rv) {
|
||||
this.locale = rv
|
||||
setLang(rv)
|
||||
}
|
||||
}
|
||||
);
|
||||
},
|
||||
turnToWindow(url: any) {
|
||||
window.open(url);
|
||||
},
|
||||
cancelDsign(){
|
||||
this.registerModel = false
|
||||
}
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
:deep(.register){
|
||||
@media (max-width: 768px) {
|
||||
// box-shadow: none;
|
||||
// height: 100%;
|
||||
margin: 0;
|
||||
max-width: 95%;
|
||||
&.generalModel{
|
||||
.ant-modal-content{
|
||||
// height: 100%;
|
||||
}
|
||||
.ant-modal-body{
|
||||
padding: 6rem 4rem;
|
||||
// height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
.login_page {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.page_content {
|
||||
// position: relative;
|
||||
.login_content {
|
||||
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
// width: 60rem;
|
||||
width: 80%;
|
||||
background: #FFFFFF;
|
||||
// box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||
border-radius: 1rem;
|
||||
padding: 3rem 6rem 6.5rem;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
@media (max-width: 768px) {
|
||||
padding: 0;
|
||||
}
|
||||
.login_content_left{
|
||||
width: 100%;
|
||||
.login_form_email{
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
background: #fff;
|
||||
transform: scale(0);
|
||||
transition: .3s all;
|
||||
border: 2px solid;
|
||||
border-radius: 20px;
|
||||
.email_last_step{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
#app{
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.active{
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
.login_type_list {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.login_type_item {
|
||||
text-align: center;
|
||||
font-size: 3.6rem;
|
||||
font-weight: bold;
|
||||
color: #D7D7D7;
|
||||
cursor: pointer;
|
||||
height: 4rem;
|
||||
line-height: 4rem;
|
||||
|
||||
&.login_active {
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
}
|
||||
.login_form_title {
|
||||
font-size: 1.6rem;
|
||||
// color: #666666;
|
||||
font-weight: 900;
|
||||
color: #000;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
label{
|
||||
display: flex;
|
||||
span{
|
||||
font-size: 1.6rem;
|
||||
margin-left: 10px;
|
||||
font-weight: normal;
|
||||
}
|
||||
&.active{
|
||||
pointer-events:none;
|
||||
input{
|
||||
pointer-events:none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login_form_content {
|
||||
margin-top: 4rem;
|
||||
position: relative;
|
||||
&[state="2"]{
|
||||
>*{
|
||||
opacity: 0;
|
||||
}
|
||||
.login_form_email{
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.password_input_block{
|
||||
position: relative;
|
||||
|
||||
.password_show_icon{
|
||||
position: absolute;
|
||||
font-size: 2.4rem;
|
||||
right: 2rem;
|
||||
top:1.7rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.login_form_input {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #dfdfdf;
|
||||
border-radius: 2.5rem;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
transition: all .3s;
|
||||
&:hover{
|
||||
border: 0.1rem solid #000;
|
||||
}
|
||||
&::placeholder {
|
||||
color: #a5b0c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.email_last_step {
|
||||
// margin-top: 4rem;
|
||||
.email_last_step_bottom{
|
||||
padding: 0 40px;
|
||||
}
|
||||
.email_last_step_block{
|
||||
padding: 10px;
|
||||
border-bottom: 2px solid;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.email_last_step_content {
|
||||
margin-left: 1rem;
|
||||
font-size: 2.2rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
}
|
||||
.email_last_step_block_icon{
|
||||
cursor: pointer;
|
||||
margin-right: 1rem;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.fi-br-arrow-left {
|
||||
font-size: 2.5rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
transform: translateY(1rem);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.login_submit_button {
|
||||
height: 5rem;
|
||||
background: #000;
|
||||
border-radius: 2.5rem;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
transition: all .3s;
|
||||
&:hover{
|
||||
background: #3C3C3C;
|
||||
}
|
||||
&[state="2"] {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
.login_text {
|
||||
font-size: 1.6rem;
|
||||
margin-top: 4rem;
|
||||
color: #151515;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
.forget_password_text{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget_password_content {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
width: 60rem;
|
||||
background: #FFFFFF;
|
||||
box-shadow: -0.3rem 2rem 5.9rem 0px rgba(200,200,200,0.3);
|
||||
border-radius: 1rem;
|
||||
padding: 3rem 6rem 6.5rem;
|
||||
box-sizing: border-box;
|
||||
|
||||
.forget_password_content_block{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fi-br-arrow-left {
|
||||
font-size: 3.8rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
transform: translateY(1rem);
|
||||
display: inline-block;
|
||||
}
|
||||
.forget_password_content_title {
|
||||
font-size: 3.2rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
margin-left: 2rem;
|
||||
}
|
||||
|
||||
.forget_passored_form_content {
|
||||
margin-top: 3.5rem;
|
||||
|
||||
.forget_passored_form_title {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.forget_passored_form_input {
|
||||
width: 100%;
|
||||
height: 5rem;
|
||||
margin-top: 1rem;
|
||||
border: 0.1rem solid #DFDFDF;
|
||||
border-radius: 2.5rem;
|
||||
padding-left: 2.1rem;
|
||||
line-height: 5rem;
|
||||
font-size: 1.4rem;
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
&::placeholder {
|
||||
color: #a5b0c2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forget_verif_code_des {
|
||||
font-size: 2.4rem;
|
||||
font-weight: bold;
|
||||
color: #030303;
|
||||
margin-top: 3.5rem;
|
||||
}
|
||||
|
||||
.forget_submit_button {
|
||||
height: 5rem;
|
||||
background: #000;
|
||||
border-radius: 2.5rem;
|
||||
line-height: 5rem;
|
||||
text-align: center;
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
color: #ffffff;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.marign_top20 {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.marign_top22 {
|
||||
margin-top: 2.2rem;
|
||||
}
|
||||
|
||||
.marign_top30 {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
.marign_top40 {
|
||||
margin-top: 4rem;
|
||||
}
|
||||
.thirdPartyLogin{
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
>div{
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
.tip_content {
|
||||
font-size: 1.3rem;
|
||||
font-weight: bold;
|
||||
color: #343579;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.email_last_step_des {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-top: 4rem;
|
||||
margin-bottom: 2rem;
|
||||
|
||||
.sent_email_content {
|
||||
font-size: 1.8rem;
|
||||
font-weight: bold;
|
||||
color: #a5b0c2;
|
||||
}
|
||||
|
||||
.email_tip_content{
|
||||
font-size: 1.4rem;
|
||||
color: #030303;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user