补充提交

admin/src/views/teacher/teacher copy/index.vue

@@ -43,6 +43,19 @@
                 <el-table-column label="联系电话" prop="contactPhone" min-width="100" />
                 <el-table-column label="联系邮箱" prop="contactEmail" min-width="100" />
                 <el-table-column label="邀请码" prop="invitationCode" min-width="160" />
+                <el-table-column label="二维码" prop="qrcodeUrl" min-width="120">
+                    <template #default="{ row }">
+                        <el-button
+                            v-if="row.qrcodeUrl"
+                            type="primary"
+                            link
+                            @click="handleShowQrCode(row)"
+                        >
+                            查看
+                        </el-button>
+                        <span v-else class="text-info">未生成</span>
+                    </template>
+                </el-table-column>
                 <el-table-column
                     label="教师状态"
                     prop="teacherStatus"
@@ -61,6 +74,14 @@
                         >
                             添加课程
                         </el-button>
+                        <el-button
+                            v-perms="['teacher:edit']"
+                            type="primary"
+                            link
+                            @click="handleGenerateQrCode(row)"
+                        >
+                            生成二维码
+                        </el-button>
                         <el-button
                             v-perms="['teacher:edit']"
                             type="primary"
@@ -91,10 +112,57 @@
             @success="getLists"
             @close="showCourse = false"
         />
+
+        <el-dialog v-model="qrDialog.visible" title="教师二维码" width="420px">
+            <div v-if="qrDialog.loading" class="py-6 text-center text-info">加载中...</div>
+            <div v-else class="flex flex-col items-center gap-3">
+                <el-image
+                    v-if="qrDialog.imageDisplayUrl"
+                    :src="qrDialog.imageDisplayUrl"
+                    fit="contain"
+                    style="width: 280px; height: 280px"
+                />
+                <div v-else-if="qrDialog.qrcodeUrl" class="py-6 text-center text-info">二维码加载失败</div>
+                <div class="w-full">
+                    <div class="text-sm text-info mb-1">邀请码</div>
+                    <div class="flex items-center gap-2">
+                        <el-input v-model="qrDialog.invitationCode" disabled placeholder="暂无" />
+                        <el-button v-copy="qrDialog.invitationCode" :disabled="!qrDialog.invitationCode">
+                            复制
+                        </el-button>
+                    </div>
+                </div>
+                <div class="w-full">
+                    <div class="text-sm text-info mb-1">二维码图片地址</div>
+                    <div class="flex items-center gap-2">
+                        <el-input
+                            v-model="qrDialog.qrcodeUrl"
+                            disabled
+                            placeholder="暂无"
+                        />
+                        <el-button v-copy="qrDialog.qrcodeUrl" :disabled="!qrDialog.qrcodeUrl">
+                            复制
+                        </el-button>
+                    </div>
+                </div>
+            </div>
+            <template #footer>
+                <el-button @click="qrDialog.visible = false">关闭</el-button>
+                <el-button type="primary" :disabled="!qrDialog.qrcodeUrl" @click="downloadQrCodeImage">
+                    下载二维码
+                </el-button>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script lang="ts" setup name="teacher">
-import { teacherDelete, teacherLists } from '@/api/teacher'
+import {
+    teacherDelete,
+    teacherLists,
+    teacherGenerateInvitationCode,
+    teacherGetQrCodeUrl,
+    teacherGetQrCodeImage
+} from '@/api/teacher'
 import { usePaging } from '@/hooks/usePaging'
 import feedback from '@/utils/feedback'
 import { snakeToCamel } from '@/utils/format'
@@ -106,6 +174,15 @@ const courseRef = shallowRef<InstanceType<typeof CoursePopup>>()
 const editRef = shallowRef<InstanceType<typeof EditPopup>>()
 const showEdit = ref(false)
 const showCourse = ref(false)
+const qrDialog = reactive({
+    visible: false,
+    loading: false,
+    teacherId: 0,
+    invitationCode: '',
+    qrcodeUrl: '',
+    /** 用于 el-image 展示的 blob URL（带鉴权拉取），避免直接填 qrcodeUrl 导致加载失败 */
+    imageDisplayUrl: ''
+})
 const queryParams = reactive({
     adminId: '',
     teacherCode: '',
@@ -164,5 +241,91 @@ const handleDelete = async (id: number) => {
     getLists()
 }
 
+/** 释放二维码展示用的 blob URL，避免内存泄漏 */
+const revokeQrDisplayUrl = () => {
+    if (qrDialog.imageDisplayUrl) {
+        window.URL.revokeObjectURL(qrDialog.imageDisplayUrl)
+        qrDialog.imageDisplayUrl = ''
+    }
+}
+
+/** 通过鉴权接口拉取二维码图片并生成用于展示的 blob URL */
+const loadQrCodeImageForDisplay = async () => {
+    revokeQrDisplayUrl()
+    if (!qrDialog.teacherId) return
+    try {
+        const res: any = await teacherGetQrCodeImage({ id: qrDialog.teacherId })
+        const blob = res?.data
+        if (blob && blob instanceof Blob) {
+            qrDialog.imageDisplayUrl = window.URL.createObjectURL(blob)
+        }
+    } catch (_) {
+        // 拉取失败时 imageDisplayUrl 为空，模板会显示「二维码加载失败」
+    }
+}
+
+const downloadQrCodeImage = async () => {
+    if (!qrDialog.teacherId) return
+    try {
+        const res: any = await teacherGetQrCodeImage({ id: qrDialog.teacherId })
+        const blob = res?.data
+        if (!blob || !(blob instanceof Blob)) throw new Error('下载失败')
+        const url = window.URL.createObjectURL(blob)
+
+        const a = document.createElement('a')
+        a.href = url
+        a.download = `teacher_${qrDialog.teacherId || 'qrcode'}.png`
+        document.body.appendChild(a)
+        a.click()
+        a.remove()
+        window.URL.revokeObjectURL(url)
+    } catch (e: any) {
+        feedback.msgError(e?.message || '下载失败')
+    }
+}
+
+/** 统一的「打开弹窗并展示二维码」逻辑，查看与生成都走这里 */
+const openQrCodeDialog = async (payload: {
+    teacherId: number
+    invitationCode?: string
+    qrcodeUrl?: string
+}) => {
+    qrDialog.visible = true
+    qrDialog.loading = true
+    qrDialog.teacherId = payload.teacherId
+    qrDialog.invitationCode = payload.invitationCode ?? ''
+    qrDialog.qrcodeUrl = payload.qrcodeUrl ?? ''
+    try {
+        if (!qrDialog.qrcodeUrl) {
+            const url: any = await teacherGetQrCodeUrl({ id: payload.teacherId })
+            qrDialog.qrcodeUrl = url || ''
+        }
+        await loadQrCodeImageForDisplay()
+    } finally {
+        qrDialog.loading = false
+    }
+}
+
+const handleShowQrCode = (row: any) => {
+    openQrCodeDialog({
+        teacherId: row.teacherId,
+        invitationCode: row.invitationCode ?? row.invitation_code ?? '',
+        qrcodeUrl: row.qrcodeUrl ?? row.qrcode_url ?? ''
+    })
+}
+
+const handleGenerateQrCode = async (row: any) => {
+    await feedback.confirm('确定为该教师生成新的邀请码和二维码？生成后会覆盖原有邀请码。')
+    await teacherGenerateInvitationCode({ id: row.teacherId })
+    await getLists()
+    const updatedRow = pager.lists.find((item: any) => item.teacherId === row.teacherId)
+    if (updatedRow) handleShowQrCode(updatedRow)
+    feedback.msgSuccess('生成成功')
+}
+
+watch(() => qrDialog.visible, (visible) => {
+    if (!visible) revokeQrDisplayUrl()
+})
+
 getLists()
 </script>