🦄 refactor:首页加入购物车

src/pages/customerPage/index.config.ts

@@ -0,0 +1,3 @@
+export default {
+    navigationBarTitleText: '选择客户',
+}

src/pages/customerPage/index.module.scss

@@ -0,0 +1,106 @@
+page {
+    background: #f7f7f7;
+}
+
+.cussBox {
+
+    .searchBox {
+        position: sticky;
+        top: 0;
+        width: 750px;
+        height: 96px;
+        background: #FFFFFF;
+        display: flex;
+        align-items: center;
+
+        .two {
+            width: 702px;
+            height: 72px;
+            margin-left: 24px;
+        }
+    }
+
+    .itemBox {
+        margin-left: 24px;
+        width: 702px;
+        height: 104px;
+        background: #FFFFFF;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        margin-top: 24px;
+        box-sizing: border-box;
+
+        .cussName {
+            margin-left: 48px;
+            width: 168px;
+            height: 34px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .phone {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .woker {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+    }
+
+    .acticveitemBox {
+        margin-left: 24px;
+        width: 702px;
+        height: 104px;
+        background: #FFFFFF;
+        border-radius: 16px;
+        display: flex;
+        align-items: center;
+        margin-top: 24px;
+        box-sizing: border-box;
+
+        border: 1px solid #337FFF;
+
+        .cussName {
+            margin-left: 48px;
+            width: 168px;
+            height: 34px;
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .phone {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+
+        .woker {
+            margin-left: 88px;
+            font-size: 28px;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: #000000;
+        }
+    }
+}

src/pages/customerPage/index.tsx

@@ -0,0 +1,112 @@
+import { View, ScrollView, Image, Input, Button } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Search from '@/components/search'
+import { ClientListApi } from '@/api/order'
+import { useDidShow } from '@tarojs/taro';
+import Taro from '@tarojs/taro'
+import { useRouter } from '@tarojs/taro'
+
+export default () => {
+
+    const [search, setSearch] = useState({
+        name: null
+    })
+    const [clentList, setClientlist] = useState<any[]>([])
+
+
+    const [clientObj, setclientObj] = useState({})
+
+    //输入了搜索关键字
+    const getSearchData = useCallback((eq) => {
+
+        setSearch({ name: eq })
+
+    }, [])
+
+
+    const router = useRouter()
+    // useDidShow(() => {
+    //     if (router?.params.clientId) {
+    //         clentList.map(item => {
+    //             if (item.id == router?.params.clientId) {
+    //                 item.checked = true
+    //             }else{
+
+    //             }
+    //         })
+    //     }
+    // })
+
+    useEffect(() => {
+        setSearch(search)
+        if (search.name !== '') getCuss()
+    }, [search])
+
+
+    const { fetchData: clitentFetch } = ClientListApi()
+    const getCuss = async () => {
+        let res = await clitentFetch({ name: search.name === null ? '' : search.name })
+        if (router?.params.clientId) {
+            res.data.list.map(item => {
+                if (item.id == router?.params.clientId) {
+                    item.checked = true
+                } else {
+                    item.checked = false
+                }
+                return item
+            })
+        }
+        // res.data.list.map(item => {
+        //     item.checked = false
+        // })
+        setClientlist([...res.data.list])
+    }
+
+    //选择客户
+    const selectClient = (item) => {
+        clentList.map(it => {
+            if (item.id === it.id) {
+                it.checked = true
+            } else {
+                it.checked = false
+            }
+            return it
+        })
+        let pages = Taro.getCurrentPages(); // 获取当前的页面栈 
+        let prevPage = pages[pages.length - 2];
+        prevPage.setData({ //设置上一个页面的值
+            clientId: item.id,
+            clientName: item.name
+        });
+        setClientlist([...clentList])
+        setclientObj(item)
+        Taro.navigateBack({
+            delta: 1
+        })
+    }
+
+    return (
+        <View className={styles.cussBox}>
+            <View className={styles.searchBox}>
+                <View className={styles.two}>
+                    <Search placeholder='请输入客户名称或手机号码' showBtn={false} changeOnSearch={getSearchData} debounceTime={300} />
+                </View>
+
+            </View>
+            {
+                clentList.map((item, index) => {
+                    return (
+                        <View className={classnames(item.checked ? styles.acticveitemBox : styles.itemBox)} key={index} onClick={() => { selectClient(item) }}>
+                            <View className={styles.cussName}>{item.name}</View>
+                            <View className={styles.phone}>{item.phone}</View>
+                            <View className={styles.woker}>{item.sale_user_name}</View>
+                        </View>
+                    )
+                })
+            }
+
+        </View>
+    )
+}