[fix]1.修复横向弹幕偏移bug 2.简化进度条节点

c_client/src/components/_tb_comps/Barrage/HorizontalBarrage/Barrage.jsx

@@ -45,7 +45,7 @@ const Barrage = props => {
     timer.current = setInterval(() => {
       setAnimationData(
         Taro.createAnimation()
-          .translateX(nowIndex.current === 0 ? 0 : (-width / 2) * nowIndex.current)
+          .translateX(nowIndex.current === 0 ? 0 : Taro.pxTransform(-width * nowIndex.current))
           .step({
             duration: nowIndex.current === 0 ? 0 : 1000
           })

c_client/src/components/_tb_comps/_Progress/ProgressContext/index.jsx

@@ -4,19 +4,10 @@
 
 import React from 'react'
 
-export const BtnTexts = {
-  UNREACH: '',
-  REACH_UNRECEIVED: '',
-  REACH_RECEIVED: ''
-}
-
 export const ProgressGlobalConfig = {
   type: 1,
   maxLevel: 15,
-  width: 500,
-  BtnTexts
+  width: 500
 }
 
-
-
 export const ProgressContext = React.createContext()

c_client/src/components/_tb_comps/_Progress/ProgressNode/index.jsx

-import { View, Image } from '@tarojs/components'
-import { memo, useContext, useMemo } from 'react'
+import { View } from '@tarojs/components'
+import React, { memo, useContext, useMemo } from 'react'
 import classnames from 'classnames'
+import tbcc from 'tbcc-sdk-ts'
 
 import { ProgressContext } from '../ProgressContext'
 
 // css
 import styles from './index.module.less'
 
-const ProgressNode = memo(props => {
-  const {
-    descInfo,
-    iconInfo,
-    isReceived = false,
-    isReach,
-    levelValue,
-    levelPos,
-    id
-  } = props
-
-  const {
-    BtnTexts,
-    maxLevel,
-    nodeClassName,
-    iconImgClassName,
-    iconTxtClassName,
-    iconClassName,
-    descClassName,
-    btnClassName,
-    activeBtnClassName,
-    disableBtnClassName,
-    onReceviceClick
-  } = useMemo(() => useContext(ProgressContext), ProgressContext)
-
-  // 节点按钮点击
-  const btnClick = () => {
-    return isReach && !isReceived ? onReceviceClick(id) : null
-  }
+const { throttleHandle } = tbcc.utils
 
-  // 判断方法
-  const checkFunc = fn => {
-    return typeof fn === 'function'
-  }
-
-  // 判断对象是否为空
-  const checkObject = obj => {
-    return obj instanceof Object && JSON.stringify(obj) !== '{}'
-  }
+const ProgressNode = memo(props => {
+  /**
+   * isReach 是否达到当前进度
+   * levelValue 节点值
+   * levelPos 节点偏移
+   * onReceviceClick 达到当前进度才可点击触发
+   */
+  const { isReach, levelValue, levelPos, onReceviceClick = () => {} } = props
+
+  const { maxLevel, nodeClassName } = useMemo(
+    () => useContext(ProgressContext),
+    ProgressContext
+  )
 
   const getNodeStyle = classnames(styles['defualt-progress-node'], {
     [nodeClassName]: nodeClassName
   })
 
-  const getDescStyle = classnames(styles['defualt-progress-node-desc'], {
-    [descInfo?.className]: descInfo?.className,
-    [descClassName]: descClassName
-  })
-
-  const getIconStyle = classnames(styles['defualt-progress-node-icon'], {
-    [iconInfo?.className]: iconInfo?.className,
-    [iconClassName]: iconClassName
-  })
-
-  const getIconImgStyle = classnames(
-    styles['defualt-progress-node-icon-iconImg'],
-    {
-      [iconImgClassName]: iconImgClassName
-    }
-  )
-
-  const getIconTxtStyle = classnames(styles['defualt-progress-node-icon-txt'], {
-    [iconTxtClassName]: iconTxtClassName
-  })
-
-  const getBtnStyle = classnames(styles['defualt-progress-node-btn-txt'], {
-    [btnClassName]: !isReach && btnClassName,
-    [activeBtnClassName]: isReach && !isReceived && activeBtnClassName,
-    [disableBtnClassName]: isReach && isReceived && disableBtnClassName
-  })
+  const onNodeClick = throttleHandle(() => {
+    isReach && onReceviceClick()
+  }, 2000)
 
   return (
     <View
+      onTap={onNodeClick}
       className={getNodeStyle}
       style={{
-        left: levelPos ? levelPos : (levelValue / maxLevel) * 100 + '%'
+        left: levelPos || (levelValue / maxLevel) * 100 + '%'
       }}
     >
-      {/* 描述 */}
-      {checkObject(descInfo) && (
-        <View className={getDescStyle}>{descInfo.descTxt}</View>
-      )}
-      {/* icon */}
-      {checkObject(iconInfo) && (
-        <View className={getIconStyle}>
-          {iconInfo?.iconUrl && (
-            <Image className={getIconImgStyle} src={iconInfo.iconUrl} />
-          )}
-          {iconInfo?.iconTxt && (
-            <View className={getIconTxtStyle}>{iconInfo.iconTxt}</View>
-          )}
-        </View>
-      )}
-      {/* 节点按钮 */}
-      {checkFunc(onReceviceClick) && (
-        <View className={getBtnStyle} onTap={btnClick}>
-          {isReach
-            ? isReceived
-              ? BtnTexts.REACH_RECEIVED
-              : BtnTexts.REACH_UNRECEIVED
-            : BtnTexts.UNREACH}
-        </View>
-      )}
+      {/* 自定义 */}
     </View>
   )
 })

c_client/src/components/_tb_comps/_Progress/README.md

@@ -11,7 +11,7 @@
 ## 目录结构
   `ProgressContext` 进度条全局默认配置  
   
-  `ProgressNode` 进度条节点
+  `ProgressNode` 进度条节点 自定义
 
 ## API
 
@@ -22,43 +22,19 @@
 | className | 进度条节点组样式 | Object | - |  |
 | maxLevel | 最大值 | Number | 15 |  |
 | width | 进度条长度 | Number | 500 |  |
-| BtnTexts | 进度按钮状态文本 | Object | {UNREACH: '待解锁',REACH_UNRECEIVED: '已解锁',REACH_RECEIVED: '已领取'} |  |
-| onReceviceClick | 点击进度按钮回调 | Function | （id）=>{} |  |
+| onReceviceClick | 点击进度按钮回调 | Function | （）=>{} |  |
 | nodeClassName | 节点样式 | Object | - |  |
-| iconImgClassName | icon图片样式 | Object | - |  |
-| iconTxtClassName | icon文本样式 | Object | - |  |
-| descClassName | 描述样式 | Object | - |  |
-| btnClassName | 进度按钮样式 | Object | - |  |
-| activeBtnClassName | 进度按钮可点样式 | Object | - |  |
-| disableBtnClassName | 进度按钮不可用样式 | Object | - |  |
 
 ## 示例一
 
 ```
 [
   {
-    id: 0,  //节点id
     levelValue: 0, //节点值
-    isReceived: true, //是否已领取
-    iconInfo: {
-      iconUrl: '//yun.dui88.com/tebuXinYuan/main-circle-tip.png',
-      iconTxt: ''
-    },
-    descInfo: {
-      descTxt: '等级1'
-    }
+    ...
   },
   {
-    id: 1,
     levelValue: 5,
-    isReceived: false,
-    iconInfo: {
-      iconUrl: '//yun.dui88.com/tebuXinYuan/main-circle-tip.png',
-      iconTxt: ''
-    },
-    descInfo: {
-      descTxt: '等级2'
-    }
-  }
+    ...
 ]
 ```

c_client/src/components/_tb_comps/_Progress/index.jsx

 import { View } from '@tarojs/components'
-import { memo, useMemo, useCallback } from 'react'
+import React,{ memo, useMemo, useCallback } from 'react'
 import classnames from 'classnames'
 
 import ProgressNode from './ProgressNode'
@@ -12,6 +12,7 @@ import {
 
 const Progress = memo(props => {
   const {
+    onReceviceClick,
     levelList = [],
     currentValue = 0,
     className,
@@ -85,6 +86,7 @@ const Progress = memo(props => {
               <ProgressNode
                 key={index}
                 {...item}
+                onReceviceClick={onReceviceClick}
                 isReach={item.levelValue <= currentValue}
               />
             )