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/register/index.vue | 422 ++++++++++++++++++++-------------------------------
1 files changed, 167 insertions(+), 255 deletions(-)
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
index 08faeac..77a4251 100644
--- a/src/views/register/index.vue
+++ b/src/views/register/index.vue
@@ -1,67 +1,73 @@
<template>
<div class="register">
- <div class="top" @click="router.go(-1)">
- <img src="../../assets/image/icon-close.png" alt="" />
- </div>
- <Step :step="1"></Step>
- <div class="title textColor">{{ $t("register") }}</div>
- <div class="flex re-tab">
- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">
- {{ $t("account") }}
- </div>
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">
- {{ $t("email") }}
- </div>
- <!-- yyhh -->
- <!-- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">
- {{ $t("phoneNum") }}
- </div> -->
- </div>
- <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
- :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
+ <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />
- <ExInput :label="$t('setPassword')" :placeholderText="$t('passwordTips')" v-model="password" typeText="password" />
- <ExInput :label="$t('repassword')" :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
- <ExInput :label="$t('setSafeword')" :placeholderText="$t('safewordTips')" v-model="safeword" typeText="password"
- v-if="activeIndex === 1" />
- <div class="inputCom" v-if="activeIndex === 1">
- <p class="label textColor">{{ $t("验证码") }}</p>
- <div class="iptbox inputBackground">
- <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" v-model="verifyCode" />
- <span v-if="type !== 3" @click="senCode">{{ $t("sendVerifyCode") }}
- <template v-if="time">({{ time }})s</template>
+ <!-- 顶部返回 -->
+ <div class="header">
+ <div class="back-btn" @click="router.go(-1)">
+ <img src="../../assets/image/icon_back2.png" alt="" />
+ </div>
+ </div>
+
+ <div class="register-cont">
+ <!-- 标题 -->
+ <div class="title textColor">{{ activeIndex === 1 ? $t("email") : $t("mobile") }}</div>
+
+ <!-- Email 模式 -->
+ <template v-if="activeIndex === 1">
+ <ExInput :label="$t('email')" :placeholderText="$t('entryEmail')" v-model="username" />
+ <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="password"
+ typeText="password" />
+ <ExInput :label="$t('repassword')" :placeholderText="$t('repassword')" v-model="repassword"
+ typeText="password" />
+ <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode"
+ :clearBtn="false" />
+ </template>
+
+ <!-- Mobile 模式 -->
+ <template v-else>
+ <ExInput :label="$t('phoneNum')" :placeholderText="$t('phoneNum')" v-model="username" :area="isArea"
+ :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
+ <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="password"
+ typeText="password" />
+ <ExInput :label="$t('repassword')" :placeholderText="$t('repassword')" v-model="repassword"
+ typeText="password" />
+ <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode"
+ :clearBtn="false" />
+ </template>
+
+ <!-- Sign Up 按钮 -->
+ <van-button class="w-full sign-up-btn" type="primary" @click="register">
+ {{ $t("register") }}
+ </van-button>
+
+ <!-- 切换链接 -->
+ <div class="switch-link textColor" @click="switchMode">
+ {{ activeIndex === 1 ? $t("mobile") : $t("email") }}
+ </div>
+
+ <!-- 协议复选框 -->
+ <div class="protocol textColor mainBackground">
+ <i @click="agreeProt">
+ <img v-show="agree" src="../../assets/image/login/prot2.png" alt="" />
+ <img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" />
+ </i>
+ {{ $t("agree") }}
+ <span class="colorMain" @click="router.push('/aboutUs?serviceTerm=1')">
+ {{ "<" + $t("serviceConf") + ">" }}
</span>
</div>
</div>
- <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode" :clearBtn="false" />
- <div class="protocol textColor">
- <i @click="agreeProt">
- <img v-show="agree" src="../../assets/image/login/prot2.png" alt="" />
- <img v-show="!agree" src="../../assets/image/login/prot1.png" alt="" />
- </i>
- {{ $t("readAgree")
- }}<span class="colorMain" @click="router.push('/aboutUs?serviceTerm=1')">{{
- $t("serviceConf")
-}}</span>
- </div>
- <van-button class="w-full" style="margin-top: 10px" type="primary" @click="register">{{ $t("register") }}
- </van-button>
- <div class="noTips textColor">
- {{ $t("hasAccount")
- }}<span class="colorMain" @click="router.push('/login')"> {{ $t("goLogin") }}</span>
- </div>
+
<nationality-list ref="controlChildRef" :title="$t('selectArea')" @getName="getName"></nationality-list>
- <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail" @close="show = false"
- sliderText="" :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />
-
- <div>{{ msg }}</div>
+ <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
+ @close="show = false" sliderText="" :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />
</div>
</template>
<script setup>
import ExInput from "@/components/ex-input/index.vue";
-import Step from "./step.vue";
import { _registerUser, _sendVerifyCode } from "@/service/login.api";
import { _bindEmailRegister } from "@/service/user.api.js";
import { useUserStore } from "@/store/user";
@@ -76,16 +82,14 @@
import { ref, onMounted, reactive, onUnmounted } from "vue";
import { showToast } from "vant";
import store from "@/store/store";
+
const { t } = useI18n();
const router = useRouter();
-const onRoute = (path) => {
- router.push(path);
-};
const userStore = useUserStore();
let show = ref(false);
-const msg = ref("");
-const type = ref(1);
+const isLoading = ref(false);
+const type = ref(2);
const time = ref(0);
let agree = ref(false);
const username = ref("");
@@ -93,10 +97,7 @@
const repassword = ref("");
const verifyCode = ref("");
const safeword = ref("");
-const fundPassword = ref("");
-const refundPassword = ref("");
-const activeIndex = ref(0);
-const typeText = ref("password");
+const activeIndex = ref(1); // 1 = Email, 2 = Mobile
let isArea = ref(false);
let dialCode = ref(0);
let icon = ref("");
@@ -106,7 +107,6 @@
let invitCode = ref("");
onMounted(() => {
- console.log(store);
let usercode = getStorage("usercode");
if (usercode) {
invitCode.value = usercode;
@@ -120,59 +120,17 @@
state.timer = null;
});
-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 switchMode = () => {
+ activeIndex.value = activeIndex.value === 1 ? 2 : 1;
+ if (activeIndex.value === 2) {
+ isArea.value = true;
+ } else {
+ isArea.value = false;
}
-};
-
-const senCode = () => {
- if (time.value > 0) {
- return false;
- }
- if (activeIndex.value === 1) {
- let match = username.value.search(/@/);
- if (username.value == "" || match == -1) {
- showToast(t("entryCorrectEmail"));
- return;
- }
- }
-
- _sendVerifyCode({
- target: username.value,
- })
- .then((res) => {
- time.value = 60;
- state.timer = setInterval(() => {
- if (time.value > 0) {
- time.value = time.value - 1;
- } else {
- time.value = 0;
- clearInterval(state.timer);
- state.timer = null;
- }
- }, 1000);
- })
- .catch((error) => {
- showToast(t(error.msg));
- });
-};
-
-const onSuccess = () => {
- console.log("onSuccess");
- registerApi();
- show.value = false;
-};
-const onFail = () => {
- msg.value = "";
-};
-const onRefresh = () => {
- msg.value = "";
+ // 清空表单
+ username.value = "";
+ password.value = "";
+ repassword.value = "";
};
const controlChildRef = ref(null);
@@ -184,44 +142,31 @@
icon.value = params.code;
dialCode.value = params.dialCode;
};
+
const agreeProt = () => {
agree.value = !agree.value;
};
+
const register = () => {
- console.log(activeIndex.value, "activeIndex.value");
- if (activeIndex.value == 0) {
- if (username.value == "") {
- showToast(t("entryAccount"));
- return;
- }
- if (username.value.length < 6 || username.value.length > 30) {
- showToast(t("accountLength"));
- return;
- }
- } else if (activeIndex.value == 1) {
+ if (activeIndex.value === 1) {
+ // Email 模式验证
let match = username.value.search(/@/);
- if (username.value == "" || match.value == -1) {
+ if (username.value == "" || match == -1) {
showToast(t("entryCorrectEmail"));
return;
}
- if (safeword.value == "") {
- showToast(t("safewordTips"));
+ } else {
+ // Mobile 模式验证
+ if (username.value == "") {
+ showToast(t("entryPhone"));
return;
}
- if (verifyCode.value.length < 6) {
- showToast(t("entryVerifyTips"));
- return;
- }
- } else if (activeIndex.value == 2) {
if (!/(^[1-9]\d*$)/.test(username.value)) {
showToast(t("entryPhone"));
return;
}
- if (username.value == "") {
- showToast(t("entryPhone"));
- return;
- }
}
+
if (password.value == "") {
showToast(t("entryPassword"));
return;
@@ -240,178 +185,145 @@
}
show.value = true;
};
-const changeIndex = (index) => {
- activeIndex.value = index;
- if (index == 0 || index == 1) {
- isArea.value = false;
- } else {
- isArea.value = true;
- }
-};
-const registerApi = () => {
- switch (activeIndex.value) {
- case 0: {
- type.value = 3;
- break;
- }
- case 1: {
- type.value = 2;
- break;
- }
- case 2: {
- type.value = 1;
- break;
- }
- }
+const onSuccess = () => {
+ registerApi();
+ show.value = false;
+};
+
+const onFail = () => {
+ // 验证失败处理
+};
+
+const registerApi = () => {
+ isLoading.value = true;
if (activeIndex.value === 1) {
+ // Email 注册
+ type.value = 2;
_bindEmailRegister({
username: username.value,
password: password.value,
- type: "2", // 2邮箱
- verifcode: verifyCode.value,
+ type: "2",
+ verifcode: verifyCode.value || "",
usercode: invitCode.value,
- safeword: safeword.value,
+ safeword: safeword.value || "",
}).then((res) => {
+ isLoading.value = false;
userStore[GET_USERINFO](res);
store.state.user.userInfo = res;
- // 其他操作？？
router.push("/identity");
+ }).catch(() => {
+ isLoading.value = false;
});
} else {
+ // Mobile 注册
+ type.value = 1;
_registerUser({
- userName:
- activeIndex.value === 0 || activeIndex.value === 1
- ? username.value
- : `${dialCode.value}${username.value}`,
+ userName: `${dialCode.value}${username.value}`,
password: password.value,
- // re_password: repassword.value,
type: type.value,
userCode: invitCode.value,
}).then((res) => {
+ isLoading.value = false;
userStore[GET_USERINFO](res);
store.state.user.userInfo = res;
- if (activeIndex.value == 0) {
- router.push("/setFond");
- } else {
- router.push({
- name: "verify",
- query: {
- type: activeIndex.value,
- account:
- activeIndex.value == 1
- ? username.value
- : `${dialCode.value}${username.value}`,
- },
- });
- }
+ router.push({
+ name: "verify",
+ query: {
+ type: activeIndex.value,
+ account: `${dialCode.value}${username.value}`,
+ },
+ });
+ }).catch(() => {
+ isLoading.value = false;
});
}
};
</script>
<style lang="scss" scoped>
-.activeBKClick {
- &:active {
- background: $tab_background;
- opacity: 0.5;
- }
-}
-
-.activeClick {
- &:active {
- background: $mainbgWhiteColor;
- opacity: 0.5;
- }
+:deep(.van-loading) {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
}
.register {
width: 100%;
+ min-height: 100vh;
box-sizing: border-box;
- padding: 16px;
- font-size: 13px;
+ background: #fff;
}
-.top {
- padding-left: 9px;
- padding-top: 9px;
+/* 顶部返回 */
+.header {
+ padding-top: 2rem;
+ padding-left: 3rem;
- img {
- width: 18px;
- height: 18px;
+ .back-btn {
+ width: 4rem;
+ height: 4rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+
+ img {
+ width: 100%;
+ }
}
}
+.register-cont {
+ padding: 0 3rem 5rem;
+}
+
+/* 标题 */
.title {
- font-weight: 700;
- font-size: 26px;
- margin-top: 27px;
- margin-bottom: 33px;
+ font-size: 4rem;
+ margin-top: 2.5rem;
+ margin-bottom: 4rem;
}
-.re-tab {
- margin-bottom: 22px;
-
- div {
- padding: 0 18px;
- height: 34px;
- line-height: 34px;
- text-align: center;
- border-radius: 4px;
- margin-right: 10px;
- }
-
- .active {
- background: $US_tabActice_background;
- color: $color_main;
- }
+/* Sign Up 按钮 */
+.sign-up-btn {
+ margin-top: 2.4rem;
+ border-radius: 1rem !important;
+ height: 7.2rem !important;
+ font-size: 2.8rem !important;
}
-.forget {
- color: $color_main;
- font-size: 12px;
- line-height: 14px;
+/* 切换链接 */
+.switch-link {
+ margin-top: 3rem;
+ text-align: center;
+ font-size: 2.8rem;
+ cursor: pointer;
}
-.noTips {
- margin-top: 24px;
-}
-
+/* 协议复选框 */
.protocol {
display: flex;
align-items: center;
- height: 15px;
+ margin-top: 3rem;
+ font-size: 1.75rem;
+ padding: 2.2rem 2rem;
+ position: fixed;
+ left: 0.84rem;
+ bottom: 0;
i {
- width: 15px;
- height: 15px;
- margin-right: 9px;
+ width: 1.875rem;
+ height: 1.875rem;
+ margin-right: 1.125rem;
+ cursor: pointer;
+ flex-shrink: 0;
img {
width: 100%;
height: 100%;
}
- }
-}
-
-.iptbox {
- height: 44px;
- margin-top: 8px;
- margin-bottom: 18px;
- padding: 0 20px;
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-radius: 6px;
-
- input {
- flex: 1;
- height: 100%;
- border: none;
- }
-
- span {
- color: $color_main;
}
}
</style>
--
Gitblit v1.9.3