Commit 7cea8703 authored by 前端-许佳敏's avatar 前端-许佳敏

Merge branch 'test' into dev

parents f8cf274f 36c99658
.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
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
import React, { useState, useEffect, useContext } from 'react' import React, { useState, useEffect, useContext, useRef } from 'react'
import { Modal, List, Avatar, Button, Space } from 'antd' import { Modal, List, Avatar, Button, Space } from 'antd'
import { usePageStatus } from '@/hooks/usePageStatus' import { usePageStatus } from '@/hooks/usePageStatus'
import { OrderDetailContext } from '../../_public/order/context' import { OrderDetailContext } from '../../_public/order/context'
...@@ -7,6 +7,7 @@ import { PublicApi } from '@/services/api' ...@@ -7,6 +7,7 @@ import { PublicApi } from '@/services/api'
import { history, Link } from 'umi' import { history, Link } from 'umi'
import OverflowText from '@/components/OverflowText' import OverflowText from '@/components/OverflowText'
import { useHttpRequest } from '@/hooks/useHttpRequest' import { useHttpRequest } from '@/hooks/useHttpRequest'
import ImagePreview from '@/components/ImagePreview'
export interface OrderPayResultModalProps { export interface OrderPayResultModalProps {
type: 'default' | 'preview', type: 'default' | 'preview',
...@@ -14,12 +15,13 @@ export interface OrderPayResultModalProps { ...@@ -14,12 +15,13 @@ export interface OrderPayResultModalProps {
} }
const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRef}) => { const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRef}) => {
const imgRef = useRef<any>({})
const { data } = useContext(OrderDetailContext) const { data } = useContext(OrderDetailContext)
const { id } = usePageStatus() const { id } = usePageStatus()
const [visible, setVisible] = useState(false) const [visible, setVisible] = useState(false)
const canCtlData = data?.paymentInformationResponses.find(v => v.externalState === PayOutWorkState.READY_CONFIRM_RESULT) || {} const canCtlData = data?.paymentInformationResponses.find(v => v.externalState === PayOutWorkState.READY_CONFIRM_RESULT) || {}
const { run, loading } = useHttpRequest(PublicApi.postOrderConfirmedPaymentResultsOrder) const { run, loading } = useHttpRequest(PublicApi.postOrderConfirmedPaymentResultsOrder)
const transData = canCtlData.payOrderUrls?.split(',') || [] const transData = canCtlData.payOrderUrls ? JSON.parse(canCtlData.payOrderUrls) : []
useEffect(() => { useEffect(() => {
if (currentRef) { if (currentRef) {
currentRef.current = { currentRef.current = {
...@@ -62,10 +64,11 @@ const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRe ...@@ -62,10 +64,11 @@ const OrderPayResultModal:React.FC<OrderPayResultModalProps> = ({type, currentRe
itemLayout="horizontal" itemLayout="horizontal"
dataSource={transData || []} dataSource={transData || []}
renderItem={(item: string) => ( 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'}}> <OverflowText style={{flex: '.9'}}>
{item} {item}
</OverflowText> </OverflowText>
<ImagePreview src={item} currentRef={imgRef}/>
</List.Item> </List.Item>
)} )}
/> />
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment