添加登录逻辑

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>