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

src/components/dropDown-item/index.module.scss

@@ -0,0 +1,3 @@
+.dropDownItem{
+  
+}

src/components/dropDown-item/index.tsx

@@ -0,0 +1,53 @@
+import { View, Text } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from './index.module.scss'
+import classnames from 'classnames'
+import Iconfont from '../iconfont/iconfont'
+// 弹窗选择向上弹窗还是向下弹窗
+type Direction = 'up' | 'down'
+// 配置 菜单可选项
+type Options = {
+  text: string
+  value: number
+}
+
+interface DropDownEvent {
+  change: (value: Options['value']) => void   // value 变化时触发
+}
+
+interface PropsType extends DropDownEvent{
+  direction?: Direction
+  title: string             // 已选中的菜单标题
+  options?: Options[]
+  value?: number | string     // 当前选中的值
+  children?: React.ReactNode
+  activeColor?: string
+}
+
+export default (props: PropsType) => {
+  const { children, direction = 'down', title, value, options, change, activeColor } = props
+
+  const defaultOptions = () => {
+    return options?.map(({text, value})=>{
+      return (
+        <View>
+          <Text>{text}</Text>
+          <Iconfont name='icon-bianji' size={40} color={value !== options[0].value ? activeColor : '#333'}></Iconfont>
+        </View>
+      )
+
+    })
+  }
+
+  return (
+    <View className={styles.dropDownItem}>
+      <View >
+        <Text className='' style={{ color: activeColor }}>
+          {title}
+        </Text>
+        <Iconfont name='icon-bianji' size={40} color={value !== options![0].value ? activeColor : '#333'}></Iconfont>
+      </View>
+      {children ? children : defaultOptions()}
+    </View>
+  )
+}

src/components/filterButton/index.module.scss

@@ -0,0 +1,31 @@
+
+.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;
+    }
+  }
+}

src/components/filterButton/index.tsx

@@ -0,0 +1,27 @@
+import classnames from "classnames"
+import { FC } from "react"
+import NormalButton from "../normalButton"
+import styles from './index.module.scss'
+
+interface ButtonPropsType {
+  isActive: boolean
+  onClick?: Function
+  children?: React.ReactNode
+  customClassName?: string
+}
+
+const FilterButton: FC<ButtonPropsType> = props => {
+  const { onClick, children, isActive = false, customClassName } = props
+  const handleClick = () => {
+    onClick?.()
+  }
+  return (
+    <NormalButton
+      customTextClassName={styles['filterButton--text']}
+      customClassName={classnames(styles.filterButton, isActive && styles['filterButton--active'], customClassName)}
+      onClick={handleClick}>
+      {children}
+    </NormalButton>
+  )
+}
+export default FilterButton

src/components/normalButton/index.module.scss

@@ -1,5 +1,4 @@
 .button {
-  $current_color: #fff;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
@@ -10,6 +9,7 @@
   background-color: #fff;
   text-align: center;
   color: #fff;
+  box-sizing: border-box;
   &--normal {
     height: 72px;
     font-size: $font_size_medium;
@@ -24,24 +24,23 @@
   // 按钮类型
   &--primary {
     border: 1px solid $color_main;
-    color: $color_main;
-    $current_color: $color_main;
+    background-color: $color_main;
+    color: white;
   }
   &--danger {
     border: 1px solid $color_danger;
-    color: $color_danger;
-    $current_color: $color_danger;
+    background-color: $color_danger;
+    color: white;
   }
   &--warning {
     border: 1px solid $color_warning;
-    color: $color_warning;
-    $current_color: $color_warning;
+    background-color: $color_warning;
+    color: white;
   }
   &--info {
     border: 1px solid $color_info;
-    color: $color_info;
-    $current_color: $color_info;
-    
+    background-color: $color_info;
+    color: white;
   }
   &--round {
     border-radius: 50px;
@@ -49,11 +48,24 @@
   &--circle {
     border-radius: 16px;
   }
+  // 朴素按钮
   &--plain {
-    background-color: currentColor;
-    border-color: currentColor;
-    .button--text {
-      color: #fff;
+    background-color: white;
+    &.button--primary {
+      border: 1px solid $color_main;
+      color: $color_main;
+    }
+    &.button--danger {
+      border: 1px solid $color_danger;
+      color: $color_danger;
+    }
+    &.button--warning {
+      border: 1px solid $color_warning;
+      color: $color_warning;
+    }
+    &.button--info {
+      border: 1px solid $color_info;
+      color: $color_info;
     }
   }
   &--text {

src/components/normalButton/index.tsx

@@ -11,7 +11,7 @@ interface PropsType {
   type?: ButtonType
   round?: boolean // 大圆角
   disabled?: boolean
-  plain?: boolean // 填满背景颜色
+  plain?: boolean // plain
   circle?: boolean // 小圆角
   children?: ReactNode
   onClick?: Function

src/components/search/index.module.scss

@@ -73,3 +73,6 @@
     padding-left: 20px !important;
   }
 }
+.customRightSlot{
+  margin-right: 20px;
+}

src/components/search/index.tsx

@@ -101,22 +101,21 @@ export default memo(
                   disabled={disabled}
                   value={inputCon}
                   placeholder={placeholder}
-                  onInput={(e) => onInputEven(e)}
+                  onInput={e => onInputEven(e)}
                 />
                 <View className={styles.search_closeBtn}>
                   {!!inputCon && <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />}
                 </View>
-                {
-                  showScan && <View onClick={() => {
-                    handScan?.()
-                  }}>
-                    <IconFont
-                      name={'icon-saomiao'} size={40} color={'#337FFF'}
-                    ></IconFont>
+                {showScan && (
+                  <View
+                    onClick={() => {
+                      handScan?.()
+                    }}>
+                    <IconFont name={'icon-saomiao'} size={40} color={'#337FFF'}></IconFont>
                   </View>
-                }
+                )}
 
-                <View>{customRightSlot}</View>
+                <View className={styles.customRightSlot}>{customRightSlot}</View>
               </View>
             </View>
             {showBtn && (