1
李凌
2026-01-20 9a9d832dbd364557e070abcd9a7779a2c6c07ffb
src/views/register/index.vue
@@ -1,27 +1,35 @@
<template>
    <div class="register">
        <div class="top" @click="router.go(-1)"><img src="../../assets/image/icon-close.png" alt=""></div>
    <van-nav-bar :left-arrow="false" class="head">
        <template #title>
            <img :src="LOGO" alt="" class="head_logo">
        </template>
        <template #right>
            <img :src="languageObj.image" alt="" class="gq" @click="onRoute('/language')">
        </template>
    </van-nav-bar>
    <div class="register mainBackground">
        <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)">{{
            <div :class="activeIndex == 0 ? 'active textColor' : 'textColor1'" @click="changeIndex(0)">{{
                $t('account')
            }}</div>
                }}</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>
        <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
            :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
        <ExInput :placeholderText="getRegType(activeIndex, false)" v-model="username" :area="isArea"
            :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
        <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"
        <ExInput :placeholderText="$t('passwordTips')" v-model="password" typeText="password" />
        <ExInput :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
        <ExInput :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">
@@ -30,20 +38,25 @@
                </span>
            </div>
        </div>
        <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode" :clearBtn="false" />
        <ExInput :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('/TermsOfService')">{{
                $t('serviceConf')
            }}</span>
            {{ $t('readAgree') }}
            <span @click="router.push('/TermsOfService')">
                《{{ $t('serviceConf') }}》
            </span>
        </div>
        <van-button class="w-full" style="margin-top:10px;" type="primary" @click="register">{{ $t('register') }}
        <van-button class="w-full btnBackground2 btnText" 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 class="noTips textColor1">
            {{ $t('hasAccount') }}
            <span class="textColor" @click="router.push('/login')">
                {{ $t('goLogin') }}
            </span>
        </div>
        <nationality-list ref='controlChildRef' :title="$t('selectArea')" @getName="getName"></nationality-list>
@@ -55,6 +68,8 @@
</template>
<script setup>
import { LOGO, lang } from "@/config";
import { useLanguageStore } from '@/store/language.store'
import ExInput from "@/components/ex-input/index.vue";
import Step from "./step.vue";
import { _registerUser, _sendVerifyCode } from "@/service/login.api";
@@ -90,7 +105,7 @@
const safeword = ref('')
const fundPassword = ref('')
const refundPassword = ref('')
const activeIndex = ref(0)
const activeIndex = ref(1)
const typeText = ref('password')
let isArea = ref(false)
let dialCode = ref(0)
@@ -173,7 +188,7 @@
    agree.value = !agree.value
}
const register = () => {
    console.log(activeIndex.value,'activeIndex.value')
    console.log(activeIndex.value, 'activeIndex.value')
    if (activeIndex.value == 0) {
        if (username.value == '') {
            showToast(t('entryAccount'));
@@ -198,7 +213,7 @@
            return
        }
    } else if (activeIndex.value == 2) {
        if(!(/(^[1-9]\d*$)/.test(username.value))){
        if (!(/(^[1-9]\d*$)/.test(username.value))) {
            showToast(t('entryPhone'));
            return
        }
@@ -252,54 +267,72 @@
            }
    }
    if (activeIndex.value === 1) {
        _bindEmailRegister({
            username: username.value,
            password: password.value,
            type: '2',   // 2邮箱
            verifcode: verifyCode.value,
            usercode: invitCode.value,
            safeword: safeword.value
        }).then((res) => {
            userStore[GET_USERINFO](res)
            store.state.user.userInfo = res
            // 其他操作??
            router.push('/identity')
        })
    } else {
        _registerUser({
            userName: (activeIndex.value === 0 || activeIndex.value === 1) ? username.value : `${dialCode.value}${username.value}`,
            password: password.value,
            // re_password: repassword.value,
            type: type.value,
            userCode: invitCode.value,
        }).then((res) => {
            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}` } })
            }
        });
    }
    // if (activeIndex.value === 1) {
    //     _bindEmailRegister({
    //         username: username.value,
    //         password: password.value,
    //         type: '2',   // 2邮箱
    //         verifcode: verifyCode.value,
    //         usercode: invitCode.value,
    //         safeword: safeword.value
    //     }).then((res) => {
    //         userStore[GET_USERINFO](res)
    //         store.state.user.userInfo = res
    //         // 其他操作??
    //         router.push('/identity')
    //     })
    // } else {
    _registerUser({
        userName: (activeIndex.value === 0 || activeIndex.value === 1) ? username.value : `${dialCode.value}${username.value}`,
        password: password.value,
        // re_password: repassword.value,
        type: type.value,
        userCode: invitCode.value,
        emailCode: verifyCode.value,
    }).then((res) => {
        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}` } })
        // }
    });
    // }
}
// 语言切换
const languageStore = useLanguageStore()
const languageObj = lang.find(i => i.key == languageStore.language)
</script>
<style lang="scss" scoped>
.activeBKClick {
    &:active {
        background: $tab_background;
        opacity: 0.5;
    }
// .activeBKClick {
//     &:active {
//         background: $tab_background;
//         opacity: 0.5;
//     }
// }
// .activeClick {
//     &:active {
//         background: $mainbgWhiteColor;
//         opacity: 0.5;
//     }
// }
.head_logo {
    height: 3rem;
}
.activeClick {
    &:active {
        background: $mainbgWhiteColor;
        opacity: 0.5;
.gq {
    height: 2rem;
}
.head {
    @include themify() {
        border-bottom: themed("divi_line") 1px solid;
    }
}
@@ -308,7 +341,6 @@
    box-sizing: border-box;
    padding: 16px;
    font-size: 13px;
    background-color: $mainbgWhiteColor;
}
.top {
@@ -332,30 +364,33 @@
    margin-bottom: 22px;
    div {
        padding: 0 18px;
        height: 34px;
        line-height: 34px;
        text-align: center;
        border-radius: 4px;
        margin-right: 10px;
        // padding: 0 18px;
        // height: 34px;
        // line-height: 34px;
        // text-align: center;
        // border-radius: 4px;
        // margin-right: 10px;
        margin-right: 2rem;
    }
    .active {
        // background: $US_tabActice_background;
        background: $bg_yellow;
        // color: $color_main;
        color: $text_color4;
        // background: $bg_yellow;
        // color: $text_color4;
    }
}
.forget {
    color: $color_main;
    font-size: 12px;
    line-height: 14px;
}
.noTips {
    margin-top: 24px;
    text-align: center;
    span {
        text-decoration: underline;
    }
}
.protocol {
@@ -373,11 +408,15 @@
            height: 100%;
        }
    }
    span {
        text-decoration: underline;
        text-decoration-style: dashed;
    }
}
.iptbox {
    height: 44px;
    margin-top: 8px;
    margin-bottom: 18px;
    padding: 0 20px;
    display: flex;
@@ -389,10 +428,6 @@
        flex: 1;
        height: 100%;
        border: none;
    }
    span {
        color: $color_main;
    }
}
</style>