<template>
	<view class="content">
		<view class="activeTop">
			<view class="searchBox">
				<view class="searchCol">
					<view class="iconfont icon-search1"></view>
					<input type="text" placeholder="请输入">
				</view>
				<view class="iconfont icon-w_location-"></view>
			</view>
			<view class="album_swiper">
				<swiper :autoplay="autoplay" :interval="interval" :duration="duration" :indicator-dots="true" indicator-active-color="rgba(255,255,255,0.5)" indicator-color="rgba(255,255,255,1)">
					<swiper-item v-for="item in ads" :key="item.id">
						<image :src="item.pic"></image>
					</swiper-item>
				</swiper>
			</view>			
		</view>
		<view class="menuBox">
			<view class="menuCol">
				<image src="../../static/icon_home_huodong@2x.png"></image>
				<view>参加活动</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_fuwu@2x.png"></image>
				<view>享受服务</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_youhui@2x.png"></image>
				<view>特价优惠</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_shanghu@2x.png"></image>
				<view>优质商户</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_youxuan@2x.png"></image>
				<view>为您优选</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_shangcheng@2x.png"></image>
				<view>母婴商城</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_ruzhu@2x.png"></image>
				<view>商户入驻</view>
			</view>
			<view class="menuCol">
				<image src="../../static/icon_home_women@2x.png"></image>
				<view>关于我们</view>
			</view>
		</view>
		<!--为您精选活动-->
		<view class="introBox">
			<view class="normal_tit">为您精选</view>
			<view class="intro_row">
				<view class="row_col" v-for="item in activityList" :key="item.id" @tap="gotoDetail(item.id, 1)">
					<view class="imgOuter">
						<image mode="aspectFill" :src="item.cover"></image>
						<view class="date">{{item.end_at}}</view>
					</view>
					<view class="title">{{item.name}}</view>
					<view class="subTit">{{item.address}}</view>
					<view class="price">
						<text class="font_red">{{item.activity_price[0].selling_price > 0 ? `￥${item.activity_price[0].selling_price}` : '免费'}}</text>
						{{item.people_number}}人参与
					</view>
				</view>
			</view>
		</view>
		<view class="termBox">
			<view class="termOuter">
				<view class="termCol cur">综合排序<text class="iconfont icon-arrowbottom"></text></view>
				<view class="termCol">距离最近<text class="iconfont icon-arrowbottom"></text></view>
				<view class="termCol">优质商户<text class="iconfont icon-arrowbottom"></text></view>
				<view class="termCol">筛选<text class="iconfont icon-filter"></text></view>
			</view>
		</view>
		<!--为您推荐福利&&服务-->
		<view class="introBox hasMenu">
			<view class="normal_tit padding_20">为您推荐</view>
			<view class="intro_column" v-for="item in serviceList" :key="item.id" @tap="gotoDetail(item.id, 2)">
				<view class="imgOuter"><image mode="aspectFill" :src="item.cover"></image><view class="i_intro">推荐</view></view>
				<view class="columnInfo">
					<view class="title">{{item.name}}</view>
					<view class="tags">
						<text v-for="(sub, subIdx) in item.label" :key="subIdx">{{sub}}</text>
					</view>
					<view class="subInfo">{{item.end_at}}</view>
					<view class="subInfo">{{item.address}}</view>
					<view class="price">
						<text class="font_red" v-if="item.service_price[0].selling_price > 0">￥{{item.service_price[0].selling_price}}</text>
						<text class="free" v-else>免费</text>
						<view class="shareMoney" v-if="item.service_price[0].shared_price > 0">
							<text>分享金</text>{{item.service_price[0].shared_price}}元
						</view>
					</view>
				</view>
			</view>
		</view>		
	</view>
</template>

<script>
	import {weixin, login} from '../../utils/weixin.js';
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 4000,
				activityList: [],
				serviceList: [],
				ads: [],
				page: 1,
			}
		},
		onLoad() {
			// login()
		},
		onShow() {
			this.getAdS()
			this.getActivityList()
			this.getServiceList()
		},
		onReachBottom() {
			this.getServiceList()
		},
		methods: {
			getActivityList() {
				uni.request({
					url: this.baseUrl + '/api/wechat/activity-index',
					method: 'POST',
					data: {page_size: 2},
					success: r => {
						if (r.data.code == 0) {
							this.activityList = r.data.data.list
						}
					}
				})
			},
			getServiceList() {
				uni.request({
					url: this.baseUrl + '/api/wechat/service-index',
					method: 'POST',
					data: {page: this.page},
					success: r => {
						if (r.data.code == 0) {
							this.serviceList = this.serviceList.concat(r.data.data.list)
							this.page++
						}
					}
				})
			},
			getAdS() {
				uni.request({
					url: this.baseUrl + '/api/wechat/adertisement-index',
					method: 'POST',
					data: {},
					success: r => {
						if (r.data.code == 0) {
							this.ads = r.data.data
						}
					}
				})
			},
			gotoDetail(id, type) {
				uni.navigateTo({
					url: `/pages/detail/detail?id=${id}&type=${type}`
				})
			}
		}
	}
</script>
<style>
	page {
		background-color: #F6F6F6;
	}
	
</style>
<style lang="scss" scoped>	

	.activeTop{
		width:100%;
		height:342rpx;
		background: linear-gradient(180deg, #FF578A 0%, rgba(255, 87, 138, 0) 100%);		
	}
	.searchBox{
		padding:20rpx 30rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.searchCol{
		width: 600rpx;
		height:72rpx;
		background-color: #fff;
		border-radius:36rpx;
		position: relative;
		line-height:72rpx;
		padding:0 30rpx;
		box-sizing: border-box;
	}
	.searchCol .iconfont{
		color:#999;
		font-size:25rpx;
	}
	.searchCol input{
		position: absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background: translate;
		padding:0 70rpx;
		box-sizing: border-box;
		font-size:24rpx;
	}
	.icon-w_location-{
		font-size:50rpx;
		color:#fff;
	}
	.album_swiper{
		width:690rpx;
		height:220rpx;
		border-radius:20rpx;
		margin: 0 auto;
		swiper{
			height:calc(690rpx/3.13);
			border-radius:20rpx;
			image{
				height:100%;
				border-radius:20rpx;
			}
		}		
	}	
	.menuBox{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		align-items: center;
		width:690rpx;
		margin:0 auto 10rpx auto;
		box-sizing: border-box;
		.menuCol{
			width:25%;
			text-align: center;
			font-size:24rpx;
			color:#333;
			margin-top:34rpx;
			image{
				display: block;
				width:94rpx;
				height:94rpx;
				margin: 0 auto 10rpx auto;
			}
		}
	}
	.introBox{
		width:710rpx;
		margin:20rpx auto 0 auto;
		border-radius: 16rpx;
		background: #fff;
		padding:0 35rpx;
		box-sizing: border-box;
	}
	.intro_row{
		display: flex;
		justify-content: space-between;
		width:100%;
	}
	.row_col{
		width:310rpx;
		border-radius: 8rpx;
		padding-bottom:20rpx;
		.imgOuter{
			width:310rpx;
			height:230rpx;
			position: relative;
			image{
				width:310rpx;
				height:230rpx;
				border-radius:8rpx 8rpx 0 0;
			}	
			.date{
				background-color: rgba(0,0,0,0.3);
				font-size:20rpx;
				color:#fff;
				line-height:32rrpx;
				padding:0 8rpx;
				border-radius: 5rpx;
				position: absolute;
				left: 20rpx;
				bottom:20rpx;
				font-weight:500;
			}
		}
		.title{
			width:100%;
			font-size:28rpx;
			color:#333;
			font-weight:500;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top:20rpx;
		}
		.subTit{
			width:100%;
			font-size:22rpx;
			color:#333;
			font-weight:400;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			padding-top:10rpx;
		}	
		.price{
			margin-top:20rpx;
			font-size:22rpx;
			color:#999;
			text{
				font-size:32rpx;
				font-weight:400;
				padding-right:15rpx;
			}
		}
	}
	.introBox .intro_column:last-child{border-bottom:none;}
	.intro_column{
		display: flex;
		justify-content: flex-start;
		padding:20rpx 0;
		border-bottom:2rpx solid #EAEAEA;
		.imgOuter{
			width: 260rpx;
			height:210rpx;
			position: relative;
			image{width:260rpx;height:210rpx;border-radius:5rpx;}
			.i_intro{position: absolute;top:0;left:0;width: 68rpx;height: 32rpx;background: #FF578A;border-radius: 5rpx 0px 18rpx 5rpx;font-size: 22rpx;font-weight: 400;color: #FFFFFF;line-height: 32rpx;text-align: center;}	
		}
		.columnInfo{
			width:360rpx;
			margin-left:22rpx;
			.title{
				width:100%;
				font-size:30rpx;
				font-weight:bold;
				color:#333;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;				
			}
			.tags text{
				height: 28rpx;
				background: rgba(255,177,62,0.1);
				border-radius: 4rpx;
				line-height:28rpx;
				font-size:20rpx;
				padding: 0 10rpx;
				margin-right:10rpx;
				color:#FF753E;
			}
			.subInfo{
				width:100%;
				font-size:24rpx;
				color:#999;
				font-weight:400;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				padding-top:5rpx;	
				.font_red{margin-left:10rpx;}
			}
			.price{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				align-content: center;
				margin-top:8rpx;
				text{margin-right:10rpx;}
				.shareMoney{
					height: 28rpx;
					border:2rpx solid #FF578A;
					border-radius: 4rpx;
					line-height:28rpx;
					font-size:20rpx;
					margin-right:10rpx;
					padding-right:10rpx;
					color:#FF578A;
					display: flex;
					flex-direction: flex-start;
					text{background: #FF578A;color:#fff;padding: 0 10rpx;}
				}
				.free{
					height: 28rpx;
					background: #FF753E;
					border-radius: 4rpx;
					line-height:28rpx;
					font-size:20rpx;
					padding: 0 10rpx;
					margin-right:10rpx;
					color:#fff;					
				}
			}
			
		}		
	}
	.termBox{
		width: 750rpx;
		height: 200rpx;
		background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.8) 70%, rgba(255, 255, 255, 0) 100%);
		border-radius: 40rpx 40rpx 0px 0px;
		margin-top:20rpx;
		.termOuter{
			display: flex;
			align-items: center;
			align-content: center;
			justify-content: flex-start;
			.termCol{
				width:27%;
				text-align:center;
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;	
				padding-top:36rpx;
				.iconfont{font-size: 24rpx;color: #666666;line-height:28rpx;margin-left:8rpx;}
				
			}
			.termCol.cur{
				color:#FF578A;
				.iconfont{color: #FF578A;}
			}
			.termCol:last-child{width:19%;}
			
		}
	}
	.hasMenu{margin-top:-100rpx;}
</style>
