74 lines
3.7 KiB
TypeScript
74 lines
3.7 KiB
TypeScript
import { Image, Text, View } from '@tarojs/components'
|
||
import Taro from '@tarojs/taro'
|
||
import { useEffect, useState } from 'react'
|
||
import { getA5Files } from '@/lib/a5/api'
|
||
import type { A5File } from '@/lib/a5/data'
|
||
import { LOCAL_IMAGES } from '@/lib/assets'
|
||
import type { OrderLike } from '@/lib/order'
|
||
|
||
const PLATFORMS = [
|
||
{ scene: 'order_process_gd', name: '高德地图' },
|
||
{ scene: 'order_process_bd', name: '百度地图' },
|
||
{ scene: 'order_process_tx', name: '腾讯地图' },
|
||
]
|
||
export default function A5Detail ({ order, linkId, onCancel }: { order: OrderLike, linkId: string, onCancel: () => void }) {
|
||
return (
|
||
<View className='detail-mask' onClick={onCancel}>
|
||
<View className='detail-drawer' onClick={(event) => event.stopPropagation()}>
|
||
<View className='detail-dialog__head'>
|
||
<Text className='detail-dialog__title'>详情</Text>
|
||
<View className='detail-dialog__close' onClick={onCancel}><Image className='detail-dialog__close-img' src={LOCAL_IMAGES.close} /></View>
|
||
</View>
|
||
<View className='detail-dialog__body'>
|
||
<Text className='detail-dialog__section-title'>完成截图</Text>
|
||
{order.process_status === '2' ? PLATFORMS.map((platform) => (
|
||
<PlatformFiles key={`${order.order_id}-${platform.scene}`} orderId={String(order.order_id)} linkId={linkId} {...platform} />
|
||
)) : <Text className='detail-dialog__empty'>暂无完成截图</Text>}
|
||
</View>
|
||
</View>
|
||
</View>
|
||
)
|
||
}
|
||
function PlatformFiles ({ orderId, linkId, scene, name }: { orderId: string, linkId: string, scene: string, name: string }) {
|
||
const [files, setFiles] = useState<A5File[]>([])
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState('')
|
||
const [attempt, setAttempt] = useState(0)
|
||
useEffect(() => {
|
||
let active = true
|
||
setLoading(true)
|
||
setError('')
|
||
void getA5Files(linkId, orderId, scene).then((result) => {
|
||
if (active) setFiles(result)
|
||
}).catch((reason) => {
|
||
if (active) setError(reason instanceof Error ? reason.message : '截图加载失败')
|
||
}).finally(() => { if (active) setLoading(false) })
|
||
return () => { active = false }
|
||
}, [linkId, orderId, scene, attempt])
|
||
const isDocument = (file: A5File) => file.fileType === 'document' || /\.pdf(?:\?|$)/i.test(file.url)
|
||
const images = files.filter((file) => !isDocument(file))
|
||
return (
|
||
<View className='detail-dialog__section'>
|
||
<Text className='detail-dialog__section-title'>{name}</Text>
|
||
{loading ? <Text>截图加载中...</Text> : error ? (
|
||
<View onClick={() => setAttempt((value) => value + 1)}><Text>{error}，点击重试</Text></View>
|
||
) : !files.length ? <Text className='detail-dialog__empty'>暂无完成截图</Text> : <>
|
||
{images.map((file) => <Image key={file.id || file.url} className='detail-dialog__shot' src={file.url} mode='widthFix' onClick={() => Taro.previewImage({ current: file.url, urls: images.map((image) => image.url) })} />)}
|
||
{files.filter(isDocument).map((file) => <View key={file.id || file.url} className='detail-dialog__pdf' onClick={() => void openDocument(file)}><Text>{file.name || '报告文件'}</Text></View>)}
|
||
</>}
|
||
</View>
|
||
)
|
||
}
|
||
async function openDocument (file: A5File) {
|
||
try {
|
||
if (Taro.getEnv() !== Taro.ENV_TYPE.WEAPP) {
|
||
await Taro.setClipboardData({ data: file.url })
|
||
return
|
||
}
|
||
Taro.showLoading({ title: '打开中...' })
|
||
const response = await Taro.downloadFile({ url: file.url })
|
||
if (response.statusCode !== 200) throw new Error('下载失败')
|
||
await Taro.openDocument({ filePath: response.tempFilePath, showMenu: true })
|
||
} catch { Taro.showToast({ title: '报告打开失败', icon: 'none' }) } finally { Taro.hideLoading() }
|
||
}
|