From 0dbc7465447164fef24327b5d494870832d798dd Mon Sep 17 00:00:00 2001
From: 李 <344137771@qq.com>
Date: Tue, 26 May 2026 11:15:18 +0800
Subject: [PATCH] 1
---
src/views/login/index.vue | 235 ++++++++++++++++++++++++++++------------------------------
1 files changed, 113 insertions(+), 122 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index dc881b8..fbf80fc 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,30 +1,46 @@
<template>
<div class="login">
- <van-loading color="#1194F7" class="loading-box" v-if="isLoading"/>
- <div class="top" @click="onRoute('/my/index')"><img src="../../assets/image/icon-close.png" alt="" /></div>
- <div class="title textColor">{{ $t('login') }}</div>
- <div class="flex login-tab">
- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{
- $t('account')
- }}
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
+
+ <!-- 顶部导航栏 -->
+ <div class="header">
+ <div class="back-btn" @click="onRoute('/')">
+ <img src="../../assets/image/icon_back2.png" alt="" />
</div>
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('email') }}
- </div>
- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{
- $t('phoneNum')
- }}
- </div>
+ <div class="sign-up " @click="$router.push('/register')">{{ $t('register') }}</div>
</div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
- :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon" />
+
+ <!-- Logo -->
+ <div class="logo-wrap">
+ <img src="../../assets/image/login_logo.png" alt="logo" />
+ </div>
+
+ <!-- 标题 -->
+ <div class="title textColor">{{ $t('letsStartLogin') }}</div>
+
+ <!-- 账号输入 -->
+ <ExInput :label="$t('account')" :placeholderText="$t('entryAccount')" v-model="username" />
+
+ <!-- 密码输入 -->
<ExInput style="padding-bottom:0!important;" :label="$t('password')" :placeholderText="$t('entryPassword')"
v-model="password" typeText="password" />
- <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('forgetPassword') }}</div>
- <van-button class="w-full" style="margin-top:50px;" type="primary" @click="verifyLogin">{{ $t('login') }}
+
+ <!-- 登录按钮 -->
+ <van-button class="w-full sign-in-btn" type="primary" @click="verifyLogin">
+ {{ $t('login') }}
</van-button>
- <div class="noTips textColor">{{ $t('noAccount') }}<span class="colorMain" @click="$router.push('/register')">
- {{ $t('goRegister') }}</span>
+
+ <!-- 钱包登录按钮 -->
+ <!-- <van-button class="w-full wallet-btn" plain @click="onLoginByWallet">
+ {{ $t('loginByWallet') }}
+ </van-button> -->
+
+ <!-- 忘记密码 -->
+ <div class="forget-wrap textColor" @click="$router.push('/forget')">
+ <span>{{ $t('forgot') }}</span>
+ <span> {{ $t('password') }}</span>
</div>
+
<nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
</div>
</template>
@@ -32,7 +48,6 @@
<script setup>
import ExInput from "@/components/ex-input/index.vue";
import { _loginUser } from "@/service/login.api";
-import { _exchangerateuserconfig } from "@/service/trade.api";
import { GET_USERINFO } from '@/store/types.store'
import { useUserStore } from '@/store/user';
import { useI18n } from 'vue-i18n'
@@ -44,6 +59,7 @@
const router = useRouter()
const { t } = useI18n()
+
const onRoute = (path) => {
if (path == 'back') {
router.go(-1)
@@ -54,86 +70,21 @@
let username = ref('')
let password = ref('')
-let activeIndex = ref(0)
-let isArea = ref(false)
let dialCode = ref(0)
let icon = ref('')
const type = ref(3)
-const getRegType = (activeIndex, bFlag) => {
- switch (activeIndex) {
- case 0:
- return bFlag ? t('account') : t('entryAccount');
- case 1:
- return bFlag ? t('email') : t('entryEmail');
- case 2:
- return bFlag ? t('phoneNum') : t('entryPhone');
- }
-}
const controlChildRef = ref(null)
const isLoading = ref(false)
-const onSelectArea = () => {
- controlChildRef.value.open();
-}
-
-//获取到当前选中国家的code值
const getName = (params) => {
icon.value = params.code;
dialCode.value = params.dialCode;
}
-const changeIndex = (index) => {
- activeIndex.value = index;
- switch (index) {
- case 0:
- case 1: {
- isArea.value = false;
- break;
- }
- case 2: {
- isArea.value = true;
- break;
- }
- }
-}
-
const verifyLogin = () => {
- switch (activeIndex.value) {
- case 0:
- {
- type.value = 3;
- break;
- }
- case 1:
- {
- type.value = 2;
- break;
- }
- case 2:
- {
- type.value = 1;
- break;
- }
- }
if (username.value == '') {
- switch (activeIndex.value) {
- case 0:
- {
- showToast(t('entryAccount'));
- break;
- }
- case 1:
- {
- showToast(t('entryEmail'));
- break;
- }
- case 2:
- {
- showToast(t('entryPhone'));
- break;
- }
- }
+ showToast(t('entryAccount'));
return false
}
if (password.value == '') {
@@ -143,16 +94,20 @@
loginUser()
}
+const onLoginByWallet = () => {
+ router.push('/walletLogin')
+}
+
const userStore = useUserStore();
const loginUser = () => {
isLoading.value = true
_loginUser({
- userName: (activeIndex.value == 0 || activeIndex.value == 1) ? username.value : `${dialCode.value}${username.value}`,
+ userName: username.value,
passWord: password.value,
type: type.value
}).then((res) => {
- console.log("reslogin")
- console.log(res)
+ console.log("reslogin")
+ console.log(res)
isLoading.value = false
userStore[GET_USERINFO](res)
store.commit('user/SET_USERINFO', res)
@@ -174,53 +129,89 @@
.login {
width: 100%;
- padding: 15px;
- font-size: 13px;
+ min-height: 100vh;
+ padding: 0 3rem 5rem;
+ font-size: 1.62rem;
box-sizing: border-box;
+ background: #fff;
}
-.top {
- padding-left: 9px;
- padding-top: 9px;
+/* 顶部导航 */
+.header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding-top: 3rem;
+ padding-bottom: 1rem;
+
+ .back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ }
+ }
+
+ .sign-up {
+ font-size: 2.4rem;
+ font-weight: 500;
+ cursor: pointer;
+ }
+}
+
+/* Logo */
+.logo-wrap {
+ display: flex;
+ justify-content: center;
+ margin-bottom: 3rem;
img {
- width: 18px;
- height: 18px;
+ width: 18rem;
+ object-fit: contain;
}
}
+/* 标题 */
.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-size: 3.6rem;
+ text-align: center;
+ margin-bottom: 4.5rem;
}
-.login-tab {
- margin-bottom: 20px;
+/* 登录按钮 */
+.sign-in-btn {
+ margin-top: 5.5rem;
+ border-radius: 1rem !important;
+ height: 7.5rem !important;
+ font-size: 2.5rem;
+}
- div {
- padding: 0 20px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
+/* 钱包登录按钮 */
+.wallet-btn {
+ margin-top: 1.75rem;
+ border-radius: 1rem !important;
+ height: 6.25rem !important;
+ font-size: 2rem !important;
+ font-weight: 500 !important;
+ color: #333 !important;
+ border-color: #333 !important;
+ background: #fff !important;
- .active {
- background: $US_tabActice_background;
- color: $color_main;
+ :deep(.van-button__text) {
+ color: #333;
}
}
-.forget {
- font-size: 12px;
- line-height: 14px;
- margin-top: 30px;
+/* 忘记密码 */
+.forget-wrap {
+ margin-top: 3rem;
+ text-align: center;
+ font-size: 2rem;
+ cursor: pointer;
}
-
-.noTips {
- margin-top: 22px;
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3