1

李

2026-05-26 0dbc7465447164fef24327b5d494870832d798dd

 src/views/register/index.vue

@@ -1,67 +1,73 @@
<template>
  <div class="register">
    <div class="top" @click="router.go(-1)">
      <img src="../../assets/image/icon-close.png" alt="" />
    </div>
    <Step :step="1"></Step>
    <div class="title textColor">{{ $t("register") }}</div>
    <div class="flex re-tab">
      <div class="textColor1" :class="activeIndex == 0 ? 'active' : ''" @click="changeIndex(0)">
        {{ $t("account") }}
      </div>
      <div class="textColor1" :class="activeIndex == 1 ? 'active' : ''" @click="changeIndex(1)">
        {{ $t("email") }}
      </div>
     <!-- yyhh -->
   <!--   <div class="textColor1" :class="activeIndex == 2 ? 'active' : ''" @click="changeIndex(2)">
        {{ $t("phoneNum") }}
      </div> -->
    </div>
    <ExInput :label="getRegType(activeIndex, true)" :placeholderText="getRegType(activeIndex, false)" v-model="username"
      :area="isArea" :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
    <van-loading color="#92D1FF" class="loading-box" v-if="isLoading" />

    <ExInput :label="$t('setPassword')" :placeholderText="$t('passwordTips')" v-model="password" typeText="password" />
    <ExInput :label="$t('repassword')" :placeholderText="$t('surePassword')" v-model="repassword" typeText="password" />
    <ExInput :label="$t('setSafeword')" :placeholderText="$t('safewordTips')" v-model="safeword" typeText="password"
      v-if="activeIndex === 1" />
    <div class="inputCom" v-if="activeIndex === 1">
      <p class="label textColor">{{ $t("验证码") }}</p>
      <div class="iptbox inputBackground">
        <input class="inputBackground textColor" type="text" :placeholder="$t('entryVerifyCode')" v-model="verifyCode" />
        <span v-if="type !== 3" @click="senCode">{{ $t("sendVerifyCode") }}
          <template v-if="time">({{ time }})s</template>
    <!-- 顶部返回 -->
    <div class="header">
      <div class="back-btn" @click="router.go(-1)">
        <img src="../../assets/image/icon_back2.png" alt="" />
      </div>
    </div>

    <div class="register-cont">
      <!-- 标题 -->
      <div class="title textColor">{{ activeIndex === 1 ? $t("email") : $t("mobile") }}</div>

      <!-- Email 模式 -->
      <template v-if="activeIndex === 1">
        <ExInput :label="$t('email')" :placeholderText="$t('entryEmail')" v-model="username" />
        <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="password"
          typeText="password" />
        <ExInput :label="$t('repassword')" :placeholderText="$t('repassword')" v-model="repassword"
          typeText="password" />
        <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode"
          :clearBtn="false" />
      </template>

      <!-- Mobile 模式 -->
      <template v-else>
        <ExInput :label="$t('phoneNum')" :placeholderText="$t('phoneNum')" v-model="username" :area="isArea"
          :dialCode="dialCode" @selectArea="onSelectArea" :icon="icon" />
        <ExInput :label="$t('password')" :placeholderText="$t('entryPassword')" v-model="password"
          typeText="password" />
        <ExInput :label="$t('repassword')" :placeholderText="$t('repassword')" v-model="repassword"
          typeText="password" />
        <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" v-model="invitCode"
          :clearBtn="false" />
      </template>

      <!-- Sign Up 按钮 -->
      <van-button class="w-full sign-up-btn" type="primary" @click="register">
        {{ $t("register") }}
      </van-button>

      <!-- 切换链接 -->
      <div class="switch-link textColor" @click="switchMode">
        {{ activeIndex === 1 ? $t("mobile") : $t("email") }}
      </div>

      <!-- 协议复选框 -->
      <div class="protocol textColor mainBackground">
        <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("agree") }}
        <span class="colorMain" @click="router.push('/aboutUs?serviceTerm=1')">
          {{ "<" + $t("serviceConf") + ">" }}
        </span>
      </div>
    </div>
    <ExInput :label="$t('invitCode')" :placeholderText="$t('entryInvitCode')" 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("readAgree")
      }}<span class="colorMain" @click="router.push('/aboutUs?serviceTerm=1')">{{
  $t("serviceConf")
}}</span>
    </div>
    <van-button class="w-full" style="margin-top: 10px" type="primary" @click="register">{{ $t("register") }}
    </van-button>
    <div class="noTips textColor">
      {{ $t("hasAccount")
      }}<span class="colorMain" @click="router.push('/login')"> {{ $t("goLogin") }}</span>
    </div>

    <nationality-list ref="controlChildRef" :title="$t('selectArea')" @getName="getName"></nationality-list>

    <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail" @close="show = false"
      sliderText="" :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />

    <div>{{ msg }}</div>
    <Vcode :imgs="[img1, img2]" :show="show" @success="onSuccess" :canvasHeight="200" @fail="onFail"
      @close="show = false" sliderText="" :successText="$t('vertifyPass')" :failText="$t('vertifuFail')" />
  </div>
</template>

<script setup>
import ExInput from "@/components/ex-input/index.vue";
import Step from "./step.vue";
import { _registerUser, _sendVerifyCode } from "@/service/login.api";
import { _bindEmailRegister } from "@/service/user.api.js";
import { useUserStore } from "@/store/user";
@@ -76,16 +82,14 @@
import { ref, onMounted, reactive, onUnmounted } from "vue";
import { showToast } from "vant";
import store from "@/store/store";

const { t } = useI18n();
const router = useRouter();
const onRoute = (path) => {
  router.push(path);
};
const userStore = useUserStore();

let show = ref(false);
const msg = ref("");
const type = ref(1);
const isLoading = ref(false);
const type = ref(2);
const time = ref(0);
let agree = ref(false);
const username = ref("");
@@ -93,10 +97,7 @@
const repassword = ref("");
const verifyCode = ref("");
const safeword = ref("");
const fundPassword = ref("");
const refundPassword = ref("");
const activeIndex = ref(0);
const typeText = ref("password");
const activeIndex = ref(1); // 1 = Email, 2 = Mobile
let isArea = ref(false);
let dialCode = ref(0);
let icon = ref("");
@@ -106,7 +107,6 @@

let invitCode = ref("");
onMounted(() => {
  console.log(store);
  let usercode = getStorage("usercode");
  if (usercode) {
    invitCode.value = usercode;
@@ -120,59 +120,17 @@
  state.timer = null;
});

const getRegType = (activeIndex, bFlag) => {
  switch (activeIndex) {
    case 0:
      return bFlag ? t("account") : t("entryAccount");
    case 1:
      return bFlag ? t("email") : t("entryEmail");
    case 2:
      return bFlag ? t("phoneNum") : t("entryPhone");
const switchMode = () => {
  activeIndex.value = activeIndex.value === 1 ? 2 : 1;
  if (activeIndex.value === 2) {
    isArea.value = true;
  } else {
    isArea.value = false;
  }
};

const senCode = () => {
  if (time.value > 0) {
    return false;
  }
  if (activeIndex.value === 1) {
    let match = username.value.search(/@/);
    if (username.value == "" || match == -1) {
      showToast(t("entryCorrectEmail"));
      return;
    }
  }

  _sendVerifyCode({
    target: username.value,
  })
    .then((res) => {
      time.value = 60;
      state.timer = setInterval(() => {
        if (time.value > 0) {
          time.value = time.value - 1;
        } else {
          time.value = 0;
          clearInterval(state.timer);
          state.timer = null;
        }
      }, 1000);
    })
    .catch((error) => {
      showToast(t(error.msg));
    });
};

const onSuccess = () => {
  console.log("onSuccess");
  registerApi();
  show.value = false;
};
const onFail = () => {
  msg.value = "";
};
const onRefresh = () => {
  msg.value = "";
  // 清空表单
  username.value = "";
  password.value = "";
  repassword.value = "";
};

const controlChildRef = ref(null);
@@ -184,44 +142,31 @@
  icon.value = params.code;
  dialCode.value = params.dialCode;
};

const agreeProt = () => {
  agree.value = !agree.value;
};

const register = () => {
  console.log(activeIndex.value, "activeIndex.value");
  if (activeIndex.value == 0) {
    if (username.value == "") {
      showToast(t("entryAccount"));
      return;
    }
    if (username.value.length < 6 || username.value.length > 30) {
      showToast(t("accountLength"));
      return;
    }
  } else if (activeIndex.value == 1) {
  if (activeIndex.value === 1) {
    // Email 模式验证
    let match = username.value.search(/@/);
    if (username.value == "" || match.value == -1) {
    if (username.value == "" || match == -1) {
      showToast(t("entryCorrectEmail"));
      return;
    }
    if (safeword.value == "") {
      showToast(t("safewordTips"));
  } else {
    // Mobile 模式验证
    if (username.value == "") {
      showToast(t("entryPhone"));
      return;
    }
    if (verifyCode.value.length < 6) {
      showToast(t("entryVerifyTips"));
      return;
    }
  } else if (activeIndex.value == 2) {
    if (!/(^[1-9]\d*$)/.test(username.value)) {
      showToast(t("entryPhone"));
      return;
    }
    if (username.value == "") {
      showToast(t("entryPhone"));
      return;
    }
  }

  if (password.value == "") {
    showToast(t("entryPassword"));
    return;
@@ -240,178 +185,145 @@
  }
  show.value = true;
};
const changeIndex = (index) => {
  activeIndex.value = index;
  if (index == 0 || index == 1) {
    isArea.value = false;
  } else {
    isArea.value = true;
  }
};
const registerApi = () => {
  switch (activeIndex.value) {
    case 0: {
      type.value = 3;
      break;
    }
    case 1: {
      type.value = 2;
      break;
    }
    case 2: {
      type.value = 1;
      break;
    }
  }

const onSuccess = () => {
  registerApi();
  show.value = false;
};

const onFail = () => {
  // 验证失败处理
};

const registerApi = () => {
  isLoading.value = true;
  if (activeIndex.value === 1) {
    // Email 注册
    type.value = 2;
    _bindEmailRegister({
      username: username.value,
      password: password.value,
      type: "2", // 2邮箱
      verifcode: verifyCode.value,
      type: "2",
      verifcode: verifyCode.value || "",
      usercode: invitCode.value,
      safeword: safeword.value,
      safeword: safeword.value || "",
    }).then((res) => {
      isLoading.value = false;
      userStore[GET_USERINFO](res);
      store.state.user.userInfo = res;
      // 其他操作？？
      router.push("/identity");
    }).catch(() => {
      isLoading.value = false;
    });
  } else {
    // Mobile 注册
    type.value = 1;
    _registerUser({
      userName:
        activeIndex.value === 0 || activeIndex.value === 1
          ? username.value
          : `${dialCode.value}${username.value}`,
      userName: `${dialCode.value}${username.value}`,
      password: password.value,
      // re_password: repassword.value,
      type: type.value,
      userCode: invitCode.value,
    }).then((res) => {
      isLoading.value = false;
      userStore[GET_USERINFO](res);
      store.state.user.userInfo = res;
      if (activeIndex.value == 0) {
        router.push("/setFond");
      } else {
        router.push({
          name: "verify",
          query: {
            type: activeIndex.value,
            account:
              activeIndex.value == 1
                ? username.value
                : `${dialCode.value}${username.value}`,
          },
        });
      }
      router.push({
        name: "verify",
        query: {
          type: activeIndex.value,
          account: `${dialCode.value}${username.value}`,
        },
      });
    }).catch(() => {
      isLoading.value = false;
    });
  }
};
</script>

<style lang="scss" scoped>
.activeBKClick {
  &:active {
    background: $tab_background;
    opacity: 0.5;
  }
}

.activeClick {
  &:active {
    background: $mainbgWhiteColor;
    opacity: 0.5;
  }
:deep(.van-loading) {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.register {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding: 16px;
  font-size: 13px;
  background: #fff;
}

.top {
  padding-left: 9px;
  padding-top: 9px;
/* 顶部返回 */
.header {
  padding-top: 2rem;
  padding-left: 3rem;

  img {
    width: 18px;
    height: 18px;
  .back-btn {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    img {
      width: 100%;
    }
  }
}

.register-cont {
  padding: 0 3rem 5rem;
}

/* 标题 */
.title {
  font-weight: 700;
  font-size: 26px;
  margin-top: 27px;
  margin-bottom: 33px;
  font-size: 4rem;
  margin-top: 2.5rem;
  margin-bottom: 4rem;
}

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

  div {
    padding: 0 18px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    border-radius: 4px;
    margin-right: 10px;
  }

  .active {
    background: $US_tabActice_background;
    color: $color_main;
  }
/* Sign Up 按钮 */
.sign-up-btn {
  margin-top: 2.4rem;
  border-radius: 1rem !important;
  height: 7.2rem !important;
  font-size: 2.8rem !important;
}

.forget {
  color: $color_main;
  font-size: 12px;
  line-height: 14px;
/* 切换链接 */
.switch-link {
  margin-top: 3rem;
  text-align: center;
  font-size: 2.8rem;
  cursor: pointer;
}

.noTips {
  margin-top: 24px;
}

/* 协议复选框 */
.protocol {
  display: flex;
  align-items: center;
  height: 15px;
  margin-top: 3rem;
  font-size: 1.75rem;
  padding: 2.2rem 2rem;
  position: fixed;
  left: 0.84rem;
  bottom: 0;

  i {
    width: 15px;
    height: 15px;
    margin-right: 9px;
    width: 1.875rem;
    height: 1.875rem;
    margin-right: 1.125rem;
    cursor: pointer;
    flex-shrink: 0;

    img {
      width: 100%;
      height: 100%;
    }
  }
}

.iptbox {
  height: 44px;
  margin-top: 8px;
  margin-bottom: 18px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 6px;

  input {
    flex: 1;
    height: 100%;
    border: none;
  }

  span {
    color: $color_main;
  }
}
</style>