api

pageC/classify/index.vue

@@ -5,19 +5,19 @@
 			 :scroll-into-view="itemId">
 				<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item" :class="[current == index ? 'u-tab-item-active' : '']"
 				 @tap.stop="swichMenu(index)">
-					<text class="u-line-1">{{item.name}}</text>
+					<text class="u-line-1">{{item.gc_name}}</text>
 				</view>
 			</scroll-view>
 			<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll">
 				<view class="page-view">
-					<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
+					<view class="class-item" :id="'item' + index" v-for="(item, index) in tabbar" :key="index">
 						<view class="item-title">
-							<text>{{item.name}}</text>
+							<text>{{item.gc_name}}</text>
 						</view>
 						<view class="item-container">
-							<view class="thumb-box" v-for="(item1, index1) in item.foods" :key="index1">
-								<image class="item-menu-image" :src="item1.icon" mode=""></image>
-								<view class="item-menu-name">{{item1.name}}</view>
+							<view class="thumb-box" v-for="(item1, index1) in item._child" :key="index1">
+								<image class="item-menu-image" :src="item1.img" mode=""></image>
+								<view class="item-menu-name">{{item1.gc_name}}</view>
 							</view>
 						</view>
 					</view>
@@ -27,7 +27,6 @@
 	</view>
 </template>
 <script>
-	import classifyData from '@/static/js/classify.data.js';
 	export default {
 		data() {
 			return {
@@ -37,21 +36,28 @@
 				menuHeight: 0, // 左边菜单的高度
 				menuItemHeight: 0, // 左边菜单item的高度
 				itemId: '', // 栏目右边scroll-view用于滚动的id
-				tabbar: classifyData,
+				tabbar: [],
 				menuItemPos: [],
 				arr: [],
 				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
 				timer: null, // 定时器
-				
 			}
 		},
-		onLoad() {
-			
+		onShow() {
+			this.getClassifyList();
 		},
 		onReady() {
 			this.getMenuItemTop()
 		},
 		methods: {
+			// 获取分类列表
+			getClassifyList() {
+				this.$u.api.getGoodsClassifyList().then(res => {
+					if(res.errCode == 0) {
+						this.tabbar = res.data;
+					}
+				})
+			},
 			// 点击左边的栏目切换
 			async swichMenu(index) {
 				if(this.arr.length == 0) {
@@ -137,7 +143,7 @@
 				if(this.arr.length == 0) {
 					await this.getMenuItemTop();
 				}
-				if(this.timer) return ;
+				if(this.timer) return;
 				if(!this.menuHeight) {
 					await this.getElRect('menu-scroll-view', 'menuHeight');
 				}
@@ -205,6 +211,7 @@
 		justify-content: center;
 		font-size: 28rpx;
 		color: #666666;
+		padding: 0 30rpx;
 	}
 	.u-tab-item-active {
 		position: relative;
@@ -223,7 +230,7 @@
 		height: 100%;
 	}
 	.right-box {
-		background-color: rgb(250, 250, 250);
+		background-color: #fff;
 	}
 	.page-view {
 		padding: 16rpx;
@@ -261,5 +268,6 @@
 	.item-menu-image {
 		width: 150rpx;
 		height: 150rpx;
+		margin-bottom: 15rpx;
 	}
 </style>