From fcb00a66b4053550b473a29d7299c7a4737eea75 Mon Sep 17 00:00:00 2001
From: lxf <1371462558@qq.com>
Date: Wed, 16 Jul 2025 14:41:04 +0800
Subject: [PATCH] 翻译
---
src/page/login/index.vue | 542 ++++++++++++++++++++++++++++--------------------------
1 files changed, 282 insertions(+), 260 deletions(-)
diff --git a/src/page/login/index.vue b/src/page/login/index.vue
index f689614..82a749d 100644
--- a/src/page/login/index.vue
+++ b/src/page/login/index.vue
@@ -1,280 +1,302 @@
<template>
- <div class="login">
- <div class="top" @click="$router.push('/home')"><img
- :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="" /></div>
- <div class="title textColor">{{ $t('登录') }}</div>
- <div class="flex login-tab">
- <!-- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('账号') }}</div>-->
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}
- </div>
- <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}
+ <div class="login">
+ <div class="top" @click="$router.push('/home')">
+ <img
+ :src="require(`../../assets/theme/${theme}/image/Union.png`)"
+ alt=""
+ />
+ </div>
+ <div class="title textColor">{{ $t("登录") }}</div>
+ <div class="flex login-tab">
+ <!-- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('账号') }}</div>-->
+ <div
+ class="textColor1"
+ :class="activeIndex == 1 ? 'active' : ''"
+ @click="changeIndex(1)"
+ >
+ {{ $t("邮箱") }}
+ </div>
+ <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}
</div> -->
- </div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)"
- v-model="username" :dialCode="dialCode" @selectArea="onSelectArea" :area="isArea" :icon="icon" />
- <ExInput style="padding-bottom:0!important;" :label="$t('密码')" :placeholderText="$t('请输入您的密码')"
- v-model="password" typeText="password" />
- <div class="forget colorMain" @click="$router.push('/forget')">{{ $t('忘记密码?') }}</div>
- <div class="btn btnMain" @click="verifyLogin">{{ $t('登录') }}</div>
- <!-- <div class="btn btnMain" @click="loginButton">{{ $t('登录') }}</div> -->
- <div class="noTips textColor">{{ $t('还没有账号') }}<span class="colorMain" @click="$router.push('/register')">
- {{ $t('去注册') }}</span>
- </div>
- <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
- </div>
+ </div>
+ <ExInput
+ :label="getRegType(activeIndex, true)"
+ :placeholderText="getRegType(activeIndex, false)"
+ v-model="username"
+ :dialCode="dialCode"
+ @selectArea="onSelectArea"
+ :area="isArea"
+ :icon="icon"
+ />
+ <ExInput
+ style="padding-bottom: 0 !important"
+ :label="$t('密码')"
+ :placeholderText="$t('请输入您的密码')"
+ v-model="password"
+ typeText="password"
+ />
+ <div class="forget colorMain" @click="$router.push('/forget')">
+ {{ $t("忘记密码?") }}
+ </div>
+ <div class="btn" @click="verifyLogin">{{ $t("登录") }}</div>
+ <!-- <div class="btn btnMain" @click="loginButton">{{ $t('登录') }}</div> -->
+ <div class="noTips textColor">
+ {{ $t("还没有账号")
+ }}<span class="colorMain" @click="$router.push('/register')">
+ {{ $t("去注册") }}</span
+ >
+ </div>
+ <nationality-list
+ ref="controlChild"
+ :title="$t('选择区域码')"
+ @getName="getName(arguments)"
+ ></nationality-list>
+ </div>
</template>
<script>
- import ExInput from "@/components/ex-input";
- import Axios from "@/API/login.js";
- import {
- mapActions,
- mapGetters
- } from 'vuex';
- import {
- GET_USERINFO,
- SET_CONFIG,
- SET_KEFU
- } from '@/store/const.store';
- import nationalityList from '../authentication/components/nationalityList.vue';
- import {
- ethers
- } from 'ethers';
- export default {
- props: {
+import ExInput from "@/components/ex-input";
+import Axios from "@/API/login.js";
+import { mapActions, mapGetters } from "vuex";
+import { GET_USERINFO, SET_CONFIG, SET_KEFU } from "@/store/const.store";
+import nationalityList from "../authentication/components/nationalityList.vue";
+import { ethers } from "ethers";
+export default {
+ props: {},
+ components: {
+ ExInput,
+ nationalityList,
+ },
+ data() {
+ return {
+ username: "",
+ password: "",
+ activeIndex: 1,
+ isArea: false,
+ typeText: "password",
+ dialCode: 0, //电话号前缀
+ icon: "",
+ };
+ },
+ computed: {
+ ...mapGetters({
+ theme: "home/theme",
+ }),
+ },
+ mounted() {
+ // this.loginButton()
+ },
+ methods: {
+ ...mapActions("user", [GET_USERINFO, SET_CONFIG]),
+ async loginButton() {
+ // 检查钱包是否存在
+ if (typeof window.ethereum !== "undefined") {
+ try {
+ // 请求用户授权
+ const accounts = await window.ethereum.request({
+ method: "eth_requestAccounts",
+ });
+ const userAddress = accounts[0];
+ console.log("accounts,accountsaccounts", accounts);
+ // 签名消息
+ const message = "请确认您的身份。";
+ const signature = await window.ethereum.request({
+ method: "personal_sign",
+ params: [message, userAddress],
+ });
+ // const email = prompt("请输入您的邮箱地址：");
+ // if (!email) {
+ // alert("邮箱地址是必填项！");
+ // return;
+ // }
+ // 发送用户地址和签名到后端
+ await this.registerOrLoginUser(userAddress, signature, message);
+ } catch (error) {
+ console.error("连接钱包时出错:", error);
+ }
+ } else {
+ alert("Please install Little Fox Wallet！");
+ // this.$router.go(-1)
+ this.$router.replace("/home");
+ }
+ },
+ async registerOrLoginUser(userAddress, signature, message) {
+ console.log(userAddress);
+ console.log(signature);
+ console.log(message);
- },
- components: {
- ExInput,
- nationalityList
- },
- data() {
- return {
- username: '',
- password: "",
- activeIndex: 1,
- isArea: false,
- typeText: "password",
- dialCode: 0, //电话号前缀
- icon: '',
- }
- },
- computed: {
- ...mapGetters({
- theme: 'home/theme'
- }),
- },
- mounted() {
- // this.loginButton()
- },
- methods: {
- ...mapActions('user', [GET_USERINFO, SET_CONFIG]),
- async loginButton() {
- // 检查钱包是否存在
- if (typeof window.ethereum !== 'undefined') {
- try {
- // 请求用户授权
- const accounts = await window.ethereum.request({
- method: 'eth_requestAccounts'
- });
- const userAddress = accounts[0];
- console.log("accounts,accountsaccounts", accounts);
- // 签名消息
- const message = "请确认您的身份。";
- const signature = await window.ethereum.request({
- method: 'personal_sign',
- params: [message, userAddress],
- });
- // const email = prompt("请输入您的邮箱地址：");
- // if (!email) {
- // alert("邮箱地址是必填项！");
- // return;
- // }
- // 发送用户地址和签名到后端
- await this.registerOrLoginUser(userAddress, signature, message);
- } catch (error) {
- console.error('连接钱包时出错:', error);
- }
- } else {
- alert('Please install Little Fox Wallet！');
- // this.$router.go(-1)
- this.$router.replace('/home')
- }
- },
- async registerOrLoginUser(userAddress, signature, message) {
- console.log(userAddress, );
- console.log(signature);
- console.log(message);
-
+ // const response = await fetch('https://your-api-endpoint/register-or-login', {
+ // method: 'POST',
+ // headers: {
+ // 'Content-Type': 'application/json',
+ // },
+ // body: JSON.stringify({ address: userAddress, signature, message }),
+ // });
-
- // const response = await fetch('https://your-api-endpoint/register-or-login', {
- // method: 'POST',
- // headers: {
- // 'Content-Type': 'application/json',
- // },
- // body: JSON.stringify({ address: userAddress, signature, message }),
- // });
-
- // const data = await response.json();
- // if (data.success) {
- // // 保存用户信息和 token
- // localStorage.setItem('userToken', data.token);
- // localStorage.setItem('userAddress', userAddress);
- // // 导航到主界面或显示成功信息
- // } else {
- // console.error(data.message);
- // }
- },
- getRegType(activeIndex, bFlag) {
- switch (activeIndex) {
- case 0:
- return bFlag ? this.$t('账号') : this.$t('请输入账号');
- case 1:
- return bFlag ? this.$t('邮箱') : this.$t('请输入您的邮箱');
- case 2:
- return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
- }
- },
- onSelectArea() {
- this.openBtn();
- },
- //打开国家列表底部弹窗
- openBtn() {
- this.$refs.controlChild.open();
- },
- //获取到当前选中国家的code值
- getName(params) {
- this.icon = params[1];
- this.dialCode = params[2];
- },
- changeIndex(index) {
- this.activeIndex = index;
- switch (index) {
- case 0:
- case 1: {
- this.isArea = false;
- break;
- }
- case 2: {
- this.isArea = true;
- break;
- }
- }
- },
- verifyLogin() {
- if (this.username == '') {
- switch (this.activeIndex) {
- case 0: {
- this.$toast(this.$t('请输入账号'));
- break;
- }
- case 1: {
- this.$toast(this.$t('请输入邮箱'));
- break;
- }
- case 2: {
- this.$toast(this.$t('请输入手机号'));
- break;
- }
- }
- return false
- }
- if (this.password == '') {
- this.$toast(this.$t('请输入密码'));
- return false
- }
- this.login()
- },
- async login() {
- Axios.loginUser({
- username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username :
- `${this.username}`,
- password: this.password,
- re_password: this.repassword,
- type: this.type,
- usercode: this.invitCode,
- }).then((res) => {
- this.GET_USERINFO(res.data)
- this.SET_CONFIG() //获取判断是否乘以杠杆字段
- this.$router.push('/home')
- }).catch((error) => {
- if (error.code === 'ECONNABORTED') {
- this.$toast(this.$t('网络超时！'));
- } else if (error.msg !== undefined) {
- this.$toast(this.$t(error.msg));
- }
- });
- }
- }
- }
+ // const data = await response.json();
+ // if (data.success) {
+ // // 保存用户信息和 token
+ // localStorage.setItem('userToken', data.token);
+ // localStorage.setItem('userAddress', userAddress);
+ // // 导航到主界面或显示成功信息
+ // } else {
+ // console.error(data.message);
+ // }
+ },
+ getRegType(activeIndex, bFlag) {
+ switch (activeIndex) {
+ case 0:
+ return bFlag ? this.$t("账号") : this.$t("请输入账号");
+ case 1:
+ return bFlag ? this.$t("邮箱") : this.$t("请输入您的邮箱");
+ case 2:
+ return bFlag ? this.$t("手机号") : this.$t("请输入手机号");
+ }
+ },
+ onSelectArea() {
+ this.openBtn();
+ },
+ //打开国家列表底部弹窗
+ openBtn() {
+ this.$refs.controlChild.open();
+ },
+ //获取到当前选中国家的code值
+ getName(params) {
+ this.icon = params[1];
+ this.dialCode = params[2];
+ },
+ changeIndex(index) {
+ this.activeIndex = index;
+ switch (index) {
+ case 0:
+ case 1: {
+ this.isArea = false;
+ break;
+ }
+ case 2: {
+ this.isArea = true;
+ break;
+ }
+ }
+ },
+ verifyLogin() {
+ if (this.username == "") {
+ switch (this.activeIndex) {
+ case 0: {
+ this.$toast(this.$t("请输入账号"));
+ break;
+ }
+ case 1: {
+ this.$toast(this.$t("请输入邮箱"));
+ break;
+ }
+ case 2: {
+ this.$toast(this.$t("请输入手机号"));
+ break;
+ }
+ }
+ return false;
+ }
+ if (this.password == "") {
+ this.$toast(this.$t("请输入密码"));
+ return false;
+ }
+ this.login();
+ },
+ async login() {
+ Axios.loginUser({
+ username:
+ this.activeIndex == 0 || this.activeIndex == 1
+ ? this.username
+ : `${this.username}`,
+ password: this.password,
+ re_password: this.repassword,
+ type: this.type,
+ usercode: this.invitCode,
+ })
+ .then((res) => {
+ this.GET_USERINFO(res.data);
+ this.SET_CONFIG(); //获取判断是否乘以杠杆字段
+ this.$router.push("/home");
+ })
+ .catch((error) => {
+ if (error.code === "ECONNABORTED") {
+ this.$toast(this.$t("网络超时！"));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
+ },
+ },
+};
</script>
<style lang="scss" scoped>
- .login {
- width: 100%;
- padding: 30px;
- font-size: 26px;
- box-sizing: border-box;
- }
+.login {
+ width: 100%;
+ padding: 30px;
+ font-size: 26px;
+ box-sizing: border-box;
+}
- .top {
- padding-left: 18px;
- padding-top: 18px;
+.top {
+ padding-left: 18px;
+ padding-top: 18px;
- img {
- width: 37px;
- height: 37px;
- }
- }
+ img {
+ width: 37px;
+ height: 37px;
+ }
+}
- .title {
- font-weight: 700;
- font-size: 52px;
- margin-top: 54px;
- margin-bottom: 66px;
- }
+.title {
+ font-weight: 700;
+ font-size: 52px;
+ margin-top: 54px;
+ margin-bottom: 66px;
+}
- .login-tab {
- margin-bottom: 40px;
+.login-tab {
+ margin-bottom: 40px;
- div {
- padding: 0 40px;
- height: 68px;
- line-height: 68px;
- text-align: center;
- border-radius: 8px;
- margin-right: 20px;
- }
+ div {
+ padding: 0 40px;
+ height: 68px;
+ line-height: 68px;
+ text-align: center;
+ border-radius: 8px;
+ margin-right: 20px;
+ }
- .active {
- @include themify() {
- background: themed("tab_background");
- }
+ .active {
+ @include themify() {
+ background: themed("tab_background");
+ }
- @include themify() {
- color: themed("text_color");
- }
- }
- }
+ @include themify() {
+ color: themed("text_color");
+ }
+ }
+}
- .forget {
- font-size: 24px;
- line-height: 28px;
- margin-top: 18px;
- }
+.forget {
+ font-size: 24px;
+ line-height: 28px;
+ margin-top: 18px;
+}
- .btn {
- color: #fff;
- height: 88px;
- line-height: 88px;
- text-align: center;
- font-size: 35px;
- margin-top: 36px;
- border-radius: 10px;
- }
+.btn {
+ color: #fff;
+ height: 88px;
+ line-height: 88px;
+ text-align: center;
+ font-size: 35px;
+ margin-top: 36px;
+ border-radius: 10px;
+ background: #f7b328;
+}
- .noTips {
- margin-top: 44px;
- }
-</style>
\ No newline at end of file
+.noTips {
+ margin-top: 44px;
+}
+</style>
--
Gitblit v1.9.3