diff --git a/src/api/auth.js b/src/api/auth.js index 8fd7bdf..6f02ef1 100644 --- a/src/api/auth.js +++ b/src/api/auth.js @@ -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 }) + }, + /** * 微信登录 */ diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue index 9fe15be..89d4a7d 100644 --- a/src/pages/login/index.vue +++ b/src/pages/login/index.vue @@ -20,13 +20,11 @@ - 📱 + 👤 @@ -37,27 +35,28 @@ 🔒 - - {{ countdown > 0 ? `${countdown}s` : '获取验证码' }} - + + {{ showPassword ? '👁️' : '👁️‍🗨️' }} + - + + + + 💬 + 微信登录 + 登录即表示同意 @@ -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 } - - 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' }) + if (!this.password) { + 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;