<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
			<swiper-item v-for="(item,index) in swiperList" :key="index" @click="onClick(item.text)">
				<image class="swiper-image" :src="cdn(item.image)" mode=""></image>
			</swiper-item>
		</swiper>
		<!-- Grid导航 -->
		<easy-grid>
			<easy-grid-item v-for="(item,index) in gridList" :key="index" @click="onClick(item.text)">
				<image class="grid-image" :src="cdn(item.image)"></image>
				<text class="grid-text">{{item.text}}</text>
			</easy-grid-item>
		</easy-grid>
		<!-- 胶囊Banner -->
		<image :src="cdn(image1)" style="height:100px" @click="onClick('胶囊Banner')"></image>
		<!-- 时尚购物 -->
		<easy-cell title="时尚好物 新人专区" value="新人专享" label="全场满38元包邮" :is-link="true" />
		<easy-image-cube :list="cubeList" :num="3" height="150" :round="true" cdn="https://cdn.mzyun.tech/easyx" @choose="onClick('图片魔方')"></easy-image-cube>
		<!-- 最in频道 -->
		<easy-cell title="最in频道" value="更多" label="每日精选 人气爆款" :is-link="true" />
		<view class="flex-x">
			<easy-good v-for="(item,index) in goodList1" :key="index" :image="cdn(item.image)" :name="item.text" :price="item.price" width="33.33%" height="80" @click="onClick(item.text)"></easy-good>
		</view>
		<!-- 大牌精选 -->
		<easy-cell title="大牌精选" value="更多" :is-link="true" />
		<image :src="cdn(image2)" style="height:100px" @click="onClick('胶囊Banner2')"></image>
		<!-- 每日特卖 -->
		<easy-cell title="新特卖·每天早10上新" value="更多" :is-link="true" />
		<view class="flex-x">
			<easy-good v-for="(item,index) in goodList2" :key="index" :image="cdn(item.image)" :name="item.text" :price="item.price" @click="onClick(item.text)"></easy-good>
		</view>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</template>

<script>
	export type listItem = { text : string, image : string, link ?: string ,price?:string}
	export default {
		data() {
			return {
				swiperList: [{ text: "banner1", image: "/banner1.png", link: "" },
				{ text: "banner2", image: "/banner2.png", link: "" },
				{ text: "banner3", image: "/banner3.png", link: "" },
				{ text: "banner4", image: "/banner4.png", link: "" }] as listItem[],
				gridList: [{ text: "镇店爆款", image: "/grid1.png", link: "" },
				{ text: "今日推荐", image: "/grid2.png", link: "" },
				{ text: "满减专区", image: "/grid3.png", link: "" },
				{ text: "新品尝鲜", image: "/grid4.png", link: "" },
				{ text: "领券中心", image: "/grid5.png", link: "" },
				{ text: "休闲零食", image: "/grid6.png", link: "" },
				{ text: "酒水饮品", image: "/grid7.png", link: "" },
				{ text: "坚果炒货", image: "/grid8.png", link: "" }] as listItem[],
				image1: '/ad2.png',
				image2: '/ad3.png' ,
				cubeList: ['/cube1.png',
					'/cube2.png',
					'/cube3.png'] as string[],			
				goodList1: [{ text: "镇店爆款", image: "/good1.png", price: "199.00" },
				{ text: "今日推荐", image: "/good2.png", price: "199.00" },
				{ text: "满减专区", image: "/good3.png", price: "199.00" }] as listItem[],
				
				goodList2: [{ text: "镇店爆款", image: "/good1.png", price: "199.00" },
				{ text: "今日推荐", image: "/good2.png", price: "199.00" },
				{ text: "满减专区", image: "/good3.png", price: "199.00" },
				{ text: "新品尝鲜", image: "/good4.png", price: "199.00" },
				{ text: "领券中心", image: "/good5.png", price: "199.00" },
				{ text: "休闲零食", image: "/good6.png", price: "199.00" },
				{ text: "酒水饮品", image: "/good7.png", price: "199.00" },
				{ text: "坚果炒货", image: "/good8.png", price: "199.00" }] as listItem[],
			};
		},
		methods: {
			cdn(url:String):string{
				return "https://cdn.mzyun.tech/easyx"+url;
			},
			onClick(e : string) {
				uni.showModal({
					title: '您已点击' + e 
				})
			}
		},
	}
</script>

<style lang="scss">
	.swiper-image {
		height: 150px;
	}

	.grid-image {
		width: 40px;
		height: 40px;
	}

	.grid-text {
		font-size: 12px
	}

	.flex-x {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}
</style>