本地生活页面添加筛选

pages/local_life/local_life.vue

@@ -48,7 +48,21 @@
 			<view class="swiper">
 				<ad-swipers :pid="7" height="260rpx" radius="20rpx"></ad-swipers>
 			</view>
-
+			
+			<view class="filter">
+				<view :class="active == 1 ? 'active': ''">推荐</view>
+				<view :class="active == 2 ? 'active': ''">销量</view>
+				<view :class="'flex ' + (active == 3 ? 'active': '')">
+					<view class="mr-0">距离</view>
+					<view class="flex col-center">
+						<view class="arrow-icon flex-col col-center row-center">
+							<u-icon name="arrow-up-fill" :color="distanceSort == 'asc' ? colorConfig.primary : colorConfig.normal"></u-icon>
+							<u-icon name="arrow-down-fill" :color="distanceSort == 'desc' ? colorConfig.primary : colorConfig.normal"></u-icon>
+						</view>
+					</view>
+				</view>
+			</view>
+			
 			<view class="list">
 				<view class="info">
 					<navigator url="/bundle_b/pages/local_shop/local_shop" hover-class="none">
@@ -112,6 +126,8 @@
 				enable: true,
 				navSwiperH: '',
 				currentSwiper: 0,
+				active: 1,
+				distanceSort: 'asc',
 				navList: [
 					[{
 						image: 'https://dlh.hainings.com/uploads/images/202401151539353104e7660.jpeg',
@@ -121,7 +137,6 @@
 						link_type: 1
 					}, ]
 				],
-
 				shop: [{
 						image: 'https://dlh.hainings.com/uploads/images/20230617152038ec2d56794.png',
 						name: '东龙汇金卡金卡金卡金卡金卡金卡金卡金卡金卡',
@@ -292,11 +307,33 @@
 		}
 
 		.swiper {
-			margin-top: 20rpx;
+			margin: 20rpx 0;
+		}
+		
+		.filter {
+			display: flex;
+			align-items: center;
+			padding: 30rpx;
+			
+			.arrow-icon {
+				transform: scale(0.5);
+			}
+			
+			view {
+				margin-right: 20rpx;
+			}
+			
+			.mr-0 {
+				margin-right: 0;
+			}
+			
+			.active {
+				color: $-color-primary;
+			}
 		}
 
 		.list {
-			margin-top: 40rpx;
+			margin-top: 20rpx;
 			padding: 0 0 20rpx;
 
 			.info {