Uniapp/lucky_shop
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：增加分类按钮，把商品列表的商品放在按钮下面

Browse Source
This commit is contained in:
jinhhanhan
2026-07-13 17:14:15 +08:00
parent 0ca64b7dcf
commit 2e4f11d108
1 changed files with 145 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

154
components-diy/diy-category-item.vue
View File

@@ -5,17 +5,45 @@
<image :src="$util.img(category.image_adv)" mode="widthFix" show-menu-by-longpress />
</view>
<block v-if="value.level == 2">
<block v-if="parseInt(value.level) == 2">
<view class="category-title">{{ category.category_name }}</view>
<view class="category-list">
<view class="category-item" v-for="(one, oneIndex) in category.child_list" :key="oneIndex"
@tap.stop="$util.redirectTo('/pages_goods/list', { category_id: one.category_id })">
<view class="img-box">
<image :src="$util.img(one.image)" mode="widthFix" show-menu-by-longpress />
</view>
<view class="name">{{ one.category_name }}</view>
<view class="second-category-btns">
<view class="second-category-btn"
v-for="(one, oneIndex) in category.child_list"
:key="oneIndex"
:class="{ selected: selectedSecondCategory == one.category_id }"
@tap="selectSecondCategory(one)">
{{ one.category_name }}
</view>
</view>
<view class="category-goods-list" v-if="selectedSecondCategory">
<view class="goods-list double-column show" :data-template="value.template" v-if="secondCategoryGoodsList.length">
<view class="goods-item" v-for="(item, index) in secondCategoryGoodsList" :key="index">
<view class="goods-img" @tap.stop="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" show-menu-by-longpress />
<view class="color-base-bg goods-tag" v-if="item.label_name">{{ item.label_name }}</view>
</view>
<view class="info-wrap">
<view class="name-wrap" @tap.stop="toDetail(item)">
<view class="goods-name">{{ isEnEnv ? item.en_goods_name : item.goods_name }}</view>
</view>
<view class="price-wrap">
<view class="discount-price">
<block v-if="item.isinformation == 0">
<text class="unit price-style small">{{ $lang('common.currencySymbol') }}</text>
<text class="price price-style large">{{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }}</text>
<text class="unit price-style small">.{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }}</text>
</block>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="category-goods-empty" v-if="selectedSecondCategory && !secondCategoryGoodsList.length && !loading">
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix" show-menu-by-longpress></image>
<view class="tips">{{ $lang('components-diy.diy-category.noCategory') }}</view>
</view>
</block>
<block v-if="value.level == 3">
@@ -316,13 +344,17 @@ export default {
scrollTop: 0,
loadType: '',
timeout: {},
cartEditRepeat: false
cartEditRepeat: false,
selectedSecondCategory: null,
secondCategoryGoodsList: []
};
},
created() {
this.type = this.value.template == 1 ? 'category' : 'goods';
if (this.index == this.select && this.pageIndex == 0) this.getGoodsList();
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
console.log('diy-category-item type:', this.type, 'value.level:', this.value.level, 'typeof value.level:', typeof this.value.level);
console.log('diy-category-item category.child_list:', this.category.child_list, 'length:', this.category.child_list ? this.category.child_list.length : 'undefined');
},
mounted() {
setTimeout(() => {
@@ -739,6 +771,58 @@ export default {
if (!link) return;
this.$util.diyRedirectTo(JSON.parse(link));
},
selectSecondCategory(category) {
if (this.selectedSecondCategory === category.category_id) {
this.selectedSecondCategory = null;
this.secondCategoryGoodsList = [];
} else {
this.selectedSecondCategory = category.category_id;
this.secondCategoryGoodsList = [];
this.getSecondCategoryGoods(category.category_id);
}
},
getSecondCategoryGoods(categoryId) {
this.loading = true;
let order = '';
let sort = '';
if (this.value.sortWay) {
if (this.value.sortWay == 'default') {
order = '';
sort = '';
} else if (this.value.sortWay == 'sales') {
order = 'sale_num';
sort = 'desc';
} else if (this.value.sortWay == 'price') {
order = 'discount_price';
sort = 'desc';
} else if (this.value.sortWay == 'news') {
order = 'create_time';
sort = 'desc';
}
}
this.$api.sendRequest({
url: '/api/goodssku/pageByCategory',
data: {
page: 1,
page_size: this.pageSize,
category_id: categoryId,
order: order,
sort: sort
},
success: res => {
if (res.code == 0 && res.data) {
this.secondCategoryGoodsList = res.data.list || [];
this.secondCategoryGoodsList.forEach((item) => {
item.num = this.cartList['goods_' + item.goods_id] ? this.cartList['goods_' + item.goods_id].num : 0;
});
}
this.loading = false;
},
fail: () => {
this.loading = false;
}
});
},
//加载商品在购物车的总数量
loadGoodsCartNum(isRefresh = false) {
this.goodsList.forEach((item) => {
@@ -803,6 +887,58 @@ export default {
}
}
.second-category-btns {
display: flex;
flex-wrap: wrap;
background: #fff;
margin: 0 20rpx;
border-radius: 10rpx;
padding: 20rpx;
gap: 16rpx;
margin-bottom: 20rpx;
.second-category-btn {
padding: 16rpx 32rpx;
background: #f5f5f5;
border-radius: 20rpx;
font-size: 26rpx;
color: #333;
cursor: pointer;
user-select: none;
z-index: 100;
position: relative;
&.selected {
background: var(--color-base-bg, #ff5000);
color: #fff;
}
}
}
.category-goods-list {
padding: 0 20rpx;
margin-bottom: 20rpx;
}
.category-goods-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60rpx 0;
image {
width: 200rpx;
height: 200rpx;
margin-bottom: 20rpx;
}
.tips {
font-size: 26rpx;
color: #999;
}
}
.category-list {
display: flex;
flex-wrap: wrap;