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
dist/pages/index/index.js
Vendored
+51 -39
View File
@@ -28,33 +28,42 @@
// 成品展示数据
// 成品展示配图（从 img 里取对应实物图）
var SHOWCASES = [{
var SHOWCASE_LIST = [{
title: '毕业纪念笔记本',
desc: '全班名字组成校徽',
color: '#FFE4EC'
image: '/img/book_small/The1.jpg'
}, {
title: '铜质杯垫',
desc: '金属质感桌面艺术',
color: '#E8D5C4'
image: '/img/cup/The1.jpg'
}, {
title: '竹制笔盒',
desc: '自然竹纹文房雅器',
color: '#E0F0D9'
image: '/img/penbox/The1.jpg'
}, {
title: '书本型灯',
desc: '温暖光影点亮心意',
color: '#FFF3CD'
image: '/img/booklight/The1.jpg'
}, {
title: '情侣定制礼',
desc: '两个人的名字交织',
color: '#FCE4EC'
image: '/img/book_big/The1.jpg'
}, {
title: '企业年会礼',
desc: '员工名字组成Logo',
color: '#E3F2FD'
image: '/img/penbox/The2.jpg'
}];
// 品类对应的实物照片映射（首页卡片顶部大图）
var PRODUCT_IMG_MAP = {
'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'
};
function Index() {
var _useThemeContext = (0,_context_ThemeContext__WEBPACK_IMPORTED_MODULE_4__.useThemeContext)(),
theme = _useThemeContext.theme;
@@ -89,9 +98,10 @@ function Index() {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "search-inner",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "search-icon",
children: "\uD83D\uDD0D"
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Image, {
className: "search-icon-img",
src: "/icon/\u641C\u7D22.png",
mode: "aspectFit"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Input, {
className: "search-input",
type: "text",
@@ -123,7 +133,7 @@ function Index() {
previousMargin: "40rpx",
nextMargin: "40rpx",
indicatorDots: true,
children: SHOWCASES.map(function (item, idx) {
children: SHOWCASE_LIST.map(function (item, idx) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.SwiperItem, {
className: "showcase-swiper-item",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
@@ -132,25 +142,26 @@ function Index() {
className: "star-badge"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "showcase-image-wrapper",
style: {
background: item.color
},
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "showcase-emoji",
children: "\uD83C\uDF81"
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Image, {
className: "showcase-real-img",
src: item.image,
mode: "aspectFill"
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "showcase-info",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "showcase-title",
children: item.title
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "showcase-desc",
children: item.desc
className: "showcase-text-area",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "showcase-info",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "showcase-title",
children: item.title
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "showcase-desc",
children: item.desc
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "showcase-tag",
children: "\u6210\u54C1\u6848\u4F8B"
})]
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "showcase-tag",
children: "\u6210\u54C1\u6848\u4F8B"
})]
})
}, idx);
@@ -166,18 +177,18 @@ function Index() {
children: filteredCategories.map(function (cat) {
return /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "category-item dashed-card",
onClick: function onClick() {
onTap: function onTap() {
return navigateToProduct(cat.id);
},
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "star-badge"
}), cat.images && cat.images.length > 0 ? /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Image, {
className: "category-icon-img",
src: cat.images[0],
mode: "aspectFit"
}) : /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "category-icon",
children: cat.icon
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "category-img-wrapper",
children: /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Image, {
className: "category-img-real",
src: PRODUCT_IMG_MAP[cat.id] || '/icon/四角星.png',
mode: "aspectFill"
})
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "category-name",
children: cat.name
@@ -192,9 +203,10 @@ function Index() {
})
}), filteredCategories.length === 0 && /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsxs)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.View, {
className: "empty-category dashed-card",
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "empty-icon",
children: "\uD83D\uDD0D"
children: [/*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Image, {
className: "empty-icon-img",
src: "/icon/\u641C\u7D22.png",
mode: "aspectFit"
}), /*#__PURE__*/(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_5__.jsx)(_tarojs_components__WEBPACK_IMPORTED_MODULE_7__.Text, {
className: "empty-text",
children: "\u672A\u627E\u5230\u5339\u914D\u7684\u54C1\u7C7B"
dist/pages/index/index.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/pages/index/index.wxss
Vendored
+86 -43
View File
@@ -20,7 +20,7 @@
.header-title {
font-size: 48rpx;
font-weight: 800;
color: #5c3a3a;
color: var(--text-primary);
letter-spacing: 4rpx;
}
@@ -37,6 +37,7 @@
-ms-flex-align: center;
align-items: center;
background: #f8f9fa;
border: 1rpx dashed rgba(0, 0, 0, 0.06);
border-radius: 40rpx;
padding: 16rpx 24rpx;
}
@@ -46,51 +47,57 @@
margin-right: 16rpx;
}
.search-icon-img {
width: 28rpx;
height: 28rpx;
margin-right: 16rpx;
}
.search-input {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
font-size: 28rpx;
color: #5c3a3a;
color: var(--text-primary);
background: transparent;
border: none;
outline: none;
}
.search-input::-webkit-input-placeholder {
color: #b08d8d;
color: var(--text-secondary);
font-size: 26rpx;
}
.search-input::-moz-placeholder {
color: #b08d8d;
color: var(--text-secondary);
font-size: 26rpx;
}
.search-input:-ms-input-placeholder {
color: #b08d8d;
color: var(--text-secondary);
font-size: 26rpx;
}
.search-input::-ms-input-placeholder {
color: #b08d8d;
color: var(--text-secondary);
font-size: 26rpx;
}
.search-input::placeholder {
color: #b08d8d;
color: var(--text-secondary);
font-size: 26rpx;
}
.search-result-hint {
margin-top: 16rpx;
padding-top: 16rpx;
border-top: 2rpx dashed #eee;
border-top: 2rpx dashed var(--line-star);
}
.hint-text {
font-size: 24rpx;
color: #b08d8d;
color: var(--text-secondary);
}
/* 成品展示轮播 */
@@ -99,7 +106,7 @@
}
.showcase-swiper {
height: 460rpx;
height: 520rpx;
}
.showcase-swiper-item {
@@ -120,26 +127,23 @@
.showcase-swiper-card {
width: 100%;
height: 100%;
padding: 20rpx;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
position: relative;
border-radius: 24rpx;
overflow: hidden;
-webkit-box-shadow: var(--shadow-card);
box-shadow: var(--shadow-card);
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
}
.showcase-image-wrapper {
width: 100%;
height: 240rpx;
border-radius: 16rpx;
height: 320rpx;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
@@ -149,28 +153,53 @@
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
margin-bottom: 16rpx;
overflow: hidden;
-webkit-flex-shrink: 0;
-ms-flex-negative: 0;
flex-shrink: 0;
position: relative;
}
.showcase-emoji {
font-size: 80rpx;
.showcase-real-img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.showcase-info {
.showcase-text-area {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
text-align: center;
background: var(--bg-card);
padding: 16rpx 20rpx;
position: relative;
}
.showcase-info .showcase-title {
font-size: 32rpx;
font-weight: 700;
color: #5c3a3a;
color: var(--text-primary);
display: block;
margin-bottom: 8rpx;
}
.showcase-info .showcase-desc {
font-size: 24rpx;
color: #b08d8d;
color: var(--text-secondary);
display: block;
}
@@ -178,12 +207,13 @@
position: absolute;
top: 16rpx;
right: 16rpx;
background: rgba(255, 154, 158, 0.15);
color: #ff6b81;
background: rgba(255, 154, 158, 0.9);
color: #ffffff;
font-size: 20rpx;
padding: 4rpx 16rpx;
border-radius: 20rpx;
font-weight: 500;
font-weight: 600;
z-index: 2;
}
/* 热门品类 */
@@ -208,7 +238,8 @@
-ms-flex-align: center;
align-items: center;
text-align: center;
padding: 32rpx 20rpx;
padding: 0 0 24rpx;
overflow: hidden;
-webkit-transition: -webkit-transform 0.2s;
transition: -webkit-transform 0.2s;
transition: transform 0.2s;
@@ -221,29 +252,40 @@
transform: scale(0.96);
}
.category-icon {
font-size: 56rpx;
margin-bottom: 12rpx;
/* 品类顶部实物照片 */
.category-img-wrapper {
width: 100%;
height: 180rpx;
overflow: hidden;
border-radius: 16rpx;
margin-bottom: 16rpx;
position: relative;
}
.category-icon-img {
width: 120rpx;
height: 120rpx;
-o-object-fit: contain;
object-fit: contain;
margin-bottom: 12rpx;
.category-img-real {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.category-name {
font-size: 28rpx;
font-weight: 700;
color: #5c3a3a;
color: var(--text-primary);
margin-bottom: 8rpx;
}
.category-desc {
font-size: 22rpx;
color: #b08d8d;
color: var(--text-secondary);
}
.category-price {
font-size: 30rpx;
font-weight: 700;
color: var(--accent-pink);
margin-top: 8rpx;
}
/* 空状态 */
@@ -261,21 +303,22 @@
text-align: center;
}
.empty-icon {
font-size: 64rpx;
.empty-icon-img {
width: 48rpx;
height: 48rpx;
margin-bottom: 16rpx;
}
.empty-text {
font-size: 30rpx;
font-weight: 600;
color: #5c3a3a;
color: var(--text-primary);
margin-bottom: 8rpx;
}
.empty-sub {
font-size: 24rpx;
color: #b08d8d;
color: var(--text-secondary);
}
/* 底部安全区 */