first

zzzz

2024-04-17 c34c87ff6bf310e461ae27c1988d39baef208da8

 src/page/register/index.vue

@@ -1,39 +1,82 @@
<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">{{ $t('注册') }}</div>
        <div class="flex re-tab">
<!--            <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">{{ $t('账号') }}</div>-->
            <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">{{ $t('邮箱') }}</div>
             <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">{{ $t('手机号') }}</div>
        </div>
        <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model.trim="username"
            :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />

        <ExInput :label="$t('设置密码')" :placeholderText="$t('密码（6-12个字符）')" v-model="password" typeText="password" />
        <ExInput :label="$t('确认密码')" :placeholderText="$t('请确认密码')" v-model="repassword" typeText="password" />
        <ExInput :label="$t('邀请码')" :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')">{{ $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>

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

        <div>{{ msg }}</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">{{ $t("注册") }}</div>

    <ExInput :placeholderText="$t('请输入姓名')" v-model="form.username" />
    <ExInput :placeholderText="$t('请输入邮箱地址')" v-model="form.email" />
    <div class="code-box">
      <div
        class="btn btnMain code-but"
        :class="`${codeButTexst === '发送验证码' ? '' : ' S-but'}`"
        @click="sendCode"
      >
        {{ $t(codeButTexst) }}{{ codeButTexst === "发送验证码" ? "" : " S " }}
      </div>

      <ExInput :placeholderText="$t('请输入邮箱验证码')" v-model="form.code" />
    </div>
    <ExInput :placeholderText="$t('请输入手机号码')" v-model="form.phone" />
    <ExInput
      :placeholderText="$t('密码（6-12个字符）')"
      v-model="form.password"
      typeText="password"
    />
    <ExInput
      :placeholderText="$t('请确认密码')"
      v-model="form.rePassword"
      typeText="password"
    />
    <ExInput
      :placeholderText="$t('请输入邀请码')"
      v-model="form.usercode"
      :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')"
        >{{ $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>

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

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

<script>
@@ -41,300 +84,349 @@
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 AxiosuserCenter from "@/API/userCenter.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 { getStorage } from "@/utils/utis";
import { log } from "qrcode/lib/core/galois-field";
// /sendVerifyCode
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.password.length < 6) {
                this.$toast(this.$t('密码（6-12个字符）'));
                return
            }
            if (this.repassword !== this.password) {
                this.$toast(this.$t('密码不一致'));
                return
            }
         // if (this.invitCode == '') {
         //     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.username}`,
                password: this.password,
                re_password: this.repassword,
                type: this.type,
                usercode: this.invitCode,
            }).then((res) => {
                this.GET_USERINFO(res.data)
                if (this.activeIndex == 0||this.activeIndex == 2) {
                    this.$router.push('/setFond')
                }
                else  {
                    this.$router.push({ name: 'verify', query: { type: this.activeIndex, account: this.activeIndex == 1 ? this.username : `${this.username}` } })
                }
            }).catch((error) => {
                if (error.code === 'ECONNABORTED') { this.$toast(this.$t('网络超时！')); }
                else if (error.msg !== undefined) { this.$toast(this.$t(error.msg)); }
            });
        }
  props: {},
  components: {
    [Popup.name]: Popup,
    ExInput,
    Step,
    nationalityList,
    Vcode,
  },
  data() {
    return {
      // 发送验证码倒计时定时器
      tiem: null,
      codeButTexst: "发送验证码",
      form: {
        phone: "",
        email: "",
        code: "",
        username: "",
        password: "",
        rePassword: "",
        usercode: "",
      },
      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,
    };
  },
  beforeDestroy() {
    if (this.tiem) {
      clearInterval(this.tiem);
      this.tiem = null;
    }
}
  },

  mounted() {
    let usercode = getStorage("usercode");
    if (usercode) {
      this.invitCode = usercode;
    }
  },
  computed: {
    ...mapGetters({
      theme: "home/theme",
    }),
  },
  methods: {
    async bindEmail() {
      await AxiosuserCenter.bindEmail({
        email: this.form.email,
        verifcode: this.form.code,
      });
      return true;
    },
    ...mapActions("user", [GET_USERINFO]),
    async sendCode() {
      // codeButTexst === '发送验证码' ? '' : ' S-but'
      if (this.codeButTexst !== "发送验证码") {
        return;
      }
      if (this.form.email) {
        await Axios.sendVerifyCode({
          target: this.form.email,
        });
        this.codeButTexst = 60;
        this.tiem = setInterval(() => {
          this.codeButTexst = this.codeButTexst - 1;
          if (this.codeButTexst === 0) {
            this.codeButTexst = "发送验证码";
            clearInterval(this.tiem);
          }
        }, 1000);
      }
    },
    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.form.username == "") {
        return this.$toast(this.$t("请输入姓名"));
      }
      let match = this.form.email.search(/@/);
      if (this.form.email == "" || match == -1) {
        return this.$toast(this.$t("请输入正确的邮箱地址"));
      }
      if (this.form.phone == "") {
        this.$toast(this.$t("请输入手机号"));
        return;
      }
      if (this.form.password == "") {
        this.$toast(this.$t("请输入密码"));
        return;
      }
      if (this.form.password !== this.form.rePassword) {
        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;
        }
      }
    },
    async registerApi() {
      this.$store.state.user.userInfo.token = undefined;
      Axios.registerUser({
        username: this.form.email,
        password: this.form.password,
        re_password: this.form.rePassword,
        type: 2,
        usercode: this.form.usercode,
      })
        .then((res) => {
          this.GET_USERINFO(res.data);
          this.bindEmail(res.data.token)
            .then((val) => {
              // console.log(val);
              Axios.registerTest({
                username: this.form.username,
                phone: this.form.phone,
                email: this.form.email,
                tokne: res.data.token,
              })
                .then((data) => {
                  this.$toast(this.$t("注册成功"));
                  setTimeout(() => {
                    this.$router.push("login");
                  }, 1000);
                })
                .catch((error) => {
                  this.codeButTexst = "发送验证码";
                  clearInterval(this.tiem);
                  if (error.code === "ECONNABORTED") {
                    this.$toast(this.$t("网络超时！"));
                  } else if (error.msg !== undefined) {
                    this.$toast(this.$t(error.msg));
                  }
                });
            })
            .catch((error) => {
              this.codeButTexst = "发送验证码";
              clearInterval(this.tiem);
              if (error.code === "ECONNABORTED") {
                this.$toast(this.$t("网络超时！"));
              } else if (error.msg !== undefined) {
                this.$toast(this.$t(error.msg));
              }
            });
        })
        .catch((error) => {
          this.codeButTexst = "发送验证码";
          clearInterval(this.tiem);
          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;
  width: 100%;
  box-sizing: border-box;
  padding: 32px;
  font-size: 26px;
}

.top {
    padding-left: 18px;
    padding-top: 18px;
  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;
  font-weight: 700;
  font-size: 52px;
  margin-top: 54px;
  margin-bottom: 66px;
}

.re-tab {
    margin-bottom: 44px;
  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");
    }
  }
}

.forget {
    color: #1D91FF;
    font-size: 24px;
    line-height: 28px;
  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;
  color: #fff;
  height: 88px;
  line-height: 88px;
  text-align: center;
  font-size: 32px;
  margin-top: 40px;
  border-radius: 10px;
}

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

.protocol {
    display: flex;
    align-items: center;
  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%;
        }
    img {
      width: 100%;
      height: 100%;
    }
  }
}

.code-box {
  width: 100%;
  display: flex;
  align-items: center;
  //   justify-content: space-between;

  .code-but {
    width: 200px;
    font-size: 23px;
    text-align: center;
    background-color: #6ff;
    margin-right: 20px;
    margin-top: 0;
  }
}
::v-deep .inputCom {
  width: 100%;
  padding-bottom: 10px;
}
.S-but {
  // background-color:;
  opacity: 0.5 !important;
}
</style>