feat: 主页的接口对接

pages/module/OneFeelMK001.vue

@@ -1,54 +1,59 @@
 <template>
 	<view class="container">
-		<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
-				:duration="duration">
-				<swiper-item>
-					<view class="swiper-item uni-bg-red">A</view>
-				</swiper-item>
-				<swiper-item>
-					<view class="swiper-item uni-bg-green">B</view>
-				</swiper-item>
-				<swiper-item>
-					<view class="swiper-item uni-bg-blue">C</view>
-				</swiper-item>
-			</swiper>
+		<swiper class="swiper" circular 
+		:indicator-dots="activityList.length > 1" 
+		indicator-color="#FFFFFF"
+		indicator-active-color="#00A6FF"
+		:autoplay="autoplay" 
+		:interval="interval"	
+		:duration="duration">
+			<swiper-item v-for="item in activityList" :key="item.id">
+				<view class="swiper-item">
+					<image :src="item.activityCover" mode="aspectFill"></image>
+				</view>
+			</swiper-item>		
+		</swiper>
 		
 	</view>
 </template>
 
-<script>
+<script setup>
+	import { ref } from 'vue'
+
+	const autoplay = ref(true)
+	const interval = ref(3000)
+	const duration = ref(500)
+
+	const props = defineProps({
+	  activityList: {
+	    type: Array,
+	    default: []
+	  }
+	})
+
 </script>
 
 <style scoped lang="scss">
 	.container {
+		margin-bottom: 6px;
+		
 		.uni-margin-wrap {
-			width: 690rpx;
 			width: 100%;
 		}
 		.swiper {
-			height: 300rpx;
+			height: 120px;
 			border-radius: 8px;
 		}
 		.swiper-item {
 			display: block;
-			height: 300rpx;
-			line-height: 300rpx;
+			height: 120px;
+			line-height: 120px;
 			text-align: center;
 		}
-		
-		.uni-bg-red {
-			background-color: red;
-		}
-		
-		.uni-bg-green {
-			background-color: green;
-		}
-		
-		.uni-bg-blue {
-			background-color: blue;
-		}
-
-		
-		
+		.swiper-item image {
+			width: 100%;
+			height: 100%;
+			border-radius: 8px;
+		}		
 	}
 </style>