chore：商品分类模板5
This commit is contained in:
@@ -243,7 +243,7 @@ const localDevConfig = ({
|
||||
// })['local-11']; // 选择要使用的环境配置
|
||||
// })['2811']; // 本地
|
||||
//})['5g-317']; // 电磁兼容
|
||||
})['5g-312']; //
|
||||
})['5g-351']; //
|
||||
// })['local-2']; // 本地
|
||||
// })['local-11']; // 本地
|
||||
// })['1-test']; // test
|
||||
|
||||
@@ -99,8 +99,7 @@
|
||||
</block>
|
||||
|
||||
<!-- 模板1: 后台配置二级分类 + 有子分类时, 在一级分类标题下以双列网格显示所有商品(图 c2df0f3d29 样式)
|
||||
模板5 不走这里: 它渲染"一级分类标题 + 二级分类网格"(与 Branch_5cfee417 一致),
|
||||
即下方 categoryLevel == 2 / 3 的分支 -->
|
||||
模板5 不走这里: 它有专属分支 value.template == 5(后台"展示分类"决定渲染商品网格或二级分类网格) -->
|
||||
<view v-else-if="value.template == 1">
|
||||
<view :class="['category-title', 'category-title-with-lines']">{{ category.category_name }}</view>
|
||||
<view class="template1-goods-wrap">
|
||||
@@ -141,8 +140,51 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 非模板1, 2级分类: 显示二级分类网格，点击跳转到列表页 -->
|
||||
<block v-else-if="categoryLevel == 2">
|
||||
<!-- 模板5 专属: 后台"展示分类"决定右侧渲染内容(对应图2/图3)
|
||||
二级分类(value.level == 2) → 一级分类标题 + 商品网格(图2)
|
||||
三级分类(value.level == 3) → 一级分类标题 + 二级分类网格(图3) -->
|
||||
<block v-else-if="value.template == 5">
|
||||
<block v-if="value.level == 2">
|
||||
<view :class="['category-title', '']">{{ category.category_name }}</view>
|
||||
<view class="template1-goods-wrap">
|
||||
<view class="goods-list show" :class="{ 'double-column': !isList, 'single-column': isList }" 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 class="delete-price font-size-activity-tag color-tip price-font"
|
||||
v-if="item.isinformation == 0 && showMarketPrice(item)">
|
||||
<text class="unit">{{ $lang('common.currencySymbol') }}</text>
|
||||
<text>{{ showMarketPrice(item) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="footer-wrap footer-wrap-template1">
|
||||
<view class="detail-btn" @tap.stop="toDetail(item)">{{ $lang('components-diy.diy-category-item.consultNow') }}</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>
|
||||
</block>
|
||||
<block v-else>
|
||||
<!-- 三级分类(及更深层级): 一级分类标题 + 二级分类网格(图3) -->
|
||||
<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"
|
||||
@@ -154,21 +196,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
|
||||
<block v-else-if="categoryLevel == 3">
|
||||
<block v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
|
||||
<view :class="['category-title', '']">{{ one.category_name }}</view>
|
||||
<view 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">
|
||||
<image :src="categoryImg(two.image)" mode="aspectFit" @error="categoryImgError(3, oneIndex, twoIndex)" show-menu-by-longpress />
|
||||
</view>
|
||||
<view class="name">{{ two.category_name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
</block>
|
||||
|
||||
<!-- 模板1: 无子分类时(外层块不进入), 在一级分类标题下以双列网格显示所有商品(图 c2df0f3d29 样式) -->
|
||||
@@ -619,7 +647,7 @@ export default {
|
||||
* 三级分类 (value.level == 3) → true → 按二级分类分别显示各自商品
|
||||
*/
|
||||
isGroupedDisplay() {
|
||||
// 仅模板1 走"按二级分类分组显示商品"; 模板5 渲染分类网格, 见下方 categoryLevel 分支
|
||||
// 仅模板1 走"按二级分类分组显示商品"; 模板5 的层级由 value.level 直接决定(见下方 value.template == 5 分支)
|
||||
return this.value.template == 1 && this.value.level == 3;
|
||||
},
|
||||
/**
|
||||
@@ -667,10 +695,13 @@ export default {
|
||||
// 模板1：根据后台"展示分类"配置 + 数据层级决定加载方式
|
||||
// 三级分类模式 (isGroupedDisplay) + 有二级分类时,按二级分类分别加载各自商品
|
||||
// 其他情况(二级分类模式 / 无二级分类),直接加载当前一级分类下的所有商品
|
||||
// 模板5 渲染的是"分类网格"(与 Branch_5cfee417 一致), 有子分类时是静态网格, 无需加载商品;
|
||||
// 只有一级分类下没有子分类时, 才回退到商品网格, 此时才需要加载商品
|
||||
// 模板5 渲染规则:
|
||||
// 二级分类(value.level == 2) → 商品网格(图2), 需要加载该一级分类下所有商品(合并其二级分类)
|
||||
// 三级分类(value.level == 3) → 二级分类网格(图3), 静态网格无需加载商品
|
||||
// 若该一级分类下没有子分类(兜底), 仍需要加载商品
|
||||
const template5NeedGoods = this.value.template == 5 &&
|
||||
!(this.category && this.category.child_list && this.category.child_list.length);
|
||||
(this.value.level == 2 ||
|
||||
!(this.category && this.category.child_list && this.category.child_list.length));
|
||||
if ((this.value.template == 1 || template5NeedGoods) && this.category && this.category.category_id) {
|
||||
if (this.isGroupedDisplay && this.category.child_list && this.category.child_list.length) {
|
||||
this.category.child_list.forEach(child => {
|
||||
|
||||
Reference in New Issue
Block a user