gypsy-crm-frontend-vu/pages/login/regist.vue

<script setup>
import { ref, watch, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { useEmailCountdown } from '@/hooks/useEmailCountdown'
import { ucardApi } from '@/api/ucard'
import { showToast } from '@/utils/toast'
const { t } = useI18n()

const {
  time,
  text: getCodeString,
  canSend,
  start,
  restore
} = useEmailCountdown()

// 响应式表单数据
const formData = ref({
  country: '',
  birthDate: '',
  code: '',
  password: '',
  agentId: null,
  agentValue: '',
  readName: '',
  agree: '',
})
const ho = ref('')
// 账号类型
const accountType = ref(1)

const value = ref('')

watch(value, (newValue, oldValue) => {
  //  console.log('v-model', newValue);
})

// 切换注册账号类型
const changeAccountType = (type) => {
  if (accountType.value !== type) accountType.value = type
}
// 获取验证码按钮点击
async function handleGetCode() {
  if (!canSend.value) return
  await sendEmailCode();
}


// 发送邮箱验证码
async function sendEmailCode() {
  const res = await ucardApi.getBlockchainWithdrawSendEmailCode({
    ...formData.value,
  });

  if (res.code === 200) {
    showToast(t("Msg.CodeSuccess"));
    start()
    return true;
  } else {
    showToast(t("Msg.CodeFail"));
    return false;
  }
}


onMounted(() => {
  const hostParts = window.location.host.split('.')
  ho.value = hostParts.length > 1 ? hostParts[1] : ''
})

</script>
<template>
  <view class="regist-page" :isHeaderFixed="true" :isLoginPage="true">
    <uni-row class="content">
      <uni-col :span="20" :offset="2" :sm="{ span: 14, offset: 5 }">
        <view class="logo">
          <image src="/static/images/logo.png" class="company-icon" mode="widthFix"></image>
        </view>
        <!--        账号类型-->
        <view class="account-type">
          <view class="type-btn" @click="changeAccountType(1)" :class="{ active: accountType === 1 }">Open Live Account
          </view>
          <view class="type-btn" @click="changeAccountType(2)" :class="{ active: accountType === 2 }">Register Demo
            Account
          </view>
        </view>
        <view class="account-tip">
          <view class="title">{{ accountType === 1 ? 'Open Live Account' : 'Register Demo Account' }}</view>
          <view class="tip">
            {{ accountType === 1 ? 'Please enter your required information' : 'Register Demo Account' }}
          </view>
        </view>
        <uni-forms ref="form" :modelValue="formData" validate-trigger="blur" label-position="top" label-width="120">
          <uni-row :gutter="20" class="formContent">
            <uni-col :xs="24" :md="12">
              <uni-forms-item name="country" :label="t('newSignup.item3')">
                <uni-data-select class="formStyle" v-model="formData.country">
                </uni-data-select>
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :md="12">
              <uni-forms-item name="phone" :label="t('newSignup.item5')">
                <uni-easyinput class="formStyle" v-model="formData.phone"></uni-easyinput>
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :md="12">
              <uni-forms-item name="birthDate" :label="t('newSignup.item18')">
                <uni-datetime-picker class="formStyle" type="date" v-model="formData.birthDate"
                  :placeholder="t('newSignup.item19')" />
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :md="12">
              <uni-forms-item name="email" :label="t('newSignup.item7')">
                <uni-easyinput class="formStyle" v-model="formData.email"
                  :placeholder="t('newSignup.item8')"></uni-easyinput>
              </uni-forms-item>
            </uni-col>
            <uni-col :xs="24" :md="12">
              <uni-forms-item name="code" :label="t('newSignup.item7')">
                <uni-easyinput class="formStyle" v-model="formData.code" :placeholder="t('newSignup.item8')">
                  <template #right>
                    <view class="btn-code" @click="handleGetCode">{{ getCodeString }}</view>
                  </template>
                </uni-easyinput>
              </uni-forms-item>
            </uni-col>

          </uni-row>

        </uni-forms>
        <view class="check-box">
          <up-checkbox-group v-model="formData.agree">
            <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a" v-model="formData.agree"
              :label="t('signup.agree')" name="" class="wcg-checkbox"></up-checkbox>
          </up-checkbox-group>
        </view>
        <view class="check-box">
          <up-checkbox-group v-model="formData.isSubscribeEmail">
            <up-checkbox size="14" labelSize="14" labelColor="#666666" activeColor="#ea002a"
              v-model="formData.isSubscribeEmail" :label="t('signup.agree1')" name=""
              class="wcg-checkbox"></up-checkbox>
          </up-checkbox-group>
        </view>
        <view>
          <u-button class="regiset-btn">
            {{ t('signup.button') }}
          </u-button>
        </view>
        <view class="or-title">
          <view class="line"></view>
          <view class="qr-tit2">OR</view>
          <view class="line"></view>
        </view>
        <uni-row :gutter="20">
          <uni-col :xs="24" :md="12">
            <u-button class="login-btn">
              {{ t('signup.button') }}
            </u-button>
          </uni-col>
          <uni-col :xs="24" :md="12">
            <u-button class="login-btn">
              {{ t('signup.button') }}
            </u-button>
          </uni-col>
        </uni-row>
      </uni-col>

    </uni-row>
    <view class="des">
      <view>
        {{ t('newSignin.item12') }}
      </view><br />
      <view>
        {{ t('newSignin.item10') }}
      </view><br />
      <view>
        {{ t('newSignin.item11') }}
      </view><br />
      <view>{{ t('newSignin.item13') }}</view>
      <a :href="`https://www.${ho}.com/doc/Risk-Disclosures-and-Acknowledgements-2020-08.pdf`" target="_blank">
        {{ t('newSignin.item13_1') }}
      </a>
      <view>{{ t('newSignin.item13_2') }}</view>
      <view>{{ t('newSignin.item13_3') }}</view>
      <view>{{ t('newSignin.item13_4') }}</view>
    </view>
  </view>
</template>

<style lang="scss"></style>
<style lang="scss" scoped>
@import "@/uni.scss";

.regist-page {
  height: 100vh;
  border: none;
  padding: 0;
}

.content {

  //display: flex;
  .logo {
    width: 100%;
    margin-top: px2rpx(40);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .company-icon {
    width: px2rpx(234);
  }

  .account-type {
    width: 100%;
    margin-top: px2rpx(20);
    padding: px2rpx(10);
    background-color: $uni-bg-color-hover;
    height: px2rpx(60);
    box-sizing: border-box;
    border-radius: px2rpx(20);
    display: flex;
    align-items: center;

    .type-btn {
      width: 50%;
      text-align: center;
      height: px2rpx(40);
      border-radius: px2rpx(20);
      line-height: px2rpx(40);
      font-size: px2rpx(18);
      cursor: pointer;

      &.active {
        background-color: var(--primary-color);
      }
    }
  }
}

.formStyle {
  height: px2rpx(40);
}

.account-tip {
  width: 100%;
  text-align: center;
  margin: px2rpx(30) 0;

  .title {
    font-size: px2rpx(26);
    font-weight: bold;
  }

  .tip {
    margin-top: px2rpx(5);
    color: var(--gray);
  }
}

.formContent {
  padding: 0 10px;
}

// 修改表单组件高度。
:deep(.uni-stat-box) {
  height: 100%;
}

:deep(.uni-select) {
  height: 100%;
}

:deep(.uni-easyinput__content) {
  height: 100%;
}

:deep(.uni-date-editor) {
  height: 100%;
}

:deep(.uni-date-editor--x) {
  height: 100%;
}

.btn-code {
  width: 30%;
  height: 100%;
  background-color: #102047;
  border: 1px solid #f0f0f0;
  color: #fff;
  text-align: center;
  line-height: px2rpx(40);
  border-radius: 0 4px 4px 0;
}

.check-box {
  padding: 0 px2rpx(10);
  margin-bottom: px2rpx(10);

  :deep(.u-checkbox) {
    display: flex;
    align-items: flex-start;
  }
}

.regiset-btn {
  width: 100%;
  height: px2rpx(40);
  border-radius: px2rpx(20);
  background-color: #DE002D;
  color: #fff;
  font-weight: bold;
}

.or-title {
  font-size: px2rpx(16);
  line-height: 1.5;
  color: #333;
  font-weight: 500;
  text-align: center;
  margin: px2rpx(20) 0 px2rpx(18) 0;
  display: flex;
  align-items: center;
  justify-content: center;

  .line {
    flex: 1;
    height: 1px;
    background-color: #e4e4e4;
  }

  .qr-tit2 {
    margin: 0 px2rpx(12);
  }
}

.login-btn {
  width: 100%;
  height: px2rpx(40);
  border-radius: px2rpx(20);
  background-color: #1EBF42;
  color: #fff;
  font-weight: bold;
  margin-bottom: px2rpx(20);
}

.code-text {
  padding-right: px2rpx(20);
}

.des {
  width: 100%;
  box-sizing: border-box;
  text-align: start;
  line-height: 20px;
  color: #000;
  font-size: 12px;
  padding: px2rpx(20) px2rpx(30);

  //display: none;
  :nth-child(n) {
    display: inline;
    word-break: break-all;
    word-wrap: break-word;
  }

  a {
    color: #e61f1e;
  }
}

:deep(.u-text__value) {
  color: #ea002a !important;
  font-size: px2rpx(14) !important;
}
</style>