120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<script setup>
|
||
import { reactive, computed } from 'vue'
|
||
import { reLaunch } from '@/utils/router'
|
||
|
||
const props = defineProps({
|
||
/**
|
||
* 注册方式
|
||
* phone: 手机号
|
||
* email: 邮箱
|
||
*/
|
||
type: {
|
||
type: String,
|
||
default: 'phone'
|
||
}
|
||
})
|
||
|
||
const isPhone = computed(() => props.type === 'phone')
|
||
|
||
const formData = reactive({
|
||
// 手机号
|
||
name: '',
|
||
// 验证码
|
||
code: '',
|
||
// 密码
|
||
password: '',
|
||
// 确认密码
|
||
confirmPassword: '',
|
||
// 邀请码
|
||
inviteCode: '',
|
||
agreement: false
|
||
})
|
||
|
||
const isBtn = computed(() => {
|
||
return (
|
||
formData.name &&
|
||
formData.code &&
|
||
formData.password &&
|
||
formData.confirmPassword &&
|
||
formData.inviteCode &&
|
||
!formData.agreement
|
||
)
|
||
})
|
||
|
||
const onRegister = () => {
|
||
console.log('注册')
|
||
}
|
||
|
||
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.inviteCode"
|
||
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>
|