生成二维码

packages/app/src/pages-sub/mine/homepage/qr-code/index.vue

@@ -9,8 +9,10 @@ import { QrCodeBusinessType } from '../../../../core/libs/enums'
 import { useUserStore } from '../../../../store'
 import { storeToRefs } from 'pinia'
 import { useRouter } from '@/core/utils/router'
+import { Canvas } from '@/core/utils/canvas'
 
 const id = ref()
+const posterUrl = ref<string | any>()
 const userStore = useUserStore()
 const { userInfo } = storeToRefs(userStore)
 const router = useRouter()
@@ -80,6 +82,47 @@ const generateCodeMp = async () => {
   })
 }
 
+const createCode = () =>{
+	return new Promise((resolve, reject) => {
+	  ;(async () => {
+	    uni.showLoading({ title: '生成中' })
+	    const [avatarPath, bg] = await Promise.all(
+	      [
+	        userInfo.value.avatar,
+	        designerInfo.value?.homeUrl,
+	      ].map((it) => it && uni.getImageInfo({ src: it }).then(({ path }) => path)),
+	    )
+	    const ctx = uni.createCanvasContext('qrcode')
+	    uni
+	      .createSelectorQuery()
+	      .select('#qrcode')
+	      .fields({ size: true }, async ({ width: w, height: h }: any) => {
+	        const canvas = new Canvas(ctx, { width: w, height: h }, { width: 200 })
+	        canvas.FillImage(bg)
+	        // canvas.Image(avatarPath, 60, 60, 80, 80)
+	        canvas.CircleImage(avatarPath, 56, 56, 44)	  						  
+	        ctx.draw(true, () => {
+	          uni.canvasToTempFilePath({
+	            canvasId: 'qrcode',
+	            width: 200,
+	            height: 400,
+	            success: (res) => {
+	              // console.log('生成海报', res)
+	              uni.hideLoading()
+	              resolve(res.tempFilePath)
+	            },
+	            fail: (err) => {
+	              uni.hideLoading()
+	              reject(err)
+	            },
+	          })
+	        })
+	      })
+	      .exec()
+	  })()
+	})
+}
+
 const handleClickScan = async () => {
   const { result } = await uni.scanCode({})
   console.log(result)
@@ -125,15 +168,17 @@ const saveQrcode = async () => {
     // console.log(option)
     // const { tempFilePath } = await wx.canvasToTempFilePath(option)
     // console.log(tempFilePath)
-    uni.downloadFile({
-		url:designerInfo.value.homeUrl,
-		success: (res) => {
-			uni.saveImageToPhotosAlbum({
-			  // filePath: res.tempFilePath,
-			  filePath: res.tempFilePath,
-			})
-		}
-	})
+	await uni.saveImageToPhotosAlbum({ filePath: posterUrl.value })
+	uni.showToast({ title: '已保存相册', icon: 'none' })
+ //    uni.downloadFile({
+	// 	url:designerInfo.value.homeUrl,
+	// 	success: (res) => {
+	// 		uni.saveImageToPhotosAlbum({
+	// 		  // filePath: res.tempFilePath,
+	// 		  filePath: res.tempFilePath,
+	// 		})
+	// 	}
+	// })
     await uni.showToast({ title: '保存成功' })
   } catch (e) {
     await uni.showToast({ title: '保存失败', icon: 'none' })
@@ -144,6 +189,7 @@ onLoad(async (query: { id: string }) => {
   // #ifdef MP-WEIXIN
   // await generateCodeMp()
   await setDesignerInfo()
+  posterUrl.value = await createCode()
   // #endif
   // #ifdef H5
   await generateCode()
@@ -156,13 +202,12 @@ onReady(() => {})
     <div class="flex-grow flex flex-col justify-center">
       <div>
         <!-- #ifdef MP-WEIXIN -->
-		<wd-img :width="204" :height="204" :src="designerInfo.homeUrl"></wd-img>
-        <!-- <canvas
-          type="2d"
+		<!-- <wd-img :width="204" :height="204" :src="designerInfo.homeUrl"></wd-img> -->
+        <canvas
           id="qrcode"
           canvas-id="qrcode"
           style="width: 200px; height: 200px"
-        ></canvas> -->
+        ></canvas>
         <!-- #endif -->
         <!-- #ifdef H5 -->
         <canvas id="qrcode" canvas-id="qrcode" style="width: 200px; height: 200px"></canvas>

packages/merchant/src/core/libs/renders.ts

@@ -10,8 +10,9 @@ export const renders = {
     sex: (value) => ({
       type: 'Select',
       options: [
-        { label: '男', value: 0 },
-        { label: '女', value: 1 },
+        { label: '未知', value: 0 },
+        { label: '男', value: 1 },
+        { label: '女', value: 2 },
       ],
       value,
     }),