联动组件优化

src/common/constant.js

@@ -11,8 +11,8 @@
 // export const BASE_URL = `https://dev.zzfzyc.com/lymarket`  // 开发环境
 // export const BASE_URL = `https://www.zzfzyc.com/lymarket`  // 正式环境
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
-// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
+export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添
-export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰
+// export const BASE_URL = `http://192.168.1.42:50001/lymarket` // 杰
 
 // CDN
 // 生成密钥

src/pages/applyAfterSales/components/reasonPopup/index.module.scss

@@ -11,14 +11,14 @@
         }
         .selectName{
             font-size: 26px;
-            padding: 10px;
+            padding: 20px 10px;
             font-weight: 400;
             color: #ABABAB;
         }
         .tips{
             color: #ABABAB;
             border-bottom: 0;
-            padding: 10px;
+            padding: 20px 10px;
         }
         .select_bottom {
             border-bottom: 3px solid #007AFF;

src/pages/applyAfterSales/components/reasonPopup/index.tsx

@@ -17,36 +17,22 @@ type ReasonInfoParam = {
     defaultValue?: number, //默认选中
     dataLength?: number, //可显示的数据列数
 }
-export default memo(({show = false, onClose, title = '', list = [], onSelect, onHeaderSelect, defaultValue, dataLength = 2}: ReasonInfoParam) => {
+export default memo(({show = false, onClose, title = '', list = [], onSelect, onHeaderSelect, defaultValue, dataLength = 1}: ReasonInfoParam) => {
+
+    const [initList, setInitList] = useState<typeof list>([])
 
-    const [initList, setInitList] = useState([])
-    //退货原因
-    const idRef = useRef(0)
-    const {fetchData: fetchDataReturnReason} = ReturnReasonApi()
-    const getReturnReason = async () => {
-        let res = await fetchDataReturnReason()
-        setInitList(res.data?.list||[])
-    }
     useEffect(() => {
-        getReturnReason()
+        setInitList(list)
-    }, [])
+    }, [list])
-
-    //售后退货说明
-    const {fetchData: fetchDataReturnExplain} = ReturnExplainApi()
-    const getReturnExplain = async () => {
-        let res = await fetchDataReturnExplain({return_reason: idRef.current})
-        setInitList(res.data?.list||[])
-    }
     const [selectIndex, setSelectIndex] = useState(1)
     const [headerList, setHeaderList] = useState<{id: number, name: string}[]>([])
     const onSelectData = (item) => {
         if(selectIndex <= dataLength) {
-            idRef.current = item.id
-            if(selectIndex < dataLength) getReturnExplain()
             headerList[selectIndex - 1] = {id:item.id, name:item.name}
+            onSelect?.({data:headerList, index:selectIndex})
             setSelectIndex(selectIndex == dataLength?dataLength:selectIndex + 1)
             setHeaderList((e) => [...e])
-            if(selectIndex == dataLength) onSelect?.(headerList)
+            if(selectIndex == dataLength)  onClose?.()
         }
     }
 
@@ -54,13 +40,9 @@ export default memo(({show = false, onClose, title = '', list = [], onSelect, on
         let list = headerList.slice(0, index + 1)
         setSelectIndex(index + 1)
         setHeaderList(list)
-        onHeaderSelect?.({val, index})
+        onHeaderSelect?.({data:val, index: index + 1})
-        if(index == 0) {
-            getReturnReason()
-        }
     }
     
-
     return (
         <Popup showIconButton={false} show={show} title={title} onClose={onClose} >
             <View className={styles.reason_return_con}>

src/pages/applyAfterSales/index copy 2.tsx

@@ -0,0 +1,254 @@
+import { Image, ScrollView, Text, View } from "@tarojs/components";
+import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import classnames from "classnames";
+import styles  from './index.module.scss'
+import ReasonPopup from "./components/reasonPopup";
+import { useDidShow, useRouter } from "@tarojs/taro";
+import { GetSaleOrderDetailApi } from "@/api/order";
+import KindList from "./components/kindList"
+import CutKindList from "./components/cutkindList"
+import { ReturnApplyOrderApi, ReturnExplainApi, ReturnGoodsStatusApi, ReturnReasonApi } from "@/api/salesAfterOrder";
+import { alert, goLink } from "@/common/common";
+import UploadImage from "@/components/uploadImage"
+import TextareaEnhance from "@/components/textareaEnhance";
+import useLogin from "@/use/useLogin";
+
+enum returnStatus {
+    return_reason = 1,  //原因
+    goods_status = 2, //状况
+    return_explain = 3, //说明
+    
+}
+export default () => {
+    useLogin()
+    useDidShow(() => {
+        getSaleOrderPreView()
+    })
+
+    const router = useRouter()
+    const orderId = useRef<number>(Number(router.params.id))
+
+    //需要提交的数据
+    const [submitData, setSubmitData] = useState<any>({
+        fabric_piece_accessory_url: [],
+        goods_status: 0,
+        reason_describe: '',
+        return_explain: 0,
+        return_reason: 0,
+        roll: 0,
+        roll_list: [],
+        sale_order_id: orderId.current
+    })
+
+    //获取订单数据
+    const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
+    const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
+    const getSaleOrderPreView = async () => {
+        if(orderId.current) {
+            let res = await getOrderFetchData({id: orderId.current})
+            setOrderDetail(res.data)
+        }   
+    }
+
+    //监听获取到的数据
+    useEffect(() => {
+        if(orderDetail) {
+            formatData()
+        }
+    }, [orderDetail])
+
+    //格式化数据格式
+    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
+    const formatData = () => {  
+        setFormatDetailOrder({
+            sale_mode: orderDetail.sale_mode,
+            sale_mode_name: orderDetail.sale_mode_name, 
+            total_colors: orderDetail.total_colors, //总颜色数量
+            total_number: orderDetail.total_number, //总数量
+            total_fabrics: orderDetail.total_fabrics, //面料数量
+            unit: orderDetail.sale_mode == 0?'条':'m', //单位
+            list: orderDetail.product_list,
+            status: orderDetail.status, //订单状态
+        })
+    }
+
+    //数据总量
+    const dataCount = useMemo(() => {
+        if(formatDetailOrder) {
+            return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${formatDetailOrder.total_number}条`
+        }
+    }, [formatDetailOrder])
+   
+    
+    
+    //面料数据
+    let roll_list = useRef({})
+
+    //大货时获取计步器数据
+    const getNumChange = useCallback((val) => {
+        if(parseInt(val.number) > 0) {
+            roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.number, sale_order_detail_id: val.sale_order_detail_id}
+        } else {
+            delete roll_list.current[val.color_id]
+        }
+
+        let count = 0 
+        Object.values(roll_list.current).map((item: any) => {
+            count += item.product_roll
+        })
+        setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count}))
+    }, [])
+
+    //散剪和剪板
+    const getSelectChange = useCallback((val) => {
+        if(val.status) {
+            roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.length, sale_order_detail_id: val.sale_order_detail_id}
+        } else {
+            delete roll_list.current[val.color_id]
+        }
+        let count = 0 
+        Object.values(roll_list.current).map((item: any) => {
+            count += item.product_roll
+        })
+        setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count}))
+    }, [])  
+
+    //获取图片列表
+    const getImageList = useCallback((list) => {
+        setSubmitData((e) => ({...e, fabric_piece_accessory_url:list}))
+    }, [])
+
+    //其他说明
+    const getOtherReason = useCallback((val) => {
+        setSubmitData((e) => ({...e, reason_describe: val}))
+    }, [])
+
+    //提交数据
+    const {fetchData: fetchDataReturnApply} = ReturnApplyOrderApi()
+    const onSubmitData = async () => {
+        if(submitData.roll_list.length <= 0) return alert.error('请选择退货颜色')
+        console.log('submitData::',submitData)
+        let res = await fetchDataReturnApply(submitData)
+        if(res.success) {
+            alert.success('申请成功')
+            goLink('/pages/salesAfterList/index',{}, 'reLaunch')
+        } else {
+            alert.error(res.msg)
+        }
+    }
+
+    //底部按钮
+    const onSubmit = (val) => {
+        if(val == 2) {
+            onSubmitData()
+        }
+    }
+
+    //退货选择弹窗
+    const [showReason, setShowReason] = useState(false)
+    const closeReason = useCallback(() => setShowReason(false), [])
+    const onShowReason = (status) => {
+        if(status == returnStatus.return_reason) {
+            getReturnReason()
+        } else if (status == returnStatus.goods_status) {
+            getReturnGoodsStatus()
+        } else {
+            getReturnExplain()
+        }
+        setShowReason(true)
+    }
+
+    console.log('aaa:', 123456789)
+
+    //请求获取到的数据
+    const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[], status: 1|2|3}>({title:'', list:[], status: returnStatus.goods_status})
+    //售后货物状况
+    const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
+    const getReturnGoodsStatus = async () => {
+        let res = await fetchDataGoodsStatus()
+        setReturnGoodsInfo((e) => ({...e, title: '货物状况', list:res.data?.list||[], status:returnStatus.goods_status}))
+    }
+    //退货原因
+    const {fetchData: fetchDataReturnReason} = ReturnReasonApi()
+    const getReturnReason = async () => {
+        let res = await fetchDataReturnReason()
+        setReturnGoodsInfo((e) => ({...e, title: '退货原因', list:res.data?.list||[], status:returnStatus.return_reason}))
+    }
+    //售后退货说明
+    const {fetchData: fetchDataReturnExplain} = ReturnExplainApi()
+    const getReturnExplain = async () => {
+        let res = await fetchDataReturnExplain()
+        setReturnGoodsInfo((e) => ({...e, title: '退货说明', list:res.data?.list||[], status:returnStatus.return_explain}))
+    }
+    //选择列表返回的数据
+    const [returnObj, setReturnObj] = useState<{[val:number]:{name:string, id: number}}>({})
+    const onReturnSelect = useCallback((val) => {
+        let {id, name} = val
+        if(returnGoodsInfo.status == returnStatus.goods_status) {
+            setSubmitData((e) => ({...e, goods_status:id}))
+            setReturnObj(e => ({...e, [returnStatus.goods_status]:{name, id}}))
+        }
+        if(returnGoodsInfo.status == returnStatus.return_explain) { 
+            setSubmitData((e) => ({...e, return_explain:id}))
+            setReturnObj(e => ({...e, [returnStatus.return_explain]:{name, id}}))
+        }
+        if(returnGoodsInfo.status == returnStatus.return_reason) {
+            setSubmitData((e) => ({...e, return_reason:id}))
+            setReturnObj(e => ({...e, [returnStatus.return_reason]:{name, id}}))
+        }
+        setShowReason(false)
+    }, [returnGoodsInfo])
+    
+    return (
+        <View className={styles.apply_after_sales_main}>
+            <View className={styles.apply_after_sales_con}>
+                <View className={styles.kind_number}><Text>{dataCount}</Text></View>
+                <ScrollView scrollY className={styles.scroll}>
+                    <View className={styles.scroll_con}>
+                        {(orderDetail?.sale_mode == 0)&&<KindList order={formatDetailOrder} onNumChange={getNumChange} />||
+                        <CutKindList order={formatDetailOrder} onSelectChange={getSelectChange}/>}
+                        <View className={styles.returnSaleInput}>
+                            <View className={styles.returnSaleInput_item}>
+                                <View className={styles.title}>退货原因</View>
+                                <View className={styles.select} onClick={() => onShowReason(returnStatus.return_reason)}>
+                                    <Text className={returnObj[returnStatus.return_reason]&&styles.selected}>{returnObj[returnStatus.return_reason]?.name||'请选择'}</Text>
+                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
+                                </View>
+                            </View>
+                            <View className={styles.returnSaleInput_item}>
+                                <View className={styles.title}>货物状况</View>
+                                <View className={styles.select} onClick={() => onShowReason(returnStatus.goods_status)}>
+                                    <Text className={returnObj[returnStatus.goods_status]&&styles.selected}>{returnObj[returnStatus.goods_status]?.name||'请选择'}</Text>
+                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
+                                </View>
+                            </View>
+                            <View className={styles.returnSaleInput_item}>
+                                <View className={styles.title}>退货说明</View>
+                                <View className={styles.select} onClick={() => onShowReason(returnStatus.return_explain)}>
+                                    <Text className={returnObj[returnStatus.return_explain]&&styles.selected}>{returnObj[returnStatus.return_explain]?.name||'请选择'}</Text>
+                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
+                                </View>
+                            </View>
+                            <View className={styles.returnSaleInput_item}>
+                                <View className={styles.title}>拍照上传</View>
+                                <View className={styles.upload_image}>
+                                    <UploadImage onChange={getImageList}/>
+                                </View>
+                            </View>
+                            <TextareaEnhance onChange={getOtherReason} title='其他说明'/>
+                        </View>
+                       
+                    </View>
+                </ScrollView>
+                <View className="common_safe_area_y"></View>
+            </View>
+            <View  className={styles.btns_con}>
+                <View  className={styles.btns_two}>
+                    <View  className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
+                    <View  className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
+                </View >
+            </View >
+            <ReasonPopup defaultValue={returnObj[returnGoodsInfo.status]?.id} show={showReason} onClose={closeReason} title={returnGoodsInfo.title} list={returnGoodsInfo.list} onSelect={onReturnSelect}/>   
+        </View>
+    )
+}

src/pages/applyAfterSales/index.tsx

@@ -31,10 +31,10 @@ export default () => {
     //需要提交的数据
     const [submitData, setSubmitData] = useState<any>({
         fabric_piece_accessory_url: [],
-        goods_status: 0,
+        goods_status: '', //货物状况
-        reason_describe: '',
+        reason_describe: '', //其他说明
-        return_explain: 0,
+        return_explain: '', //退货说明
-        return_reason: 0,
+        return_reason: '', //退货原因
         roll: 0,
         roll_list: [],
         sale_order_id: orderId.current
@@ -69,13 +69,15 @@ export default () => {
             unit: orderDetail.sale_mode == 0?'条':'m', //单位
             list: orderDetail.product_list,
             status: orderDetail.status, //订单状态
+            av_return_roll: orderDetail.av_return_roll //可退条数
         })
     }
 
     //数据总量
     const dataCount = useMemo(() => {
         if(formatDetailOrder) {
-            return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${formatDetailOrder.total_number}条`
+            let total_number = formatDetailOrder.sale_mode == 0?formatDetailOrder.total_number + '条':(formatDetailOrder.total_number/100) + '米'
+            return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${total_number}`
         }
     }, [formatDetailOrder])
    
@@ -140,64 +142,81 @@ export default () => {
     //底部按钮
     const onSubmit = (val) => {
         if(val == 2) {
+            if(!submitData.return_explain) return alert.error('请填写其他说明')
             onSubmitData()
         }
     }
 
-    //退货选择弹窗
+    //退货原因选择弹窗
     const [showReason, setShowReason] = useState(false)
     const closeReason = useCallback(() => setShowReason(false), [])
-    const onShowReason = (status) => {
+    const onShowReason = () => {
-        if(status == returnStatus.return_reason) {
-            getReturnReason()
-        } else if (status == returnStatus.goods_status) {
-            getReturnGoodsStatus()
-        } else {
-            getReturnExplain()
-        }
         setShowReason(true)
     }
-
+    useEffect(() => {
-    console.log('aaa:', 123456789)
+        getReturnReason()
+    }, [])
 
     //请求获取到的数据
-    const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[], status: 1|2|3}>({title:'', list:[], status: returnStatus.goods_status})
+    const [returnGoodsInfo, setReturnGoodsInfo] = useState([])
-    //售后货物状况
+
-    const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
-    const getReturnGoodsStatus = async () => {
-        let res = await fetchDataGoodsStatus()
-        setReturnGoodsInfo((e) => ({...e, title: '货物状况', list:res.data?.list||[], status:returnStatus.goods_status}))
-    }
     //退货原因
     const {fetchData: fetchDataReturnReason} = ReturnReasonApi()
     const getReturnReason = async () => {
         let res = await fetchDataReturnReason()
-        setReturnGoodsInfo((e) => ({...e, title: '退货原因', list:res.data?.list||[], status:returnStatus.return_reason}))
+        setReturnGoodsInfo((e) => (res.data?.list))
     }
     //售后退货说明
     const {fetchData: fetchDataReturnExplain} = ReturnExplainApi()
-    const getReturnExplain = async () => {
+    const getReturnExplain = async (id) => {
-        let res = await fetchDataReturnExplain()
+        let res = await fetchDataReturnExplain({return_reason: id})
-        setReturnGoodsInfo((e) => ({...e, title: '退货说明', list:res.data?.list||[], status:returnStatus.return_explain}))
+        setReturnGoodsInfo((e) => (res.data?.list))
     }
-    //选择列表返回的数据
+    //退货原因选择列表返回的数据
-    const [returnObj, setReturnObj] = useState<{[val:number]:{name:string, id: number}}>({})
+    const [returnObj, setReturnObj] = useState<any>([])
     const onReturnSelect = useCallback((val) => {
-        let {id, name} = val
+        setReturnGoodsInfo((e) => [])
-        if(returnGoodsInfo.status == returnStatus.goods_status) {
+        let res = val.data[val.data.length - 1]
-            setSubmitData((e) => ({...e, goods_status:id}))
+        if(val.index == 1) getReturnExplain(res.id)
-            setReturnObj(e => ({...e, [returnStatus.goods_status]:{name, id}}))
+        if(val.index == 2) setReturnObj(val.data)
+    }, [])
+    const onHeaderSelect = useCallback((val) => {
+        setReturnGoodsInfo((e) => [])
+        if(val.index == 1) getReturnReason()
+    }, [])
+
+    //选择货物状况
+    const [showStatus, setShowStatus] = useState(false)
+    const [statusInfo, setStatusInfo] = useState<any>()
+    const [statusGoodsInfo, setStatusGoodsInfo] = useState([])
+    const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi()
+    const getReturnGoodsStatus = async () => {
+        let res = await fetchDataGoodsStatus()
+        setStatusGoodsInfo((e) => (res.data?.list))
+    }
+    const onShowStatus = () => {
+        setShowStatus(() => true)
+        getReturnGoodsStatus()
+    }
+    const closeStatus = useCallback(() => {
+        setShowStatus(() => false)
+    }, [])
+    const onStatusSelect = useCallback((val) => {
+        let res = val.data[val.data.length - 1]
+        setStatusInfo(res)
+    }, [])
+
+    useEffect(() => {
+        if(returnObj.length > 0) {
+            submitData.return_reason = returnObj[0].id
+            submitData.return_explain = returnObj[1].id
         }
-        if(returnGoodsInfo.status == returnStatus.return_explain) { 
+        if(statusInfo) {
-            setSubmitData((e) => ({...e, return_explain:id}))
+            submitData.goods_status = statusInfo.id
-            setReturnObj(e => ({...e, [returnStatus.return_explain]:{name, id}}))
         }
-        if(returnGoodsInfo.status == returnStatus.return_reason) {
+        setSubmitData(() => ({...submitData}))
-            setSubmitData((e) => ({...e, return_reason:id}))
+    }, [returnObj, statusInfo])
-            setReturnObj(e => ({...e, [returnStatus.return_reason]:{name, id}}))
+
-        }
-        setShowReason(false)
-    }, [returnGoodsInfo])
     
     return (
         <View className={styles.apply_after_sales_main}>
@@ -210,22 +229,15 @@ export default () => {
                         <View className={styles.returnSaleInput}>
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>退货原因</View>
-                                <View className={styles.select} onClick={() => onShowReason(returnStatus.return_reason)}>
+                                <View className={styles.select} onClick={onShowReason}>
-                                    <Text className={returnObj[returnStatus.return_reason]&&styles.selected}>{returnObj[returnStatus.return_reason]?.name||'请选择'}</Text>
+                                    <Text className={returnObj?.length > 0&&styles.selected}>{returnObj?.length > 0?(returnObj[0]?.name + '/' +returnObj[1]?.name):'请选择'}</Text>
                                     <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                 </View>
                             </View>
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>货物状况</View>
-                                <View className={styles.select} onClick={() => onShowReason(returnStatus.goods_status)}>
+                                <View className={styles.select} onClick={onShowStatus}>
-                                    <Text className={returnObj[returnStatus.goods_status]&&styles.selected}>{returnObj[returnStatus.goods_status]?.name||'请选择'}</Text>
+                                    <Text className={statusInfo?.name&&styles.selected}>{statusInfo?.name||'请选择'}</Text>
-                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
-                                </View>
-                            </View>
-                            <View className={styles.returnSaleInput_item}>
-                                <View className={styles.title}>退货说明</View>
-                                <View className={styles.select} onClick={() => onShowReason(returnStatus.return_explain)}>
-                                    <Text className={returnObj[returnStatus.return_explain]&&styles.selected}>{returnObj[returnStatus.return_explain]?.name||'请选择'}</Text>
                                     <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                 </View>
                             </View>
@@ -248,7 +260,8 @@ export default () => {
                     <View  className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
                 </View >
             </View >
-            <ReasonPopup defaultValue={returnObj[returnGoodsInfo.status]?.id} show={showReason} onClose={closeReason} title={returnGoodsInfo.title} list={returnGoodsInfo.list} onSelect={onReturnSelect}/>   
+            <ReasonPopup show={showReason} onClose={closeReason} title='退货原因' list={returnGoodsInfo} onHeaderSelect={onHeaderSelect} onSelect={onReturnSelect} dataLength={2}/>   
+            <ReasonPopup show={showStatus} onClose={closeStatus} title='货物状况' list={statusGoodsInfo}  onSelect={onStatusSelect} dataLength={1}/>   
         </View>
     )
 }