✨ feat:客户管理20%

2022-10-21 18:43:22 +08:00
parent da5d41cfaa
commit 18df424f70
21 changed files with 997 additions and 21 deletions
@@ -0,0 +1,80 @@
+.mainItem {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid #e5e5e5;
+    padding-bottom: 40px;
+    margin-bottom: 40px;
+
+    .mainItem_left {
+        width: 176px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+    }
+
+    .mainItem_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+        margin-right: 16px;
+    }
+
+    .mainItem_active_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #337FFF;
+        margin-right: 16px;
+    }
+
+    .call {
+        width: 65px;
+        height: 34px;
+        border-radius: 8px;
+        border: 1px solid #337FFF;
+        font-size: 24px;
+        font-weight: 400;
+        color: #337FFF;
+        line-height: 34px;
+        text-align: center;
+    }
+}
+
+.mainItem_active {
+    display: flex;
+    align-items: center;
+    border-bottom: none;
+    margin-bottom: 40px;
+
+    .mainItem_left {
+        width: 176px;
+        font-size: 28px;
+        font-weight: 500;
+        color: #000000;
+    }
+
+    .mainItem_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #000000;
+        margin-right: 16px;
+    }
+
+    .mainItem_active_right {
+        font-size: 28px;
+        font-weight: 400;
+        color: #337FFF;
+        margin-right: 16px;
+    }
+
+    .call {
+        width: 65px;
+        height: 34px;
+        border-radius: 8px;
+        border: 1px solid #337FFF;
+        font-size: 24px;
+        font-weight: 400;
+        color: #337FFF;
+        line-height: 34px;
+        text-align: center;
+    }
+}
@@ -0,0 +1,38 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
+import { alert } from '@/common/common'
+import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
+import IconFont from '@/components/iconfont/iconfont'
+interface Props {
+    title: string,
+    des: string | number,
+    isPhone?: boolean
+    isBorder?: boolean
+}
+
+export default memo((props: Props) => {
+    const {
+        isPhone = false,
+        isBorder = true,
+    } = props
+
+    const handPhone = () => {
+        Taro.makePhoneCall({
+            phoneNumber: props.des as string
+        })
+    }
+
+
+    return (
+        <View className={classnames(isBorder ? styles.mainItem : styles.mainItem_active)}>
+            <View className={styles.mainItem_left}>{props.title}</View>
+            <View className={classnames(isPhone ? styles.mainItem_active_right : styles.mainItem_right)}>{props.des}</View>
+            {
+                isPhone && <View className={styles.call} onClick={() => handPhone()}>拨打</View>
+            }
+        </View>
+    )
+})
@@ -0,0 +1,42 @@
+.flexBox {
+    width: 100%;
+    height: 102px;
+    background: #ffffff;
+    display: flex;
+    position: sticky;
+    top: 80px;
+    .itemBox {
+        position: relative;
+        flex: 1;
+        min-width: 138px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        text-align: center;
+        height: 102px;
+
+        .itemFont {
+            font-size: 28px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Bold;
+            font-weight: 700;
+            color: #000000;
+        }
+
+        .activeItems {
+            font-size: 28px;
+            font-family: Microsoft YaHei, Microsoft YaHei-Regular;
+            font-weight: 400;
+            color: #337FFF;
+        }
+
+        .borderBox {
+            position: absolute;
+            bottom: 0;
+            width: 138px;
+            height: 6px;
+            background: #337FFF;
+            border-radius: 4px;
+        }
+    }
+}
@@ -0,0 +1,32 @@
+import { View, Input, Button } from '@tarojs/components'
+import { useCallback, useEffect, useMemo, useRef, useState, memo } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+
+interface Props {
+    list: any[],
+    handChose?: (any) => void
+}
+export default memo((props: Props) => {
+    const { list = [], handChose } = props
+
+    return (
+        <View className={styles.flexBox}>
+            {
+                list.map((item, index) => {
+                    return (
+                        <View className={styles.itemBox} key={index} onClick={() => handChose?.(item)}>
+                            <View
+                                className={classnames(item.showBorder ? styles.activeItems : styles.itemFont)}
+
+                            >{item?.name}</View >
+                            {
+                                item.showBorder && <View className={styles.borderBox} ></View>
+                            }
+                        </View >
+                    )
+                })
+            }
+        </View >
+    )
+})
@@ -0,0 +1,19 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
+import { alert } from '@/common/common'
+import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
+import IconFont from '@/components/iconfont/iconfont'
+import Popup from '@/components/popup';
+interface Props {
+    showPopup: boolean,
+    handClose: () => void,
+    
+}
+export default memo((props: Props) => {
+    return (
+        <Popup title={'选择标签'} show={props.showPopup} onClose={() => { props.handClose() }}></Popup>
+    )
+})
@@ -0,0 +1,3 @@
+export default {
+    navigationBarTitleText: '客户详情',
+}
@@ -0,0 +1,119 @@
+.mainTop {
+    padding-top: 24px;
+    background: #fff;
+    overflow: hidden;
+
+    .mainUser {
+        padding-top: 36px;
+        margin-left: 24px;
+        margin-right: 24px;
+        display: flex;
+        position: relative;
+        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;
+        }
+
+        .item_top_one {
+            .item_top_one_flex {
+                display: flex;
+                align-items: center;
+
+                .itemName {
+                    font-size: 28px;
+                    font-weight: 500;
+                    color: #000000;
+                    margin-right: 24px;
+                }
+
+                .itemPhone {
+                    font-size: 28px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: #000000;
+                }
+            }
+
+            .item_tag_box {
+                margin-top: 16px;
+                display: flex;
+                align-items: center;
+                flex-wrap: wrap;
+
+                .item_tagItem {
+                    margin-bottom: 5px;
+                    margin-right: 16px;
+                    padding: 6px 16px 6px 16px;
+                    font-size: 24px;
+                    font-weight: 500;
+                    color: #4581FF;
+                    background: #ecf2ff;
+                    border-radius: 8px;
+                }
+
+                .item_tagAdd {
+                    color: #4581FF;
+                    background: #ecf2ff;
+                    width: 114px;
+                    height: 45px;
+                    border-radius: 8px;
+                    display: flex;
+                    align-items: center;
+
+                    justify-content: space-between;
+
+                    .item_add {
+                        line-height: 45px;
+                        // font-size: 40px;
+                        margin-left: 8px;
+                    }
+
+                    .item_add_font {
+                        font-size: 24px;
+                        font-weight: 500;
+                        color: #4581FF;
+                        margin-right: 10px;
+                    }
+                }
+            }
+        }
+
+        .pos {
+            position: absolute;
+            top: 25px;
+            right: 24px;
+            font-size: 28px;
+            font-weight: 400;
+            color: #337FFF;
+        }
+    }
+
+}
+
+.formBox {
+    margin-top: 24px;
+    margin-left: 24px;
+    margin-right: 24px;
+    background: #FFFFFF;
+    border-radius: 16px;
+    padding: 40px 32px 40px 32px;
+}
+
+.order_list {
+    height: calc(100vh - 250px);
+    margin-top: 24px;
+}
@@ -0,0 +1,88 @@
+import { View } from '@tarojs/components'
+import React, { useCallback, memo, useEffect, useMemo, useRef, useState, ReactNode } from 'react'
+import styles from "./index.module.scss"
+import classnames from "classnames";
+import Taro, { usePullDownRefresh, useRouter, useDidShow } from '@tarojs/taro';
+import Popup from '@/components/popup'
+import { debounce } from '@/common/util'
+import { alert } from '@/common/common'
+import { formatPriceDiv, formatDateTime, formatWeightDiv } from '@/common/format'
+import { ClientListApi } from '@/api/order'
+import Tabs from "./components/tabs"
+import Form from "./components/form"
+import AddressList from "@/components/AddressList"
+import TagPopup from './components/tagPopup';
+export default () => {
+    const router = useRouter()
+    const [status, setstatus] = useState<number>(1)
+
+    //顶部栏
+    const [TarBarList, setTarBarList] = useState<any[]>([{ id: 1, name: '基础信息', showBorder: true }, { id: 2, name: '收货地址', showBorder: false }])
+    const handChose = (item) => {
+        TarBarList.map(it => {
+            if (it.id === item.id) {
+                it.showBorder = true
+            } else {
+                it.showBorder = false
+            }
+            setTarBarList([...TarBarList])
+            setstatus(item.id)
+            // pageNum.current.page = 1
+            // setOrderData(() => ({ list: [], total: 0 }))
+            // setSearchField((val) => ({ ...val, size: 10, status: item.id }))
+        })
+    }
+
+    const [showPopup, setshowPopup] = useState(false)
+    return (
+        <View className={styles.mainBox}>
+            <View className={styles.mainTop}>
+                <View className={styles.mainUser}>
+                    <View className={styles.itemCile}>欧</View>
+                    <View className={styles.item_top_one}>
+                        <View className={styles.item_top_one_flex}>
+                            <View className={styles.itemName}>欧阳斌峰</View>
+                            <View className={styles.itemPhone}>133****7761</View>
+                        </View>
+                        <View className={styles.item_tag_box}>
+                            <View className={styles.item_tagItem}>二批</View>
+                            <View className={styles.item_tagItem}>二批</View>
+                            <View className={styles.item_tagAdd} onClick={() => setshowPopup(true)}>
+                                <View className={styles.item_add}>+</View>
+                                <View className={styles.item_add_font}>标签</View>
+                            </View>
+                        </View>
+                    </View>
+                    <View className={styles.pos}>{'编辑 >'}</View>
+                </View>
+                <Tabs list={TarBarList} handChose={(item) => handChose?.(item)}></Tabs>
+            </View>
+            {
+                status === 1 && <View className={styles.formBox}>
+                    <Form title={'客户全称'} des={'2222'} ></Form>
+                    <Form title={'客户简称'} des={'2222'} ></Form>
+                    <Form title={'客户类型'} des={'2222'} ></Form>
+                    <Form title={'联系人'} des={'2222'} ></Form>
+                    <Form title={'联系电话'} des={'2222'} isPhone></Form>
+                    <Form title={'省市区'} des={'2222'} ></Form>
+                    <Form title={'详细地址'} des={'2222'} ></Form>
+                    <Form title={'业务人员'} des={'2222'} ></Form>
+                    <Form title={'客户来源'} des={'2222'} ></Form>
+                    <Form title={'备注信息'} des={'2222'} ></Form>
+                    <Form title={'下单时间'} des={'2222'} ></Form>
+                    <Form title={'创建时间'} des={'2222'} ></Form>
+                    <Form title={'创建人'} des={'2222'} ></Form>
+                    <Form title={'更新人'} des={'2222'} ></Form>
+                    <Form title={'更新时间'} des={'2222'} isBorder={false}></Form>
+                </View>
+            }
+            {
+                status === 2 &&
+                <View className={styles.order_list}>
+                    <AddressList refresherEnabled={true} purchaser_id={router.params.id as any} />
+                </View>
+            }
+            <TagPopup showPopup={showPopup} handClose={() => setshowPopup(false)}></TagPopup>
+        </View>
+    )
+}