职位分享海报

src/components/PreviewImg/index.vue

@@ -1,8 +1,8 @@
 <template>
   <v-overlay v-model="overlay" class="align-center justify-center" @update:model-value="handleChange">
-    <!-- <div class="close" @click="overlay = false">
+    <div class="close" @click="overlay = false">
       <v-icon color="#fff" size="60">mdi-close-circle</v-icon>
-    </div> -->
+    </div>
     <v-window v-model="window" show-arrows @update:model-value="val => window = val">
       <v-window-item v-for="val in list" :key="val">
         <v-img v-if="isImage || checkIsImage(val)" width="900" height="800" :src="val"></v-img>

src/views/recruit/personal/position/components/details.vue

@@ -180,7 +180,7 @@ const generateAndDownloadImage = async () => {
     const image = canvas.toDataURL().replace(/^data:image\/(png|jpg);base64,/, '')
     previewSrc.value = `data:image/png;base64,${image}`
     loading.value = false
-  } catch (error) {  
+  } catch (error) {
     console.error('Error generating image:', error)
     Snackbar.error('图片生成失败')
   }
@@ -189,7 +189,7 @@ const generateAndDownloadImage = async () => {
 // 保存图片到本地
 const handleDownloadImage = () => {
   const { name, areaName, payFrom, payTo } = info.value
-  downloadBase64(previewSrc.value, `${name}_${areaName}_${payFrom}-${payTo}-${positionInfo.value.payName}`)
+  downloadBase64(previewSrc.value, `${name}${areaName ? '_' + areaName : ''}_${payFrom}-${payTo}-${positionInfo.value.payName}`)
 }
 
 // 快速登录

src/views/recruit/personal/position/components/poster.vue

@@ -1,65 +1,65 @@
 <!-- 分享职位 -->
 <template>
-  <div style="background-color: #f0f0f0;" :style="{'padding': '10px'}">
+  <div style="background-color: #03877a;">
     <v-card
-      class="py-3 px-5"
-      style="min-height: calc(100vh - 20px); box-sizing: border-box; margin: 0 auto;width: 900px;"
+      class="pa-5"
+      style="min-height: calc(100vh - 20px); box-sizing: border-box; margin: 0 auto;width: 740px;background-color: #03877a;"
     >
       <div v-if="!Object.keys(info).length">加载失败</div>
       <div v-else>
-        <div class="d-flex justify-space-between">
+        <!-- 职位名称+薪资 -->
+        <div class="d-flex justify-space-between mx-5">
           <h2 class="JobName ellipsis">{{ info.name }}</h2>
           <span class="salary">{{ info.payFrom }}-{{ info.payTo }}/{{ positionInfo.payName }}</span>
         </div>
-        <div class="d-flex justify-space-between mt-4">
+        <!-- 地区、工作经验、学历 -->
+        <div class="d-flex justify-space-between mx-5">
           <div class="banner-tags">
-            <div v-for="k in desc" :key="k.mdi" class="mr-3">
-              <v-icon color="var(--color-666)" size="20">{{ k.mdi }}</v-icon>
-              <span class="f-w-600 ml-1">{{ positionInfo[k.value] }}</span>
+            <div v-for="(k, i) in desc" :key="k.mdi">
+              <span>{{ positionInfo[k.value] }}</span>
+              <span v-if="i !== desc.length - 1 && positionInfo[k.value]" class="septal-line"></span>
             </div>
           </div>
         </div>
-        <div class="mt-4" v-if="info?.tagList">
-          <v-chip size="small" class="mr-1 mb-1" color="primary" label v-for="(k, i) in info.tagList" :key="i">{{ k }}</v-chip>
+        <!-- 企业信息 -->
+        <div class="radius pa-3 mx-5 mt-5 d-flex align-center" style="background-color: #5baea6;">
+          <v-avatar style="border: 2px solid #fff;" size="68">
+            <img crossOrigin="anonymous" :src="info.enterprise.logoUrl" alt="" style="width: 68px; height: 68px;">
+          </v-avatar>
+          <div class="enterprise-name ml-5 ellipsis" style="width: 65%;">{{ info.enterprise?.name }}</div>
+          <div style="flex: 1;" class="text-right enterprise-name">{{ info.areaName }}</div>
         </div>
-        <div class="text-end d-flex align-center justify-space-between mt-3">
-          <svg-icon v-if="info.hire" name="pin" size="50"></svg-icon>
+        <div class="mx-5 mt-3">
+          <span :class="['tag', 'mb-1', { 'mr-5': i !== info.enterprise.welfareList.length - 1}]" v-for="(k, i) in info.enterprise.welfareList" :key="i">{{ k }}</span>
         </div>
-        <div v-if="info.hire" class="mt-3">
-          <v-chip v-if="info.hirePrice" label color="primary">赏金：{{ commissionCalculation(info.hirePrice, 1) }}元</v-chip>
-          <v-chip v-if="info.hirePoint" label color="primary">积分：{{ commissionCalculation(info.hirePoint, 1) }}点</v-chip>
-        </div>
-        <v-divider class="mt-3"></v-divider>
-        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobResponsibilities') }}</div>
-        <div v-if="info.content" class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
-        <div v-else>暂无</div>
-        <div class="mt-3 mb-1 f-w-600">{{ $t('position.jobRequirements') }}</div>
-        <div v-if="info.requirement" class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
-        <div v-else>暂无</div>
-        <v-divider class="my-3"></v-divider>
-        <div class="contact">
-          <h4>公司信息</h4>
-          <div class="mt-5">
-            <!-- <v-img :src="info.contact?.avatar || 'https://minio.citupro.com/dev/menduner/7.png'" :width="45" style="height: 45px;"></v-img> -->
-            <div class="contact-name">{{ info.enterprise?.name }}</div>
-            <div v-if="info?.enterprise?.tagList" class="mt-3">
-              <v-chip size="small" class="mr-1 mb-1" color="primary" label v-for="(k, i) in info.enterprise?.tagList" :key="i">{{ k }}</v-chip>
+        <!-- 岗位职责、岗位要求、二维码 -->
+        <div class="white-bgc pa-5 mt-5 radius" style="position: relative;">
+          <div v-if="info.content" class="resume-box pa-0 mb-5">
+            <div class="resume-header">
+              <div class="introduce-title">{{ $t('position.jobResponsibilities') }}</div>
             </div>
-            <div class="contact-info">招聘者：{{ info.contact?.name }} · {{ info.contact?.postNameCn }}</div>
+            <div class="requirement" v-html="info.content?.replace(/\n/g, '</br>')"></div>
           </div>
-        </div>
-        <v-divider class="my-3"></v-divider>
-        <div>
-          <h4>{{ $t('position.address') }}</h4>
-          <div class="mt-1">
-            <v-icon size="25" color="primary">mdi-map-marker</v-icon>
-            <span style="color: var(--color-666);font-size: 15px;">{{ info.address }}</span>
+
+          <div v-if="info.requirement" class="resume-box pa-0">
+            <div class="resume-header">
+              <div class="introduce-title">{{ $t('position.jobRequirements') }}</div>
+            </div>
+            <div class="requirement" v-html="info.requirement?.replace(/\n/g, '</br>')"></div>
           </div>
-        </div>
-        <div class="pa-3" style="position: absolute; right: 30px; bottom: 30px; background-color: #fff;">
-          <QrCode style="margin: 0 auto;" :text="shareUrlTxt" :width="170" />
-          <div style="color: #666;">了解更多信息，请在微信中长按识别二维码</div>
-        </div>
+
+          <div class="px-5 py-3 d-flex justify-space-evenly align-center mt-10 radius" style="background-color: #e3f2f0">
+            <QrCode :text="shareUrlTxt" :width="120" />
+            <div style="color: #333;" class="text-center">
+              长 按 识 别 二 维 码
+              <div style="color: #6A6A6A">了 解 更 多 职 位 信 息</div>
+            </div>
+          </div>
+         </div>
+         <!-- logo -->
+         <div class="mt-5 text-center">
+            <img crossOrigin="anonymous" src="https://minio.citupro.com/dev/menduner/poster.png" alt="" style="width: 130px; height: 50px;">
+         </div>
       </div>
     </v-card>
 
@@ -67,7 +67,6 @@
 </template>
 
 <script setup>
-import { commissionCalculation } from '@/utils/position'
 defineOptions({name: 'recruit-personal-shareJob-index'})
 
 // 职位详情
@@ -82,58 +81,62 @@ const shareUrlTxt = import.meta.env.VITE_ACCESS_BASE_URL + '/shareJob?' + new UR
   jobId: router.currentRoute.value.params?.id,
   sharedById: userInfo?.id,
 }).toString()
-// console.log('分享链接', shareUrlTxt)
 
 const desc = [
-  { mdi: 'mdi-map-marker-outline', value: 'areaName' },
-  { mdi: 'mdi-school-outline', value: 'eduName' },
-  { mdi: 'mdi-clock-time-ten-outline', value: 'expName' }
+  { value: 'areaName' },
+  { value: 'expName' },
+  { value: 'eduName' }
 ]
 </script>
 
 <style lang="scss" scoped>
-.f-w-600 { font-weight: 600; }
 .radius { border-radius: 8px; }
 .salary {
-  color: var(--v-error-base);
+  color: #E2D665;
   line-height: 41px;
   font-weight: 600;
+  font-size: 20px;
   height: auto;
   display: inline-block;
   vertical-align: sub;
 }
 .JobName {
-  color: #37576c;
+  color: #fff;
   font-size: 28px;
   margin-right: 30px;
   margin-top: 1px;
   vertical-align: middle;
   flex: 1;
 }
-.banner-tags { display: flex; flex-wrap: wrap; }
+.banner-tags { display: flex; flex-wrap: wrap; color: #fff; }
 .requirement {
   white-space: pre-wrap;
   word-break: break-all;
   line-height: 28px;
-  color: var(--color-333);
+  color: #5C5C5C;
   font-size: 15px;
   text-align: justify;
   letter-spacing: 0;
+  margin-top: 15px;
 }
-.contact-name {
+.enterprise-name {
   font-size: 20px;
-  font-weight: 500;
-  color: var(--color-222);
+  color: #fff;
   line-height: 28px;
 }
-.contact-info {
-  font-size: 15px;
-  color: var(--color-666);
-  line-height: 21px;
-  margin-top: 8px;
+.introduce-title {
+  font-weight: 600;
+  font-size: 24px;
+  border-left: 5px solid #00897B;
+  padding-left: 12px;
+  line-height: 24px;
+  color: var(--v-primary-base);
+}
+:deep(.v-img__img--cover) {
+  object-fit: contain !important;
 }
-.button-item {
-  min-width: 110px;
-  height: 36px
+.tag {
+  display: inline-block;
+  color: #fff;
 }
 </style>