🐞 fix:优化分享图片，修复我的页面无法触发用户信息授权弹窗

2022-08-01 11:32:49 +08:00
parent 6ea58ad911
commit ac4cd5ddb8
6 changed files with 194 additions and 205 deletions
@@ -1,68 +1,71 @@
-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'
+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,
-    defaultList?: string[],
-    onlyRead?: false|true
+  onChange?: (val: string[]) => void
+  defaultList?: string[]
+  onlyRead?: false | true
 }
-const PictureItem:FC<ImageParam> = memo(({onChange, defaultList, onlyRead = false}) => {
-    const {getWxPhoto} = useUploadCDNImg()
-    const [imageList, setImageLise] = useState<string[]>([])
+const PictureItem: FC<ImageParam> = memo(({ onChange, defaultList, onlyRead = false }) => {
+  const { getWxPhoto } = useUploadCDNImg()
+  const [imageList, setImageLise] = useState<string[]>([])

-    useEffect(() => {
-        setImageLise(defaultList||[])
-    }, [defaultList])
+  useEffect(() => {
+    setImageLise(defaultList || [])
+  }, [defaultList])

-    //上传图片
-    const uploadImage = async () => {
-        let list:any = await getWxPhoto('after-sale', 5)
-        let images:any[] = []
-        list?.map(item => {
-            images.push(item.url)
-        })
-        setImageLise([...imageList, ...images])
-    }
-    //删除图片
-    const delImage = (index) => {
-        imageList.splice(index,1)
-        setImageLise(() => [...imageList])
-    }
-    //监听上传的图片变化
-    useEffect(() => {
-        onChange?.(imageList)
-    }, [imageList])
+  //上传图片
+  const uploadImage = async () => {
+    let list: any = await getWxPhoto('after-sale', 5)
+    let images: any[] = []
+    list?.map((item) => {
+      images.push(item.url)
+    })
+    setImageLise([...imageList, ...images])
+  }
+  //删除图片
+  const delImage = (index) => {
+    imageList.splice(index, 1)
+    setImageLise(() => [...imageList])
+  }
+  //监听上传的图片变化
+  useEffect(() => {
+    onChange?.(imageList)
+  }, [imageList])

-    //预览图片
-    const showImage = () => {
-        let list = imageList?.map(item => {
-            return formatImgUrl(item, '!w800')
-        })
-        Taro.previewImage({
-            current: list[0], // 当前显示
-            urls: list // 需要预览的图片http链接列表
-        })
-    }
+  //预览图片
+  const showImage = () => {
+    let list = imageList?.map((item) => {
+      return formatImgUrl(item, '!w800')
+    })
+    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>
-                    {!onlyRead && <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>}
-                </View>)}
-            {!onlyRead && <View className={styles.uploadImg } onClick={uploadImage}>
-                <Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
-                <Text className={styles.uploadText}>上传照片</Text>
-            </View>}
+  return (
+    <View className={styles.image_main}>
+      {imageList?.map((item, index) => (
+        <View className={styles.ImgItem}>
+          <Image mode='aspectFill' src={formatImgUrl(item)} onClick={showImage}></Image>
+          {!onlyRead && <View onClick={() => delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>}
        </View>
-    )
+      ))}
+      {!onlyRead && (
+        <View className={styles.uploadImg} onClick={uploadImage}>
+          <Text className={classnames(styles.miconfont, 'iconfont icon-shangchuanzhaopian')}></Text>
+          <Text className={styles.uploadText}>上传照片</Text>
+        </View>
+      )}
+    </View>
+  )
 })

-export default PictureItem
+export default PictureItem