557 lines
12 KiB
Vue
557 lines
12 KiB
Vue
|
<template>
|
|||
|
|
<view class="login-page">
|
|||
|
|
<!-- 页面顶部导航 -->
|
|||
|
|
<view class="page-header">
|
|||
|
|
<view class="back-btn"></view>
|
|||
|
|
<view class="page-title">登录/注册</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 内容区域 -->
|
|||
|
|
<view class="content-area">
|
|||
|
|
<!-- 登录方式选项卡 -->
|
|||
|
|
<view class="tab-container" v-if="false">
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: loginType === 'code' }"
|
|||
|
|
@tap="loginType = 'code'"
|
|||
|
|
>
|
|||
|
|
验证码登录
|
|||
|
|
</view>
|
|||
|
|
<view
|
|||
|
|
class="tab-item"
|
|||
|
|
:class="{ active: loginType === 'password' }"
|
|||
|
|
@tap="loginType = 'password'"
|
|||
|
|
>
|
|||
|
|
密码登录
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 地区提示 -->
|
|||
|
|
<view class="tip-text u-line-1">
|
|||
|
|
您所在地区仅支持 手机号 <!-- / 微信 / Apple 登录 -->
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 验证码登录 -->
|
|||
|
|
<block v-if="loginType === 'code'">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="input-item">
|
|||
|
|
<view class="input-prefix">+86</view>
|
|||
|
|
<u-input
|
|||
|
|
type="number"
|
|||
|
|
v-model="phone"
|
|||
|
|
maxlength="11"
|
|||
|
|
placeholder="手机号"
|
|||
|
|
class="input-field"
|
|||
|
|
border="0"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="input-item code-input-box">
|
|||
|
|
<u-input
|
|||
|
|
type="number"
|
|||
|
|
v-model="code"
|
|||
|
|
maxlength="6"
|
|||
|
|
placeholder="验证码"
|
|||
|
|
class="input-field"
|
|||
|
|
border="0"
|
|||
|
|
/>
|
|||
|
|
<view
|
|||
|
|
class="send-code-btn"
|
|||
|
|
:class="{ disabled: codeSending || !isPhoneValid }"
|
|||
|
|
@tap="sendCode"
|
|||
|
|
>
|
|||
|
|
{{ codeText }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
|
|||
|
|
<!-- 密码登录 -->
|
|||
|
|
<block v-else>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="input-item">
|
|||
|
|
<view class="input-prefix">+86</view>
|
|||
|
|
<u-input
|
|||
|
|
type="number"
|
|||
|
|
v-model="phone"
|
|||
|
|
maxlength="11"
|
|||
|
|
placeholder="手机号"
|
|||
|
|
class="input-field"
|
|||
|
|
border="0"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item">
|
|||
|
|
<view class="input-item">
|
|||
|
|
<u-input
|
|||
|
|
:type="passwordVisible ? 'text' : 'password'"
|
|||
|
|
v-model="password"
|
|||
|
|
placeholder="密码"
|
|||
|
|
class="input-field"
|
|||
|
|
border="0"
|
|||
|
|
/>
|
|||
|
|
<view class="password-icon" @tap="passwordVisible = !passwordVisible">
|
|||
|
|
<u-icon :name="passwordVisible ? 'eye' : 'eye-off'" size="20" color="#999"></u-icon>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</block>
|
|||
|
|
|
|||
|
|
<!-- 用户协议 -->
|
|||
|
|
<view class="agreement-container">
|
|||
|
|
<checkbox-group @change="checkboxChange">
|
|||
|
|
<checkbox :value="agreement" :checked="agreement" class="agreement-checkbox" color="#4080ff" />
|
|||
|
|
</checkbox-group>
|
|||
|
|
<text class="agreement-text">已阅读并同意</text>
|
|||
|
|
<text class="agreement-link" @tap="openAgreement('user')">用户协议</text>
|
|||
|
|
<text class="agreement-text">与</text>
|
|||
|
|
<text class="agreement-link" @tap="openAgreement('privacy')">隐私政策</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 登录按钮 -->
|
|||
|
|
<view
|
|||
|
|
class="login-btn"
|
|||
|
|
:class="{ active: canLogin }"
|
|||
|
|
@tap="handleLogin"
|
|||
|
|
>
|
|||
|
|
登录
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 分隔线 -->
|
|||
|
|
<view class="divider" v-if="false">
|
|||
|
|
<view class="divider-line"></view>
|
|||
|
|
<text class="divider-text">或</text>
|
|||
|
|
<view class="divider-line"></view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 第三方登录 -->
|
|||
|
|
<view class="third-party-login" v-if="false">
|
|||
|
|
<u-button
|
|||
|
|
text="使用微信登录"
|
|||
|
|
:custom-style="{backgroundColor: '#07c160', color: '#ffffff', marginBottom: '15px'}"
|
|||
|
|
shape="circle"
|
|||
|
|
@click="handleThirdLogin('wechat')"
|
|||
|
|
:ripple="true"
|
|||
|
|
>
|
|||
|
|
<template slot="icon">
|
|||
|
|
<u-icon name="weixin-fill" color="#ffffff" size="18" style="margin-right: 5px;"></u-icon>
|
|||
|
|
</template>
|
|||
|
|
</u-button>
|
|||
|
|
|
|||
|
|
<u-button
|
|||
|
|
text="使用 Apple 登录"
|
|||
|
|
:custom-style="{backgroundColor: '#000000', color: '#ffffff'}"
|
|||
|
|
shape="circle"
|
|||
|
|
@click="handleThirdLogin('apple')"
|
|||
|
|
:ripple="true"
|
|||
|
|
>
|
|||
|
|
<template slot="icon">
|
|||
|
|
<u-icon name="apple-fill" color="#ffffff" size="18" style="margin-right: 5px;"></u-icon>
|
|||
|
|
</template>
|
|||
|
|
</u-button>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 联系我们 -->
|
|||
|
|
<view class="contact-us" @tap="contactUs">
|
|||
|
|
联系我们
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// 引入API
|
|||
|
|
import { authApi } from '../../api/modules/auth';
|
|||
|
|
import { hasValidToken, redirectToChat } from '../../api/utils/auth';
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
loginType: 'password', // 默认密码登录
|
|||
|
|
phone: '', // 手机号
|
|||
|
|
code: '', // 验证码
|
|||
|
|
password: '', // 密码
|
|||
|
|
passwordVisible: false, // 密码是否可见
|
|||
|
|
agreement: true, // 是否同意协议
|
|||
|
|
codeSending: false, // 是否正在发送验证码
|
|||
|
|
countdown: 60, // 倒计时
|
|||
|
|
codeText: '发送验证码' // 验证码按钮文本
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 页面加载时检查token
|
|||
|
|
onLoad() {
|
|||
|
|
this.checkTokenStatus();
|
|||
|
|
},
|
|||
|
|
// 页面显示时检查token
|
|||
|
|
onShow() {
|
|||
|
|
this.checkTokenStatus();
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
// 验证手机号是否有效
|
|||
|
|
isPhoneValid() {
|
|||
|
|
return this.phone && this.phone.length === 11;
|
|||
|
|
},
|
|||
|
|
// 验证是否可以登录
|
|||
|
|
canLogin() {
|
|||
|
|
if (!this.phone || !this.agreement) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (this.loginType === 'code') {
|
|||
|
|
return this.isPhoneValid && this.code && this.code.length === 6;
|
|||
|
|
} else {
|
|||
|
|
return this.password && this.password.length >= 6;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 检查token状态
|
|||
|
|
checkTokenStatus() {
|
|||
|
|
// 如果token有效，则跳转到聊天页面
|
|||
|
|
if (hasValidToken()) {
|
|||
|
|
redirectToChat();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 返回上一页
|
|||
|
|
goBack() {
|
|||
|
|
uni.navigateBack();
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 切换登录类型
|
|||
|
|
switchLoginType(type) {
|
|||
|
|
this.loginType = type;
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 发送验证码
|
|||
|
|
sendCode() {
|
|||
|
|
if (this.codeSending || !this.isPhoneValid) return;
|
|||
|
|
|
|||
|
|
this.codeSending = true;
|
|||
|
|
this.countdown = 60;
|
|||
|
|
this.codeText = `${this.countdown}秒后重发`;
|
|||
|
|
|
|||
|
|
// 模拟发送验证码
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '验证码已发送',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const timer = setInterval(() => {
|
|||
|
|
this.countdown--;
|
|||
|
|
this.codeText = `${this.countdown}秒后重发`;
|
|||
|
|
|
|||
|
|
if (this.countdown <= 0) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
this.codeSending = false;
|
|||
|
|
this.codeText = '发送验证码';
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
checkboxChange(){
|
|||
|
|
this.agreement = !this.agreement
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
|
|||
|
|
// 处理登录
|
|||
|
|
async handleLogin() {
|
|||
|
|
// 检查是否同意协议
|
|||
|
|
console.log(this.agreement)
|
|||
|
|
if (!this.agreement) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请阅读并同意用户协议和隐私政策',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 2000
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!this.canLogin) {
|
|||
|
|
// 显示错误原因
|
|||
|
|
if (!this.isPhoneValid) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入正确的手机号',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
} else if (this.loginType === 'code' && (!this.code || this.code.length !== 6)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '请输入6位验证码',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
} else if (this.loginType === 'password' && (!this.password || this.password.length < 6)) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '密码不能少于6位',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '登录中...',
|
|||
|
|
mask: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
// 调用登录API
|
|||
|
|
const loginPassword = this.loginType === 'password' ? this.password : this.code;
|
|||
|
|
const response = await authApi.login(this.phone, loginPassword);
|
|||
|
|
|
|||
|
|
console.log(response);
|
|||
|
|
|
|||
|
|
if (response.code === 200) { // 成功code是200
|
|||
|
|
// 登录成功，缓存token信息
|
|||
|
|
const { token, member, token_expired } = response.data;
|
|||
|
|
|
|||
|
|
// 存储token信息
|
|||
|
|
uni.setStorageSync('token', token);
|
|||
|
|
uni.setStorageSync('member', JSON.stringify(member));
|
|||
|
|
uni.setStorageSync('token_expired', token_expired);
|
|||
|
|
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '登录成功',
|
|||
|
|
icon: 'success'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 登录成功后跳转到对话页面
|
|||
|
|
setTimeout(() => {
|
|||
|
|
redirectToChat();
|
|||
|
|
}, 1500);
|
|||
|
|
} else {
|
|||
|
|
// 登录失败，显示错误信息
|
|||
|
|
uni.showToast({
|
|||
|
|
title: response.msg || '登录失败，请重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.error('登录失败:', err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '网络异常，请稍后重试',
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
} finally {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 第三方登录
|
|||
|
|
handleThirdLogin(platform) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `${platform === 'wechat' ? '微信' : 'Apple'}登录功能暂未实现`,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 打开协议
|
|||
|
|
openAgreement(type) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: `打开${type === 'user' ? '用户协议' : '隐私政策'}`,
|
|||
|
|
icon: 'none'
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 联系我们
|
|||
|
|
contactUs() {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: '联系方式: support@example.com',
|
|||
|
|
icon: 'none',
|
|||
|
|
duration: 3000
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss">
|
|||
|
|
.login-page {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
background-color: #fff;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
padding-top: 40px; /* 为状态栏预留空间 */
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
margin-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.back-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 15px;
|
|||
|
|
width: 30px;
|
|||
|
|
height: 30px;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 18px;
|
|||
|
|
font-weight: bold;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-area {
|
|||
|
|
flex: 1;
|
|||
|
|
padding: 0 30px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-container {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item {
|
|||
|
|
position: relative;
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
color: #666;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item.active {
|
|||
|
|
color: #4080ff;
|
|||
|
|
font-weight: bold;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tab-item.active::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -2px;
|
|||
|
|
left: 25%;
|
|||
|
|
width: 50%;
|
|||
|
|
height: 3px;
|
|||
|
|
background-color: #4080ff;
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip-text {
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #666;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
border-bottom: 1px solid #eee;
|
|||
|
|
padding: 12px 0;
|
|||
|
|
height: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-prefix {
|
|||
|
|
color: #333;
|
|||
|
|
margin-right: 10px;
|
|||
|
|
padding-right: 10px;
|
|||
|
|
border-right: 1px solid #eee;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-field {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 24px;
|
|||
|
|
font-size: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.code-input-box {
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-code-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
background-color: #4080ff;
|
|||
|
|
color: #fff;
|
|||
|
|
padding: 5px 10px;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.send-code-btn.disabled {
|
|||
|
|
background-color: #ccc;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.password-icon {
|
|||
|
|
padding: 0 5px;
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 15px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-checkbox {
|
|||
|
|
transform: scale(0.8);
|
|||
|
|
margin-right: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-text {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-link {
|
|||
|
|
font-size: 13px;
|
|||
|
|
color: #4080ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-btn {
|
|||
|
|
height: 44px;
|
|||
|
|
line-height: 44px;
|
|||
|
|
text-align: center;
|
|||
|
|
background-color: #dddddd;
|
|||
|
|
color: #ffffff;
|
|||
|
|
border-radius: 22px;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
font-size: 16px;
|
|||
|
|
transition: background-color 0.3s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.login-btn.active {
|
|||
|
|
background-color: #4080ff;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider-line {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 1px;
|
|||
|
|
background-color: #eee;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.divider-text {
|
|||
|
|
color: #999;
|
|||
|
|
padding: 0 15px;
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.third-party-login {
|
|||
|
|
margin: 20px 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.contact-us {
|
|||
|
|
text-align: center;
|
|||
|
|
color: #999;
|
|||
|
|
font-size: 14px;
|
|||
|
|
margin-top: 40px;
|
|||
|
|
}
|
|||
|
|
</style>
|