TestEShopDist/src/pages/applyAfterSales/index.tsx

import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
import { 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 useUploadCDNImg from "@/use/useUploadImage";
import { GetSaleOrderDetailApi } from "@/api/order";
import KindList from "./components/kindList"

type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
export default () => {

    const router = useRouter()
    const orderId = useRef<number>(Number(router.params.id))

    useDidShow(() => {
        getSaleOrderPreView()
    })

    //获取订单数据
    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])

     //对应数量
     const formatCount = useCallback((item) => {
        return (formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100)) + formatDetailOrder?.unit
    }, [formatDetailOrder])
   

    
    //退货选择弹窗
    const [showReason, setShowReason] = useState<{show:true|false, status:ReasonParam}>({show:false, status:1})
    const closeReason = useCallback(() => setShowReason({...showReason, show:false}), [])
    const onShowReason = (status) => setShowReason({...showReason, status, show:true})

    //底部按钮
    const onSubmit = (val) => {

    }

    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}>
                        <KindList order={formatDetailOrder}/>
                        <View className={styles.returnSaleInput}>
                            <View className={styles.returnSaleInput_item}>
                                <View className={styles.title}>退货原因</View>
                                <View className={styles.select} onClick={() => onShowReason(1)}>
                                    <Text>请选择</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(2)}>
                                    <Text>请选择</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(3)}>
                                    <Text>请选择</Text>
                                    <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                </View>
                            </View>
                            <View className={styles.returnSaleInput_item}>
                                <View className={styles.title}>拍照上传</View>
                                <PictureItem/>
                                
                            </View>
                        </View>
                        <OtherReason/>
                    </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 show={showReason.show} onClose={closeReason} status={showReason.status}/>   
        </View>
    )
}

//图片列表
const PictureItem = memo(() => {
    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) => {
        
    }
    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>
        </>
    )
})