Skip to content

P
pptist
Commit ed75397e authored by zhengke's avatar zhengke
Browse files
Options

登录

parent 7a758eb5
Show whitespace changes
Inline Side-by-side
Showing with 209 additions and 66 deletions
src/assets/styles/common.css
View file @ ed75397e
......@@ -447,6 +447,9 @@ page {
.q-pl-lg{
padding-left: 20px;
}
.q-pr-lg{
padding-right: 20px;
}
.q-py-lg{
padding-top: 20px;
padding-bottom: 20px;
......
src/plugins/icon.ts
View file @ ed75397e
......@@ -145,7 +145,10 @@ import {
ToBottom,
PeopleSafe,
StarOne,
CloudStorage
CloudStorage,
Mail,
Wechat,
User,
} from '@icon-park/vue-next'
export interface Icons {
......@@ -295,7 +298,10 @@ export const icons: Icons = {
IconToBottom:ToBottom,
IconPeopleSafe:PeopleSafe,
IconStarOne:StarOne,
IconCloudStorage:CloudStorage
IconCloudStorage:CloudStorage,
IconMail:Mail,
IconWechat:Wechat,
IconUser:User,
}
export default {
......
src/services/UserService.ts
View file @ ed75397e
......@@ -58,9 +58,9 @@ class UserServices {
return Api.Post("travel_set_signout", msg)
}
static async wechatLoginAsync(account: string, code: string, v_token: string, tid: string = ''): Promise<HttpResponse> {
let msg = { account, code, v_token, tid }
return Api.Post("travel_login_password", msg)
static async GetShowQrcode(QrCodeType: string): Promise<HttpResponse> {
let msg = { QrCodeType }
return Api.Post("Wechat_QrCode_GetShowQrcode", msg)
}
static async VerifyLoginAsync(account: string, code: string, v_token: string, tid: string = ''): Promise<HttpResponse> {
......
src/views/Auth/Login.vue
View file @ ed75397e
......@@ -14,7 +14,8 @@
<div class="text-center text-small text-info full-width">@2012-2024 成都微途科技有限公司 版权所有 <a class="q-pl-md" href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank"
style="color: rgb(155, 153, 188);text-decoration: none;">蜀ICP备13024891号-9</a></div>
</div>
<div class="login-form q-pa-xl column flex-center items-center" style="padding: 30px 100px;" v-if="token==''">
<div class="login-form q-pa-xl column flex-center items-center" style="padding: 30px 0;" v-if="token==''">
<div class="login-formCenter">
<div class="q-mb-xl full-width" v-if="inviteInfo">
<div class="q-mt-lg no-select row items-center q-pa-lg rounded" style="background-color: rgb(240, 246, 255);">
<el-avatar :size="44" :src="inviteInfo.logo" shape="square"></el-avatar>
......@@ -25,25 +26,82 @@
<el-button type="info" class="ppt-button q-ml-md" @click="cancelInviteHandler">取消</el-button>
</div>
</div>
<div style="font-size: 36px; " class="text-dark" @click="currentLogin=1">登录</div>
<div class="text-info text-small">你的创作空间</div>
<template v-if="!multipleUsers || multipleUsers.length==0">
<div class="q-py-xl row items-center full-width">
<div class="login-type row items-center col" @click="currentLogin=3"
:class="[currentLogin==3?'active':'']">
<img src="../../assets/img/wechat.png" alt="">
<span class="q-ml-md">使用微信扫码登录</span>
<div class="row flex-end">
<div class="gdwc-togger-sign hydrated" @click="loadingType">
<div class="gdwc-togger-sign-tip">
<svg width="113" height="32" viewBox="0 0 113 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M4 0C1.79086 0 0 1.79086 0 4V28C0 30.2091 1.79086 32 4 32H104C106.209 32 108 30.2091 108 28V23.4482C108 22.5125 108.328 21.6063 108.927 20.8875L111.933 17.2804C112.551 16.5387 112.551 15.4613 111.933 14.7196L108.927 11.1125C108.328 10.3937 108 9.48755 108 8.5518V4C108 1.79086 106.209 0 104 0H4Z" fill="#F0F6FF"></path>
</svg>
<span class="gdwc-togger-sign-tip-text PingFangSC">
{{currentLogin==2?'账号/邮箱':'微信扫码'}}登录
</span>
</div>
<div class="gdwc-togger-sign-btn">
<span>
<svg v-if="currentLogin==2" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M33 6.41675H11C10.4937 6.41675 10.0833 6.82715 10.0833 7.33342V36.6667C10.0833 37.173 10.4937 37.5834 11 37.5834H33C33.5063 37.5834 33.9167 37.173 33.9167 36.6667V7.33341C33.9167 6.82715 33.5063 6.41675 33 6.41675ZM11 3.66675C8.97496 3.66675 7.33334 5.30837 7.33334 7.33342V36.6667C7.33334 38.6918 8.97496 40.3334 11 40.3334H33C35.025 40.3334 36.6667 38.6918 36.6667 36.6667V7.33341C36.6667 5.30837 35.025 3.66675 33 3.66675H11Z" fill="#564bec"></path>
<path d="M12.8333 9.16675H31.1667V28.4167H12.8333V9.16675Z" fill="#564bec"></path>
<path d="M24.2917 32.9999C24.2917 34.2656 23.2657 35.2916 22 35.2916C20.7343 35.2916 19.7083 34.2656 19.7083 32.9999C19.7083 31.7343 20.7343 30.7083 22 30.7083C23.2657 30.7083 24.2917 31.7343 24.2917 32.9999Z" fill="#564bec"></path>
</svg>
<svg v-else width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.1902 3.23803H3.23803V16.1902H16.1902V3.23803ZM0 0V19.4282H19.4282V0H0Z" fill="#564bec"></path>
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.762 3.23803H25.4688V8.30874H30.762V3.23803ZM22.2308 0V11.5468H34V0H22.2308Z" fill="#564bec"></path>
<path d="M22.2308 17.9629H26.1538V23.7363H22.2308V17.9629Z" fill="#564bec"></path>
<path d="M26.1538 21.811H30.0769V25.66H26.1538V21.811Z" fill="#564bec"></path>
<path d="M22.2308 25.6592H26.1538V29.5081H22.2308V25.6592Z" fill="#564bec"></path>
<path d="M30.077 25.6592H34V29.5081H30.077V25.6592Z" fill="#564bec"></path>
<path d="M30.077 17.9629H34V23.7363H30.077V17.9629Z" fill="#564bec"></path>
<path d="M4.85705 4.85693H14.5711V14.571H4.85705V4.85693Z" fill="#564bec"></path>
<path d="M22.2308 13.4707H26.1538V16.0367H22.2308V13.4707Z" fill="#564bec"></path>
<path d="M30.077 13.4707H34V16.0367H30.077V13.4707Z" fill="#564bec"></path>
<path d="M22.2308 31.4331H34V33.9991H22.2308V31.4331Z" fill="#564bec"></path>
</svg>
</span>
</div>
<div class="login-type row items-center col q-ml-md" @click="currentLogin=2"
:class="[currentLogin==2?'active':'']">
<img src="../../assets/img/phone.png" alt="">
<span class="q-ml-md">使用短信验证登录</span>
</div>
</div>
<el-divider> <span class="text-info">使用<template v-if="currentLogin==1">邮箱或者账号</template><template v-if="currentLogin==2">手机号</template><template v-if="currentLogin==3">微信扫码</template>登录</span> </el-divider>
<div style="font-size: 20px; margin-top: 40px;font-weight: 600;" class="text-dark text-center" @click="currentLogin=1">
<span style="color: #564becCC">{{currentLogin==1?'账号/邮箱密码':'微信扫码一键'}}</span>
<span>登录</span>
</div>
<div class="text-info text-small text-center q-pt-xs">你的创作空间</div>
<template v-if="!multipleUsers || multipleUsers.length==0">
<div class="q-mb-md" style="padding: 0 50px;">
<passwordLogin v-if="currentLogin==1"></passwordLogin>
<verifyLogin v-if="currentLogin==2" @passwordLogin="currentLogin=1"></verifyLogin>
<wechatLogin v-if="currentLogin==3" @passwordLogin="currentLogin=1"></wechatLogin>
<wechatLogin v-if="currentLogin==2" @passwordLogin="currentLogin=1"></wechatLogin>
<div class="q-pt-lg">
<el-divider class="q-pb-md"> <span class="fz12 PingFangSC" style="color:#7f8792">其他方式登录</span></el-divider>
</div>
<div class="otherLoading PingFangSC q-pb-lg">
<div v-if="currentLogin!=1" class="row flex-center items-center otherLoading-centwr cursor-pointer"
@click="currentLogin=1">
<el-icon class="" size="14px" title="">
<IconMail theme="multi-color"
:fill="['#9DA3AC' ,'#9DA3AC' ,'#FFF' ,'#9DA3AC']"/>
</el-icon>
<span class="fz12 q-pl-sm" style="color: #9DA3AC;">账号/邮箱登录</span>
</div>
<div v-if="currentLogin!=2" class="row flex-center items-center otherLoading-centwr cursor-pointer"
@click="currentLogin=2">
<el-icon class="" size="14px" title="">
<IconWechat theme="multi-color"
:fill="['#9DA3AC' ,'#9DA3AC' ,'#FFF' ,'#9DA3AC']"/>
</el-icon>
<span class="fz12 q-pl-sm" style="color: #9DA3AC;">微信登录</span>
</div>
</div>
</div>
<div class="row items-center fz12 ServAgrelLoad PingFangSC q-pt-md">
<div class="ServAgrelLoadL q-pr-lg">
您登录即同意<strong><a>用户服务协议、</a></strong>
<strong><a>隐私政策</a></strong>和
<strong><a>授权许可协议</a></strong>，如您成为稿定设计会员，成为会员即视为同意
<strong><a>会员服务协议</a></strong>
</div>
<div class="ServAgrelLoadR q-pl-lg cursor-pointer" @click="redicetToRegist">立即注册</div>
</div>
</template>
<template v-if="multipleUsers && multipleUsers.length>0">
<el-divider> <span class="text-info">选择你需要登录的组织</span> </el-divider>
......@@ -60,6 +118,7 @@
</div>
</template>
</div>
</div>
<div class="login-form q-pa-xl column flex-center items-center" style="padding: 30px 100px;" v-else>
<div style="font-size: 36px; " class="text-dark">已登录</div>
<div class="text-info text-small">你的创作空间</div>
......@@ -133,6 +192,10 @@ const LoginType = reactive([
])
const currentLogin = ref(1)
const loadingType = () =>{
if(currentLogin.value==1) currentLogin.value = 2
else currentLogin.value = 1
}
const submitForm = async (formEl: FormInstance | undefined) => {
if (!formEl || loading.value || (needVerify.value && validateToken.value=='')) return
loading.value=true
......@@ -206,7 +269,7 @@ const verifyCheckHandler = async ()=>{
}
verifyCheckHandler()
</script>
<style>
<style lang="scss">
.login-box{
background-color: #f8f7fc;
background-image: url('https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1711704450000_818.jpeg');
......@@ -291,5 +354,76 @@ verifyCheckHandler()
.currentLoginCenter:nth-child(2){
padding: 1vw 2.34vw;
}
.login-formCenter{
width: 480px;
height: 533px;
border: 1px solid #ccc;
border-radius: 4px;
position: relative;
overflow: hidden;
}
.gd-login-content .gdwc-togger-sign {
position: absolute;
top: 0;
right: 0;
}
.gdwc-togger-sign-tip {
position: relative;
top: 15px;
right: 65px;
cursor: pointer;
}
.gdwc-togger-sign-tip-text {
position: absolute;
top: 0;
left: 0;
right: 5px;
text-align: center;
color: $el-color-primary;
font-size: 14px;
line-height: 32px;
height: 32px;
background: #F0F6FF;
}
.gdwc-togger-sign-btn {
position: absolute;
top: 0;
right: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
width: 62px;
height: 62px;
background: #f0f6ff;
cursor: pointer;
}
.gdwc-togger-sign-btn::before {
position: absolute;
top: 0;
left: 0;
display: block;
content: " ";
border: 31px solid;
border-color: transparent transparent #fff #fff;
}
.ServAgrelLoad{
padding: 13px 24px;
background: #f6f7f9;
}
.ServAgrelLoadL{
border-right: 1px solid rgba(0, 0, 0, 0.08);
line-height: 21px;
color: #9da3ac;
}
.ServAgrelLoadL a {
text-decoration: none;
color: black;
font-weight: 400;
}
.ServAgrelLoadR{
flex-shrink: 0;
color: $el-color-primary;
}
</style>
\ No newline at end of file
src/views/Auth/components/passwordLogin.vue
View file @ ed75397e
......@@ -4,23 +4,25 @@
<el-input v-model="model.account" placeholder="账号/邮箱" />
</el-form-item>
<el-form-item label="" prop="password">
<el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password class="q-mt-lg"/>
<el-input v-model="model.password" type="password" placeholder="密码" autocomplete="new-password" show-password/>
</el-form-item>
<el-form-item label="">
<div class="row q-mt-lg full-width">
<el-form-item label="" v-if="needVerify">
<div class="row full-width">
<div class="col">
<vue-hcaptcha ref="invisibleHcaptcha" sitekey="46e00e53-ddb2-4e7b-9c51-621534c2f1f5" @verify="verifyHandler"
v-if="needVerify"></vue-hcaptcha>
></vue-hcaptcha>
</div>
<el-button link type="primary" @click="redicetToForgot">忘记密码？</el-button>
</div>
</el-form-item>
<el-form-item>
<el-button type="primary" class="full-width q-mb-lg" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
<el-form-item style="margin-bottom: 8px;">
<el-button type="primary" class="full-width" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
</el-form-item>
<div class="text-info text-small row flex-center">
<span>还没有账号？</span>
<el-button link type="primary" class="q-mb-lg" @click="redicetToRegist">立即注册</el-button>
<div class="text-info text-small row flex-between">
<div class="row items-center">
<!-- <span>还没有账号？</span>
<el-button link type="primary" @click="redicetToRegist">立即注册</el-button> -->
</div>
<el-button link type="primary" @click="redicetToForgot">忘记密码？</el-button>
</div>
</el-form>
</template>
......
src/views/Auth/components/verifyLogin.vue
View file @ ed75397e
......@@ -24,10 +24,10 @@
<el-form-item>
<el-button type="primary" class="full-width q-mb-lg" @click="submitForm(loginFormRef)" :loading="loading">登录</el-button>
</el-form-item>
<div class="text-info text-small row flex-center">
<!-- <div class="text-info text-small row flex-center">
<span>账户/邮箱登录？</span>
<el-button link type="primary" class="q-mb-lg" @click="passwordLogin">立即登录</el-button>
</div>
</div> -->
</el-form>
</template>
<script lang="ts" setup>
......
src/views/Auth/components/wechatLogin.vue
View file @ ed75397e
<template>
<div class="wechatLoginForm" v-loading="qrLoading">
<!-- <QRCode :value="qrCode" style="width: 13.31vw;height: auto;border: 1px solid #1E3FE7;" v-if="!qrLoading"></QRCode>
<QRCode value="http://www.viitto.com" style="width: 13.31vw;height: auto;border: 0.1px solid #1E3FE7;" v-if="qrLoading"></QRCode> -->
<QRCode :value="qrCode" style="width: 256px;height: 256px;border: 1px solid #1E3FE7;" v-if="!qrLoading"></QRCode>
<QRCode value="http://www.viitto.com" style="width: 256px;height: 256px;border: 1px solid #1E3FE7;" v-if="qrLoading"></QRCode>
<div class="wechatLoginForm text-center q-mt-lg" v-loading="qrLoading">
<QRCode :value="qrCode" style="width: 159px;height: 159px;border: 1px solid #EBEBEB;" v-if="!qrLoading"></QRCode>
<QRCode value="http://www.viitto.com" style="width: 159px;height: 159px;border: 1px solid #EBEBEB;" v-if="qrLoading"></QRCode>
</div>
<div class="text-info text-small row flex-center q-pt-lg">
<!-- <div class="text-info text-small row flex-center q-pt-lg">
<span>账户/邮箱登录？</span>
<el-button link type="primary" class="q-mb-lg" @click="passwordLogin">立即登录</el-button>
</div>
</div> -->
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment