🎈 perf(按钮): 优化normalButton组件

src/pages/takeDelivery/components/Filter/index.module.scss

@@ -21,13 +21,7 @@
     grid-template-columns: 1fr 1fr;
   }
 }
-.filterTypeButton {
-  padding: 0 24px;
-  font-size: 28px;
-}
-.filterTypeText {
-  color: #6e6e6e !important;
-}
+
 .filterTimeButton {
   grid-column-start: span 2;
 }
@@ -35,36 +29,6 @@
   background-color: #eaf2ff;
 }
 
-.filterButton {
-  display: flex;
-  flex-flow: row nowrap;
-  align-items: center;
-  justify-content: center;
-  padding: 0 20px;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background-color: #f6f6f6;
-  border-radius: 8px;
-  font-size: 28px;
-  height: 72px;
-  &--text {
-    color: #909090;
-    display: flex;
-    flex-flow: row nowrap;
-    justify-content: center;
-    align-items: center;
-  }
-  &:hover {
-    opacity: 0.7;
-  }
-  &--active {
-    border: 1px solid $color_main;
-    background-color: #eaf2ff;
-    .filterButton--text {
-      color: $color_main;
-    }
-  }
-}
 .filterController {
   margin-top: 60px;
   width: 100%;

src/pages/takeDelivery/components/Filter/index.tsx

@@ -1,5 +1,4 @@
 import NormalButton from '@/components/normalButton'
-import Popup from '@/components/popup'
 import { View } from '@tarojs/components'
 import classnames from 'classnames'
 import styles from './index.module.scss'
@@ -9,7 +8,7 @@ import IconFont from '@/components/iconfont/iconfont'
 import { EnumTakeGoodsOrderTypeList } from '@/api/index'
 import dayjs from 'dayjs'
 import { getFilterData } from '@/common/util'
-import Taro from '@tarojs/taro'
+import FilterButton from '@/components/filterButton'
 
 interface SearchFilter {
   take_goods_order_type?: number
@@ -28,13 +27,6 @@ interface DeliveryPropsType {
   onReset?: () => void
 }
 
-interface ButtonPropsType {
-  isActive: boolean
-  onClick?: Function
-  children?: React.ReactNode
-  customClassName?: string
-}
-
 export const filterTimeOptions = {
   0: {
     name: '不限',
@@ -147,11 +139,14 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
             不限
           </FilterButton>
           {!!typeList?.length &&
-            typeList?.map((item) => {
+            typeList?.map(item => {
               return (
                 <FilterButton isActive={searchFilter.take_goods_order_type === item?.id} onClick={() => handleSelectedType(item?.id)}>
                   {item.name}
                 </FilterButton>
+                // <NormalButton type='info' circle onClick={() => handleSelectedType(item?.id)}>
+                //   {item.name}
+                // </NormalButton>
               )
             })}
         </View>
@@ -173,10 +168,10 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
         </View>
       </View>
       <View className={styles.filterController}>
-        <NormalButton type='primary' round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
+        <NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.rest_btn)} onClick={handleReset}>
           重置
         </NormalButton>
-        <NormalButton type='primary' plain round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
+        <NormalButton type='primary' round customClassName={classnames(styles.btn, styles.verify_btn)} onClick={handleConfirm}>
           确认
         </NormalButton>
       </View>
@@ -184,16 +179,5 @@ const DeliveryFilter = memo<DeliveryPropsType>((props) => {
   )
 })
 
-const FilterButton: FC<ButtonPropsType> = (props) => {
-  const { onClick, children, isActive = false, customClassName } = props
-  const handleClick = () => {
-    onClick?.()
-  }
-  return (
-    <View className={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)} onClick={handleClick}>
-      <View className={classnames(styles['filterButton--text'])}>{children}</View>
-    </View>
-  )
-}
 
 export default DeliveryFilter

src/pages/takeDelivery/components/ItemList/index.tsx

@@ -84,13 +84,14 @@ const ItemList:FC<PropsType> = (props) => {
         <NormalButton
           customClassName={styles.bottomBar__button}
           type='info'
+          plain
           customStyles={{ color: '#8e8e8e', borderColor: '#8e8e8e' }}
           round
           onClick={() => handleDetail(itemData)}>
           查看详情
         </NormalButton>
         {itemData?.status === 0 && (
-          <NormalButton customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
+          <NormalButton plain customClassName={styles.bottomBar__button} type='primary' round onClick={() => handleAudit(itemData?.id)}>
             确认审核
           </NormalButton>
         )}