| | |
| | | <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="top flex justify-between items-center"> |
| | | <img src="../../assets/image/icon-close.png" alt="" @click="router.go(-1)"> |
| | | <div @click="onRoute('/customerService')">{{ $t('onLineService') }}</div> |
| | | </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)">{{ |
| | | <!-- <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> |
| | | <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ |
| | | $t('phoneNum') |
| | | }}</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" |
| | | :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" /> |
| | | <ExInput :label="getRegType(activeIndex, true)" :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" |
| | | v-if="activeIndex === 1" /> |
| | | <div class="inputCom" v-if="activeIndex === 1"> |
| | | <p class="label textColor">{{ $t('验证码') }}</p> |
| | | <ExInput :label="$t('设置登录密码')" :placeholderText="$t('请输入8-16位字符,必须包含大写字母、和特殊字符')" v-model="password" |
| | | typeText="password" /> |
| | | <ExInput :label="$t('确认登录密码')" :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" /> |
| | | <ExInput :label="$t('setSafeword')" :placeholderText="$t('请输入6位阿拉伯数字的资金密码')" v-model="safeword" |
| | | typeText="password" v-if="activeIndex === 1 || activeIndex === 2" /> |
| | | <div class="inputCom" v-if="activeIndex === 1 || activeIndex === 2"> |
| | | <p class="label textColor" v-if="activeIndex == 1">{{ $t('邮箱验证码') }}</p> |
| | | <p class="label textColor" v-else-if="activeIndex == 2">{{ $t('手机验证码') }}</p> |
| | | <p class="label textColor" v-else>{{ $t('验证码') }}</p> |
| | | <div class="iptbox inputBackground"> |
| | | <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" |
| | | |
| | | <input class="inputBackground textColor" type="text" |
| | | :placeholder="activeIndex == 1 ? $t('请输入邮箱验证码') : activeIndex == 2 ? $t('请输入手机验证码') : $t('entryVerifyCode')" |
| | | v-model="verifyCode"> |
| | | <span v-if="type !== 3" @click="senCode">{{ $t('sendVerifyCode') }} |
| | | |
| | | <span v-if="type !== 3" @click="senCode"> |
| | | <span v-if="activeIndex == 1">{{ $t('发送邮箱验证码') }}</span> |
| | | <span v-else-if="activeIndex == 2">{{ $t('发送手机验证码') }}</span> |
| | | <span v-else>{{ $t('sendVerifyCode') }}</span> |
| | | <template v-if="time">({{ time }})s</template> |
| | | </span> |
| | | </div> |
| | | </div> |
| | | <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode" :clearBtn="false" /> |
| | | <ExInput :label="$t('金融机构代码')" :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('readAgree') }}<span class="colorMain" @click="router.push('/TermsOfService')">{{ |
| | | <!-- {{ $t('readAgree') }}<span class="colorMain" @click="router.push('/TermsOfService')">{{ |
| | | $t('serviceConf') |
| | | }}</span> --> |
| | | {{ $t('readAgree') }}<span class="colorMain" @click="router.push('/aboutUs?serviceTerm=23')">{{ |
| | | $t('serviceConf') |
| | | }}</span> |
| | | </div> |
| | |
| | | import img2 from "../../assets/image/slider/2.png"; |
| | | import { getStorage } from '@/utils/index' |
| | | import { useI18n } from 'vue-i18n' |
| | | import { customerServiceUrl } from "@/config"; |
| | | import { useRouter } from 'vue-router'; |
| | | import { ref, onMounted, reactive, onUnmounted } from 'vue'; |
| | | import { showToast } from "vant"; |
| | |
| | | const { t } = useI18n() |
| | | const router = useRouter() |
| | | const onRoute = (path) => { |
| | | router.push(path) |
| | | if (path == 'back') { |
| | | router.go(-1) |
| | | } else { |
| | | if (path == '/customerService') { |
| | | if (customerServiceUrl()) { |
| | | window.location.href = customerServiceUrl(); |
| | | } else { |
| | | router.push(path) |
| | | } |
| | | } else { |
| | | router.push(path) |
| | | } |
| | | } |
| | | } |
| | | const userStore = useUserStore(); |
| | | |
| | |
| | | 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) |
| | |
| | | case 0: |
| | | return bFlag ? t('account') : t('entryAccount'); |
| | | case 1: |
| | | return bFlag ? t('email') : t('entryEmail'); |
| | | return bFlag ? t('电子邮箱') : t('entryEmail'); |
| | | case 2: |
| | | return bFlag ? t('phoneNum') : t('entryPhone'); |
| | | return bFlag ? t('手机号码') : t('请输入手机号码'); |
| | | } |
| | | } |
| | | |
| | |
| | | return false |
| | | } |
| | | _sendVerifyCode({ |
| | | target: username.value, |
| | | target: activeIndex.value === 1 ? username.value : dialCode.value + username.value, |
| | | }).then((res) => { |
| | | time.value = 30; |
| | | state.timer = setInterval(() => { |
| | |
| | | const agreeProt = () => { |
| | | agree.value = !agree.value |
| | | } |
| | | |
| | | // 密码验证 |
| | | const validatePassword = (password) => { |
| | | const passwordRegex = /^(?=.*[A-Z])(?=.*[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]).{8,16}$/; |
| | | return passwordRegex.test(password); |
| | | } |
| | | |
| | | const register = () => { |
| | | console.log(activeIndex.value,'activeIndex.value') |
| | | console.log(activeIndex.value, 'activeIndex.value') |
| | | if (activeIndex.value == 0) { |
| | | if (username.value == '') { |
| | | showToast(t('entryAccount')); |
| | |
| | | return |
| | | } |
| | | } else if (activeIndex.value == 2) { |
| | | if(!(/(^[1-9]\d*$)/.test(username.value))){ |
| | | if (!(/(^[1-9]\d*$)/.test(username.value))) { |
| | | showToast(t('entryPhone')); |
| | | return |
| | | } |
| | |
| | | showToast(t('entryPassword')); |
| | | return |
| | | } |
| | | if (password.value.length < 6) { |
| | | |
| | | if (!validatePassword(password.value)) { |
| | | showToast(t('passwordTips')); |
| | | return |
| | | } |
| | | if (repassword.value !== password.value) { |
| | | showToast(t('noSamePassword')); |
| | | return |
| | | } |
| | | if (invitCode.value.length == '') { |
| | | showToast(t('请输入金融机构代码')); |
| | | return |
| | | } |
| | | if (!agree.value) { |
| | |
| | | } |
| | | } |
| | | |
| | | if (activeIndex.value === 1) { |
| | | if (activeIndex.value === 1 || activeIndex.value === 2) { |
| | | _bindEmailRegister({ |
| | | username: username.value, |
| | | username: activeIndex.value === 1 ? username.value : dialCode.value + username.value, |
| | | password: password.value, |
| | | type: '2', // 2邮箱 |
| | | type: activeIndex.value === 1 ? '2' : '1', // 2邮箱,1手机 |
| | | verifcode: verifyCode.value, |
| | | usercode: invitCode.value, |
| | | safeword: safeword.value |
| | |
| | | userStore[GET_USERINFO](res) |
| | | store.state.user.userInfo = res |
| | | // 其他操作?? |
| | | router.push('/identity') |
| | | // router.push('/identity') |
| | | router.push('/login') |
| | | }) |
| | | } else { |
| | | _registerUser({ |
| | |
| | | }); |
| | | } |
| | | } |
| | | |
| | | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |