|
@@ -17,9 +17,11 @@
|
|
:rules="[{ required: true, message: $t('register.passwordRequired') }]"/>
|
|
:rules="[{ required: true, message: $t('register.passwordRequired') }]"/>
|
|
<br>
|
|
<br>
|
|
<van-field v-model="passwordCheck" name="passwordCheck" type="password"
|
|
<van-field v-model="passwordCheck" name="passwordCheck" type="password"
|
|
- :label="$t('register.passwordCheckLabel')" :placeholder="$t('register.passwordCheckPlaceholder')"
|
|
|
|
|
|
+ :label="$t('register.passwordCheckLabel')"
|
|
|
|
+ :placeholder="$t('register.passwordCheckPlaceholder')"
|
|
:rules="[{ required: true, message: $t('register.passwordCheckRequired') }]"/>
|
|
:rules="[{ required: true, message: $t('register.passwordCheckRequired') }]"/>
|
|
<br>
|
|
<br>
|
|
|
|
+ <!-- 国家或地区 -->
|
|
<div class="van-cell van-field">
|
|
<div class="van-cell van-field">
|
|
<div class="van-cell__title van-field__label"><span>{{ $t('register.country') }}</span></div>
|
|
<div class="van-cell__title van-field__label"><span>{{ $t('register.country') }}</span></div>
|
|
<div class="van-cell__value van-field__value radioBox">
|
|
<div class="van-cell__value van-field__value radioBox">
|
|
@@ -29,68 +31,84 @@
|
|
</van-radio-group>
|
|
</van-radio-group>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <van-tabs v-model:active="active" type="card" swipeable v-if="ifForeign === '0'">
|
|
|
|
- <van-tab :title="$t('register.phoneRegistration')">
|
|
|
|
- <!-- 手机号码 -->
|
|
|
|
- <van-field v-if="ifForeign === '0'" v-model="phone" name="phone" type="tel"
|
|
|
|
- :label="$t('register.phoneLabel')" :placeholder="$t('register.phonePlaceholder')"
|
|
|
|
- :rules="[{ required: ifForeign === '0', message: $t('register.phoneRequired') }]">
|
|
|
|
- </van-field>
|
|
|
|
- <br>
|
|
|
|
- <!-- 短信验证码 -->
|
|
|
|
- <van-field v-if="ifForeign === '0'" v-model="code" name="code" :label="$t('register.codeLabel')"
|
|
|
|
- :placeholder="$t('register.codePlaceholder')"
|
|
|
|
- :rules="[{ required: true, message: $t('register.codeRequired') }]">
|
|
|
|
- <template #button v-if="ifForeign === '0'">
|
|
|
|
- <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{
|
|
|
|
- time === 0 ?
|
|
|
|
- $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
|
- }}
|
|
|
|
- </van-button>
|
|
|
|
- </template>
|
|
|
|
- </van-field>
|
|
|
|
- </van-tab>
|
|
|
|
- <van-tab :title="$t('register.emailRegistration')">
|
|
|
|
- <!-- 邮箱 -->
|
|
|
|
- <van-field v-if="ifForeign === '0'" v-model="email" name="email" :label="$t('register.emailLabel')"
|
|
|
|
- :placeholder="$t('register.emailPlaceholder')"
|
|
|
|
- :rules="[{ required: ifForeign === '0', message: $t('register.emailRequired') }]">
|
|
|
|
- </van-field>
|
|
|
|
- <br>
|
|
|
|
- <!-- 邮箱验证码 -->
|
|
|
|
- <van-field v-if="ifForeign === '0'" v-model="code" name="code"
|
|
|
|
- :label="$t('register.emailCodeLabel')" :placeholder="$t('register.emailCodePlaceholder')"
|
|
|
|
- :rules="[{ required: true, message: $t('register.emailCodeRequired') }]">
|
|
|
|
- <template #button v-if="ifForeign === '0'">
|
|
|
|
- <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{
|
|
|
|
- time === 0 ?
|
|
|
|
- $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
|
- }}
|
|
|
|
- </van-button>
|
|
|
|
- </template>
|
|
|
|
- </van-field>
|
|
|
|
- </van-tab>
|
|
|
|
- </van-tabs>
|
|
|
|
- <br v-if="ifForeign === '0'">
|
|
|
|
- <van-field v-if="ifForeign === '1'" v-model="email" name="email" :label="$t('register.emailLabel')"
|
|
|
|
- :placeholder="$t('register.emailPlaceholder')"
|
|
|
|
- :rules="[{ required: ifForeign === '1', message: $t('register.emailRequired') }]">
|
|
|
|
- </van-field>
|
|
|
|
- <br v-if="ifForeign === '1'">
|
|
|
|
- <!-- 海外,邮箱验证码 -->
|
|
|
|
- <van-field v-if="ifForeign === '1'" v-model="code" name="code" :label="$t('register.emailCodeLabel')"
|
|
|
|
- :placeholder="$t('register.emailCodePlaceholder')"
|
|
|
|
- :rules="[{ required: true, message: $t('register.emailCodeRequired') }]">
|
|
|
|
- <template #button v-if="ifForeign === '1'">
|
|
|
|
- <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0">{{
|
|
|
|
- time === 0
|
|
|
|
- ?
|
|
|
|
- $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
|
- }}
|
|
|
|
- </van-button>
|
|
|
|
- </template>
|
|
|
|
- </van-field>
|
|
|
|
- <br v-if="ifForeign === '1'">
|
|
|
|
|
|
+ <!-- 中国 -->
|
|
|
|
+ <div v-if="ifForeign === '0'">
|
|
|
|
+ <div class="van-cell van-field">
|
|
|
|
+ <div class="van-cell__title van-field__label"><span>{{ $t('register.logonMode') }}</span></div>
|
|
|
|
+ <div class="van-cell__value van-field__value radioBox">
|
|
|
|
+ <van-radio-group v-model="logonMode" direction="horizontal">
|
|
|
|
+ <van-radio name="10" icon-size="18px" :value="0">{{ $t('register.phoneRegistration') }}</van-radio>
|
|
|
|
+ <van-radio name="11" icon-size="18px" :value="1">{{ $t('register.emailRegistration') }}</van-radio>
|
|
|
|
+ </van-radio-group>
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 国内手机 -->
|
|
|
|
+ <van-field v-if="logonMode === '10'" v-model="phone" name="phone" type="tel"
|
|
|
|
+ :label="$t('register.phoneLabel')"
|
|
|
|
+ :placeholder="$t('register.phonePlaceholder')"
|
|
|
|
+ :rules="[{ required: ifForeign === '0' && logonMode === '10', message: $t('register.phoneRequired') }]"
|
|
|
|
+ >
|
|
|
|
+ <template #button v-if="ifForeign === '0' && logonMode === '10'">
|
|
|
|
+ <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || phone.length === 0">{{
|
|
|
|
+ time === 0 ?
|
|
|
|
+ $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
|
+ }}
|
|
|
|
+ </van-button>
|
|
|
|
+ </template>
|
|
|
|
+ </van-field>
|
|
|
|
+ <br v-if="ifForeign === '0' && logonMode === '10'">
|
|
|
|
+ <!-- 短信验证码 -->
|
|
|
|
+ <van-field v-if="logonMode === '10'" v-model="code" name="code" :label="$t('register.codeLabel')"
|
|
|
|
+ :placeholder="$t('register.codePlaceholder')"
|
|
|
|
+ :rules="[{ required: true, message: $t('register.codeRequired') }]"/>
|
|
|
|
+ <!-- 国内邮箱 -->
|
|
|
|
+ <van-field v-if="logonMode === '11'" v-model="email" name="email"
|
|
|
|
+ :label="$t('register.emailLabel')"
|
|
|
|
+ :placeholder="$t('register.emailPlaceholder')"
|
|
|
|
+ :rules="[
|
|
|
|
+ { required: ifForeign === '0' && logonMode === '11', message: $t('register.emailRequired') },
|
|
|
|
+ { pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '邮箱格式错误!'}
|
|
|
|
+ ]"
|
|
|
|
+ :minlength="3"
|
|
|
|
+ :maxlength="20"
|
|
|
|
+ >
|
|
|
|
+ <template #button v-if="ifForeign === '0' && logonMode === '11'">
|
|
|
|
+ <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || email.length === 0">{{
|
|
|
|
+ time === 0 ?
|
|
|
|
+ $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
|
+ }}
|
|
|
|
+ </van-button>
|
|
|
|
+ </template>
|
|
|
|
+ </van-field>
|
|
|
|
+ <br v-if="ifForeign === '0' && logonMode === '11'">
|
|
|
|
+ <!-- 国内邮箱验证码 -->
|
|
|
|
+ <van-field v-if="logonMode === '11'" v-model="code" name="code"
|
|
|
|
+ :label="$t('register.emailCodeLabel')"
|
|
|
|
+ :placeholder="$t('register.emailCodePlaceholder')"
|
|
|
|
+ :rules="[{ required: true, message: $t('register.emailCodeRequired') }]"/>
|
|
|
|
+ </div>
|
|
|
|
+ <!-- 海外 -->
|
|
|
|
+ <div v-if="ifForeign === '1'">
|
|
|
|
+ <!-- 海外邮箱 -->
|
|
|
|
+ <van-field v-if="ifForeign === '1'" v-model="email" name="email"
|
|
|
|
+ :label="$t('register.emailLabel')"
|
|
|
|
+ :placeholder="$t('register.emailPlaceholder')"
|
|
|
|
+ :rules="[{ required: ifForeign === '1', message: $t('register.emailRequired') }]"
|
|
|
|
+ >
|
|
|
|
+ <template #button v-if="ifForeign === '1'">
|
|
|
|
+ <van-button size="small" type="primary" @click="seedVerCode()" :disabled="time !== 0 || email.length === 0">{{
|
|
|
|
+ time === 0 ?
|
|
|
|
+ $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
|
+ }}
|
|
|
|
+ </van-button>
|
|
|
|
+ </template>
|
|
|
|
+ </van-field>
|
|
|
|
+ <br v-if="ifForeign === '1'">
|
|
|
|
+ <!-- 海外邮箱验证码 -->
|
|
|
|
+ <van-field v-if="ifForeign === '1'" v-model="code" name="code" :label="$t('register.emailCodeLabel')"
|
|
|
|
+ :placeholder="$t('register.emailCodePlaceholder')"
|
|
|
|
+ :rules="[{ required: true, message: $t('register.emailCodeRequired') }]"/>
|
|
|
|
+ </div>
|
|
<!-- 提交验证信息 -->
|
|
<!-- 提交验证信息 -->
|
|
<van-button round type="primary" class="register" native-type="submit">{{
|
|
<van-button round type="primary" class="register" native-type="submit">{{
|
|
$t('register.registerButton')
|
|
$t('register.registerButton')
|
|
@@ -104,11 +122,11 @@
|
|
import md5 from 'js-md5';
|
|
import md5 from 'js-md5';
|
|
import {ref, onMounted, reactive, toRefs} from 'vue';
|
|
import {ref, onMounted, reactive, toRefs} from 'vue';
|
|
import {Toast} from 'vant';
|
|
import {Toast} from 'vant';
|
|
-import {sentRegisterCode, tAdminSave} from '../service/register';
|
|
|
|
-import sHeader from '../components/SimpleHeader';
|
|
|
|
-import logiLogoImgUrl from "../assets/login/logo.png";
|
|
|
|
|
|
+import {sentRegisterCode, tAdminSave} from '@/service/register';
|
|
|
|
+import sHeader from '@/components/SimpleHeader';
|
|
|
|
+import logiLogoImgUrl from "@/assets/login/logo.png";
|
|
import {useRouter} from 'vue-router';
|
|
import {useRouter} from 'vue-router';
|
|
-import {getLocal, setLocal, styleUrl} from '../common/js/utils';
|
|
|
|
|
|
+import {getLocal, setLocal, styleUrl} from '@/common/js/utils';
|
|
|
|
|
|
|
|
|
|
export default {
|
|
export default {
|
|
@@ -119,6 +137,7 @@ export default {
|
|
const password = ref('');
|
|
const password = ref('');
|
|
const passwordCheck = ref('');
|
|
const passwordCheck = ref('');
|
|
const ifForeign = ref('0');
|
|
const ifForeign = ref('0');
|
|
|
|
+ const logonMode = ref('10');
|
|
const phone = ref('');
|
|
const phone = ref('');
|
|
const email = ref('');
|
|
const email = ref('');
|
|
const code = ref('');
|
|
const code = ref('');
|
|
@@ -127,8 +146,8 @@ export default {
|
|
time: 0
|
|
time: 0
|
|
});
|
|
});
|
|
|
|
|
|
-
|
|
|
|
const router = useRouter();
|
|
const router = useRouter();
|
|
|
|
+
|
|
// 注册点击
|
|
// 注册点击
|
|
const registerSubmit = async () => {
|
|
const registerSubmit = async () => {
|
|
if (password.value !== passwordCheck.value) {
|
|
if (password.value !== passwordCheck.value) {
|
|
@@ -151,11 +170,20 @@ export default {
|
|
Toast.fail(data.message);
|
|
Toast.fail(data.message);
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
+
|
|
|
|
+ let phoneOrEmail = '';
|
|
// 发送验证码
|
|
// 发送验证码
|
|
const seedVerCode = async () => {
|
|
const seedVerCode = async () => {
|
|
|
|
+ if (ifForeign.value === '1') {
|
|
|
|
+ phoneOrEmail = email.value;
|
|
|
|
+ } else if (ifForeign.value === '0' && logonMode.value === '10') {
|
|
|
|
+ phoneOrEmail = phone.value;
|
|
|
|
+ } else {
|
|
|
|
+ phoneOrEmail = email.value;
|
|
|
|
+ }
|
|
const {data} = await sentRegisterCode({
|
|
const {data} = await sentRegisterCode({
|
|
ifForeign: ifForeign.value,
|
|
ifForeign: ifForeign.value,
|
|
- phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value
|
|
|
|
|
|
+ phoneOrEmail: phoneOrEmail
|
|
});
|
|
});
|
|
console.log('seedVerCodeSuccess', data);
|
|
console.log('seedVerCodeSuccess', data);
|
|
if (data.code === '00000') {
|
|
if (data.code === '00000') {
|
|
@@ -232,12 +260,132 @@ export default {
|
|
option2,
|
|
option2,
|
|
signOptions,
|
|
signOptions,
|
|
signinModel: 'aaabb',
|
|
signinModel: 'aaabb',
|
|
- active
|
|
|
|
|
|
+ active,
|
|
|
|
+ logonMode,
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- components: {sHeader}
|
|
|
|
|
|
+ components: { sHeader }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
@import '../common/style/mixin';
|
|
@import '../common/style/mixin';
|
|
|
|
+
|
|
|
|
+.registerPage {
|
|
|
|
+ .registerFormBox {
|
|
|
|
+ width: 100%;
|
|
|
|
+ margin-top: 38px;
|
|
|
|
+ text-align: center;
|
|
|
|
+
|
|
|
|
+ /deep/ .van-form {
|
|
|
|
+ .van-cell {
|
|
|
|
+ width: 90%;
|
|
|
|
+ height: 38px;
|
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
|
+ padding: 0;
|
|
|
|
+ color: rgba(168, 168, 197, 1);
|
|
|
|
+ font-size: 13px;
|
|
|
|
+ margin: 0 auto;
|
|
|
|
+ margin-top: 10px;
|
|
|
|
+ overflow: visible;
|
|
|
|
+
|
|
|
|
+ &::after {
|
|
|
|
+ display: none;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-field__button button {
|
|
|
|
+ background-color: #8096ec;
|
|
|
|
+ color: #fff;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-field__control {
|
|
|
|
+ height: 38px;
|
|
|
|
+ line-height: 38px;
|
|
|
|
+ padding: 6px;
|
|
|
|
+ border-radius: 2px;
|
|
|
|
+ border: 0.5px solid rgba(185, 186, 208, 1);
|
|
|
|
+
|
|
|
|
+ &:-internal-autofill-previewed,
|
|
|
|
+ &:-internal-autofill-selected {
|
|
|
|
+ -webkit-text-fill-color: #323233 !important;
|
|
|
|
+ transition: background-color 5000s ease-in-out 0s !important;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-field__control::-webkit-input-placeholder {
|
|
|
|
+ color: rgba(168, 168, 197, 1);
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-cell__value {
|
|
|
|
+ width: 100%;
|
|
|
|
+ flex: 0 auto;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-field__label {
|
|
|
|
+ display: flex;
|
|
|
|
+ height: 38px;
|
|
|
|
+ align-items: center;
|
|
|
|
+ // line-height: 38px;
|
|
|
|
+ width: 100px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .radioBox {
|
|
|
|
+ display: flex;
|
|
|
|
+
|
|
|
|
+ .van-radio-group--horizontal {
|
|
|
|
+ width: 100%;
|
|
|
|
+ justify-content: space-around;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-radio {
|
|
|
|
+ overflow: visible;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-radio__icon {
|
|
|
|
+ font-size: 13px;
|
|
|
|
+
|
|
|
|
+ .van-icon {
|
|
|
|
+ width: 12px;
|
|
|
|
+ height: 12px;
|
|
|
|
+ border-color: #4d6add;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-radio__label {
|
|
|
|
+ line-height: 13px;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-radio__icon--checked .van-icon-success {
|
|
|
|
+ border-color: #4d6add;
|
|
|
|
+ background: #4d6add;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-radio__icon--checked .van-icon-success::before {
|
|
|
|
+ content: '';
|
|
|
|
+ background: #fff;
|
|
|
|
+ width: 40%;
|
|
|
|
+ height: 40%;
|
|
|
|
+ position: absolute;
|
|
|
|
+ top: 30%;
|
|
|
|
+ left: 30%;
|
|
|
|
+ border-radius: 100%;
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .van-radio__icon--checked+.van-radio__label {
|
|
|
|
+ color: #4d6add;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ .register {
|
|
|
|
+ background-color: rgba(77, 106, 221, 1);
|
|
|
|
+ border-radius: 17px;
|
|
|
|
+ height: 34px;
|
|
|
|
+ width: 220px;
|
|
|
|
+ margin-top: 60px;
|
|
|
|
+ font-size: 15px;
|
|
|
|
+ font-family: PingFangSC-Medium;
|
|
|
|
+ }
|
|
|
|
+}
|
|
</style>
|
|
</style>
|