From 9b2bee1321e99dfce7fe8442f750b1300391e841 Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Fri, 04 Apr 2025 21:50:07 +0800
Subject: [PATCH] 1
---
src/page/register/index.vue | 754 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 418 insertions(+), 336 deletions(-)
diff --git a/src/page/register/index.vue b/src/page/register/index.vue
index 05540d7..dcd3046 100644
--- a/src/page/register/index.vue
+++ b/src/page/register/index.vue
@@ -1,367 +1,449 @@
<template>
- <div class="register">
- <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="">
- </div>
- <!-- <Step :step="1"></Step>-->
- <div class="title textColor" style="margin-bottom: 0;padding-bottom: 0">{{ $t('注册') }}</div>
- <div style="color: #999999;font-size: 14px;margin: 5px 0 30px 0">{{ $t('欢迎来到')}}ALOKEX</div>
+ <div class="register">
+ <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)"
+ alt="">
+ </div>
+ <!-- <Step :step="1"></Step>-->
+ <div class="title textColor" style="margin-bottom: 0;padding-bottom: 0">{{ $t('注册') }}</div>
+ <div style="color: #999999;font-size: 14px;margin: 5px 0 30px 0">{{ $t('欢迎来到')}}ALOKEX</div>
- <div class="flex re-tab" style="border-bottom: #ccc 1px solid;">
- <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)" v-if="false">{{ $t('账号') }}</div>
- <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div>
- <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)" v-if="false">{{ $t('手机号') }}</div>
- </div>
- <div style="font-size: 14px">
- {{ getRegType(activeIndex, true) }}
- </div>
- <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="getRegType(activeIndex, false)"
- v-model.trim="username"
- :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon"/>
+ <div class="flex re-tab" style="border-bottom: #ccc 1px solid;">
+ <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)" v-if="false">
+ {{ $t('账号') }}</div>
+ <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}
+ </div>
+ <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)" v-if="false">
+ {{ $t('手机号') }}</div>
+ </div>
+ <div style="font-size: 14px">
+ {{ getRegType(activeIndex, true) }}
+ </div>
+ <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
+ :placeholderText="getRegType(activeIndex, false)" v-model.trim="username" :area="isArea"
+ :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
- <div style="font-size: 14px">
- {{ $t('设置密码') }}
- </div>
- <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('密码（6-12个字符）')" v-model="password" typeText="password"/>
- <div style="font-size: 14px">
- {{ $t('确认密码') }}
- </div>
- <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password"/>
- <div style="font-size: 14px">
+ <div style="font-size: 14px">
+ {{ $t('设置密码') }}
+ </div>
+ <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
+ :placeholderText="$t('密码（6-12个字符）')" v-model="password" typeText="password" />
+ <div style="font-size: 14px">
+ {{ $t('确认密码') }}
+ </div>
+ <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
+ :placeholderText="$t('密码（6-12个字符）')" v-model="repassword" typeText="password" />
+
+ <div style="font-size: 14px">
+ {{ $t('资金密码') }}
+ </div>
+ <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
+ :placeholderText="$t('请输入密码')" v-model="safeword" typeText="password" />
+ <div style="font-size: 14px">
+ {{ $t('确认资金密码') }}
+ </div>
+ <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
+ :placeholderText="$t('请确认密码')" v-model="re_safeword" typeText="password" />
+ <!-- 邮箱验证码 -->
+ <div style="display: flex; align-items: center; margin-top: 20px;">
+ <ExInput
+ style="border: #bbb 1px solid; border-radius: 3px; padding: 0; padding-bottom: 10px; margin-right: 10px;width: 253px;"
+ :placeholderText="$t('请输入邮箱验证码')" v-model="emailVerificationCode" typeText="text" />
+ <div style="background-color: #007BFF; color: white; border-radius: 3px; padding: 6px 12px; font-size: 14px;"
+ @click="sendVerificationCode">
+ {{ time==0? $t('获取验证码'):time }}
+ </div>
+ </div>
+ <!-- <div style="font-size: 14px">
{{ $t('邀请码(选填)') }}
</div>
- <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('请输入邀请码')" 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('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{
+ <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false"/> -->
+ <div class="protocol textColor" style="margin-top: 20px;">
+ <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('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{
$t('服务条款')
}}</span>
- </div>
- <div class="btn btnMain" @click="register">{{ $t('注册') }}</div>
- <div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')">
- {{ $t('去登录') }}</span>
- </div>
- <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
+ </div>
+ <div class="btn btnMain" @click="register">{{ $t('注册') }}</div>
+ <div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')">
+ {{ $t('去登录') }}</span>
+ </div>
+ <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
- <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
- @close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')"/>
+ <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
+ @close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')" />
- <div>{{ msg }}</div>
- </div>
+ <div>{{ msg }}</div>
+ </div>
</template>
<script>
-import {Popup} from "vant";
-import ExInput from "@/components/ex-input";
-import Step from "./step.vue";
-import Axios from "@/API/login.js";
-import {mapActions, mapGetters} from 'vuex';
-import {GET_USERINFO} from '@/store/const.store';
-import nationalityList from '../authentication/components/nationalityList.vue'
-import Vcode from "vue-puzzle-vcode";
-import img1 from "../../assets/image/slider/1.png";
-import img2 from "../../assets/image/slider/2.png";
-import {getStorage} from '@/utils/utis'
+ import {
+ Popup
+ } from "vant";
+ import ExInput from "@/components/ex-input";
+ import Step from "./step.vue";
+ import Axios from "@/API/login.js";
+ import {
+ mapActions,
+ mapGetters
+ } from 'vuex';
+ import {
+ GET_USERINFO
+ } from '@/store/const.store';
+ import nationalityList from '../authentication/components/nationalityList.vue'
+ import Vcode from "vue-puzzle-vcode";
+ import img1 from "../../assets/image/slider/1.png";
+ import img2 from "../../assets/image/slider/2.png";
+ import {
+ getStorage
+ } from '@/utils/utis'
-export default {
- props: {},
- components: {
- [Popup.name]: Popup,
- ExInput,
- Step,
- nationalityList,
- Vcode
- },
- data() {
- return {
- show: false,
- msg: '',
- type: 3,// 1手机 2 邮箱 3账号
- agree: false,
- username: '',
- password: "",
- repassword: '',
- invitCode: '',//邀请码
- activeIndex: 1,
- typeText: "password",
- isArea: false,
- dialCode: 0, //电话号前缀
- icon: '',
- img1,
- img2,
- }
- },
- mounted() {
- let usercode = getStorage('usercode')
- if (usercode) {
- this.invitCode = usercode;
- }
- },
- computed: {
- ...mapGetters({
- theme: 'home/theme'
- }),
- },
- methods: {
- ...mapActions('user', [GET_USERINFO]),
- 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('请输入手机号');
- }
- },
- onClose() {
- console.log('onClose')
- },
- onSuccess() {
- console.log('onSuccess')
- this.registerApi();
- this.show = false;
- },
- onFail() {
- this.msg = ''
- },
- onRefresh() {
- this.msg = ''
- },
- onSelectArea() {
- this.openBtn();
- },
- //打开国家列表底部弹窗
- openBtn() {
- this.$refs.controlChild.open();
- },
- //获取到当前选中国家的code值
- getName(params) {
- this.icon = params[1];
- this.dialCode = params[2];
- },
- agreeProt() {
- this.agree = !this.agree
- },
- register() {
- // if (this.activeIndex == 0){
- // let match = this.username.search(/@/);
- // if (this.username == '' || match == -1) {
- // this.$toast(this.$t('请输入正确的邮箱地址'));
- // return
- // }
- // }else{
- // if (this.username == '' ) {
- // this.$toast(this.$t('请输入手机号'));
- // return
- // }
- // }
- switch (this.activeIndex) {
- case 0: {
- if (this.username == '') {
- this.$toast(this.$t('请输入账号'));
- return;
- }
- if (this.username.length < 6 || this.username.length > 30) {
- this.$toast(this.$t('账号长度必须6-30位'));
- return;
- }
- break;
- }
- case 1: {
- let match = this.username.search(/@/);
- if (this.username == '' || match == -1) {
- this.$toast(this.$t('请输入正确的邮箱地址'));
- return;
- }
- break;
- }
- case 2: {
- if (this.username == '') {
- this.$toast(this.$t('请输入手机号'));
- return;
- }
- break;
- }
- }
- if (this.password == '') {
- this.$toast(this.$t('请输入密码'));
- return
- }
- if (this.invitCode == '') {
- this.$toast(this.$t('请输入邀请码'));
- return
- }
- if (this.password.length < 6) {
- this.$toast(this.$t('密码（6-12个字符）'));
- return
- }
- if (this.repassword !== this.password) {
- this.$toast(this.$t('密码不一致'));
- return
- }
- if (!this.agree) {
- this.$toast(this.$t('请同意服务条款'));
- return
- }
- this.show = true
- },
- changeIndex(index) {
- this.activeIndex = index;
- switch (index) {
- case 0:
- case 1: {
- this.isArea = false;
- break;
- }
- case 2: {
- this.isArea = true;
- break;
- }
- }
- },
- registerApi() {
- switch (this.activeIndex) {
- case 0: {
- this.type = 3;
- break;
- }
- case 1: {
- this.type = 2;
- break;
- }
- case 2: {
- this.type = 1;
- break;
- }
- }
- Axios.registerUser({
- username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username : `${this.dialCode}${this.username}`,
- password: this.password,
- re_password: this.repassword,
- type: this.type,
- usercode: this.invitCode,
- }).then((res) => {
- this.$toast(this.$t('注册成功'));
- setTimeout(()=>{
- this.$router.push('/login')
- },1500)
- return;
- // this.GET_USERINFO(res.data)
- // if (this.activeIndex == 0) {
- // this.$router.push('/setFond')
- // } else {
- // this.$router.push({name: 'verify',
- // query: {
- // type: this.activeIndex,
- // account: this.activeIndex == 1 ? this.username : `${this.dialCode}${this.username}`
- // }
- // })
- // }
- }).catch((error) => {
- if (error.code === 'ECONNABORTED') {
- this.$toast(this.$t('网络超时！'));
- } else if (error.msg !== undefined) {
- this.$toast(this.$t(error.msg));
- }
- });
- }
- }
-}
+ export default {
+ props: {},
+ components: {
+ [Popup.name]: Popup,
+ ExInput,
+ Step,
+ nationalityList,
+ Vcode
+ },
+ data() {
+ return {
+ show: false,
+ msg: '',
+ type: 3, // 1手机 2 邮箱 3账号
+ agree: false,
+ username: '',
+ password: "",
+ repassword: '',
+ invitCode: '', //邀请码
+ re_safeword: '',
+ safeword: '',
+ activeIndex: 1,
+ typeText: "password",
+ isArea: false,
+ dialCode: 0, //电话号前缀
+ emailVerificationCode: '', //邮箱验证码
+ icon: '',
+ time: 0,
+ img1,
+ img2,
+ }
+ },
+ mounted() {
+ let usercode = getStorage('usercode')
+ if (usercode) {
+ this.invitCode = usercode;
+ }
+ },
+ computed: {
+ ...mapGetters({
+ theme: 'home/theme'
+ }),
+ },
+ methods: {
+ ...mapActions('user', [GET_USERINFO]),
+ sendVerificationCode() {
+
+ Axios.sendVerifyCode({
+ target: this.username,
+ }).then((res) => {
+ this.time = 30;
+ this.timer = setInterval(() => {
+ if (this.time > 0) {
+ this.time = this.time - 1
+ } else {
+ this.time = 0;
+ clearInterval(this.timer)
+ }
+ }, 1000);
+ }).catch((error) => {
+ if (error.code === 'ECONNABORTED') {
+ this.$toast(this.$t('网络超时！'));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
+ },
+ 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('请输入手机号');
+ }
+ },
+ onClose() {
+ console.log('onClose')
+ },
+ onSuccess() {
+ console.log('onSuccess')
+ // this.save_email()
+ this.registerApi();
+
+ this.show = false;
+ },
+ onFail() {
+ this.msg = ''
+ },
+ onRefresh() {
+ this.msg = ''
+ },
+ onSelectArea() {
+ this.openBtn();
+ },
+ //打开国家列表底部弹窗
+ openBtn() {
+ this.$refs.controlChild.open();
+ },
+ //获取到当前选中国家的code值
+ getName(params) {
+ this.icon = params[1];
+ this.dialCode = params[2];
+ },
+ agreeProt() {
+ this.agree = !this.agree
+ },
+ register() {
+ // if (this.activeIndex == 0){
+ // let match = this.username.search(/@/);
+ // if (this.username == '' || match == -1) {
+ // this.$toast(this.$t('请输入正确的邮箱地址'));
+ // return
+ // }
+ // }else{
+ // if (this.username == '' ) {
+ // this.$toast(this.$t('请输入手机号'));
+ // return
+ // }
+ // }
+ switch (this.activeIndex) {
+ case 0: {
+ if (this.username == '') {
+ this.$toast(this.$t('请输入账号'));
+ return;
+ }
+ if (this.username.length < 6 || this.username.length > 30) {
+ this.$toast(this.$t('账号长度必须6-30位'));
+ return;
+ }
+ break;
+ }
+ case 1: {
+ let match = this.username.search(/@/);
+ if (this.username == '' || match == -1) {
+ this.$toast(this.$t('请输入正确的邮箱地址'));
+ return;
+ }
+ break;
+ }
+ case 2: {
+ if (this.username == '') {
+ this.$toast(this.$t('请输入手机号'));
+ return;
+ }
+ break;
+ }
+ }
+ if (this.password == '') {
+ this.$toast(this.$t('请输入密码'));
+ return
+ }
+ // if (this.invitCode == '') {
+ // this.$toast(this.$t('请输入邀请码'));
+ // return
+ // }
+ if (this.password.length < 6) {
+ this.$toast(this.$t('密码（6-12个字符）'));
+ return
+ }
+ if (this.repassword !== this.password) {
+ this.$toast(this.$t('密码不一致'));
+ return
+ }
+ if (!this.agree) {
+ this.$toast(this.$t('请同意服务条款'));
+ return
+ }
+ this.show = true
+ },
+ changeIndex(index) {
+ this.activeIndex = index;
+ switch (index) {
+ case 0:
+ case 1: {
+ this.isArea = false;
+ break;
+ }
+ case 2: {
+ this.isArea = true;
+ break;
+ }
+ }
+ },
+ save_email() {
+ Axios.save_email({
+ email: this.username,
+ verifcode: this.emailVerificationCode,
+ }).then((res) => {
+
+ }).catch((error) => {
+ if (error.code === 'ECONNABORTED') {
+ this.$toast(this.$t('网络超时！'));
+ } else if (error.msg !== undefined) {
+ this.$toast(this.$t(error.msg));
+ }
+ });
+ },
+ registerApi() {
+ switch (this.activeIndex) {
+ case 0: {
+ this.type = 3;
+ break;
+ }
+ case 1: {
+ this.type = 2;
+ break;
+ }
+ case 2: {
+ this.type = 1;
+ break;
+ }
+ }
+ Axios.registerUser({
+ username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username :
+ `${this.dialCode}${this.username}`,
+ password: this.password,
+ re_password: this.repassword,
+ type: this.type,
+ verifcode: this.emailVerificationCode,
+ safeword: this.safeword,
+ re_safeword: this.re_safeword,
+ // usercode: this.invitCode,
+ }).then((res) => {
+ this.$toast(this.$t('注册成功'));
+ setTimeout(() => {
+ this.$router.push('/login')
+ }, 1500)
+ return;
+ // this.GET_USERINFO(res.data)
+ // if (this.activeIndex == 0) {
+ // this.$router.push('/setFond')
+ // } else {
+ // this.$router.push({name: 'verify',
+ // query: {
+ // type: this.activeIndex,
+ // account: this.activeIndex == 1 ? this.username : `${this.dialCode}${this.username}`
+ // }
+ // })
+ // }
+ }).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>
-.register {
- width: 100%;
- box-sizing: border-box;
- padding: 32px;
- font-size: 26px;
-}
+ .register {
+ width: 100%;
+ box-sizing: border-box;
+ padding: 32px;
+ font-size: 26px;
+ }
-.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;
+ }
-.re-tab {
- margin-bottom: 44px;
+ .re-tab {
+ margin-bottom: 44px;
- div {
- padding: 0 36px;
- height: 68px;
- line-height: 68px;
- text-align: center;
- border-radius: 8px;
- margin-right: 20px;
- }
+ div {
+ padding: 0 36px;
+ 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");
+ }
- border-bottom: #1976d2 2px solid;
- color: #1976d2 !important;
- padding-bottom: 20px;
- font-size: 16px;
- font-weight: bold;
- border-radius: 0;
- }
-}
+ border-bottom: #1976d2 2px solid;
+ color: #1976d2 !important;
+ padding-bottom: 20px;
+ font-size: 16px;
+ font-weight: bold;
+ border-radius: 0;
+ }
+ }
-.forget {
- color: #1D91FF;
- font-size: 24px;
- line-height: 28px;
-}
+ .forget {
+ color: #1D91FF;
+ font-size: 24px;
+ line-height: 28px;
+ }
-.btn {
- color: #fff;
- height: 88px;
- line-height: 88px;
- text-align: center;
- font-size: 32px;
- margin-top: 40px;
- border-radius: 10px;
-}
+ .btn {
+ color: #fff;
+ height: 88px;
+ line-height: 88px;
+ text-align: center;
+ font-size: 32px;
+ margin-top: 40px;
+ border-radius: 10px;
+ }
-.noTips {
- margin-top: 48px;
-}
+ .noTips {
+ margin-top: 48px;
+ }
-.protocol {
- display: flex;
- align-items: center;
- height: 30px;
+ .protocol {
+ display: flex;
+ align-items: center;
+ height: 30px;
- i {
- width: 30px;
- height: 30px;
- margin-right: 18px;
+ i {
+ width: 30px;
+ height: 30px;
+ margin-right: 18px;
- img {
- width: 100%;
- height: 100%;
- }
- }
-}
-</style>
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3