123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269 |
- <template>
- <!-- 注册 -->
- <div class="flex-col registerPage">
- <s-header :name="$t('register.header')" :noback="false"></s-header>
- <div class="registerFormBox">
- <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') }]" />
- <br>
- <van-field v-model="name" name="name" :label="$t('register.nameLabel')"
- :placeholder="$t('register.namePlaceholder')"
- :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') }]" />
- <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') }]" />
- <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">
- <van-radio-group v-model="ifForeign" direction="horizontal">
- <van-radio name="0" icon-size="18px">{{ $t('register.chinese') }}</van-radio>
- <van-radio name="1" icon-size="18px">{{ $t('register.other') }}</van-radio>
- </van-radio-group>
- </div>
- </div>
- <!-- 中国 -->
- <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')
- }}
- </van-button>
- </van-form>
- </div>
- </div>
- </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';
- export default {
- setup() {
- const active = ref(0);
- const username = ref('');
- const name = ref('');
- const password = ref('');
- const passwordCheck = ref('');
- const ifForeign = ref('0');
- const logonMode = ref('10');
- const phone = ref('');
- const email = ref('');
- const code = ref('');
- const verifyRef = ref(null);
- const verCodeTime = reactive({
- time: 0
- });
- let phoneOrEmailStr = ref('');
- const router = useRouter();
- // 注册点击
- const registerSubmit = async () => {
- if (password.value !== passwordCheck.value) {
- Toast.fail('两次密码不一致,请确认密码');
- return false;
- }
- const { data } = await tAdminSave({
- username: username.value,
- name: name.value,
- password: md5(password.value),
- ifForeign: ifForeign.value,
- // phone: phone.value,
- // email: email.value,
- phoneOrEmail: phoneOrEmailStr,
- code: code.value,
- companyType: '0'
- });
- if (data.code === '00000') {
- Toast('注册成功');
- router.push({ path: '/login' });
- } else {
- Toast.fail(data.message);
- }
- };
- // 发送验证码
- const seedVerCode = async () => {
- if (ifForeign.value === '1') {
- phoneOrEmailStr = email.value;
- } else if (ifForeign.value === '0' && logonMode.value === '10') {
- phoneOrEmailStr = phone.value;
- } else {
- phoneOrEmailStr = email.value;
- }
- const { data } = await sentRegisterCode({
- ifForeign: ifForeign.value,
- phoneOrEmail: phoneOrEmailStr
- });
- console.log('seedVerCodeSuccess', data);
- if (data.code === '00000') {
- Toast(data.data);
- console.log('seedVerCodeSuccess');
- verCodeTime.time = 3 * 60;
- verCodeTimeInterval();
- } else {
- Toast.fail(data.message);
- }
- }
- // 验证码发送成功开始3分钟倒计时
- const verCodeTimeInterval = () => {
- verCodeTime.time--;
- setLocal('registerVerCodeTime', verCodeTime.time)
- if (verCodeTime.time !== 0) {
- setTimeout(() => {
- verCodeTimeInterval();
- }, 1000);
- }
- }
- // 初始化页面获取验证码倒计时
- onMounted(async () => {
- // 加载样式
- styleUrl('register');
- verCodeTime.time = getLocal('registerVerCodeTime');
- if (verCodeTime.time && verCodeTime.time !== '') {
- verCodeTime.time = parseInt(verCodeTime.time);
- if (verCodeTime.time > 0) {
- verCodeTimeInterval();
- }
- } else {
- verCodeTime.time = 0;
- }
- });
- const signOptions = [
- { text: '手机注册', value: "mo" },
- { text: '邮箱注册', value: "ema" }
- ]
- const option1 = [
- {
- text: 'aaaa', value: 0,
- },
- {
- text: 'ccc', value: 1
- }
- ]
- const option2 = [
- {
- text: 'bbb', value: 'b'
- }
- ]
- return {
- ...toRefs(verCodeTime),
- logiLogoImgUrl,
- username,
- name,
- password,
- passwordCheck,
- ifForeign,
- phone,
- email,
- code,
- verifyRef,
- verCodeTime,
- verCodeTimeInterval,
- seedVerCode,
- registerSubmit,
- option1,
- option2,
- signOptions,
- signinModel: 'aaabb',
- active,
- logonMode,
- }
- },
- components: { sHeader }
- }
- </script>
- <style lang="less" scoped>
- @import '../common/style/mixin';
- </style>
|