分享企业海报

pages/index/position.vue

@@ -59,6 +59,13 @@ import { getRewardEventList } from '@/utils/eventList'
 import { getMorningNewsArticle } from '@/api/content'
 import { getWebContent } from '@/api/common'
 
+// setTimeout(() => { // 测试
+//   const url = '/pagesB/jobFair/jobFairEntShare?jobFairId=1889880551008010241&enterpriseId=1'
+//   uni.navigateTo({
+//     url
+//   })
+// }, 100)
+
 onLoad(() => {
   wx.showShareMenu({
     withShareTicket: true,

pagesB/jobFair/jobFairEntShare.vue

@@ -5,7 +5,7 @@
       <image v-if="!!shareUrl" :style="imgStyle" @click="handlePreviewSharePoster" :src="shareUrl" :show-menu-by-longpress="true"></image>
       <view class="color-999 ss-m-t-20 font-size-14 ss-m-b-50">点击图片预览，长按图片保存</view>
     </view>
-		<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 330px; height: 600px;"></canvas>
+		<canvas canvas-id="posterCanvas" class="shareCanvas" style="width: 540px; height: 788px;"></canvas>
   </view>
 </template>
 
@@ -13,13 +13,14 @@
 import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getJobAdvertisedShareQrcode } from '@/api/user'
-import { getJobFairEntJobPage, getJobFair } from '@/api/jobFair'
+import { getJobFairEntJobPage, getJobFair, saveShareQuery } from '@/api/jobFair'
 import { formatName } from '@/utils/getText'
 
 const shareUrl = ref('')
 const windowWidth = ref(0)
 let jobFairId = '' // 分享会ID
 let enterpriseId = '' // 企业ID
+let entName = '' // 企业名称
 let shareImg = '' // 分享背景图片-底图
 // let shareImg = 'https://menduner.citupro.com:3443/dev/4dd7dd3c9ef350d62fcbc814b88c1ac1916f484a3ee8d8531ae7a2698a289670.jpg' // 分享背景图片-底图
 
@@ -59,14 +60,13 @@ const getEntPositionList = async () => {
     positionNameList = list.map(e => { return formatName(e?.name) })
     entLogoUrl = list[0]?.enterprise?.logoUrl || ''
     entName = list[0]?.enterprise?.anotherName || ''
-    debugger
   } catch (error) {}
 }
 
 const imgStyle = computed(() => {
-  if (windowWidth.value <= 320) return `width: 259px; height: 460px;`
-  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 560px;`
-  if (windowWidth.value > 375) return `width: 328px; height: 600px;`
+  if (windowWidth.value <= 320) return `width: 259px; height: 377px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: 455px;`
+  if (windowWidth.value > 375) return `width: 328px; height: 474px;`
 })
 
 // 图片预览
@@ -126,7 +126,7 @@ const handleShareCode = async () => {
 		checkPath: true,
 		hyaline: true
 	}
-	const res = await getJobAdvertisedShareQrcode(query)
+	const res = await getJobAdvertisedShareQrcode(query, { noAuth: true })
 	const data = res?.data ? 'data:image/png;base64,' + res.data : ''
   getToLocal(data)
 }
@@ -138,14 +138,88 @@ const createPoster = async () => {
   var context = uni.createCanvasContext('posterCanvas')
 
   //清空画布
-  context.clearRect(0, 0, 330, 600)
+  context.clearRect(0, 0, 540, 788)
 
   //背景图片 
   const { path: bgUrl } = await getImageTempRatio(shareImg)
-  context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
+  context.drawImage(bgUrl, 0, 0, 540, 788) // 路径、x、y、宽、高
+
+  // 企业头像
+  context.save()
+  const secondImgWidth = 80
+  const secondImgHeight = 80
+  const x = (540 - secondImgWidth) / 2
+  const y = 788 - secondImgHeight - 460
+  context.beginPath()
+  context.arc(x + secondImgWidth / 2, y + secondImgHeight / 2, secondImgWidth / 2, 0, Math.PI * 2, true)
+  context.clip()
+  const { path: entLogoUrlPath } = await getImageTempRatio(entLogoUrl)
+  context.drawImage(entLogoUrlPath, x, y, secondImgWidth, secondImgHeight)
+  context.restore()
+  
+  // 企业名称
+  const maxTextWidth = 400
+  const fontStyle = 'bold 18px Arial'
+  context.font = fontStyle
+  let truncatedText = entName
+  while (context.measureText(truncatedText + '...').width > maxTextWidth && truncatedText.length > 0) {
+    truncatedText = truncatedText.slice(0, -1)
+  }
+  if (truncatedText !== entName) truncatedText += '...'
+  const textX = x + (secondImgWidth - context.measureText(truncatedText).width) / 2
+  const textY = y + secondImgHeight + 30
+  context.fillStyle = '#000'
+  context.fillText(truncatedText, textX, textY)
+  
+  // 职位标签
+  const tagPaddingLeftRight = 20
+  const tagPaddingTopBottom = 10
+  const tagRadius = 8
+  const tagSpacing = 30
+  let tagY = textY + tagSpacing
+  positionNameList.forEach((tag) => {
+    let truncatedTag = tag
+    while (context.measureText(truncatedTag + '...').width > maxTextWidth - 2 * tagPaddingLeftRight && truncatedTag.length > 0) {
+      truncatedTag = truncatedTag.slice(0, -1)
+    }
+    if (truncatedTag !== tag) truncatedTag += '...'
+
+    const tagWidth = context.measureText(truncatedTag).width + 2 * tagPaddingLeftRight
+    const tagX = x + (secondImgWidth - tagWidth) / 2
+
+    context.fillStyle = '#246a6c'
+    context.beginPath()
+    context.moveTo(tagX + tagRadius, tagY)
+    context.lineTo(tagX + tagWidth - tagRadius, tagY)
+    context.quadraticCurveTo(tagX + tagWidth, tagY, tagX + tagWidth, tagY + tagRadius)
+    context.lineTo(tagX + tagWidth, tagY + tagPaddingTopBottom * 2)
+    context.quadraticCurveTo(tagX + tagWidth, tagY + tagPaddingTopBottom * 2 + tagRadius, tagX + tagWidth - tagRadius, tagY + tagPaddingTopBottom * 2 + tagRadius)
+    context.lineTo(tagX + tagRadius, tagY + tagPaddingTopBottom * 2 + tagRadius)
+    context.quadraticCurveTo(tagX, tagY + tagPaddingTopBottom * 2 + tagRadius, tagX, tagY + tagPaddingTopBottom * 2)
+    context.lineTo(tagX, tagY + tagRadius);
+    context.quadraticCurveTo(tagX, tagY, tagX + tagRadius, tagY)
+    context.closePath()
+    context.fill()
+
+    context.font = '16px Arial'
+    context.fillStyle = '#fff'
+    context.fillText(truncatedTag, tagX + tagPaddingLeftRight, tagY + tagPaddingTopBottom + 10)
+
+    tagY += tagPaddingTopBottom * 2 + tagSpacing
+  })
+
   
   //分享二维码
-  context.drawImage(qrCode.value, 105.5, 380, 120, 120)
+  context.drawImage(qrCode.value, 80, 550, 110, 110)
+
+  context.font = 'bold 18px Arial'
+  context.fillStyle = '#000'
+  context.fillText('海量职位火热招聘中', 280, 605)
+
+  context.font = '15px Arial'
+  context.fillStyle = '#999'
+  context.fillText('长按图片识别二维码', 290, 625)
+  
 
   context.draw(false, () =>{
     wx.canvasToTempFilePath({ 

pagesB/jobFair/jobFairShare.vue

@@ -101,7 +101,7 @@ const handleShareCode = async () => {
 		checkPath: true,
 		hyaline: false
 	}
-	const res = await getJobAdvertisedShareQrcode(query)
+	const res = await getJobAdvertisedShareQrcode(query, { noAuth: true })
 	const data = res?.data ? 'data:image/png;base64,' + res.data : ''
   getToLocal(data)
 }

pagesB/jobFair/positionClassification.vue

@@ -191,7 +191,6 @@ const handleShare = () => {
   let url = `/pagesB/jobFair/${query.enterpriseId ? 'jobFairEntShare' : 'jobFairShare'}?jobFairId=${query.jobFairId}`
   // 分享招聘会企业
   if (query.enterpriseId) url = url + `&enterpriseId=${query.enterpriseId}`
-  // 
 	uni.navigateTo({ url })
 }