样式修改

pagesB/jobFair/jobFairShare.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: ${canvasWidth}px; height: ${canvasHeight}px;`"></canvas>
   </view>
 </template>
 
@@ -15,6 +15,9 @@ import { onLoad } from '@dcloudio/uni-app'
 import { getJobAdvertisedShareQrcode } from '@/api/user'
 import { getJobFair, saveShareQuery } from '@/api/jobFair'
 
+const canvasWidth = 500
+const canvasHeight = 900
+
 const shareUrl = ref('')
 const windowWidth = ref(0)
 let jobFairId = '' // 分享会ID
@@ -39,9 +42,9 @@ const getJobFairDetail = async () => {
 }
 
 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: ${Math.round((canvasHeight*259)/canvasWidth)}px;`
+  if (windowWidth.value > 320 && windowWidth.value <= 375) return `width: 313px; height: ${Math.round((canvasHeight*313)/canvasWidth)}px;`
+  if (windowWidth.value > 375) return `width: 328px; height: ${Math.round((canvasHeight*328)/canvasWidth)}px;`
 })
 
 // 图片预览
@@ -66,26 +69,51 @@ const getImageTempRatio = (url) => {
   })
 }
 
+// const getToLocal = (base64data) => {
+//   const fsm = wx.getFileSystemManager()
+//   const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
+//   const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
+//   if (!format) {
+//     return (new Error('ERROR_BASE64SRC_PARSE'))
+//   }
+//   const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
+//   const buffer = wx.base64ToArrayBuffer(bodyData);
+//   fsm.writeFile({
+//     filePath,
+//     data: buffer,
+//     encoding: 'binary',
+//     success(r) {
+//       console.log(filePath,'filePath')
+//       qrCode.value = filePath
+//     },
+//     fail() {
+//       return (new Error('ERROR_BASE64SRC_WRITE'))
+//     }
+//   })
+// }
 const getToLocal = (base64data) => {
-  const fsm = wx.getFileSystemManager()
-  const FILE_BASE_NAME = 'tmp_base64src'; //自定义文件名
-  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
-  if (!format) {
-    return (new Error('ERROR_BASE64SRC_PARSE'))
-  }
-  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
-  const buffer = wx.base64ToArrayBuffer(bodyData);
-  fsm.writeFile({
-    filePath,
-    data: buffer,
-    encoding: 'binary',
-    success(r) {
-      console.log(filePath,'filePath')
-      qrCode.value = filePath
-    },
-    fail() {
-      return (new Error('ERROR_BASE64SRC_WRITE'))
+  return new Promise((resolve, reject) => {
+    const fsm = wx.getFileSystemManager()
+    const FILE_BASE_NAME = 'tmp_base64src' // 自定义文件名
+    const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || []
+    if (!format) {
+      reject(new Error('ERROR_BASE64SRC_PARSE'))
+      return
     }
+    const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`
+    const buffer = wx.base64ToArrayBuffer(bodyData)
+    fsm.writeFile({
+      filePath,
+      data: buffer,
+      encoding: 'binary',
+      success(r) {
+        qrCode.value = filePath
+        resolve(filePath) // 成功时返回 filePath
+      },
+      fail() {
+        reject(new Error('ERROR_BASE64SRC_WRITE'))
+      },
+    })
   })
 }
 
@@ -99,36 +127,47 @@ const handleShareCode = async () => {
 		width: 200,
 		autoColor: false,
 		checkPath: true,
-		hyaline: false
+		hyaline: false // 二维码背景颜色为透明
 	}
 	const res = await getJobAdvertisedShareQrcode(query, { noAuth: true })
 	const data = res?.data ? 'data:image/png;base64,' + res.data : ''
-  getToLocal(data)
+  await getToLocal(data) // 等待 getToLocal 完成
 }
 
-
 const createPoster = async () => {
   uni.showLoading({ title: '生成中...', mask: true })
   await handleShareCode() // 生产分享二维码
   var context = uni.createCanvasContext('posterCanvas')
 
   //清空画布
-  context.clearRect(0, 0, 330, 600)
+  context.clearRect(0, 0, canvasWidth, canvasHeight)
 
   //背景图片 
   const { path: bgUrl } = await getImageTempRatio(shareImg)
-  context.drawImage(bgUrl, 0, 0, 330, 600) // 路径、x、y、宽、高
+  context.drawImage(bgUrl, 0, 0, canvasWidth, canvasHeight) // 路径、x、y、宽、高
   
   //分享二维码
-  context.drawImage(qrCode.value, 105.5, 380, 120, 120)
-
+  const qrCodeWidth = 127
+  const qrCodeHeight = 127
+  const qrCodeX = 188
+  const qrCodeY = 585
+  context.drawImage(qrCode.value, qrCodeX, qrCodeY, qrCodeWidth, qrCodeHeight)
+  
+  context.font = 'bold 16px Arial'
+  context.fillStyle = '#10325d'
+  const text = '诚挚邀约 共享机遇'
+  const textWidth = context.measureText(text).width
+  const textX = qrCodeX + (qrCodeWidth - textWidth) / 2
+  const textY = qrCodeY + qrCodeHeight + 30
+  context.fillText(text, textX, textY)
+  
   context.draw(false, () =>{
     wx.canvasToTempFilePath({ 
       canvasId: 'posterCanvas',
       success:(res)=>{
         shareUrl.value = res.tempFilePath
         console.log('canvas-success', shareUrl.value)
-		    uni.hideLoading({})
+        uni.hideLoading({})
       },
       fail:(err)=>{
         uni.hideLoading({})