offerpai/offerpai_web
7
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

导师列表导师详情右侧广告，去投递弹窗等

Browse Source
This commit is contained in:
xuxin
2026-07-08 22:48:58 +08:00
parent c94a96d14e
commit f0b29d9abb
13 changed files with 1504 additions and 209 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/MentorAsidePanel.vue
+320
View File
@@ -0,0 +1,320 @@
<template>
<!-- 导师页右侧广告面板：模式一（列表页）/ 模式二（详情页） -->
<div class="mentor-aside-panel">
<!-- ==================== 模式一：导师列表页展示 ==================== -->
<template v-if="mode === 'list'">
<!-- 顶部渐变区域：标题 + 副标题 -->
<div class="mentor-aside-panel__header">
<div class="mentor-aside-panel__title">和真实职场导师聊聊</div>
<div class="mentor-aside-panel__subtitle">让职业选择更清晰</div>
</div>
<!-- 统计数字区域 -->
<div class="mentor-aside-panel__stats">
<div class="mentor-aside-panel__stat-item">
<span class="mentor-aside-panel__stat-num">3000+</span>
<span class="mentor-aside-panel__stat-label">名企导师</span>
</div>
<div class="mentor-aside-panel__stat-divider"></div>
<div class="mentor-aside-panel__stat-item">
<span class="mentor-aside-panel__stat-num">5000+</span>
<span class="mentor-aside-panel__stat-label">服务学员</span>
</div>
</div>
<!-- 为什么选择我们的导师？ -->
<div class="mentor-aside-panel__reasons">
<div class="mentor-aside-panel__section-title">
<span class="mentor-aside-panel__section-icon">✦</span>
<span class="mentor-aside-panel__section-text">为什么选择我们的导师？</span>
</div>
<div class="mentor-aside-panel__reason-list">
<!-- 真实在职导师 -->
<div class="mentor-aside-panel__reason-item">
<div class="mentor-aside-panel__reason-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 12C14.21 12 16 10.21 16 8C16 5.79 14.21 4 12 4C9.79 4 8 5.79 8 8C8 10.21 9.79 12 12 12ZM12 14C9.33 14 4 15.34 4 18V20H20V18C20 15.34 14.67 14 12 14Z" fill="#52CAD1"/>
</svg>
</div>
<div class="mentor-aside-panel__reason-info">
<div class="mentor-aside-panel__reason-title">真实在职导师</div>
<div class="mentor-aside-panel__reason-desc">信息真实，经验更落地</div>
</div>
</div>
<!-- 名企背景严选 -->
<div class="mentor-aside-panel__reason-item">
<div class="mentor-aside-panel__reason-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 2L4 6V12C4 16.42 7.44 20.74 12 22C16.56 20.74 20 16.42 20 12V6L12 2Z" fill="#52CAD1"/>
</svg>
</div>
<div class="mentor-aside-panel__reason-info">
<div class="mentor-aside-panel__reason-title">名企背景严选</div>
<div class="mentor-aside-panel__reason-desc">覆盖大厂、外企、央国企等类型</div>
</div>
</div>
<!-- 企业一线视角 -->
<div class="mentor-aside-panel__reason-item">
<div class="mentor-aside-panel__reason-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M20 6H16V4C16 2.89 15.11 2 14 2H10C8.89 2 8 2.89 8 4V6H4C2.89 6 2 6.89 2 8V19C2 20.11 2.89 21 4 21H20C21.11 21 22 20.11 22 19V8C22 6.89 21.11 6 20 6ZM10 4H14V6H10V4Z" fill="#52CAD1"/>
</svg>
</div>
<div class="mentor-aside-panel__reason-info">
<div class="mentor-aside-panel__reason-title">企业一线视角</div>
<div class="mentor-aside-panel__reason-desc">不讲空话，只讲真实经验</div>
</div>
</div>
<!-- 个性化辅导方案 -->
<div class="mentor-aside-panel__reason-item">
<div class="mentor-aside-panel__reason-icon">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none">
<path d="M12 3L1 9L5 11.18V17.18L12 21L19 17.18V11.18L21 10.09V17H23V9L12 3ZM18.82 9L12 12.72L5.18 9L12 5.28L18.82 9ZM17 15.99L12 18.72L7 15.99V12.27L12 15L17 12.27V15.99Z" fill="#52CAD1"/>
</svg>
</div>
<div class="mentor-aside-panel__reason-info">
<div class="mentor-aside-panel__reason-title">个性化辅导方案</div>
<div class="mentor-aside-panel__reason-desc">针对不同需求，量身定制学习路径</div>
</div>
</div>
</div>
</div>
<!-- 热门导师方向 -->
<div class="mentor-aside-panel__directions">
<div class="mentor-aside-panel__section-title">
<span class="mentor-aside-panel__section-icon">✦</span>
<span class="mentor-aside-panel__section-text">热门导师方向</span>
</div>
<div class="mentor-aside-panel__direction-list">
<div class="mentor-aside-panel__direction-card">
<div class="mentor-aside-panel__direction-name">互联网产品导师</div>
<div class="mentor-aside-panel__direction-tags">
<span class="mentor-aside-panel__direction-tag">需求分析</span>
<span class="mentor-aside-panel__direction-tag">PRD撰写</span>
<span class="mentor-aside-panel__direction-tag">产品设计</span>
</div>
</div>
<div class="mentor-aside-panel__direction-card">
<div class="mentor-aside-panel__direction-name">金融/财务导师</div>
<div class="mentor-aside-panel__direction-tags">
<span class="mentor-aside-panel__direction-tag">财务分析</span>
<span class="mentor-aside-panel__direction-tag">估值建模</span>
<span class="mentor-aside-panel__direction-tag">行业研究</span>
</div>
</div>
<div class="mentor-aside-panel__direction-card">
<div class="mentor-aside-panel__direction-name">数据分析导师</div>
<div class="mentor-aside-panel__direction-tags">
<span class="mentor-aside-panel__direction-tag">数据收集</span>
<span class="mentor-aside-panel__direction-tag">分析报告</span>
<span class="mentor-aside-panel__direction-tag">指标监测</span>
</div>
</div>
<div class="mentor-aside-panel__direction-card">
<div class="mentor-aside-panel__direction-name">市场营销导师</div>
<div class="mentor-aside-panel__direction-tags">
<span class="mentor-aside-panel__direction-tag">市场调研</span>
<span class="mentor-aside-panel__direction-tag">品牌策略</span>
<span class="mentor-aside-panel__direction-tag">推广活动</span>
</div>
</div>
</div>
</div>
<!-- 底部按钮 + 提示文字 -->
<div class="mentor-aside-panel__footer">
<button class="mentor-aside-panel__cta-btn" @click="openQrDialog">预约导师咨询</button>
<div class="mentor-aside-panel__footer-tip">已有5000+学员获得帮助</div>
</div>
</template>
<!-- ==================== 模式二：导师详情页 — 辅导场景预览 ==================== -->
<template v-if="mode === 'detail'">
<!-- 顶部渐变区域 -->
<div class="mentor-aside-panel__header">
<div class="mentor-aside-panel__title">辅导场景预览</div>
<div class="mentor-aside-panel__subtitle">看看这位导师能如何帮到你</div>
</div>
<!-- 模拟对话区域 -->
<div class="mentor-aside-panel__chat">
<!-- 加载中 -->
<div v-if="chatLoading" class="mentor-aside-panel__chat-loading">
<div class="mentor-aside-panel__chat-spinner"></div>
<span>正在生成对话预览...</span>
</div>
<!-- 对话消息列表 -->
<template v-else>
<div
v-for="(msg, index) in chatMessages"
:key="index"
class="mentor-aside-panel__chat-bubble"
:class="{
'mentor-aside-panel__chat-bubble--user': msg.role === 'user',
'mentor-aside-panel__chat-bubble--mentor': msg.role === 'mentor'
}"
>
<span class="mentor-aside-panel__chat-text">{{ msg.content }}</span>
</div>
</template>
</div>
<!-- 底部按钮 + 提示文字 -->
<div class="mentor-aside-panel__footer">
<button class="mentor-aside-panel__cta-btn" @click="openQrDialog">立即咨询导师</button>
<div class="mentor-aside-panel__footer-tip">对话内容根据导师服务类型与行业背景动态生成</div>
</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>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { fetchMentorMockChat, fetchMentorQrCode } from '@/api/mentor'
import type { MentorMockMessage } from '@/api/mentor'
// 模式一固定二维码图片
import fixedQrCodeImg from '@/assets/images/mentor/jsxqQrCode-mentors-page.png'
// ==================== Props ====================
const props = withDefaults(defineProps<{
/** 显示模式：list=列表页，detail=详情页 */
mode?: 'list' | 'detail'
/** 导师ID（模式二需要，用于请求模拟对话） */
mentorId?: string
}>(), {
mode: 'list',
mentorId: '',
})
// ==================== 模式二：模拟对话数据 ====================
/** 对话消息列表 */
const chatMessages = ref<MentorMockMessage[]>([])
/** 对话加载状态 */
const chatLoading = ref(false)
/**
* 加载导师模拟对话
*/
async function loadMockChat() {
if (!props.mentorId) return
chatLoading.value = true
try {
const res: any = await fetchMentorMockChat(props.mentorId)
const data = res?.data ?? res
chatMessages.value = data?.messages ?? []
} catch (e) {
console.error('[模拟对话] 加载失败', e)
} finally {
chatLoading.value = false
}
}
// ==================== 生命周期 ====================
onMounted(() => {
// 模式二时自动加载模拟对话
if (props.mode === 'detail' && props.mentorId) {
loadMockChat()
}
})
// ==================== 二维码弹窗 ====================
/** 弹窗是否显示 */
const showQrDialog = ref(false)
/** 二维码图片 base64 */
const qrCodeBase64 = ref('')
/** 二维码加载状态 */
const qrLoading = ref(false)
/**
* 打开二维码弹窗
* 模式一：展示本地固定二维码图片
* 模式二：请求后端生成导师专属二维码
*/
async 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>