shenze-sysMan/src/views/register.vue

<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="[{ pattern: /^[a-zA-Z][a-zA-Z0-9]*$/, 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') },
      { pattern: /^(?=.*[a-zA-Z])(?=.*\d).{10,}$/, message: $t('register.passwordPattern') }
    ]" />
        <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">{{ $t('register.chinese') }}</van-radio>
              <van-radio name="1">{{ $t('register.other') }}</van-radio>
            </van-radio-group>
          </div>
        </div>
        <!-- 国家城市 -->
        <van-field v-model="areaValue" v-if="ifForeign === '0'" readonly name="picker" :label="$t('register.areaLabel')"
          :placeholder="$t('register.areaPlaceholder')" @click="showArea = true"
          :rules="[{ required: true, message: $t('register.areaRequired') }]" />
        <van-popup v-model:show="showArea" position="bottom">
          <van-cascader :title="$t('register.areaRequired')" :options="areaOptions" @close="showArea = false"
            @finish="onConfirmArea" />
        </van-popup>

        <van-field v-model="cityValue" v-if="ifForeign === '1'" readonly name="picker"
          :label="$t('register.countryCity')" :placeholder="$t('register.clickCountryCity')" @click="showCountry = true"
          :rules="[{ required: true, message: $t('register.chooseCountryCity') }]" />
        <van-popup v-model:show="showCountry" round position="bottom">
          <van-cascader :title="$t('register.chooseCountryCity')" :options="countryOptions" @close="showCountry = false"
            @finish="onConfirmCountry">
            <template #options-top="{ tabIndex }" >
              <van-search v-if="tabIndex === 0" v-model="searchValue" class="searchCity" :placeholder="$t('kSelectPop.searchKey')" @update:model-value="valueChange(tabIndex)"/>
            </template>
          </van-cascader>
        </van-popup>
        <br>
        <!-- 中国 -->
        <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" :value="0">{{ $t('register.phoneRegistration') }}</van-radio>
                <van-radio name="11" :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', pattern: /^1[3456789]\d{9}$/, 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" :loading=reqApi :loading-text="$t('register.sending')">{{
      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" :loading=reqApi :loading-text="$t('register.sending')">{{
      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" :loading=reqApi :loading-text="$t('register.sending')">{{
      time === 0 ?
        $t('register.seedVerCode') : time + $t('register.replaysInSeconds')
    }}
              </van-button>
            </template>
          </van-field>
        </div>
        <br>
        <van-field v-model="inviteCode" name="inviteCode" :label="$t('register.invitationCode')"
          :placeholder="$t('register.invitationCodePlaceholder')" :rules="[{ required: true, message: $t('register.invitationCodePlaceholder') }]" />
        <!-- 提交验证信息 -->
        <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, watch } from 'vue';
import { showFailToast, showToast } from 'vant';
// import { sentRegisterCode, tAdminSave, getLastSendTime } from '@/service/register';
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 { useI18n } from "vue-i18n";
import { countriesData } from '@/common/js/countries';
import { countriesDataEn } from '@/common/js/countries-en';
import { useCascaderAreaData } from '@vant/area-data';



export default {
  setup() {
    // 引入语言
    const languageName = ref(getLocal("curLang"));
    const { t } = useI18n();
    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 inviteCode = ref('');
    const verifyRef = ref(null);
    const verCodeTime = reactive({
      time: 0
    });
    let phoneOrEmailStr = ref('');
    
    const router = useRouter();
    const reqApi = ref(false);
    const hostName = ref('');

    const citiesValue = ref('');
    const showCountry = ref(false);
    const cityValue = ref('');
    const countryOptions = ref(languageName.value == 'zh' ? countriesData : countriesDataEn);
    
    const { locale } = useI18n()
    watch(locale, (newValue) => {
      if (newValue == 'zh') {
        countryOptions.value = countriesData;
      } else {
        countryOptions.value = countriesDataEn;
      }
    });
    const onConfirmCountry = ({ selectedOptions }) => {
      cityValue.value = selectedOptions.map((option) => option.text).join('/');
      citiesValue.value = selectedOptions[1]?.value;
      showCountry.value = false;
    };

    const areaOptions = ref();
    const areaValue = ref('');
    const showArea = ref(false);
    const onConfirmArea = ({ selectedOptions }) => {
      if (selectedOptions[0]?.text == selectedOptions[1]?.text) {
        areaValue.value = selectedOptions[0]?.text;
        citiesValue.value = selectedOptions[0]?.text;
      } else {
        areaValue.value = selectedOptions[0]?.text + "/" + selectedOptions[1]?.text;
        citiesValue.value = selectedOptions[0]?.text + selectedOptions[1]?.text;
      }
      showArea.value = false;
    };

    // 注册点击
    const registerSubmit = async () => {
      if (password.value !== passwordCheck.value) {
        showFailToast(t('register.twoTypedDiff'));
        return false;
      }
      if (username.value ==='admin') {
        showFailToast(t('register.A0201'));
        return false;
      }
      const { data } = await tAdminSave({
        username: username.value,
        name: name.value,
        password: md5(password.value),
        ifForeign: ifForeign.value,
        phoneOrEmail: phone.value || email.value,
        code: code.value,
        companyType: '0',
        inviteCode: inviteCode.value,
        cities: citiesValue.value
      });

      if (data.code === '00000') {
        showToast(t('register.registerSucess'));
        router.push({ path: '/login' });
      } else if (data.code === 'R0001') {
        showFailToast(t('register.R0001'));
      } else if (data.code === 'R0002') {
        showFailToast(t('register.R0002'));
      } else if (data.code === 'R0003') {
        showFailToast(t('register.R0003'));
      } else if (data.code === 'R0004') {
        showFailToast(t('register.R0004'));
      } else if (data.code === 'R0005') {
        showFailToast(t('register.R0005'));
      } else if (data.code === 'R0006') {
        showFailToast(t('register.R0006'));
      } else if (data.code === 'A0201') {
        showFailToast(t('register.A0201'));
      } else if (data.code === 'A0203') {
        showFailToast(t('register.A0203'));
      } else {
        showFailToast(t('register.registerFail'));
      }
    };

    // 发送验证码
    const seedVerCode = async () => {

      reqApi.value = true;

      if (ifForeign.value === '1') {
        phoneOrEmailStr = email.value;
      } else if (ifForeign.value === '0' && logonMode.value === '10') {
        phoneOrEmailStr = phone.value;
      } else {
        phoneOrEmailStr = email.value;
      }

      getCurrentDomain();

      try {
        const { data } = await sentRegisterCode({
          ifForeign: ifForeign.value,
          phoneOrEmail: phoneOrEmailStr,
          hostName: hostName.value,
        });
        reqApi.value = false;
        if (data.code === '00000') {
          showToast(data.data);
          verCodeTime.time = 1 * 60; // 1分钟定时器，60s后可以更换验证方式
          verCodeTimeInterval();
        } else if (data.code === 'R0009') {
          showToast(t('register.R0009'));
        } else if (data.code === 'R0008') {
          showToast(t('register.R0008'));
        } else if (data.code === 'A0202') {
          showToast(t('register.A0202'));
        } else if (data.code === 'A0207') {
          showToast(t('register.A0207'));
        } else if (data.code === 'R0004') {
          showToast(t('register.R0004'));
        } else {
          showToast(data.message);
        }
      } catch (error) {
        reqApi.value = false;
      }
    }

    // 验证码发送成功开始1分钟倒计时
    const verCodeTimeInterval = () => {
      const intervalId = setInterval(() => {
        verCodeTime.time--;
        setLocal('registerVerCodeTime', verCodeTime.time);
        if (verCodeTime.time === 0) {
          clearInterval(intervalId); // 清除定时器
        }
      }, 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 areaData = useCascaderAreaData();
      areaData.forEach(province => {
        province.children.forEach(city => {
          // 删除城市中的区级信息
          delete city.children;
        });
      });
      // 删除台湾、澳门和香港
      const provincesToRemove = ['710000', '810000', '820000'];
      areaOptions.value = areaData.filter(province => !provincesToRemove.includes(province.value));
    });

    const getCurrentDomain = () => {
      const currentDomain = window.location.href;
      switch (true) {
        case currentDomain.includes('sevencloud.com.cn'):
          hostName.value = 'Sevencloud';
          break;
        case currentDomain.includes('portalmcc.com.cn'):
          hostName.value = 'Portalmcc';
          break;
        default:
          hostName.value = 'Sunzee';
      }
    }

    const signOptions = [
      { text: '手机注册', value: "mo" },
      { text: '邮箱注册', value: "ema" }
    ]

    // 搜索关键词
    const searchValue = ref('');
    const countryData = ref(languageName.value == 'zh' ? countriesData : countriesDataEn);
    // 搜索数据
    const valueChange = (index) => {
      let tempOptions = [];
      if (searchValue.value) {
        if (index === 0) {
          // 国家
          countryData.value.forEach(item => {
            if (item.text.includes(searchValue.value)) {
              tempOptions.push(item);
            }
          });
          countryOptions.value = tempOptions;
        }
      } else {
        countryOptions.value = countryData.value;
      }
    };

    return {
      ...toRefs(verCodeTime),
      logiLogoImgUrl,
      username,
      name,
      password,
      passwordCheck,
      ifForeign,
      phone,
      email,
      code,
      inviteCode,
      verifyRef,
      verCodeTime,
      verCodeTimeInterval,
      seedVerCode,
      registerSubmit,
      signOptions,
      signinModel: 'aaabb',
      active,
      logonMode,
      reqApi,

      cityValue,
      showCountry,
      countryOptions,
      onConfirmCountry,
      showArea,
      areaOptions,
      // areaList,
      onConfirmArea,
      areaValue,

      searchValue,
      valueChange
    }
  },
  components: { sHeader }
}
</script>
<style lang="less" scoped>
@import '../common/style/mixin';
</style>