730 lines
20 KiB
Vue
730 lines
20 KiB
Vue
<template>
|
||
<view class="login-page">
|
||
<view class="header-fixed-wrapper" :style="{ height: headerHeight + 'px' }">
|
||
<NavHeader title="登录" />
|
||
</view>
|
||
<view class="main-wrap" :style="{ paddingTop: headerHeight + 'px' }">
|
||
<view class="login-content">
|
||
<!-- Logo区域 -->
|
||
<view class="logo-section">
|
||
<image class="logo" src="/static/home/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 || !agreedToTerms"
|
||
>
|
||
<text>一键授权手机号快速登录</text>
|
||
</button>
|
||
<!-- #endif -->
|
||
|
||
<!-- #ifndef MP-WEIXIN -->
|
||
<view class="wechat-login-tip">
|
||
<text>小程序一键授权登录仅支持微信小程序环境</text>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
<!-- 协议同意区域 -->
|
||
<view class="agreement-section">
|
||
<view class="agreement-checkbox" @click="toggleAgreement">
|
||
<view class="checkbox-icon" :class="{ checked: agreedToTerms }">
|
||
<text v-if="agreedToTerms" class="checkmark">✓</text>
|
||
</view>
|
||
<text class="agreement-text">
|
||
我已阅读并同意
|
||
<text class="link-text" @click.stop="goToUserAgreement">《用户服务协议》</text>
|
||
和
|
||
<text class="link-text" @click.stop="goToPrivacyPolicy">《隐私政策》</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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,
|
||
agreedToTerms: false, // 是否同意协议
|
||
formData: {
|
||
mobile: '',
|
||
password: ''
|
||
},
|
||
// 登录相关参数
|
||
state: '', // state 参数
|
||
inviteCode: '' // 邀请码
|
||
}
|
||
},
|
||
computed: {
|
||
headerHeight() {
|
||
return this.statusBarHeight + 44
|
||
},
|
||
// 判断是否可以登录
|
||
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
|
||
}
|
||
|
||
// 保存页面参数（state、inviteCode；扫码进入时邀请码在 scene 中）
|
||
if (options.state) {
|
||
this.state = options.state
|
||
}
|
||
if (options.inviteCode) {
|
||
this.inviteCode = options.inviteCode
|
||
}
|
||
if (options.scene && /^\d+-\d+$/.test(String(options.scene))) {
|
||
this.inviteCode = String(options.scene)
|
||
uni.setStorageSync('inviteCode', this.inviteCode)
|
||
}
|
||
|
||
// 判断是否显示返回按钮（从其他页面跳转过来时显示）
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) {
|
||
this.showBack = true
|
||
// 从其他页面跳转过来，说明可能有弹窗需要关闭
|
||
// 延迟一下，确保页面已经加载完成，弹窗会自动关闭
|
||
setTimeout(() => {
|
||
// 尝试隐藏可能存在的弹窗（虽然 uni 没有直接关闭 showModal 的 API）
|
||
// 但页面跳转后，弹窗应该会自动关闭
|
||
}, 100)
|
||
}
|
||
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（兼容不同的响应格式）
|
||
console.log('[登录] 登录接口返回数据:', res)
|
||
const token = res?.accessToken || res?.token || res?.data?.accessToken || res?.data?.token
|
||
if (token) {
|
||
uni.setStorageSync('token', token)
|
||
console.log('[登录] Token 已保存，长度:', token.length)
|
||
// 验证保存是否成功
|
||
const savedToken = uni.getStorageSync('token')
|
||
console.log('[登录] 验证保存的 token:', savedToken ? '成功' : '失败')
|
||
} else {
|
||
console.error('[登录] 未找到 token，返回数据:', res)
|
||
}
|
||
|
||
// 保存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(() => {
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
fail: () => {
|
||
// 如果 switchTab 失败（可能不在 tabBar 页面），使用 reLaunch
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
}, 1500)
|
||
} catch (error) {
|
||
console.error('登录失败:', error)
|
||
// 错误信息已在request中统一处理，这里不需要再次提示
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
},
|
||
|
||
// 切换协议同意状态
|
||
toggleAgreement() {
|
||
this.agreedToTerms = !this.agreedToTerms
|
||
},
|
||
|
||
// 跳转到用户协议
|
||
goToUserAgreement() {
|
||
uni.navigateTo({
|
||
url: '/pages/profileSub/userAgreement'
|
||
})
|
||
},
|
||
|
||
// 跳转到隐私政策
|
||
goToPrivacyPolicy() {
|
||
uni.navigateTo({
|
||
url: '/pages/profileSub/privacyPolicy'
|
||
})
|
||
},
|
||
|
||
// 小程序一键授权手机号登录
|
||
async handleGetPhoneNumber(e) {
|
||
console.log('获取手机号授权结果:', e)
|
||
|
||
// 检查是否同意协议
|
||
if (!this.agreedToTerms) {
|
||
uni.showToast({
|
||
title: '请先阅读并同意用户协议和隐私政策',
|
||
icon: 'none',
|
||
duration: 2000
|
||
})
|
||
return
|
||
}
|
||
|
||
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
||
this.loading = true
|
||
try {
|
||
// 1. 获取微信临时登录code
|
||
const loginRes = await new Promise((resolve, reject) => {
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: resolve,
|
||
fail: reject
|
||
})
|
||
})
|
||
|
||
if (loginRes.errMsg !== 'login:ok') {
|
||
uni.showToast({
|
||
title: '获取登录凭证失败',
|
||
icon: 'none'
|
||
})
|
||
this.loading = false
|
||
return
|
||
}
|
||
|
||
// 2. 调用登录接口
|
||
// 根据接口文档：/app-api/member/auth/weixin-mini-app-login
|
||
// 参数：phoneCode（手机code）、loginCode（登录code）、state（必填，回调用的随机值）、inviteCode（可选）
|
||
// 生成随机 state 值（用于回调）
|
||
const state = this.generateState()
|
||
|
||
const loginParams = {
|
||
phoneCode: e.detail.code, // 手机 code, 通过 wx.getPhoneNumber 获得
|
||
loginCode: loginRes.code, // 登录 code, 通过 wx.login 获得
|
||
state: state, // state 是必填项，用于回调的随机值
|
||
}
|
||
|
||
// 如果有邀请码（例如从页面参数或存储中获取）
|
||
const inviteCode = this.getInviteCode()
|
||
if (inviteCode) {
|
||
loginParams.inviteCode = inviteCode
|
||
}
|
||
|
||
const res = await loginByPhone(loginParams)
|
||
|
||
// 登录成功，保存token
|
||
// 根据接口返回：{ code: 0, data: { accessToken, refreshToken, expiresTime, userId, ... } }
|
||
// request 函数在 code === 0 时返回 res.data.data || res.data，所以 res 就是 data 对象
|
||
console.log('[登录] 登录接口返回数据:', res)
|
||
const token = res?.accessToken || res?.data?.accessToken || res?.token || res?.data?.token
|
||
if (token) {
|
||
uni.setStorageSync('token', token)
|
||
console.log('[登录] Token 已保存，长度:', token.length)
|
||
// 验证保存是否成功
|
||
const savedToken = uni.getStorageSync('token')
|
||
console.log('[登录] 验证保存的 token:', savedToken ? '成功' : '失败')
|
||
} else {
|
||
console.error('[登录] 未找到 token，返回数据:', res)
|
||
}
|
||
|
||
// 保存refreshToken（用于刷新accessToken）
|
||
const refreshToken = res?.refreshToken || res?.data?.refreshToken
|
||
if (refreshToken) {
|
||
uni.setStorageSync('refreshToken', refreshToken)
|
||
console.log('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)
|
||
}
|
||
|
||
// 保存 openid（如果有）
|
||
const openid = res?.openid || res?.data?.openid
|
||
if (openid) {
|
||
uni.setStorageSync('openid', openid)
|
||
}
|
||
|
||
// 登录成功后，调用个人信息接口获取完整用户信息
|
||
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(() => {
|
||
uni.switchTab({
|
||
url: '/pages/index/index',
|
||
fail: () => {
|
||
// 如果 switchTab 失败（可能不在 tabBar 页面），使用 reLaunch
|
||
uni.reLaunch({
|
||
url: '/pages/index/index'
|
||
})
|
||
}
|
||
})
|
||
}, 1500)
|
||
} catch (error) {
|
||
console.error('一键登录失败:', error)
|
||
// 错误信息已在request中统一处理
|
||
} finally {
|
||
this.loading = false
|
||
}
|
||
} else {
|
||
uni.showToast({
|
||
title: '授权失败，请重试',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
|
||
// 生成随机 state 值（用于回调）
|
||
generateState() {
|
||
// 生成 UUID 格式的随机字符串（类似：9b2ffbc1-7425-4155-9894-9d5c08541d62）
|
||
// 格式：xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
|
||
const generateUUID = () => {
|
||
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
|
||
const r = Math.random() * 16 | 0
|
||
const v = c === 'x' ? r : (r & 0x3 | 0x8)
|
||
return v.toString(16)
|
||
})
|
||
}
|
||
|
||
const state = generateUUID()
|
||
|
||
// 保存 state 到本地存储，以便后续回调时使用
|
||
uni.setStorageSync('loginState', state)
|
||
|
||
return state
|
||
},
|
||
|
||
// 获取邀请码
|
||
getInviteCode() {
|
||
// 优先从页面参数获取
|
||
if (this.inviteCode) {
|
||
return this.inviteCode
|
||
}
|
||
// 也可以从本地存储获取
|
||
const storedInviteCode = uni.getStorageSync('inviteCode')
|
||
if (storedInviteCode) {
|
||
return storedInviteCode
|
||
}
|
||
// 也可以从全局变量获取
|
||
const app = getApp()
|
||
if (app && app.globalData && app.globalData.inviteCode) {
|
||
return app.globalData.inviteCode
|
||
}
|
||
return ''
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.login-page {
|
||
min-height: 100vh;
|
||
background: linear-gradient(180deg, #e2e8f1 0%, #ffffff 100%);
|
||
}
|
||
|
||
.header-fixed-wrapper {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 100;
|
||
background: linear-gradient(180deg, #e2e8f1 0%, #ffffff 100%);
|
||
}
|
||
|
||
.main-wrap {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
min-height: 0;
|
||
}
|
||
|
||
.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;
|
||
align-items: center;
|
||
margin-bottom: 120rpx;
|
||
margin-top: 80rpx;
|
||
|
||
.logo {
|
||
width: 306rpx;
|
||
height: 72rpx;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.agreement-section {
|
||
margin-top: 40rpx;
|
||
padding: 0 20rpx;
|
||
|
||
.agreement-checkbox {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
gap: 12rpx;
|
||
|
||
.checkbox-icon {
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
border: 1rpx solid #cccccc;
|
||
border-radius: 4rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0;
|
||
margin-top: 4rpx;
|
||
|
||
&.checked {
|
||
background-color: #004294;
|
||
border-color: #004294;
|
||
|
||
.checkmark {
|
||
color: #ffffff;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.agreement-text {
|
||
font-size: 24rpx;
|
||
color: #666666;
|
||
line-height: 1.6;
|
||
flex: 1;
|
||
|
||
.link-text {
|
||
color: #004294;
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|