<template>
	<view class="home">
		<view class="top-list">
			<image class="background-img" style="width: 100vw;"
				src="https://t1-1305573081.cos.ap-shanghai.myqcloud.com/wxapp/static/imgs/%E9%A1%B6%E9%83%A8%E8%83%8C%E6%99%AF3.png"
				mode="widthFix"></image>
			<topbar class="topbar-slot">
				<view>
					<text style="color: #FFFFFF;">极速生活圈</text>
				</view>
			</topbar>
			<loadSke :loading='topLoading' :list='bannerList'>
				<m-banner :bannerList="bannerList"></m-banner>
				<m-home-coupon :couponList="couponList"></m-home-coupon>
				<m-home-menu :menuList="menuList"></m-home-menu>
			</loadSke>
		</view>
		
		<m-home-bottomad :bottomAD="bottomAD"></m-home-bottomad>

		<m-home-pdd ref="pdd"></m-home-pdd>
	</view>
</template>

<script>
	import utils from '@/utils'
	export default {
		data: () => ({
			bannerList: [],
			couponList: [],
			menuList: [],
			bottomAD: [],
			topLoading: true,
		}),
		mounted() {
			this.init()
		},
		onReachBottom(){
			this.onBottom()
		},
		methods: {
			onBottom() {
				this.$refs.pdd.onBottom()
			},
			init() {
				this.$api.home.getHomePageDataList(['bottomAD','menu','coupon','carouselChart']).then(res => {
					this.bannerList = res.data.carouselChart
					this.couponList = res.data.coupon.slice(0, 4)
					this.menuList = res.data.menu
					this.bottomAD = res.data.bottomAD
					this.$nextTick(() => {
						this.topLoading = false
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.home {
		height: 100%;
	}

	.top-list {
		padding: 30rpx;
		padding-top: 0;
		box-sizing: border-box;
		width: 100%;
		background-color: #FFFFFF;
		position: relative;

		.topbar-slot {
			z-index: 1;
			align-self: center;
			display: flex;
			justify-content: center;
		}

		.background-img {
			position: absolute;
			top: 0;
			left: 0;
		}

		.swiper-box {
			width: 690rpx;
			height: 342rpx;
			overflow: hidden;

			.image {
				width: 100%;
				height: 100%;
				border-radius: 10px;
			}
		}


	}
</style>
