fix:新增图片预览组件,修复确认支付订单预览问题

src/components/ImagePreview/index.less

+.imgPreviewWrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  background: #000;
+}
+
+.imgPreview {
+  max-width: 100%;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
\ No newline at end of file

src/components/ImagePreview/index.tsx

+import React, { useState, useEffect } from 'react'
+import styles from './index.less'
+
+export interface ImagePreviewProps {
+  src: string,
+  currentRef?: any
+}
+
+const ImagePreview:React.FC<ImagePreviewProps> = ({src, currentRef}) => {
+  const [state, setState] = useState(false)
+
+  useEffect(() => {
+    if (currentRef) {
+      currentRef.current = {
+        toggle
+      }
+    }
+  }, [])
+  const toggle = () => {
+    setState(!state)
+  }
+
+  return state && (
+    <div className={styles.imgPreviewWrapper} onClick={toggle}>
+      <img src={src} className={styles.imgPreview}/>
+    </div>
+  )
+}
+
+ImagePreview.defaultProps = {}
+
+export default ImagePreview
\ No newline at end of file

src/pages/transaction/components/orderPayResultModal/index.tsx

-import React, { useState, useEffect, useContext } from 'react'
+import React, { useState, useEffect, useContext, useRef } from 'react'
 import { Modal, List, Avatar, Button, Space } from 'antd'
 import { usePageStatus } from '@/hooks/usePageStatus'
 import { OrderDetailContext } from '../../_public/order/context'
@@ -7,6 +7,7 @@ import { PublicApi } from '@/services/api'
 import { history, Link } from 'umi'
 import OverflowText from '@/components/OverflowText'
 import { useHttpRequest } from '@/hooks/useHttpRequest'
+import ImagePreview from '@/components/ImagePreview'
 
 export interface OrderPayResultModalProps {
   type: 'default' | 'preview',
@@ -14,12 +15,13 @@ export interface OrderPayResultModalProps {
 }
 
 const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRef}) => {
+  const imgRef = useRef<any>({})
   const { data } = useContext(OrderDetailContext)
   const { id } = usePageStatus()
   const [visible, setVisible] = useState(false)
   const canCtlData = data?.paymentInformationResponses.find(v => v.externalState === PayOutWorkState.READY_CONFIRM_RESULT) || {}
   const { run, loading } = useHttpRequest(PublicApi.postOrderConfirmedPaymentResultsOrder)
-  const transData = canCtlData.payOrderUrls?.split(',') || []
+  const transData = canCtlData.payOrderUrls ? JSON.parse(canCtlData.payOrderUrls) : []
   useEffect(() => {
     if (currentRef) {
       currentRef.current = {
@@ -62,10 +64,11 @@ const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRe
         itemLayout="horizontal"
         dataSource={transData || []}
         renderItem={(item: string) => (
-          <List.Item  style={{fontSize: 12}} extra={<a href={item} target='_blank'>预览</a>}>
+          <List.Item  style={{fontSize: 12}} extra={<Button type='link' onClick={imgRef.current.toggle}>预览</Button>}>
             <OverflowText style={{flex: '.9'}}>
               {item}
             </OverflowText>
+            <ImagePreview src={item} currentRef={imgRef}/>
           </List.Item>
         )}
       />