diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue index 491a505..d96f719 100644 --- a/components-diy/diy-category-item.vue +++ b/components-diy/diy-category-item.vue @@ -47,7 +47,37 @@ {{ category.category_name }} - + + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + @@ -61,7 +91,37 @@ {{ one.category_name }} - + + + + + + + {{ item.label_name }} + + + + {{ isEnEnv ? item.en_goods_name : item.goods_name }} + + + + + {{ $lang('common.currencySymbol') }} + {{ parseFloat(showPrice(item)).toFixed(2).split('.')[0] }} + .{{ parseFloat(showPrice(item)).toFixed(2).split('.')[1] }} + + + + + + + + + 暂无商品 + + + + @@ -366,7 +426,11 @@ export default { timeout: {}, cartEditRepeat: false, selectedSecondCategory: null, - secondCategoryGoodsList: [] + secondCategoryGoodsList: [], + // 模板1专用:选中的分类ID和商品列表 + selectedCategoryId: null, + template1GoodsList: [], + template1Loading: false }; }, computed: { @@ -412,6 +476,10 @@ export default { // 用当前一级分类下同名二级分类的 id 查商品(而非全局按钮的 id) this.refreshGoodsByCurrentCategory(); } + // 模板1:直接加载当前一级分类下的所有商品 + if (this.value.template == 1 && this.category && this.category.category_id) { + this.getTemplate1Goods(this.category.category_id); + } }, mounted() { setTimeout(() => { @@ -473,6 +541,11 @@ export default { this.secondCategoryGoodsList = []; this.refreshGoodsByCurrentCategory(); } + // 模板1:切换一级分类时重新加载该分类下的商品 + if (this.value.template == 1 && this.index == this.select && this.category && this.category.category_id) { + this.template1GoodsList = []; + this.getTemplate1Goods(this.category.category_id); + } }, // 切换一级分类时, 根据当前一级分类下同名二级分类重新加载商品 currentOneCategory: { @@ -954,6 +1027,52 @@ export default { } }); }, + /** + * 模板1: 选择分类后加载该分类下的商品 + * @param {Object} category 选中的分类对象 + */ + selectCategoryForGoods(category) { + if (this.selectedCategoryId === category.category_id) { + return; // 已选中,不重复加载 + } + this.selectedCategoryId = category.category_id; + this.template1GoodsList = []; + this.getTemplate1Goods(category.category_id); + }, + /** + * 模板1: 根据分类ID获取商品列表 + */ + getTemplate1Goods(categoryId) { + this.template1Loading = true; + this.$api.sendRequest({ + url: '/api/goodssku/pageByCategory', + data: { + category_id: categoryId, + page: 1, + page_size: 10 + }, + success: res => { + this.template1Loading = false; + if (res.code == 0 && res.data && res.data.list) { + this.template1GoodsList = res.data.list; + } else { + this.template1GoodsList = []; + } + }, + fail: () => { + this.template1Loading = false; + this.template1GoodsList = []; + } + }); + }, + /** + * 模板1: 商品图片加载失败处理 + */ + template1ImgError(index) { + if (this.template1GoodsList[index]) { + this.template1GoodsList[index].goods_image = this.$util.getDefaultImage().goods; + } + }, //加载商品在购物车的总数量 loadGoodsCartNum(isRefresh = false) { this.goodsList.forEach((item) => { @@ -1090,6 +1209,38 @@ export default { font-size: var(--diy-category-item-name-size, 24rpx); } + + // 模板1选中状态 + &.selected { + .img-box { + border: 2rpx solid var(--base-color, #FF6B35); + border-radius: 8rpx; + } + .name { + color: var(--base-color, #FF6B35); + font-weight: bold; + } + } + } +} + +// 模板1商品列表容器 +.template1-goods-wrap { + padding: 20rpx; + background: #f5f5f5; + + .goods-list { + margin: 0; + padding-top: 0; + display: flex; + + .goods-item { + width: calc(50% - 10rpx); + background: #fff; + border-radius: 12rpx; + overflow: hidden; + margin-bottom: 20rpx; + } } }