页面提交
This commit is contained in:
FlowerWater
236
src/pages/login/index.vue
Normal file
236
src/pages/login/index.vue
Normal file
@@ -0,0 +1,236 @@
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store/user'
|
||||
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)
|
||||
|
||||
// 发送验证码
|
||||
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
|
||||
}
|
||||
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
|
||||
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
|
||||
setTimeout(() => {
|
||||
uni.navigateBack()
|
||||
}, 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">
|
||||
<text class="i-carbon-store icon"></text>
|
||||
</view>
|
||||
<text class="app-name">商城+金融</text>
|
||||
</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>
|
||||
|
||||
<view class="submit-btn" @click="handleLogin">
|
||||
<text v-if="!loading">登录</text>
|
||||
<text v-else>登录中...</text>
|
||||
</view>
|
||||
|
||||
<view class="tips">
|
||||
<text>未注册手机号验证后自动创建账号</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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: 100rpx;
|
||||
margin-bottom: 100rpx;
|
||||
|
||||
.logo {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.app-name {
|
||||
font-size: 40rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.form {
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50rpx;
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.icon {
|
||||
font-size: 40rpx;
|
||||
color: #999;
|
||||
margin-right: 20rpx;
|
||||
}
|
||||
|
||||
.input {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
font-size: 26rpx;
|
||||
color: #ff4d4f;
|
||||
padding-left: 20rpx;
|
||||
border-left: 1rpx solid #ddd;
|
||||
line-height: 1;
|
||||
|
||||
&.disabled {
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
height: 100rpx;
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #ff4d4f 100%);
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
margin-top: 60rpx;
|
||||
box-shadow: 0 8rpx 24rpx rgba(255, 77, 79, 0.3);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
text-align: center;
|
||||
margin-top: 30rpx;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user