ucard-person-app-front/pages/login/regist.vue

<script setup>
import { ref, reactive, watch,onMounted } from 'vue'
import { post, get } from '@/utils/request'
import { useRequest } from '@/composables/useRequest'
import { useI18n } from 'vue-i18n'
import { useEmailCountdown } from '@/hooks/useEmailCountdown'
import { ucardApi } from '@/api/ucard'
import { showToast } from '@/utils/toast'

const SendCodeByPhone = (params) => post('/Common/SendCodeByPhone', params)
const PhoneLoginReg = (params) => post('/Login/PhoneLoginReg', params)
const { t } = useI18n()

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

// 响应式表单数据
const formData = ref({
  country: '',
  birthDate:'',
  code: '',
  password: '',
  agentId: null,
  agentValue: '',
  userType: 4,
  userTypeName: '全民营销',
  readName: '',
  agree: '',
})
const ho = ref('')
// 账号类型
const accountType = ref(1)
const columnsAgent = ref([])
const columnsType = ref([
  {
    text: '中介',
    value: 3,
  },
  {
    text: '全民营销',
    value: 4,
  },
])
// 校验规则
const rules = {
  mobile: [
    {
      required: true,
      message: '请输入用户名或手机号',
      trigger: ['change', 'blur'],
    },
    {
      // 自定义验证函数，见上说明
      validator: (rule, value, callback) => {
        // 上面有说，返回true表示校验通过，返回false表示不通过
        // uni.$u.test.mobile()就是返回true或者false的
        return uni.$u.test.mobile(value)
      },
      message: '手机号码不正确',
      // 触发器可以同时用blur和change
      trigger: ['change', 'blur'],
    },
  ],
  code: [
    {
      required: true,
      message: '请输入验证码',
      trigger: ['change', 'blur'],
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码',
      trigger: ['change', 'blur'],
    },
  ],
  readName: [
    {
      required: true,
      message: '请输入真实姓名',
      trigger: ['change', 'blur'],
    },
  ],
  agentValue: [
    {
      required: true,
      message: '请选择中介',
      trigger: ['change', 'blur'],
    },
  ],
}

const tips = ref('')
const value = ref('')
const seconds = ref(60)
const uCodeRef = ref(null)
const timer = ref(59)
const interval = ref(null)

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

const codeChange = (text) => {
  tips.value = text
}

const change = (e) => {
  //  console.log("change", e);
}
const showAgent = ref(false)
const confirmAgent = (e) => {
  //  console.log("e: ", e);
  form.value.agentValue = e.value[0].text
  form.value.agentId = e.value[0].value
  showAgent.value = false
}

const showType = ref(false)
const confirmType = (e) => {
  //  console.log("e: ", e);
  form.value.userTypeName = e.value[0].text
  form.value.userType = e.value[0].value
  if (form.value.userType == 4) {
    form.value.agentValue = ''
    form.value.agentId = ''
  }
  showType.value = false
}

const uFormRef = ref(null)

// 切换注册账号类型
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;
  }
}

const aloneChecked = ref(false)
const getRichText = (url) => {
  uni.navigateTo({
    url,
  })
}
const GetAgencys = (params) => get('/Buss/GetAgencys', params)
const { data, loading, error, refresh } = useRequest(GetAgencys, {
  initialParams: {},
  immediate: true, // 默认立即执行
})
onMounted(()=>{
  const hostParts = window.location.host.split('.')
  ho.value = hostParts.length > 1 ? hostParts[1] : ''
})
watch([loading, error], () => {
  if (!loading.value) {
    // 加载完成
    if (error.value) {
      //  console.log("请求失败: ", error.value); // 打印错误信息
    } else {
      //  console.log("请求成功: ", data.value); // 成功时获取数据
      columnsAgent.value = data.value.map((item) => {
        return {
          text: item.name,
          value: item.id,
        }
      })
    }
  }
})
</script>
<template>
  <cwg-page-wrapper 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>
  </cwg-page-wrapper>
</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>