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

chore：商品分类的1，2，3，4，99视图可以切换

Browse Source
This commit is contained in:
jing
2026-09-07 11:09:28 +08:00
parent 88a0153f90
commit b079442cfa
3 changed files with 55 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.local.config.js
View File

@@ -216,7 +216,7 @@ const localDevConfig = ({
// })['local-11']; // 选择要使用的环境配置
// })['2811']; // 本地
})['2709']; // 本地
})['2821']; // 本地
// })['local-2']; // 本地
// })['local-11']; // 本地
// })['1-test']; // test

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

@@ -57,7 +57,8 @@
<block v-for="(one, oneIndex) in category.child_list" :key="oneIndex">
<view :class="['category-title', 'category-title-with-lines']">{{ one.category_name }}</view>
<view class="template1-goods-wrap">
<view class="goods-list double-column show" v-if="template1ChildGoodsList[one.category_id] && template1ChildGoodsList[one.category_id].length">
<view class="goods-list show" :class="{ 'double-column': !isList, 'single-column': isList }"
:data-template="value.template" v-if="template1ChildGoodsList[one.category_id] && template1ChildGoodsList[one.category_id].length">
<view class="goods-item" v-for="(item, index) in template1ChildGoodsList[one.category_id]" :key="index">
<view class="goods-img" @tap.stop="toDetail(item)">
<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="template1ImgError(one.category_id, index)" show-menu-by-longpress />
@@ -94,7 +95,8 @@
<view v-else-if="value.template == 1">
<view :class="['category-title', 'category-title-with-lines']">{{ category.category_name }}</view>
<view class="template1-goods-wrap">
<view class="goods-list double-column show" v-if="template1GoodsList.length">
<view class="goods-list show" :class="{ 'double-column': !isList, 'single-column': isList }"
:data-template="value.template" 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 />
@@ -160,7 +162,8 @@
<view v-else-if="value.template == 1 && type == 'category'">
<view :class="['category-title', 'category-title-with-lines']">{{ category.category_name }}</view>
<view class="template1-goods-wrap">
<view class="goods-list double-column show" v-if="template1GoodsList.length">
<view class="goods-list show" :class="{ 'double-column': !isList, 'single-column': isList }"
:data-template="value.template" 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 />
@@ -1935,6 +1938,11 @@ export default {
align-items: stretch;
}
// 双列模式(视图切换): 两列窄卡
&.double-column .goods-item {
width: calc(50% - 10rpx) !important;
}
// 图片: 占满卡片宽度, 自适应高度(类似 banner)
.goods-img {
width: 100%;
@@ -2190,6 +2198,44 @@ export default {
padding: 0;
}
// 双列模式(点击搜索框右侧视图切换): 两列竖卡片(图上文下); 单列保持横卡片(图左文右)
&.double-column {
.goods-item {
width: calc(50% - 10rpx) !important;
flex-direction: column;
padding: 0;
}
.goods-img {
width: 100%;
height: 0;
padding-top: 100%;
margin-right: 0;
border-radius: 12rpx 12rpx 0 0;
image {
border-radius: 12rpx 12rpx 0 0;
}
}
.info-wrap {
padding: 0 16rpx 16rpx;
}
// 竖卡片下价格不再给右侧按钮留位
.price-wrap {
padding-right: 0;
}
// 加购/选规格按钮从绝对定位改为信息区底部右侧
.footer-wrap {
position: static;
margin-top: 12rpx;
display: flex;
justify-content: flex-end;
}
}
// 右侧+按钮 / 择规格按钮
.right-wrap {
display: flex;

6
components-diy/diy-category.vue
View File

@@ -11,6 +11,9 @@
confirm-type="search" @tap.stop="onClickSearch()" disabled="true" />
<text class="iconfont icon-sousuo3"></text>
</view>
<!-- 视图切换: 网格/列表, 模板4也要可切换 -->
<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }"
@tap.stop.prevent="changeListStyle()"></view>
</view>
<!-- #ifdef MP-WEIXIN -->
<!-- <block v-if="value.template == 4">
@@ -282,7 +285,8 @@ export default {
this.getCategoryTree();
this.loadType = this.value.goodsLevel == 1 && this.value.loadType == 'all' ? 'all' : 'part';
// 模板4: 默认单列列表布局(图片样式)
if (this.value.template == 4) {
// 模板2/4 的商品卡默认为"左图右文"横卡片, 默认单列保持现有观感, 点击切换图标可切双列
if (this.value.template == 2 || this.value.template == 4) {
this.isList = true;
}
},