111

pages/index/index.vue

@@ -43,11 +43,24 @@
 				</swiper>
 			</view>
 
-			<!-- 金刚区 / 导航图标 -->
+			<!-- 金刚区 / 导航图标 (滑动 1:1 还原) -->
-			<view class="grid-menu">
+			<view class="grid-menu-wrap">
-				<view class="grid-item" v-for="(menu, idx) in menus" :key="idx">
+				<swiper class="grid-swiper" @change="e => gridCurrent = e.detail.current">
-					<image class="menu-icon" :src="menu.icon"></image>
+					<swiper-item v-for="(page, pIdx) in (gridMenuPages || [])" :key="pIdx">
-					<text class="menu-text">{{ menu.name }}</text>
+						<view class="grid-menu">
+							<view class="grid-item" v-for="(menu, idx) in page" :key="idx">
+								<image class="menu-icon" :src="menu.img"></image>
+								<text class="menu-text">{{ menu.title }}</text>
+								<view class="menu-tag" v-if="menu.tag">{{ menu.tag }}</view>
+							</view>
+						</view>
+					</swiper-item>
+				</swiper>
+				<!-- 自定义指示器 -->
+				<view class="grid-indicator" v-if="gridMenuPages && gridMenuPages.length > 1">
+					<view class="indicator-bg">
+						<view class="indicator-slider" :style="{ width: (gridMenuPages && gridMenuPages.length ? 100 / gridMenuPages.length : 100) + '%', transform: 'translateX(' + (gridCurrent * 100) + '%)' }"></view>
+					</view>
 				</view>
 			</view>
 
@@ -259,13 +272,8 @@
 					'https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=800&q=80',
 					'https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=800&q=80'
 				],
-				menus: [
+				gridCurrent: 0,
-					{ name: '9.9包邮', icon: 'https://cdn-icons-png.flaticon.com/512/879/879859.png' },
+				menus: [],
-					{ name: '疯抢榜', icon: 'https://cdn-icons-png.flaticon.com/512/3594/3594363.png' },
-					{ name: '聚划算', icon: 'https://cdn-icons-png.flaticon.com/512/3594/3594162.png' },
-					{ name: '品牌特卖', icon: 'https://cdn-icons-png.flaticon.com/512/879/879796.png' },
-					{ name: '每日半价', icon: 'https://cdn-icons-png.flaticon.com/512/879/879854.png' }
-				],
 				noticeList: [
 					// 初始兜底数据
 					{ img: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&q=80', msg: '正在获取最新订单信息...' }
@@ -295,6 +303,7 @@
 			}
 		},
 		onLoad() {
+			this.getIndexData();
 			this.getBottomBar();
 			this.getCategoryList();
 			this.getNoticeList();
@@ -303,6 +312,14 @@
 			this.getBrandSaleList();
 		},
 		computed: {
+			gridMenuPages() {
+				const pages = [];
+				if (!this.menus || this.menus.length === 0) return pages;
+				for (let i = 0; i < this.menus.length; i += 10) {
+					pages.push(this.menus.slice(i, i + 10));
+				}
+				return pages;
+			},
 			worthBuyGoods() {
 				if (this.worthTabActive === 0) return this.deserveList;
 				if (this.worthTabActive === 1) return this.nineList;
@@ -319,6 +336,16 @@
 			}
 		},
 		methods: {
+			getIndexData() {
+				uni.request({
+					url: 'https://api.cmspro.haodanku.com/index/index?cid=qOstW90',
+					success: (res) => {
+						if (res.data && res.data.code === 200 && res.data.data.navs) {
+							this.menus = res.data.data.navs;
+						}
+					}
+				});
+			},
 			getBottomBar() {
 				uni.request({
 					url: 'https://api.cmspro.haodanku.com/bottomBar/lists?cid=qOstW90',
@@ -637,13 +664,20 @@
 	}
 
 	/* 金刚区 */
+	.grid-menu-wrap {
+		background: #ffffff;
+		margin-bottom: 20rpx;
+		padding-bottom: 16rpx;
+	}
+
+	.grid-swiper {
+		height: 340rpx;
+	}
+
 	.grid-menu {
 		display: flex;
 		flex-wrap: wrap;
-		padding: 10rpx 20rpx;
+		padding: 20rpx 0 0;
-		background: #ffffff;
-		margin: 0 30rpx 16rpx;
-		border-radius: 20rpx;
 	}
 
 	.grid-item {
@@ -651,12 +685,13 @@
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		padding: 20rpx 0;
+		margin-bottom: 24rpx;
+		position: relative;
 	}
 
 	.menu-icon {
-		width: 80rpx;
+		width: 88rpx;
-		height: 80rpx;
+		height: 88rpx;
 		margin-bottom: 12rpx;
 	}
 
@@ -665,6 +700,45 @@
 		color: #333;
 	}
 
+	.menu-tag {
+		position: absolute;
+		top: -10rpx;
+		right: 4rpx;
+		background: linear-gradient(to right, #ff715a, #ff416c);
+		color: #fff;
+		font-size: 16rpx;
+		padding: 2rpx 8rpx;
+		border-radius: 16rpx;
+		border-bottom-left-radius: 0;
+		white-space: nowrap;
+		transform: scale(0.9);
+	}
+
+	.grid-indicator {
+		display: flex;
+		justify-content: center;
+		margin-top: 4rpx;
+	}
+
+	.indicator-bg {
+		width: 60rpx;
+		height: 8rpx;
+		background: #eeeeee;
+		border-radius: 4rpx;
+		position: relative;
+		overflow: hidden;
+	}
+
+	.indicator-slider {
+		position: absolute;
+		left: 0;
+		top: 0;
+		height: 100%;
+		background: #ff416c;
+		border-radius: 4rpx;
+		transition: transform 0.3s ease;
+	}
+
 	.ad-img {
 		width: 100%;
 		height: 100%;