15133400227
/
baimacms
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1

This commit is contained in:
1173117610@qq.com 2026-05-11 10:59:25 +08:00
parent 9f77806743
commit c5031bc24b
1 changed files with 66 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
pages/category/category.vue
View File

@ -23,12 +23,22 @@
<!-- 占位符适配固定头部 -->
<view class="header-placeholder" :style="{ height: (statusBarHeight + 90) + 'px' }"></view>
<!-- 子分类金刚区 -->
<!-- 子分类金刚区 (支持翻页) -->
<view class="sub-grid-wrap" v-if="subCategories.length > 0">
<view class="sub-grid">
<view class="sub-item" v-for="(sub, idx) in subCategories" :key="idx" @click="selectSub(sub.second_category)">
<image class="sub-icon" :src="sub.img_url" mode="aspectFit"></image>
<text class="sub-text">{{ sub.cate_name.trim() }}</text>
<swiper class="sub-swiper" :duration="300" @change="onSubSwiperChange">
<swiper-item v-for="(group, gIdx) in groupedSubCategories" :key="gIdx">
<view class="sub-grid">
<view class="sub-item" v-for="(sub, idx) in group" :key="idx" @click="selectSub(sub.second_category)">
<image class="sub-icon" :src="sub.img_url" mode="aspectFit"></image>
<text class="sub-text">{{ sub.cate_name.trim() }}</text>
</view>
</view>
</swiper-item>
</swiper>
<!-- 进度条指示器 (仅在多页时显示) -->
<view class="swiper-dot-wrap" v-if="groupedSubCategories.length > 1">
<view class="swiper-dot-bar">
<view class="swiper-dot-active" :style="{ left: dotLeft + '%' }"></view>
</view>
</view>
</view>
@ -38,7 +48,7 @@
<view class="filter-item" :class="{ 'active': sortType === 1 }" @click="changeSort(1)">综合</view>
<view class="filter-item" :class="{ 'active': sortType === 2 }" @click="changeSort(2)">销量</view>
<view class="filter-item" :class="{ 'active': sortType === 3 }" @click="changeSort(3)">
价格
卷后价
<view class="price-arrows">
<text class="up" :class="{ 'hl': sortType === 3 && priceOrder === 'asc' }">▲</text>
<text class="down" :class="{ 'hl': sortType === 3 && priceOrder === 'desc' }">▼</text>
@ -92,7 +102,22 @@
sortType: 1,
priceOrder: 'desc',
loading: false,
finished: false
finished: false,
subCurrentIndex: 0
}
},
computed: {
groupedSubCategories() {
const groups = [];
for (let i = 0; i < this.subCategories.length; i += 10) {
groups.push(this.subCategories.slice(i, i + 10));
}
return groups;
},
dotLeft() {
if (this.groupedSubCategories.length <= 1) return 0;
const maxIndex = this.groupedSubCategories.length - 1;
return (this.subCurrentIndex / maxIndex) * 50; // 50% 是滑块可移动的最大范围（取决于样式）
}
},
onLoad(options) {
@ -193,6 +218,9 @@
this.subCategories = item.second || [];
this.getProducts(true);
},
onSubSwiperChange(e) {
this.subCurrentIndex = e.detail.current;
},
selectSub(sonId) {
this.currentSonId = sonId;
this.getProducts(true);
@ -337,12 +365,17 @@
background: #ffffff;
margin: 20rpx;
border-radius: 16rpx;
padding: 20rpx 10rpx;
padding: 20rpx 0;
}
.sub-swiper {
height: 300rpx; /* 适应两行 2x5 布局 */
}
.sub-grid {
display: flex;
flex-wrap: wrap;
padding: 0 10rpx;
}
.sub-item {
@ -364,6 +397,31 @@
color: #333;
}
.swiper-dot-wrap {
display: flex;
justify-content: center;
margin-top: 10rpx;
}
.swiper-dot-bar {
width: 60rpx;
height: 4rpx;
background: #eeeeee;
border-radius: 2rpx;
position: relative;
overflow: hidden;
}
.swiper-dot-active {
position: absolute;
top: 0;
width: 30rpx;
height: 4rpx;
background: #ff416c;
border-radius: 2rpx;
transition: left 0.3s;
}
/* 筛选栏 */
.filter-bar {
display: flex;