|
@@ -6,20 +6,21 @@
|
|
|
<van-form @submit="registerSubmit">
|
|
|
<van-field v-model="username" name="username" :label="$t('register.usernameLabel')"
|
|
|
:placeholder="$t('register.usernamePlaceholder')"
|
|
|
- :rules="[{ required: true, message: $t('register.usernameRequired') }]"/>
|
|
|
+ :rules="[{ required: true, message: $t('register.usernameRequired') }]" />
|
|
|
<br>
|
|
|
<van-field v-model="name" name="name" :label="$t('register.nameLabel')"
|
|
|
:placeholder="$t('register.namePlaceholder')"
|
|
|
- :rules="[{ required: true, message: $t('register.nameRequired') }]"/>
|
|
|
+ :rules="[{ required: true, message: $t('register.nameRequired') }]" />
|
|
|
<br>
|
|
|
<van-field v-model="password" name="password" type="password" :label="$t('register.passwordLabel')"
|
|
|
:placeholder="$t('register.passwordPlaceholder')"
|
|
|
- :rules="[{ required: true, message: $t('register.passwordRequired') }]"/>
|
|
|
+ :rules="[{ required: true, message: $t('register.passwordRequired') }]" />
|
|
|
<br>
|
|
|
- <van-field v-model="passwordCheck" name="passwordCheck" type="password"
|
|
|
- :label="$t('register.passwordCheckLabel')" :placeholder="$t('register.passwordCheckPlaceholder')"
|
|
|
- :rules="[{ required: true, message: $t('register.passwordCheckRequired') }]"/>
|
|
|
+ <van-field v-model="passwordCheck" name="passwordCheck" type="password" :label="$t('register.passwordCheckLabel')"
|
|
|
+ :placeholder="$t('register.passwordCheckPlaceholder')"
|
|
|
+ :rules="[{ required: true, message: $t('register.passwordCheckRequired') }]" />
|
|
|
<br>
|
|
|
+ <!-- 国家或地区 -->
|
|
|
<div class="van-cell van-field">
|
|
|
<div class="van-cell__title van-field__label"><span>{{ $t('register.country') }}</span></div>
|
|
|
<div class="van-cell__value van-field__value radioBox">
|
|
@@ -29,68 +30,78 @@
|
|
|
</van-radio-group>
|
|
|
</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 class="o-pr-18" 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') }]" />
|
|
|
+ <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') }]">
|
|
|
+ <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>
|
|
|
+ <!-- 国内邮箱 -->
|
|
|
+ <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">
|
|
|
+ </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') }]">
|
|
|
+ <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>
|
|
|
+ </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') }]" />
|
|
|
+ <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 || email.length === 0">{{
|
|
|
+ time === 0 ?
|
|
|
+ $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
|
|
|
+ }}
|
|
|
+ </van-button>
|
|
|
+ </template>
|
|
|
+ </van-field>
|
|
|
+ </div>
|
|
|
<!-- 提交验证信息 -->
|
|
|
<van-button round type="primary" class="register" native-type="submit">{{
|
|
|
$t('register.registerButton')
|
|
@@ -102,13 +113,13 @@
|
|
|
</template>
|
|
|
<script>
|
|
|
import md5 from 'js-md5';
|
|
|
-import {ref, onMounted, reactive, toRefs} from 'vue';
|
|
|
-import {Toast} from 'vant';
|
|
|
-import {sentRegisterCode, tAdminSave} from '../service/register';
|
|
|
-import sHeader from '../components/SimpleHeader';
|
|
|
-import logiLogoImgUrl from "../assets/login/logo.png";
|
|
|
-import {useRouter} from 'vue-router';
|
|
|
-import {getLocal, setLocal, styleUrl} from '../common/js/utils';
|
|
|
+import { ref, onMounted, reactive, toRefs } from 'vue';
|
|
|
+import { Toast } from 'vant';
|
|
|
+import { sentRegisterCode, tAdminSave } from '@/service/register';
|
|
|
+import sHeader from '@/components/SimpleHeader';
|
|
|
+import logiLogoImgUrl from "@/assets/login/logo.png";
|
|
|
+import { useRouter } from 'vue-router';
|
|
|
+import { getLocal, setLocal, styleUrl } from '@/common/js/utils';
|
|
|
|
|
|
|
|
|
export default {
|
|
@@ -119,6 +130,7 @@ export default {
|
|
|
const password = ref('');
|
|
|
const passwordCheck = ref('');
|
|
|
const ifForeign = ref('0');
|
|
|
+ const logonMode = ref('10');
|
|
|
const phone = ref('');
|
|
|
const email = ref('');
|
|
|
const code = ref('');
|
|
@@ -127,35 +139,45 @@ export default {
|
|
|
time: 0
|
|
|
});
|
|
|
|
|
|
-
|
|
|
const router = useRouter();
|
|
|
+
|
|
|
// 注册点击
|
|
|
const registerSubmit = async () => {
|
|
|
if (password.value !== passwordCheck.value) {
|
|
|
Toast.fail('两次密码不一致,请确认密码');
|
|
|
return false;
|
|
|
}
|
|
|
- const {data} = await tAdminSave({
|
|
|
+ const { data } = await tAdminSave({
|
|
|
username: username.value,
|
|
|
name: name.value,
|
|
|
password: md5(password.value),
|
|
|
ifForeign: ifForeign.value,
|
|
|
phone: phone.value,
|
|
|
email: email.value,
|
|
|
- code: code.value
|
|
|
+ code: code.value,
|
|
|
+ companyType: '0',
|
|
|
});
|
|
|
if (data.code === '00000') {
|
|
|
Toast('注册成功');
|
|
|
- router.push({path: '/login'});
|
|
|
+ router.push({ path: '/login' });
|
|
|
} else {
|
|
|
Toast.fail(data.message);
|
|
|
}
|
|
|
};
|
|
|
+
|
|
|
+ let phoneOrEmail = '';
|
|
|
// 发送验证码
|
|
|
const seedVerCode = async () => {
|
|
|
- const {data} = await sentRegisterCode({
|
|
|
+ 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({
|
|
|
ifForeign: ifForeign.value,
|
|
|
- phoneOrEmail: ifForeign.value === '0' ? phone.value : email.value
|
|
|
+ phoneOrEmail: phoneOrEmail
|
|
|
});
|
|
|
console.log('seedVerCodeSuccess', data);
|
|
|
if (data.code === '00000') {
|
|
@@ -193,8 +215,8 @@ export default {
|
|
|
});
|
|
|
|
|
|
const signOptions = [
|
|
|
- {text: '手机注册', value: "mo"},
|
|
|
- {text: '邮箱注册', value: "ema"}
|
|
|
+ { text: '手机注册', value: "mo" },
|
|
|
+ { text: '邮箱注册', value: "ema" }
|
|
|
]
|
|
|
const option1 = [
|
|
|
{
|
|
@@ -232,10 +254,11 @@ export default {
|
|
|
option2,
|
|
|
signOptions,
|
|
|
signinModel: 'aaabb',
|
|
|
- active
|
|
|
+ active,
|
|
|
+ logonMode,
|
|
|
}
|
|
|
},
|
|
|
- components: {sHeader}
|
|
|
+ components: { sHeader }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|