✨ feat:客户管理50%

src/pages/customerDetails/components/tagPopup/index.module.scss

@@ -0,0 +1,126 @@
+.scrollView {
+    height: 600px;
+
+    .thirdBox {
+        padding-left: 48px;
+
+        .thirdTopfont {
+            font-size: 28px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #000000;
+        }
+
+        .flexModebox {
+            margin-top: 24px;
+            display: flex;
+            flex-wrap: wrap;
+            flex-shrink: 0;
+
+            .activemodeBox {
+                margin-bottom: 10px;
+                margin-right: 16px;
+                padding: 17px 48px 17px 48px;
+                // width: 152px;
+                // height: 68px;
+                background: rgba(51, 127, 255, 0.1);
+                border-radius: 8px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #337FFF;
+                text-align: center;
+                line-height: 68px;
+                border: 1px solid #337FFF;
+                box-sizing: border-box;
+            }
+
+            .modeBox {
+                margin-bottom: 10px;
+                margin-right: 16px;
+                padding: 17px 48px 17px 48px;
+                // width: 152px;
+                // height: 68px;
+                background: #f6f6f6;
+                border-radius: 8px;
+                font-size: 28px;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: #000000;
+                border: 1px solid #f6f6f6;
+                text-align: center;
+                line-height: 68px;
+                box-sizing: border-box;
+                // opacity: 0.4;
+            }
+        }
+    }
+
+}
+
+.bottomBox {
+    width: 100%;
+    // width: 750px;
+    height: 160px;
+    background: #FFFFFF;
+    // position: fixed;
+    // bottom: calc($customTabBarHeight + env(safe-area-inset-bottom));
+    z-index: 99;
+    display: flex;
+    padding-top: 16px;
+    align-items: center;
+    justify-content: space-between;
+
+    .resetBox {
+        margin-left: 48px;
+        width: 311px;
+        height: 80px;
+        border-radius: 44px;
+        border: 1px solid #087EFF;
+        font-size: 28px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #337FFF;
+        text-align: center;
+        line-height: 80px;
+    }
+
+    .button {
+        margin-right: 32px;
+        width: 311px;
+        height: 80px;
+        background: #68b4ff;
+        border-radius: 44px;
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #FFFFFF;
+        text-align: center;
+        line-height: 80px;
+        letter-spacing: 4px;
+    }
+
+    .activeButton {
+        margin-right: 32px;
+        width: 311px;
+        height: 80px;
+        background: #337FFF;
+        border-radius: 44px;
+        font-size: 32px;
+        font-family: PingFangSC-Medium, PingFang SC;
+        font-weight: 500;
+        color: #fff;
+        text-align: center;
+        line-height: 80px;
+        letter-spacing: 4px;
+    }
+}
+
+.goLink {
+    position: absolute;
+    right: 32px;
+    top: 37px;
+    font-size: 28px;
+    font-weight: 400;
+    color: #337FFF;
+}

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

@@ -1,4 +1,4 @@
-import { View } from '@tarojs/components'
+import { View, ScrollView, Button } from '@tarojs/components'
 import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
 import styles from "./index.module.scss"
 import classnames from "classnames";
@@ -7,13 +7,94 @@ import { alert } from '@/common/common'
 import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
 import IconFont from '@/components/iconfont/iconfont'
 import Popup from '@/components/popup';
+import { goLink } from '@/common/common'
 interface Props {
     showPopup: boolean,
     handClose: () => void,
-    
+    purchaser_id?: string | number
+
 }
 export default memo((props: Props) => {
+
+
+    //标签
+    const [modeList, setModeList] = useState<any[]>([{ id: -1, name: '不限' }, { id: 0, name: '大货' }, { id: 1, name: '剪版' }, { id: 2, name: '散剪' }, { id: 3, name: '新开发客户' }])
+    //选择标签
+    const handCheckMode = (item) => {
+        modeList.map(it => {
+            if (it.id === item.id) {
+                it.checked = !it.checked
+            }
+            return it
+        })
+        setModeList([...modeList])
+    }
+
+    const handReset = () => {
+        modeList.map(it => {
+            it.checked = false
+            return it
+        })
+        setModeList([...modeList])
+    }
+
+    const handSure = () => {
+
+    }
+
+    const isDisabled = useMemo(() => {
+        let arr = modeList.filter(item => { return item.checked })
+        if (arr.length) {
+            return false
+        } else {
+            return true
+        }
+    }, [modeList])
+
+    const choseNums = useMemo(() => {
+        let arr = modeList.filter(item => { return item.checked })
+        return arr.length
+    }, [modeList])
+
     return (
-        <Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}></Popup>
+        <Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}>
+            <ScrollView scrollY className={styles.scrollView}>
+                <View className={styles.thirdBox}>
+                    <View className={styles.thirdTopfont}>自定义标签分组</View>
+                    <View className={styles.flexModebox}>
+                        {modeList.map((item, index) => {
+                            return (
+                                <View
+                                    onClick={() => {
+                                        handCheckMode(item)
+                                    }}
+                                    className={classnames(item.checked ? styles.activemodeBox : styles.modeBox)}
+                                    key={index}>
+                                    {item.name}
+                                </View>
+                            )
+                        })}
+                    </View>
+                </View>
+            </ScrollView>
+            <View className={styles.bottomBox}>
+                <Button
+                    className={styles.resetBox}
+                    onClick={() => {
+                        handReset()
+                    }}>
+                    重置
+                </Button>
+                <Button
+                    className={classnames(isDisabled ? styles.button : styles.activeButton)}
+                    disabled={isDisabled}
+                    onClick={() => {
+                        handSure?.()
+                    }}>
+
+                    保存({choseNums})
+                </Button>
+            </View>
+        </Popup>
     )
 })

src/pages/customerDetails/index.tsx

@@ -12,8 +12,11 @@ import Tabs from "./components/tabs"
 import Form from "./components/form"
 import AddressList from "@/components/AddressList"
 import TagPopup from './components/tagPopup';
+import { goLink } from '@/common/common'
+
 export default () => {
     const router = useRouter()
+
     const [status, setstatus] = useState<number>(1)
 
     //顶部栏
@@ -53,7 +56,7 @@ export default () => {
                             </View>
                         </View>
                     </View>
-                    <View className={styles.pos}>{'编辑 >'}</View>
+                    <View className={styles.pos} onClick={() => goLink('/pages/customerEditor/index?id=' + router.params.purchaser_id)}>{'编辑 >'}</View>
                 </View>
                 <Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
             </View>