1.0
This commit is contained in:
solosw
@@ -0,0 +1,251 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="login-header">
|
||||
<text class="app-title">商帮帮</text>
|
||||
<!-- <text class="app-subtitle">虚拟商品交易平台</text> -->
|
||||
</view>
|
||||
|
||||
<view class="login-form">
|
||||
<view class="form-item">
|
||||
<uni-icons type="phone" size="20" color="rgba(255,255,255,0.8)"></uni-icons>
|
||||
<input class="form-input"
|
||||
v-model="loginForm.phone"
|
||||
type="number"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11" />
|
||||
</view>
|
||||
|
||||
<view class="form-item">
|
||||
<uni-icons type="locked" size="20" color="rgba(255,255,255,0.8)"></uni-icons>
|
||||
<input class="form-input"
|
||||
v-model="loginForm.password"
|
||||
type="password"
|
||||
placeholder="请输入密码" />
|
||||
</view>
|
||||
|
||||
<button class="login-btn" @click="handleLogin" :disabled="loginLoading">
|
||||
{{ loginLoading ? '登录中...' : '登录' }}
|
||||
</button>
|
||||
|
||||
<view class="action-links">
|
||||
<text class="link-text" @click="goToRegister">立即注册</text>
|
||||
<!-- <text class="link-text" @click="forgotPassword">忘记密码</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import request from '@/utils/request.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
loginForm: {
|
||||
phone: '',
|
||||
password: ''
|
||||
},
|
||||
loginLoading: false
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
// 检查是否已登录
|
||||
const token = uni.getStorageSync('token')
|
||||
if (token) {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 登录验证
|
||||
validateForm() {
|
||||
if (!this.loginForm.phone) {
|
||||
uni.showToast({
|
||||
title: '请输入手机号',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!/^1[3-9]\d{9}$/.test(this.loginForm.phone)) {
|
||||
uni.showToast({
|
||||
title: '手机号格式不正确',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (!this.loginForm.password) {
|
||||
uni.showToast({
|
||||
title: '请输入密码',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
if (this.loginForm.password.length < 6) {
|
||||
uni.showToast({
|
||||
title: '密码长度不能少于6位',
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
},
|
||||
|
||||
// 处理登录
|
||||
async handleLogin() {
|
||||
if (!this.validateForm()) {
|
||||
return
|
||||
}
|
||||
|
||||
this.loginLoading = true
|
||||
|
||||
try {
|
||||
const res = await request.post('/back/auth/login', this.loginForm)
|
||||
|
||||
if (res.success) {
|
||||
const { token, user } = res.data
|
||||
|
||||
// 保存token和用户信息到本地存储
|
||||
uni.setStorageSync('token', token)
|
||||
uni.setStorageSync('userInfo', user)
|
||||
|
||||
uni.showToast({
|
||||
title: '登录成功',
|
||||
icon: 'success'
|
||||
})
|
||||
|
||||
// 跳转到首页
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/index/index'
|
||||
})
|
||||
}, 1500)
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: res.message || '登录失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
} catch (error) {
|
||||
// console.error('登录失败：', error)
|
||||
// uni.showToast({
|
||||
// title: '网络错误，请稍后重试',
|
||||
// icon: 'none'
|
||||
// })
|
||||
} finally {
|
||||
this.loginLoading = false
|
||||
}
|
||||
},
|
||||
|
||||
// 跳转到注册页面
|
||||
goToRegister() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/register/register'
|
||||
})
|
||||
},
|
||||
|
||||
// 忘记密码
|
||||
forgotPassword() {
|
||||
uni.showModal({
|
||||
title: '忘记密码',
|
||||
content: '请联系客服重置密码\n客服电话：400-123-4567',
|
||||
showCancel: false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.container {
|
||||
background: linear-gradient(135deg, #FF4444 0%, #FF6666 100%);
|
||||
min-height: 100vh;
|
||||
padding: 100rpx 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 120rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.app-title {
|
||||
display: block;
|
||||
font-size: 64rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.app-subtitle {
|
||||
font-size: 28rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
background-color: rgba(255,255,255,0.1);
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 40rpx;
|
||||
margin-bottom: 40rpx;
|
||||
border: 2rpx solid rgba(255,255,255,0.2);
|
||||
}
|
||||
|
||||
.form-item:focus-within {
|
||||
background-color: rgba(255,255,255,0.2);
|
||||
border-color: rgba(255,255,255,0.5);
|
||||
}
|
||||
|
||||
.form-item uni-icons {
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
|
||||
.form-input {
|
||||
flex: 1;
|
||||
height: 100rpx;
|
||||
font-size: 32rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.form-input::placeholder {
|
||||
color: rgba(255,255,255,0.7);
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background-color: rgba(255,255,255,0.9);
|
||||
color: #FF4444;
|
||||
border-radius: 50rpx;
|
||||
height: 100rpx;
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin: 60rpx 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.login-btn:disabled {
|
||||
background-color: rgba(255,255,255,0.5);
|
||||
color: rgba(255,68,68,0.5);
|
||||
}
|
||||
|
||||
.action-links {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 20rpx;
|
||||
}
|
||||
|
||||
.link-text {
|
||||
color: rgba(255,255,255,0.9);
|
||||
font-size: 28rpx;
|
||||
text-decoration: underline;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user