🦄 refactor(ID1000779): 八、收藏功能；

【八、收藏功能；】 https://www.tapd.cn/53459131/prong/stories/view/1153459131001000779

src/components/searchBar/index.module.scss

@@ -0,0 +1,78 @@
+.search_main {
+  display: flex;
+  align-items: center;
+  position: relative;
+  width: 100%;
+  z-index: 0;
+  .icon_a_sousuo1_self {
+    color: $color_font_two;
+  }
+  .search_con {
+    position: relative;
+    display: flex;
+    align-items: center;
+    flex: 1 1 auto;
+    justify-content: space-between;
+    .input_bar {
+      border-radius: 50px;
+      width: 100%;
+      height: 60px;
+      flex: 1 1 auto;
+      padding-left: 60px;
+      background: #eee;
+      box-sizing: border-box;
+      display: flex;
+      align-items: center;
+    }
+    input {
+      flex: 1 1 auto;
+      font-size: 27px;
+      z-index: 0;
+      &::-webkit-input-placeholder {
+        /* WebKit browsers */
+        color: #999;
+        font-size: 16px;
+      }
+
+      &::-moz-placeholder {
+        /* Mozilla Firefox 19+ */
+        color: #999;
+        font-size: 16px;
+      }
+
+      &::-ms-input-placeholder {
+        /* Internet Explorer 10+ */
+        color: #999;
+        font-size: 16px;
+      }
+    }
+    .search_closeBtn {
+      margin: 0 15px;
+      flex: none;
+    }
+  }
+  .btn {
+    width: 100px;
+    font-size: $font_size_medium;
+    color: $color_font_two;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .icon_inner {
+    margin-right: 20px;
+    position: absolute;
+    left: 10px;
+    margin-right: 0;
+    z-index: 10;
+  }
+  .icon_out {
+    margin-right: 10px;
+  }
+  .input_out {
+    padding-left: 20px !important;
+  }
+}
+.customRightSlot{
+  margin-right: 20px;
+}

src/components/searchBar/index.tsx

@@ -0,0 +1,127 @@
+import { View } from '@tarojs/components'
+import classnames from 'classnames'
+import type { ReactNode } from 'react'
+import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react'
+import IconFont from '../iconfont/iconfont'
+import InputX from '../InputX/index'
+import styles from './index.module.scss'
+import CloseBtn from '@/components/closeBtn'
+
+interface Params {
+  clickOnSearch?: (val: string) => void
+  disabled?: boolean
+  placeholder?: string
+  changeOnSearch?: (value: string) => void
+  showIcon?: boolean
+  placeIcon?: 'out' | 'inner'
+  style?: Object
+  showBtn?: boolean
+  btnStyle?: Object
+  btnTitle?: string
+  defaultValue?: string
+  children?: ReactNode
+  customRightSlot?: ReactNode
+  adjustPosition?: boolean
+  showScan?: boolean
+  handScan?: () => void
+  cursorSpacing?: Number
+}
+const Search = (
+  {
+    clickOnSearch, // 点击筛选按钮触发
+    changeOnSearch, // 输入文字触发
+    adjustPosition = false,
+    disabled = false, // 是否禁用
+    placeholder = '输入搜索内容',
+    showIcon = true, // 是否显示关闭图标
+    showBtn = false, // 是否显示搜索按钮
+    btnStyle = {},
+    placeIcon = 'inner', // 搜索图标位置：inner在里面，out在外面
+    btnTitle = '搜索', // 搜索文字
+    defaultValue = '', // 默认值
+    children,
+    customRightSlot,
+    showScan = false,
+    handScan,
+    cursorSpacing = 0,
+  }: Params,
+  ref,
+) => {
+  const [inputCon, setInputCon] = useState('')
+  useEffect(() => {
+    setInputCon(defaultValue)
+  }, [defaultValue])
+
+  const onInputEven = (e) => {
+    const value = e.detail.value
+    setInputCon(value)
+    changeOnSearch?.(value)
+  }
+
+  const clearInput = () => {
+    setInputCon('')
+    changeOnSearch?.('')
+  }
+  useImperativeHandle(ref, () => ({
+    clearInput,
+  }))
+  const onSearch = () => {
+    clickOnSearch?.(inputCon)
+  }
+
+  return (
+    <>
+      <View className={styles.search_main}>
+        <View className={styles.search_con}>
+          {showIcon && (
+            <IconFont
+              name="icon-sousuo"
+              size={40}
+              color="#bbbbbb"
+              customClassName={classnames(styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}
+            ></IconFont>
+          )}
+          <View className={styles.input_bar}>
+            <InputX
+              cursorSpacing={cursorSpacing as any}
+              adjustPosition={adjustPosition}
+              placeholderStyle="color:#ABABAB; font-size:26rpx"
+              onConfirm={onSearch}
+              disabled={disabled}
+              value={inputCon}
+              placeholder={placeholder}
+              onInput={e => onInputEven(e)}
+              customClassName={classnames(placeIcon == 'out' && styles.input_out)}
+              customStyle={{ width: '100%' }}
+            />
+            <View className={styles.search_closeBtn}>
+              {!!inputCon && <CloseBtn onClose={() => clearInput()} />}
+            </View>
+            {showScan && (
+              <View
+                onClick={() => {
+                  handScan?.()
+                }}
+              >
+                <IconFont name="icon-gongnengtubiao-saomiao" size={40} color="#337FFF"></IconFont>
+              </View>
+            )}
+
+            <View className={styles.customRightSlot}>{customRightSlot}</View>
+          </View>
+        </View>
+        {showBtn && (
+          <View style={btnStyle} className={styles.btn} onClick={onSearch}>
+            {btnTitle}
+          </View>
+        )}
+        {children}
+      </View>
+    </>
+  )
+}
+export default memo(
+  forwardRef(
+    Search,
+  ),
+)