<template>
	<view class="content">
		<view class="header_box"></view>
		<view class="main_content_box">
			<view class="cate_box">
				<scroll-view scroll-x="true">
					<view class="cate_list" v-if="cateList.length>0">
						<view class="cate_item_box" v-for="(item, index) in cateList" @click="handleClickCate(item)">
							<view class="cate_item_border">
								<image :src="item.icon"></image>
							</view>
							<view class="cate_item_name" v-if="$platform!='android'&&index==2">心身健康科学</view>
							<view class="cate_item_name" v-else>{{ item.title }}</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="miaoSha_box" v-if="seckillLst.length>0">
				<view class="flash_sale_top">
					<image class="miaoShaIcon" src="@/static/icon/home_ms.png" mode="aspectFill"></image>
					<text class="miaoShaTitle">秒杀</text>
				</view>
			
				<view class="flash_sale_content">
					<scroll-view scroll-x="true">
						<view class="miaosha_list">
							<view class="miaosha_item"
								v-for="(v, i) in seckillLst" :key="i" @click="goodsDetail(v)">
								<image class="book_image" :src="v.productImages" mode="aspectFit"></image>
								<view class="book_name">{{ v.productName }}</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<view class="learning_box" v-if="flashSaleList.length>0">
				<view class="learning_box_top">
					<image src="@/static/icon/homeTitleBg.png"></image>
					<text>欢迎试听</text>
				</view>
				
				<view class="flash_sale_content greenCardBoxContent">
					<view class="learning_box_list">
						<view class="learning_item"
							v-for="(item, index) in flashSaleList" :key="index" @click="goDetail(item)">
							<image class="book_image" :src="item.image" mode="aspectFit"></image>
							<view class="book_name">{{ item.title }}</view>
						</view>
					</view>
				</view>	
			</view>
		</view>
		
		<view class="footer_box">
			<view class="footer_item">
				<view class="footer_nav_item" @click="selected=1">
					<image v-if="selected == 1" class="footer_item_image"
						src="/static/tab/home_active.png" mode="aspectFit"></image>
					<image v-else class="footer_item_image" src="/static/tab/home.png" mode="aspectFit">
					</image>
					<text class="footer_item_text"
						:class="[selected == 1 ? 'footer_item_text_active' : '']">首页</text>
				</view>
			</view>
			<view class="footer_item" @click="toMine()">
				<view class="footer_nav_item" @click="selected=4">
					<image v-if="selected == 4" class="footer_item_image"
						src="/static/tab/mine_active.png" mode="aspectFit"></image>
					<image v-else class="footer_item_image" src="/static/tab/mine.png" mode="aspectFit">
					</image>
					<text class="footer_item_text"
						:class="[selected == 4 ? 'footer_item_text_active' : '']">我的</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			selected : 1,
			cateList: [],
			seckillLst: [], //秒杀列表
			flashSaleList: [],  //欢迎试听
		}
	},
	onShow() {
		this.getCateList();
		this.getMarketProductList();
		this.getMarketCourseList();
	},
	methods: {
		//获取列表数据
		getCateList(){
			this.$http.request({
				url: 'visitor/getCoursePsycheTree',
				method: "POST",
				data: {
					id: 0,
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if (res.labels&&res.labels.length>0) {
					this.cateList = res.labels;
				}
			})
		},
		//获取秒杀数据
		getMarketProductList() {
			this.$http.request({
				url: 'visitor/getPsycheMarketShopProductList',
				method: "POST",
				data: {
					psycheMarketId: '31',
					limit: 10,
					current: 1
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.result.records&&res.result.records.length>0){
					this.seckillLst = res.result.records;
				}
			});
		},
		//获取欢迎试听数据
		getMarketCourseList() {
			this.$http.request({
				url: 'visitor/getPsycheMarketCourseList',
				method: "POST",
				data: {
					id: 29,
					limit: 10,
					page: 1,
				},
				header: {
					"Content-Type": "application/json",
				},
			})
			.then(res=> {
				if(res.courseList.records&&res.courseList.records.length){
					this.flashSaleList = res.courseList.records;
				}
			});
		},
		//课程列表
		handleClickCate(item){
			if(item.title=='心理测评'){
				uni.showModal({
					title: '提示',
					content: '为了方便您正常查阅心理测评，请先完成登录或注册。',
					confirmText: '确认',
					success(res){
					    if (res.confirm) {
					       uni.navigateTo({
					       	url: '/pages/user/login'
					       })
					    }
					}
				})
				return
			}
			uni.navigateTo({
				url: `/pages/visitor/list?title=${item.title}&id=${item.id}`,
			});
		},
		//商品详情
		goodsDetail(item){
			uni.navigateTo({
				url: `/pages/visitor/goods?isMiaosha=1&id=${item.productId}`,
			});
		},
		//课程详情
		goDetail(item){
			uni.navigateTo({
				url: `/pages/visitor/detail?navTitle=${item.title}&title=${item.title}&id=${item.id}`,
			});
		},
		//我的
		toMine(){
			uni.navigateTo({
				url: '/pages/visitor/mine'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.content{
	background-image: linear-gradient(180deg, #a7defc 0%, #eff5f8 60%);
	padding-bottom: 100rpx;
}
.header_box {
	width: 100%;
	height: 350rpx;
	display: flex;
	justify-content: center;
	overflow: hidden;
	background-size: 100% 100%;
	background-image: url("@/static/header_bg.jpeg");
	background-repeat: no-repeat;
}
.main_content_box{
	padding: 0 20rpx;
	color: #333;
	
	.curriculum_box{
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 25rpx;
		
		.curriculum_item_box{
			display: flex;
			align-items: center;
			position: relative;
			
			.curriculum_item_flag{
				font-size: 26rpx;
				color: #294a97;
				position: absolute;
				right: 35rpx;
			}
			
			.curriculum_item_name{
				font-size: 30rpx;
				padding-left: 12rpx;
				color: #294a97;
				font-weight: bold;
			}
			image{
				width: 30rpx;
				height: 37rpx;
			}
		}
		.curriculum_item_box:last-child{
			border-right: 0;
		}
	}
	
	.cate_box {
		margin-top: 20rpx;
		background: #7dc1f0;
		box-shadow: 0rpx 0rpx 6rpx 0rpx #f9f6ea;
		border-radius: 10rpx;
		
			.cate_list{
				display: flex;
				align-items: center;
			
			.cate_item_box {
				width: 20%;
				padding: 40rpx 0 30rpx;
				text-align: center;
		
				.cate_item_border {
					width: 60rpx;
					height: 60rpx;
					background-size: 100% 100%;
					background-image: url("@/static/cate_bg.png");
					border-radius: 4rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto;
					
					image{
						width: 46rpx;
						height: 46rpx;
					}
				}
		
				.cate_item_name {
					margin-top: 15rpx;
					font-size: 24rpx;
					line-height: 34rpx;
					text-align: center;
					color: #fff;
					font-weight: bold;
				}
			}
		}
	}
	.notice_box {
		margin-top: 30rpx;
	}
}
.flash_sale_top {
	width: 100%;
	height: 60rpx;
	background-color: rgba(125, 193, 240, 0.1);
	color: rgb(46, 103, 106);
	border-color: rgb(197, 227, 215);
	box-shadow: 0rpx 0rpx 2rpx 0rpx #fcf2f6;
	border-radius: 6rpx;
	padding: 3rpx 18rpx 3rpx 10rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border: 0.5px solid #7dc1f0;
}
.miaoShaContent {
	padding: 0;
	font-size: 22rpx;
	color: #ebb76b;
	font-weight: bold;
}
.u-notice-bar {
	background-color: transparent !important;
}
.noticeIcon{
	width: 45rpx;
	height: 45rpx;
}
.miaoSha_box{
	margin-top: 30rpx;
}
.miaoShaIcon{
	width: 45rpx;
	height: 45rpx;
}
.miaoShaTitle {
	font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
	font-size: 32rpx;
	color: #294a97;
	line-height: 46rpx;
	padding-left: 10rpx;
}
.flash_sale_content{
	margin-top: 20rpx;
}
.miaosha_list{
	display: flex;
	align-items: center;
}
.miaosha_item{
	width: 180rpx;
	margin-right: 20rpx;
	text-align: center;
	
	.book_image{
		width: 180rpx;
		height: 180rpx;
		background-color: rgba(125, 193, 240, 0.15);
	}
}
.book_name{
	text-align: center;
	font-size: 28rpx;
	color: #333;
	line-height: 50rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.learning_box{
	margin-top: 40rpx;
	margin-bottom: 30rpx;
	position: relative;
}
.learning_box_top{
	width: 100%;
	position: relative;
	z-index: 99;
	image{
		width: 290rpx;
		height: 70rpx;
		margin: 0 auto;
	}
	text{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		font-size: 32rpx;
		font-family: PangMenZhengDaoBiaoTiTiMianFeiBan;
		font-weight: normal;
		color: #294a97;
		text-align: center;
		line-height: 65rpx;
	}
}
.learning_box_list{
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 100%;
	
	.learning_item{
		width: 49%;
		margin-bottom: 20rpx;
		
		.book_image{
			background-color: rgba(125, 193, 240, 0.15);
			display: block;
			width: 100% !important;
			height: 168rpx;
		}
	}
}

.greenCardBoxContent {
	border: 2rpx solid #7dc1f0;
	padding: 80rpx 20rpx 20rpx;
	border-radius: 10rpx;
	background-image: linear-gradient(180deg, #d8ecf8 20%, #ecf6fc 100%);
	width: 100%;
	display: flex;
	overflow: hidden;
	height: auto;
	box-sizing: border-box;
}
.null_text{
	display: block;
	width: 100%;
	padding: 30rpx 0 70rpx;
	text-align: center;
	font-size: 30rpx;
	color: #666;
}
.appJump {
	position: fixed;
	right: 0;
	top: 100rpx;
	z-index: 1;

	.app_item {
		background: rgba(255, 255, 255, 0.9);
		margin-bottom: 20rpx;
		border: 1px solid #fff;
		display: flex;
		align-items: center;
		padding-right: 10rpx;
		overflow: hidden;
		border-radius: 50rpx 0 0 50rpx;

		text {
			font-size: 20rpx;
			padding-left: 3rpx;
		}

		.img {
			padding: 6rpx;
			overflow: hidden;

			image {
				width: 36rpx;
				height: 36rpx;
				border-radius: 100%;
			}
		}
	}
}

.footer_box {
	height: 90rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	box-sizing: content-box;
	background: #fff;
	padding-top: 5rpx;
}
.footer_item {
	position: relative;
	flex: 1;
}

.footer_nav_item {
	/* #ifndef APP-NVUE */
	display: flex;
	/* #endif */
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100%;
}
.footer_item_text {
	font-size: 12px;
	color: #333;
	margin-top: 4rpx;
}

.footer_item_text_active {
	color: #7dc1f0 !important;
}

.footer_item_image {
	width: 24px;
	height: 24px;
}
</style>
