From b079442cfaef77db2401fa40c131f2a769b99125 Mon Sep 17 00:00:00 2001
From: jing <1683105490@qq.com>
Date: Mon, 7 Sep 2026 11:09:28 +0800
Subject: [PATCH] =?UTF-8?q?chore=EF=BC=9A=E5=95=86=E5=93=81=E5=88=86?=
 =?UTF-8?q?=E7=B1=BB=E7=9A=841=EF=BC=8C2=EF=BC=8C3=EF=BC=8C4=EF=BC=8C99?=
 =?UTF-8?q?=E8=A7=86=E5=9B=BE=E5=8F=AF=E4=BB=A5=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .local.config.js                     |  2 +-
 components-diy/diy-category-item.vue | 52 ++++++++++++++++++++++++++--
 components-diy/diy-category.vue      |  6 +++-
 3 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/.local.config.js b/.local.config.js
index 3eca70d..4c7c24a 100644
--- a/.local.config.js
+++ b/.local.config.js
@@ -216,7 +216,7 @@ const localDevConfig = ({
 // })['local-11']; // 选择要使用的环境配置
 // })['2811']; // 本地
 
-})['2709']; // 本地
+})['2821']; // 本地
 // })['local-2']; // 本地
 // })['local-11']; // 本地
 // })['1-test']; // test
diff --git a/components-diy/diy-category-item.vue b/components-diy/diy-category-item.vue
index e379dc9..71c4907 100644
--- a/components-diy/diy-category-item.vue
+++ b/components-diy/diy-category-item.vue
@@ -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;
diff --git a/components-diy/diy-category.vue b/components-diy/diy-category.vue
index 942d1a5..aa619f6 100644
--- a/components-diy/diy-category.vue
+++ b/components-diy/diy-category.vue
@@ -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;
 		}
 	},