导师搜索标签

2026-07-09 10:47:14 +08:00
parent ed959e6e6d
commit 38e3957da2
8 changed files with 225 additions and 174 deletions
@@ -169,55 +169,21 @@
      </div>
    </template>

-    <!-- ==================== 二维码弹窗（遮罩 + 居中卡片） ==================== -->
-    <teleport to="body">
-      <div v-if="showQrDialog" class="mentor-qr-overlay" @click.self="closeQrDialog">
-        <div class="mentor-qr-card">
-          <!-- 头部：标题 + 关闭按钮 -->
-          <div class="mentor-qr-card__header">
-            <div class="mentor-qr-card__title-wrap">
-              <div class="mentor-qr-card__title">扫码进入小程序预约导师咨询</div>
-              <div class="mentor-qr-card__desc">查看导师价格、过往评价，并完成预约</div>
-            </div>
-            <!-- 关闭按钮 -->
-            <div class="mentor-qr-card__close" @click="closeQrDialog">
-              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
-                <path d="M18 6L6 18M6 6l12 12" stroke="#6A7282" stroke-width="2" stroke-linecap="round"/>
-              </svg>
-            </div>
-          </div>
-
-          <!-- 二维码展示区域 -->
-          <div class="mentor-qr-card__qr-area">
-            <div v-if="qrLoading" class="mentor-qr-card__loading">
-              <div class="mentor-qr-card__spinner"></div>
-            </div>
-            <img
-              v-else-if="qrCodeBase64"
-              :src="qrCodeBase64"
-              alt="小程序二维码"
-              class="mentor-qr-card__qr-img"
-            />
-            <div v-else class="mentor-qr-card__placeholder">二维码加载失败</div>
-          </div>
-
-          <!-- 底部提示 -->
-          <div class="mentor-qr-card__footer">
-            <div class="mentor-qr-card__footer-text">小程序名称：见识星球 | 大学生求职神器</div>
-          </div>
-        </div>
-      </div>
-    </teleport>
+    <!-- 二维码弹窗组件 -->
+    <MentorQrCodeDialog
+      v-model:visible="showQrDialog"
+      :mentorId="mentorId"
+      :source="mode === 'list' ? 'fixed' : 'api'"
+    />

  </div>
 </template>

 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { fetchMentorMockChat, fetchMentorQrCode } from '@/api/mentor'
+import { fetchMentorMockChat } from '@/api/mentor'
 import type { MentorMockMessage } from '@/api/mentor'
-// 模式一固定二维码图片
-import fixedQrCodeImg from '@/assets/images/mentor/jsxqQrCode-mentors-page.png'
+import MentorQrCodeDialog from '@/components/MentorQrCodeDialog.vue'

 // ==================== Props ====================

@@ -270,51 +236,10 @@ onMounted(() => {
 /** 弹窗是否显示 */
 const showQrDialog = ref(false)

-/** 二维码图片 base64 */
-const qrCodeBase64 = ref('')
-
-/** 二维码加载状态 */
-const qrLoading = ref(false)
-
 /**
 * 打开二维码弹窗
- * 模式一：展示本地固定二维码图片
- * 模式二：请求后端生成导师专属二维码
 */
-async function openQrDialog() {
+function openQrDialog() {
  showQrDialog.value = true
-
-  if (props.mode === 'list') {
-    // 模式一：直接使用本地固定图片
-    qrLoading.value = false
-    qrCodeBase64.value = fixedQrCodeImg
-    return
-  }
-
-  // 模式二：调接口获取 base64 二维码
-  qrLoading.value = true
-  qrCodeBase64.value = ''
-  try {
-    const res: any = await fetchMentorQrCode(props.mentorId)
-    // 返回值为 base64 图片字符串
-    const base64 = res?.data ?? res
-    if (typeof base64 === 'string' && base64.length > 0) {
-      // 如果后端返回的已经包含 data:image 前缀就直接用，否则拼上
-      qrCodeBase64.value = base64.startsWith('data:image')
-        ? base64
-        : `data:image/png;base64,${base64}`
-    }
-  } catch (e) {
-    console.error('[二维码] 获取失败', e)
-  } finally {
-    qrLoading.value = false
-  }
-}
-
-/**
- * 关闭弹窗
- */
-function closeQrDialog() {
-  showQrDialog.value = false
 }
 </script>
@@ -0,0 +1,122 @@
+<template>
+  <!-- 导师小程序二维码弹窗 -->
+  <teleport to="body">
+    <div v-if="visible" class="mentor-qr-overlay" @click.self="close">
+      <div class="mentor-qr-card">
+        <!-- 头部：标题 + 关闭按钮 -->
+        <div class="mentor-qr-card__header">
+          <div class="mentor-qr-card__title-wrap">
+            <div class="mentor-qr-card__title">扫码进入小程序预约导师咨询</div>
+            <div class="mentor-qr-card__desc">查看导师价格、过往评价，并完成预约</div>
+          </div>
+          <!-- 关闭按钮 -->
+          <div class="mentor-qr-card__close" @click="close">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
+              <path d="M18 6L6 18M6 6l12 12" stroke="#6A7282" stroke-width="2" stroke-linecap="round"/>
+            </svg>
+          </div>
+        </div>
+
+        <!-- 二维码展示区域 -->
+        <div class="mentor-qr-card__qr-area">
+          <div v-if="qrLoading" class="mentor-qr-card__loading">
+            <div class="mentor-qr-card__spinner"></div>
+          </div>
+          <img
+            v-else-if="qrImgSrc"
+            :src="qrImgSrc"
+            alt="小程序二维码"
+            class="mentor-qr-card__qr-img"
+          />
+          <div v-else class="mentor-qr-card__placeholder">二维码加载失败</div>
+        </div>
+
+        <!-- 底部提示 -->
+        <div class="mentor-qr-card__footer">
+          <div class="mentor-qr-card__footer-text">小程序名称：见识星球 | 大学生求职神器</div>
+        </div>
+      </div>
+    </div>
+  </teleport>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { fetchMentorQrCode } from '@/api/mentor'
+// 模式一使用的固定二维码图片
+import fixedQrCodeImg from '@/assets/images/mentor/jsxqQrCode-mentors-page.png'
+
+// ==================== Props ====================
+
+const props = withDefaults(defineProps<{
+  /** 是否显示弹窗 */
+  visible: boolean
+  /** 导师ID（模式为api时必传） */
+  mentorId?: string
+  /** 二维码来源模式：fixed=本地固定图 / api=接口获取 */
+  source?: 'fixed' | 'api'
+}>(), {
+  visible: false,
+  mentorId: '',
+  source: 'api',
+})
+
+// ==================== Emits ====================
+
+const emit = defineEmits<{
+  (e: 'update:visible', value: boolean): void
+}>()
+
+// ==================== 状态 ====================
+
+/** 二维码图片地址 */
+const qrImgSrc = ref('')
+
+/** 加载状态 */
+const qrLoading = ref(false)
+
+// ==================== 方法 ====================
+
+/** 关闭弹窗 */
+function close() {
+  emit('update:visible', false)
+}
+
+/**
+ * 加载二维码
+ * fixed 模式直接用本地图片，api 模式调接口
+ */
+async function loadQrCode() {
+  if (props.source === 'fixed') {
+    qrLoading.value = false
+    qrImgSrc.value = fixedQrCodeImg
+    return
+  }
+
+  // api 模式：请求后端生成导师专属二维码
+  qrLoading.value = true
+  qrImgSrc.value = ''
+  try {
+    const res: any = await fetchMentorQrCode(props.mentorId)
+    // 返回结构：{ code: "0", data: { code: "data:image/png;base64,..." } }
+    const base64 = res?.data?.code ?? res?.code ?? ''
+    if (typeof base64 === 'string' && base64.length > 0) {
+      qrImgSrc.value = base64.startsWith('data:image')
+        ? base64
+        : `data:image/png;base64,${base64}`
+    }
+  } catch (e) {
+    console.error('[二维码] 获取失败', e)
+  } finally {
+    qrLoading.value = false
+  }
+}
+
+// ==================== 监听弹窗打开时加载 ====================
+
+watch(() => props.visible, (val) => {
+  if (val) {
+    loadQrCode()
+  }
+})
+</script>
@@ -77,6 +77,10 @@
          <div class="side-nav__account-popup-item" @click="handleAccountLogout">退出登录</div>
        </div>

+
+
+
+
        <!-- 用户信息卡片（点击弹出/关闭账户弹窗） -->
        <div class="side-nav__user-info" :class="{ 'side-nav__user-info--active': showAccountPopup }" @click.stop="showAccountPopup = !showAccountPopup">
          <div class="side-nav__user-left">