🎈 perf(邀请码): 追加分页功能

src/api/inviteCode/index.ts

@@ -13,6 +13,7 @@ export const GetInvitationList = () => {
   return useRequest({
     url: '/v2/mp/user/inviterList',
     method: 'get',
+    pagination: true,
   })
 }
 // 生成二维码

src/components/bindSalesmanDialog/index.module.scss

@@ -1,76 +1,76 @@
-.bindSalesman_main{
-    width: 100%;
-    height: 100vh;
-    position: fixed;
-    left:0;
-    top:0;
-    .bindSalesman_pop{
-        width: 598px;
-        height: 654px;
-        background: #ffffff;
-        border-radius: 40px; 
-        display: flex;
-        flex-direction: column;
-        position:absolute;
-        margin:auto;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        top: 0;
-        bottom: 0;
-        z-index: 1999;
-        .bindSalesman_header{
-            height: 300px;
-            width: 100%;
-            image{
-                width: 100%;
-                height: 100%;
-                border-radius: 40px 40px 0 0;
-            }
-        }
-        .bindSalesman_message{
-            color: #707070;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            flex:1;
-            font-size: 26px;
-            padding: 0 30px;
-            text{
-                display: block;
-                &:nth-child(1) {
-                    font-size: 28px;
-                    font-weight: 700;
-                    margin-bottom: 20px;
-                }
-            }
-        }
-        .bindSalesman_operation{
-            display: flex;
-            .btns{
-                flex:1;
-                border-top: 1PX solid #dddddd;
-                height: 128px;
-                text-align: center;
-                line-height: 128px;
-                font-size: 26px;
-                color: #707070;
-                &:nth-child(2) {
-                    border-left: 1PX solid #dddddd;
-                    color: #007AFF;
-                }
-            }
-        }
-    }
-    .bindSalesman_mask{
-        z-index: 99;
-        position: absolute;
-        left:0;
-        top:0;
-        width: 100%;
-        height: 100%;
-        opacity: 0.8;
-        background: #000000;
-    }
+.bindSalesman_main{
+    width: 100%;
+    height: 100vh;
+    position: fixed;
+    left:0;
+    top:0;
+    .bindSalesman_pop{
+        width: 598px;
+        height: 654px;
+        background: #ffffff;
+        border-radius: 40px; 
+        display: flex;
+        flex-direction: column;
+        position:absolute;
+        margin:auto;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 1999;
+        .bindSalesman_header{
+            height: 300px;
+            width: 100%;
+            image{
+                width: 100%;
+                height: 100%;
+                border-radius: 40px 40px 0 0;
+            }
+        }
+        .bindSalesman_message{
+            color: #707070;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            flex:1;
+            font-size: 26px;
+            padding: 0 30px;
+            text{
+                display: block;
+                &:nth-child(1) {
+                    font-size: 28px;
+                    font-weight: 700;
+                    margin-bottom: 20px;
+                }
+            }
+        }
+        .bindSalesman_operation{
+            display: flex;
+            .btns{
+                flex:1;
+                border-top: 1PX solid #dddddd;
+                height: 128px;
+                text-align: center;
+                line-height: 128px;
+                font-size: 26px;
+                color: #707070;
+                &:nth-child(2) {
+                    border-left: 1PX solid #dddddd;
+                    color: #007AFF;
+                }
+            }
+        }
+    }
+    .bindSalesman_mask{
+        z-index: 99;
+        position: absolute;
+        left:0;
+        top:0;
+        width: 100%;
+        height: 100%;
+        opacity: 0.8;
+        background: #000000;
+    }
 }

src/components/bindSalesmanDialog/index.tsx

@@ -1,58 +1,58 @@
-import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
-import Taro from '@tarojs/taro'
-import styles from './index.module.scss'
-import { formatImgUrl } from '@/common/format'
-import { goLink } from '@/common/common'
-
-interface params {
-  show?: true | false
-  onClose?: () => void
-}
-const BindSalesManPopUp = ({ show, onClose }: params) => {
-  const onCustomer = async() => {
-    const res = await Taro.showModal({
-      title: '是否拨打服务热线',
-      confirmText: '拨打',
-      content: '(0757) 8270 6695',
-      cancelText: '取消',
-    })
-    if (res.confirm) {
-      Taro.makePhoneCall({
-        phoneNumber: '(0757)82706695',
-      })
-    }
-  }
-
-  const onConfirm = () => {
-    onClose?.()
-    goLink('/pages/bindSalesman/index')
-  }
-  return (
-    <>
-      {show && (
-        <View className={styles.bindSalesman_main}>
-          <View className={styles.bindSalesman_pop}>
-            <View className={styles.bindSalesman_header}>
-              <Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill" />
-            </View>
-            <View className={styles.bindSalesman_message}>
-              <Text>提示</Text>
-              <Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
-            </View>
-            <View className={styles.bindSalesman_operation}>
-              <View className={styles.btns} onClick={() => onConfirm()}>
-                输入邀请码
-              </View>
-              <View className={styles.btns} onClick={() => onCustomer()}>
-                联系客服
-              </View>
-            </View>
-          </View>
-          <View className={styles.bindSalesman_mask} onClick={onClose}></View>
-        </View>
-      )}
-    </>
-  )
-}
-
-export default BindSalesManPopUp
+import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
+import Taro from '@tarojs/taro'
+import styles from './index.module.scss'
+import { formatImgUrl } from '@/common/format'
+import { goLink } from '@/common/common'
+
+interface params {
+  show?: true | false
+  onClose?: () => void
+}
+const BindSalesManDialog = ({ show, onClose }: params) => {
+  const onCustomer = async() => {
+    const res = await Taro.showModal({
+      title: '是否拨打服务热线',
+      confirmText: '拨打',
+      content: '(0757) 8270 6695',
+      cancelText: '取消',
+    })
+    if (res.confirm) {
+      Taro.makePhoneCall({
+        phoneNumber: '(0757)82706695',
+      })
+    }
+  }
+
+  const onConfirm = () => {
+    onClose?.()
+    goLink('/pages/bindSalesman/index')
+  }
+  return (
+    <>
+      {show && (
+        <View className={styles.bindSalesman_main}>
+          <View className={styles.bindSalesman_pop}>
+            <View className={styles.bindSalesman_header}>
+              <Image src={formatImgUrl('/mall/invite_code_top.png', '!w400')} mode="aspectFill" />
+            </View>
+            <View className={styles.bindSalesman_message}>
+              <Text>提示</Text>
+              <Text>暂未开通下单权限功能，稍后有客服联系您，请注意接收电话。</Text>
+            </View>
+            <View className={styles.bindSalesman_operation}>
+              <View className={styles.btns} onClick={() => onConfirm()}>
+                输入邀请码
+              </View>
+              <View className={styles.btns} onClick={() => onCustomer()}>
+                联系客服
+              </View>
+            </View>
+          </View>
+          <View className={styles.bindSalesman_mask} onClick={onClose}></View>
+        </View>
+      )}
+    </>
+  )
+}
+
+export default BindSalesManDialog

src/components/shopCart/index.tsx

@@ -3,7 +3,7 @@ import Taro from '@tarojs/taro'
 import classnames from 'classnames'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import Counter from '../counter'
-import BindSalesmanPopup from '../bindSalesmanPopup'
+import BindSalesmanPopup from '../bindSalesmanDialog'
 import LabAndImgShow from '../LabAndImgShow'
 import LabAndImg from '../LabAndImg'
 import styles from './index.module.scss'

src/pages/inviteCode/index.tsx

@@ -11,40 +11,7 @@ import NormalButton from '@/components/normalButton'
 import { alert } from '@/common/common'
 import { GenBarCodeOrQrCode, GetInvitationInfo, GetInvitationList } from '@/api'
 import { getCDNSource } from '@/common/constant'
-import Painter from '@/components/painter'
 
-const SystemInfo = Taro.getSystemInfoSync()
-let screenK = 5
-/**
-   * 是否支持负数
-   * @param {Boolean} minus 是否支持负数
-   */
-const toPx = (num: string, minus = false) => {
-  let reg
-  if (minus) {
-    reg = /^-?[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g
-  }
-  else {
-    reg = /^[0-9]+([.]{1}[0-9]+){0,1}(rpx|px)$/g
-  }
-  const results = reg.exec(num)
-  console.log('results', results)
-  if (!num || !results) {
-    console.log(`The size: ${num} is illegal`)
-    return 0
-  }
-  const unit = results[2]
-  const value = parseFloat(num)
-
-  let res = 0
-  if (unit === 'rpx') {
-    res = Math.round(value * screenK)
-  }
-  else if (unit === 'px') {
-    res = value
-  }
-  return res
-}
 // 需要传进来的表头数据示例
 const inviteColumns = [
   {
@@ -60,10 +27,10 @@ const inviteColumns = [
     width: '50%',
   },
 ]
-
+const defaultSize = 24
 // 邀请码
 const InviteCode = () => {
-  screenK = SystemInfo.screenWidth / 750
+  const sizeRef = useRef(defaultSize)
   const { fetchData: getInvitationListAPI } = GetInvitationList()
   const { fetchData } = GetInvitationInfo()
   const { fetchData: genCode } = GenBarCodeOrQrCode()
@@ -74,7 +41,7 @@ const InviteCode = () => {
   })
   const [loading, setLoading] = useState(false)
   const getInvitationList = async() => {
-    const res = await getInvitationListAPI()
+    const res = await getInvitationListAPI({ size: sizeRef.current })
     if (res.success) {
       console.log('getInviteCode', res)
       setCurrentTable((prev: any) => ({
@@ -134,7 +101,6 @@ const InviteCode = () => {
   }
   // canvas 生成 图片
   const saveCanvasToImage = (canvas) => {
-    console.log('pixelRatio', SystemInfo.pixelRatio, canvas)
     Taro.canvasToTempFilePath({
       canvas,
       fileType: 'png',
@@ -186,7 +152,6 @@ const InviteCode = () => {
     }
   }
   const [canvasStyle, setCanvasStyle] = useState<React.CSSProperties>({})
-  const painter = useRef<any>(null)
   const startPaint = async(ctx: Taro.RenderingContext, canvas: Taro.Canvas, image: Taro.Image) => {
     // 开始绘制
     const { width, height } = canvas
@@ -273,7 +238,7 @@ const InviteCode = () => {
   }
   // 加载更多
   const handleLoadMore = () => {
-
+    sizeRef.current += defaultSize
   }
   const handleQRcodeShare = async() => {
     try {
@@ -303,19 +268,6 @@ const InviteCode = () => {
       initCanvas()
     }, 200)
   })
-  const onImgErr = (e) => {
-    Taro.hideLoading()
-    console.error('onImgErr', e.error)
-    Taro.showToast({
-      title: '生成分享图失败，请刷新页面重试',
-    })
-  }
-  const onImgOK = (e) => {
-    console.log('onImgOK', e.path)
-    setTargetImageUrl(e.path)
-    setShowPopup(true)
-    Taro.hideLoading()
-  }
   return <View className={style.main}>
     <View className={style.content}>
       <View className={style.background}>