cykj/hzdyjs

0 Fork 0

Files

T

wuzhen e4e4679da9 wuzhen updat

2025-07-30 23:24:43 +08:00

9.1 KiB

Raw Blame History

招聘海报类型区分修复记录

📋 基本信息

项目	信息
变更日期	2025-01-26
变更时间	16:00:00
变更人员	Cursor AI
变更类型	错误修复
影响模块	招生就业-招聘海报预览功能
变更状态	✅ 修复完成

🎯 问题描述

用户反馈：

"基本功能都没有问题，只是目前企业海报和岗位海报显示的内容没有区别，岗位海报并没有显示正确的信息"

核心问题：

企业海报和岗位海报显示内容相同，没有区分
岗位海报没有显示正确的岗位相关信息
海报类型（posterType）没有被正确使用来区分显示内容

🔍 问题分析

原始逻辑问题

<!-- 原来的条件判断 -->
<div v-if="posterData.positionName" class="position-info">
  <!-- 只根据是否有岗位名称来判断，没有根据海报类型 -->
</div>

<!-- 底部信息 -->
<div class="company-info">
  <!-- 两种类型海报显示相同的企业信息 -->
</div>

问题根因

条件判断错误：使用 v-if="posterData.positionName" 而不是 posterType
内容重复：两种海报类型显示相同的企业信息
岗位信息缺失：岗位海报没有突出显示岗位详情

🔧 修复方案

修复后的逻辑设计

1. 企业海报 (`posterType === '1'`)

设计理念：展示企业文化和吸引力，重点是联系方式

中间区域：

标题："加入我们 · 共创辉煌"
内容：企业主营业务、规模、地址
图标：🏢 主营业务、👥 企业规模、📍 地址

底部区域：

重点显示联系方式
图标：📞 联系电话、📧 电子邮箱、🏢 公司地址

2. 岗位海报 (`posterType === '2'`)

设计理念：展示具体岗位信息，重点是岗位要求和待遇

中间区域：

标题：具体岗位名称 (posterData.positionName)
内容：岗位详细信息
图标：📍 工作地点、💰 薪资待遇、⏰ 工作时间、🎯 技能要求

底部区域：

显示企业背景信息
内容：主营业务、企业规模、联系方式

📊 修复详情

修改的文件

web/src/components/PosterPreview/index.vue (修改)

1. 中间内容区域修复

<!-- 修复前 -->
<div v-if="posterData.positionName" class="position-info">
  <!-- 单一逻辑，不区分海报类型 -->
</div>

<!-- 修复后 -->
<!-- 企业海报：展示企业文化和优势 -->
<div v-if="posterData.posterType === '1'" class="position-info">
  <div class="position-title">加入我们 · 共创辉煌</div>
  <div v-if="enterpriseDetail" class="position-details">
    <div class="detail-item" v-if="enterpriseDetail.mainBusiness">
      <span class="icon">🏢</span>
      <span>{{ enterpriseDetail.mainBusiness }}</span>
    </div>
    <div class="detail-item" v-if="enterpriseDetail.enterpriseScale">
      <span class="icon">👥</span>
      <span>{{ getScaleLabel(enterpriseDetail.enterpriseScale) }}</span>
    </div>
    <div class="detail-item" v-if="enterpriseDetail.address">
      <span class="icon">📍</span>
      <span>{{ enterpriseDetail.address }}</span>
    </div>
  </div>
</div>

<!-- 岗位海报：展示具体岗位信息 -->
<div v-else-if="posterData.posterType === '2' && posterData.positionName" class="position-info">
  <div class="position-title">{{ posterData.positionName }}</div>
  <div v-if="positionDetail" class="position-details">
    <div class="detail-item" v-if="positionDetail.workAddress">
      <span class="icon">📍</span>
      <span>{{ positionDetail.workAddress }}</span>
    </div>
    <div class="detail-item" v-if="positionDetail.salary">
      <span class="icon">💰</span>
      <span>{{ positionDetail.salary }}</span>
    </div>
    <div class="detail-item" v-if="positionDetail.workTime">
      <span class="icon">⏰</span>
      <span>{{ positionDetail.workTime }}</span>
    </div>
    <div class="detail-item" v-if="positionDetail.requiredSkills">
      <span class="icon">🎯</span>
      <span>{{ positionDetail.requiredSkills }}</span>
    </div>
  </div>
</div>

2. 底部信息区域修复

<!-- 修复前 -->
<div class="company-info">
  <!-- 所有海报显示相同内容 -->
  <div class="info-row">主营业务</div>
  <div class="info-row">企业规模</div>
  <div class="info-row">联系电话</div>
  <div class="info-row">电子邮箱</div>
</div>

<!-- 修复后 -->
<div class="company-info">
  <!-- 企业海报：重点显示联系方式 -->
  <template v-if="posterData.posterType === '1'">
    <div class="info-row" v-if="enterpriseDetail.contactPhone">
      <span class="label">📞 联系电话：</span>
      <span class="value">{{ enterpriseDetail.contactPhone }}</span>
    </div>
    <div class="info-row" v-if="enterpriseDetail.email">
      <span class="label">📧 电子邮箱：</span>
      <span class="value">{{ enterpriseDetail.email }}</span>
    </div>
    <div class="info-row" v-if="enterpriseDetail.address">
      <span class="label">🏢 公司地址：</span>
      <span class="value">{{ enterpriseDetail.address }}</span>
    </div>
  </template>

  <!-- 岗位海报：显示企业背景信息 -->
  <template v-else-if="posterData.posterType === '2'">
    <div class="info-row" v-if="enterpriseDetail.mainBusiness">
      <span class="label">主营业务：</span>
      <span class="value">{{ enterpriseDetail.mainBusiness }}</span>
    </div>
    <div class="info-row" v-if="enterpriseDetail.enterpriseScale">
      <span class="label">企业规模：</span>
      <span class="value">{{ getScaleLabel(enterpriseDetail.enterpriseScale) }}</span>
    </div>
    <div class="info-row" v-if="enterpriseDetail.contactPhone">
      <span class="label">联系电话：</span>
      <span class="value">{{ enterpriseDetail.contactPhone }}</span>
    </div>
    <div class="info-row" v-if="enterpriseDetail.email">
      <span class="label">电子邮箱：</span>
      <span class="value">{{ enterpriseDetail.email }}</span>
    </div>
  </template>
</div>

📝 修复对比

海报内容结构对比

区域	企业海报（posterType='1'）	岗位海报（posterType='2'）
顶部	企业名称 + "诚聘英才·共创未来"	企业名称 + "诚聘英才·共创未来"
中部标题	"加入我们 · 共创辉煌"	具体岗位名称
中部内容	🏢 主营业务 👥 企业规模 📍 企业地址	📍 工作地点 💰 薪资待遇 ⏰ 工作时间 🎯 技能要求
底部	📞 联系电话 📧 电子邮箱 🏢 公司地址	主营业务企业规模联系电话电子邮箱

信息重点对比

海报类型	主要目的	核心信息	设计重点
企业海报	企业品牌宣传	企业文化、规模、联系方式	突出企业实力和联系方式
岗位海报	岗位招聘	岗位要求、薪资、企业背景	突出岗位详情和福利待遇

✅ 验证步骤

1. 企业海报验证

访问招聘海报列表页面
预览企业类型海报（posterType='1'）
确认中部显示"加入我们 · 共创辉煌"
确认中部显示企业主营业务、规模、地址
确认底部重点显示联系方式（带图标）

2. 岗位海报验证

预览岗位类型海报（posterType='2'）
确认中部显示具体岗位名称
确认中部显示岗位详情（地点、薪资、时间、技能）
确认底部显示企业背景信息

3. 功能验证

测试PDF导出功能（两种类型）
测试图片导出功能（两种类型）
确认导出文件正确显示不同内容

🎯 修复效果

修复前

❌ 企业海报和岗位海报显示相同内容
❌ 没有根据海报类型区分显示逻辑
❌ 岗位海报缺少岗位详细信息

修复后

✅ 企业海报重点展示企业文化和联系方式
✅ 岗位海报重点展示岗位信息和要求
✅ 两种类型海报内容完全区分
✅ 岗位海报正确显示岗位详细信息
✅ 视觉设计更加合理和专业

🔗 相关文档

招聘海报预览功能开发 - 原始功能开发
招聘海报列表显示问题修复

📋 技术要点

关键技术实现

条件渲染：使用 v-if 和 v-else-if 根据 posterType 条件渲染
模板语法：使用 <template> 标签进行逻辑分组
数据绑定：正确使用 enterpriseDetail 和 positionDetail 数据
图标设计：为不同类型信息使用合适的emoji图标

设计原则

信息层次：不同类型海报突出不同的核心信息
视觉区分：通过内容差异化实现视觉区分
用户体验：让用户能够快速识别海报类型和重点信息
数据完整性：确保所有相关数据都能正确显示

9.1 KiB Raw Blame History Unescape Escape