524 lines
13 KiB
Vue
524 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<view class="login-page">
|
|||
|
|
<!-- 状态栏占位 -->
|
|||
|
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
|||
|
|
|
|||
|
|
<!-- 头部区域 -->
|
|||
|
|
<view class="header">
|
|||
|
|
<view class="back-btn" @click="handleBack" v-if="showBack">
|
|||
|
|
<text class="back-icon">‹</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="header-title">登录</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 登录内容区 -->
|
|||
|
|
<view class="login-content">
|
|||
|
|
<!-- Logo区域 -->
|
|||
|
|
<!-- <view class="logo-section">
|
|||
|
|
<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
|
|||
|
|
</view> -->
|
|||
|
|
|
|||
|
|
<!-- 登录表单 -->
|
|||
|
|
<view class="login-form">
|
|||
|
|
<!-- 手机号输入 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="input-wrapper">
|
|||
|
|
<text class="input-label">手机号</text>
|
|||
|
|
<input
|
|||
|
|
class="input-field"
|
|||
|
|
type="number"
|
|||
|
|
v-model="formData.mobile"
|
|||
|
|
placeholder="请输入手机号"
|
|||
|
|
maxlength="11"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 密码输入 -->
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="input-wrapper">
|
|||
|
|
<text class="input-label">密码</text>
|
|||
|
|
<input
|
|||
|
|
class="input-field"
|
|||
|
|
:type="showPassword ? 'text' : 'password'"
|
|||
|
|
v-model="formData.password"
|
|||
|
|
placeholder="请输入密码"
|
|||
|
|
/>
|
|||
|
|
<view class="password-toggle" @click="togglePassword">
|
|||
|
|
<text class="toggle-icon">{{ showPassword ? '👁️' : '👁️🗨️' }}</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 登录按钮 -->
|
|||
|
|
<button
|
|||
|
|
class="login-btn"
|
|||
|
|
:class="{ disabled: !canLogin }"
|
|||
|
|
:disabled="!canLogin || loading"
|
|||
|
|
@click="handleLogin"
|
|||
|
|
>
|
|||
|
|
{{ loading ? '登录中...' : '登录' }}
|
|||
|
|
</button>
|
|||
|
|
|
|||
|
|
<!-- 分割线 -->
|
|||
|
|
<view class="divider">
|
|||
|
|
<view class="divider-line"></view>
|
|||
|
|
<text class="divider-text">或</text>
|
|||
|
|
<view class="divider-line"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 小程序一键授权登录 -->
|
|||
|
|
<!-- #ifdef MP-WEIXIN -->
|
|||
|
|
<button
|
|||
|
|
class="wechat-login-btn"
|
|||
|
|
open-type="getPhoneNumber"
|
|||
|
|
@getphonenumber="handleGetPhoneNumber"
|
|||
|
|
:disabled="loading"
|
|||
|
|
>
|
|||
|
|
<text>一键授权手机号快速登录</text>
|
|||
|
|
</button>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
|
|||
|
|
<!-- #ifndef MP-WEIXIN -->
|
|||
|
|
<view class="wechat-login-tip">
|
|||
|
|
<text>小程序一键授权登录仅支持微信小程序环境</text>
|
|||
|
|
</view>
|
|||
|
|
<!-- #endif -->
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import { login, loginByPhone } from '@/api/auth.js'
|
|||
|
|
import { getUserInfo } from '@/api/profile.js'
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusBarHeight: 0,
|
|||
|
|
showBack: false,
|
|||
|
|
loading: false,
|
|||
|
|
showPassword: false,
|
|||
|
|
formData: {
|
|||
|
|
mobile: '',
|
|||
|
|
password: ''
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 判断是否可以登录
|
|||
|
|
canLogin() {
|
|||
|
|
return (
|
|||
|
|
this.formData.mobile.length === 11 &&
|
|||
|
|
this.formData.password.length > 0
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
onLoad(options) {
|
|||
|
|
// 检查是否已登录
|
|||
|
|
const token = uni.getStorageSync('token')
|
|||
|
|
if (token) {
|
|||
|
|
// 已登录，跳转到首页
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/index/index',
|
|||
|
|
fail: () => {
|
|||
|
|
uni.reLaunch({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 判断是否显示返回按钮（从其他页面跳转过来时显示）
|
|||
|
|
const pages = getCurrentPages()
|
|||
|
|
if (pages.length > 1) {
|
|||
|
|
this.showBack = true
|
|||
|
|
}
|
|||
|
|
this.getSystemInfo()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 获取系统信息
|
|||
|
|
getSystemInfo() {
|
|||
|
|
const systemInfo = uni.getSystemInfoSync()
|
|||
|
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
handleBack() {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换密码显示/隐藏
|
|||
|
|
togglePassword() {
|
|||
|
|
this.showPassword = !this.showPassword
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 账户密码登录
|
|||
|
|
async handleLogin() {
|
|||
|
|
if (!this.canLogin) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请填写完整的登录信息',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 验证手机号格式
|
|||
|
|
const mobileReg = /^1[3-9]\d{9}$/
|
|||
|
|
if (!mobileReg.test(this.formData.mobile)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入正确的手机号',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
const res = await login({
|
|||
|
|
mobile: this.formData.mobile,
|
|||
|
|
password: this.formData.password
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 登录成功，保存token（兼容不同的响应格式）
|
|||
|
|
const token = res?.accessToken || res?.token || res?.data?.accessToken || res?.data?.token
|
|||
|
|
if (token) {
|
|||
|
|
uni.setStorageSync('token', token)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存refreshToken（用于刷新accessToken）
|
|||
|
|
const refreshToken = res?.refreshToken || res?.data?.refreshToken
|
|||
|
|
if (refreshToken) {
|
|||
|
|
uni.setStorageSync('refreshToken', refreshToken)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存token过期时间
|
|||
|
|
const expiresTime = res?.expiresTime || res?.data?.expiresTime
|
|||
|
|
if (expiresTime) {
|
|||
|
|
uni.setStorageSync('tokenExpiresTime', expiresTime)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存用户ID
|
|||
|
|
const userId = res?.userId || res?.data?.userId
|
|||
|
|
if (userId) {
|
|||
|
|
uni.setStorageSync('userId', userId)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存用户信息（如果有）
|
|||
|
|
const userInfo = res?.userInfo || res?.data?.userInfo || res?.user || res?.data?.user
|
|||
|
|
if (userInfo) {
|
|||
|
|
uni.setStorageSync('userInfo', userInfo)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 登录成功后，调用个人信息接口获取完整用户信息
|
|||
|
|
try {
|
|||
|
|
const userInfoRes = await getUserInfo()
|
|||
|
|
if (userInfoRes && userInfoRes.data) {
|
|||
|
|
// 根据接口返回的数据结构，保存 res.data
|
|||
|
|
uni.setStorageSync('userInfo', userInfoRes.data)
|
|||
|
|
} else if (userInfoRes) {
|
|||
|
|
// 兼容直接返回数据的情况
|
|||
|
|
uni.setStorageSync('userInfo', userInfoRes)
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取用户信息失败:', error)
|
|||
|
|
// 获取用户信息失败不影响登录流程，继续执行
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '登录成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 延迟跳转，让用户看到成功提示
|
|||
|
|
setTimeout(() => {
|
|||
|
|
// 检查是否有返回路径
|
|||
|
|
const pages = getCurrentPages()
|
|||
|
|
if (pages.length > 1) {
|
|||
|
|
// 有上一页，返回上一页
|
|||
|
|
uni.navigateBack()
|
|||
|
|
} else {
|
|||
|
|
// 没有上一页，跳转到首页
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}, 1500)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('登录失败:', error)
|
|||
|
|
// 错误信息已在request中统一处理，这里不需要再次提示
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 小程序一键授权手机号登录
|
|||
|
|
async handleGetPhoneNumber(e) {
|
|||
|
|
console.log('获取手机号授权结果:', e)
|
|||
|
|
|
|||
|
|
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
|||
|
|
this.loading = true
|
|||
|
|
try {
|
|||
|
|
// 获取微信登录code（用于后端解密手机号）
|
|||
|
|
const loginRes = await new Promise((resolve, reject) => {
|
|||
|
|
uni.login({
|
|||
|
|
provider: 'weixin',
|
|||
|
|
success: resolve,
|
|||
|
|
fail: reject
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 调用登录接口
|
|||
|
|
// 注意：这里需要根据后端实际接口要求传递参数
|
|||
|
|
// 通常需要传递 code、encryptedData、iv 等参数
|
|||
|
|
const res = await loginByPhone({
|
|||
|
|
code: loginRes.code,
|
|||
|
|
encryptedData: e.detail.encryptedData,
|
|||
|
|
iv: e.detail.iv
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 登录成功，保存token（兼容不同的响应格式）
|
|||
|
|
const token = res?.token || res?.data?.token || res?.accessToken || res?.access_token
|
|||
|
|
if (token) {
|
|||
|
|
uni.setStorageSync('token', token)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存refreshToken（用于刷新accessToken）
|
|||
|
|
const refreshToken = res?.refreshToken || res?.data?.refreshToken
|
|||
|
|
if (refreshToken) {
|
|||
|
|
uni.setStorageSync('refreshToken', refreshToken)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存token过期时间
|
|||
|
|
const expiresTime = res?.expiresTime || res?.data?.expiresTime
|
|||
|
|
if (expiresTime) {
|
|||
|
|
uni.setStorageSync('tokenExpiresTime', expiresTime)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存用户ID
|
|||
|
|
const userId = res?.userId || res?.data?.userId
|
|||
|
|
if (userId) {
|
|||
|
|
uni.setStorageSync('userId', userId)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 保存用户信息（如果有）
|
|||
|
|
const userInfo = res?.userInfo || res?.data?.userInfo || res?.user || res?.data?.user
|
|||
|
|
if (userInfo) {
|
|||
|
|
uni.setStorageSync('userInfo', userInfo)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 登录成功后，调用个人信息接口获取完整用户信息
|
|||
|
|
try {
|
|||
|
|
const userInfoRes = await getUserInfo()
|
|||
|
|
uni.setStorageSync('userInfo', userInfoRes)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('获取用户信息失败:', error)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '登录成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 延迟跳转
|
|||
|
|
setTimeout(() => {
|
|||
|
|
const pages = getCurrentPages()
|
|||
|
|
if (pages.length > 1) {
|
|||
|
|
uni.navigateBack()
|
|||
|
|
} else {
|
|||
|
|
uni.switchTab({
|
|||
|
|
url: '/pages/index/index'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}, 1500)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('一键登录失败:', error)
|
|||
|
|
// 错误信息已在request中统一处理
|
|||
|
|
} finally {
|
|||
|
|
this.loading = false
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '授权失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
.login-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background: linear-gradient(180deg, #e2e8f1 0%, #ffffff 100%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.status-bar {
|
|||
|
|
background-color: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
background-color: transparent;
|
|||
|
|
|
|||
|
|
.back-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 30rpx;
|
|||
|
|
width: 60rpx;
|
|||
|
|
height: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.back-icon {
|
|||
|
|
font-size: 60rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.header-title {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #1a1819;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-content {
|
|||
|
|
padding: 60rpx 60rpx 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-bottom: 80rpx;
|
|||
|
|
|
|||
|
|
.logo {
|
|||
|
|
width: 200rpx;
|
|||
|
|
height: 200rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-form {
|
|||
|
|
.form-item {
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
|
|||
|
|
.input-wrapper {
|
|||
|
|
position: relative;
|
|||
|
|
background-color: #ffffff;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
padding: 30rpx 24rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|||
|
|
|
|||
|
|
.input-label {
|
|||
|
|
width: 120rpx;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-weight: 500;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-field {
|
|||
|
|
flex: 1;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #1a1819;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.password-toggle {
|
|||
|
|
width: 60rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
|
|||
|
|
.toggle-icon {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background: linear-gradient(135deg, #004294 0%, #0066cc 100%);
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
border: none;
|
|||
|
|
margin-top: 40rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
&.disabled {
|
|||
|
|
background: #cccccc;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 60rpx 0 40rpx;
|
|||
|
|
padding: 0 20rpx;
|
|||
|
|
|
|||
|
|
.divider-line {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 1rpx;
|
|||
|
|
background-color: #e0e0e0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider-text {
|
|||
|
|
margin: 0 20rpx;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wechat-login-btn {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 88rpx;
|
|||
|
|
background-color: #07c160;
|
|||
|
|
border-radius: 44rpx;
|
|||
|
|
color: #ffffff;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
border: none;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
gap: 12rpx;
|
|||
|
|
|
|||
|
|
&::after {
|
|||
|
|
border: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wechat-icon {
|
|||
|
|
font-size: 36rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wechat-login-tip {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 40rpx 0;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|