lizi/shop-toy
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: 分端显示

Browse Source
This commit is contained in:
FlowerWater
2025-12-17 17:01:46 +08:00
parent 5e3d3708c6
commit 3c21b074c4
16 changed files with 1723 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
src/pages/login/index.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { useUserStore } from '@/store/user'
import { useUserStore, ClientType, CLIENT_TYPE_CONFIG } from '@/store/user'
import { tabbarStore } from '@/tabbar/store'
import { login, sendCode } from '@/api/auth'
definePage({
@@ -18,6 +19,19 @@ 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] },
]
// 选择客户端类型
function selectClientType(type: ClientType) {
selectedClientType.value = type
}
// 发送验证码
async function handleSendCode() {
if (!phone.value) {
@@ -30,7 +44,6 @@ async function handleSendCode() {
await sendCode(phone.value)
uni.showToast({ title: '验证码已发送', icon: 'none' })
// 倒计时
countdown.value = 60
timer.value = setInterval(() => {
countdown.value--
@@ -49,26 +62,25 @@ async function handleLogin() {
uni.showToast({ title: '请输入手机号', icon: 'none' })
return
}
if (!code.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)
uni.showToast({ title: '登录成功', icon: 'success' })
// 根据客户端类型切换 tabbar
tabbarStore.setTabbarByClientType(selectedClientType.value)
const config = CLIENT_TYPE_CONFIG[selectedClientType.value]
uni.showToast({ title: `${config.label}登录成功`, icon: 'success' })
// 跳转到对应首页
setTimeout(() => {
uni.switchTab({
url: '/pages/index/index'
})
uni.reLaunch({ url: config.homePage })
}, 1500)
} catch (error) {
uni.showToast({ title: '登录失败', icon: 'none' })
@@ -88,10 +100,34 @@ onUnload(() => {
<view class="login-page">
<view class="logo-wrapper">
<view class="logo">
<image src="/static/logo4.png" class="logo-image"></image>
<!-- <text class="i-carbon-store icon"></text> -->
<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>
<!-- <text class="app-name">商城+金融</text> -->
</view>
<view class="form">
@@ -123,9 +159,15 @@ onUnload(() => {
{{ 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" @click="handleLogin">
<text v-if="!loading">登录</text>
<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>
@@ -143,6 +185,7 @@ onUnload(() => {
width: 80px;
height: 78px;
}
.login-page {
min-height: 100vh;
background: #fff;
@@ -155,30 +198,93 @@ onUnload(() => {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 120rpx;
margin-bottom: 116rpx;
margin-top: 40rpx;
margin-bottom: 30rpx;
.logo {
width: 320rpx;
height: 116rpx;
// background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
border-radius: 40rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24rpx;
// box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
.icon {
font-size: 80rpx;
color: #fff;
}
}
}
// 客户端类型选择区域
.client-type-section {
margin-bottom: 30rpx;
.section-title {
font-size: 28rpx;
color: #666;
margin-bottom: 20rpx;
padding-left: 10rpx;
}
.app-name {
font-size: 40rpx;
font-weight: 600;
color: #333;
.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;
}
}
}
@@ -190,7 +296,7 @@ onUnload(() => {
background: #f5f5f5;
border-radius: 50rpx;
padding: 0 40rpx;
margin-bottom: 30rpx;
margin-bottom: 24rpx;
.icon {
font-size: 40rpx;
@@ -219,7 +325,6 @@ onUnload(() => {
.submit-btn {
height: 100rpx;
background: linear-gradient(135deg, #0060ef 0%, #0060ef 100%);
border-radius: 50rpx;
display: flex;
align-items: center;
@@ -227,11 +332,13 @@ onUnload(() => {
color: #fff;
font-size: 32rpx;
font-weight: 600;
margin-top: 60rpx;
box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
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);
}
}
@@ -243,3 +350,4 @@ onUnload(() => {
}
}
</style>