订单售后v3

src/pages/applyAfterSales/index.module.scss

@@ -59,60 +59,8 @@
                         font-size: 30px;
                     }
                 }
-                
-                .uploadImg{
-                    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;
-                    }
+                .upload_image{
+                    flex:1;
                 }
             }
         }

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 useUploadCDNImg from "@/use/useUploadImage";
+import { useDidShow, useRouter } from "@tarojs/taro";
 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,11 +175,13 @@ 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>
-                        <OtherReason onChange={getOtherReason}/>
+                       
                     </View>
                 </ScrollView>
                 <View className="common_safe_area_y"></View>
@@ -196,45 +195,4 @@ export default () => {
             <ReasonPopup show={showReason.show} onClose={closeReason} status={showReason.status}/>   
         </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>
-        </>
-    )
-})
+}