fix: loading页面支持图片和视频展示

This commit is contained in:
imeepos 2025-09-04 22:25:50 +08:00
parent b4edf70e8f
commit c4ae8f2806
1 changed files with 44 additions and 20 deletions

View File

@ -1,4 +1,4 @@
import { View, Text, Button, Image } from '@tarojs/components'
import { View, Text, Button, Image, Video } from '@tarojs/components'
import { useEffect, useState } from 'react'
import Taro, { switchTab, navigateTo } from '@tarojs/taro'
import { useServerSdk } from '../../hooks/index'
@ -98,26 +98,50 @@ export default function Generate() {
</View>
)
const renderSuccess = () => (
<View className='generate-success'>
<View className='result-container'>
<Text className='success-text'></Text>
{result?.outputUrl && (
<View className='result-image'>
<Image src={result.outputUrl} mode='aspectFit' />
</View>
)}
const renderSuccess = () => {
// 检测是否为视频
const isVideo = result?.outputUrl && /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(result.outputUrl)
return (
<View className='generate-success'>
<View className='result-container'>
<Text className='success-text'></Text>
{result?.outputUrl && (
<View className='result-media'>
{isVideo ? (
<Video
className='result-video'
src={result.outputUrl}
autoplay
muted
loop
objectFit='cover'
showPlayBtn={false}
showCenterPlayBtn={false}
showFullscreenBtn={false}
controls={false}
/>
) : (
<Image
className='result-image'
src={result.outputUrl}
mode='aspectFit'
/>
)}
</View>
)}
</View>
<View className='action-buttons'>
<Button className='btn-primary' onClick={handleTryAgain}>
</Button>
<Button className='btn-secondary' onClick={handleViewHistory}>
</Button>
</View>
</View>
<View className='action-buttons'>
<Button className='btn-primary' onClick={handleTryAgain}>
</Button>
<Button className='btn-secondary' onClick={handleViewHistory}>
</Button>
</View>
</View>
)
)
}
const renderError = () => (
<View className='generate-error'>