travel-applet/pages/home/index.vue

<template>
	<view class="main">
		<view class="one">
			<swiper :img-list="imgList" url-key="url" @selected="selectedBanner"></swiper>
		</view>
		<view class="two">
			<view class="list" v-for="(item,index) in moduleList" :key="index" @tap="toChange(item)">
				<image class="image" :src="item.url&&item.url.length>0?item.url[0].url:''" mode="aspectFill">
				</image>
				<text class="text">{{ item.name }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import swiper from '../../components/swiper/index.vue';
	export default {
		components: {
			swiper
		},
		data() {
			return {
				// 轮播图
				imgList: [],
				// 模块
				moduleList: []
			}
		},
		onLoad: async function() {
			const that = this;
			await that.searchConfig();
			await that.search();
		},
		methods: {
			// 查询基本设置
			async searchConfig() {
				const that = this;
				let res = await that.$api(`/config`, 'GET', {});
				if (res.errcode == '0') {
					that.$set(that, `imgList`, res.data.file);
				}
			},
			// 查询
			async search() {
				const that = this;
				let res = await that.$api(`/module`, 'GET', {
					is_use: '0'
				});
				if (res.errcode == '0') {
					that.$set(that, `moduleList`, res.data);
				}
			},
			// 点击轮播图图片
			selectedBanner(item, index) {
				console.log(item, index)
			},
			// 点击模块
			toChange(item) {
				console.log(item, )
			},
		},
	}
</script>

<style lang="scss">
	.main {
		.two {
			display: flex;
			flex-wrap: wrap;
			padding: 8vw 0 2vw 0;

			.list {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				width: 20vw;
				padding: 1vw 0 0 0;

				.image {
					width: 15vw;
					height: 15vw;
					border-radius: 15vw;
					box-shadow: 0 0 5px var(--f1Color);
				}
				.text{
					font-size: var(--font14Size);
					margin-top: 5px;
					color: var(--f85Color);
				}
			}
		}
	}
</style>