zdxtDrillProgram/pages/index/index.vue

<template>
	<view>
		<view class="index-background">
			<image :src="topImg"></image>
		</view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item, i) in swiperList" :key="i">
				<!-- <view class="swiper-item">
					<image :src="item.image_src"></image>
				</view> -->
				<navigator class="swiper-item">
					<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>

<script>
	export default {
		data() {
			return {
				//顶部图片
				topImg: "",
				//轮播图数据列表
				swiperList: [],
				//场景入口
				sceneList:[]
			};
		},
		onLoad() {
			this.getSwiperList()
		},
		methods: {
	
			async getSwiperList() {
				
				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll')
				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)
					} 
				})
				
				uni.$showMsg('数据请求成功！')
			},
		}
	}
</script>

<style lang="scss">
	.index-background{
		image{
			height: 270rpx;
			width: 100%;
		}
	}
	
	swiper {
		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>