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;

components/diy-components/diy-category.vue

@@ -18,6 +18,7 @@
 					<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
 					<text class="iconfont icon-sousuo3"></text>
 				</view>
+				<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }" @click="changeListStyle()"></view>
 			</view>
 		</block>
 		<!-- #endif -->
@@ -27,6 +28,7 @@
 				<input type="text" class="uni-input" maxlength="50" :placeholder="$lang('search')" confirm-type="search" disabled="true" />
 				<text class="iconfont icon-sousuo3"></text>
 			</view>
+			<view class="iconfont" :class="{ 'icon-apps': !isList, 'icon-list': isList }" @click="changeListStyle()"></view>
 		</view>
 		<!-- #endif -->
 		<view class="template-four wx" v-if="value.template == 4">
@@ -84,7 +86,7 @@
 						@refresherrestore="onRestore">
 						<view class="child-category" v-for="(item, index) in categoryTree" :key="index" :id="'category-' + index">
 							<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
-								:select="select" :oneCategorySelect="oneCategorySelect" @tologin="toLogin"
+								:select="select" :oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
 								@selectsku="selectSku($event, index)" @addCart="addCartPoint"
 								@loadfinish="getHeightArea"></diy-category-item>
 						</view>
@@ -97,7 +99,7 @@
 							:id="'category-' + index" :style="{ display: select == index ? 'block' : 'none' }">
 							<diy-category-item :category="item" :value="value" ref="categoryItem" :index="index"
 								:last="index == categoryTree.length - 1 ? true : false" :select="select"
-								:oneCategorySelect="oneCategorySelect" @tologin="toLogin"
+								:oneCategorySelect="oneCategorySelect" :isList="isList" @tologin="toLogin"
 								@selectsku="selectSku($event, index)" @addCart="addCartPoint"
 								@switch="switchOneCategory"></diy-category-item>
 						</view>
@@ -176,6 +178,7 @@
 				cartAnimation: {},
 				loadType: '',
 				templateFourData: [],
+				isList: false,
 				lang:uni.getStorageSync("lang")//en-us 英文
 			};
 		},
@@ -521,7 +524,10 @@
 			// 操作多规格商品弹框后，刷新商品数据
 			refreshData() {
 				this.$refs.categoryItem[this.select].loadGoodsCartNum(true);
-			}
+			},
+			changeListStyle() {
+				this.isList = !this.isList;
+			},
 		}
 	};
 </script>
@@ -662,6 +668,12 @@
 				text-align: center;
 			}
 		}
+
+		// 切换列表图标
+		.iconfont {
+			font-size: 36rpx;
+			margin: 0 0rpx 0 20rpx;
+		}
 	}
 
 	.cart-box {