From a4317f2786b537fc7eae36ce14120eb131ab2cfb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=98=BF=E6=A2=A6?= <limeng@apemoon.com>
Date: Thu, 28 May 2026 16:32:41 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5=E5=AE=B6?=
 =?UTF-8?q?=E9=95=BF=E6=A8=A1=E5=BC=8F=E4=BF=AE=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/login.ts                    |  30 ++
 src/pages/login/index.vue           | 435 +++++++++++++++++++++++-----
 src/pages/parent/reports/detail.vue |   8 +-
 src/state/modules/user.ts           |  12 +
 4 files changed, 404 insertions(+), 81 deletions(-)

diff --git a/src/api/login.ts b/src/api/login.ts
index 252761b..0232d37 100644
--- a/src/api/login.ts
+++ b/src/api/login.ts
@@ -22,6 +22,36 @@ 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({
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index 563e75e..fe41fe1 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -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">智能学习助手 · 让学习更轻松</view>
+                <view class="brand-slogan">智能学习助手 · 让学习更轻松1</view>
             </view>
 
             <!-- 角色切换 -->
@@ -24,64 +24,119 @@
                     v-for="item in roleOptions"
                     :key="item.value"
                     :class="['role-tab', { active: role === item.value }]"
-                    @click="role = item.value"
+                    @click="switchRole(item.value)"
                 >
                     <text>{{ item.label }}</text>
                 </view>
             </view>
 
-            <!-- 表单 -->
-            <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>
+            <!-- 表单：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 === '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 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>
-                    <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 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>
-                </view>
+                </block>
             </view>
 
             <view class="agreement">
@@ -92,25 +147,40 @@
             </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>
+            <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>
-            </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 class="hint">
-                <text>登录账号由学校老师统一发放</text>
+                <text v-if="isParentLogin && parentStage === 'authorize'">授权后将自动检测绑定关系</text>
+                <text v-else-if="isParentLogin">未绑定将需要手机号验证绑定</text>
+                <text v-else>登录账号由学校老师统一发放</text>
             </view>
         </view>
     </view>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { computed, onUnmounted, 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';
@@ -118,12 +188,19 @@ 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);
@@ -136,6 +213,63 @@ 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') {
@@ -169,7 +303,7 @@ const getLoginTargetUrl = () => {
         return value.startsWith('/pages/teacher/') ? value : teacherHome;
     }
 
-    if (role.value === 'parent') {
+    if (isParentLogin.value) {
         if (!value) return parentHome;
         if (value === 'parent-home' || value === '/pages/parent') return parentHome;
         return value.startsWith('/pages/parent/') ? value : parentHome;
@@ -180,13 +314,121 @@ const getLoginTargetUrl = () => {
     return value.startsWith('/pages/teacher') || value.startsWith('/pages/parent') ? studentHome : value;
 };
 
-const onLogin = async () => {
-    if (submitting.value) return;
-    if (role.value === 'parent') {
-        setCache('role', 'parent');
-        uni.reLaunch({ url: '/pages/parent/home/index' });
+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;
+        }
+        return;
+    }
+
     if (!account.value.trim()) {
         uni.showToast({ title: '请输入账号', icon: 'none' });
         return;
@@ -221,16 +463,7 @@ const onLogin = async () => {
                     console.warn('teacher.getLoginUser err', e);
                 }
             }
-            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 });
-            }
+            navigateAfterLogin();
         }, 800);
     } catch (e: any) {
         uni.hideLoading();
@@ -457,6 +690,26 @@ 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;
@@ -518,6 +771,36 @@ 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 {
diff --git a/src/pages/parent/reports/detail.vue b/src/pages/parent/reports/detail.vue
index 2811ea5..b03898e 100644
--- a/src/pages/parent/reports/detail.vue
+++ b/src/pages/parent/reports/detail.vue
@@ -285,11 +285,13 @@ const goHome = () => {
 
 <style lang="scss" scoped>
 .detail-page {
+    display: flex;
+    flex-direction: column;
+    gap: 36rpx;
     padding-bottom: calc(144rpx + env(safe-area-inset-bottom));
 }
 
 .hero-card {
-    margin-top: 10rpx;
     background:
         linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(20, 184, 166, 0.08)),
         rgba(255, 255, 255, 0.96);
@@ -365,10 +367,6 @@ const goHome = () => {
     font-weight: 900;
 }
 
-.nav-card,
-.section-card {
-    margin-top: 26rpx;
-}
 
 .tab-row {
     display: grid;
diff --git a/src/state/modules/user.ts b/src/state/modules/user.ts
index ec278f5..fa3a7ac 100644
--- a/src/state/modules/user.ts
+++ b/src/state/modules/user.ts
@@ -3,9 +3,11 @@ 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 {
@@ -88,6 +90,15 @@ 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 {
@@ -111,6 +122,7 @@ export const useUserStore = defineStore('user', () => {
         isLogin,
         gradeId,
         accountLogin,
+        parentLogin,
         fetchUserInfo,
         logout,
         clear,