提交 814a183e 作者: 方治民

feat: ThumbnailPreview 组件默认使用 CacheImage 组件来实现图片缓存

上级 0081f13c
...@@ -18,6 +18,10 @@ ...@@ -18,6 +18,10 @@
type: String, type: String,
default: 'scaleToFill', default: 'scaleToFill',
}, },
background: {
type: String,
default: '#F7F7F7',
},
src: { src: {
type: String, type: String,
required: true, required: true,
...@@ -38,10 +42,10 @@ ...@@ -38,10 +42,10 @@
const hash = md5(url).toString() const hash = md5(url).toString()
hashCacheKey.value = `G_CACHE_IMAGE_${hash}` hashCacheKey.value = `G_CACHE_IMAGE_${hash}`
if (uni.getStorageSync(hashCacheKey.value)) { if (uni.getStorageSync(hashCacheKey.value)) {
console.log('CacheImage cache hit') console.debug('CacheImage cache hit')
url = uni.getStorageSync(hashCacheKey.value) url = uni.getStorageSync(hashCacheKey.value)
} else { } else {
console.log('CacheImage cache miss') console.debug('CacheImage cache miss')
try { try {
const res = await uni.downloadFile({ url }) const res = await uni.downloadFile({ url })
if (res.statusCode === 200) { if (res.statusCode === 200) {
...@@ -61,7 +65,7 @@ ...@@ -61,7 +65,7 @@
console.error(e) console.error(e)
} }
} }
console.log(props.src, '=>', url, hash, hashCacheKey.value) console.debug(props.src, '=>', url, hash, hashCacheKey.value)
// #endif // #endif
src.value = url src.value = url
...@@ -87,7 +91,10 @@ ...@@ -87,7 +91,10 @@
:width="props.width" :width="props.width"
:height="props.height" :height="props.height"
:radius="props.radius" :radius="props.radius"
:background="props.background"
:src="src" :src="src"
@error="onError" @error="onError"
/> >
<slot></slot>
</fui-lazyload>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import type { PropType } from 'vue' import type { PropType } from 'vue'
import md5 from 'crypto-js/md5'
import { nanoid } from 'nanoid' import { nanoid } from 'nanoid'
import { getPoster, isImage, isVideo } from './utils' import { getPoster, isImage, isVideo } from './utils'
import CacheImage from '@/components/CacheImage/index.vue'
type Asset = Recordable & { url: string } type Asset = Recordable & { url: string }
const props = defineProps({ const props = defineProps({
...@@ -35,7 +37,17 @@ ...@@ -35,7 +37,17 @@
// 预览图片 // 预览图片
const preview = (index: number) => { const preview = (index: number) => {
uni.previewImage({ uni.previewImage({
urls: images.value.map((item) => item.url), urls: images.value.map((item) => {
// #ifdef APP-PLUS
const hash = md5(item.url).toString()
const key = `G_CACHE_IMAGE_${hash}`
if (uni.getStorageSync(key)) {
return uni.getStorageSync(key)
}
// #endif
return item.url
}),
current: index, current: index,
}) })
} }
...@@ -67,7 +79,7 @@ ...@@ -67,7 +79,7 @@
<template> <template>
<view class="preview-wrap"> <view class="preview-wrap">
<!-- 视频预览 --> <!-- 视频预览 -->
<fui-lazyload <CacheImage
class="preview-video" class="preview-video"
:background="props.background" :background="props.background"
:mode="props.mode" :mode="props.mode"
...@@ -82,10 +94,10 @@ ...@@ -82,10 +94,10 @@
<view class="icon-wrap" :style="{ width: props.width, height: props.height }"> <view class="icon-wrap" :style="{ width: props.width, height: props.height }">
<fui-icon class="video-play-icon" name="suspend" size="40" color="#fff" /> <fui-icon class="video-play-icon" name="suspend" size="40" color="#fff" />
</view> </view>
</fui-lazyload> </CacheImage>
<!-- 图片预览 --> <!-- 图片预览 -->
<fui-lazyload <CacheImage
class="preview-image" class="preview-image"
:background="props.background" :background="props.background"
:mode="props.mode" :mode="props.mode"
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论