✨ 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