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

chore:页面显示正常1模板

Browse Source
This commit is contained in:
jinhhanhan
2026-07-17 10:21:40 +08:00
parent e3bbb7c77a
commit 185d4914a6
1 changed files with 154 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -47,7 +47,37 @@
<block v-else-if="categoryLevel == 2">
<view :class="['category-title', value.template == 1 ? 'category-title-with-lines' : '']">{{ category.category_name }}</view>
<view class="category-list">
<!-- 模板1: 直接显示该一级分类下的商品列表，点击商品进入详情页 -->
<view v-if="value.template == 1" class="template1-goods-wrap">
<view class="goods-list double-column show" v-if="template1GoodsList.length">
<view class="goods-item" v-for="(item, index) in template1GoodsList" :key="index">
<view class="goods-img" @tap.stop="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="template1ImgError(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 class="category-goods-empty" v-else-if="!template1Loading">
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix" show-menu-by-longpress></image>
<view class="tips">暂无商品</view>
</view>
</view>
<!-- 非模板1: 显示二级分类网格，点击跳转到列表页 -->
<view v-else 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">
@@ -61,7 +91,37 @@
<block v-else-if="categoryLevel == 3">
<block v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
<view :class="['category-title', value.template == 1 ? 'category-title-with-lines' : '']">{{ one.category_name }}</view>
<view class="category-list">
<!-- 模板1: 三级分类下直接显示商品列表 -->
<view v-if="value.template == 1" class="template1-goods-wrap">
<view class="goods-list double-column show" v-if="template1GoodsList.length">
<view class="goods-item" v-for="(item, index) in template1GoodsList" :key="index">
<view class="goods-img" @tap.stop="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="template1ImgError(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 class="category-goods-empty" v-else-if="!template1Loading">
<image :src="$util.img('public/uniapp/category/empty.png')" mode="widthFix" show-menu-by-longpress></image>
<view class="tips">暂无商品</view>
</view>
</view>
<!-- 非模板1: 显示三级分类网格 -->
<view v-else class="category-list">
<view class="category-item" v-for="(two, twoIndex) in one.child_list" :key="twoIndex"
@tap.stop="$util.redirectTo('/pages_goods/list', { category_id: two.category_id })">
<view class="img-box">
@@ -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;
}
}
}