fix: loading页面支持图片和视频展示
This commit is contained in:
parent
b4edf70e8f
commit
c4ae8f2806
|
|
@ -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 { useEffect, useState } from 'react'
|
||||||
import Taro, { switchTab, navigateTo } from '@tarojs/taro'
|
import Taro, { switchTab, navigateTo } from '@tarojs/taro'
|
||||||
import { useServerSdk } from '../../hooks/index'
|
import { useServerSdk } from '../../hooks/index'
|
||||||
|
|
@ -98,26 +98,50 @@ export default function Generate() {
|
||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
|
|
||||||
const renderSuccess = () => (
|
const renderSuccess = () => {
|
||||||
<View className='generate-success'>
|
// 检测是否为视频
|
||||||
<View className='result-container'>
|
const isVideo = result?.outputUrl && /\.(mp4|webm|ogg|mov|avi|mkv|flv)$/i.test(result.outputUrl)
|
||||||
<Text className='success-text'>处理完成!</Text>
|
|
||||||
{result?.outputUrl && (
|
return (
|
||||||
<View className='result-image'>
|
<View className='generate-success'>
|
||||||
<Image src={result.outputUrl} mode='aspectFit' />
|
<View className='result-container'>
|
||||||
</View>
|
<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>
|
||||||
<View className='action-buttons'>
|
)
|
||||||
<Button className='btn-primary' onClick={handleTryAgain}>
|
}
|
||||||
再来一张
|
|
||||||
</Button>
|
|
||||||
<Button className='btn-secondary' onClick={handleViewHistory}>
|
|
||||||
查看记录
|
|
||||||
</Button>
|
|
||||||
</View>
|
|
||||||
</View>
|
|
||||||
)
|
|
||||||
|
|
||||||
const renderError = () => (
|
const renderError = () => (
|
||||||
<View className='generate-error'>
|
<View className='generate-error'>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue