赵忠林
082646a613
- 将图片显示统一替换为 getCompressedImageUrl 函数处理压缩 - 覆盖 35 个文件，包括 4 个组件和 31 个页面 - 主要组件：LazyImage、ProductCard、OrderCard、SkuSelector 内部自动压缩图片 - 主要页面：购物车、订单、积分、活动、拼团、秒杀、收藏、浏览历史等 - 跳过用户头像、二维码、商品详情大图及所有 Taro.previewImage 调用 - 调整压缩默认宽度为 300，保持质量90，启用压缩功能
115 lines
3.3 KiB
TypeScript
115 lines
3.3 KiB
TypeScript
import React, { useState, useEffect } from 'react'
|
|
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: '浏览历史',
|
|
})
|
|
|
|
interface HistoryItem {
|
|
goodsId: number
|
|
name?: string
|
|
image?: string
|
|
price?: string
|
|
timestamp: number
|
|
}
|
|
|
|
const BrowseHistoryPage: React.FC = () => {
|
|
const [list, setList] = useState<HistoryItem[]>([])
|
|
|
|
useEffect(() => {
|
|
loadHistory()
|
|
}, [])
|
|
|
|
const loadHistory = () => {
|
|
try {
|
|
const history = Taro.getStorageSync('browse_history') || []
|
|
setList(history)
|
|
} catch {
|
|
setList([])
|
|
}
|
|
}
|
|
|
|
const handleItemClick = (goodsId: number) => {
|
|
Taro.navigateTo({ url: `/pages/shop/product-detail?id=${goodsId}` })
|
|
}
|
|
|
|
const handleClearHistory = () => {
|
|
Taro.showModal({
|
|
title: '提示',
|
|
content: '确定要清空浏览历史吗？',
|
|
success: (res) => {
|
|
if (res.confirm) {
|
|
Taro.removeStorageSync('browse_history')
|
|
setList([])
|
|
Taro.showToast({ title: '已清空', icon: 'success' })
|
|
}
|
|
}
|
|
})
|
|
}
|
|
|
|
const formatTime = (timestamp: number) => {
|
|
const date = new Date(timestamp)
|
|
return `${date.getMonth() + 1}/${date.getDate()} ${date.getHours()}:${String(date.getMinutes()).padStart(2, '0')}`
|
|
}
|
|
|
|
return (
|
|
<View className='min-h-screen bg-gray-50'>
|
|
{/* 顶部操作栏 */}
|
|
{list.length > 0 && (
|
|
<View className='bg-white px-4 py-2 flex justify-end border-b border-gray-100'>
|
|
<Text
|
|
className='text-sm text-red-500'
|
|
onClick={handleClearHistory}
|
|
>
|
|
清空历史
|
|
</Text>
|
|
</View>
|
|
)}
|
|
|
|
<ScrollView scrollY className='h-screen'>
|
|
<View className='p-3'>
|
|
{list.length > 0 ? (
|
|
<View className='grid grid-cols-2 gap-3'>
|
|
{list.map(item => (
|
|
<View
|
|
key={`${item.goodsId}-${item.timestamp}`}
|
|
className='bg-white rounded-lg overflow-hidden'
|
|
onClick={() => handleItemClick(item.goodsId)}
|
|
>
|
|
<Image
|
|
className='w-full'
|
|
style={{ height: '160px' }}
|
|
src={getCompressedImageUrl(item.image || '')}
|
|
mode='aspectFill'
|
|
/>
|
|
<View className='p-2'>
|
|
<Text className='text-sm text-gray-800 line-clamp-2 block'>
|
|
{item.name}
|
|
</Text>
|
|
<View className='flex items-center justify-between mt-1'>
|
|
<Text className='text-red-500 text-sm font-medium'>
|
|
¥{item.price || '0'}
|
|
</Text>
|
|
<Text className='text-xs text-gray-400'>
|
|
{formatTime(item.timestamp)}
|
|
</Text>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
))}
|
|
</View>
|
|
) : (
|
|
<EmptyState text='暂无浏览历史' />
|
|
)}
|
|
</View>
|
|
</ScrollView>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default BrowseHistoryPage
|