This commit is contained in:
@@ -18,6 +18,13 @@ export default {
|
||||
return api.request('/auth/phone-login', 'POST', { phone, code })
|
||||
},
|
||||
|
||||
/**
|
||||
* 账号密码登录
|
||||
*/
|
||||
passwordLogin(username, password) {
|
||||
return api.request('/auth/login', 'POST', { username, password })
|
||||
},
|
||||
|
||||
/**
|
||||
* 微信登录
|
||||
*/
|
||||
|
||||
@@ -20,13 +20,11 @@
|
||||
<view class="form-section">
|
||||
<view class="input-group">
|
||||
<view class="input-wrapper">
|
||||
<text class="input-icon">📱</text>
|
||||
<text class="input-icon">👤</text>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
v-model="phone"
|
||||
placeholder="请输入手机号"
|
||||
maxlength="11"
|
||||
v-model="username"
|
||||
placeholder="请输入用户名"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
</view>
|
||||
@@ -37,28 +35,29 @@
|
||||
<text class="input-icon">🔒</text>
|
||||
<input
|
||||
class="input"
|
||||
type="number"
|
||||
v-model="code"
|
||||
placeholder="请输入验证码"
|
||||
maxlength="6"
|
||||
:password="!showPassword"
|
||||
v-model="password"
|
||||
placeholder="请输入密码"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<view
|
||||
class="code-btn"
|
||||
:class="{ disabled: countdown > 0 }"
|
||||
@click="sendCode"
|
||||
>
|
||||
{{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
|
||||
</view>
|
||||
<text class="eye-icon" @click="showPassword = !showPassword">
|
||||
{{ showPassword ? '👁️' : '👁️🗨️' }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="login-btn-wrapper">
|
||||
<button class="login-btn" @click="phoneLogin">
|
||||
<text>立即登录</text>
|
||||
<button class="login-btn" @click="passwordLogin">
|
||||
<text>账号密码登录</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 微信登录 -->
|
||||
<view class="wechat-login" @click="wechatLogin">
|
||||
<text class="wechat-icon">💬</text>
|
||||
<text class="wechat-text">微信登录</text>
|
||||
</view>
|
||||
|
||||
<view class="agreement">
|
||||
<text class="agreement-text">登录即表示同意</text>
|
||||
<text class="link">《用户协议》</text>
|
||||
@@ -80,45 +79,24 @@ import authApi from '@/api/auth'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
phone: '',
|
||||
code: '',
|
||||
countdown: 0
|
||||
username: '',
|
||||
password: '',
|
||||
showPassword: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async sendCode() {
|
||||
if (!this.phone || this.phone.length !== 11) {
|
||||
uni.showToast({ title: '请输入正确的手机号', icon: 'none' })
|
||||
async passwordLogin() {
|
||||
if (!this.username) {
|
||||
uni.showToast({ title: '请输入用户名', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!this.password) {
|
||||
uni.showToast({ title: '请输入密码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
await authApi.sendCode(this.phone)
|
||||
uni.showToast({ title: '验证码已发送', icon: 'success' })
|
||||
this.countdown = 60
|
||||
const timer = setInterval(() => {
|
||||
this.countdown--
|
||||
if (this.countdown <= 0) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
|
||||
async phoneLogin() {
|
||||
if (!this.phone || this.phone.length !== 11) {
|
||||
uni.showToast({ title: '请输入手机号', icon: 'none' })
|
||||
return
|
||||
}
|
||||
if (!this.code || this.code.length !== 6) {
|
||||
uni.showToast({ title: '请输入验证码', icon: 'none' })
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
const data = await authApi.phoneLogin(this.phone, this.code)
|
||||
const data = await authApi.passwordLogin(this.username, this.password)
|
||||
uni.setStorageSync('token', data.token)
|
||||
uni.setStorageSync('refreshToken', data.refreshToken)
|
||||
uni.setStorageSync('userId', data.userId)
|
||||
@@ -130,6 +108,39 @@ export default {
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
},
|
||||
|
||||
async wechatLogin() {
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.getProvider({
|
||||
service: 'oauth',
|
||||
success: (res) => {
|
||||
if (res.provider.includes('weixin')) {
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async (loginRes) => {
|
||||
try {
|
||||
const data = await authApi.wechatLogin(loginRes.code)
|
||||
uni.setStorageSync('token', data.token)
|
||||
uni.setStorageSync('refreshToken', data.refreshToken)
|
||||
uni.setStorageSync('userId', data.userId)
|
||||
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
setTimeout(() => {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}, 1000)
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
uni.showToast({ title: '请在微信小程序中使用', icon: 'none' })
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -280,18 +291,9 @@ export default {
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
|
||||
.code-btn {
|
||||
padding: 16rpx 24rpx;
|
||||
background: linear-gradient(135deg, #e94560 0%, #ff6b6b 100%);
|
||||
border-radius: 8rpx;
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.code-btn.disabled {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
.eye-icon {
|
||||
font-size: 36rpx;
|
||||
padding: 10rpx;
|
||||
}
|
||||
|
||||
.login-btn-wrapper {
|
||||
@@ -329,6 +331,27 @@ export default {
|
||||
50%, 100% { left: 100%; }
|
||||
}
|
||||
|
||||
/* 微信登录 */
|
||||
.wechat-login {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 40rpx;
|
||||
padding: 20rpx;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
|
||||
.wechat-icon {
|
||||
font-size: 40rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.wechat-text {
|
||||
font-size: 28rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 协议 */
|
||||
.agreement {
|
||||
display: flex;
|
||||
|
||||
Reference in New Issue
Block a user