🎈 perf(邀请码): 添加错误❌处理机制

src/pages/inviteCode/index.tsx

@@ -1,6 +1,7 @@
 import { Canvas, Image, Text, View } from '@tarojs/components'
 import Taro, { useReady } from '@tarojs/taro'
 import { useCallback, useRef, useState } from 'react'
+import { imageAudit } from '@tarojs/taro-h5'
 import style from './index.module.scss'
 import inviteCodePng from './inviteCode.png'
 import QRcode from './inviteCodePopup.png'
@@ -37,6 +38,7 @@ const InviteCode = () => {
     columns: inviteColumns,
     dataSource: { list: [], total: 0 },
   })
+  const [loading, setLoading] = useState(false)
   // 获取邀请码
   const getInviteCode = async() => {
     const res = await fetchData()
@@ -59,10 +61,13 @@ const InviteCode = () => {
   }
   // 生成二维码
   const genQRcode = async() => {
-    const res = await genCode({ content: inviteInfo.invitation_code })
+    const res = await genCode({ content: `InviteCode:${inviteInfo.invitation_code}` })
     if (res.success) {
       return res.data.qrcode_base64
     }
+    else {
+      setLoading(false)
+    }
   }
 
   const [, setForceUpdate] = useState({})
@@ -97,6 +102,9 @@ const InviteCode = () => {
         console.log('tempFilePath', res.tempFilePath)
         setTargetImageUrl(res.tempFilePath)
       },
+      complete: () => {
+        setLoading(false)
+      },
     })
   }
   const getImageInfo = (filePath) => {
@@ -109,17 +117,20 @@ const InviteCode = () => {
   }
   // 初始化 canvas
   const initCanvas = async() => {
-    Taro.nextTick(() => {
-      const query = Taro.createSelectorQuery()
-      query.select('#canvas').node(({ node: canvas }: { node: Taro.Canvas }) => {
-        console.log('canvas==>', canvas)
-        const context = canvas.getContext('2d')
-        console.log('ctx', context)
-        canvasNode.current = canvas
-        ctx.current = context
-        console.log('canvas', canvas)
-        setForceUpdate({})
-      }).exec()
+    return new Promise((resolve, reject) => {
+      Taro.nextTick(() => {
+        const query = Taro.createSelectorQuery()
+        query.select('#canvas').node(({ node: canvas }: { node: Taro.Canvas }) => {
+          console.log('canvas==>', canvas)
+          const context = canvas.getContext('2d')
+          console.log('ctx', context)
+          canvasNode.current = canvas
+          ctx.current = context
+          console.log('canvas', canvas)
+          setForceUpdate({})
+          resolve(true)
+        }).exec()
+      })
     })
   }
   const startPaint = async(ctx, canvas, image) => {
@@ -160,18 +171,20 @@ const InviteCode = () => {
     }
     catch (err) {
       console.error('合成二维邀请码失败')
+      setLoading(false)
+      throw new Error('合成二维邀请码失败')
     }
 
     saveCanvasToImage(canvas)
   }
   // 绘制最终的海报，图片使用两倍大小，canvas大小是图片的二分之一 就能让canvas生成出来的图片清晰了
   const drawPictorial = async() => {
-    return new Promise((resolve, reject) => {
+    // eslint-disable-next-line no-async-promise-executor
+    return new Promise(async(resolve, reject) => {
+      setLoading(true)
       if (!ctx.current) {
         // 重新初始化canvas
-        initCanvas()
-        reject(new Error('ctx error'))
-        return false
+        await initCanvas()
       }
       const canvas = canvasNode.current
       Taro.getImageInfo({
@@ -179,11 +192,19 @@ const InviteCode = () => {
         success: (res) => {
           canvas.width = res.width / 2
           canvas.height = res.height / 2
-          getImageObject(canvas, `${res.path}`).then((image) => {
-            // 开始绘制
-            startPaint(ctx.current, canvasNode.current, image)
-            resolve(true)
+          getImageObject(canvas, `${res.path}`).then(async(image) => {
+            try {
+              // 开始绘制
+              await startPaint(ctx.current, canvasNode.current, image)
+              resolve(true)
+            }
+            catch (err) {
+              console.log(err)
+              setLoading(false)
+              reject(new Error('绘制失败'))
+            }
           }).catch((error) => {
+            setLoading(false)
             throw new Error(error)
           })
         },
@@ -195,8 +216,15 @@ const InviteCode = () => {
 
   }
   const handleQRcodeShare = async() => {
-    await drawPictorial()
-    setShowPopup(true)
+    try {
+      const flag = await drawPictorial()
+      if (flag) {
+        setShowPopup(true)
+      }
+    }
+    catch (err) {
+      throw new Error('弹出二维码失败')
+    }
   }
   // 复制二维码
   const handleCopyInviteCode = () => {
@@ -253,7 +281,7 @@ const InviteCode = () => {
     </View>
     <Canvas style="position: absolute; left: -9999rpx" id="canvas" canvas-id="canvas" type="2d" />
     <View className={style.bottomBar}>
-      <NormalButton plain type="primary" customStyles={{ width: '45%' }} round onClick={handleQRcodeShare}>
+      <NormalButton loading={loading} plain type="primary" customStyles={{ width: '45%' }} round onClick={handleQRcodeShare}>
           二维码分享
       </NormalButton>
       <NormalButton type="primary" round customStyles={{ width: '45%' }} onClick={handleCopyInviteCode}>