添加登录逻辑

pages/login/email-register/email-register.vue

@@ -0,0 +1,10 @@
+<template>
+  <register-app type="email"></register-app>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+</style>

pages/login/forgot-password/forgot-password.vue

@@ -0,0 +1,86 @@
+<script setup>
+  import { ref, reactive } from 'vue'
+
+  const formData = reactive({
+    username: '',
+    password: '',
+    confirmPassword: '',
+    code: ''
+  })
+  const isCode = ref(false)
+
+  const getCode = () => {
+    console.log('获取验证码')
+    isCode.value = true
+  }
+
+  const onBottomBtn = () => {
+    console.log('确认')
+  }
+</script>
+
+<template>
+  <view class="forgot-password">
+    <nav-bar>
+      <template #back>
+        <image
+          src="/static/images/login/back.png"
+          mode="heightFix"
+          class="left-icon"
+        ></image>
+      </template>
+    </nav-bar>
+    <view class="top-nav">
+      <text class="title-left">忘记密码</text>
+    </view>
+    <div class="input-wrapper">
+      <cb-input
+        v-model="formData.username"
+        placeholder="请输入手机号/邮箱"
+      ></cb-input>
+      <cb-input
+        v-model="formData.code"
+        v-model:code="isCode"
+        type="number"
+        icon="6"
+        placeholder="请输入验证码"
+        @onGetCode="getCode"
+      ></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-button
+        class="bottom-btn"
+        :disabled="
+          !formData.username ||
+          !formData.password ||
+          !formData.confirmPassword ||
+          !formData.code
+        "
+        @click="onBottomBtn"
+      >
+        确定
+      </cb-button>
+    </div>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import '/styles/login.scss';
+  .left-icon {
+    height: 36rpx;
+  }
+
+  .bottom-btn {
+    margin-top: 140rpx;
+  }
+</style>

pages/login/login.vue

@@ -1,15 +1,75 @@
-<template>
-	<view>{{ name }}</view>
-</template>
-
 <script setup>
-	import { ref } from 'vue'
-	import { onLoad } from '@dcloudio/uni-app'
+  import { reactive } from 'vue'
+  import { onLoad } from '@dcloudio/uni-app'
+  import { useUI } from '@/utils/use-ui'
+  import { reLaunch, navigateTo } from '@/utils/router'
 
-	const name = ref('登1录')
-	onLoad(e => {
-		console.log('接收==：', e.id)
-	})
+  const { showToast } = useUI()
+
+  const formData = reactive({
+    username: '',
+    password: '',
+    agreement: false
+  })
+
+  const onLogin = () => {
+    showToast('登录成功')
+    console.log('登录：', formData)
+  }
+
+  const onRegister = () => {
+    reLaunch('/pages/login/phone-register/phone-register')
+  }
+
+  const onTopRight = () => {
+    navigateTo('/pages/login/forgot-password/forgot-password')
+  }
+
+  onLoad(e => {
+    console.log('接收==：', e.id)
+  })
 </script>
 
-<style></style>
+<template>
+  <view class="login">
+    <view class="top-nav">
+      <text class="title-left">登录</text>
+      <text class="title-right" @click="onTopRight">忘记密码</text>
+    </view>
+    <div class="input-wrapper">
+      <cb-input
+        v-model="formData.username"
+        placeholder="请输入手机号/邮箱"
+      ></cb-input>
+      <cb-input
+        v-model="formData.password"
+        type="password"
+        icon="2"
+        placeholder="请输入密码"
+      ></cb-input>
+      <agreement-checkbox v-model="formData.agreement" />
+      <cb-button
+        class="bottom-btn"
+        :disabled="
+          !formData.username || !formData.password || !formData.agreement
+        "
+        @click="onLogin"
+      >
+        登录
+      </cb-button>
+      <view class="bottom-text">
+        <text class="text">还没账号？</text>
+        <text class="text" @click="onRegister">去注册</text>
+      </view>
+    </div>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  @import '/styles/login.scss';
+  .login {
+    .bottom-btn {
+      margin: 160rpx 0 64rpx;
+    }
+  }
+</style>

pages/login/phone-register/phone-register.vue

@@ -0,0 +1,10 @@
+<template>
+  <register-app></register-app>
+</template>
+
+<script setup>
+
+</script>
+
+<style lang="scss" scoped>
+</style>