uniapp-im-shop/components/register-app/register-app.vue

<script setup>
  import { reactive, computed } from 'vue'
  import { reLaunch } from '@/utils/router'
  import {
    validatePhone,
    validateEmail,
    validatePassword,
    validateConfirmPassword
  } from '@/utils/validate'
  import { useUI } from '@/utils/use-ui'
  import { userRegister } from '@/api'

  const { showToast } = useUI()

  const props = defineProps({
    /**
     * 注册方式
     * phone: 手机号
     * email: 邮箱
     */
    type: {
      type: String,
      default: 'phone'
    },
    invitationCode: {
      type: String,
      default: ''
    }
  })

  const isPhone = computed(() => props.type === 'phone')

  const formData = reactive({
    // 手机号、邮箱
    name: '',
    // 密码
    password: '',
    // 确认密码
    confirmPassword: '',
    // 邀请码
    invitationCode: props.invitationCode,
    agreement: true
  })

  const isBtn = computed(() => {
    return (
      formData.name &&
      formData.password &&
      formData.confirmPassword &&
      formData.invitationCode &&
      !formData.agreement
    )
  })

  /** 注册 */
  const onRegister = async () => {
    if (isPhone.value) {
      const phoneValue = validatePhone(formData.name)
      if (!phoneValue.valid) {
        showToast(phoneValue.message)
        return
      }
    } else {
      const emailValue = validateEmail(formData.name)
      if (!emailValue.valid) {
        showToast(emailValue.message)
        return
      }
    }

    const passwordValue = validatePassword(formData.password)
    if (!passwordValue.valid) {
      showToast(passwordValue.message)
      return
    }

    const confirmPasswordValue = validateConfirmPassword(
      formData.password,
      formData.confirmPassword
    )
    if (!confirmPasswordValue.valid) {
      showToast(confirmPasswordValue.message)
      return
    }

    if (!formData.invitationCode) {
      showToast('请输入邀请码')
      return
    }

    const data = {
      type: isPhone.value ? 2 : 1,
      mobile: formData.name,
      password: formData.password,
      invitationCode: formData.invitationCode
    }
    await userRegister(data)
    await showToast('注册成功', 'success')
    onLogin()
  }

  const onLogin = () => {
    reLaunch('/pages/login/login')
  }

  const onTopRight = () => {
    console.log('切换注册方式', isPhone.value)
    const url = isPhone.value
      ? '/pages/login/email-register/email-register'
      : '/pages/login/phone-register/phone-register'
    reLaunch(url)
  }
</script>

<template>
  <view class="register-app">
    <view class="top-register-nav">
      <text class="title-left">{{ isPhone ? '手机' : '邮箱' }}注册</text>
      <!-- <text class="title-right" @click="onTopRight">
        {{ isPhone ? '邮箱' : '手机号' }}注册
      </text> -->
    </view>
    <div class="input-wrapper">
      <cb-input
        v-model="formData.name"
        :type="isPhone ? 'number' : 'email'"
        icon="3"
        :placeholder="`请输入${isPhone ? '手机号' : '邮箱'}`"
      ></cb-input>
      <!-- <cb-input
        v-model="formData.code"
        type="number"
        icon="6"
        placeholder="请输入验证码"
      ></cb-input> -->
      <cb-input
        v-model="formData.password"
        type="password"
        icon="2"
        placeholder="请输入密码"
      ></cb-input>
      <cb-input
        v-model="formData.confirmPassword"
        type="password"
        icon="2"
        placeholder="请输入确认密码"
      ></cb-input>
      <cb-input
        v-model="formData.invitationCode"
        type="number"
        icon="4"
        placeholder="请输入邀请码"
      ></cb-input>
      <agreement-checkbox v-model="formData.agreement" />
      <cb-button class="bottom-btn" :disabled="isBtn" @click="onRegister">
        注册
      </cb-button>
      <view class="bottom-text">
        <text class="text">已有账号？</text>
        <text class="text" @click="onLogin">去登录</text>
      </view>
    </div>
  </view>
</template>

<style lang="scss" scoped>
  @import '/styles/login.scss';
  .register-app {
    .bottom-btn {
      margin: 100rpx 0 64rpx;
    }
  }
</style>