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

src/components/loading/index.tsx

@@ -9,7 +9,6 @@ const Loading = ({ width = 60, color = '#6190e8' }: { width?: number; color?: st
     if (color) { obj = { ...obj, borderColor: `${color} transparent transparent` } }
     return obj
   }, [width, color])
-  console.log('loading:::')
   return (
     <View className={style.loading}
       style={styleObj}

src/components/normalButton/index.module.scss

@@ -10,6 +10,7 @@
   text-align: center;
   color: #fff;
   box-sizing: border-box;
+  
   &--normal {
     height: 72px;
     font-size: $font_size_medium;
@@ -69,10 +70,19 @@
     }
   }
   &--text {
+    position: relative;
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
     color: currentColor;
+    .loading {
+      position: absolute;
+      pointer-events: none;
+      left: -40px;
+      top: 50%;
+      transform: translateY(-50%);
+      z-index: 1;
+    }
   }
   // active 伪类
   &--primary:active {

src/components/normalButton/index.tsx

@@ -1,6 +1,7 @@
-import { Text, View } from '@tarojs/components'
+import { View } from '@tarojs/components'
 import type { FC, ReactNode } from 'react'
 import classnames from 'classnames'
+import Loading from '../loading'
 import styles from './index.module.scss'
 
 type ButtonType = 'primary' | 'danger' | 'warning' | 'info'
@@ -18,6 +19,7 @@ interface PropsType {
   customClassName?: string
   customStyles?: React.CSSProperties
   customTextClassName?: string
+  loading?: boolean
 }
 
 const NormalButton: FC<PropsType> = (props) => {
@@ -33,6 +35,7 @@ const NormalButton: FC<PropsType> = (props) => {
     customStyles = {},
     customClassName = '',
     customTextClassName = '',
+    loading = false,
   } = props
   const getClassName = () => {
     const classObject = {
@@ -55,7 +58,9 @@ const NormalButton: FC<PropsType> = (props) => {
 
   return (
     <View className={classnames(styles.button, getClassName(), customClassName)} style={customStyles} onClick={handleClick}>
-      <View className={classnames(styles['button--text'], customTextClassName)}>{children}</View>
+      <View className={classnames(styles['button--text'], customTextClassName)}>
+        <View className={styles.loading}>{loading && <Loading width={30} />}</View>
+        {children}</View>
     </View>
   )
 }

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}>