1

pagesHome/shop/index.vue

@@ -9,7 +9,8 @@
 					<view class="second">
 						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 							<view class="list-scroll-view">
-								<view class="list" v-for="(item,index) in list" :key="index" @tap="toCommon('pagesHome/order/detail')">
+								<view class="list" v-for="(item,index) in shoplist" :key="index"
+									@tap="toCommon('pagesHome/order/detail')">
 									<image class="image" :src="item.url" mode=""></image>
 									<view class="name">
 										{{item.name}}
@@ -29,7 +30,35 @@
 					</view>
 				</view>
 				<view class="one_2" v-else-if="barActive=='1'">
-					商品分类
+					<view class="first_1">
+						<scroll-view scroll-y="true" class="scroll-view">
+							<view class="list-scroll-view">
+								<view class="list" :class="[active==index?'listActive':'']"
+									v-for="(item,index) in typeList" :key="index" @tap="toChange(index,item)">
+									<text>{{item.label}}</text>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
+					<view class="first_2">
+						<scroll-view scroll-y="true" class="scroll-view">
+							<view class="list-scroll-view">
+								<view class="list" v-for="(item,index) in list" :key="index">
+									<view class="title">
+										{{item.label}}
+									</view>
+									<view class="market">
+										<view class="marketList" v-for="(tag,indexs) in item.children" :key="indexs">
+											<image class="image" :src="tag.url" mode=""></image>
+											<view class="name">
+												{{tag.label}}
+											</view>
+										</view>
+									</view>
+								</view>
+							</view>
+						</scroll-view>
+					</view>
 				</view>
 				<view class="one_3" v-else-if="barActive=='2'">
 					<view class="first">
@@ -39,17 +68,20 @@
 						<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
 							<view class="list-scroll-view">
 								<view class="second_1">
-									<view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList" :key="index" @tap="toCond(index,item)">
+									<view :class="['list',condActive==index?'activeList':'']"
+										v-for="(item,index) in condList" :key="index" @tap="toCond(index,item)">
 										<view class="name">
 											{{item.name}}
 										</view>
 										<view class="icon">
 											<view class="icon_1">
-												<text :class="['iconfont',item.shangActive]" v-if="condActive==index&&shang==true"></text>
+												<text :class="['iconfont',item.shangActive]"
+													v-if="condActive==index&&shang==true"></text>
 												<text :class="['iconfont',item.shang]" v-else></text>
 											</view>
 											<view class="icon_1">
-												<text :class="['iconfont', item.xiaActive]" v-if="condActive==index&&xia==true"></text>
+												<text :class="['iconfont', item.xiaActive]"
+													v-if="condActive==index&&xia==true"></text>
 												<text :class="['iconfont', item.xia]" v-else></text>
 											</view>
 										</view>
@@ -57,7 +89,8 @@
 								</view>
 								<view class="second_2">
 									<view class="list" v-for="(item,index) in allList" :key="index">
-										<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode=""></image>
+										<image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''"
+											mode=""></image>
 										<view class="sale" v-if="item.is_sale==true">
 											<text>已售尽</text>
 										</view>
@@ -159,7 +192,7 @@
 					name: '首农食品旗舰店',
 					money: 100,
 				},
-				list: [ //
+				shoplist: [ //
 					{
 						url: require('@/static/test.png'),
 						name: '商品名称',
@@ -186,6 +219,29 @@
 						money: 100,
 					},
 				],
+				active: '0',
+				typeList: [{
+						label: '进口食品'
+					},
+					{
+						label: '品质生鲜'
+					}, {
+						label: '饮料冲调'
+					}, {
+						label: '居家用品'
+					}
+				],
+				list: [{
+						label: '进口食品'
+					},
+					{
+						label: '品质生鲜'
+					}, {
+						label: '饮料冲调'
+					}, {
+						label: '居家用品'
+					}
+				],
 				// 收藏
 				collection: false,
 				searchInfo: {},
@@ -335,6 +391,11 @@
 				const that = this;
 				that.$set(that.searchInfo, `name`, e.detail.value)
 			},
+			toChange(index, e) {
+				const that = this;
+				that.$set(that, `active`, index);
+				// that.searchRight(e);
+			},
 			// 筛选
 			toCond(index, e) {
 				const that = this;
@@ -449,6 +510,78 @@
 				}
 			}
 
+			.one_2 {
+				height: 91vh;
+				display: flex;
+				flex-direction: row;
+				padding: 2vw;
+
+				.first_1 {
+					position: relative;
+					width: 25vw;
+					background-color: #fafafa;
+					display: flex;
+					flex-direction: column;
+
+					.list {
+						text-align: center;
+						padding: 2.5vw 0;
+						border-bottom: 1px solid var(--f1Color);
+
+						text {
+							font-size: var(--font14Size);
+						}
+					}
+
+					.listActive {
+						background-color: var(--fffColor);
+					}
+				}
+
+				.first_2 {
+					padding: 2vw;
+					flex-grow: 1;
+					position: relative;
+					display: flex;
+					flex-direction: column;
+
+					.list {
+						margin: 0 0 2vw 0;
+						padding: 2vw;
+
+						.title {
+							font-size: var(--font16Size);
+							margin: 0 0 2vw 0;
+						}
+
+						.market {
+							display: flex;
+							flex-direction: row;
+							flex-wrap: wrap;
+
+							.marketList {
+								text-align: center;
+								margin: 0 2vw 2vw 0;
+								width: 22vw;
+
+								.image {
+									width: 100%;
+									height: 15vw;
+								}
+
+								.name {
+									font-size: var(--font14Size);
+								}
+							}
+
+							.marketList:nth-child(3n) {
+								margin: 0 0 2vw 0;
+							}
+						}
+					}
+				}
+			}
+
 			.one_3 {
 				display: flex;
 				flex-direction: column;