小程序首页渲染

pages/index/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<view class="index-background">
-			<my-search  @click="searchInfo"></my-search>
+			<image :src="topImg"></image>
 		</view>
 		<!-- 轮播图 -->
 		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
@@ -9,12 +9,16 @@
 				<!-- <view class="swiper-item">
 					<image :src="item.image_src"></image>
 				</view> -->
-				<navigator class="swiper-item" :url="'/subpackage/detail/detail?goods_id='+item.goods_id">
+				<navigator class="swiper-item">
-					<image :src="item.image_src"></image>
+					<image :src="item"></image>
 				</navigator>
 			</swiper-item>
 		</swiper>
-
+		<view class="scene-list">
+		   <view class="scene-item" v-for="(item,i) in sceneList" :key="i">
+		   	 <image :src="item" class="scene-img"></image>
+		   </view>	
+		</view>
 	</view>
 </template>
 
@@ -22,22 +26,37 @@
 	export default {
 		data() {
 			return {
+				//顶部图片
+				topImg: "",
 				//轮播图数据列表
 				swiperList: [],
+				//场景入口
+				sceneList:[]
 			};
 		},
 		onLoad() {
-		
 			this.getSwiperList()
 		},
 		methods: {
+	
 			async getSwiperList() {
+				
 				const {
 					data: res
-				} = await uni.$http.get('/api/public/v1/home/swiperdata')
+				} = await uni.$http.post('/small/customImage/listAll')
-				if (res.meta.status !== 200) return uni.$showMsg()
+				if (!res.success) return uni.$showMsg()
+
+				res.data.forEach(item=>{
+					item.uploadPath = 'http://localhost:85' +item.uploadPath
+					if (item.position === "top"){
+						this.topImg = item.uploadPath
+					} else if(item.position === "middle"){
+						this.swiperList.push(item.uploadPath)
+					} else if(item.position === "bottom"){
+						this.sceneList.push(item.uploadPath)
+					} 
+				})
 				
-				this.swiperList = res.message
 				uni.$showMsg('数据请求成功！')
 			},
 		}
@@ -45,18 +64,34 @@
 </script>
 
 <style lang="scss">
-	.search-box{
+	.index-background{
-		 position: sticky;
+		image{
-		 top: 0;
+			height: 270rpx;
-		 z-index: 9999;
+			width: 100%;
+		}
 	}
+	
 	swiper {
-		height: 330rpx;
+		height: 630rpx;
 
 		.swiper-item,
 		image {
 			width: 100%;
 			height: 100%;
+			border-radius: 4px;
+		}
 	}
+
+	
+	.scene-list {
+		display: flex;
+		justify-content: space-around;
+		margin: 5px 0;
+	}
+	
+	.scene-img {
+		width: 358rpx;
+		height: 290rpx;
+		border-radius: 8px;
 	}
 </style>