EIEI/wechat_wc
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
lhmin0604
2026-08-02 00:21:54 +08:00
parent d37a93ab9e
commit e423ab2d73
146 changed files with 3449 additions and 1342 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/index/index.scss
+68 -36
View File
@@ -12,7 +12,7 @@
.header-title {
font-size: 48px;
font-weight: 800;
color: #5c3a3a;
color: var(--text-primary);
letter-spacing: 4px;
}
@@ -25,6 +25,7 @@
display: flex;
align-items: center;
background: #f8f9fa;
border: 1px dashed rgba(0, 0, 0, 0.06);
border-radius: 40px;
padding: 16px 24px;
}
@@ -34,29 +35,35 @@
margin-right: 16px;
}
.search-icon-img {
width: 28px;
height: 28px;
margin-right: 16px;
}
.search-input {
flex: 1;
font-size: 28px;
color: #5c3a3a;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
}
.search-input::placeholder {
color: #b08d8d;
color: var(--text-secondary);
font-size: 26px;
}
.search-result-hint {
margin-top: 16px;
padding-top: 16px;
border-top: 2px dashed #eee;
border-top: 2px dashed var(--line-star);
}
.hint-text {
font-size: 24px;
color: #b08d8d;
color: var(--text-secondary);
}
/* 成品展示轮播 */
@@ -65,7 +72,7 @@
}
.showcase-swiper {
height: 460rpx;
height: 520rpx;
}
.showcase-swiper-item {
@@ -79,44 +86,54 @@
.showcase-swiper-card {
width: 100%;
height: 100%;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
position: relative;
box-sizing: border-box;
border-radius: 24px;
overflow: hidden;
box-shadow: var(--shadow-card);
box-sizing: border-box;
}
.showcase-image-wrapper {
width: 100%;
height: 240rpx;
border-radius: 16px;
height: 320rpx;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 16px;
overflow: hidden;
flex-shrink: 0;
position: relative;
}
.showcase-emoji {
font-size: 80px;
.showcase-real-img {
width: 100%;
height: 100%;
object-fit: cover;
}
.showcase-info {
.showcase-text-area {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background: var(--bg-card);
padding: 16px 20px;
position: relative;
}
.showcase-info .showcase-title {
font-size: 32px;
font-weight: 700;
color: #5c3a3a;
color: var(--text-primary);
display: block;
margin-bottom: 8px;
}
.showcase-info .showcase-desc {
font-size: 24px;
color: #b08d8d;
color: var(--text-secondary);
display: block;
}
@@ -124,12 +141,13 @@
position: absolute;
top: 16px;
right: 16px;
background: rgba(255, 154, 158, 0.15);
color: #ff6b81;
background: rgba(255, 154, 158, 0.9);
color: #ffffff;
font-size: 20px;
padding: 4px 16px;
border-radius: 20px;
font-weight: 500;
font-weight: 600;
z-index: 2;
}
/* 热门品类 */
@@ -148,35 +166,48 @@
flex-direction: column;
align-items: center;
text-align: center;
padding: 32px 20px;
padding: 0 0 24px;
overflow: hidden;
transition: transform 0.2s;
}
.category-item:active {
transform: scale(0.96);
}
.category-icon {
font-size: 56px;
margin-bottom: 12px;
/* 品类顶部实物照片 */
.category-img-wrapper {
width: 100%;
height: 180rpx;
overflow: hidden;
border-radius: 16px;
margin-bottom: 16px;
position: relative;
}
.category-icon-img {
width: 120px;
height: 120px;
object-fit: contain;
margin-bottom: 12px;
.category-img-real {
width: 100%;
height: 100%;
object-fit: cover;
}
.category-name {
font-size: 28px;
font-weight: 700;
color: #5c3a3a;
color: var(--text-primary);
margin-bottom: 8px;
}
.category-desc {
font-size: 22px;
color: #b08d8d;
color: var(--text-secondary);
}
.category-price {
font-size: 30px;
font-weight: 700;
color: var(--accent-pink);
margin-top: 8px;
}
/* 空状态 */
@@ -188,21 +219,22 @@
text-align: center;
}
.empty-icon {
font-size: 64px;
.empty-icon-img {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.empty-text {
font-size: 30px;
font-weight: 600;
color: #5c3a3a;
color: var(--text-primary);
margin-bottom: 8px;
}
.empty-sub {
font-size: 24px;
color: #b08d8d;
color: var(--text-secondary);
}
/* 底部安全区 */
src/pages/index/index.tsx
+46 -36
View File
@@ -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>