gxwebsoft/xinlong-shop-taro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(image): 全项目应用图片压缩优化

Browse Source 
- 将图片显示统一替换为 getCompressedImageUrl 函数处理压缩
- 覆盖 35 个文件，包括 4 个组件和 31 个页面
- 主要组件：LazyImage、ProductCard、OrderCard、SkuSelector 内部自动压缩图片
- 主要页面：购物车、订单、积分、活动、拼团、秒杀、收藏、浏览历史等
- 跳过用户头像、二维码、商品详情大图及所有 Taro.previewImage 调用
- 调整压缩默认宽度为 300，保持质量90，启用压缩功能
This commit is contained in:
赵忠林
2026-07-06 12:21:39 +08:00
parent c3dd04fa03
commit 082646a613
41 changed files with 95 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/pages/activity/detail/index.tsx
View File

@@ -3,6 +3,7 @@ import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getShopActivity, signUpActivity, cancelSignUpActivity, getSignUpStatus } from '@/api/shop/shopActivity'
import type { ShopActivity, ActivityStatus } from '@/api/shop/shopActivity/model'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '活动详情',
@@ -137,7 +138,7 @@ const ActivityDetailPage: React.FC = () => {
<ScrollView scrollY className='flex-1'>
{/* 活动头图 */}
{activity.image ? (
<Image src={activity.image} className='w-full' style={{ height: '192px' }} mode='aspectFill' />
<Image src={getCompressedImageUrl(activity.image)} className='w-full' style={{ height: '192px' }} mode='aspectFill' />
) : (
<View className='w-full flex items-center justify-center' style={{ height: '192px', background: 'linear-gradient(to right, #fb923c, #ef4444)' }}>
<Text className='text-6xl'>🎉</Text>

3
src/pages/event/detail/index.tsx
View File

@@ -3,6 +3,7 @@ import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getShopEvent, getRegistrationStatus, getEventStatusLabel } from '@/api/shop/shopEvent'
import type { ShopEvent, RegistrationStatus, EventFormField } from '@/api/shop/shopEvent'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({ navigationBarTitleText: '赛事详情' })
@@ -85,7 +86,7 @@ const EventDetailPage: React.FC = () => {
<ScrollView scrollY className='flex-1'>
{/* 封面 */}
{event.image ? (
<Image src={event.image} className='w-full' style={{ height: '200px' }} mode='aspectFill' />
<Image src={getCompressedImageUrl(event.image)} className='w-full' style={{ height: '200px' }} mode='aspectFill' />
) : (
<View className='w-full flex items-center justify-center' style={{ height: '200px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
<Text className='text-6xl'>🏆</Text>

3
src/pages/event/list/index.tsx
View File

@@ -5,6 +5,7 @@ import { pageShopEvent, getEventStatusLabel } from '@/api/shop/shopEvent'
import type { ShopEvent } from '@/api/shop/shopEvent'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({ navigationBarTitleText: '赛事报名' })
@@ -84,7 +85,7 @@ const EventListPage: React.FC = () => {
>
{/* 封面 */}
{event.image ? (
<Image src={event.image} className='w-full' style={{ height: '160px' }} mode='aspectFill' />
<Image src={getCompressedImageUrl(event.image)} className='w-full' style={{ height: '160px' }} mode='aspectFill' />
) : (
<View className='w-full flex items-center justify-center' style={{ height: '140px', background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
<Text className='text-5xl'>🏆</Text>

3
src/pages/favorite-list.tsx
View File

@@ -5,6 +5,7 @@ import { listShopGoodsFavorite } from '@/api/shop/shopGoodsFavorite'
import type { ShopGoodsFavorite } from '@/api/shop/shopGoodsFavorite/model'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '我的收藏',
@@ -69,7 +70,7 @@ const FavoriteListPage: React.FC = () => {
<Image
className='w-full'
style={{ height: '160px' }}
src={item.goodsImage}
src={getCompressedImageUrl(item.goodsImage)}
mode='aspectFill'
/>
<View className='p-2'>

3
src/pages/group-buy-detail.tsx
View File

@@ -7,6 +7,7 @@ import type { ShopGroupBuy, ShopGroupBuyRecord } from '@/api/shop/shopGroupBuy/m
import type { ShopGoods } from '@/api/shop/shopGoods/model'
import type { ShopGoodsSku } from '@/api/shop/shopGoodsSku/model'
import SkuSelector from '@/components/business/SkuSelector'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '拼团详情',
@@ -184,7 +185,7 @@ const GroupBuyDetailPage: React.FC = () => {
<View className="bg-white p-4 flex gap-3">
<Image
className="w-24 h-24 rounded-md bg-gray-100"
src={groupBuy.goodsImage || groupBuy.product?.image || ''}
src={getCompressedImageUrl(groupBuy.goodsImage || groupBuy.product?.image || '')}
mode="aspectFill"
/>
<View className="flex-1 flex flex-col justify-between">

3
src/pages/group-buy-list.tsx
View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { pageShopGroupBuy } from '@/api/shop/shopGroupBuy'
import type { ShopGroupBuy } from '@/api/shop/shopGroupBuy/model'
import EmptyState from '@/components/common/EmptyState'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '拼团活动',
@@ -72,7 +73,7 @@ const GroupBuyListPage: React.FC = () => {
>
<Image
className='w-24 h-24 rounded-md bg-gray-100 flex-shrink-0'
src={item.goodsImage || item.product?.image || ''}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
mode='aspectFill'
/>
<View className='flex-1 flex flex-col justify-between'>

3
src/pages/history-list.tsx
View File

@@ -3,6 +3,7 @@ import { View, Text, Image, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '浏览历史',
@@ -82,7 +83,7 @@ const BrowseHistoryPage: React.FC = () => {
<Image
className='w-full'
style={{ height: '160px' }}
src={item.image}
src={getCompressedImageUrl(item.image || '')}
mode='aspectFill'
/>
<View className='p-2'>

3
src/pages/index/article-list.tsx
View File

@@ -5,6 +5,7 @@ import { listCmsArticle } from '@/api/cms/cmsArticle'
import type { CmsArticle } from '@/api/cms/cmsArticle/model'
import EmptyState from '@/components/common/EmptyState'
import { useScrollHeight } from '@/hooks/useScrollHeight'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '活动列表',
@@ -83,7 +84,7 @@ const ArticleListPage: React.FC = () => {
{item.coverImage && (
<Image
className='w-full'
src={item.coverImage}
src={getCompressedImageUrl(item.coverImage)}
mode='aspectFill'
style={{ height: '160px' }}
/>

5
src/pages/index/index.tsx
View File

@@ -10,6 +10,7 @@ import type { CmsAd } from '@/api/cms/cmsAd/model'
import type { CmsArticle } from '@/api/cms/cmsArticle/model'
import type { ShopGoods } from '@/api/shop/shopGoods/model'
import Price from '@/components/common/Price'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '首页',
@@ -131,7 +132,7 @@ const IndexPage: React.FC = () => {
<SwiperItem key={item.adId}>
<Image
className='w-full h-full'
src={item.imageList?.[0]?.url || item.image || ''}
src={getCompressedImageUrl(item.imageList?.[0]?.url || item.image || '', { width: 750, quality: 90})}
mode='aspectFill'
onClick={() => {
if (item.path) Taro.navigateTo({ url: item.path })
@@ -230,7 +231,7 @@ const IndexPage: React.FC = () => {
{item.image ? (
<Image
style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
src={item.image}
src={getCompressedImageUrl(item.image)}
mode='aspectFill'
/>
) : (

3
src/pages/order-list.tsx
View File

@@ -5,6 +5,7 @@ import { listShopPointsOrder, cancelShopPointsOrder } from '@/api/shop/shopPoint
import type { ShopPointsOrder, PointsOrderStatus } from '@/api/shop/shopPointsOrder'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '积分订单',
@@ -161,7 +162,7 @@ const PointsOrderListPage: React.FC = () => {
<View key={idx} className='flex items-center gap-2 mb-2'>
<View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0'>
<Image
src={item.goodsImage}
src={getCompressedImageUrl(item.goodsImage)}
className='w-10 h-10 rounded'
mode='aspectFill'
/>

3
src/pages/order/after-sale-apply.tsx
View File

@@ -5,6 +5,7 @@ import { Button, Uploader } from '@nutui/nutui-react-taro'
import { getShopOrder } from '@/api/shop/shopOrder'
import type { ShopOrder } from '@/api/shop/shopOrder/model'
import Price from '@/components/common/Price'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '申请售后',
@@ -243,7 +244,7 @@ const AfterSaleApplyPage: React.FC = () => {
{/* 商品图片 */}
<Image
className='w-16 h-16 rounded-lg'
src={item.image || ''}
src={getCompressedImageUrl(item.image || '')}
mode='aspectFill'
/>

3
src/pages/order/after-sale-detail.tsx
View File

@@ -5,6 +5,7 @@ import { Button } from '@nutui/nutui-react-taro'
import { getAfterSaleDetail, cancelAfterSale, formatAfterSaleStatus, AFTER_SALE_TYPE_MAP } from '@/api/shop/shopAfterSale'
import type { AfterSaleDetail } from '@/api/shop/shopAfterSale'
import Price from '@/components/common/Price'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '售后详情',
@@ -214,7 +215,7 @@ const AfterSaleDetailPage: React.FC = () => {
<Image
key={idx}
className='w-20 h-20 rounded-lg'
src={url}
src={getCompressedImageUrl(url)}
mode='aspectFill'
/>
))}

3
src/pages/order/detail.tsx
View File

@@ -7,6 +7,7 @@ import { listShopOrderGoodsByOrderId } from '@/api/shop/shopOrderGoods'
import type { ShopOrder } from '@/api/shop/shopOrder/model'
import { OrderStatus, OrderStatusText } from '@/types/order'
import Price from '@/components/common/Price'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '订单详情',
@@ -301,7 +302,7 @@ const OrderDetailPage: React.FC = () => {
>
<View className='w-16 h-16 rounded-md bg-gray-100 flex-shrink-0 overflow-hidden'>
{item.image ? (
<Image className='w-full h-full' src={item.image} mode='aspectFill' />
<Image className='w-full h-full' src={getCompressedImageUrl(item.image)} mode='aspectFill' />
) : (
<View className='w-full h-full flex items-center justify-center'>
<Text className='text-xs text-gray-400'>暂无</Text>

5
src/pages/order/evaluate-detail/index.tsx
View File

@@ -3,6 +3,7 @@ import { View, Text, ScrollView, Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { getShopEvaluation, likeShopEvaluation } from '@/api/shop/shopEvaluation'
import type { ShopEvaluation } from '@/api/shop/shopEvaluation/model'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '评价详情',
@@ -110,7 +111,7 @@ const EvaluateDetailPage: React.FC = () => {
<View className='flex items-center gap-2'>
<View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0 overflow-hidden'>
{evaluation.goodsImage ? (
<Image src={evaluation.goodsImage} className='w-12 h-12' mode='aspectFill' />
<Image src={getCompressedImageUrl(evaluation.goodsImage)} className='w-12 h-12' mode='aspectFill' />
) : (
<Text className='text-2xl'>🛍️</Text>
)}
@@ -138,7 +139,7 @@ const EvaluateDetailPage: React.FC = () => {
className='w-24 h-24 bg-gray-100 rounded-lg overflow-hidden'
onClick={() => handleImagePreview(index)}
>
<Image src={img} className='w-24 h-24' mode='aspectFill' />
<Image src={getCompressedImageUrl(img)} className='w-24 h-24' mode='aspectFill' />
</View>
))}
</View>

3
src/pages/order/evaluate.tsx
View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { Button } from '@nutui/nutui-react-taro'
import { useUser } from '@/hooks/useUser'
import { submitGoodsComment } from '@/api/shop/shopGoodsComment'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '商品评价',
@@ -124,7 +125,7 @@ const EvaluatePage: React.FC = () => {
{images.map((img, idx) => (
<View key={idx} className='relative'>
<Image
src={img}
src={getCompressedImageUrl(img)}
className='w-20 h-20 rounded-lg'
mode='aspectFill'
/>

3
src/pages/order/evaluate/index.tsx
View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { Button } from '@nutui/nutui-react-taro'
import { useUser } from '@/hooks/useUser'
import { submitGoodsComment } from '@/api/shop/shopGoodsComment'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '商品评价',
@@ -124,7 +125,7 @@ const EvaluatePage: React.FC = () => {
{images.map((img, idx) => (
<View key={idx} className='relative'>
<Image
src={img}
src={getCompressedImageUrl(img)}
className='w-20 h-20 rounded-lg'
mode='aspectFill'
/>

3
src/pages/points/index.tsx
View File

@@ -6,6 +6,7 @@ import { pageShopPointsProduct } from '@/api/shop/shopPointsProduct'
import type { ShopPointsProduct } from '@/api/shop/shopPointsProduct/model'
import { getUserPointsInfo, type UserPointsInfo } from '@/api/system/user/points'
import EmptyState from '@/components/common/EmptyState'
import { getCompressedImageUrl } from '@/utils/image'
const PointsPage: React.FC = () => {
const { user } = useUser()
@@ -81,7 +82,7 @@ const PointsPage: React.FC = () => {
>
<View className='w-full aspect-square bg-orange-50 flex items-center justify-center overflow-hidden'>
{item.productImage ? (
<Image src={item.productImage} className='w-full h-full' mode='aspectFill' />
<Image src={getCompressedImageUrl(item.productImage)} className='w-full h-full' mode='aspectFill' />
) : (
<Text className='text-xs text-gray-300'>暂无图片</Text>
)}

3
src/pages/points/order-list/index.tsx
View File

@@ -5,6 +5,7 @@ import { listShopPointsOrder, cancelShopPointsOrder } from '@/api/shop/shopPoint
import type { ShopPointsOrder, PointsOrderStatus } from '@/api/shop/shopPointsOrder'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '积分订单',
@@ -163,7 +164,7 @@ const PointsOrderListPage: React.FC = () => {
<View key={idx} className='flex items-center gap-2 mb-2'>
<View className='w-12 h-12 bg-gray-100 rounded-lg flex items-center justify-center flex-shrink-0'>
<Image
src={item.goodsImage}
src={getCompressedImageUrl(item.goodsImage)}
className='w-10 h-10 rounded'
mode='aspectFill'
/>

3
src/pages/points/product-detail.tsx
View File

@@ -4,6 +4,7 @@ import Taro, { useRouter, useShareAppMessage } from '@tarojs/taro'
import { getShopPointsProduct } from '@/api/shop/shopPointsProduct'
import type { ShopPointsProduct } from '@/api/shop/shopPointsProduct/model'
import EmptyState from '@/components/common/EmptyState'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '积分商品',
@@ -95,7 +96,7 @@ const PointsProductDetail: React.FC = () => {
<Image
className='w-full'
style={{ height: '375px' }}
src={product.productImage}
src={getCompressedImageUrl(product.productImage)}
mode='aspectFill'
onClick={() => Taro.previewImage({ current: product.productImage, urls: [product.productImage!] })}
/>

3
src/pages/points/product-list/index.tsx
View File

@@ -5,6 +5,7 @@ import { listShopPointsProduct, pageShopPointsProduct } from '@/api/shop/shopPoi
import type { ShopPointsProduct } from '@/api/shop/shopPointsProduct/model'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '积分商城',
@@ -106,7 +107,7 @@ const PointsProductListPage: React.FC = () => {
<View className='w-full aspect-square bg-orange-50 relative'>
<Image
className='w-full h-full'
src={product.productImage || ''}
src={getCompressedImageUrl(product.productImage || '')}
mode='aspectFill'
/>
<View className='absolute top-1 right-1 px-2 rounded-full bg-black bg-opacity-50' style={{ paddingTop: '2px', paddingBottom: '2px' }}>

3
src/pages/seckill-detail.tsx
View File

@@ -7,6 +7,7 @@ import type { ShopSeckill } from '@/api/shop/shopSeckill/model'
import type { ShopGoods } from '@/api/shop/shopGoods/model'
import type { ShopGoodsSku } from '@/api/shop/shopGoodsSku/model'
import SkuSelector from '@/components/business/SkuSelector'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '秒杀详情',
@@ -176,7 +177,7 @@ const SeckillDetailPage: React.FC = () => {
{seckill.goodsImage || seckill.product?.image ? (
<Image
className="w-full h-full"
src={seckill.goodsImage || seckill.product?.image}
src={getCompressedImageUrl(seckill.goodsImage || seckill.product?.image)}
mode="aspectFill"
/>
) : (

3
src/pages/seckill-list.tsx
View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { pageShopSeckill } from '@/api/shop/shopSeckill'
import type { ShopSeckill } from '@/api/shop/shopSeckill/model'
import EmptyState from '@/components/common/EmptyState'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '限时秒杀',
@@ -94,7 +95,7 @@ const SeckillListPage: React.FC = () => {
>
<Image
className='w-24 h-24 rounded-md bg-gray-100 flex-shrink-0'
src={item.goodsImage || item.product?.image || ''}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
mode='aspectFill'
/>
<View className='flex-1 flex flex-col justify-between'>

7
src/pages/shop/cart.tsx
View File

@@ -8,6 +8,7 @@ import type { ShopGoods } from '@/api/shop/shopGoods/model'
import EmptyState from '@/components/common/EmptyState'
import Loading from '@/components/common/Loading'
import { isGuest } from '@/utils/auth'
import { getCompressedImageUrl } from '@/utils/image'
import { requireLogin } from '@/utils/login-guard'
import { isVipMember } from '@/utils/vip'
@@ -102,7 +103,7 @@ const CartPage: React.FC = () => {
>
<Image
className='w-full rounded-md bg-gray-100'
src={goods.image || ''}
src={getCompressedImageUrl(goods.image || '')}
mode='aspectFill'
style={{ height: '90px' }}
/>
@@ -169,7 +170,7 @@ const CartPage: React.FC = () => {
</View>
<Image
className="w-20 h-20 rounded-md bg-gray-100 flex-shrink-0"
src={item.goodsImage || item.product?.image || ''}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
mode="aspectFill"
/>
<View className="flex-1 flex flex-col justify-between">
@@ -221,7 +222,7 @@ const CartPage: React.FC = () => {
>
<Image
className="w-full rounded-md bg-gray-100"
src={goods.image || ''}
src={getCompressedImageUrl(goods.image || '')}
mode="aspectFill"
style={{ height: '90px' }}
/>

3
src/pages/shop/category.tsx
View File

@@ -8,6 +8,7 @@ import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model'
import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model'
import { isGuest } from '@/utils/auth'
import { isVipMember } from '@/utils/vip'
import { getCompressedImageUrl } from '@/utils/image'
import { requireLogin } from '@/utils/login-guard'
import LoadMore from '@/components/common/LoadMore'
import EmptyState from '@/components/common/EmptyState'
@@ -215,7 +216,7 @@ const CategoryPage: React.FC = () => {
<View className='w-20 h-20 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0'>
<Image
className='w-full h-full'
src={item.image || item.files || ''}
src={getCompressedImageUrl(item.image || item.files || '')}
mode='aspectFill'
lazyLoad
/>

5
src/pages/shop/checkout.tsx
View File

@@ -14,6 +14,7 @@ import type { ShopGoods } from '@/api/shop/shopGoods/model'
import type { ShopUserCoupon } from '@/api/shop/shopUserCoupon/model'
import type { OrderGoodsItem, OrderCreateRequest } from '@/api/shop/shopOrder/model'
import { isVipMember } from '@/utils/vip'
import { getCompressedImageUrl } from '@/utils/image'
// 满减门槛配置
const THRESHOLDS = [
@@ -344,7 +345,7 @@ const CheckoutPage: React.FC = () => {
<View key={`${item.goodsId}-${item.skuId}-${idx}`} className='flex gap-3 py-3 border-b border-gray-50'>
<Image
className='w-16 h-16 rounded-md bg-gray-100'
src={item.goodsImage || item.product?.image || item.sku?.image || ''}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || item.sku?.image || '')}
mode='aspectFill'
/>
<View className='flex-1'>
@@ -495,7 +496,7 @@ const CheckoutPage: React.FC = () => {
>
<Image
className='w-full h-20 rounded bg-gray-100'
src={product.image || ''}
src={getCompressedImageUrl(product.image || '')}
mode='aspectFill'
/>
<Text className='text-xs text-gray-700 block line-clamp-1 mt-1'>

3
src/pages/shop/group-buy-detail/index.tsx
View File

@@ -7,6 +7,7 @@ import type { ShopGroupBuy, ShopGroupBuyRecord } from '@/api/shop/shopGroupBuy/m
import type { ShopGoods } from '@/api/shop/shopGoods/model'
import type { ShopGoodsSku } from '@/api/shop/shopGoodsSku/model'
import SkuSelector from '@/components/business/SkuSelector'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '拼团详情',
@@ -184,7 +185,7 @@ const GroupBuyDetailPage: React.FC = () => {
<View className="bg-white p-4 flex gap-3">
<Image
className="w-24 h-24 rounded-md bg-gray-100"
src={groupBuy.goodsImage || groupBuy.product?.image || ''}
src={getCompressedImageUrl(groupBuy.goodsImage || groupBuy.product?.image || '')}
mode="aspectFill"
/>
<View className="flex-1 flex flex-col justify-between">

3
src/pages/shop/group-buy-list/index.tsx
View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { pageShopGroupBuy } from '@/api/shop/shopGroupBuy'
import type { ShopGroupBuy } from '@/api/shop/shopGroupBuy/model'
import EmptyState from '@/components/common/EmptyState'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '拼团活动',
@@ -72,7 +73,7 @@ const GroupBuyListPage: React.FC = () => {
>
<Image
className='w-24 h-24 rounded-md bg-gray-100 flex-shrink-0'
src={item.goodsImage || item.product?.image || ''}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
mode='aspectFill'
/>
<View className='flex-1 flex flex-col justify-between'>

3
src/pages/shop/index.tsx
View File

@@ -8,6 +8,7 @@ import type { ShopGoodsCategory } from '@/api/shop/shopGoodsCategory/model'
import type { ShopGoods, ShopGoodsParam } from '@/api/shop/shopGoods/model'
import { isGuest } from '@/utils/auth'
import { isVipMember } from '@/utils/vip'
import { getCompressedImageUrl } from '@/utils/image'
import { requireLogin } from '@/utils/login-guard'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
@@ -269,7 +270,7 @@ const ShopPage: React.FC = () => {
<View className='w-20 h-20 rounded-lg bg-gray-100 overflow-hidden flex-shrink-0'>
<Image
className='w-full h-full'
src={item.image || item.files || ''}
src={getCompressedImageUrl(item.image || item.files || '')}
mode='aspectFill'
lazyLoad
/>

3
src/pages/shop/seckill-list/index.tsx
View File

@@ -4,6 +4,7 @@ import Taro from '@tarojs/taro'
import { pageShopSeckill } from '@/api/shop/shopSeckill'
import type { ShopSeckill } from '@/api/shop/shopSeckill/model'
import EmptyState from '@/components/common/EmptyState'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '限时秒杀',
@@ -94,7 +95,7 @@ const SeckillListPage: React.FC = () => {
>
<Image
className='w-24 h-24 rounded-md bg-gray-100 flex-shrink-0'
src={item.goodsImage || item.product?.image || ''}
src={getCompressedImageUrl(item.goodsImage || item.product?.image || '')}
mode='aspectFill'
/>
<View className='flex-1 flex flex-col justify-between'>

7
src/pages/store/goods/index.tsx
View File

@@ -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)}

7
src/pages/store/orders/index.tsx
View File

@@ -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)}

3
src/pages/user/benefit-exchange-confirm/index.tsx
View File

@@ -5,6 +5,7 @@ import { getBenefitPackageDetail, exchangeBenefitPackage } from '@/api/shop/shop
import { getDefaultAddress } from '@/api/shop/shopUserAddress';
import { getUserBalance } from '@/api/system/user/balance';
import './index.scss';
import { getCompressedImageUrl } from '@/utils/image';
definePageConfig({
navigationBarTitleText: '确认兑换',
@@ -113,7 +114,7 @@ export default function BenefitExchangeConfirmPage() {
{/* 权益包信息 */}
<View className="pkg-info-card">
{pkg.coverImage && (
<Image className="pkg-img" src={pkg.coverImage} mode="aspectFill" />
<Image className="pkg-img" src={getCompressedImageUrl(pkg.coverImage)} mode="aspectFill" />
)}
<View className="pkg-detail">
<Text className="pkg-name">{pkg.name}</Text>

3
src/pages/user/benefit-packages/index.tsx
View File

@@ -4,6 +4,7 @@ import { useState, useEffect } from 'react';
import { getBenefitPackageList } from '@/api/shop/shopMemberBenefit';
import EmptyState from '@/components/common/EmptyState';
import './index.scss';
import { getCompressedImageUrl } from '@/utils/image';
definePageConfig({
navigationBarTitleText: '会员权益包',
@@ -54,7 +55,7 @@ export default function BenefitPackagesPage() {
{list.map((pkg) => (
<View key={pkg.id} className="pkg-card">
{pkg.coverImage && (
<Image className="pkg-cover" src={pkg.coverImage} mode="aspectFill" />
<Image className="pkg-cover" src={getCompressedImageUrl(pkg.coverImage)} mode="aspectFill" />
)}
<View className="pkg-body">
<View className="pkg-header">

3
src/pages/user/favorite-list/index.tsx
View File

@@ -5,6 +5,7 @@ import { listShopGoodsFavorite } from '@/api/shop/shopGoodsFavorite'
import type { ShopGoodsFavorite } from '@/api/shop/shopGoodsFavorite/model'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '我的收藏',
@@ -69,7 +70,7 @@ const FavoriteListPage: React.FC = () => {
<Image
className='w-full'
style={{ height: '160px' }}
src={item.goodsImage}
src={getCompressedImageUrl(item.goodsImage)}
mode='aspectFill'
/>
<View className='p-2'>

3
src/pages/user/history-list/index.tsx
View File

@@ -3,6 +3,7 @@ import { View, Text, Image, ScrollView } from '@tarojs/components'
import Taro from '@tarojs/taro'
import EmptyState from '@/components/common/EmptyState'
import LoadMore from '@/components/common/LoadMore'
import { getCompressedImageUrl } from '@/utils/image'
definePageConfig({
navigationBarTitleText: '浏览历史',
@@ -82,7 +83,7 @@ const BrowseHistoryPage: React.FC = () => {
<Image
className='w-full'
style={{ height: '160px' }}
src={item.image}
src={getCompressedImageUrl(item.image)}
mode='aspectFill'
/>
<View className='p-2'>