订单售后v3

src/api/salesAfterOrder.ts

@@ -39,3 +39,13 @@ export const GetSaleOrderListApi = () => {
         method: "get",
     })
 }
+
+/**
+ * 物流上传
+ */
+ export const ReturnApplyLogisticsApi = () => {
+    return useRequest({
+        url: `/v1/mall/returnApplyOrder/upload`,
+        method: "put",
+    })
+}

src/common/constant.js

@@ -4,13 +4,13 @@
 // export const BASE_URL = `http://10.0.0.5:50001/lymarket`
 // export const BASE_URL = `http://192.168.0.89:40001/lymarket`
 // export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
-export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
+// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
 // export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
 // export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
 // 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.224:50002/lymarket` // 添
+export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
 // export const BASE_URL = `http://192.168.1.15:50001/lymarket` // 杰
 
 // CDN

src/components/orderBtns/index.tsx

@@ -55,7 +55,7 @@ export default memo(({orderInfo, onClick}:Param) => {
         },
         {
             id: 3,
-            value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货
+            value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中
             label: '申请退款'
         },
         // {

src/components/textareaEnhance/index.module.scss

@@ -0,0 +1,36 @@
+.other_desc{
+    // padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+        font-size: $font_size;
+        font-weight: 700;
+    }
+    .textarea{
+        position: relative;
+        height: 165.4px;
+        .descDataNum{
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+            font-size: 22px;
+            color: #ABABAB;
+        }
+    }
+    .textarea_con, .textarea_con_pretend{
+        background-color: #f3f3f3;
+        border: 2px solid #e6e6e6;
+        border-radius: 10px;
+        width: 100%;
+        font-size: 25px;
+        height: 165.4px;
+        padding: 20px 20px 30px 20px;
+        box-sizing: border-box;
+        margin-top: 20px;
+    }
+    .textarea_con_pretend{
+        color: $color_font_two;
+    }
+    .textarea_con_pretend_ed{
+        color: #000;
+    }
+}

src/components/textareaEnhance/index.tsx

@@ -0,0 +1,43 @@
+import {Textarea, View } from "@tarojs/components";
+import { memo, useMemo, useState } from "react";
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+//其他说明
+type Param = {
+    title?: string,
+    onChange?: (val: string) => void,
+    placeholder?: string
+}
+export default memo(({onChange, title = '', placeholder = '请输入'}:Param) => {
+    const [descData, setDescData] = useState({
+        number: 0,
+        value: '',
+        count: 200,
+        show: false
+    })
+    const getDesc = (e) => {
+        let value = e.detail.value
+        let res = value
+        if(value.length > descData.count) {
+            res = value.slice(0, descData.count)
+        }
+        setDescData({...descData, number:res.length, value: res})
+        onChange?.(res)
+    }
+
+    const toggleShowRealTextarea = (show) => {
+        setDescData({...descData, show:show})
+    }
+    return (
+        <View className={styles.other_desc}>
+            <View className={styles.title}>{title}</View>
+            <View className={styles.textarea}>
+                {descData.show&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>||
+                    <View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||placeholder}</View>
+                }
+                <View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
+            </View>
+        </View>
+    )
+})

src/components/uploadImage/index.module.scss

@@ -0,0 +1,55 @@
+.image_main{
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .uploadImg{
+        width: 202px;
+        height: 150px;
+        background: #f0f0f0;
+        border: 2px dashed #cccccc;
+        border-radius: 10px;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        margin: 0 0 20px 20px;
+        position: relative;
+        .miconfont{
+            font-size: 50px;
+        }
+        .uploadText{
+            font-size: 26px;
+            color: $color_font_three;
+        }
+        
+
+    }
+    .ImgItem{
+        width: 202px;
+        height: 150px;
+        background: #f0f0f0;
+        margin-left: 20px;
+        margin-bottom: 20px;
+        position: relative;
+        border-radius: 10px;
+        image{
+            width: 100%;
+            height: 100%;
+            border-radius: 10px;
+        }
+        .miconfont_close{
+            width: 43px;
+            height: 43px;
+            background-color: #ccc;
+            border-radius: 50%;
+            position: absolute;
+            right: -10px;
+            top: -10px;
+            text-align: center;
+            line-height: 43px;
+            color: #fff;
+            font-size: 30px;
+        }
+    }
+}

src/components/uploadImage/index.tsx

@@ -0,0 +1,59 @@
+import Taro, { FC } from "@tarojs/taro"
+import { memo, useEffect, useState } from "react"
+import useUploadCDNImg from "@/use/useUploadImage";
+import { Image, Text, View } from "@tarojs/components";
+import { formatImgUrl } from "@/common/fotmat";
+import classnames from "classnames";
+import styles  from './index.module.scss'
+
+//图片列表
+type ImageParam = {
+    onChange?:(val: string[]) => void
+}
+const PictureItem:FC<ImageParam> = memo(({onChange}) => {
+    const {getWxPhoto} = useUploadCDNImg()
+    const [imageList, setImageLise] = useState<string[]>([])
+    //上传图片
+    const uploadImage = async () => {
+        let res:any = await getWxPhoto('after-sale')
+        if(res.code == 200) {
+            setImageLise([...imageList, res.url])
+        } 
+    }
+    //删除图片
+    const delImage = (index) => {
+        imageList.splice(index,1)
+        setImageLise(() => [...imageList])
+    }
+    //监听上传的图片变化
+    useEffect(() => {
+        onChange?.(imageList||[])
+    }, [imageList])
+
+    //预览图片
+    const showImage = () => {
+        let list = imageList.map(item => {
+            return formatImgUrl(item)
+        })
+        Taro.previewImage({
+            current: list[0], // 当前显示
+            urls: list // 需要预览的图片http链接列表
+        })
+    }
+
+    return (
+        <View className={styles.image_main}>
+            {imageList.map((item, index) => 
+                <View className={styles.ImgItem}>
+                    <Image mode="aspectFill" src={formatImgUrl(item)} onClick={showImage}></Image>
+                    <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
+                </View>)}
+            <View className={styles.uploadImg } onClick={uploadImage}>
+                <Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
+                <Text className={styles.uploadText}>上传照片</Text>
+            </View>
+        </View>
+    )
+})
+
+export default PictureItem

src/pages/applyAfterSales/index.module.scss

@@ -59,60 +59,8 @@
                         font-size: 30px;
                     }
                 }
-                
+                .upload_image{
-                .uploadImg{
+                    flex:1;
-                    width: 202px;
-                    height: 150px;
-                    background: #f0f0f0;
-                    border: 2px dashed #cccccc;
-                    margin-left: 20px;
-                    border-radius: 10px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    align-items: center;
-                    position: relative;
-                    margin-bottom: 20px;
-                    position: relative;
-                    .miconfont{
-                        font-size: 50px;
-                    }
-                    .uploadText{
-                        font-size: 26px;
-                        color: $color_font_three;
-                    }
-                    
-
-                }
-                .ImgItem{
-                    width: 202px;
-                    height: 150px;
-                    background: #f0f0f0;
-                    margin-left: 20px;
-                    margin-bottom: 20px;
-                    position: relative;
-                    border-radius: 10px;
-                    &:nth-child(1) {
-                        margin-left: 50px;
-                    }
-                    image{
-                        width: 100%;
-                        height: 100%;
-                        border-radius: 10px;
-                    }
-                    .miconfont_close{
-                        width: 43px;
-                        height: 43px;
-                        background-color: #ccc;
-                        border-radius: 50%;
-                        position: absolute;
-                        right: -10px;
-                        top: -10px;
-                        text-align: center;
-                        line-height: 43px;
-                        color: #fff;
-                        font-size: 30px;
-                    }
                 }
             }
         }

src/pages/applyAfterSales/index.tsx

@@ -1,23 +1,20 @@
-import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
+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 { formatHashTag, formatImgUrl } from "@/common/fotmat";
-import Counter from "@/components/counter";
 import ReasonPopup from "./components/reasonPopup";
 import OtherReason from "./components/otherReason";
-import Taro, { useDidShow, useRouter } from "@tarojs/taro";
+import { useDidShow, useRouter } from "@tarojs/taro";
-import useUploadCDNImg from "@/use/useUploadImage";
 import { GetSaleOrderDetailApi } from "@/api/order";
 import KindList from "./components/kindList"
 import { ReturnApplyOrderApi } from "@/api/salesAfterOrder";
 import { alert, goLink } from "@/common/common";
+import UploadImage from "@/components/uploadImage"
+import TextareaEnhance from "@/components/textareaEnhance";
 
 type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
 export default () => {
 
-   
-
     useDidShow(() => {
         getSaleOrderPreView()
     })
@@ -178,12 +175,14 @@ export default () => {
                             </View>
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>拍照上传</View>
-                                <PictureItem onChange={getImageList}/>
+                                <View className={styles.upload_image}>
+                                    <UploadImage onChange={getImageList}/>
+                                </View>
+                            </View>
+                            <TextareaEnhance onChange={getOtherReason} title='其他说明'/>
+                        </View>
                        
                     </View>
-                        </View>
-                        <OtherReason onChange={getOtherReason}/>
-                    </View>
                 </ScrollView>
                 <View className="common_safe_area_y"></View>
             </View>
@@ -197,44 +196,3 @@ export default () => {
         </View>
     )
 }
-
-//图片列表
-type ImageParam = {
-    onChange?:(val: string[]) => void
-}
-const PictureItem:FC<ImageParam> = memo(({onChange}) => {
-    const {getWxPhoto} = useUploadCDNImg()
-    const [imageList, setImageLise] = useState<string[]>([])
-    //上传图片
-    const uploadImage = async () => {
-        let res:any = await getWxPhoto('after-sale')
-        if(res.code == 200) {
-            setImageLise([...imageList, res.url])
-        } 
-    }
-
-    //删除图片
-    const delImage = (index) => {
-        imageList.splice(index,1)
-        setImageLise(() => [...imageList])
-    }
-
-    //监听上传的图片变化
-    useEffect(() => {
-        onChange?.(imageList||[])
-    }, [imageList])
-
-    return (
-        <>
-            {imageList.map((item, index) => 
-                <View className={styles.ImgItem}>
-                    <Image mode="aspectFill" src={formatImgUrl(item)} ></Image>
-                    <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
-                </View>)}
-            <View className={styles.uploadImg } onClick={uploadImage}>
-                <Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
-                <Text className={styles.uploadText}>上传照片</Text>
-            </View>
-        </>
-    )
-})

src/pages/details/components/orderCount/index.tsx

@@ -16,6 +16,7 @@ import UseLogin from "@/use/useLogin"
 import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
 import { debounce, getFilterData } from "@/common/util";
 import LabAndImg from "@/components/LabAndImg";
+import VirtualList from '@tarojs/components/virtual-list'
 
 
 
@@ -127,7 +128,10 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
         if(num == 0) item.show = false
         setList([...list])
         console.log(num)
+        
     }
+ 
+
     const onAdd = (item) => {
         item.show = true
         item.count = selectList[selectIndex].defaultNum
@@ -198,40 +202,11 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
         return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View> 
     }, [selectIndex])
 
-
+    //虚拟滚动
+    const Rows = memo(({id, index, style, data}:any) => {
+        let item = data[index]
         return (
-        <View className={styles.shop_cart_main}>
+            <View className={styles.item} key={item.id}>
-            
-            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
-                <View className={styles.popup_con}>
-                    <View className={styles.header}>{title}</View>
-                    <View className={styles.search}>
-                        <View className={styles.search_title}>下单类型:</View>
-                        <View className={styles.search_list}>
-                            {selectList.map((item, index) => {
-                                return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
-                            })}
-                        </View>
-                    </View>
-                    {searchShow&&<View className={styles.colorFind}>
-                        <View className={styles.search}>
-                            <Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
-                        </View>
-                        <View className={styles.text} onClick={() => clearSearch()}>取消</View>
-                    </View>}
-                    <View className={styles.colorNum}>
-                        <View className={styles.title}>颜色分类 ({list.length})</View>
-                        {!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
-                    </View>
-                    
-                    <View className={styles.product_color_con}>
-                        {(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
-                        {(list.length > 0&& !colorState.loading)&&
-
-                            <InfiniteScroll moreStatus={false}>
-                                <View className={styles.color_con}>
-                                    {list.map(item => {
-                                        return <View className={styles.item} key={item.id}>
                 <View className={styles.item_color}>
                     <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
                 </View>
@@ -257,9 +232,82 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
                     </View>}
                 </View>
             </View>
+        )
+    })
+
+    return (
+        <View className={styles.shop_cart_main}>
+            <Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
+                <View className={styles.popup_con}>
+                    <View className={styles.header}>{title}</View>
+                    <View className={styles.search}>
+                        <View className={styles.search_title}>下单类型:</View>
+                        <View className={styles.search_list}>
+                            {selectList.map((item, index) => {
+                                return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item.title}</View>
                             })}
                         </View>
-                        </InfiniteScroll>}
+                    </View>
+                    {searchShow&&<View className={styles.colorFind}>
+                        <View className={styles.search}>
+                            <Search placeIcon="out" ref={searchRef} changeOnSearch={searchInput} debounceTime={400}/>
+                        </View>
+                        <View className={styles.text} onClick={() => clearSearch()}>取消</View>
+                    </View>}
+                    <View className={styles.colorNum}>
+                        <View className={styles.title}>颜色分类 ({list.length})</View>
+                        {!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
+                    </View>
+                    
+                    <View className={styles.product_color_con}>
+                        {(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
+                        {(list.length > 0&& !colorState.loading)&&
+                        //     <InfiniteScroll moreStatus={false}>
+                        //         <View className={styles.color_con}>
+                        //             {list.map(item => {
+                        //                 return <View className={styles.item} key={item.id}>
+                        //                     <View className={styles.item_color}>
+                        //                         <LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
+                        //                     </View>
+                        //                     <View className={styles.item_con}>
+                        //                         <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+                        //                         <View className={styles.num}>
+                        //                             {formatPrice(item)}
+                        //                         </View>
+                        //                     </View>
+                        //                     <View className={styles.btn_con}>
+                        //                         {!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
+                        //                         ||<View className={styles.btn_count}>
+                        //                             <Counter
+                        //                                 onBlue={(e) => getInputValue(e, item)} 
+                        //                                 defaultNum={item.count}   
+                        //                                 step={selectList[selectIndex].step} 
+                        //                                 digits={selectList[selectIndex].digits}
+                        //                                 onClickBtn={(e) => getInputValue(e, item)}
+                        //                                 unit={selectList[selectIndex].unit}
+                        //                                 minNum={selectList[selectIndex].minNum}
+                        //                                 maxNum={selectList[selectIndex].maxNum}
+                        //                             />
+                        //                         </View>}
+                        //                     </View>
+                        //                 </View>
+                        //             })}
+                        //         </View>
+                        // </InfiniteScroll>}
+                        <View className={styles.color_con}>
+                            <VirtualList
+                                height={500} /* 列表的高度 */
+                                width='100%' /* 列表的宽度 */
+                                itemData={list} /* 渲染列表的数据 */
+                                itemCount={list.length} /*  渲染列表的长度 */
+                                itemSize={100} /* 列表单项的高度  */
+                                overscanCount={1}
+                            >
+                                {Rows} 
+                            </VirtualList>
+                            <View className="common_safe_area_y"></View>
+                        </View>}
+                        
                         {(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}>暂无此商品</View>}
                     </View>
                     <View className={styles.buy_btn}>

src/pages/order/components/applyRefund/index.module.scss

@@ -0,0 +1,66 @@
+
+.apply_after_sales_con{
+    padding: 20px;
+    .returnSaleInput_item{
+        display: flex;
+        align-items: center;
+        padding-bottom: 50px;
+        flex-wrap: wrap;
+        .title{
+            font-size: $font_size;
+            font-weight: 700;
+            width: 119px;
+        }
+        .select{
+            flex:1;
+            height: 60px;
+            border: 2px solid #e6e6e6;
+            border-radius: 10px;
+            margin-left: 20px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 20px;
+            font-size: 26px;
+            color: $color_font_two;
+            .miconfont{
+                font-size: 30px;
+            }
+        }
+        .upload_image{
+            flex:1;
+        }
+    }
+    .btns_con{
+        width: 100%;
+        bottom:0;
+        box-sizing: border-box;
+        margin-top: 50px;
+        .btns_two{
+            display: flex;
+            height: 82px;
+            // border: 1PX solid #007aff;
+            font-size: $font_size_big;
+            border-radius: 40px;
+            margin-bottom: 20px;
+            .rest_btn{
+                flex:1;
+                border: 1PX solid #007aff;
+                border-radius: 40px 0 0 40px;
+                text-align: center;
+                line-height: 82px;
+                color: $color_main;
+                background-color: #fff;
+                
+            }
+            .verify_btn{
+                flex:1;
+                border-radius: 0 40px 40px 0;
+                background: #007aff;
+                text-align: center;
+                line-height: 82px;
+                color: #fff;
+            }
+        }
+    }
+}

src/pages/order/components/applyRefund/index.tsx

@@ -1,9 +1,57 @@
-import { memo } from "react";
+import Popup from "@/components/popup";
+import TextareaEnhance from "@/components/textareaEnhance";
+import { ScrollView, Text, View } from "@tarojs/components";
+import { memo, useCallback, useState } from "react";
+import ReasonPopup from "../reasonPopup";
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void
+}
+export default memo(({show, onClose}:Param) => {
+
+    
+    const getOtherReason = useCallback(() => {
+
+    }, [])
+
+    const onSubmit = (val) => {
+
+    }
+
+    //显示说明
+    const [showReason, setShowReason] = useState(false)
+    const closeReason = useCallback(() => {
+        setShowReason(false)
+    }, [])
+
+    const onShowReason = () => {
+        setShowReason(true)
+    }
 
-export default memo(() => {
     return (
         <>
-            123123
+            <Popup show={show} title="申请退款" onClose={onClose} >
+                <View className={styles.apply_after_sales_con}>
+                    <View className={styles.returnSaleInput_item}>
+                        <View className={styles.title}>退款说明</View>
+                        <View className={styles.select} onClick={() => onShowReason()}>
+                            <Text>请选择</Text>
+                            <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
+                        </View>
+                    </View>
+                    <TextareaEnhance onChange={getOtherReason} title='备注' placeholder="请输入退款备注"/>
+                    <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>
+                </View>
+            </Popup>
+            <ReasonPopup show={showReason} onClose={closeReason} /> 
         </>
     )
 })

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

@@ -0,0 +1,27 @@
+.reason_return_con{
+    height: 50vh;
+    .reason_title{
+        padding: 10px 20px 0 20px;
+        height: 60px;
+        border-bottom: 1PX solid #F3F3F3;
+        box-sizing: border-box;
+        Text{
+            font-size: 26px;
+            border-bottom: 3px solid #000;
+            padding: 10px;
+            font-weight: 400;
+        }
+        
+    }
+    .reason_scroll{
+        height: calc(100% - 70px);
+        .reason_list{
+            font-size: 26px;
+            padding: 30px 20px 0 20px;
+            color: #707070;
+            .reason_item{
+                margin-bottom: 36px;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,37 @@
+import Popup from "@/components/popup";
+import { ScrollView, Text, View } from "@tarojs/components";
+import { memo, useMemo } from "react";
+import styles  from './index.module.scss'
+
+//原因选择
+type ReasonInfoParam = {
+    show?: boolean,
+    onClose?: () => void,
+}
+export default memo(({show = false, onClose}: ReasonInfoParam) => {
+    return (
+        <Popup showIconButton={false} show={show} title="退款说明" onClose={onClose} >
+            <View className={styles.reason_return_con}>
+                <View className={styles.reason_title}><Text>退款说明</Text></View>
+                <ScrollView scrollY className={styles.reason_scroll}>
+                    <View className={styles.reason_list}>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                    </View>
+                </ScrollView>
+            </View>
+        </Popup>
+    )
+})

src/pages/order/components/remark/index.tsx

@@ -1,18 +1,24 @@
 import Popup from "@/components/popup"
 import { Textarea, View } from "@tarojs/components"
-import { useCallback, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import styles  from './index.module.scss'
 
 type Param = {
     onBlur?: (val:any) => void
     onSave?: (val: string) => void
+    defaultValue?: string
 }
-export default ({onBlur, onSave}:Param) => {
+export default ({onBlur, onSave, defaultValue = ''}:Param) => {
     const [descData, setDescData] = useState({
         number: 0,
         value: '',
         count: 200
     })
+
+    useEffect(() => {
+        getDesc(defaultValue)
+    }, [defaultValue])
+
     const getDesc = useCallback((e) => {
         let value = e.detail.value
         let res = value

src/pages/order/index.tsx

@@ -15,6 +15,7 @@ import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
 import classnames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import AddressInfoDetail from "./components/addressInfoDetail";
+import ApplyRefund from "./components/applyRefund";
 import KindList from "./components/kindList";
 import OrderState from "./components/orderState";
 import Payment from "./components/payment";
@@ -149,7 +150,10 @@ import styles  from './index.module.scss'
         }else if(val == 2) {
             //待付款
             toPay()
+        } else if(val == 3) {
+            setRefundShow(true)
         }
+        
     }, [orderDetail])
 
     //页面下拉刷新
@@ -189,6 +193,12 @@ import styles  from './index.module.scss'
         getSaleOrderPreView()
     }, [orderDetail])
 
+    //退款申请
+    const [refundShow, setRefundShow] = useState(false)
+    const applyRefundClose = useCallback(() => {
+        setRefundShow(false)
+    }, [])
+
     return (
         <View className={styles.order_main}>
             <OrderState orderInfo={orderDetail} onRefresh={refresh}/>
@@ -224,10 +234,10 @@ import styles  from './index.module.scss'
                 <View className="common_safe_area_y"></View>
             </View> }       
             <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
-                <Remark onSave={(e) => getRemark(e)}/>
+                <Remark onSave={(e) => getRemark(e)} defaultValue={orderDetail?.remark}/>
             </Popup>
             <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={orderDetail} />
-            
+            <ApplyRefund show={refundShow} onClose={applyRefundClose}/>
             <View className="common_safe_area_y"></View>
         </View>
     )

src/pages/salesAfter/components/addressInfoDetail/index.tsx

@@ -1,11 +1,46 @@
+import { AFTER_ORDER_STATUS } from "@/common/enum";
 import { Text, View } from "@tarojs/components"
 import classnames from "classnames";
-import {memo} from "react";
+import {memo, useMemo} from "react";
 import styles  from './index.module.scss'
 
-export default memo(({return_address = '', return_phone = ''}:{return_address:string, return_phone: string}) => {
+type Param = {
+    return_address?:string, 
+    return_phone?: string, 
+    onLogistics?: (val: number) => void,
+    stage?: number
+}
+export default memo(({return_address = '', return_phone = '', onLogistics, stage}:Param) => {
+    const {
+        ReturnStageApplying,                 
+        ReturnStageWaitCheck,                
+        ReturnStageChecked,                 
+        ReturnStageReturned,                  
+        ReturnStageCancel,                    
+        ReturnStageQualityCheckPendingRefund, 
+        ReturnStageServiceOrderPendingRefund, 
+        ReturnStageRejected                  
+    } = AFTER_ORDER_STATUS
+
+    //是否显示地址
+    const showAddress = useMemo(() => {
+        return stage != ReturnStageApplying.value 
+    }, [])
+
+    //上传物流
+    const upLogistics = useMemo(() => {
+        return stage == ReturnStageWaitCheck.value
+    }, [stage])
+
+    //查看物流
+    const showLogistics = useMemo(() => {
+        return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value)
+    }, [stage])
+
+
     return (
-        <View className={styles.address_main}>
+        <>
+            {showAddress&&<View className={styles.address_main}>
                 <View className={styles.address_title_tag}>
                     <Text className={classnames(styles.miconfont, 'iconfont icon-zhuyi')}></Text>
                     请按以下退货地址寄回货物并提供退货物流信息
@@ -19,12 +54,16 @@ export default memo(({return_address = '', return_phone = ''}:{return_address:st
                         <View className={styles.order_address_text_name}>
                             <Text>管理员</Text>
                             <Text>{return_phone}</Text>
-                        {/* <View className={styles.updateBtn}>
+                            {upLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(1)}>
                                 上传物流
-                        </View> */}
+                            </View>}
-                    </View>
+                            {showLogistics&&<View className={styles.updateBtn} onClick={() => onLogistics?.(2)}>
+                                查看物流
+                            </View>}
                         </View>
                     </View>
                 </View>
+            </View>}
+        </>
     )
 })

src/pages/salesAfter/components/applyRecord/index.module.scss

@@ -0,0 +1,146 @@
+.apply_record_scroll{
+    height: 70vh;
+}
+.apply_record_main{
+    margin-top: 20px;
+    padding: 0 30px;
+    .kind_number{
+        width: 100%;
+        padding:  20px;
+        box-sizing: border-box;
+        text{
+            background-color: #F6F6F6;
+            border-radius: 10px;
+            font-size: $font_size_medium;
+            padding: 5px 0;
+            text-align: center;
+            width: 100%;
+            display: block;
+            color: $color_font_three;
+        }
+    }
+    .orders_list_con{
+    
+        background-color: #fff;
+        border-radius: 20px;
+        padding: 20px;
+        .orders_return_title{
+            font-size: 28px;
+            font-weight: 700;
+            padding-bottom: 20px;
+        }
+        .order_list{
+            &:nth-child(n+2) {
+                margin-top: 45px;
+            }
+            .order_list_title{
+                display: flex;
+                align-items: center;
+                .tag{
+                    font-size: $font_size_min;
+                    background-color: #CDE5FF;
+                    padding: 5px 10px;
+                    border-radius: 6px;
+                    color: $color_main;
+                }
+                .title{
+                    font-weight: 700;
+                    font-size: $font_size;
+                    margin-left: 20px;
+                    flex:1;
+                }
+                .num{
+                    color: $color_font_two;
+                    font-size: $font_size_min;
+                }
+            }
+        }
+        .order_list_scroll{
+            margin-top: 30px;
+            
+            .order_list_item {
+                display: flex;
+                &:nth-child(2) {
+                    margin-top: 30px;
+                }
+                .order_list_item_img{
+                    width: 126px;
+                    height: 126px;
+                    border-radius: 20px;
+                }
+                .order_list_item_con{
+                    display: flex;
+                    width: 100%;
+                    flex:1;
+                    border-bottom: 1px solid #f0f0f0;
+                    height: 150px;
+                    padding-top: 20px;
+                    box-sizing: border-box;
+                }
+                .order_list_item_des{
+                    flex:1;
+                    box-sizing: border-box;
+                    padding-left: 30px;
+                    .order_list_item_title{
+                        font-weight: 700;
+                        font-size: $font_size;
+                        margin-bottom: 15px;
+                    }
+                    .order_list_item_price{
+                        font-size: 26px;
+                        color: $color_font_three;
+                    }
+                }
+                .order_list_item_count{
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    align-items: flex-end;
+                    .count_num{
+                        color: $color_main;
+                        font-size: $font_size;
+                        margin-bottom: 15px;
+                        font-weight: 400;
+                        text{
+                            font-size: $font_size_min;
+                        }
+                    }
+                    .count_price {
+                        font-size: $font_size;
+                        font-weight: 700;
+                        text{
+                            font-size: $font_size_min;
+                        }
+                    }
+                }
+            }
+        }
+        .order_total{
+            padding-top: 30px;
+            display: flex;
+            justify-content: space-between;
+            text{
+                &:nth-child(1) {
+                    font-size: 28px;
+                    font-weight: 700;
+                }
+                &:nth-child(2) {
+                    font-size: 32px;
+                    font-weight: 700;
+                    color: #007AFF;
+                }
+            }
+        }
+        .order_estimated_amount{
+            display: flex;
+            align-items: flex-end;
+            flex-direction: column;
+            padding: 30px 0;
+            .order_price_des{
+                font-size: $font_size_medium;
+                color: $color_font_two;
+            }
+        }
+    }
+}
+

src/pages/salesAfter/components/applyRecord/index.tsx

@@ -0,0 +1,124 @@
+import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder";
+import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
+import LabAndImg from "@/components/LabAndImg";
+import Popup from "@/components/popup";
+import { ScrollView, Text, View } from "@tarojs/components";
+import { memo, useCallback, useEffect, useMemo, useState } from "react";
+import styles  from './index.module.scss'
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void,
+    onSubmit?: () => void,
+    id?: number
+}
+export default memo(({show, onClose, onSubmit, id}:Param) => {
+    useEffect(() => {
+        if(show && id) getSaleOrderPreView()
+    }, [show, id])
+
+    //获取订单详情
+    const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
+    const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi()
+    const getSaleOrderPreView = async () => {
+        if(id) {
+            let res = await saleOrderOrderDetailData({id: id})
+            setOrderDetail(res.data)
+        }
+        Taro.stopPullDownRefresh()       
+    }
+    //格式化数据格式
+    const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
+    const formatData = () => {  
+        setFormatDetailOrder({
+            estimate_amount: orderDetail.estimate_amount, //预估金额
+            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,
+            stage: orderDetail.stage, //订单状态
+            type: orderDetail.type, //退货or退款
+            total_sale_price: orderDetail.total_sale_price, //销售金额
+            total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
+            total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
+            actual_amount: orderDetail.actual_amount, //实付金额
+            the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
+        })
+    }
+
+    //监听获取到的数据
+    useEffect(() => {
+        if(orderDetail)
+            formatData()
+    }, [orderDetail])
+
+    //对应数量
+    const formatCount = useCallback((item) => {
+        return formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100)
+    }, [formatDetailOrder])
+    //对应单价
+    const standardPrice = useCallback(price => {
+        return formatPriceDiv(price).toLocaleString() + '/' + (formatDetailOrder?.sale_mode == 1?'m':'kg')
+    }, [formatDetailOrder])
+    //数量格式
+    const numText = useMemo(() => {
+        if(formatDetailOrder)
+            return `${formatDetailOrder?.total_fabrics}种面料，${formatDetailOrder?.total_colors}种颜色，共${formatDetailOrder?.total_number}${formatDetailOrder?.unit}`
+    }, [formatDetailOrder])
+
+    //整理颜色
+    const labAndRgbAndUrl = useCallback((item) => {
+        return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url}
+    }, [])
+
+    return (
+        <>
+            <Popup show={show} title="申请记录" onClose={onClose}>
+                {formatDetailOrder&&<View className={styles.apply_record_main}>
+                    <View className={styles.kind_number}><Text>{numText}</Text></View>
+                    <ScrollView scrollY className={styles.apply_record_scroll}>
+                        <View className={styles.orders_list_con}>
+                            {
+                                formatDetailOrder?.list?.map(item => {
+                                    return <View key={item.product_code} className={styles.order_list}>
+                                        <View className={styles.order_list_title}>
+                                            <View className={styles.tag}>{formatDetailOrder.sale_mode_name}</View>
+                                            <View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
+                                            <View className={styles.num}>共{item?.product_colors.length}种</View>
+                                        </View>
+                                        <View className={styles.order_list_scroll}>
+                                            {item?.product_colors?.map(colorItem => {
+                                                return <View key={colorItem.id} className={styles.order_list_item}>
+                                                    <View className={styles.order_list_item_img}>
+                                                        <LabAndImg value={labAndRgbAndUrl(colorItem)}/>
+                                                    </View>
+                                                    <View className={styles.order_list_item_con}>
+                                                        <View className={styles.order_list_item_des}>
+                                                            <View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
+                                                            <View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
+                                                        </View>
+                                                        <View className={styles.order_list_item_count}>
+                                                            <View className={styles.count_num}>×{formatCount(colorItem)}<text>{formatDetailOrder.unit}</text></View>
+                                                            <View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
+                                                        </View>
+                                                    </View>
+                                                </View>
+                                            })}
+                                        </View>
+                                    </View>
+                                })
+                            }
+                            <View className={styles.order_total}>
+                                <Text>申请条数</Text>
+                                <Text>×{orderDetail?.total_number}</Text>
+                            </View>
+                        </View>
+                    </ScrollView>
+                </View>}
+            </Popup>  
+        </>
+    )
+})

src/pages/salesAfter/components/kindList/index.tsx

@@ -45,18 +45,18 @@ export default memo(({order, comfirm = false}:Param) => {
             return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
     }, [order])
 
-    const {
+    // const {
-        SaleOrderStatusBooking, // 待接单
+    //     SaleOrderStatusBooking, // 待接单
-        SaleOrderStatusArranging, // 配布中
+    //     SaleOrderStatusArranging, // 配布中
-        SaleOrderStatusArranged, // 已配布
+    //     SaleOrderStatusArranged, // 已配布
-        SaleOrderStatusWaitingPayment, // 待付款
+    //     SaleOrderStatusWaitingPayment, // 待付款
-        SaleOrderStatusWaitingDelivery, // 待发货
+    //     SaleOrderStatusWaitingDelivery, // 待发货
-        SaleOrderStatusWaitingReceipt, // 待收货
+    //     SaleOrderStatusWaitingReceipt, // 待收货
-        SaleOrderStatusAlreadyReceipt, // 已收货
+    //     SaleOrderStatusAlreadyReceipt, // 已收货
-        SaleOrderStatusComplete, // 已完成
+    //     SaleOrderStatusComplete, // 已完成
-        SaleOrderStatusRefund, // 已退款
+    //     SaleOrderStatusRefund, // 已退款
-        SaleOrderStatusCancel, // 已取消
+    //     SaleOrderStatusCancel, // 已取消
-    } = ORDER_STATUS
+    // } = ORDER_STATUS
 
     //金额列表枚举
     const priceList = [

src/pages/salesAfter/components/returnLogistics/index.module.scss

@@ -0,0 +1,35 @@
+
+.logistics_main{
+    padding: 20px 30px;
+    box-sizing: border-box;
+    .logistics_image{
+        display: flex;
+        .title_desc{
+            font-size: 28px;
+            font-weight: 700;
+            padding-top: 50px;
+            box-sizing: border-box;
+        }
+        .upload_image{
+            flex:1;
+        }
+    }
+    .logistics_desc{
+        margin-top: 50px;
+    }
+    .btns_two{
+        display: flex;
+        height: 82px;
+        font-size: $font_size_big;
+        border-radius: 40px;
+        margin-top: 50px;
+        .verify_btn{
+            flex:1;
+            border-radius: 40px;
+            background: #007aff;
+            text-align: center;
+            line-height: 82px;
+            color: #fff;
+        }
+    }
+}

src/pages/salesAfter/components/returnLogistics/index.tsx

@@ -0,0 +1,70 @@
+import Popup from "@/components/popup";
+import { Text, View } from "@tarojs/components";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import UploadImage from "@/components/uploadImage"
+import styles  from './index.module.scss'
+import TextareaEnhance from "@/components/textareaEnhance";
+import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder";
+import { alert } from "@/common/common";
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void,
+    onSubmit?: () => void,
+    id?: number //订单id
+}
+export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => {
+    //需要提交的数据
+    const submitData = useRef({
+        accessory_url: [],
+        remark: '',
+        id: 0
+    })
+    useEffect(() => {
+        if(id) submitData.current.id = id
+    }, [id])
+
+    //获取图片列表
+    const getImageList = useCallback((list) => {
+        submitData.current.accessory_url = list
+    }, [])
+
+    //备注
+    const getOtherReason = useCallback((val) => {
+        submitData.current.remark = val
+    }, [])
+
+    //确定
+    const {fetchData} = ReturnApplyLogisticsApi()
+    const onSubmitEven = async () => {
+        if(!id) return alert.error('参数有误')
+        if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件')
+        let res = await fetchData(submitData.current)
+        if(res.success) {
+            alert.success('上传成功')
+        } else {
+            alert.error('上传失败')
+        }
+    }
+
+    return (
+        <>
+            <Popup show={show} title="上传物流" onClose={onClose}>
+                <View className={styles.logistics_main}>
+                    <View className={styles.logistics_image}>
+                        <Text className={styles.title_desc}>上传附件：</Text>
+                        <View className={styles.upload_image}>
+                            <UploadImage onChange={getImageList}/>
+                        </View>
+                    </View>
+                    <View className={styles.logistics_desc}>
+                        <TextareaEnhance onChange={getOtherReason} title="备注：" placeholder="请输入备注信息"/>
+                    </View>
+                    <View  className={styles.btns_two}>
+                        <View  className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
+                    </View >
+                </View>
+            </Popup>                       
+        </>
+    )   
+})

src/pages/salesAfter/index.tsx

@@ -15,9 +15,11 @@ import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
 import classnames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
 import AddressInfoDetail from "./components/addressInfoDetail";
+import ApplyRecord from "./components/applyRecord";
 import ContentBox from "./components/contentBox";
 import KindList from "./components/kindList";
 import OrderState from "./components/orderState";
+import ReturnLogistics from "./components/returnLogistics";
 import styles  from './index.module.scss'
  
  export default () => {
@@ -73,13 +75,7 @@ import styles  from './index.module.scss'
 
     //获取底部按钮点击, 获取按钮状态
     const orderStateClick = useCallback((val) => {
-        if(val == 1) {
-            //取消订单
-            getSaleOrderPreView()
-        }
-        if(val == 2) {
         
-        }
     }, [orderDetail])
 
     //页面下拉刷新
@@ -102,16 +98,42 @@ import styles  from './index.module.scss'
     //订单状态枚举
     const {SaleOrderStatusCancel} = ORDER_STATUS
 
+    //物流显示
+    const [logisticsShow, setLogisticsShow] = useState(false)
+    const onShowLogistics = useCallback((val) => {
+        if(val == 1) {
+            setLogisticsShow(true)
+        } else {
+            const list = orderDetail?.fabric_piece_accessory_url.map(item => {
+                return formatImgUrl(item)
+            })
+            Taro.previewImage({
+                current: list[0], // 当前显示
+                urls: list // 需要预览的图片http链接列表
+            })
+        }
+    }, [orderDetail])
+    const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
+    //物流成功上传
+    const logisticsSuccess = useCallback(() => {
+        getSaleOrderPreView()
+    }, [])
+
+    //显示生气记录
+    const [applyRecord, setApplyRecord] = useState(false)
+
     return (
         <View className={styles.order_main}>
             <OrderState orderInfo={orderDetail}/>
-            <AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone}/>
+            <AddressInfoDetail return_address={orderDetail?.return_address} return_phone={orderDetail?.return_phone} stage={orderDetail?.stage} onLogistics={onShowLogistics}/>
             <KindList order={formatPreViewOrderMemo}/>
             <OrderDes orderInfo={orderDetail}/>
             {(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
                 <AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
             </View>}       
             <AfterSalePricture urls={orderDetail?.fabric_piece_accessory_url}/>
+            <ReturnLogistics show={logisticsShow} id={orderDetail?.return_apply_order_id} onClose={onCloseLogistics} onSubmit={logisticsSuccess}/>
+            <ApplyRecord show={applyRecord} id={orderDetail?.id} onClose={() => setApplyRecord(false)}/>
             <View className="common_safe_area_y"></View>
         </View>
     )
@@ -145,12 +167,18 @@ import styles  from './index.module.scss'
                     <View className={styles.order_num_btn} onClick={() => clipboardData(orderInfo?.order_no)}>复制</View>
                 </View>
             </SearchInput>
+            <SearchInput showBorder={false} title='退货原因' height={50}>
+                <Text>{orderInfo?.return_reason_name}</Text>
+            </SearchInput>
             <SearchInput showBorder={false} title='退货说明' height={50}>
                 <Text>{orderInfo?.return_explain_name}</Text>
             </SearchInput>
             <SearchInput showBorder={false} title='其它说明' height={50}>
                 <Text>{orderInfo?.return_remark}</Text>
             </SearchInput>
+            <SearchInput showBorder={false} title='货物状况' height={50}>
+                <Text>{orderInfo?.goods_status_name}</Text>
+            </SearchInput>
             <SearchInput showBorder={false} title='申请时间' height={50}>
                 <Text>{formatDateTime(orderInfo?.apply_time)}</Text>
             </SearchInput>
@@ -158,12 +186,20 @@ import styles  from './index.module.scss'
     )
  })
 
- const AfterSalePricture = memo(({urls}:{urls: string[]}) => {
+ const AfterSalePricture = memo(({urls = []}:{urls: string[]}) => {
+
+    const showList = useMemo(() => {
+        let res = urls.map(item => {
+            return formatImgUrl(item)
+        })
+        return res
+    }, [urls])
+
      //预览图片
     const showImage = () => {
         Taro.previewImage({
-            current: formatImgUrl(''), // 当前显示
+            current: showList[0], // 当前显示
-            urls: [formatImgUrl('')] // 需要预览的图片http链接列表
+            urls: showList // 需要预览的图片http链接列表
         })
     }
     return (

src/pages/salesAfterList/components/returnLogistics/index.module.scss

@@ -0,0 +1,35 @@
+
+.logistics_main{
+    padding: 20px 30px;
+    box-sizing: border-box;
+    .logistics_image{
+        display: flex;
+        .title_desc{
+            font-size: 28px;
+            font-weight: 700;
+            padding-top: 50px;
+            box-sizing: border-box;
+        }
+        .upload_image{
+            flex:1;
+        }
+    }
+    .logistics_desc{
+        margin-top: 50px;
+    }
+    .btns_two{
+        display: flex;
+        height: 82px;
+        font-size: $font_size_big;
+        border-radius: 40px;
+        margin-top: 50px;
+        .verify_btn{
+            flex:1;
+            border-radius: 40px;
+            background: #007aff;
+            text-align: center;
+            line-height: 82px;
+            color: #fff;
+        }
+    }
+}

src/pages/salesAfterList/components/returnLogistics/index.tsx

@@ -0,0 +1,70 @@
+import Popup from "@/components/popup";
+import { Text, View } from "@tarojs/components";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
+import UploadImage from "@/components/uploadImage"
+import styles  from './index.module.scss'
+import TextareaEnhance from "@/components/textareaEnhance";
+import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder";
+import { alert } from "@/common/common";
+
+type Param = {
+    show?: true|false,
+    onClose?: () => void,
+    onSubmit?: () => void,
+    id?: number //订单id
+}
+export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => {
+    //需要提交的数据
+    const submitData = useRef({
+        accessory_url: [],
+        remark: '',
+        id: 0
+    })
+    useEffect(() => {
+        if(id) submitData.current.id = id
+    }, [id])
+
+    //获取图片列表
+    const getImageList = useCallback((list) => {
+        submitData.current.accessory_url = list
+    }, [])
+
+    //备注
+    const getOtherReason = useCallback((val) => {
+        submitData.current.remark = val
+    }, [])
+
+    //确定
+    const {fetchData} = ReturnApplyLogisticsApi()
+    const onSubmitEven = async () => {
+        if(!id) return alert.error('参数有误')
+        if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件')
+        let res = await fetchData(submitData.current)
+        if(res.success) {
+            alert.success('上传成功')
+        } else {
+            alert.error('上传失败')
+        }
+    }
+
+    return (
+        <>
+            <Popup show={show} title="上传物流" onClose={onClose}>
+                <View className={styles.logistics_main}>
+                    <View className={styles.logistics_image}>
+                        <Text className={styles.title_desc}>上传附件：</Text>
+                        <View className={styles.upload_image}>
+                            <UploadImage onChange={getImageList}/>
+                        </View>
+                    </View>
+                    <View className={styles.logistics_desc}>
+                        <TextareaEnhance onChange={getOtherReason} title="备注：" placeholder="请输入备注信息"/>
+                    </View>
+                    <View  className={styles.btns_two}>
+                        <View  className={styles.verify_btn } onClick={() => onSubmitEven()}>保存</View>
+                    </View >
+                </View>
+            </Popup>                       
+        </>
+    )   
+})

src/pages/salesAfterList/index.tsx

@@ -13,6 +13,7 @@ import OrderStatusList from "./components/orderStatusList"
 import Payment from "../order/components/payment"
 import { AFTER_ORDER_STATUS } from "@/common/enum"
 import { GetSaleOrderListApi } from "@/api/salesAfterOrder"
+import ReturnLogistics from "./components/returnLogistics"
 
 export default () => {
   const {checkLogin} = useLogin()
@@ -97,30 +98,14 @@ export default () => {
   //监听点击的按钮
   const clickOrderBtn = useCallback(({status, orderInfo}) => {
     if(status == 2) {
-      //去支付
+      //退货物流
-      setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method})
+
-      toPay()
-    } else {
-      getOrderList()
     }
   }, [orderData])
 
-
+  //物流显示
-  //去付款
+  const [logisticsShow, setLogisticsShow] = useState(false)
-  const [payOrderInfo, setPayOrderInfo] = useState<any>()
+  const onCloseLogistics = useCallback(() => setLogisticsShow(false), [])
-  const [payMentShow, setPayMentShow] = useState(false)
-  const toPay = () => {
-      setPayMentShow(true)
-  }
-  //关闭支付弹窗
-  const closePayShow = useCallback(() => {
-      setPayMentShow(() => false)
-  }, [])
-  //支付成功
-  const onPaySuccess = useCallback(() => {
-      getOrderList()
-      closePayShow()
-  }, [])
 
   
   return (
@@ -135,8 +120,8 @@ export default () => {
               return <View key={item.id} className={styles.order_item_con}> <Order value={item} onClickBtn={clickOrderBtn}/></View>
             })}
           </InfiniteScroll>
+          <ReturnLogistics show={logisticsShow} onClose={onCloseLogistics}/>
       </View>
-      <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo}/>
     </View>
   )
 }