栏目

pages.json

@@ -172,7 +172,7 @@
             "path" : "pages/menu/index",
             "style" :
             {
-				"navigationBarTitleText":"分类",
+				"navigationBarTitleText":"栏目",
                 "enablePullDownRefresh": false
             }
 
@@ -400,7 +400,7 @@
 				"pagePath": "pages/menu/index",
 				"iconPath": "static/img/nav/category.png",
 				"selectedIconPath": "static/img/nav/category_sel.png",
-				"text": "分类"
+				"text": "栏目"
 			},
 			// {
 			// 	"pagePath": "pages/shop/cart",

pages/menu/index.vue

@@ -6,6 +6,7 @@
 				<u-input class="u-search-text" type="text" height="50" @click="toSearch" placeholder="搜商品名称" />
 			</view>
 		</view>
+		<!-- 主体区域 -->
 		<view class="u-menu-wrap">
 			<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
 			 :scroll-into-view="itemId">
@@ -21,10 +22,11 @@
 							<text>{{item.name}}</text>
 						</view>
 						<view class="item-container">
-							<view class="thumb-box" v-for="(item1, index1) in item.children" :key="index1" @click="toCategory(item1)">
+							<u-tabs :list="item.children" :is-scroll="false" :current="currentList[index].current" @change="change(index)"></u-tabs>
+							<!-- <view class="thumb-box" v-for="(item1, index1) in item.children" :key="index1" @click="toCategory(item1)">
 								<image class="item-menu-image" :src="baseApi+'/file/getImgStream?idFile='+item1.icon" mode=""></image>
 								<view class="item-menu-name">{{item1.name}}</view>
-							</view>
+							</view> -->
 						</view>
 					</view>
 				</view>
@@ -48,8 +50,17 @@
 				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
 				timer: null, // 定时器
 				baseApi: this.baseApi,
-				businessMessage:{} // 商圈数据
-
+				businessMessage:{} ,// 商圈数据
+				list: [],
+				current: 0,
+				currentList: [
+					{
+						current: 0
+					},
+					{
+						current: 0
+					}
+				]
 			}
 		},
 		onLoad() {
@@ -57,23 +68,27 @@
 			// this.init()
 		},
 		methods: {
-		getMessage(){
-			const that = this
-			uni.getStorage({
-				key:'business',
-				success:function(res){
-					// that.ishaveBusiness = true
-					that.businessMessage = res.data
-					console.log("商圈数据",that.businessMessage)
-				}
-			})
-			this.$nextTick(()=>{
-				this.init()
-			},1000)
-			
-		},
+			change(index,item) {
+				console.log("index",index,"item",item)
+				this.current = index;
+			},
+			getMessage(){
+				const that = this
+				uni.getStorage({
+					key:'business',
+					success:function(res){
+						// that.ishaveBusiness = true
+						that.businessMessage = res.data
+						console.log("商圈数据",that.businessMessage)
+					}
+				})
+				this.$nextTick(()=>{
+					this.init()
+				},1000)
+				
+			},
 			init() {
-				this.$u.get('category/list?tenantId='+this.businessMessage.id).then(res => {
+				this.$u.get('columns/mobile/list?tenantId='+this.businessMessage.id).then(res => {
 					this.tabbar = res
 					this.getMenuItemTop()
 				})
@@ -208,18 +223,69 @@
 		/* #endif */
 		display: flex;
 		flex-direction: column;
+		
+		.content{
+			display: flex;
+			.left{
+				width: 20%;
+				height: 91vh;
+				overflow: scroll;
+				background-color: #eeeeee;
+				.list{
+					width: 100%;
+					.list-item{
+						background-color: #eeeeee;
+						color: #333;
+						width: 100%;
+						height: 80rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+					.checkListItem{
+						background-color: #fff;
+						color: red;
+						width: 100%;
+						height: 80rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+			}
+			.right{
+				width: 80%;
+				min-height: 91vh;
+				background-color: #fff;
+				.shop{
+					width: 100%;
+					height: 80rpx;
+					.shop-item{
+						display: flex;
+						height: 80rpx;
+						align-items: center;
+						.text{
+						  margin-left: 30rpx;
+						  display: flex;
+						  height: 80rpx;
+						  align-items: center;
+						}
+						.right{
+							position: absolute;
+							right: 18rpx;
+						}
+					}
+				}
+			}
+			
+		}
 	}
-
+	
 	.u-search-box {
 		padding: 10rpx 30rpx;
+		margin-bottom: 30rpx;
 	}
-
-	.u-menu-wrap {
-		flex: 1;
-		display: flex;
-		overflow: hidden;
-	}
-
+	
 	.u-search-inner {
 		background-color: rgb(234, 234, 234);
 		border-radius: 100rpx;
@@ -227,13 +293,18 @@
 		align-items: center;
 		padding: 10rpx 16rpx;
 	}
-
 	.u-search-text {
 		font-size: 24rpx;
 		color: $u-tips-color;
 		margin-left: 10rpx;
 	}
 
+	.u-menu-wrap {
+		flex: 1;
+		display: flex;
+		overflow: hidden;
+	}
+	
 	.u-tab-view {
 		width: 200rpx;
 		height: 100%;
@@ -305,6 +376,7 @@
 	}
 
 	.item-container {
+		width: 80%;
 		display: flex;
 		flex-wrap: wrap;
 	}