Compare commits

..

No commits in common. "d13f75ddc04e90656e4789d6c815098e1dae4055" and "d6fcff461e2ac6881905af194a38315cc2acd566" have entirely different histories.

3 changed files with 74 additions and 399 deletions

View File

@ -22,36 +22,6 @@ export const psdLogin = (data: AccountLoginParams) =>
},
});
export interface ParentSmsLoginParams {
mobile: string;
smsCode: string;
}
/** 家长端 - 发送登录验证码 */
export const sendParentLoginCode = (mobile: string) =>
request({
url: '/parent/sendLoginCode',
method: 'POST',
headers: { Authorization: '' },
silent: true,
data: { mobile },
});
/** 家长端 - 手机号验证码登录 */
export const parentSmsLogin = (data: ParentSmsLoginParams) =>
request<string>({
url: '/parent/loginBySms',
method: 'POST',
headers: { Authorization: '' },
data: {
mobile: data.mobile,
smsCode: data.smsCode,
clientType: 'PARENT',
simSerialNumber: 'miniProgram',
model: 'wechat',
},
});
/** 退出登录 */
export const logout = () =>
request({

View File

@ -14,7 +14,7 @@
<image :src="logoUrl" mode="aspectFit" class="brand-logo-img" />
</view>
<view class="brand-name">学小乐<text class="brand-name-ai">AI</text></view>
<view class="brand-slogan">智能学习助手 · 让学习更轻松1</view>
<view class="brand-slogan">智能学习助手 · 让学习更轻松</view>
</view>
<!-- 角色切换 -->
@ -24,119 +24,64 @@
v-for="item in roleOptions"
:key="item.value"
:class="['role-tab', { active: role === item.value }]"
@click="switchRole(item.value)"
@click="role = item.value"
>
<text>{{ item.label }}</text>
</view>
</view>
<!-- 表单key 确保切换角色时微信小程序重新渲染 -->
<view class="form" :key="role">
<block v-if="isParentLogin">
<block v-if="parentStage === 'bind'">
<view class="form-item" :class="{ focus: focus === 'phone' }">
<view class="form-icon">
<svg viewBox="0 0 24 24" fill="none">
<rect x="6" y="3" width="12" height="18" rx="2.5" stroke="#0891B2" stroke-width="1.6" />
<path d="M10 18h4" stroke="#0891B2" stroke-width="1.6" stroke-linecap="round" />
</svg>
</view>
<input
v-model="phone"
class="form-input"
type="number"
maxlength="11"
placeholder="请输入手机号"
placeholder-class="form-placeholder"
:adjust-position="false"
@focus="focus = 'phone'"
@blur="focus = ''"
@confirm="onLogin"
/>
</view>
<view class="form-item" :class="{ focus: focus === 'code' }">
<view class="form-icon">
<svg viewBox="0 0 24 24" fill="none">
<rect x="4" y="9" width="16" height="12" rx="2" stroke="#0891B2" stroke-width="1.6" />
<path d="M8 9V7a4 4 0 1 1 8 0v2" stroke="#0891B2" stroke-width="1.6" />
</svg>
</view>
<input
v-model="smsCode"
class="form-input"
type="number"
maxlength="6"
placeholder="请输入验证码"
placeholder-class="form-placeholder"
:adjust-position="false"
@focus="focus = 'code'"
@blur="focus = ''"
@confirm="onLogin"
/>
<view
class="sms-btn"
:class="{ disabled: smsCountdown > 0 || sendingCode }"
@click="onSendCode"
>
<text>{{ smsBtnText }}</text>
</view>
</view>
</block>
</block>
<block v-else>
<view class="form-item" :class="{ focus: focus === 'account' }">
<view class="form-icon">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="8" r="4" stroke="#4F46E5" stroke-width="1.6" />
<path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke="#4F46E5" stroke-width="1.6"
stroke-linecap="round" />
</svg>
</view>
<input
v-model="account"
class="form-input"
placeholder="请输入账号"
placeholder-class="form-placeholder"
:adjust-position="false"
@focus="focus = 'account'"
@blur="focus = ''"
@confirm="onLogin"
/>
<!-- 表单 -->
<view class="form">
<view class="form-item" :class="{ focus: focus === 'account' }">
<view class="form-icon">
<svg viewBox="0 0 24 24" fill="none">
<circle cx="12" cy="8" r="4" stroke="#4F46E5" stroke-width="1.6" />
<path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8" stroke="#4F46E5" stroke-width="1.6"
stroke-linecap="round" />
</svg>
</view>
<input
v-model="account"
class="form-input"
placeholder="请输入账号"
placeholder-class="form-placeholder"
:adjust-position="false"
@focus="focus = 'account'"
@blur="focus = ''"
@confirm="onLogin"
/>
</view>
<view class="form-item" :class="{ focus: focus === 'password' }">
<view class="form-icon">
<svg viewBox="0 0 24 24" fill="none">
<rect x="4" y="11" width="16" height="9" rx="2" stroke="#4F46E5" stroke-width="1.6" />
<path d="M8 11V8a4 4 0 0 1 8 0v3" stroke="#4F46E5" stroke-width="1.6" />
</svg>
</view>
<input
v-model="password"
class="form-input"
:password="hidePassword"
placeholder="请输入密码"
placeholder-class="form-placeholder"
:adjust-position="false"
@focus="focus = 'password'"
@blur="focus = ''"
@confirm="onLogin"
/>
<view class="form-eye" @click="hidePassword = !hidePassword">
<svg v-if="hidePassword" viewBox="0 0 24 24" fill="none">
<path d="m2 2 20 20M10 5c.7-.1 1.3-.1 2-.1 7 0 10 7 10 7-.6 1.4-1.5 2.6-2.5 3.6M6.6 6.6C3.5 8.6 2 12 2 12s3 7 10 7c1.4 0 2.6-.3 3.7-.7"
stroke="#94A3B8" stroke-width="1.6" stroke-linecap="round" />
</svg>
<svg v-else viewBox="0 0 24 24" fill="none">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" stroke="#4F46E5"
stroke-width="1.6" />
<circle cx="12" cy="12" r="3" stroke="#4F46E5" stroke-width="1.6" />
</svg>
</view>
<view class="form-item" :class="{ focus: focus === 'password' }">
<view class="form-icon">
<svg viewBox="0 0 24 24" fill="none">
<rect x="4" y="11" width="16" height="9" rx="2" stroke="#4F46E5" stroke-width="1.6" />
<path d="M8 11V8a4 4 0 0 1 8 0v3" stroke="#4F46E5" stroke-width="1.6" />
</svg>
</view>
</block>
<input
v-model="password"
class="form-input"
:password="hidePassword"
placeholder="请输入密码"
placeholder-class="form-placeholder"
:adjust-position="false"
@focus="focus = 'password'"
@blur="focus = ''"
@confirm="onLogin"
/>
<view class="form-eye" @click="hidePassword = !hidePassword">
<svg v-if="hidePassword" viewBox="0 0 24 24" fill="none">
<path d="m2 2 20 20M10 5c.7-.1 1.3-.1 2-.1 7 0 10 7 10 7-.6 1.4-1.5 2.6-2.5 3.6M6.6 6.6C3.5 8.6 2 12 2 12s3 7 10 7c1.4 0 2.6-.3 3.7-.7"
stroke="#94A3B8" stroke-width="1.6" stroke-linecap="round" />
</svg>
<svg v-else viewBox="0 0 24 24" fill="none">
<path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z" stroke="#4F46E5"
stroke-width="1.6" />
<circle cx="12" cy="12" r="3" stroke="#4F46E5" stroke-width="1.6" />
</svg>
</view>
</view>
</view>
<view class="agreement">
@ -147,40 +92,25 @@
</view>
<!-- 登录按钮 -->
<block v-if="isParentLogin && parentStage === 'authorize'">
<view :class="['btn-login', 'btn-wx', { loading: submitting }]" @click="onParentAuthorize">
<text v-if="!submitting"> </text>
<view v-else class="btn-loader">
<view class="btn-loader-dot"></view>
<view class="btn-loader-dot"></view>
<view class="btn-loader-dot"></view>
</view>
<view :class="['btn-login', { loading: submitting }]" @click="onLogin">
<text v-if="!submitting"> </text>
<view v-else class="btn-loader">
<view class="btn-loader-dot"></view>
<view class="btn-loader-dot"></view>
<view class="btn-loader-dot"></view>
</view>
</block>
<block v-else>
<view :class="['btn-login', { loading: submitting, parent: isParentLogin }]" @click="onLogin">
<text v-if="!submitting">{{ isParentLogin ? ' ' : ' ' }}</text>
<view v-else class="btn-loader">
<view class="btn-loader-dot"></view>
<view class="btn-loader-dot"></view>
<view class="btn-loader-dot"></view>
</view>
</view>
</block>
</view>
<view class="hint">
<text v-if="isParentLogin && parentStage === 'authorize'">授权后将自动检测绑定关系</text>
<text v-else-if="isParentLogin">未绑定将需要手机号验证绑定</text>
<text v-else>登录账号由学校老师统一发放</text>
<text>登录账号由学校老师统一发放</text>
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { computed, onUnmounted, ref } from 'vue';
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { sendParentLoginCode } from '@/api/login';
import { useUserStore } from '@/state/modules/user';
import { useTeacherStore } from '@/state/modules/teacher';
import { setCache, getCache } from '@/utils/cache';
@ -188,19 +118,12 @@ import { setCache, getCache } from '@/utils/cache';
const OSS_URL = 'https://xxl-1313840333.cos.ap-guangzhou.myqcloud.com';
const logoUrl = `${OSS_URL}/urm/logo.png`;
const PHONE_REG = /^1[3-9]\d{9}$/;
const account = ref('');
const password = ref('');
const phone = ref('');
const smsCode = ref('');
const hidePassword = ref(true);
const redirect = ref('');
const submitting = ref(false);
const sendingCode = ref(false);
const smsCountdown = ref(0);
const focus = ref<string>('');
let smsTimer: ReturnType<typeof setInterval> | null = null;
type LoginRole = 'student' | 'teacher' | 'parent';
const role = ref<LoginRole>('student');
const enterDebug = ref(0);
@ -213,63 +136,6 @@ const roleOptions: { value: LoginRole; label: string }[] = [
const userStore = useUserStore();
const teacherStore = useTeacherStore();
const isParentLogin = computed(() => role.value === 'parent');
type ParentStage = 'authorize' | 'bind';
const parentStage = ref<ParentStage>('authorize');
const MOCK_PARENT_WX_BOUND = false;
const smsBtnText = computed(() => {
if (smsCountdown.value > 0) return `${smsCountdown.value}s`;
return '获取验证码';
});
const switchRole = (value: LoginRole) => {
if (role.value === value) return;
role.value = value;
focus.value = '';
if (value === 'parent') {
parentStage.value = 'authorize';
phone.value = '';
smsCode.value = '';
smsCountdown.value = 0;
sendingCode.value = false;
if (smsTimer) {
clearInterval(smsTimer);
smsTimer = null;
}
}
};
const isValidPhone = (value: string) => PHONE_REG.test(value.trim());
const startSmsCountdown = (seconds = 60) => {
if (smsTimer) {
clearInterval(smsTimer);
smsTimer = null;
}
smsCountdown.value = seconds;
smsTimer = setInterval(() => {
if (smsCountdown.value <= 1) {
smsCountdown.value = 0;
if (smsTimer) {
clearInterval(smsTimer);
smsTimer = null;
}
return;
}
smsCountdown.value -= 1;
}, 1000);
};
onUnmounted(() => {
if (smsTimer) {
clearInterval(smsTimer);
smsTimer = null;
}
});
onLoad((options: any) => {
const cachedRole = getCache('role');
if (cachedRole === 'teacher' || cachedRole === 'student' || cachedRole === 'parent') {
@ -303,7 +169,7 @@ const getLoginTargetUrl = () => {
return value.startsWith('/pages/teacher/') ? value : teacherHome;
}
if (isParentLogin.value) {
if (role.value === 'parent') {
if (!value) return parentHome;
if (value === 'parent-home' || value === '/pages/parent') return parentHome;
return value.startsWith('/pages/parent/') ? value : parentHome;
@ -314,121 +180,13 @@ const getLoginTargetUrl = () => {
return value.startsWith('/pages/teacher') || value.startsWith('/pages/parent') ? studentHome : value;
};
const onSendCode = async () => {
if (smsCountdown.value > 0 || sendingCode.value) return;
const mobile = phone.value.trim();
if (!isValidPhone(mobile)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return;
}
sendingCode.value = true;
try {
await sendParentLoginCode(mobile);
uni.showToast({ title: '验证码已发送', icon: 'none' });
startSmsCountdown();
} catch (e: any) {
uni.showToast({ title: e?.message || '发送失败', icon: 'none' });
} finally {
sendingCode.value = false;
}
};
const checkParentBoundByWxCode = async (_code: string): Promise<{ bound: boolean }> => {
await new Promise((resolve) => setTimeout(resolve, 350));
return { bound: MOCK_PARENT_WX_BOUND };
};
const onParentAuthorize = async () => {
if (submitting.value) return;
submitting.value = true;
uni.showLoading({ title: '授权中...', mask: true });
try {
const loginRes = await new Promise<UniApp.LoginRes>((resolve, reject) => {
uni.login({
provider: 'weixin',
success: (res) => resolve(res),
fail: (err) => reject(err),
});
});
const code = loginRes?.code || '';
if (!code) {
uni.hideLoading();
uni.showToast({ title: '获取微信 code 失败', icon: 'none' });
return;
}
const { bound } = await checkParentBoundByWxCode(code);
if (bound) {
setCache('role', 'parent');
uni.hideLoading();
uni.showToast({ title: '登录成功', icon: 'success' });
setTimeout(() => navigateAfterLogin(), 800);
return;
}
parentStage.value = 'bind';
uni.hideLoading();
uni.showToast({ title: '请先绑定手机号', icon: 'none' });
} catch (e: any) {
uni.hideLoading();
uni.showToast({ title: e?.message || '授权失败', icon: 'none' });
} finally {
submitting.value = false;
}
};
const navigateAfterLogin = () => {
const targetUrl = getLoginTargetUrl();
if (
targetUrl === '/pages/index/index'
|| targetUrl === '/pages/teacher/index/index'
|| targetUrl === '/pages/parent/home/index'
) {
uni.reLaunch({ url: targetUrl });
} else {
uni.redirectTo({ url: targetUrl });
}
};
const onLogin = async () => {
if (submitting.value) return;
if (isParentLogin.value) {
if (parentStage.value === 'authorize') {
await onParentAuthorize();
return;
}
const mobile = phone.value.trim();
const code = smsCode.value.trim();
if (!isValidPhone(mobile)) {
uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
return;
}
if (!code) {
uni.showToast({ title: '请输入验证码', icon: 'none' });
return;
}
submitting.value = true;
uni.showLoading({ title: '登录中...', mask: true });
try {
await userStore.parentLogin({ mobile, smsCode: code });
uni.hideLoading();
uni.showToast({ title: '登录成功', icon: 'success' });
setTimeout(() => navigateAfterLogin(), 800);
} catch (e: any) {
uni.hideLoading();
uni.showToast({ title: e?.message || '登录失败', icon: 'none' });
} finally {
submitting.value = false;
}
if (role.value === 'parent') {
setCache('role', 'parent');
uni.reLaunch({ url: '/pages/parent/home/index' });
return;
}
if (!account.value.trim()) {
uni.showToast({ title: '请输入账号', icon: 'none' });
return;
@ -463,7 +221,16 @@ const onLogin = async () => {
console.warn('teacher.getLoginUser err', e);
}
}
navigateAfterLogin();
const targetUrl = getLoginTargetUrl();
if (
targetUrl === '/pages/index/index'
|| targetUrl === '/pages/teacher/index/index'
|| targetUrl === '/pages/parent/home/index'
) {
uni.reLaunch({ url: targetUrl });
} else {
uni.redirectTo({ url: targetUrl });
}
}, 800);
} catch (e: any) {
uni.hideLoading();
@ -690,26 +457,6 @@ const onLogin = async () => {
font-size: 28rpx;
}
.sms-btn {
flex-shrink: 0;
min-width: 168rpx;
height: 64rpx;
padding: 0 20rpx;
border-radius: 18rpx;
display: flex;
align-items: center;
justify-content: center;
color: #0891b2;
background: #ecfeff;
font-size: 24rpx;
font-weight: 700;
&.disabled {
color: #94a3b8;
background: #f1f5f9;
}
}
.form-eye {
width: 56rpx;
height: 56rpx;
@ -771,36 +518,6 @@ const onLogin = async () => {
&.loading {
opacity: 0.85;
}
&.parent {
background: linear-gradient(180deg, #22d3ee 0%, #0891b2 100%);
box-shadow:
0 12rpx 28rpx rgba(8, 145, 178, 0.4),
inset 0 -6rpx 0 rgba(0, 0, 0, 0.15),
inset 0 4rpx 0 rgba(255, 255, 255, 0.2);
&:active {
box-shadow:
0 4rpx 12rpx rgba(8, 145, 178, 0.4),
inset 0 -3rpx 0 rgba(0, 0, 0, 0.15),
inset 0 4rpx 0 rgba(255, 255, 255, 0.2);
}
}
}
.btn-wx {
background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%);
box-shadow:
0 12rpx 28rpx rgba(22, 163, 74, 0.4),
inset 0 -6rpx 0 rgba(0, 0, 0, 0.15),
inset 0 4rpx 0 rgba(255, 255, 255, 0.2);
&:active {
box-shadow:
0 4rpx 12rpx rgba(22, 163, 74, 0.4),
inset 0 -3rpx 0 rgba(0, 0, 0, 0.15),
inset 0 4rpx 0 rgba(255, 255, 255, 0.2);
}
}
.btn-loader {

View File

@ -3,11 +3,9 @@ import { ref, computed } from 'vue';
import { setCache, getCache, removeCache } from '@/utils/cache';
import {
psdLogin as psdLoginApi,
parentSmsLogin as parentSmsLoginApi,
getUserInfo as getUserInfoApi,
logout as logoutApi,
type AccountLoginParams,
type ParentSmsLoginParams,
} from '@/api/login';
export interface UserInfo {
@ -90,15 +88,6 @@ export const useUserStore = defineStore('user', () => {
await fetchUserInfo();
};
/** 家长端 - 手机号验证码登录 */
const parentLogin = async (data: ParentSmsLoginParams) => {
await clear();
const res = await parentSmsLoginApi(data);
token.value = res.data;
setCache('token', res.data);
setCache('role', 'parent');
};
/** 退出登录 */
const logout = async () => {
try {
@ -122,7 +111,6 @@ export const useUserStore = defineStore('user', () => {
isLogin,
gradeId,
accountLogin,
parentLogin,
fetchUserInfo,
logout,
clear,