<template>
	<view style="font-size: 28upx;">
		<!-- <z-nav-bar backState="2000" title="首页"></z-nav-bar> -->
		<view class="home_bg">
			<image src="../../static/icon/home_icon_1.png" mode="aspectFit" class="icon_hua_1"></image>
			<view class="search_box" @click="onPageJump('./searchFor')">
				<text class="icon_search"></text>
				<text class="prompt">搜索...</text>
			</view>
		</view>
		<view class="home_nar">
			<view class="hn_cl_tit" @click="onPageJump('../eBook/bookList')">
				<image src="../../static/icon/home_bar_1.png" mode="aspectFit"></image>
				电子书
			</view>
			<!-- <view class="hn_cl_tit" @click="onPageJump('../bookShop/bookShopIndex')"> -->
			<view class="hn_cl_tit" @click="onPageJump('../bookShop/classify')">
				<image src="../../static/icon/home_bar_2.png" mode="aspectFit"></image>
				健康超市
			</view>
			<view class="hn_cl_tit" @click="onGoing()">
				<image src="../../static/icon/home_bar_3.png" mode="aspectFit"></image>
				讲书
			</view>
			<view class="hn_cl_tit" @click="onGoing()">
				<image src="../../static/icon/home_bar_4.png" mode="aspectFit"></image>
				论文集
			</view>
		</view>

		<view class="home_lunbo">
			<u-swiper :list="list3" indicator indicatorMode="line" circular style="height: 180rpx;"></u-swiper>
		</view>

		<view class="home_shujia">
			<view class="hn_sj" @click="onTabJump('./bookshelf')">
				<image src="../../static/icon/midBtn_01.png" mode="aspectFit"></image>
				我的书架
			</view>
			<!-- <view class="hn_sj">
				<image src="../../static/icon/midBtn_02.png" mode="aspectFit"></image>
				图书推荐
			</view> -->
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',1)">
				<image src="../../static/icon/midBtn_03.png" mode="aspectFit"></image>
				医 学
			</view>
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',2)">
				<image src="../../static/icon/midBtn_04.png" mode="aspectFit"></image>
				国 学
			</view>
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',3)">
				<image src="../../static/icon/midBtn_05.png" mode="aspectFit"></image>
				文 学
			</view>
			<view class="hn_sj" @click="onPageJumpData('../eBook/bookList',4)">
				<image src="../../static/icon/midBtn_06.png" mode="aspectFit"></image>
				古 籍
			</view>
		</view>

		<view class="head_line" v-if="seckillList!=null">
			<b></b>
			<text>商品秒杀</text>
			<i @click="onShopMore('Sale')">查看更多 ></i>
		</view>

		<!-- 限时秒杀 -->
		<view class="limited" v-if="seckillList!=null">			
			<view class="limitedSymbol">
				<image src="../../static/icon/shopping_xsh.png"></image>
			</view>
			<view class="limitedScrollBox">
				<u-scroll-list indicatorActiveColor="#27b386">
					<view class="limitedItem" v-for="(item,index) in seckillList" :key="index"
						@click="goDetail(item.prodInfo.productId)">
						<image :src="item.prodInfo.productImages" mode=""></image>
						<text class="biaoti">{{item.prodInfo.productName}}</text>
						<text class="xian">￥{{item.seckillPrice}}</text>
						<text class="yuan">￥{{item.prodInfo.price}}</text>
					</view>
				</u-scroll-list>
			</view>
		</view>

		<view class="head_line">
			<b></b>
			<text>新书上架</text>
			<i @click="onBookMore('New')">查看更多 ></i>
		</view>

		<view class="home_xinshu">
			<view v-for="(item, index) in xinsList" @click="onBookJump(item)" v-if="index<3" class="hx_list">
				<image :src="item.image"></image>
				<view class="hx_title">{{item.bookName}}</view>
				<view class="hx_author">{{item.authorName}} [著]</view>
				<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
				<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
			</view>
			<br clear='both'>
			<view v-for="(item, index) in xinsList" @click="onBookJump(item)" v-if="index>2&&index<6" class="hx_list">
				<image :src="item.image"></image>
				<view class="hx_title">{{item.bookName}}</view>
				<view class="hx_author">{{item.authorName}} [著]</view>
				<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
				<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
			</view>
			<br clear='both'>
		</view>

		<view class="head_line">
			<b></b>
			<text>限时特价</text>
			<i @click="onBookMore('Sale')">查看更多 ></i>
		</view>
		<view class="home_limit">
			<u-scroll-list indicatorActiveColor="#27b386">
				<view v-for="(item, index) in limiTist" :key="index" @click="onBookJump(item)" class="lt_list">
					<image :src="item.image"></image>
					<view class="lt_title">{{item.bookName}}</view>
					<view class="lt_author">{{item.authorName}} [著]</view>
					<view class="lt_yuan">{{item.price}}疯币</view>
					<view class="lt_xian">{{item.salePrice}}疯币</view>
					<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
					<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
				</view>
			</u-scroll-list>
		</view>



		<view class="head_line">
			<b></b>
			<text>精选书单</text>
			<i @click="onBookMore('Best')">查看更多 ></i>
		</view>
		<view class="home_jingxu">
			<view class="hj_hot" v-for="(item,index) in jingList" @click="onBookJump(item)">
				<view>
					<text class="bok_name">{{item.bookName}}</text>
					<text style="margin-left: 50rpx;" v-if="item.authorName!=''">{{item.authorName}}</text>
				</view>

				<view v-if="item.publisherName!=''">
					<text>出版社：{{item.publisherName}}</text>
				</view>
				<view>
					<text>{{item.introduce | ellipsis}}</text>
				</view>
				<image :src="item.image"></image>
				<!-- <b v-if="item.isVip==0">免费</b> -->
				<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
				<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
			</view>
		</view>


		<view class="head_line">
			<b></b>
			<text>精选商品</text>
			<i @click="onShopMore('Hot')">查看更多 ></i>
		</view>

		<!-- 商品展示 -->
		<view class="goods">
			<view class="goodsItem" v-for="(item,index) in goodsList" :key="item.productId"
				@click="goDetail(item.productId)">
				<image :src="item.productImages" mode="" class="goodsImg"></image>
				<view class="goodsContent">
					<view class="goodsName">
						{{item.productName}}
					</view>
					<view class="goodsPrice">
						￥{{item.price}}
					</view>
				</view>
			</view>
			<br clear="both">
		</view>


		<view>
			<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
		</view>

		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<z-navigation></z-navigation>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				scrollTop: 0,
				list3: [
					'../../static/icon/home_ban_1.jpg',
					'../../static/icon/home_ban_2.jpg',
					'../../static/icon/home_ban_3.jpg',
				],
				xinsList: [],
				limiTist: [],
				jingList: [],
				seckillList: [],
				goodsList: [],
				bgiStyle: {
					background: '#2ab58833'
				},
				iconStyle: {
					fontSize: '40rpx',
					fontWeight: 'bold',
					color: '#54a966',
				},
			};
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		//第一次加载
		onLoad(e) {
			// 隐藏原生的tabbar
			uni.hideTabBar();
		},
		//页面显示
		onShow() {
			// 隐藏原生的tabbar
			uni.hideTabBar();
			this.getData();
		},

		// 下拉刷新
		onPullDownRefresh() {
			this.getData()
			uni.stopPullDownRefresh()
		},


		filters: {
			// 控制字数
			ellipsis(value) {
				if (!value) return '';
				let reg = /[\u4e00-\u9fa5]/g;
				let names = value.match(reg);
				value = names ? names.join('') : '';
				if (value.length > 50) {
					return value.slice(0, 50) + '...'
				}
				return value
			},
		},

		//方法
		methods: {
			// 获取列表数据
			getData() {
				this.$http
					.post('book/book/bookIndex')
					.then(res => {
						this.xinsList = res.bookIndex.newBookList
						this.limiTist = res.bookIndex.saleList
						this.jingList = res.bookIndex.topBookList
					});

				// 获取限时秒杀
				this.$http
					.get(`book/shopseckill/getSeckillProd`)
					.then(res => {
						//this.seckillList = res.list
						this.seckillList = null
					})

				// 获取精选商品
				this.$http
					.post('book/shopproduct/appGetList?limit=4&page=1&istop=1')
					.then(res => {
						this.goodsList = res.page.list
					})
			},

			// 跳转
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},

			onPageJumpData(url, data) {
				uni.navigateTo({
					url: url + '?id=' + data
				});
			},

			onTabJump(url) {
				uni.switchTab({
					url: url
				});
			},

			onGoing() {
				uni.showToast({
					icon: 'none',
					title: '开发中，敬请期待...'
				})
			},

			// 电子书内容跳转
			onBookJump(e) {
				uni.navigateTo({
					url: '../eBook/bookContent?Id=' + e.bookid
				});
			},
			// 商品详情页
			goDetail(id) {
				uni.navigateTo({
					url: '../bookShop/commodityDetail?id=' + id
				});
			},

			// 列表跳页
			onShopMore(e) {
				uni.navigateTo({
					url: '../bookShop/bookShopType?type=' + e
				});
			},

			// 三个列表跳页
			onBookMore(e) {
				uni.navigateTo({
					url: '../eBook/bookType?Type=' + e
				});
			},



		},

	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.head_line {
		margin: 50rpx 0 0 0;


		b {
			display: inline-block;
			width: 12rpx;
			height: 40rpx;
			background-color: #54a966;
			vertical-align: bottom;
			margin: 0 20rpx 0 0;
		}

		text {
			font-size: 32rpx;
			font-weight: bold;
		}

		i {
			float: right;
			font-style: normal;
			color: #8b8a91;
			font-size: 24rpx;
			margin: 5rpx 35rpx 0 0;
		}
	}

	.home_bg {
		background-image: url('@/static/icon/home_bg.jpg');
		background-position: center center;
		background-repeat: no-repeat;
		background-size: cover;
		padding: 100rpx 0 40rpx 0;
		position: relative;

		.icon_hua_1 {
			margin: 0 auto;
			width: 150rpx;
			height: 150rpx;
		}

		.search_box {
			width: 90%;
			height: 64upx;
			background-color: #fff;
			border-radius: 32upx;
			display: flex;
			align-items: center;
			padding: 0upx 40upx;
			position: absolute;
			margin-left: -46%;
			left: 50%;
			bottom: -30rpx;
			box-shadow: 0 0px 10px 1px #54a96633;

			.prompt {
				color: #cccccc;

			}

			.icon_search {
				background-image: url('@/static/icon/map_ic_search.png');
				background-position: center center;
				background-repeat: no-repeat;
				background-size: cover;
				width: 29upx;
				height: 28upx;
				margin-right: 20upx;
			}
		}
	}

	.home_nar {
		margin: 60rpx 50rpx 0 50rpx;
		display: flex;
		color: #333;

		.hn_cl_tit {
			width: 25%;
			text-align: center;


			image {
				width: 110upx;
				height: 110upx;
				margin: 0 auto;
				// margin: 0 20rpx;
			}
		}

		.hn_cl_tit:nth-child(1),
		.hn_cl_tit:nth-child(4) {}

	}

	.home_lunbo {
		margin: 40rpx 30rpx 0 30rpx;
	}

	.home_shujia {
		margin: 40rpx 20rpx 0 20rpx;
		display: flex;
		color: #333;

		.hn_sj {
			width: 20%;
			text-align: center;
			font-size: 26upx;

			image {
				width: 100upx;
				height: 100upx;
				margin: 0 auto;
			}
		}
	}

	.home_xinshu {
		margin: 35rpx 30rpx;
		padding: 36rpx 16rpx 0 16rpx;
		background-color: #fff;
		border-radius: 30rpx;

		.hx_list {
			margin: 0 15rpx 20rpx 15rpx;
			text-align: center;
			width: 28.5%;
			float: left;
			position: relative;

			image {
				width: 100%;
				height: 290upx;
				margin: 0 0 20rpx 0;
			}

			.hx_title {
				font-size: 28rpx;
				margin: 0 0 10rpx 0;
				font-weight: bold;
			}

			.hx_author {
				font-size: 24rpx;
				margin: 0 0 20rpx 0;
				color: #9b9b9b;
			}

			b {
				display: block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
				background: #27b386;
				position: absolute;
				left: -10upx;
				top: 10upx;
				font-size: 16rpx;
			}
		}
	}

	.home_limit {
		margin: 35rpx 0;
		padding: 36rpx 0 20rpx 0;
		background-color: #fff;


		.lt_list {
			margin: 0 35rpx 0 0;
			text-align: center;
			position: relative;

			image {
				width: 200upx;
				height: 280upx;
				margin: 0 0 20rpx 0;
			}

			.lt_title {
				font-size: 28rpx;
				margin: 0 0 10rpx 0;
				font-weight: bold;
			}

			.lt_author {
				font-size: 24rpx;
				margin: 0 0 20rpx 0;
				color: #9b9b9b;
			}

			.lt_yuan {
				text-decoration: line-through;
				color: #c1c1c1;
				margin: 0 0 5rpx 0;

			}

			.lt_xian {
				color: #bf0c0c;
				font-weight: bold;
			}

			b {
				display: block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
				background: #27b386;
				position: absolute;
				left: -10upx;
				top: 10upx;
				font-size: 16rpx;
			}


		}

		.lt_list:nth-child(1) {
			margin-left: 30rpx;
		}

		.lt_list:nth-last-child(1) {
			padding-right: 30rpx;
		}
	}

	.home_jingxu {
		margin: 60rpx 30rpx 0 30rpx;


		.hj_hot {
			box-shadow: 0 0px 10px 1px #56565633;
			background-color: #fff;
			position: relative;
			padding: 20upx 220upx 10upx 25upx;
			margin: 0 0 60rpx 0;
			border-radius: 15rpx;
			min-height: 230rpx;

			view {
				margin: 0 0 10rpx 0;

				text {
					color: #9b9b9b;
					font-size: 24rpx;
					line-height: 36rpx;
				}

				.bok_name {
					font-weight: bold;
					color: #333;
					font-size: 28rpx;
				}


			}

			image {
				position: absolute;
				right: 30upx;
				top: -30upx;
				width: 160upx;
				height: 240upx;
			}

			b {
				display: block;
				padding: 5rpx 10rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				font-weight: normal;
				background: #27b386;
				position: absolute;
				right: 150upx;
				top: -20upx;
				font-size: 16rpx;
			}
		}


	}


	.limited {
		width: 100%;
		height: auto;
		padding: 20rpx 10rpx 10rpx 10rpx;
		display: flex;
		align-items: center;
		background-color: #fff;
		margin-top: 50rpx;

		.limitedSymbol {
			width: 22%;
			height: 300rpx;
			border-right: 1px solid #eee;
			vertical-align: middle;

			image {
				width: 120rpx;
				height: 120rpx;
				margin: 45px auto 0 auto;
			}
		}

		.limitedScrollBox {
			width: 76%;
			padding: 0 10rpx;
		}

		.limitedItem {
			width: 200rpx;
			text-align: center;

			image {
				width: 150upx;
				height: 200upx;
				margin: 15rpx auto 20rpx auto;
			}

			text {
				font-size: 20rpx;
				display: block;
			}

			.biaoti {
				font-size: 30rpx;
				margin: 10rpx 0 10rpx 0;
				font-weight: bold;
			}

			.xian {
				font-size: 32rpx;
				color: #bf0c0c;
				font-weight: bold;
			}

			.yuan {
				text-decoration: line-through;
				color: #c1c1c1;

			}
		}
	}

	.goods {
		width: 100%;
	margin:40rpx 0 50rpx 0;

		.goodsItem {
			display: inline-block;
			width: 46%;
			border-radius: 20rpx;
			padding: 25rpx 25rpx 20rpx 25rpx;
			margin: 0 20rpx 20rpx 20rpx;
			background-color: #fff;
			border: 1px solid #eee;

			.goodsImg {
				width: 98%;
				height: 380rpx;
				border-radius: 10rpx;
			}

			.goodsContent {

				.goodsName {
					margin-top: 10rpx;
					font-size: 30rpx;
					font-weight: bold;
				}

				.goodsPrice {
					font-size: 30rpx;
					margin: 5rpx 0 0 3rpx;
					color: #bf0c0c;
					font-weight: bold;

				}
			}
		}

		.goodsItem:nth-child(2n) {
			margin-left: 0;
		}
	}
</style>
