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">
				<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"  @click="navClickHandler(item)">
				<image :src="item" class="scene-img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapMutations, mapState } from 'vuex'
	export default {
		
		data() {
			return {
				//顶部图片
				topImg: "",
				leftImg: "",
				rightImg: "",
				//轮播图数据列表
				swiperList: [],
				//场景入口
				sceneList: []
			};
		},
		computed: {
		  ...mapState('m_user', ['token'])
		},
		onLoad() {
			uni.setTabBarItem({
				index: 1,
				"visible": false
			});
			uni.setTabBarItem({
				index: 2,
				"visible": false
			});
			uni.setTabBarItem({
				index: 3,
				"visible": false
			});
			uni.setTabBarItem({
				index: 4,
				"visible": false
			});
			this.listTabbar();
			this.getSwiperList();
			this.checkLogin()
		},
		methods: {
			listTabbar() {
				this.$api.listTabbar({})
					.then(res => {
						console.log(res)
						for (var i = 0; i < res.data.length; i++) {
							if (res.data[i].hide == 1) {
								if (res.data[i].type == "home") {
									uni.setTabBarItem({
										index: 0,
										text: res.data[i].title,
										"visible": true
									});
								}
								if (res.data[i].type == "scan") {
									uni.setTabBarItem({
										index: 1,
										text: res.data[i].title,
										"visible": true
									});
								}
								if (res.data[i].type == "know") {
									uni.setTabBarItem({
										index: 2,
										text: res.data[i].title,
										"visible": true
									});
								}
								if (res.data[i].type == "my") {
									uni.setTabBarItem({
										index: 3,
										text: res.data[i].title,
										"visible": true
									});
								}
							}
						}
					}).catch((e) => console.log(e)); //捕获异常
			},

			async getSwiperList() {

				const {
					data: res
				} = await uni.$http.post('/small/customImage/listAll',{page:"home"})
				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.indexOf("banner") !=-1) {
						this.swiperList.push(item.uploadPath)
					} else if (item.position.indexOf("bottom") !=-1) {
						this.sceneList.push(item.uploadPath)
					}
				})

				uni.$showMsg('数据请求成功！')
			},
			navClickHandler(item) {
			  uni.navigateTo({
			    url: '/subpkg/list/list'
			  })
			},
			checkLogin() {
			   if(this.token === "") {
			      uni.reLaunch({
			        url: '/subpkg/login/login',
			    })
			   }
			},
			
		}
	}
</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>