✨ feat(发货列表): 初步完成发货列表UI界面

src/components/SegmentedControl/index.module.scss

@@ -0,0 +1,19 @@
+.status_list{
+    background-color: #fff;
+    font-size: $font_size;
+    color: #000;
+    // margin-top: 20px;
+    .status_item{
+        padding: 20px;
+        box-sizing: border-box;
+    }
+    .selected{
+        font-weight: 700;
+        color: #337FFF;
+        border-bottom: 4px solid #337FFF;
+    }
+    .list_scroll{
+        white-space: nowrap;
+        display: flex;
+    }
+}

src/components/SegmentedControl/index.tsx

@@ -0,0 +1,59 @@
+import { ScrollView, View } from '@tarojs/components'
+import classnames from 'classnames'
+import { FC, useEffect, useState } from 'react'
+import styles from './index.module.scss'
+
+type PropsType = {
+  list: { id: number; name: string }[]
+  defaultId?: number | null
+  onSelect?: (val: number) => void
+}
+
+const segmentedControl: FC<PropsType> = (props) => {
+  const [selectInfo, setSelectInfo] = useState({
+    selected: -1, //当前选中的id
+    tabId: '', //需要滚动到的id
+  })
+  const { list, defaultId, onSelect } = props
+
+  useEffect(() => {
+    if (typeof defaultId === 'number' && defaultId >= 0) {
+      console.log('defaultId:::', defaultId)
+      const index = list?.findIndex((item) => {
+        return item.id == defaultId
+      })
+      if (index !== -1) {
+        const num = index > 0 ? index - 1 : 0
+        setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString() }))
+      }
+    }
+    setSelectInfo((e) => ({ ...e, selected: defaultId || -1 }))
+  }, [defaultId])
+
+  const clickEvent = ({ item, index }: { item: any; index: number }) => {
+    const num = index > 0 ? index - 1 : 0
+    setSelectInfo((e) => ({ ...e, tabId: list[num].id.toString(), selected: item.id }))
+    onSelect?.(item.id)
+  }
+
+  return (
+    <View className={styles.status_list}>
+      <ScrollView scrollX scrollIntoView={`tabs_${selectInfo.tabId}`} scrollWithAnimation={true}>
+        <View className={styles.list_scroll}>
+          {list.map((item, index) => {
+            return (
+              <View
+                key={item.id}
+                id={`tabs_${item.id}`}
+                onClick={() => clickEvent({ item, index })}
+                className={classnames(styles.status_item, selectInfo.selected == item.id && styles.selected)}>
+                {item.name}
+              </View>
+            )
+          })}
+        </View>
+      </ScrollView>
+    </View>
+  )
+}
+export default segmentedControl

src/components/search/index.module.scss

@@ -12,7 +12,7 @@
         position: relative;
         display: flex;
         align-items: center;
-        width: 100%;
+        flex: 1 1 auto;
         input{
             font-size: 27px;
             background: #eee;
@@ -66,4 +66,4 @@
         padding-left: 20px !important;
     }
     
-}
+}

src/components/search/index.tsx

@@ -18,7 +18,8 @@ type Params = {
     btnTitle?: string,
     debounceTime?: number //防抖时间，不设默认为零
     defaultValue?: string,
-    children?: ReactNode
+    children?: ReactNode,
+    customRightSlot?: ReactNode
 }
 
 export default memo(forwardRef(({
@@ -33,7 +34,8 @@ export default memo(forwardRef(({
     btnTitle = '搜索', //搜索文字
     debounceTime = 0, //防抖时间，不设默认为零
     defaultValue = '',//默认值
-    children
+    children,
+    customRightSlot
 }: Params, ref) => {
     const [inputCon, setInputCon] = useState('')
     const debounceTimeRef = useRef(0)
@@ -69,18 +71,40 @@ export default memo(forwardRef(({
     }
 
     return (
-        <>
-            <View className={styles.search_main}>
-                <View className={styles.search_con}>
-                    {showIcon && <View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon == 'inner' ? styles.icon_inner : styles.icon_out)}></View>}
-                    <Input placeholderStyle='color:#ABABAB; font-size:26rpx' onConfirm={onSearch} className={classnames(placeIcon == 'out' && styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>
-                    {!!inputCon && <View className={styles.search_closeBtn}>
-                        <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
-                    </View>}
-                </View>
-                {showBtn && <View style={btnStyle} className={styles.btn} onClick={onSearch}>{btnTitle}</View>}
-                {children}
+      <>
+        <View className={styles.search_main}>
+          <View className={styles.search_con}>
+            {showIcon && (
+              <View
+                className={classnames(
+                  'iconfont',
+                  'icon-sousuo',
+                  styles.icon_a_sousuo1_self,
+                  placeIcon == 'inner' ? styles.icon_inner : styles.icon_out,
+                )}></View>
+            )}
+            <Input
+              placeholderStyle='color:#ABABAB; font-size:26rpx'
+              onConfirm={onSearch}
+              className={classnames(placeIcon == 'out' && styles.input_out)}
+              disabled={disabled}
+              value={inputCon}
+              placeholder={placeholder}
+              onInput={(e) => onInputEven(e)}></Input>
+            {!!inputCon && (
+              <View className={styles.search_closeBtn}>
+                <CloseBtn onClose={() => clearInput()} styleObj={{ width: '20rpx', height: '20rpx', backgroundColor: '#fff', border: '0' }} />
+              </View>
+            )}
+            {customRightSlot}
+          </View>
+          {showBtn && (
+            <View style={btnStyle} className={styles.btn} onClick={onSearch}>
+              {btnTitle}
             </View>
-        </>
+          )}
+          {children}
+        </View>
+      </>
     )
-}))
+}))