333

src/dealer/orders/index.tsx

@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useCallback} from 'react'
 import {View, Text, ScrollView} from '@tarojs/components'
-import {Empty, PullToRefresh, Space, Loading, DatePicker, Button} from '@nutui/nutui-react-taro'
+import {Empty, PullToRefresh, Space, Loading, DatePicker, Picker} from '@nutui/nutui-react-taro'
 import {ArrowDown} from '@nutui/icons-react-taro'
 import Taro from '@tarojs/taro'
 import {pageShopDealerOrder} from '@/api/shop/shopDealerOrder'
@@ -14,6 +14,28 @@ interface OrderWithDetails extends ShopDealerOrder {
   userCommission?: string
 }
 
+interface PickerOption {
+  text: string | number
+  value: string | number
+  disabled?: boolean
+  children?: PickerOption[]
+  className?: string | number
+}
+
+const listData1 = [
+  [
+    { value: 1, text: '南京市' },
+    { value: 2, text: '无锡市' },
+    { value: 3, text: '海北藏族自治区' },
+    { value: 4, text: '北京市' },
+    { value: 5, text: '连云港市' },
+    { value: 8, text: '大庆市' },
+    { value: 9, text: '绥化市' },
+    { value: 10, text: '潍坊市' },
+    { value: 12, text: '乌鲁木齐市' },
+  ],
+]
+
 const DealerOrder: React.FC = () => {
   const [loading, setLoading] = useState<boolean>(false)
   const d = new Date()
@@ -26,6 +48,8 @@ const DealerOrder: React.FC = () => {
   const [orders, setOrders] = useState<OrderWithDetails[]>([])
   const [currentPage, setCurrentPage] = useState<number>(1)
   const [hasMore, setHasMore] = useState<boolean>(true)
+  const [visible, setVisible] = useState(false)
+  const [baseDesc, setBaseDesc] = useState('')
 
   const {dealerUser} = useDealerUser()
   const {user} = useUser()
@@ -112,6 +136,25 @@ const DealerOrder: React.FC = () => {
     return user.roles.some(role => role.roleCode === roleCode);
   }
 
+  const changePicker = (list: any[], option: any, columnIndex: number) => {
+    console.log(columnIndex, option)
+  }
+
+  const confirmPicker = (
+    options: PickerOption[],
+    values: (string | number)[]
+  ) => {
+    let description = ''
+    options.forEach((option: any) => {
+      description += ` ${option.text}`
+    })
+    setBaseDesc(description)
+  }
+
+  const selectUser = (visible:any) => {
+    setVisible(!visible)
+  }
+
 
   // 初始化加载数据
   useEffect(() => {
@@ -233,17 +276,26 @@ const DealerOrder: React.FC = () => {
         >
           {/*筛选工具条*/}
           <View
-            className={'p-4'}
-          >1
+            className={'p-4 flex items-center justify-between'}
+          >
             <View className={'select-month'}>
-              <Text className={'text-sm'} onClick={() => setShow1(true)}>{date ? `${date}` : '请选择'}</Text>
+              <Text className={'text-sm mx-1'} onClick={() => setShow1(true)}>{date ? `${date}` : '请选择'}</Text>
               <ArrowDown size={10} className={'text-gray-400'} onClick={() => setShow1(true)}/>
             </View>
-            <View className={'select-user'}>
-              <Button size={'mini'}>业务员</Button>
-              <Button size={'mini'}>聚道1</Button>
-              <Button size={'mini'}>聚道2</Button>
-            </View>
+            <Space>
+              <View className={'mx-1'} onClick={(visible) => selectUser(visible)}>
+                <Text className={'text-sm mx-1'}>业务员</Text>
+                <ArrowDown size={10} className={'text-gray-400'}/>
+              </View>
+              <View className={'mx-1'} onClick={(e) => e.stopPropagation()}>
+                <Text className={'text-sm mx-1'}>渠道一</Text>
+                <ArrowDown size={10} className={'text-gray-400'}/>
+              </View>
+              <View className={'mx-1'} onClick={(e) => e.stopPropagation()}>
+                <Text className={'text-sm mx-1'}>渠道二</Text>
+                <ArrowDown size={10} className={'text-gray-400'}/>
+              </View>
+            </Space>
           </View>
           {/*账单列表*/}
           <View className="px-4">
@@ -290,6 +342,14 @@ const DealerOrder: React.FC = () => {
           setDate(`${values[0]}${values[1]}`)
         }}
       />
+      <Picker
+        title="请选择城市"
+        visible={visible}
+        options={listData1}
+        onConfirm={(list, values) => confirmPicker(list, values)}
+        onClose={() => setVisible(false)}
+        onChange={changePicker}
+      />
     </View>
   )
 }