356 lines
8.2 KiB
Vue
356 lines
8.2 KiB
Vue
<script lang="ts" setup>
|
|
import { useUserStore, ClientType, CLIENT_TYPE_CONFIG } from '@/store/user'
|
|
import { tabbarStore } from '@/tabbar/store'
|
|
import { login, sendCode } from '@/api/auth'
|
|
|
|
definePage({
|
|
style: {
|
|
navigationBarTitleText: '登录',
|
|
navigationBarBackgroundColor: '#ffffff',
|
|
},
|
|
})
|
|
|
|
const userStore = useUserStore()
|
|
|
|
// 状态
|
|
const phone = ref('13800138000')
|
|
const code = ref('')
|
|
const loading = ref(false)
|
|
const countdown = ref(0)
|
|
const timer = ref<any>(null)
|
|
|
|
// 客户端类型选择
|
|
const selectedClientType = ref<ClientType>(ClientType.USER)
|
|
const clientTypes = [
|
|
{ type: ClientType.USER, ...CLIENT_TYPE_CONFIG[ClientType.USER] },
|
|
{ type: ClientType.MERCHANT, ...CLIENT_TYPE_CONFIG[ClientType.MERCHANT] },
|
|
{ type: ClientType.BANK, ...CLIENT_TYPE_CONFIG[ClientType.BANK] },
|
|
{ type: ClientType.GOVERNMENT, ...CLIENT_TYPE_CONFIG[ClientType.GOVERNMENT] },
|
|
{ type: ClientType.INSURANCE, ...CLIENT_TYPE_CONFIG[ClientType.INSURANCE] },
|
|
]
|
|
|
|
// 选择客户端类型
|
|
function selectClientType(type: ClientType) {
|
|
selectedClientType.value = type
|
|
}
|
|
|
|
// 发送验证码
|
|
async function handleSendCode() {
|
|
if (!phone.value) {
|
|
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
|
return
|
|
}
|
|
if (countdown.value > 0) return
|
|
|
|
try {
|
|
await sendCode(phone.value)
|
|
uni.showToast({ title: '验证码已发送', icon: 'none' })
|
|
|
|
countdown.value = 60
|
|
timer.value = setInterval(() => {
|
|
countdown.value--
|
|
if (countdown.value <= 0) {
|
|
clearInterval(timer.value)
|
|
}
|
|
}, 1000)
|
|
} catch (error) {
|
|
uni.showToast({ title: '发送失败', icon: 'none' })
|
|
}
|
|
}
|
|
|
|
// 登录
|
|
async function handleLogin() {
|
|
if (!phone.value) {
|
|
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
|
return
|
|
}
|
|
|
|
loading.value = true
|
|
try {
|
|
const res: any = await login({ phone: phone.value, code: code.value })
|
|
|
|
// 更新用户信息和客户端类型
|
|
userStore.userInfo = res.data.user
|
|
userStore.isLogin = true
|
|
userStore.setClientType(selectedClientType.value)
|
|
|
|
// 根据客户端类型切换 tabbar
|
|
tabbarStore.setTabbarByClientType(selectedClientType.value)
|
|
|
|
const config = CLIENT_TYPE_CONFIG[selectedClientType.value]
|
|
uni.showToast({ title: `${config.label}登录成功`, icon: 'success' })
|
|
|
|
// 跳转到对应首页
|
|
setTimeout(() => {
|
|
uni.reLaunch({ url: config.homePage })
|
|
}, 1500)
|
|
} catch (error) {
|
|
uni.showToast({ title: '登录失败', icon: 'none' })
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
|
|
onUnload(() => {
|
|
if (timer.value) {
|
|
clearInterval(timer.value)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<view class="login-page">
|
|
<view class="logo-wrapper">
|
|
<view class="logo">
|
|
<image src="/static/logo4.png" class="logo-image"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 客户端类型选择 -->
|
|
<view class="client-type-section">
|
|
<view class="section-title">选择登录端</view>
|
|
<view class="client-type-list">
|
|
<view
|
|
v-for="item in clientTypes"
|
|
:key="item.type"
|
|
class="client-type-item"
|
|
:class="{ active: selectedClientType === item.type }"
|
|
:style="{ '--theme-color': item.color }"
|
|
@click="selectClientType(item.type)"
|
|
>
|
|
<view class="type-icon" :style="selectedClientType === item.type ? { background: item.color } : {}">
|
|
<text :class="item.icon"></text>
|
|
</view>
|
|
<view class="type-info">
|
|
<text class="type-label">{{ item.label }}</text>
|
|
<text class="type-desc">{{ item.description }}</text>
|
|
</view>
|
|
<view class="type-check" v-if="selectedClientType === item.type" :style="{ color: item.color }">
|
|
<text class="i-carbon-checkmark-filled"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form">
|
|
<view class="input-group">
|
|
<text class="i-carbon-phone icon"></text>
|
|
<input
|
|
v-model="phone"
|
|
class="input"
|
|
type="number"
|
|
placeholder="请输入手机号"
|
|
:maxlength="11"
|
|
/>
|
|
</view>
|
|
|
|
<view class="input-group">
|
|
<text class="i-carbon-security icon"></text>
|
|
<input
|
|
v-model="code"
|
|
class="input"
|
|
type="number"
|
|
placeholder="请输入验证码"
|
|
:maxlength="6"
|
|
/>
|
|
<view
|
|
class="code-btn"
|
|
:class="{ disabled: countdown > 0 }"
|
|
@click="handleSendCode"
|
|
>
|
|
{{ countdown > 0 ? `${countdown}s后重发` : '获取验证码' }}
|
|
</view>
|
|
</view>
|
|
|
|
<wd-notice-bar text="演示使用,直接点击登录~" prefix="warn-bold" custom-class="space" color="#34D19D" background-color="#f0f9eb" />
|
|
|
|
<view
|
|
class="submit-btn"
|
|
:style="{ background: CLIENT_TYPE_CONFIG[selectedClientType].color }"
|
|
@click="handleLogin"
|
|
>
|
|
<text v-if="!loading">{{ CLIENT_TYPE_CONFIG[selectedClientType].label }}登录</text>
|
|
<text v-else>登录中...</text>
|
|
</view>
|
|
|
|
<view class="tips">
|
|
<text>未注册手机号验证后自动创建账号</text>
|
|
<p> </p>
|
|
<p><text>©2025 数字广东网络建设有限公司</text></p>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.logo-image {
|
|
width: 80px;
|
|
height: 78px;
|
|
}
|
|
|
|
.login-page {
|
|
min-height: 100vh;
|
|
background: #fff;
|
|
padding: 60rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.logo-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-top: 40rpx;
|
|
margin-bottom: 30rpx;
|
|
|
|
.logo {
|
|
width: 320rpx;
|
|
height: 116rpx;
|
|
border-radius: 40rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
// 客户端类型选择区域
|
|
.client-type-section {
|
|
margin-bottom: 30rpx;
|
|
|
|
.section-title {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
margin-bottom: 20rpx;
|
|
padding-left: 10rpx;
|
|
}
|
|
|
|
.client-type-list {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 16rpx;
|
|
}
|
|
|
|
.client-type-item {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 20rpx 24rpx;
|
|
background: #f8f9fa;
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid transparent;
|
|
transition: all 0.3s ease;
|
|
|
|
&.active {
|
|
background: #fff;
|
|
border-color: var(--theme-color);
|
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.type-icon {
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
border-radius: 16rpx;
|
|
background: #e9ecef;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-right: 20rpx;
|
|
transition: all 0.3s ease;
|
|
|
|
text {
|
|
font-size: 36rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
&.active .type-icon text {
|
|
color: #fff;
|
|
}
|
|
|
|
.type-info {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4rpx;
|
|
|
|
.type-label {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #333;
|
|
}
|
|
|
|
.type-desc {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
|
|
.type-check {
|
|
font-size: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.form {
|
|
.input-group {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 50rpx;
|
|
padding: 0 40rpx;
|
|
margin-bottom: 24rpx;
|
|
|
|
.icon {
|
|
font-size: 40rpx;
|
|
color: #999;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
height: 100%;
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.code-btn {
|
|
font-size: 26rpx;
|
|
color: #008ef7;
|
|
padding-left: 20rpx;
|
|
border-left: 1rpx solid #ddd;
|
|
line-height: 1;
|
|
|
|
&.disabled {
|
|
color: #999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.submit-btn {
|
|
height: 100rpx;
|
|
border-radius: 50rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #fff;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
margin-top: 40rpx;
|
|
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.15);
|
|
transition: all 0.3s ease;
|
|
|
|
&:active {
|
|
opacity: 0.9;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
|
|
.tips {
|
|
text-align: center;
|
|
margin-top: 30rpx;
|
|
font-size: 24rpx;
|
|
color: #999;
|
|
}
|
|
}
|
|
</style>
|
|
|