1

jhzh

2025-04-04 9b2bee1321e99dfce7fe8442f750b1300391e841

 src/page/register/index.vue

@@ -1,367 +1,449 @@
<template>
  <div class="register">
    <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="register">
      <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>
    <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"/>
      <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>
      <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" />

    <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"/>
    <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"/>
    <div style="font-size: 14px">
      <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" />
      <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="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">
      <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=""/>
      </i>
      {{ $t('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{
    <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="" />
         </i>
         {{ $t('我已阅读并同意') }}<span class="colorMain" @click="$router.push('/TermsOfService?serviceTerm=1')">{{
        $t('服务条款')
      }}</span>
    </div>
    <div class="btn btnMain" @click="register">{{ $t('注册') }}</div>
    <div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')">
                {{ $t('去登录') }}</span>
    </div>
    <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>
      </div>
      <div class="btn btnMain" @click="register">{{ $t('注册') }}</div>
      <div class="noTips textColor">{{ $t('已有账号') }}<span class="colorMain" @click="$router.push('/login')">
            {{ $t('去登录') }}</span>
      </div>
      <nationality-list ref='controlChild' :title="$t('选择区域码')" @getName="getName(arguments)"></nationality-list>

    <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
           @close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')"/>
      <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
         @close="show = false;" sliderText='' :successText="$t('验证通过!')" :failText="$t('验证失败,请重试')" />

    <div>{{ msg }}</div>
  </div>
      <div>{{ msg }}</div>
   </div>
</template>

<script>
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 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 {
      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 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'

export default {
  props: {},
  components: {
    [Popup.name]: Popup,
    ExInput,
    Step,
    nationalityList,
    Vcode
  },
  data() {
    return {
      show: false,
      msg: '',
      type: 3,// 1手机 2 邮箱 3账号
      agree: false,
      username: '',
      password: "",
      repassword: '',
      invitCode: '',//邀请码
      activeIndex: 1,
      typeText: "password",
      isArea: false,
      dialCode: 0, //电话号前缀
      icon: '',
      img1,
      img2,
    }
  },
  mounted() {
    let usercode = getStorage('usercode')
    if (usercode) {
      this.invitCode = usercode;
    }
  },
  computed: {
    ...mapGetters({
      theme: 'home/theme'
    }),
  },
  methods: {
    ...mapActions('user', [GET_USERINFO]),
    getRegType(activeIndex, bFlag) {
      switch (activeIndex) {
        case 0:
          return bFlag ? this.$t('账号') : this.$t('请输入账号');
        case 1:
          return bFlag ? this.$t('邮箱') : this.$t('请输入邮箱');
        case 2:
          return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
      }
    },
    onClose() {
      console.log('onClose')
    },
    onSuccess() {
      console.log('onSuccess')
      this.registerApi();
      this.show = false;
    },
    onFail() {
      this.msg = ''
    },
    onRefresh() {
      this.msg = ''
    },
    onSelectArea() {
      this.openBtn();
    },
    //打开国家列表底部弹窗
    openBtn() {
      this.$refs.controlChild.open();
    },
    //获取到当前选中国家的code值
    getName(params) {
      this.icon = params[1];
      this.dialCode = params[2];
    },
    agreeProt() {
      this.agree = !this.agree
    },
    register() {
      // if (this.activeIndex == 0){
      //     let match = this.username.search(/@/);
      //     if (this.username == '' || match == -1) {
      //         this.$toast(this.$t('请输入正确的邮箱地址'));
      //         return
      //     }
      // }else{
      //     if (this.username == '' ) {
      //         this.$toast(this.$t('请输入手机号'));
      //         return
      //     }
      // }
      switch (this.activeIndex) {
        case 0: {
          if (this.username == '') {
            this.$toast(this.$t('请输入账号'));
            return;
          }
          if (this.username.length < 6 || this.username.length > 30) {
            this.$toast(this.$t('账号长度必须6-30位'));
            return;
          }
          break;
        }
        case 1: {
          let match = this.username.search(/@/);
          if (this.username == '' || match == -1) {
            this.$toast(this.$t('请输入正确的邮箱地址'));
            return;
          }
          break;
        }
        case 2: {
          if (this.username == '') {
            this.$toast(this.$t('请输入手机号'));
            return;
          }
          break;
        }
      }
      if (this.password == '') {
        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
      }
      if (this.repassword !== this.password) {
        this.$toast(this.$t('密码不一致'));
        return
      }
      if (!this.agree) {
        this.$toast(this.$t('请同意服务条款'));
        return
      }
      this.show = true
    },
    changeIndex(index) {
      this.activeIndex = index;
      switch (index) {
        case 0:
        case 1: {
          this.isArea = false;
          break;
        }
        case 2: {
          this.isArea = true;
          break;
        }
      }
    },
    registerApi() {
      switch (this.activeIndex) {
        case 0: {
          this.type = 3;
          break;
        }
        case 1: {
          this.type = 2;
          break;
        }
        case 2: {
          this.type = 1;
          break;
        }
      }
      Axios.registerUser({
        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,
      }).then((res) => {
        this.$toast(this.$t('注册成功'));
        setTimeout(()=>{
          this.$router.push('/login')
        },1500)
        return;
        // this.GET_USERINFO(res.data)
        // if (this.activeIndex == 0) {
        //   this.$router.push('/setFond')
        // } else {
        //   this.$router.push({name: 'verify',
        //     query: {
        //       type: this.activeIndex,
        //       account: this.activeIndex == 1 ? this.username : `${this.dialCode}${this.username}`
        //     }
        //   })
        // }
      }).catch((error) => {
        if (error.code === 'ECONNABORTED') {
          this.$toast(this.$t('网络超时！'));
        } else if (error.msg !== undefined) {
          this.$toast(this.$t(error.msg));
        }
      });
    }
  }
}
   export default {
      props: {},
      components: {
         [Popup.name]: Popup,
         ExInput,
         Step,
         nationalityList,
         Vcode
      },
      data() {
         return {
            show: false,
            msg: '',
            type: 3, // 1手机 2 邮箱 3账号
            agree: false,
            username: '',
            password: "",
            repassword: '',
            invitCode: '', //邀请码
            re_safeword: '',
            safeword: '',
            activeIndex: 1,
            typeText: "password",
            isArea: false,
            dialCode: 0, //电话号前缀
            emailVerificationCode: '', //邮箱验证码
            icon: '',
            time: 0,
            img1,
            img2,
         }
      },
      mounted() {
         let usercode = getStorage('usercode')
         if (usercode) {
            this.invitCode = usercode;
         }
      },
      computed: {
         ...mapGetters({
            theme: 'home/theme'
         }),
      },
      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:
                  return bFlag ? this.$t('账号') : this.$t('请输入账号');
               case 1:
                  return bFlag ? this.$t('邮箱') : this.$t('请输入邮箱');
               case 2:
                  return bFlag ? this.$t('手机号') : this.$t('请输入手机号');
            }
         },
         onClose() {
            console.log('onClose')
         },
         onSuccess() {
            console.log('onSuccess')
            // this.save_email()
            this.registerApi();

            this.show = false;
         },
         onFail() {
            this.msg = ''
         },
         onRefresh() {
            this.msg = ''
         },
         onSelectArea() {
            this.openBtn();
         },
         //打开国家列表底部弹窗
         openBtn() {
            this.$refs.controlChild.open();
         },
         //获取到当前选中国家的code值
         getName(params) {
            this.icon = params[1];
            this.dialCode = params[2];
         },
         agreeProt() {
            this.agree = !this.agree
         },
         register() {
            // if (this.activeIndex == 0){
            //     let match = this.username.search(/@/);
            //     if (this.username == '' || match == -1) {
            //         this.$toast(this.$t('请输入正确的邮箱地址'));
            //         return
            //     }
            // }else{
            //     if (this.username == '' ) {
            //         this.$toast(this.$t('请输入手机号'));
            //         return
            //     }
            // }
            switch (this.activeIndex) {
               case 0: {
                  if (this.username == '') {
                     this.$toast(this.$t('请输入账号'));
                     return;
                  }
                  if (this.username.length < 6 || this.username.length > 30) {
                     this.$toast(this.$t('账号长度必须6-30位'));
                     return;
                  }
                  break;
               }
               case 1: {
                  let match = this.username.search(/@/);
                  if (this.username == '' || match == -1) {
                     this.$toast(this.$t('请输入正确的邮箱地址'));
                     return;
                  }
                  break;
               }
               case 2: {
                  if (this.username == '') {
                     this.$toast(this.$t('请输入手机号'));
                     return;
                  }
                  break;
               }
            }
            if (this.password == '') {
               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
            }
            if (this.repassword !== this.password) {
               this.$toast(this.$t('密码不一致'));
               return
            }
            if (!this.agree) {
               this.$toast(this.$t('请同意服务条款'));
               return
            }
            this.show = true
         },
         changeIndex(index) {
            this.activeIndex = index;
            switch (index) {
               case 0:
               case 1: {
                  this.isArea = false;
                  break;
               }
               case 2: {
                  this.isArea = true;
                  break;
               }
            }
         },
         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: {
                  this.type = 3;
                  break;
               }
               case 1: {
                  this.type = 2;
                  break;
               }
               case 2: {
                  this.type = 1;
                  break;
               }
            }
            Axios.registerUser({
               username: (this.activeIndex == 0 || this.activeIndex == 1) ? this.username :
                  `${this.dialCode}${this.username}`,
               password: this.password,
               re_password: this.repassword,
               type: this.type,
               verifcode: this.emailVerificationCode,
               safeword: this.safeword,
               re_safeword: this.re_safeword,
               // usercode: this.invitCode,
            }).then((res) => {
               this.$toast(this.$t('注册成功'));
               setTimeout(() => {
                  this.$router.push('/login')
               }, 1500)
               return;
               // this.GET_USERINFO(res.data)
               // if (this.activeIndex == 0) {
               //   this.$router.push('/setFond')
               // } else {
               //   this.$router.push({name: 'verify',
               //     query: {
               //       type: this.activeIndex,
               //       account: this.activeIndex == 1 ? this.username : `${this.dialCode}${this.username}`
               //     }
               //   })
               // }
            }).catch((error) => {
               if (error.code === 'ECONNABORTED') {
                  this.$toast(this.$t('网络超时！'));
               } else if (error.msg !== undefined) {
                  this.$toast(this.$t(error.msg));
               }
            });
         }
      }
   }
</script>

<style lang="scss" scoped>
.register {
  width: 100%;
  box-sizing: border-box;
  padding: 32px;
  font-size: 26px;
}
   .register {
      width: 100%;
      box-sizing: border-box;
      padding: 32px;
      font-size: 26px;
   }

.top {
  padding-left: 18px;
  padding-top: 18px;
   .top {
      padding-left: 18px;
      padding-top: 18px;

  img {
    width: 37px;
    height: 37px;
  }
}
      img {
         width: 37px;
         height: 37px;
      }
   }

.title {
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 66px;
}
   .title {
      font-weight: 700;
      font-size: 52px;
      margin-top: 54px;
      margin-bottom: 66px;
   }

.re-tab {
  margin-bottom: 44px;
   .re-tab {
      margin-bottom: 44px;

  div {
    padding: 0 36px;
    height: 68px;
    line-height: 68px;
    text-align: center;
    border-radius: 8px;
    margin-right: 20px;
  }
      div {
         padding: 0 36px;
         height: 68px;
         line-height: 68px;
         text-align: center;
         border-radius: 8px;
         margin-right: 20px;
      }

  .active {
    @include themify() {
      background: themed("tab_background");
    }
      .active {
         @include themify() {
            background: themed("tab_background");
         }


    @include themify() {
      color: themed("text_color");
    }
         @include themify() {
            color: themed("text_color");
         }

    border-bottom: #1976d2 2px solid;
    color: #1976d2 !important;
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: bold;
    border-radius: 0;
  }
}
         border-bottom: #1976d2 2px solid;
         color: #1976d2 !important;
         padding-bottom: 20px;
         font-size: 16px;
         font-weight: bold;
         border-radius: 0;
      }
   }

.forget {
  color: #1D91FF;
  font-size: 24px;
  line-height: 28px;
}
   .forget {
      color: #1D91FF;
      font-size: 24px;
      line-height: 28px;
   }

.btn {
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  border-radius: 10px;
}
   .btn {
      color: #fff;
      height: 88px;
      line-height: 88px;
      text-align: center;
      font-size: 32px;
      margin-top: 40px;
      border-radius: 10px;
   }

.noTips {
  margin-top: 48px;
}
   .noTips {
      margin-top: 48px;
   }

.protocol {
  display: flex;
  align-items: center;
  height: 30px;
   .protocol {
      display: flex;
      align-items: center;
      height: 30px;

  i {
    width: 30px;
    height: 30px;
    margin-right: 18px;
      i {
         width: 30px;
         height: 30px;
         margin-right: 18px;

    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
         img {
            width: 100%;
            height: 100%;
         }
      }
   }
</style>