<template>
	<!-- 首页 -->
	<view class="index">
		<!-- 吸顶 -->
		<!-- __UNI__B5AC1D2 -->
		<u-sticky offset-top="0" h5-nav-height="0">
			<view class="status_bar"></view>
			<!-- 选项卡 -->
			<view>

				<u-tabs-swiper height="122" gutter="50" bar-width="70" bar-height="8" bg-color="#ffffff"
					:class="swiperCurrent===0?'':'asd'" inactive-color="gray" font-size="32" active-color="black"
					class="TabControl" ref="uTabs" :list="list" :current="current" @change="tabsChange"
					:is-scroll="false"></u-tabs-swiper>
			</view>
			<!-- logo标识 -->
			<view class="logo" v-if="swiperCurrent===0">
				<image class="lucky" :src="require('@/static/luckyLogo.png')" mode=""></image>
			</view>
		</u-sticky>
		<!-- 选项页面 -->

		<swiper class="swiper" :style="{height:(dynamic+760)+'rpx'}" :current="swiperCurrent" @transition="transition"
			@animationfinish="animationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in list" :key="index">
				<!-- 部落页面 -->
				<view v-if="index==0" class="tribe">

					<!-- 轮播图样式 -->
					<img class="wrap" :src="homePicture" alt="">
					<!-- 推荐 -->
					<view class="recommendBox">
						<view class="recommend">
							<view class="recommend_common">
								<view class="">
									<p>常见问题</p>
									<span>玩法与兑换</span>
								</view>
								<image :src="require('@/static/problem.png')" alt="">
							</view>
							<view class="recommend_service" @click="servicePhone">
								<view class="">
									<p>在线客服</p>
									<span>实时答疑</span>
								</view>
								<image :src="require('@/static/service.png')" alt="">
								
							</view>
						</view>
					</view>
					<!-- 商品列表 -->
					<view class="goodsListbox">
						<view class="goodsList">
							<view class="good" v-for="el in testBox" :key="el.boxId" @click="showPage(el.boxId)">
								<view class="goodImg">
									<!-- <img :src="el.pic" alt=""> -->
									<u-lazy-load class="lazyImg" :image="el.pic"></u-lazy-load>
								</view>

								<p class="goodDescribe">
									{{el.name}}

								</p>

								<view class="goodPriceOrNum">
									<span class="price"><span class="small">￥</span>{{el.price}}</span>
									<span class="number">{{el.sale}}+人已开盒</span>
								</view>

							</view>
						</view>
						<u-divider class="divider" bg-color="#F5F5F5" fontSize="35" border-color="gray">盲盒陆续上新
						</u-divider>
					</view>
				</view>
				<!-- 推荐页面 -->
				<!-- <view v-if="index==1">
					<view class="welfare">

					</view>
				</view> -->
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//选项卡
				list: [{
						name: '部落'
					},
					// {
					// 	name: '推荐'
					// }
				],
				// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				yanse: "",
				//轮播图
				listCarouse: [{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
				}, ],
			}
		},

		methods: {
			
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			// 跳转至展示页
			async showPage(num) {
				await uni.setStorageSync("isId", num)
				this.$Router.push({
					name: "showPage"
				})
			},
			//客服电话
				
			servicePhone(){
				uni.makePhoneCall({
					phoneNumber: '400-600-0603'
				});
			}
		},
		created() {
			// 获取首页盲盒
			this.$store.dispatch("gainHomeContent");
		},
		computed: {
			homePicture() {
				return this.$store.state.home.homePicture
			},
			testBox() {
				return this.$store.state.home.box
			},
			dynamic() {
				return (Math.ceil((this.$store.state.home.box).length / 2) * 480)
			}
		},
	};
</script>

<style lang="scss" scoped>
	// 适配函数计算
	@function rpx($px) {
		@return 750 * $px/720+rpx;
	}

	page {
		background-color: #F7F7F7;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.index {}

	.asd {
		// background-color:darkgray!important;
	}

	// 状态栏
	.status_bar {
		background-color: #ffffff;
		height: var(--status-bar-height);
		width: 100%;
	}

	// 选项卡
	.TabControl {
		// 选项条设置
		height: 122rpx !important;

		::v-deep.u-tabs-scroll-box {
			justify-content: flex-start !important;

			// 部落
			.UEl_0 {
				width: 150rpx !important;
				flex: 0 !important;
			}

			//推荐
			.UEl_1 {
				width: 150rpx !important;
				flex: 0 !important;
			}

		}

	}

	//logo标识
	.logo {
		width: 750rpx;
		height: 84rpx;
		background-color: white;
		color: rgba(45, 128, 191, 0.8);

		.lucky {
			width: 235rpx;
			height: 87rpx;
		}
	}

	//页面长度
	.swiper {
		display: flex !important;
		justify-content: center !important;
		flex-direction: column !important;
		width: 100vw !important;
		align-items: center !important;
		// height: 3500rpx!important;
		background-color: #F7F7F7 !important; //#F7F7F7
		padding-bottom: 20rpx !important;
		overflow: hidden!important;
		.swiper-item {

			// 部落页面
			.tribe {
				.wrap {
					width: 750rpx;
					height: rpx(400);
				}

				/* 推荐 */
				.recommendBox {
					background-color: #F7F7F7;
					width: 750rpx;
					height: rpx(111);
					display: flex;
					justify-content: center;
					align-items: center;
					margin-top: rpx(20);
					
					.recommend {
						background-color: #F7F7F7;
						width: rpx(682);
						display: flex;
						align-items: center;
						justify-content: space-between;

						.recommend_common {
							width: rpx(332);
							height: rpx(111);
							background: linear-gradient(128deg, #FFFFFD 0%, #E3EDFE 100%);
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 rpx(18);
							p {
								font-size: rpx(30);
								font-weight: 700;
								color: #000000;
							}
							span{
								color: #999999;
								font-size: rpx(20);
							}
							image{
								width: rpx(98);
								height: rpx(92);
							}
						}

						.recommend_service {
							width: rpx(332);
							height: rpx(111);
							background: linear-gradient(130deg, #FFFFFD 0%, #FFF1D6 100%);
							border-radius: 20rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 0 rpx(18);
							p {
								font-size: rpx(30);
								font-weight: 700;
								color: #000000;
							}
							span{
								color: #999999;
								font-size: rpx(20);
							}
							image{
								width: rpx(98);
								height: rpx(92);
							}
						}
					}
				}

				// 商品列表
				.goodsListbox {
					margin-top: rpx(28);
					width: 750rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.goodsList {
						width: rpx(688);
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;
						.good {
							width: rpx(336);
							overflow: hidden;
							border-radius: 15rpx;
							background-color: white;
							display: flex;
							flex-direction: column;
							align-items: center;
							margin-bottom: rpx(15);
							.goodImg {
								width: 300rpx;
								height: 300rpx;
								margin-bottom: 30rpx;

								.lazyImg {
									max-height: 300rpx !important;
									background-color: white !important;
								}
							}

							.goodDescribe {
								width: 320rpx;
								margin: auto;
								overflow: hidden;
								/* 设置元素为弹性伸缩盒 */
								display: -webkit-box;
								/* 设置弹性盒纵向排列 */
								-webkit-box-orient: vertical;
								/* 你要显示多少行 而且设置这个属性后，不需要单独设置ellipsis就可以显示为省略号*/
								-webkit-line-clamp: 2;
								font-size: 13px;

							}

							.goodPriceOrNum {
								width: 320rpx;
								height: rpx(100);
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-bottom: 10rpx;

								.price {
									font-weight: 700;
									color: #EF4F3F;
									font-size: 23px;

									.small {
										font-weight: 200;
										font-size: 13px;
									}
								}

								.number {
									color: darkgray;
									font-size: 13px;
									margin-top: 5px;
								}

							}
						}
					}

				}

			}

			//推荐页面
			.welfare {}
		}
	}
</style>