导师搜索标签

2026-07-09 10:47:14 +08:00
parent ed959e6e6d
commit 38e3957da2
8 changed files with 225 additions and 174 deletions
@@ -53,6 +53,7 @@ declare module 'vue' {
    MemberAccessDialog: typeof import('./src/components/MemberAccessDialog.vue')['default']
    MemberDialog: typeof import('./src/components/MemberDialog.vue')['default']
    MentorAsidePanel: typeof import('./src/components/MentorAsidePanel.vue')['default']
+    MentorQrCodeDialog: typeof import('./src/components/MentorQrCodeDialog.vue')['default']
    ProfileEditDrawer: typeof import('./src/components/ProfileEditDrawer.vue')['default']
    ProfilePageContent: typeof import('./src/components/ProfilePageContent.vue')['default']
    ProfileWelcomeDialog: typeof import('./src/components/ProfileWelcomeDialog.vue')['default']
@@ -243,10 +243,8 @@ export function fetchMentorMockChat(mentorId: string): Promise<MentorMockChatRes
 */
 export function fetchMentorQrCode(teacherId: string): Promise<any> {
  return request.post('/public/mentor/getQrCode', {
-    key: {
    path: 'pages/teacher/teacher',
    teacherId,
    loginAppid: 'wx3adfa65f9d8db17d',
-    },
  })
 }
@@ -63,17 +63,48 @@
    margin-top: 0.02rem;
  }

+  // 推荐搜索标签
+  &__quick-tags {
+    display: flex;
+    align-items: center;
+    gap: 0.08rem;
+    margin-right: 0.16rem;
+    flex-wrap: wrap;
+  }
+
+  &__quick-label {
+    font-size: 0.13rem;
+    color: $text-middle;
+    white-space: nowrap;
+  }
+
+  &__quick-tag {
+    font-size: 0.12rem;
+    color: $accent;
+    border: 0.012rem solid $accent;
+    border-radius: 0.04rem;
+    padding: 0.03rem 0.08rem;
+    cursor: pointer;
+    white-space: nowrap;
+    background: #fff;
+    transition: background 0.15s;
+
+    &:hover {
+      background: #EDF9FA;
+    }
+  }
+
  // 搜索框
  &__search-wrap {
    position: relative;
    display: flex;
    align-items: center;
-    width: 2.8rem;
+    width: 3rem;
    background: $bg-white;
    border: 1px solid $border-color;
-    border-radius: 0.2rem;
+    border-radius: 0.08rem;
    padding: 0 0.12rem;
-    height: 0.36rem;
+    height: 0.32rem;

    &:focus-within {
      border-color: $accent;
@@ -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"
+    <!-- 二维码弹窗组件 -->
+    <MentorQrCodeDialog
+      v-model:visible="showQrDialog"
+      :mentorId="mentorId"
+      :source="mode === 'list' ? 'fixed' : 'api'"
    />
-            <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>

  </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">
@@ -15,6 +15,18 @@
              <div class="mentor-page__subtitle dib">自有合作导师，真实在职身份，全部实名认证</div>
            </div>
          </div>
+          <div class="dflex-end aliite-c flex-warp">
+            <!-- 推荐搜索标签 -->
+            <div class="mentor-page__quick-tags">
+              <span class="mentor-page__quick-label">推荐搜索：</span>
+              <span
+                  v-for="tag in quickSearchTags"
+                  :key="tag"
+                  class="mentor-page__quick-tag"
+                  @click="handleQuickSearch(tag)"
+              >{{ tag }}</span>
+            </div>
+            <!-- 搜索 -->
            <div class="mentor-page__search-wrap">
              <svg class="mentor-page__search-icon" viewBox="0 0 16 16" fill="none">
                <circle cx="7" cy="7" r="5.5" stroke="currentColor" stroke-width="1.2"/>
@@ -34,6 +46,7 @@
              >✕</span>
            </div>
          </div>
+        </div>

        <!-- 行业分类 Tab -->
        <div class="mentor-page__tabs">
@@ -243,6 +256,18 @@ const noMore = ref(false)
 /** 搜索关键词 */
 const keyword = ref('')

+/** 推荐搜索标签列表 */
+const quickSearchTags = ['字节跳动', '百度', '广告投放', 'AI产品', '大模型']
+
+/**
+ * 点击推荐搜索标签 — 直接用标签文字搜索，不显示在输入框中
+ */
+function handleQuickSearch(tag: string) {
+  keyword.value = tag
+  store.commit('SET_MENTOR_LIST_CACHE', null)
+  resetAndLoad()
+}
+
 /** 列表容器 ref */
 const listRef = ref<HTMLElement | null>(null)

@@ -101,42 +101,12 @@
      </div>
    </div>

-    <!-- ==================== 二维码弹窗（遮罩 + 居中卡片） ==================== -->
-    <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"
+    <!-- 二维码弹窗组件 -->
+    <MentorQrCodeDialog
+      v-model:visible="showQrDialog"
+      :mentorId="mentorId"
+      source="api"
    />
-            <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>
  </div>
 </template>

@@ -145,9 +115,10 @@ import { ref, computed, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import SideNav from '@/components/SideNav.vue'
 import MentorAsidePanel from '@/components/MentorAsidePanel.vue'
-import { fetchMentorFullInfo, fetchMentorTalks, fetchMentorQrCode } from '@/api/mentor'
+import { fetchMentorFullInfo, fetchMentorTalks } from '@/api/mentor'
 import type { MentorFullInfo, MentorTalk } from '@/api/mentor'
 import { toOssUrl } from '@/utils/image'
+import MentorQrCodeDialog from '@/components/MentorQrCodeDialog.vue'

 // ==================== 路由相关 ====================

@@ -259,36 +230,10 @@ onMounted(() => {
 /** 弹窗是否显示 */
 const showQrDialog = ref(false)

-/** 二维码图片 base64 */
-const qrCodeBase64 = ref('')
-
-/** 二维码加载状态 */
-const qrLoading = ref(false)
-
 /**
- * 打开二维码弹窗，调接口获取当前导师的小程序二维码
+ * 打开二维码弹窗
 */
-async function openQrDialog() {
+function openQrDialog() {
  showQrDialog.value = true
-  qrLoading.value = true
-  qrCodeBase64.value = ''
-  try {
-    const res: any = await fetchMentorQrCode(mentorId)
-    const base64 = res?.data ?? res
-    if (typeof base64 === 'string' && base64.length > 0) {
-      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>