From 1b7f4a4f4b1ed5b3c9b2088b13956d92151ef908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=B4=AB=E6=98=9F?= <1315228475@qq.com>
Date: Thu, 17 Oct 2024 17:22:00 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=EF=BC=8C=E6=96=B0=E5=A2=9E=E4=B8=80=E4=BA=9B?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E7=9B=B8=E5=85=B3=E7=9A=84=E4=BA=A4=E4=BA=92?=
 =?UTF-8?q?=E5=AD=90=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                  | 126 ++++++++++---------
 src/layouts/default.vue                      |  14 +--
 src/pages.json                               |  21 ++++
 src/pages/login/components/Banner.vue        |  16 ++-
 src/pages/login/components/Copyright.vue     |  21 +++-
 src/pages/login/components/LoginForm.vue     |  81 ++++++------
 src/pages/login/components/MoreLoginWays.vue |   8 +-
 src/pages/login/components/PhoneLogin.vue    |  14 +--
 src/pages/login/forget.vue                   |  52 ++++++++
 src/pages/login/index.vue                    |  17 ++-
 src/pages/login/phone-index.vue              |  38 ++++++
 src/pages/login/registerCode.vue             |  53 ++++++++
 src/style/index.scss                         |   1 +
 src/types/uni-pages.d.ts                     |   3 +
 14 files changed, 329 insertions(+), 136 deletions(-)
 create mode 100644 src/pages/login/forget.vue
 create mode 100644 src/pages/login/phone-index.vue
 create mode 100644 src/pages/login/registerCode.vue

diff --git a/src/App.vue b/src/App.vue
index 21c41bb..f4fa074 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,62 +1,74 @@
 <script setup lang="ts">
-import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
-
-onLaunch(() => {
-  console.log('App Launch')
-})
-onShow(() => {
-  console.log('App Show')
-})
-onHide(() => {
-  console.log('App Hide')
-})
+  import { onLaunch, onShow, onHide } from '@dcloudio/uni-app'
+
+  onLaunch(() => {
+    console.log('App Launch')
+  })
+  onShow(() => {
+    console.log('App Show')
+  })
+  onHide(() => {
+    console.log('App Hide')
+  })
 </script>
 
 <style lang="scss">
-page {
-  // 默认背景颜色
-  background: #f2f3f7;
-}
-/* stylelint-disable selector-type-no-unknown */
-button::after {
-  border: none;
-}
-
-swiper,
-scroll-view {
-  flex: 1;
-  height: 100%;
-  overflow: hidden;
-}
-
-image {
-  width: 100%;
-  height: 100%;
-  vertical-align: middle;
-}
-
-// 单行省略，优先使用 unocss: text-ellipsis
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// 两行省略
-.ellipsis-2 {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-
-// 三行省略
-.ellipsis-3 {
-  display: -webkit-box;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-line-clamp: 3;
-  -webkit-box-orient: vertical;
-}
+  page {
+    height: 100%;
+    // 默认背景颜色
+    background: #f2f3f7;
+  }
+  /* stylelint-disable selector-type-no-unknown */
+  button::after {
+    border: none;
+  }
+
+  swiper,
+  scroll-view {
+    flex: 1;
+    height: 100%;
+    overflow: hidden;
+  }
+
+  image {
+    width: 100%;
+    height: 100%;
+    vertical-align: middle;
+  }
+
+  // 单行省略，优先使用 unocss: text-ellipsis
+  .ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  // 两行省略
+  .ellipsis-2 {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+  }
+
+  // 三行省略
+  .ellipsis-3 {
+    display: -webkit-box;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+
+  ::-webkit-scrollbar {
+    display: none;
+    width: 0 !important;
+    height: 0 !important;
+    -webkit-appearance: none;
+    background: transparent;
+  }
+  view {
+    box-sizing: border-box;
+  }
 </style>
diff --git a/src/layouts/default.vue b/src/layouts/default.vue
index 768d875..4d0b0da 100644
--- a/src/layouts/default.vue
+++ b/src/layouts/default.vue
@@ -1,5 +1,5 @@
 <template>
-  <wd-config-provider :themeVars="themeVars">
+  <wd-config-provider :themeVars="themeVars" class="h-full">
     <slot />
     <wd-toast />
     <wd-message-box />
@@ -7,11 +7,11 @@
 </template>
 
 <script lang="ts" setup>
-import type { ConfigProviderThemeVars } from 'wot-design-uni'
+  import type { ConfigProviderThemeVars } from 'wot-design-uni'
 
-const themeVars: ConfigProviderThemeVars = {
-  // colorTheme: 'red',
-  // buttonPrimaryBgColor: '#07c160',
-  // buttonPrimaryColor: '#07c160',
-}
+  const themeVars: ConfigProviderThemeVars = {
+    // colorTheme: 'red',
+    // buttonPrimaryBgColor: '#07c160',
+    // buttonPrimaryColor: '#07c160',
+  }
 </script>
diff --git a/src/pages.json b/src/pages.json
index 51c1986..097498d 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -82,6 +82,13 @@
         "navigationBarTitleText": "通讯录"
       }
     },
+    {
+      "path": "pages/login/forget",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "忘记密码"
+      }
+    },
     {
       "path": "pages/login/index",
       "type": "page",
@@ -90,6 +97,20 @@
         "navigationBarTitleText": "登录页面"
       }
     },
+    {
+      "path": "pages/login/phone-index",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": ""
+      }
+    },
+    {
+      "path": "pages/login/registerCode",
+      "type": "page",
+      "style": {
+        "navigationBarTitleText": "获取验证码"
+      }
+    },
     {
       "path": "pages/message/index",
       "type": "page",
diff --git a/src/pages/login/components/Banner.vue b/src/pages/login/components/Banner.vue
index 37d3cd1..36d83cb 100644
--- a/src/pages/login/components/Banner.vue
+++ b/src/pages/login/components/Banner.vue
@@ -1,16 +1,20 @@
 <!-- banner区域 -->
 <template>
-  <view class="relative w-full h-480rpx">
-    <view class="absolute pt-[116rpx] pl-[68rpx] z-1 text-white">
+  <view class="relative w-full h-50">
+    <view class="absolute pt-15 pl-8 z-1 text-white">
       <view>
-        <text class="text-[64rpx] font-700">你好</text>
+        <text class="text-8 font-700">你好</text>
       </view>
-      <view class="mt-[36rpx]">
-        <text class="text-[36rpx]">欢迎登录芋道快速开发平台</text>
+      <view class="mt-4">
+        <text class="text-6">欢迎登录芋道快速开发平台</text>
       </view>
     </view>
     <!-- TODO @芋艿：后续把静态资源，放到 CDN -->
-    <image class="w-full" src="/static/images/login-bg.png" mode="aspectFit" />
+    <image
+      class="w-full h-full"
+      src="/static/images/login-bg.png"
+      mode="aspectFill"
+    />
   </view>
 </template>
 
diff --git a/src/pages/login/components/Copyright.vue b/src/pages/login/components/Copyright.vue
index d9b9bd7..f47ab9c 100644
--- a/src/pages/login/components/Copyright.vue
+++ b/src/pages/login/components/Copyright.vue
@@ -1,7 +1,7 @@
 <!-- 隐私与用户条款 -->
 <template>
-  <view class="text-[14px] text-[#999] mt-4 h-50rpx flex justify-center">
-    <wd-checkbox class="inline-block" v-model="agree"></wd-checkbox>
+  <view class="pb-2 flex justify-center text-3 text-[#999]">
+    <wd-checkbox v-model="isAgree" @change="toggleAgree" />
     <text>已阅读并同意</text>
     <text class="text-[#0B5EFF]">《用户协议》</text>
     <text>和</text>
@@ -11,5 +11,20 @@
 
 <script lang="ts" setup>
   defineOptions({ name: 'Copyright' })
-  const agree = ref(false)
+  const props = defineProps({
+    agree: {
+      type: Boolean
+    }
+  })
+  const isAgree = ref(props.agree)
+
+  const emits = defineEmits(['update:agree'])
+  /*
+   *@Description: 是否阅读且同意协议
+   *@MethodAuthor: xiaohong
+   *@Date: 2024-10-17 16:08:17
+   */
+  function toggleAgree() {
+    emits('update:agree', isAgree.value)
+  }
 </script>
diff --git a/src/pages/login/components/LoginForm.vue b/src/pages/login/components/LoginForm.vue
index 5ada5cc..6ac0595 100644
--- a/src/pages/login/components/LoginForm.vue
+++ b/src/pages/login/components/LoginForm.vue
@@ -1,6 +1,6 @@
 <!-- 账号密码登录 -->
 <template>
-  <wd-form :model="loginData.loginForm" ref="gennerateForm" class="mt-4">
+  <wd-form :model="loginData.loginForm" ref="gennerateForm">
     <wd-input
       v-model="loginData.loginForm.username"
       prop="username"
@@ -18,7 +18,7 @@
       prefixIcon="lock-on"
     />
 
-    <view class="flex items-center justify-between mt-20rpx">
+    <view class="flex items-center justify-between mt-4">
       <wd-checkbox
         v-model="loginData.loginForm.rememberMe"
         prop="rememberMe"
@@ -26,18 +26,16 @@
       >
         记住
       </wd-checkbox>
-      <a
-        href="#"
-        text="忘记密码"
-        class="decoration-none text-14px text-[var(--wot-color-primary)]"
-      ></a>
+      <navigator url="forget" class="text-[var(--wot-color-primary)]">
+        忘记密码
+      </navigator>
     </view>
 
     <wd-button
       :block="true"
       :round="false"
-      custom-class="mt-40rpx"
-      @click="handleLogin"
+      custom-class="mt-8"
+      @click="handleLogin('userinfo')"
     >
       <text>登录</text>
     </wd-button>
@@ -47,8 +45,8 @@
       :round="false"
       :plain="true"
       type="info"
-      class="mt-20rpx"
-      @click="handleLogin"
+      class="mt-4"
+      @click="handleLogin('phoneIndex')"
     >
       <text>本机号登录</text>
     </wd-button>
@@ -65,14 +63,6 @@
   import { useUserStore } from '@/store'
   import * as authUtil from '@/utils/auth'
 
-  // 提示组件 TODO @ Qiksy 讨论：// 提示组件 这种，我们要不放在 useToast()，作为尾注释，简洁一点。
-  const toast = useToast()
-
-  const focusInput = ref('')
-  const handleInputFocus = (type: string) => {
-    focusInput.value = type
-  }
-
   const props = defineProps({
     agree: {
       type: Boolean,
@@ -81,6 +71,14 @@
     }
   })
 
+  // 提示组件 TODO @ Qiksy 讨论：// 提示组件 这种，我们要不放在 useToast()，作为尾注释，简洁一点。
+  const toast = useToast()
+
+  const focusInput = ref('')
+  const handleInputFocus = (type: string) => {
+    focusInput.value = type
+  }
+
   const loginData = reactive({
     isShowPassword: false,
     captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
@@ -104,37 +102,40 @@
     }
   }
 
-  const handleLogin = async () => {
-    console.log('账号密码登录')
-    focusInput.value = ''
+  const handleLogin = async (type: string) => {
     if (!props.agree) {
       toast.warning('请阅读并同意《用户协议》和《隐私政策》')
       return
     }
+    if (type === 'userinfo') {
+      focusInput.value = ''
 
-    // 1. 先根据租户名，获取 tenantId
-    await getTenantId()
+      // 1. 先根据租户名，获取 tenantId
+      await getTenantId()
 
-    // todo 校验form数据
-    const res = await login(loginData.loginForm)
-    if (!res) {
-      return
-    }
+      // todo 校验form数据
+      const res = await login(loginData.loginForm)
+      if (!res) {
+        return
+      }
 
-    authUtil.setToken(res)
+      authUtil.setToken(res)
 
-    // 获取用户信息，保存到 store
-    const userStore = useUserStore()
-    await userStore.setUserInfoAction()
+      // 获取用户信息，保存到 store
+      const userStore = useUserStore()
+      await userStore.setUserInfoAction()
 
-    // 暂时先跳到首页
-    uni.switchTab({
-      url: '/pages/work/index'
-    })
-    console.log('登录成功')
+      // 暂时先跳到首页
+      uni.switchTab({
+        url: '/pages/work/index'
+      })
+      console.log('登录成功')
 
-    // todo 判断重定向
+      // todo 判断重定向
 
-    // todo 处理页面loading展示
+      // todo 处理页面loading展示
+    } else {
+      uni.navigateTo({ url: '/pages/login/phone-index' })
+    }
   }
 </script>
diff --git a/src/pages/login/components/MoreLoginWays.vue b/src/pages/login/components/MoreLoginWays.vue
index e770769..e99d9ad 100644
--- a/src/pages/login/components/MoreLoginWays.vue
+++ b/src/pages/login/components/MoreLoginWays.vue
@@ -1,12 +1,10 @@
 <!-- 更多登录方式 -->
 <template>
   <view class="w-full">
-    <wd-divider class="mt-30rpx">更多登录方式</wd-divider>
+    <wd-divider class="mb-4">更多登录方式</wd-divider>
     <view class="flex justify-around items-center">
-      <view
-        class="i-ic:round-wechat w-50rpx h-50px text-[var(--wot-color-primary)]"
-      />
-      <view class="i-cib:qq w-40rpx h-40px text-[var(--wot-color-primary)]" />
+      <view class="i-ic:round-wechat w-7 h-7 text-[var(--wot-color-primary)]" />
+      <view class="i-cib:qq w-6 h-6 text-[var(--wot-color-primary)]" />
     </view>
   </view>
 </template>
diff --git a/src/pages/login/components/PhoneLogin.vue b/src/pages/login/components/PhoneLogin.vue
index 670ca39..0cc9174 100644
--- a/src/pages/login/components/PhoneLogin.vue
+++ b/src/pages/login/components/PhoneLogin.vue
@@ -4,21 +4,17 @@
     <wd-input
       v-model="loginData.loginForm.phoneNo"
       prefixIcon="phone"
-      type="text"
       placeholder="请输入手机号"
-      custom-class="w-620rpx"
       @focus="() => handleInputFocus('tenantName')"
     />
-    <view class="mt-20rpx text-14px">
+    <view class="mt-5">
       还没有账号？
-      <a
-        href="#"
-        text="忘记密码"
-        class="decoration-none text-14px text-[var(--wot-color-primary)]"
-      />
+      <navigator href="#" class="inline text-[var(--wot-color-primary)]">
+        注册账号
+      </navigator>
     </view>
 
-    <wd-button :block="true" :round="false" custom-class="mt-40rpx">
+    <wd-button :block="true" :round="false" custom-class="mt-8">
       <text>下一步</text>
     </wd-button>
   </wd-form>
diff --git a/src/pages/login/forget.vue b/src/pages/login/forget.vue
new file mode 100644
index 0000000..7b643f6
--- /dev/null
+++ b/src/pages/login/forget.vue
@@ -0,0 +1,52 @@
+<route lang="json5" type="page">
+{
+  style: {
+    navigationBarTitleText: '忘记密码'
+  }
+}
+</route>
+
+<template>
+  <view class="h-full p-4 bg-white">
+    <view class="mb-5 font-700 text-5">忘记密码</view>
+    <wd-form :model="formData.phoneNo" ref="form">
+      <wd-input
+        v-model="formData.phoneNo"
+        prop="phoneNo"
+        :rules="[{ required: true, message: '请输入手机号' }]"
+        type="number"
+        placeholder="请输入手机号"
+        prefixIcon="phone"
+      />
+
+      <wd-button
+        :block="true"
+        :round="false"
+        class="mt-4"
+        @click="getRegisterCode"
+      >
+        <text>获取验证码</text>
+      </wd-button>
+    </wd-form>
+  </view>
+</template>
+
+<script lang="ts" setup>
+  //
+  const formData = ref({
+    phoneNo: ''
+  })
+
+  /*
+   *@Description: 跳转到验证码填写页面
+   *@MethodAuthor: xiaohong
+   *@Date: 2024-10-17 15:32:31
+   */
+  function getRegisterCode() {
+    uni.navigateTo({ url: '/pages/login/registerCode' })
+  }
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 583bd34..e1b503d 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -8,17 +8,14 @@
 </route>
 
 <template>
-  <view class="h-full">
+  <view class="h-full pb-30 bg-white overflow-auto">
     <!-- banner区域 -->
     <Banner />
 
     <!-- 主要容器区域 -->
-    <!-- 480rpx 是上面banner的高度 -->
-    <view
-      class="h-[calc(100vh-480rpx)] w-full rounded-t-2xl bg-white flex flex-col items-center p-4 box-border"
-    >
+    <view class="p-4">
       <!-- tabs 切换 -->
-      <wd-tabs v-model="tab" custom-class="h-full">
+      <wd-tabs v-model="tab">
         <wd-tab title="用户名登录">
           <LoginForm :agree="agree" />
         </wd-tab>
@@ -26,12 +23,14 @@
           <PhoneLogin />
         </wd-tab>
       </wd-tabs>
+    </view>
 
+    <view class="fixed bottom-0 left-0 right-0 h-30 z-1">
       <!-- 更多登录方式 -->
-      <MoreLoginWays />
+      <MoreLoginWays class="mb-4" />
 
       <!-- 隐私与用户条款 -->
-      <Copyright />
+      <Copyright v-model:agree="agree" />
     </view>
   </view>
 </template>
@@ -48,7 +47,7 @@
   // 用户名登录
   import LoginForm from '@/pages/login/components/LoginForm.vue'
 
-  const tab = ref(1) // tabs的索引
+  const tab = ref(0) // tabs的索引
   const agree = ref(false) // 是否同意协议
 
   onLoad(() => {
diff --git a/src/pages/login/phone-index.vue b/src/pages/login/phone-index.vue
new file mode 100644
index 0000000..2f7f99d
--- /dev/null
+++ b/src/pages/login/phone-index.vue
@@ -0,0 +1,38 @@
+<route lang="json5" type="page">
+{
+  style: {
+    navigationBarTitleText: ''
+  }
+}
+</route>
+
+<template>
+  <view class="h-full bg-white text-center pt-30 px-10">
+    <view class="text-5">{{ phoneNo }}</view>
+    <view class="text-3 text-[var(--wot-color-secondary)]">
+      认证服务由中国移动提供
+    </view>
+    <wd-button :block="true" :round="false" custom-class="my-2">
+      <text>本机号一键登录</text>
+    </wd-button>
+    <wd-button :block="true" :round="false" @click="otherLoginWay">
+      <text>其他登录方式</text>
+    </wd-button>
+
+    <more-login-ways class="fixed bottom-10 left-0 right-0" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+  import MoreLoginWays from './components/MoreLoginWays.vue'
+  // 手机号
+  const phoneNo = ref('157****1576')
+
+  function otherLoginWay() {
+    uni.navigateTo({ url: '/pages/login/index' })
+  }
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/pages/login/registerCode.vue b/src/pages/login/registerCode.vue
new file mode 100644
index 0000000..d275f8e
--- /dev/null
+++ b/src/pages/login/registerCode.vue
@@ -0,0 +1,53 @@
+<route lang="json5" type="page">
+{
+  style: {
+    navigationBarTitleText: '获取验证码'
+  }
+}
+</route>
+
+<template>
+  <view class="h-full bg-white p-4">
+    <view class="text-5 mb-4">验证手机号</view>
+    <view class="text-3.5">
+      请输入发送至
+      <em>{{ phoneNo }}</em>
+      的6位验证码,有效期10分钟。如未收到,请重新获取验证码
+    </view>
+
+    <!-- 密码输入框 -->
+    <wd-password-input
+      v-model="code"
+      :mask="false"
+      :focused="showKeyboard"
+      class="my-4!"
+      @focus="showKeyboard = true"
+    />
+
+    <view>
+      <view v-if="!codeDisabled">
+        {{ loadTime }}秒后可重新获取验证码<br />
+      </view>
+    </view>
+
+    <!-- 数字键盘 -->
+    <wd-number-keyboard v-model:visible="showKeyboard" v-model="code" />
+  </view>
+</template>
+
+<script lang="ts" setup>
+  //   手机号
+  const phoneNo = ref('157****2576')
+  // 验证码
+  const code = ref<string>()
+  //
+  const codeDisabled = ref(false)
+  const loadTime = ref(60)
+  const tips = ref('')
+  // 数字键盘
+  const showKeyboard = ref(true)
+</script>
+
+<style lang="scss" scoped>
+  //
+</style>
diff --git a/src/style/index.scss b/src/style/index.scss
index 97a0a2b..bdb7553 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -11,6 +11,7 @@
 :root,
 page {
   --wot-color-primary: #4f79f9;
+  --wot-color-secondary: #727d7c;
   // 修改按主题色
   // --wot-color-theme: #37c2bc;
 
diff --git a/src/types/uni-pages.d.ts b/src/types/uni-pages.d.ts
index b2589ec..e495193 100644
--- a/src/types/uni-pages.d.ts
+++ b/src/types/uni-pages.d.ts
@@ -7,7 +7,10 @@ interface NavigateToOptions {
   url: "/pages/work/index" |
        "/pages/colab/index" |
        "/pages/contacts/index" |
+       "/pages/login/forget" |
        "/pages/login/index" |
+       "/pages/login/phone-index" |
+       "/pages/login/registerCode" |
        "/pages/message/index" |
        "/pages/my/index";
 }
-- 
Gitee