From ef52095f5e9f0a9fe2da779bb1573947d77d75b6 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 22 May 2026 10:53:01 +0800
Subject: [PATCH] 1
---
src/views/login/index.vue | 432 ++++++++++++++++++++++++++---------------------------
1 files changed, 213 insertions(+), 219 deletions(-)
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 9a4b2c7..7833928 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,259 +1,253 @@
<template>
<div class="login">
- <div class="top flex justify-between items-center">
- <img src="../../assets/image/icon-close.png" alt="" @click="onRoute('/homePage/index')" />
- <div @click="onRoute('/customerService')">{{ $t('onLineService') }}</div>
+ <div class="login-inner">
+ <!-- Logo：紫色渐变圆角方框 -->
+ <div class="login-logo-wrap">
+ <img :src="LOGO" alt="" class="login-logo" />
+ </div>
+ <h1 class="login-title">{{ $t('Welcome Back') }}</h1>
+ <p class="login-signup">
+ {{ $t('noAccount') }}
+ <router-link to="/register" class="login-signup-link">{{ $t('Sign up') }}</router-link>
+ </p>
+ <p class="login-lang" @click="onRoute('/language')">{{ currentLocaleLabel }}</p>
+
+ <!-- 邮箱 -->
+ <div class="login-field">
+ <input
+ v-model="username"
+ type="text"
+ class="login-input"
+ :placeholder="$t('entryEmail')"
+ autocomplete="email"
+ @keyup.enter="verifyLogin"
+ />
+ </div>
+ <!-- 密码 + 眼睛 -->
+ <div class="login-field login-field-pwd">
+ <input
+ v-model="password"
+ :type="passwordVisible ? 'text' : 'password'"
+ class="login-input"
+ :placeholder="$t('请输入登录密码')"
+ autocomplete="current-password"
+ @keyup.enter="verifyLogin"
+ />
+ <span class="login-eye" @click="passwordVisible = !passwordVisible">
+ <van-icon :name="passwordVisible ? 'eye-o' : 'closed-eye'" size="20" />
+ </span>
+ </div>
+
+ <div class="login-options">
+ <label class="login-remember" @click.prevent="rememberMe = !rememberMe">
+ <img :src="rememberMe ? checkImgChecked : checkImg" alt="" class="login-remember-icon" />
+ <span>{{ $t('Remember me') }}</span>
+ </label>
+ <span class="login-forgot" @click="onRoute('/forget')">{{ $t('forgetPassword') }}</span>
+ </div>
+
+ <button class="login-btn" @click="verifyLogin">{{ $t('login') }}</button>
+
+ <p class="login-version">{{ versionText }}</p>
</div>
- <!-- <div class="divider mt-10"></div> -->
-
- <div class="log flex items-center justify-center flex-col pt-20 mt-10 mb-20 textColor">
- <img :src="LOGO" alt="">
- <span class="font-bold text-5xl mt-10">
- {{ `${$t('欢迎加入')} ${$title}` }}
- </span>
- </div>
-
- <ExInput style="padding-bottom:16px !important;" :placeholderText="getRegType(activeIndex, false)"
- v-model="username" :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon"
- @pressEnter="verifyLogin" />
-
- <ExInput style="padding-bottom:0 !important;" :placeholderText="$t('entryPassword')" v-model="password"
- typeText="password" @pressEnter="verifyLogin" />
-
- <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('forgetPassword') }}</div>
- <van-button class="w-full" round style="margin-top:50px;" type="primary" @click="verifyLogin">{{ $t('login') }}
- </van-button>
- <div class="noTips textColor">
- {{ $t('noAccount') }}?
- <span class="colorMain" @click="$router.push('/register')">
- {{ $t('goRegister') }}</span>
- </div>
- <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
</div>
</template>
<script setup>
-import ExInput from "@/components/ex-input/new-input.vue";
import { _loginUser } from "@/service/login.api";
-import { _exchangerateuserconfig } from "@/service/trade.api";
-import { GET_USERINFO } from '@/store/types.store'
+import { GET_USERINFO } from '@/store/types.store';
import { useUserStore } from '@/store/user';
-import { useI18n } from 'vue-i18n'
-import nationalityList from '../authentication/components/nationalityList.vue'
-import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from "vant";
-import store from '@/store/store'
-import { LOGO, customerServiceUrl } from "@/config";
-const { t } = useI18n()
-const customer_service_url = ref(customerServiceUrl) // 客服链接,有值的话就会跳转到客服外链
+import store from '@/store/store';
+import { LOGO } from "@/config";
+import checkImg from '@/assets/imgs/new/check.png';
+import checkImgChecked from '@/assets/imgs/new/checked.png';
-const router = useRouter()
+const { t, locale } = useI18n();
+const router = useRouter();
+const userStore = useUserStore();
+
+const versionText = 'Version: 198';
+
+const localeLabels = { en: 'English', cn: '中文', Korean: '한국인', Japanese: 'やまと', de: 'Deutsch', French: 'Français', Italy: 'Italiano' };
+const currentLocaleLabel = computed(() => localeLabels[locale.value] || locale.value || 'English');
+
+const username = ref('');
+const password = ref('');
+const rememberMe = ref(false);
+const passwordVisible = ref(false);
const onRoute = (path) => {
- if (path == 'back') {
- router.go(-1)
- } else {
- if (path == '/customerService') {
- if (customer_service_url.value) {
- window.location.href = customer_service_url.value;
- } else {
- router.push(path)
- }
- } else {
- router.push(path)
- }
- }
-}
-
-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 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;
- }
- }
-}
+ router.push(path);
+};
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) {
+ showToast(t('entryEmail'));
+ return;
}
- if (username.value == '') {
- switch (activeIndex.value) {
- case 0:
- {
- showToast(t('entryAccount'));
- break;
- }
- case 1:
- {
- showToast(t('entryEmail'));
- break;
- }
- case 2:
- {
- showToast(t('entryPhone'));
- break;
- }
- }
- return false
+ if (!password.value) {
+ showToast(t('请输入登录密码'));
+ return;
}
- if (password.value == '') {
- showToast(t('entryPassword'));
- return false
- }
- loginUser()
-}
+ loginUser();
+};
-const userStore = useUserStore();
const loginUser = () => {
_loginUser({
- userName: (activeIndex.value == 0 || activeIndex.value == 1) ? username.value : `${dialCode.value}${username.value}`,
+ userName: username.value,
passWord: password.value,
- type: type.value
+ type: '3'
}).then((res) => {
- userStore[GET_USERINFO](res)
- store.commit('user/SET_USERINFO', res)
- router.push('/')
+ userStore[GET_USERINFO](res);
+ store.commit('user/SET_USERINFO', res);
+ router.push('/');
}).catch((res) => {
- console.log(res)
- })
-}
+ console.log(res);
+ });
+};
</script>
<style lang="scss" scoped>
.login {
- width: 100%;
- padding: 15px;
- font-size: 13px;
- box-sizing: border-box;
- background: $mainbgWhiteColor;
min-height: 100vh;
-
- :deep(.textColor) {
- color: $log-c;
- }
-
- .divider {
- width: 100%;
- height: 2px;
- border-radius: 1px;
- background: $bg_yellow;
- }
-
- .log {
- width: 100%;
-
- img {
- width: 8.5rem;
- }
- }
-
- .w-full {
- background: $bg_yellow;
- border: none;
- color: $mainBgColor;
- font-size: 16px;
- font-weight: 600;
- }
-
- .colorMain {
- color: $bg_yellow;
- }
+ background: #fff;
+ padding: 40px 24px 24px;
+ box-sizing: border-box;
}
-
-.top {
- padding-left: 9px;
- padding-top: 9px;
-
- img {
- width: 18px;
- height: 18px;
- }
+.login-inner {
+ max-width: 400px;
+ margin: 0 auto;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
-.title {
- font-weight: 700;
+/* Logo：紫色渐变圆角方框 */
+.login-logo-wrap {
+ width: 72px;
+ height: 72px;
+ border-radius: 18px;
+ background: linear-gradient(135deg, #2c1a5c 0%, #5a37a5 100%);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-bottom: 24px;
+}
+.login-logo {
+ width: 44px;
+ height: 44px;
+ object-fit: contain;
+}
+
+.login-title {
font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-weight: 700;
+ color: #000;
+ margin: 0 0 8px;
}
-.login-tab {
+.login-signup {
+ font-size: 14px;
+ color: #4a4a4a;
+ margin: 0 0 6px;
+}
+.login-signup-link {
+ color: #8a2be2;
+ cursor: pointer;
+ text-decoration: none;
+}
+.login-signup-link:hover {
+ color: #7b2be2;
+}
+
+.login-lang {
+ font-size: 13px;
+ color: #9b9b9b;
+ margin: 0 0 32px;
+ cursor: pointer;
+}
+
+/* 输入框 */
+.login-field {
+ width: 100%;
+ margin-bottom: 16px;
+ position: relative;
+}
+.login-field-pwd {
margin-bottom: 20px;
-
- div {
- padding: 0 20px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
-
- .active {
- background: $US_tabActice_background;
- color: $color_main;
- }
+}
+.login-input {
+ width: 100%;
+ height: 48px;
+ padding: 0 16px;
+ box-sizing: border-box;
+ font-size: 15px;
+ color: #333;
+ background: #f6f5fa;
+ border: none;
+ border-radius: 10px;
+ outline: none;
+}
+.login-input::placeholder {
+ color: #9b9b9b;
+}
+.login-eye {
+ position: absolute;
+ right: 16px;
+ top: 50%;
+ transform: translateY(-50%);
+ color: #6e6e6e;
+ cursor: pointer;
}
-.forget {
+/* Remember me + Forgot password */
+.login-options {
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 32px;
+}
+.login-remember {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ font-size: 14px;
+ color: #4a4a4a;
+ cursor: pointer;
+}
+.login-remember-icon {
+ width: 18px;
+ height: 18px;
+ flex-shrink: 0;
+}
+.login-forgot {
+ font-size: 14px;
+ color: #4a4a4a;
+ cursor: pointer;
+}
+
+/* Log In 按钮：紫色渐变 */
+.login-btn {
+ width: 100%;
+ height: 48px;
+ border: none;
+ border-radius: 6px;
+ background: linear-gradient(90deg, #a443cf, #5e2bc8);
+ color: #fff;
+ font-size: 16px;
+ font-weight: 700;
+ cursor: pointer;
+}
+
+/* Version */
+.login-version {
+ margin-top: 48px;
font-size: 12px;
- line-height: 14px;
- margin-top: 30px;
+ color: #9b9b9b;
}
-
-.noTips {
- margin-top: 22px;
-}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3