feat: 支持商品列表样式切换

components/diy-components/diy-category-item.vue

@@ -64,7 +64,7 @@
 					<view class="category-title" style="font-size: 28rpx;padding-bottom: 0;">{{ category.category_name }}</view>
 					
 					<!--一级-->
-					<view class="goods-list  double-column show" :data-template="value.template">
+					<view class="goods-list" :class="{ 'double-column': !isList, 'single-column': isList, 'show': true }" :data-template="value.template">
 						<block v-if="goodsList.length">
 							<view class="goods-item" v-for="(item, index) in goodsList" :key="index" >
 								<view class="goods-img" @click="toDetail(item)">
@@ -150,7 +150,7 @@
 			</view>
 
 			<block v-if="loadType == 'all' && goodsList.length">
-				<view class="goods-list" :data-template="value.template">
+				<view class="goods-list" :class="{ 'double-column': !isList, 'single-column': isList }" :data-template="value.template">
 					<view class="goods-item" v-for="(item, index) in goodsList" :key="index">
 						<view class="goods-img" @click="toDetail(item)">
 							<image :src="goodsImg(item.goods_image)" mode="widthFix" @error="imgError(index)" :lazy-load="true"/>
@@ -253,6 +253,10 @@
 			last: {
 				type: Boolean,
 				default: false
+			},
+			isList: {
+				type: Boolean,
+				default: false
 			}
 		},
 		data() {
@@ -807,15 +811,11 @@
 		.goods-item {
 			display: flex;
 			flex-direction: column;
-			width: calc(50% - 10rpx);
 			border-radius: $border-radius;
 			overflow: hidden;
 			background-color: #fff;
 			margin-bottom: 20rpx;
-			&:nth-child(2n + 2) {
-				margin-right: 0;
-			}
-		
+			
 			.goods-img {
 				position: relative;
 				overflow: hidden;
@@ -948,6 +948,44 @@
 				}
 			}
 		}
+		
+		/* 双列布局 */
+		&.double-column {
+			.goods-item {
+				width: calc(50% - 10rpx);
+			}
+		}
+		
+		/* 单列布局 */
+		&.single-column {
+			flex-direction: column;
+			.goods-item {
+				width: 100%;
+				flex-direction: row;
+				align-items: center;
+				
+				.goods-img {
+					width: 180rpx;
+					height: 180rpx;
+					padding-top: 0;
+					margin-right: 14rpx;
+					border-radius: $border-radius;
+					
+					image {
+						border-radius: $border-radius;
+					}
+				}
+				
+				.goods-name {
+					white-space: normal;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					display: -webkit-box;
+					-webkit-line-clamp: 2;
+					-webkit-box-orient: vertical;
+				}
+			}
+		}
 		/**/
 		/*.goods-item {
 			padding: 0 0 26rpx 0;