hookehuyr

feat(login): 重构登录页面,改为邮箱登录并美化UI

- 美化登录页面UI,添加Logo图标和渐变背景
- 将登录方式从账号改为邮箱登录
- 新增邮箱格式验证(正则表达式校验)
- 新增密码长度验证(至少6位)
- 移除"忘记密码"和"立即注册"功能
- 添加"账号由后台系统统一配置"提示文字
- 优化登录按钮样式(渐变背景、阴影、点击反馈)
- 更新页面标题和副标题文案

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
1 /* 1 /*
2 * @Date: 2025-06-28 10:33:00 2 * @Date: 2025-06-28 10:33:00
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2026-01-30 13:50:37 4 + * @LastEditTime: 2026-01-30 13:54:57
5 * @FilePath: /manulife-weapp/src/pages/login/index.config.js 5 * @FilePath: /manulife-weapp/src/pages/login/index.config.js
6 * @Description: 登录页配置 6 * @Description: 登录页配置
7 */ 7 */
8 export default definePageConfig({ 8 export default definePageConfig({
9 - navigationBarTitleText: '登录', 9 + navigationBarTitleText: '',
10 navigationStyle: 'custom' 10 navigationStyle: 'custom'
11 }) 11 })
......
1 <template> 1 <template>
2 <view class="min-h-screen bg-white flex flex-col"> 2 <view class="min-h-screen bg-white flex flex-col">
3 <!-- Header --> 3 <!-- Header -->
4 - <NavHeader title="登录" :show-back="true" /> 4 + <NavHeader title="" :show-back="true" />
5 5
6 - <view class="flex-1 flex flex-col px-[48rpx] pt-[80rpx]"> 6 + <view class="flex-1 flex flex-col px-[48rpx] pt-[120rpx]">
7 <!-- Logo/Title --> 7 <!-- Logo/Title -->
8 - <view class="mb-[80rpx]"> 8 + <view class="mb-[100rpx]">
9 - <view class="text-[48rpx] font-bold text-gray-900 mb-[16rpx]">欢迎登录</view> 9 + <!-- Logo Icon -->
10 - <view class="text-[28rpx] text-gray-500">Manulife 宏利</view> 10 + <view class="flex justify-center mb-[40rpx]">
11 + <view class="w-[160rpx] h-[160rpx] rounded-[32rpx] bg-gradient-to-br from-[#007AFF] to-[#0051D5] flex items-center justify-center shadow-lg">
12 + <text class="text-white text-[80rpx] font-bold">M</text>
13 + </view>
14 + </view>
15 +
16 + <!-- Title -->
17 + <view class="text-center">
18 + <view class="text-[52rpx] font-bold text-gray-900 mb-[16rpx]">欢迎登录</view>
19 + <view class="text-[28rpx] text-gray-500">Manulife 臻奇智荟圈</view>
20 + </view>
11 </view> 21 </view>
12 22
13 <!-- Form --> 23 <!-- Form -->
14 <view class="space-y-[48rpx]"> 24 <view class="space-y-[48rpx]">
15 - <!-- Username --> 25 + <!-- Email -->
16 <view class="border-b border-gray-200 pb-[16rpx]"> 26 <view class="border-b border-gray-200 pb-[16rpx]">
17 - <view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">账号</view> 27 + <view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">邮箱</view>
18 <input 28 <input
19 - v-model="form.username" 29 + v-model="form.email"
20 type="text" 30 type="text"
21 - placeholder="请输入账号" 31 + placeholder="请输入工作邮箱"
22 placeholder-class="text-gray-300" 32 placeholder-class="text-gray-300"
23 class="w-full text-[32rpx] text-gray-900 h-[80rpx]" 33 class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
24 /> 34 />
...@@ -35,23 +45,22 @@ ...@@ -35,23 +45,22 @@
35 class="w-full text-[32rpx] text-gray-900 h-[80rpx]" 45 class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
36 /> 46 />
37 </view> 47 </view>
48 +
49 + <!-- Hint -->
50 + <view class="text-[24rpx] text-gray-400 mt-[24rpx]">
51 + 账号由后台系统统一配置,请联系管理员获取
52 + </view>
38 </view> 53 </view>
39 54
40 <!-- Actions --> 55 <!-- Actions -->
41 <view class="mt-[80rpx]"> 56 <view class="mt-[80rpx]">
42 <button 57 <button
43 - class="w-full h-[96rpx] bg-[#2563EB] rounded-[48rpx] flex items-center justify-center text-white text-[32rpx] font-bold active:opacity-90 after:border-none" 58 + class="w-full h-[96rpx] bg-gradient-to-r from-[#007AFF] to-[#0051D5] rounded-[48rpx] flex items-center justify-center text-white text-[32rpx] font-bold shadow-lg active:scale-[0.98] transition-transform after:border-none"
44 @tap="handleLogin" 59 @tap="handleLogin"
45 > 60 >
46 登录 61 登录
47 </button> 62 </button>
48 </view> 63 </view>
49 -
50 - <!-- Links -->
51 - <view class="mt-[48rpx] flex justify-between text-[28rpx]">
52 - <view class="text-gray-500" @tap="handleForgotPassword">忘记密码</view>
53 - <view class="text-[#2563EB]" @tap="handleRegister">立即注册</view>
54 - </view>
55 </view> 64 </view>
56 </view> 65 </view>
57 </template> 66 </template>
...@@ -65,25 +74,48 @@ import NavHeader from '@/components/NavHeader.vue' ...@@ -65,25 +74,48 @@ import NavHeader from '@/components/NavHeader.vue'
65 const go = useGo() 74 const go = useGo()
66 75
67 const form = reactive({ 76 const form = reactive({
68 - username: '', 77 + email: '',
69 password: '' 78 password: ''
70 }) 79 })
71 80
72 /** 81 /**
82 + * 验证邮箱格式
83 + * @param {string} email - 邮箱地址
84 + * @returns {boolean} 是否有效
85 + */
86 +const isValidEmail = (email) => {
87 + const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/
88 + return emailRegex.test(email)
89 +}
90 +
91 +/**
73 * Handle login action 92 * Handle login action
74 */ 93 */
75 const handleLogin = () => { 94 const handleLogin = () => {
76 - if (!form.username) { 95 + // 验证邮箱
77 - Taro.showToast({ title: '请输入账号', icon: 'none' }) 96 + if (!form.email) {
97 + Taro.showToast({ title: '请输入邮箱', icon: 'none' })
98 + return
99 + }
100 +
101 + if (!isValidEmail(form.email)) {
102 + Taro.showToast({ title: '请输入有效的邮箱地址', icon: 'none' })
78 return 103 return
79 } 104 }
105 +
106 + // 验证密码
80 if (!form.password) { 107 if (!form.password) {
81 Taro.showToast({ title: '请输入密码', icon: 'none' }) 108 Taro.showToast({ title: '请输入密码', icon: 'none' })
82 return 109 return
83 } 110 }
84 111
112 + if (form.password.length < 6) {
113 + Taro.showToast({ title: '密码长度至少6位', icon: 'none' })
114 + return
115 + }
116 +
85 // Mock login success 117 // Mock login success
86 - Taro.showLoading({ title: '登录中...' }) 118 + Taro.showLoading({ title: '登录中...', mask: true })
87 setTimeout(() => { 119 setTimeout(() => {
88 Taro.hideLoading() 120 Taro.hideLoading()
89 Taro.showToast({ title: '登录成功', icon: 'success' }) 121 Taro.showToast({ title: '登录成功', icon: 'success' })
...@@ -93,19 +125,28 @@ const handleLogin = () => { ...@@ -93,19 +125,28 @@ const handleLogin = () => {
93 }, 1500) 125 }, 1500)
94 }, 1000) 126 }, 1000)
95 } 127 }
96 -
97 -const handleForgotPassword = () => {
98 - Taro.showToast({ title: '功能开发中', icon: 'none' })
99 -}
100 -
101 -const handleRegister = () => {
102 - Taro.showToast({ title: '功能开发中', icon: 'none' })
103 -}
104 </script> 128 </script>
105 129
106 <style lang="less"> 130 <style lang="less">
107 -/* Reset button default styles if needed */ 131 +/* Reset button default styles */
108 button::after { 132 button::after {
109 border: none; 133 border: none;
110 } 134 }
135 +
136 +/* Enhance gradient effect for button */
137 +button {
138 + background: linear-gradient(135deg, #007AFF 0%, #0051D5 100%);
139 + box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
140 + transition: all 0.3s ease;
141 +
142 + &:active {
143 + transform: scale(0.98);
144 + box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
145 + }
146 +}
147 +
148 +/* Logo icon enhancement */
149 +.shadow-lg {
150 + box-shadow: 0 16rpx 32rpx rgba(0, 122, 255, 0.25);
151 +}
111 </style> 152 </style>
......