✨ feat:客户管理95%

src/pages/customerDetails/components/tagPopup/index.tsx

@@ -1,5 +1,5 @@
 import { View, ScrollView, Button } from '@tarojs/components'
-import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode, forwardRef, useImperativeHandle } from 'react'
 import styles from "./index.module.scss"
 import classnames from "classnames";
 import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
@@ -8,17 +8,28 @@ import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format
 import IconFont from '@/components/iconfont/iconfont'
 import Popup from '@/components/popup';
 import { goLink } from '@/common/common'
+import { mppurchaserlist, mppurchaserlabeladd } from "@/api/customer"
 interface Props {
     showPopup: boolean,
     handClose: () => void,
     purchaser_id?: string | number
-
+    diseShow?: () => void
 }
-export default memo((props: Props) => {
-
+export default memo(forwardRef((props: Props, ref) => {
+    const router = useRouter()
+    useEffect(() => {
+        getList()
+    }, [])
+    const { fetchData } = mppurchaserlist()
+    const getList = async () => {
+        const res = await fetchData()
+        if (res.data) {
+            setModeList([...res.data.list])
+        }
+    }
 
     //标签
-    const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }, { id: 3, name: '新开发客户' }])
+    const [modeList, setModeList] = useState<any[]>([])
     //选择标签
     const handCheckMode = (item) => {
         modeList.map(it => {
@@ -37,9 +48,34 @@ export default memo((props: Props) => {
         })
         setModeList([...modeList])
     }
-
-    const handSure = () => {
-
+    const { fetchData: addFetch } = mppurchaserlabeladd()
+    const handSure = async () => {
+        const arr: any[] = []
+        const fltArr = modeList.filter(item => { return item.checked })
+        fltArr.forEach(item => {
+            arr.push({
+                label_id: item.id
+            })
+        })
+        Taro.showLoading({
+            title: '请稍等...',
+            mask: true
+        })
+        const res = await addFetch({ binding_label: arr, purchaser_id: Number(router.params.purchaser_id) })
+        if (res.msg == 'success') {
+            Taro.showToast({
+                icon: 'success',
+                title: '成功'
+            })
+            Taro.hideLoading()
+        } else {
+            Taro.showToast({
+                icon: 'error',
+                title: res.msg
+            })
+            Taro.hideLoading()
+        }
+        props?.diseShow?.()
     }
 
     const isDisabled = useMemo(() => {
@@ -56,6 +92,11 @@ export default memo((props: Props) => {
         return arr.length
     }, [modeList])
 
+
+    useImperativeHandle(ref, () => ({
+        modeList,
+        setModeList
+    }))
     return (
         <Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}>
             <ScrollView scrollY className={styles.scrollView}>
@@ -97,4 +138,4 @@ export default memo((props: Props) => {
             </View>
         </Popup>
     )
-})
+}))

src/pages/customerDetails/index.module.scss

@@ -12,22 +12,27 @@
         background: #F6F7FB;
         border-radius: 16px;
         padding-bottom: 20px;
-        // margin-bottom: 16px;
 
-        .itemCile {
-            width: 78px;
-            height: 78px;
-            background: linear-gradient(337deg, #7BB7FF 0%, #4581FF 100%);
-            font-size: 32px;
-            font-weight: 500;
-            color: #FFFFFF;
-            text-align: center;
-            line-height: 78px;
-            border-radius: 50%;
-            margin-right: 32px;
-            margin-left: 32px;
+        // margin-bottom: 16px;
+        .leftSafe {
+            width: 142px;
+
+            .itemCile {
+                width: 78px;
+                height: 78px;
+                background: linear-gradient(337deg, #7BB7FF 0%, #4581FF 100%);
+                font-size: 32px;
+                font-weight: 500;
+                color: #FFFFFF;
+                text-align: center;
+                line-height: 78px;
+                border-radius: 50%;
+                margin-right: 32px;
+                margin-left: 32px;
+            }
         }
 
+
         .item_top_one {
             .item_top_one_flex {
                 display: flex;

src/pages/customerDetails/index.tsx

@@ -31,6 +31,7 @@ export default () => {
         const res = await getDesc({ id: router.params.purchaser_id })
         setinfoObj(res.data)
         Taro.hideLoading()
+        setshowPopup(false)
     }
 
     //顶部栏
@@ -57,11 +58,26 @@ export default () => {
     }
 
     const [showPopup, setshowPopup] = useState(false)
+    const TagPopupRef = useRef<any>()
+    const handShow = () => {
+        TagPopupRef?.current?.modeList.map(it => {
+            infoObj?.label_list?.forEach(item => {
+                if (it.id == item.label_id) {
+                    it.checked = true
+                }
+            })
+            return it
+        })
+        TagPopupRef.current.setModeList([...TagPopupRef.current.modeList])
+        setshowPopup(true)
+    }
     return (
         <View className={styles.mainBox}>
             <View className={styles.mainTop}>
                 <View className={styles.mainUser}>
-                    <View className={styles.itemCile}>{infoObj?.name?.[0]}</View>
+                    <View className={styles.leftSafe}>
+                        <View className={styles.itemCile}>{infoObj?.name?.[0]}</View>
+                    </View>
                     <View className={styles.item_top_one}>
                         <View className={styles.item_top_one_flex}>
                             <View className={styles.itemName}>{infoObj?.name}</View>
@@ -70,7 +86,14 @@ export default () => {
                         <View className={styles.item_tag_box}>
                             <View className={styles.item_tagItem}>{infoObj?.purchaser_type_name || '暂无'}</View>
                             <View className={styles.item_tagItem}>{infoObj?.sale_user_name || '暂无'}</View>
-                            <View className={styles.item_tagAdd} onClick={() => setshowPopup(true)}>
+                            {
+                                infoObj?.label_list?.map(item => {
+                                    return (
+                                        <View className={styles.item_tagItem}>{item.label_name}</View>
+                                    )
+                                })
+                            }
+                            <View className={styles.item_tagAdd} onClick={() => handShow()}>
                                 <View className={styles.item_add}>+</View>
                                 <View className={styles.item_add_font}>标签</View>
                             </View>
@@ -105,7 +128,7 @@ export default () => {
                     <AddressList ref={AddressListRef} refresherEnabled={true} purchaser_id={router.params.purchaser_id as any} />
                 </View>
             }
-            <TagPopup showPopup={showPopup} handClose={() => setshowPopup(false)}></TagPopup>
+            <TagPopup ref={TagPopupRef} showPopup={showPopup} handClose={() => setshowPopup(false)} diseShow={() => getInfo()}></TagPopup>
         </View>
     )
 }