添加登录逻辑

components/register-app/register-app.vue

@@ -0,0 +1,119 @@
+<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>