1
jhzh
2025-04-04 9b2bee1321e99dfce7fe8442f750b1300391e841
src/page/register/index.vue
@@ -1,36 +1,63 @@
<template>
  <div class="register">
    <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)" alt="">
      <div class="top" @click="$router.go(-1)"><img :src="require(`../../assets/theme/${theme}/image/Union.png`)"
            alt="">
    </div>
    <!--        <Step :step="1"></Step>-->
    <div class="title textColor" style="margin-bottom: 0;padding-bottom: 0">{{ $t('注册') }}</div>
    <div style="color: #999999;font-size: 14px;margin: 5px 0 30px 0">{{ $t('欢迎来到')}}ALOKEX</div>
    <div class="flex re-tab" style="border-bottom: #ccc 1px solid;">
      <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)" v-if="false">{{ $t('账号') }}</div>
      <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div>
       <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)" v-if="false">{{ $t('手机号') }}</div>
         <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)" v-if="false">
            {{ $t('账号') }}</div>
         <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}
         </div>
         <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)" v-if="false">
            {{ $t('手机号') }}</div>
    </div>
    <div style="font-size: 14px">
      {{ getRegType(activeIndex, true) }}
    </div>
    <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="getRegType(activeIndex, false)"
             v-model.trim="username"
             :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon"/>
      <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
         :placeholderText="getRegType(activeIndex, false)" v-model.trim="username" :area="isArea"
         :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
    <div style="font-size: 14px">
      {{ $t('设置密码') }}
    </div>
    <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0" :placeholderText="$t('密码(6-12个字符)')" v-model="password" typeText="password"/>
      <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
         :placeholderText="$t('密码(6-12个字符)')" v-model="password" typeText="password" />
    <div style="font-size: 14px">
      {{ $t('确认密码') }}
    </div>
    <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"   :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password"/>
      <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
               :placeholderText="$t('密码(6-12个字符)')" v-model="repassword" typeText="password" />
    <div style="font-size: 14px">
         {{ $t('资金密码') }}
      </div>
      <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
               :placeholderText="$t('请输入密码')" v-model="safeword" typeText="password" />
      <div style="font-size: 14px">
         {{ $t('确认资金密码') }}
      </div>
      <ExInput style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"
         :placeholderText="$t('请确认密码')" v-model="re_safeword" typeText="password" />
      <!-- 邮箱验证码 -->
      <div style="display: flex; align-items: center; margin-top: 20px;">
         <ExInput
            style="border: #bbb 1px solid; border-radius: 3px; padding: 0; padding-bottom: 10px; margin-right: 10px;width: 253px;"
            :placeholderText="$t('请输入邮箱验证码')" v-model="emailVerificationCode" typeText="text" />
         <div style="background-color: #007BFF; color: white; border-radius: 3px; padding: 6px 12px; font-size: 14px;"
            @click="sendVerificationCode">
            {{ time==0? $t('获取验证码'):time }}
         </div>
      </div>
      <!-- <div style="font-size: 14px">
      {{ $t('邀请码(选填)') }}
    </div>
    <ExInput  style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"  :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false"/>
    <div class="protocol textColor">
    <ExInput  style="border: #bbb 1px solid;border-radius: 3px;padding: 0;padding-bottom: 10px;margin: 10px 0"  :placeholderText="$t('请输入邀请码')" v-model="invitCode" :clearBtn="false"/> -->
      <div class="protocol textColor" style="margin-top: 20px;">
      <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=""/>
@@ -53,17 +80,26 @@
</template>
<script>
import {Popup} from "vant";
   import {
      Popup
   } from "vant";
import ExInput from "@/components/ex-input";
import Step from "./step.vue";
import Axios from "@/API/login.js";
import {mapActions, mapGetters} from 'vuex';
import {GET_USERINFO} from '@/store/const.store';
   import {
      mapActions,
      mapGetters
   } from 'vuex';
   import {
      GET_USERINFO
   } from '@/store/const.store';
import nationalityList from '../authentication/components/nationalityList.vue'
import Vcode from "vue-puzzle-vcode";
import img1 from "../../assets/image/slider/1.png";
import img2 from "../../assets/image/slider/2.png";
import {getStorage} from '@/utils/utis'
   import {
      getStorage
   } from '@/utils/utis'
export default {
  props: {},
@@ -84,11 +120,15 @@
      password: "",
      repassword: '',
      invitCode: '',//邀请码
            re_safeword: '',
            safeword: '',
      activeIndex: 1,
      typeText: "password",
      isArea: false,
      dialCode: 0, //电话号前缀
            emailVerificationCode: '', //邮箱验证码
      icon: '',
            time: 0,
      img1,
      img2,
    }
@@ -106,6 +146,28 @@
  },
  methods: {
    ...mapActions('user', [GET_USERINFO]),
         sendVerificationCode() {
            Axios.sendVerifyCode({
               target: this.username,
            }).then((res) => {
               this.time = 30;
               this.timer = setInterval(() => {
                  if (this.time > 0) {
                     this.time = this.time - 1
                  } else {
                     this.time = 0;
                     clearInterval(this.timer)
                  }
               }, 1000);
            }).catch((error) => {
               if (error.code === 'ECONNABORTED') {
                  this.$toast(this.$t('网络超时!'));
               } else if (error.msg !== undefined) {
                  this.$toast(this.$t(error.msg));
               }
            });
         },
    getRegType(activeIndex, bFlag) {
      switch (activeIndex) {
        case 0:
@@ -121,7 +183,9 @@
    },
    onSuccess() {
      console.log('onSuccess')
            // this.save_email()
      this.registerApi();
      this.show = false;
    },
    onFail() {
@@ -190,10 +254,10 @@
        this.$toast(this.$t('请输入密码'));
        return
      }
      if (this.invitCode == '') {
        this.$toast(this.$t('请输入邀请码'));
        return
      }
            // if (this.invitCode == '') {
            //   this.$toast(this.$t('请输入邀请码'));
            //   return
            // }
      if (this.password.length < 6) {
        this.$toast(this.$t('密码(6-12个字符)'));
        return
@@ -222,6 +286,20 @@
        }
      }
    },
         save_email() {
            Axios.save_email({
               email: this.username,
               verifcode: this.emailVerificationCode,
            }).then((res) => {
            }).catch((error) => {
               if (error.code === 'ECONNABORTED') {
                  this.$toast(this.$t('网络超时!'));
               } else if (error.msg !== undefined) {
                  this.$toast(this.$t(error.msg));
               }
            });
         },
    registerApi() {
      switch (this.activeIndex) {
        case 0: {
@@ -238,11 +316,15 @@
        }
      }
      Axios.registerUser({
        username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username : `${this.dialCode}${this.username}`,
               username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username :
                  `${this.dialCode}${this.username}`,
        password: this.password,
        re_password: this.repassword,
        type: this.type,
        usercode: this.invitCode,
               verifcode: this.emailVerificationCode,
               safeword: this.safeword,
               re_safeword: this.re_safeword,
               // usercode: this.invitCode,
      }).then((res) => {
        this.$toast(this.$t('注册成功'));
        setTimeout(()=>{