关闭海报分享

pagesB/positionDetail/index.vue

@@ -177,7 +177,7 @@
                 </view>
                 <view style="font-size:12px;">微信</view>
             </button>
-            <button class="f-straight" @click="createPoster">
+            <!-- <button class="f-straight" @click="createPoster">
                 <view class="share-round share-round-2" >
                     <uni-icons
                         type="download-filled"
@@ -186,7 +186,7 @@
                     />
                 </view>
                 <view style="font-size:12px;">生成海报</view>
-            </button>
+            </button> -->
         </view>
       </uni-popup-share>
     </uni-popup>
@@ -472,6 +472,43 @@ function getImageTempRatio (url){
         })
     })
 }
+
+/**
+ * 
+ * @param text 文本
+ * @param x 起始位置x
+ * @param y 起始位置y
+ * @param maxWidth 最大宽度
+ * @param lineHeight 行高
+ * @param ctx 画布上下文
+ * @param type 类型 cut 截断+省略号 wrap 自动换行
+ */
+function wrapText(text, x, y, maxWidth, lineHeight, ctx, type = 'cut') {  
+    const words = text.split(' '); // 按空格分割成单词  
+    let line = ''
+
+    words.forEach((word) => {  
+        const testLine = line + word + ' '; // 测试当前行加上新单词  
+        const metrics = ctx.measureText(testLine); // 测量文本宽度  
+        
+        // 检查是否超过最大宽度  
+        if (metrics.width > maxWidth && line) {
+            if (type === 'wrap') {
+              ctx.fillText(line, x, y); // 在当前 y 位置绘制当前行  
+              line = word + ' '; // 重置行并开始新的一行  
+              y += lineHeight; // 更新 y 位置 
+            }
+            if (type === 'cut') {
+              line = line.slice(0, -word.length - 2) + '...'; // 截断当前行并添加省略号
+            }
+        } else {  
+            line = testLine; // 如果没有超出宽度，更新当前行  
+        }  
+    })
+
+    // 绘制剩余的文本  
+    ctx.fillText(line, x, y)
+} 
 // 生成海报
 async function createPoster () {
   const top = 50
@@ -522,14 +559,21 @@ async function createPoster () {
   context.font = 'normal 16px Microsoft YaHei'
   const emTextH = subTitleH + 50
   context.fillText(info.value.enterprise.anotherName, left + 20, emTextH)
-  
+  // 企业地点
   const _areaText = `${info.value.areaName}`
   const areaTextW = context.measureText(_areaText).width;  
   const _rightX = windowWidth - areaTextW - left - 20; 
   context.fillText(_areaText, _rightX, emTextH);
   // 福利
+  // context.setFillStyle('#FFF')
+  context.font = 'normal 14px Microsoft YaHei'
+  const welfareH = emTextH + 40
+  const welfareText = info.value.tagList && info.value.tagList.join('     ') || ''
+  wrapText(welfareText, left, welfareH, windowWidth - 2 * left, 20, context)
   // 卡片
-  roundedRect(context, 10, 200 , windowWidth - 20 , windowHeight - 300, 10,'#fff')
+  const cardTop = welfareH + 20 // 卡片顶部距离
+  const cardH = windowHeight - cardTop - 100  // 卡片高度
+  roundedRect(context, 10, cardTop , windowWidth - 20 , cardH, 10,'#fff')
   // 岗位
   // context.setFillStyle('#000000')
   // context.setFontSize(20)
@@ -546,13 +590,13 @@ async function createPoster () {
   // context.setFillStyle('#f67272')
   // context.fillText('120/天', windowWidth/10, windowHeight * 0.2 + 60)
   // 小程序码/ 二维码
-  context.drawImage(
-    // image.path,
-    windowWidth *0.5 - windowWidth/8,
-    windowHeight * 0.60, 
-    windowWidth/4, 
-    windowWidth/4
-  )
+  // context.drawImage(
+  //   // image.path,
+  //   windowWidth *0.5 - windowWidth/8,
+  //   windowHeight * 0.60, 
+  //   windowWidth/4, 
+  //   windowWidth/4
+  // )
   
   context.setFontSize(16)
   context.fillText('长按二维码查看岗位', windowWidth/3.2, windowHeight * 0.65 + windowWidth/4)