招聘会海报分享

src/api/recruit/personal/jobFair.js

@@ -38,3 +38,11 @@ export const jobFairPositionDeliveryCheck = async (params) => {
 		params
 	})
 }
+
+// 保存分享参数
+export const saveShareQuery = async (data) => {
+	return await request.post({
+		url: '/app-api/menduner/system/share/share',
+		data
+	})
+}

src/views/recruit/personal/jobFair/details/enterprises.vue

@@ -1,6 +1,6 @@
 <!-- 企业 -->
 <template>
-  <div>
+  <div class="position-relative">
     <!-- 轮播 -->
     <v-carousel 
       v-if="jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0" 
@@ -13,6 +13,11 @@
 			</v-carousel-item>
 		</v-carousel>
 
+    <!-- 招聘会分享按钮 -->
+    <div class="position-fixed" style="right: 24px; top: 80px;">
+      <v-btn icon="mdi-share-all" color="primary" size="x-large" @click.stop="handleShare"></v-btn>
+    </div>
+
     <div :style="{'background-color': jobFair.backgroundColour || '#fff', 'min-height': jobFair?.pcHeadImg && jobFair?.pcHeadImg.length > 0 ? `calc(100vh - ${isMobile ? '200px' : '500px'})` : '100vh'}">
       <div :class="{'default-width': !isMobile}">
         <!-- 类别展示 -->
@@ -50,25 +55,42 @@
         </template>
       </div>
     </div>
+
+    <div class="hideCanvasView">
+      <canvas ref="shareCanvas" :width="canvasWidth" :height="canvasHeight"></canvas>
+    </div>
   </div>
+
+  <Loading :visible="loading" />
+
+  <PreviewImage v-if="showPreview" :urlList="[previewSrc]" :fileName="jobFair?.title?.replace(/<\/?p[^>]*>/gi, '')" @close="showPreview = !showPreview" />
+
 </template>
 
 <script setup>
 defineOptions({name: 'jobFair-enterprises'})
 import { ref, reactive, onMounted } from 'vue'
-import { getJobFairEnterprisePage, getJobFair, getJobFairEntJobPage } from '@/api/recruit/personal/jobFair'
+import { getJobFairEnterprisePage, getJobFair, getJobFairEntJobPage, saveShareQuery } from '@/api/recruit/personal/jobFair'
 import EntCard from './components/entCard1.vue'
 import JobCard from './components/jobCard1.vue'
 import { useRoute } from 'vue-router'; const route = useRoute();
 import { dealDictArrayData, dealDictObjData } from '@/utils/position'
+import { getJobAdvertisedShareQrcode, getJobAdvertisedShare } from '@/api/position'
 
 const tab = ref(0)
+const loading = ref(false)
 const query = reactive({
   pageNo: 1,
   pageSize: 20,
 	jobFairId: route.params.id
 })
 
+const showPreview = ref(false)
+const shareCanvas = ref(null)
+const previewSrc = ref('')
+const canvasWidth = 500
+const canvasHeight = 900
+
 const isMobile = ref(false)
 onMounted(() => {
   const userAgent = navigator.userAgent
@@ -121,7 +143,6 @@ const getJobFairDetail = async () => {
 }
 getJobFairDetail()
 
-
 // tab项点击
 const handleTabClick = (index) => {
   items.value = []
@@ -136,6 +157,68 @@ const handleChangePage = () => {
   query.pageNo++
   getList()
 }
+
+const handleShare = () => {
+  loading.value = true
+
+  const canvas = shareCanvas.value
+  const ctx = canvas.getContext('2d')
+  const img = new Image()
+  img.setAttribute('crossOrigin', 'anonymous')
+  img.onload = async () => {
+    //清空画布
+    ctx.clearRect(0, 0, canvasWidth, canvasHeight)
+
+    // 设置背景图片
+    ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight)
+
+    // 分享二维码
+    const secondImg = new Image()
+    secondImg.setAttribute('crossOrigin', 'anonymous')
+    secondImg.onload = () => {
+      // 计算第二张图片的位置和大小（这里以示例为准，您可以根据需要调整）
+      const secondImgWidth = Math.min(secondImg.width, canvas.width / 4)
+      const secondImgHeight = (secondImgWidth / secondImg.width) * secondImg.height // 保持宽高比
+      const x = (canvas.width - secondImgWidth) / 2 // 水平居中
+      const y = canvas.height - secondImgHeight - 190 // 垂直放置在 Canvas 底部上方 170 像素处
+  
+      // 绘制第二张图片到 Canvas 上的指定位置和大小
+      ctx.drawImage(secondImg, x, y, secondImgWidth, secondImgHeight)
+
+      ctx.font = 'bold 16px Arial'
+      ctx.fillStyle = '#10325d'
+      const text = '诚挚邀约 共享机遇'
+      const textWidth = ctx.measureText(text).width
+      const textX = x + (secondImgWidth - textWidth) / 2
+      const textY = y + secondImgHeight + 30
+      ctx.fillText(text, textX, textY)
+
+      previewSrc.value = canvas.toDataURL()
+      loading.value = false
+      showPreview.value = true
+    }
+    
+    // 保存分享参数
+    const result = await getJobAdvertisedShare({ jobId: '12999' })
+    const query = {
+      scene: 'id=' + result,
+      path: 'pagesB/positionDetail/index',
+      width: 200,
+      autoColor: false,
+      checkPath: true,
+      hyaline: false
+    }
+    const data = await getJobAdvertisedShareQrcode(query)
+    secondImg.src = 'data:image/png;base64,' + data
+  }
+
+  img.onerror = (error) => {
+    console.error('Failed to load image:', error)
+    loading.value = false
+  }
+
+  img.src = jobFair.value?.shareImg
+}
 </script>
 
 <style scoped lang="scss">
@@ -186,6 +269,12 @@ const handleChangePage = () => {
   text-align: center;
   font-size: 18px;
 }
+.hideCanvasView {
+	position: fixed;
+	top: -99999px;
+	left: -99999px;
+	z-index: -99999;
+}
 ::-webkit-scrollbar {
   width: 0;
   height: 0;