导师搜索标签
This commit is contained in:
+42
-17
@@ -15,23 +15,36 @@
|
||||
<div class="mentor-page__subtitle dib">自有合作导师，真实在职身份，全部实名认证</div>
|
||||
</div>
|
||||
</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"/>
|
||||
<path d="M11 11L14 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="mentor-page__search-input"
|
||||
placeholder="搜索导师、公司、服务类型..."
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<!-- 清空按钮：有输入内容时鼠标 hover 搜索框才显示 -->
|
||||
<span
|
||||
v-if="keyword.length > 0"
|
||||
class="mentor-page__search-clear"
|
||||
@click="handleClearKeyword"
|
||||
>✕</span>
|
||||
<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"/>
|
||||
<path d="M11 11L14 14" stroke="currentColor" stroke-width="1.2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<input
|
||||
v-model="keyword"
|
||||
class="mentor-page__search-input"
|
||||
placeholder="搜索导师、公司、服务类型..."
|
||||
@keyup.enter="handleSearch"
|
||||
/>
|
||||
<!-- 清空按钮：有输入内容时鼠标 hover 搜索框才显示 -->
|
||||
<span
|
||||
v-if="keyword.length > 0"
|
||||
class="mentor-page__search-clear"
|
||||
@click="handleClearKeyword"
|
||||
>✕</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -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)
|
||||
|
||||
|
||||
+10
-65
@@ -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"
|
||||
/>
|
||||
<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="api"
|
||||
/>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user