订单售后v3

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