feat(image): 全项目应用图片压缩优化
- 将图片显示统一替换为 getCompressedImageUrl 函数处理压缩 - 覆盖 35 个文件,包括 4 个组件和 31 个页面 - 主要组件:LazyImage、ProductCard、OrderCard、SkuSelector 内部自动压缩图片 - 主要页面:购物车、订单、积分、活动、拼团、秒杀、收藏、浏览历史等 - 跳过用户头像、二维码、商品详情大图及所有 Taro.previewImage 调用 - 调整压缩默认宽度为 300,保持质量90,启用压缩功能
This commit is contained in:
@@ -6,6 +6,7 @@ import { listShopGoodsCategory } from '@/api/shop/shopGoodsCategory'
|
||||
import { uploadFile } from '@/api/system/file'
|
||||
import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model'
|
||||
import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model'
|
||||
import { getCompressedImageUrl } from '@/utils/image'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '商品管理',
|
||||
@@ -317,7 +318,7 @@ export default function StoreGoodsPage() {
|
||||
{goods.image ? (
|
||||
<Image
|
||||
className='w-20 h-20 rounded-lg bg-gray-50 flex-shrink-0'
|
||||
src={goods.image}
|
||||
src={getCompressedImageUrl(goods.image,{ width: 120, quality: 90 })}
|
||||
mode='aspectFill'
|
||||
onClick={() => Taro.previewImage({ urls: [goods.image!] })}
|
||||
/>
|
||||
@@ -541,7 +542,7 @@ export default function StoreGoodsPage() {
|
||||
<View className='bg-gray-50 rounded-xl p-4 mb-5 flex items-center gap-3'>
|
||||
<View className='relative' onClick={handleUploadImage}>
|
||||
{editGoods.image ? (
|
||||
<Image className='w-16 h-16 rounded-lg' src={editGoods.image} mode='aspectFill' />
|
||||
<Image className='w-16 h-16 rounded-lg' src={getCompressedImageUrl(editGoods.image)} mode='aspectFill' />
|
||||
) : (
|
||||
<View className='w-16 h-16 rounded-lg bg-gray-200 flex items-center justify-center'>
|
||||
<Text className='text-2xl text-gray-300'>📷</Text>
|
||||
@@ -567,7 +568,7 @@ export default function StoreGoodsPage() {
|
||||
<View className='flex flex-wrap gap-3'>
|
||||
{editForm.files.map((file, index) => (
|
||||
<View key={file.url + index} className='relative w-20 h-20'>
|
||||
<Image className='w-20 h-20 rounded-lg bg-gray-100' src={file.url} mode='aspectFill' />
|
||||
<Image className='w-20 h-20 rounded-lg bg-gray-100' src={getCompressedImageUrl(file.url)} mode='aspectFill' />
|
||||
<View
|
||||
className='absolute -top-1.5 -right-1.5 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center'
|
||||
onClick={() => handleRemoveBanner(index)}
|
||||
|
||||
@@ -5,6 +5,7 @@ import {pageShopOrder, updateShopOrder, removeShopOrder} from '@/api/shop/shopOr
|
||||
import type {ShopOrder, ShopOrderParam} from '@/api/shop/shopOrder/model'
|
||||
import {TenantId} from '@/config/app'
|
||||
import {useNewOrderDetector} from '@/hooks/useNewOrderDetector'
|
||||
import { getCompressedImageUrl } from '@/utils/image'
|
||||
|
||||
definePageConfig({
|
||||
navigationBarTitleText: '订单管理',
|
||||
@@ -359,7 +360,7 @@ export default function StoreOrdersPage() {
|
||||
{orderGoods.map((goods: any, idx: number) => (
|
||||
<View key={idx} className='flex items-center gap-3 mb-3'>
|
||||
{goods.coverImage && (
|
||||
<Image className='w-16 h-16 rounded-lg bg-gray-50' src={goods.coverImage}
|
||||
<Image className='w-16 h-16 rounded-lg bg-gray-50' src={getCompressedImageUrl(goods.coverImage)}
|
||||
mode='aspectFill'/>
|
||||
)}
|
||||
<View className='flex-1'>
|
||||
@@ -396,7 +397,7 @@ export default function StoreOrdersPage() {
|
||||
<Image
|
||||
key={i}
|
||||
className='w-20 h-20 rounded-lg bg-gray-100'
|
||||
src={img}
|
||||
src={getCompressedImageUrl(img)}
|
||||
mode='aspectFill'
|
||||
onClick={() => Taro.previewImage({
|
||||
current: img,
|
||||
@@ -549,7 +550,7 @@ export default function StoreOrdersPage() {
|
||||
<View className='flex flex-wrap gap-3 mb-6'>
|
||||
{proofImages.map((url, idx) => (
|
||||
<View key={idx} className='relative'>
|
||||
<Image className='w-20 h-20 rounded-lg bg-gray-50' src={url} mode='aspectFill'/>
|
||||
<Image className='w-20 h-20 rounded-lg bg-gray-50' src={getCompressedImageUrl(url)} mode='aspectFill'/>
|
||||
<View
|
||||
className='absolute -top-2 -right-2 w-5 h-5 bg-red-500 rounded-full flex items-center justify-center'
|
||||
onClick={() => removeProofImage(idx)}
|
||||
|
||||
Reference in New Issue
Block a user