feats

src/pages/mpSetting/components/MiniAppMedia.jsx

@@ -1,36 +1,15 @@
 import React, { useEffect, useMemo, useState, useCallback } from 'react'
-import { Icon, Upload, Modal } from 'antd'
+import { Icon, Upload, Button } from 'antd'
 import { fetch, apis } from '@/utils/request'
 
 const postMiniApp = fetch(apis.mp.miniapp)
 
-export default props => {
-  const [previewVisible, setPreviewVisible] = useState(false)
-  const [previewImage, setPreviewImage] = useState()
-  const [imageUrl, setImageUrl] = useState()
-  const [fileList, setFileList] = useState([])
-
-  const uploadButton = useMemo(() => {
-    return (
-      <div>
-        <Icon type="plus" />
-        <div>Upload</div>
-      </div>
-    )
-  }, [])
-  
+export default props => {  
   const customRequest = useCallback(({file, onError, onSuccess}) => {
     const data = new FormData()
     data.append('file', file)
 
     postMiniApp({ data }).then((res) => {
-      setImageUrl(res.url)
-      setFileList([{
-        uid: '-1',
-        name: 'image.png',
-        status: 'done',
-        url: res.url,
-      }])
       props.onChange(res)
       onSuccess(res.url, file)
     }).catch(onError)
@@ -42,32 +21,15 @@ export default props => {
     }
   }, [])
 
-  useEffect(() => {
-    if (props.value) {
-      setFileList([{
-        uid: '-1',
-        name: 'image.png',
-        status: 'done',
-        url: props.value,
-      }])
-    }
-  }, [props.value])
-
   return (
     <div>
       <Upload
         name="file"
         accept=".jpg, .jpeg"
-        listType="picture-card"
-        fileList={fileList}
         customRequest={customRequest}
-        onPreview={() => setPreviewVisible(true)}
       >
-        {fileList.length >= 1 ? null : uploadButton}
+        <Button><Icon type="upload" /> 上传</Button>
       </Upload>
-      <Modal visible={previewVisible} footer={null} onCancel={() => setPreviewVisible(false)}>
-        <img alt="" style={{ width: '100%' }} src={previewImage} />
-      </Modal>
     </div>
   )
 }

src/pages/mpSetting/index.jsx

@@ -77,7 +77,10 @@ export default Form.create()(props => {
           }
         </Form.Item>
         <Form.Item label="小程序封面" help="仅支持JPG图片,建议大小为520*416">
-          <MiniAppMedia onChange={handleMiniAppChange} value={detailData.miniapp_url} />
+          <div>
+            {detailData.miniappMedia && <span style={{display: 'inline-block', marginRight: '24px'}}>{detailData.miniappMedia}</span>}
+            <MiniAppMedia onChange={handleMiniAppChange} value={detailData.miniapp_url} />
+          </div>
         </Form.Item>
       </Form>
     </div>