index.vue
3.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
<view class="min-h-screen bg-white flex flex-col">
<!-- Header -->
<NavHeader title="登录" :show-back="true" />
<view class="flex-1 flex flex-col px-[48rpx] pt-[80rpx]">
<!-- Logo/Title -->
<view class="mb-[80rpx]">
<view class="text-[48rpx] font-bold text-gray-900 mb-[16rpx]">欢迎登录</view>
<view class="text-[28rpx] text-gray-500">Manulife 宏利</view>
</view>
<!-- Form -->
<view class="space-y-[48rpx]">
<!-- Username -->
<view class="border-b border-gray-200 pb-[16rpx]">
<view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">账号</view>
<input
v-model="form.username"
type="text"
placeholder="请输入账号"
placeholder-class="text-gray-300"
class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
/>
</view>
<!-- Password -->
<view class="border-b border-gray-200 pb-[16rpx]">
<view class="text-[28rpx] text-gray-900 font-medium mb-[16rpx]">密码</view>
<input
v-model="form.password"
type="password"
placeholder="请输入密码"
placeholder-class="text-gray-300"
class="w-full text-[32rpx] text-gray-900 h-[80rpx]"
/>
</view>
</view>
<!-- Actions -->
<view class="mt-[80rpx]">
<button
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"
@tap="handleLogin"
>
登录
</button>
</view>
<!-- Links -->
<view class="mt-[48rpx] flex justify-between text-[28rpx]">
<view class="text-gray-500" @tap="handleForgotPassword">忘记密码</view>
<view class="text-[#2563EB]" @tap="handleRegister">立即注册</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive } from 'vue'
import Taro from '@tarojs/taro'
import { useGo } from '@/hooks/useGo'
import NavHeader from '@/components/NavHeader.vue'
const go = useGo()
const form = reactive({
username: '',
password: ''
})
/**
* Handle login action
*/
const handleLogin = () => {
if (!form.username) {
Taro.showToast({ title: '请输入账号', icon: 'none' })
return
}
if (!form.password) {
Taro.showToast({ title: '请输入密码', icon: 'none' })
return
}
// Mock login success
Taro.showLoading({ title: '登录中...' })
setTimeout(() => {
Taro.hideLoading()
Taro.showToast({ title: '登录成功', icon: 'success' })
setTimeout(() => {
// Redirect to home or previous page
Taro.reLaunch({ url: '/pages/index/index' })
}, 1500)
}, 1000)
}
const handleForgotPassword = () => {
Taro.showToast({ title: '功能开发中', icon: 'none' })
}
const handleRegister = () => {
Taro.showToast({ title: '功能开发中', icon: 'none' })
}
</script>
<style lang="less">
/* Reset button default styles if needed */
button::after {
border: none;
}
</style>