商品浏览页构建前最后一次更新

src/pages/index/index.tsx

@@ -1,4 +1,4 @@
-import { View, Text, Swiper, SwiperItem, Input, Image } from '@tarojs/components'
+import { View, Text, Image, Input, Button, Swiper, SwiperItem } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useState } from 'react'
 import './index.scss'
@@ -6,16 +6,25 @@ import { CATEGORIES } from '../../utils/productConfig'
 import ThemeToggle from '../../components/ThemeToggle'
 import { useThemeContext } from '../../context/ThemeContext'
 
-// 成品展示数据
-const SHOWCASES = [
-  { title: '毕业纪念笔记本', desc: '全班名字组成校徽', color: '#FFE4EC' },
-  { title: '铜质杯垫', desc: '金属质感桌面艺术', color: '#E8D5C4' },
-  { title: '竹制笔盒', desc: '自然竹纹文房雅器', color: '#E0F0D9' },
-  { title: '书本型灯', desc: '温暖光影点亮心意', color: '#FFF3CD' },
-  { title: '情侣定制礼', desc: '两个人的名字交织', color: '#FCE4EC' },
-  { title: '企业年会礼', desc: '员工名字组成Logo', color: '#E3F2FD' }
+// 成品展示配图（从 img 里取对应实物图）
+const SHOWCASE_LIST = [
+  { title: '毕业纪念笔记本', desc: '全班名字组成校徽', image: '/img/book_small/The1.jpg' },
+  { title: '铜质杯垫', desc: '金属质感桌面艺术', image: '/img/cup/The1.jpg' },
+  { title: '竹制笔盒', desc: '自然竹纹文房雅器', image: '/img/penbox/The1.jpg' },
+  { title: '书本型灯', desc: '温暖光影点亮心意', image: '/img/booklight/The1.jpg' },
+  { title: '情侣定制礼', desc: '两个人的名字交织', image: '/img/book_big/The1.jpg' },
+  { title: '企业年会礼', desc: '员工名字组成Logo', image: '/img/penbox/The2.jpg' }
 ]
 
+// 品类对应的实物照片映射（首页卡片顶部大图）
+const PRODUCT_IMG_MAP: Record<string, string> = {
+  'notebook-small': '/img/book_small/The1.jpg',
+  'notebook-large': '/img/book_big/The1.jpg',
+  'coaster': '/img/cup/The1.jpg',
+  'penbox': '/img/penbox/The1.jpg',
+  'booklamp': '/img/booklight/The1.jpg'
+}
+
 export default function Index() {
   const { theme } = useThemeContext()
   const [searchKey, setSearchKey] = useState('')
@@ -48,7 +57,7 @@ export default function Index() {
         <View className='search-card dashed-card'>
           <View className='star-badge' />
           <View className='search-inner'>
-            <Text className='search-icon'>🔍</Text>
+            <Image className='search-icon-img' src='/icon/搜索.png' mode='aspectFit' />
             <Input
               className='search-input'
               type='text'
@@ -84,21 +93,20 @@ export default function Index() {
             nextMargin='40rpx'
             indicatorDots
           >
-            {SHOWCASES.map((item, idx) => (
+            {SHOWCASE_LIST.map((item, idx) => (
               <SwiperItem key={idx} className='showcase-swiper-item'>
                 <View className='showcase-swiper-card dashed-card'>
                   <View className='star-badge' />
-                  <View
-                    className='showcase-image-wrapper'
-                    style={{ background: item.color }}
-                  >
-                    <Text className='showcase-emoji'>🎁</Text>
+                  <View className='showcase-image-wrapper'>
+                    <Image className='showcase-real-img' src={item.image} mode='aspectFill' />
                   </View>
-                  <View className='showcase-info'>
-                    <Text className='showcase-title'>{item.title}</Text>
-                    <Text className='showcase-desc'>{item.desc}</Text>
+                  <View className='showcase-text-area'>
+                    <View className='showcase-info'>
+                      <Text className='showcase-title'>{item.title}</Text>
+                      <Text className='showcase-desc'>{item.desc}</Text>
+                    </View>
+                    <View className='showcase-tag'>成品案例</View>
                   </View>
-                  <View className='showcase-tag'>成品案例</View>
                 </View>
               </SwiperItem>
             ))}
@@ -110,26 +118,28 @@ export default function Index() {
           <Text className='section-title'>热门品类</Text>
           <View className='category-grid'>
             {filteredCategories.map((cat) => (
-              <View
-                key={cat.id}
-                className='category-item dashed-card'
-                onClick={() => navigateToProduct(cat.id)}
-              >
-                <View className='star-badge' />
-                {cat.images && cat.images.length > 0 ? (
-                  <Image className='category-icon-img' src={cat.images[0]} mode='aspectFit' />
-                ) : (
-                  <Text className='category-icon'>{cat.icon}</Text>
-                )}
-                <Text className='category-name'>{cat.name}</Text>
-                <Text className='category-desc'>{cat.desc}</Text>
-                <Text className='category-price'>¥{cat.price} 起</Text>
-              </View>
+                <View
+                  key={cat.id}
+                  className='category-item dashed-card'
+                  onTap={() => navigateToProduct(cat.id)}
+                >
+                  <View className='star-badge' />
+                  <View className='category-img-wrapper'>
+                    <Image
+                      className='category-img-real'
+                      src={PRODUCT_IMG_MAP[cat.id] || '/icon/四角星.png'}
+                      mode='aspectFill'
+                    />
+                  </View>
+                  <Text className='category-name'>{cat.name}</Text>
+                  <Text className='category-desc'>{cat.desc}</Text>
+                  <Text className='category-price'>¥{cat.price} 起</Text>
+                </View>
             ))}
           </View>
           {filteredCategories.length === 0 && (
             <View className='empty-category dashed-card'>
-              <Text className='empty-icon'>🔍</Text>
+              <Image className='empty-icon-img' src='/icon/搜索.png' mode='aspectFit' />
               <Text className='empty-text'>未找到匹配的品类</Text>
               <Text className='empty-sub'>尝试搜索“笔记本”、“杯垫”等</Text>
             </View>