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 11:54:08 +08:00
parent a863ec31b3
commit e93ba20d83
1 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
pages/category/category_detail.vue
View File

@ -23,7 +23,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>
@ -31,6 +31,14 @@
</view>
</view>
<!-- 高级筛选标签栏 -->
<view class="sub-filter-row">
<view class="sub-filter-item" :class="{ 'active': filterHasCoupon }" @click="toggleFilter('coupon')">有券</view>
<view class="sub-filter-item" :class="{ 'active': filterIsFlagship }" @click="toggleFilter('flagship')">旗舰店</view>
<view class="sub-filter-item" :class="{ 'active': filterIsTmall }" @click="toggleFilter('tmall')">天猫</view>
<view class="sub-filter-item" :class="{ 'active': filterIsBrand }" @click="toggleFilter('brand')">品牌</view>
</view>
<!-- 商品列表 (横向单列风格) -->
<view class="goods-list">
<view class="goods-item" v-for="(goods, idx) in goodsList" :key="idx" @click="goToDetail(goods.id)">
@ -92,7 +100,12 @@
sortType: 1, // 1:综合, 2:销量, 3:价格
priceOrder: 'desc',
loading: false,
finished: false
finished: false,
// 高级筛选状态
filterHasCoupon: false,
filterIsFlagship: false,
filterIsTmall: false,
filterIsBrand: false
}
},
onLoad(options) {
@ -126,14 +139,27 @@
sortParam = this.priceOrder === 'asc' ? 8 : 9;
}
// 构建高级筛选参数
let filterParams = '';
if (this.filterHasCoupon) filterParams += '&filtrate_type=16';
if (this.filterIsBrand) filterParams += '&is_brand=1';
// 动态构建 shoptype: 旗舰店为1，天猫为2，两者都选为1,2
let shopTypes = [];
if (this.filterIsFlagship) shopTypes.push(1);
if (this.filterIsTmall) shopTypes.push(2);
if (shopTypes.length > 0) {
filterParams += `&shoptype=${shopTypes.join(',')}`;
}
uni.request({
url: `https://api.cmspro.haodanku.com/find/allItemList?category_id=${this.mainCatId}&son_category=${encodeURIComponent(this.secondCategory)}&page=${this.page}&sort=${sortParam}&page_size=20&cid=qOstW90`,
url: `https://api.cmspro.haodanku.com/find/allItemList?category_id=${this.mainCatId}&son_category=${encodeURIComponent(this.secondCategory)}&page=${this.page}&sort=${sortParam}&page_size=20&cid=qOstW90${filterParams}`,
success: (res) => {
if (res.data && res.data.code === 200 && res.data.data && res.data.data.item_info) {
const list = res.data.data.item_info.map(item => ({
id: item.id,
image: item.itempic,
title: item.itemshorttitle,
title: item.itemshorttitle && item.itemshorttitle.length > 18 ? item.itemshorttitle.substring(0, 18) + '...' : item.itemshorttitle,
finalPrice: item.itemendprice,
couponValue: item.couponmoney || 0,
sales: item.itemsale >= 10000 ? (item.itemsale / 10000).toFixed(1) + '万' : item.itemsale,
@ -169,6 +195,14 @@
}
this.getProducts(true);
},
toggleFilter(type) {
if (type === 'coupon') this.filterHasCoupon = !this.filterHasCoupon;
if (type === 'flagship') this.filterIsFlagship = !this.filterIsFlagship;
if (type === 'tmall') this.filterIsTmall = !this.filterIsTmall;
if (type === 'brand') this.filterIsBrand = !this.filterIsBrand;
this.getProducts(true);
},
loadMore() {
this.getProducts();
},
@ -271,6 +305,30 @@
font-weight: bold;
}
/* 高级筛选标签栏 */
.sub-filter-row {
display: flex;
background: #ffffff;
padding: 10rpx 20rpx 20rpx;
align-items: center;
}
.sub-filter-item {
padding: 6rpx 20rpx;
background: #f5f6f8;
color: #333;
font-size: 24rpx;
border-radius: 8rpx;
margin-right: 16rpx;
transition: all 0.2s;
}
.sub-filter-item.active {
background: linear-gradient(to right, #ff758c, #ff416c);
color: #ffffff;
font-weight: 500;
}
.price-arrows {
display: flex;
flex-direction: column;
@ -338,7 +396,7 @@
}
.title-text {
font-size: 26rpx;
font-size: 22rpx;
color: #333;
font-weight: 500;
overflow: hidden;