feat(login): 重构登录页面,改为邮箱登录并美化UI
- 美化登录页面UI,添加Logo图标和渐变背景 - 将登录方式从账号改为邮箱登录 - 新增邮箱格式验证(正则表达式校验) - 新增密码长度验证(至少6位) - 移除"忘记密码"和"立即注册"功能 - 添加"账号由后台系统统一配置"提示文字 - 优化登录按钮样式(渐变背景、阴影、点击反馈) - 更新页面标题和副标题文案 Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
Showing
2 changed files
with
72 additions
and
31 deletions
| 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> | ... | ... |
-
Please register or login to post a comment