219 lines
7.4 KiB
Vue
219 lines
7.4 KiB
Vue
<template>
|
|
<page-meta :page-style="$theme.pageStyle">
|
|
<!-- #ifndef H5 -->
|
|
<navigation-bar :front-color="$theme.navColor" :background-color="$theme.navBgColor" />
|
|
<!-- #endif -->
|
|
</page-meta>
|
|
<view class="register bg-white min-h-full flex flex-col items-center px-[40rpx] pt-[40rpx] box-border">
|
|
<view class="w-full">
|
|
<view class="pb-[40rpx]">
|
|
<u-tabs :list="registerWayListsFilter" :is-scroll="false" v-model="currentTabs"
|
|
:active-color="$theme.primaryColor" @change="
|
|
(index) => {
|
|
currentTabs = index
|
|
formData.scene = registerWayLists[index].type
|
|
}
|
|
"></u-tabs>
|
|
</view>
|
|
<u-form borderBottom :label-width="150">
|
|
<u-form-item label="手机号" borderBottom v-if="isMobile">
|
|
<u-input class="flex-1" v-model="formData.mobile" :border="false" placeholder="请输入手机号码" />
|
|
</u-form-item>
|
|
<u-form-item label="邮箱" borderBottom v-if="isMailbox">
|
|
<u-input class="flex-1" v-model="formData.email" :border="false" placeholder="请输入邮箱账号" />
|
|
</u-form-item>
|
|
|
|
<u-form-item label="验证码" v-if="isOpenSendSms">
|
|
<u-input class="flex-1" v-model="formData.code" placeholder="请输入验证码" :border="false" />
|
|
<view class="border-l border-solid border-0 border-light pl-3 leading-4 ml-3 w-[180rpx]"
|
|
@click="sendCode">
|
|
<u-verification-code ref="uCodeRef" :seconds="60" @change="codeChange" change-text="x秒" />
|
|
<text class="text-muted" :class="{
|
|
'text-primary':
|
|
(isValidMobile && isMobile) || (isValidMailBox && isMailbox)
|
|
}">
|
|
{{ codeTips }}
|
|
</text>
|
|
</view>
|
|
</u-form-item>
|
|
<u-form-item label="设置密码" borderBottom>
|
|
<u-input class="flex-1" type="password" v-model="formData.password" placeholder="6-20位数字+字母或符号组合"
|
|
:border="false" />
|
|
</u-form-item>
|
|
<u-form-item label="确认密码" borderBottom>
|
|
<u-input class="flex-1" type="password" v-model="formData.password2" placeholder="请确认密码"
|
|
:border="false" />
|
|
</u-form-item>
|
|
</u-form>
|
|
<view class="mt-[40rpx]">
|
|
<agreement ref="agreementRef" />
|
|
</view>
|
|
<view class="mt-[60rpx]">
|
|
<u-button type="primary" shape="circle" @click="accountRegister"> 注册 </u-button>
|
|
</view>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
<!-- 悬浮菜单 -->
|
|
<floating-menu></floating-menu>
|
|
<!-- #endif -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { register, emailRegister, sendEmailCode } from '@/api/account'
|
|
import { useAppStore } from '@/stores/app'
|
|
import { shallowRef, reactive, ref, computed } from 'vue'
|
|
import { useRouter } from 'uniapp-router-next'
|
|
import { smsSend } from '@/api/app'
|
|
import { SMSEnum } from '@/enums/appEnums'
|
|
import { onLoad } from '@dcloudio/uni-app'
|
|
import cache from '@/utils/cache'
|
|
import { USER_SN } from '@/enums/constantEnums'
|
|
import { bindRegisterInvite } from '@/api/task'
|
|
|
|
enum RegisterSceneEnum {
|
|
MOBILE = 2,
|
|
MAILBOX = 3
|
|
}
|
|
|
|
const registerWayLists = [
|
|
{
|
|
name: '手机号注册',
|
|
type: RegisterSceneEnum.MOBILE
|
|
},
|
|
{
|
|
name: '邮箱注册',
|
|
type: RegisterSceneEnum.MAILBOX
|
|
}
|
|
]
|
|
const currentTabs = ref<number>(0)
|
|
|
|
const getRegisterWay = computed<string[]>(() => appStore.getLoginConfig?.loginWay || [])
|
|
|
|
const registerWayListsFilter = computed(() => {
|
|
const value = registerWayLists.filter((item) => getRegisterWay.value.includes(item.type))
|
|
if (value.length) {
|
|
formData.scene = value[0].type
|
|
}
|
|
return value
|
|
})
|
|
|
|
const router = useRouter()
|
|
const appStore = useAppStore()
|
|
const agreementRef = shallowRef()
|
|
const formData = reactive({
|
|
mobile: '',
|
|
email: '',
|
|
code: '',
|
|
scene: 2,
|
|
password: '',
|
|
password2: ''
|
|
})
|
|
const uCodeRef = shallowRef()
|
|
const codeTips = ref('')
|
|
const codeChange = (text: string) => {
|
|
codeTips.value = text
|
|
}
|
|
|
|
const isValidMobile = computed(() => uni.$u.test.mobile(formData.mobile))
|
|
const isValidMailBox = computed(() => uni.$u.test.email(formData.email))
|
|
const isOpenSendSms = computed(() => appStore.getLoginConfig?.smsVerify == 1)
|
|
const isMobile = computed(() => formData.scene == RegisterSceneEnum.MOBILE)
|
|
const isMailbox = computed(() => formData.scene == RegisterSceneEnum.MAILBOX)
|
|
|
|
const sendCode = async () => {
|
|
if (!uCodeRef.value?.canGetCode) return
|
|
try {
|
|
isMobile.value ? await sendSms() : await sendEmail()
|
|
uni.$u.toast('发送成功')
|
|
uCodeRef.value?.start()
|
|
} catch (error) {
|
|
console.log('发送验证码失败=>', error)
|
|
}
|
|
}
|
|
|
|
const sendEmail = async () => {
|
|
console.log(isValidMailBox.value)
|
|
if (!formData.email) {
|
|
uni.$u.toast('请输入邮箱')
|
|
return Promise.reject()
|
|
}
|
|
if (!isValidMailBox.value) {
|
|
uni.$u.toast('请输入正确的邮箱地址')
|
|
return Promise.reject()
|
|
}
|
|
await sendEmailCode({
|
|
scene: SMSEnum.REGISTER,
|
|
email: formData.email
|
|
})
|
|
}
|
|
|
|
const sendSms = async () => {
|
|
if (!formData.mobile) {
|
|
uni.$u.toast('请输入手机号')
|
|
return Promise.reject()
|
|
}
|
|
if (isValidMailBox.value) {
|
|
uni.$u.toast('请输入正确的手机号')
|
|
return Promise.reject()
|
|
}
|
|
await smsSend({
|
|
scene: SMSEnum.REGISTER,
|
|
mobile: formData.mobile
|
|
})
|
|
}
|
|
|
|
const bindUsers = async (userSn: number) => {
|
|
const inviterSn = cache.get(USER_SN)
|
|
try {
|
|
if (inviterSn) {
|
|
await bindRegisterInvite({
|
|
userSn: userSn,
|
|
inviterSn: inviterSn
|
|
})
|
|
cache.remove(USER_SN)
|
|
}
|
|
} catch (error) { }
|
|
}
|
|
|
|
const accountRegister = async () => {
|
|
if (!agreementRef.value?.checkAgreement()) {
|
|
return
|
|
}
|
|
|
|
if (!formData.mobile && isMobile.value) return uni.$u.toast('请输入手机号码')
|
|
if (!formData.email && isMailbox.value) return uni.$u.toast('请输入邮箱')
|
|
if (!formData.code && isOpenSendSms.value) return uni.$u.toast('请输入验证码')
|
|
if (!formData.password) return uni.$u.toast('请输入密码')
|
|
if (!formData.password2) return uni.$u.toast('请再次输入密码')
|
|
if (formData.password != formData.password2) return uni.$u.toast('两次输入的密码不一致')
|
|
|
|
if (formData.scene === RegisterSceneEnum.MOBILE) {
|
|
const { sn } = await register(formData)
|
|
bindUsers(sn)
|
|
} else if (formData.scene === RegisterSceneEnum.MAILBOX) {
|
|
const { sn } = await emailRegister(formData)
|
|
bindUsers(sn)
|
|
}
|
|
uni.$u.toast('注册成功')
|
|
setTimeout(() => {
|
|
router.navigateBack()
|
|
}, 1000)
|
|
}
|
|
|
|
onLoad(async ({ type }: any) => {
|
|
setTimeout(() => {
|
|
formData.scene = type * 1
|
|
if (type == 3 && getRegisterWay.value.includes(RegisterSceneEnum.MOBILE)) {
|
|
currentTabs.value = 1
|
|
}
|
|
}, 300)
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
height: 100%;
|
|
}
|
|
</style>
|