<template>
	<view class="page">
		
		<navbar title="活动"/>
		
		<view class="swipe">
			<uv-swiper 
			:list="bannerList" 
			indicator
			height="320rpx"
			keyName="image"></uv-swiper>
		</view>
		
		<!-- 分类 -->
		<view class="LabelOptions">
			<uv-tabs :list="category" 
			:activeStyle="{color : '#000', fontWeight : 900}"
			lineColor="#5baaff"
			lineHeight="8rpx"
			lineWidth="50rpx"
			:scrollable="false"
			@click="tabsClick"></uv-tabs>
		</view>
		
		
		
		<view class="activityList">
			<!-- <activityList :list="list"/> -->
			<activityItem
			:key="index"
			v-for="(item, index) in list"
			:item="item"
			@click="$utils.navigateTo('/pages_order/activity/activityDetail?id=' + item.id)"
			/>
		</view>
		
		<tabber select="2" />
	</view>
</template>

<script>
	import tabber from '@/components/base/tabbar.vue'
	import activityList from '@/components/list/activityList.vue'
	import activityItem from '@/components/list/activity/activityItem.vue'
	import mixinsList from '@/mixins/list.js'
	export default {
		mixins : [mixinsList],
		components : {
			tabber,
			activityList,
			activityItem,
		},
		data() {
			return {
				mixinsListApi : 'getActivityPage',
				bannerList : [],
				category : [
					{
						name : '近期活动',
						value : 0,
					},
					{
						name : '往期活动',
						value : 1,
					}
				],
			}
		},
		onShow() {
			this.getBannerList()
		},
		onLoad() {
			this.queryParams.className = 0
		},
		methods: {
			// 获取banner
			getBannerList(){
				this.$api('getBannerList', res => {
					if(res.code == 200){
						this.bannerList = res.result
					}
				})
			},
			tabsClick(item) {
				this.queryParams.className = item.value
				this.getData()
			},
		}
	}
</script>

<style scoped lang="scss">
.page{
	.activityList{
		// padding: 0 20rpx;
	}
	.swipe{
		overflow: hidden;
		border-radius: 20rpx;
		margin: 20rpx;
	}
}
</style>
