<template>
	
	<view class="body" >
		
		<!-- 头部导航栏 -->
		<view class="navigation " >
			<view class="status_bar"></view>
			<view class="page_padding">
			<view class="navigation_title" :class="isScrollShow?'isScrollShow':'' ">
				<template v-if="!isScrollShow ">
					<navigator url="/pages/account/message" class="order_info_item">
						<uni-badge :text="mesNum" type="error" absolute="rightTop">
							<image src="../../static/img/msg_white.png" mode=""></image>
						</uni-badge>
					</navigator>
					
					<image src="/static/img/dope plus_white.png" mode="" class="index_logo"></image>
				</template>
				
				
				<view class="navigation_title_right" :class="isScrollShow?'navigation_title_padding':'' ">
					<navigator>
						<image src="../../static/img/like_white.png" mode="" @click="Iswish()"></image>
					</navigator>
					<navigator url="/pages/shippingCart/index" open-type="switchTab">
						<uni-badge :text="sum" type="error" absolute="rightTop">
								<image src="../../static/img/shop_cart1.png" mode=""></image>
						</uni-badge> 
					</navigator>
					 
				</view>
			</view>
			
			<navigator >
				<view v-if="isScrollShow " :class="isScrollShow?'isScrollShow3':'' ">
					<image src="/static/icon/home_white.png" mode=""></image>
				</view>
				<view class="navigation_seach" :class="isScrollShow?'isScrollShow1':'' " @click="gotoSearch()">
					  
						<image src="../../static/img/seach.png" mode=""></image>
						<text>search</text>
				</view>
			</navigator>
			</view>
			<view class="navigation_scroll " :class="isScrollShow?'isScrollShow2':'' ">
				<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
					<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
				</scroll-view>
			</view>
		</view>
		<!-- <view class="navigation1">
			<view class="navigation_scroll" :class="isScrollShow?'isScrollShow2':'' ">
				<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
					<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
				</scroll-view>
			</view>
		</view> -->
		<view v-for="(item,index) in indexDate.zones" :key="item.zone_id">
			
			<!-- 轮播图 -->
			<view class="uni-margin-wrap page_padding_left" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" :style="{width:(item.zone_code=='BANNER')?item.zone_colum+'rpx':''}"  >
					<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id">
						<view class="swiper-item " v-if="item1.block_status=='NORMAL'" >
							<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<!-- 宫格 -->
			<uni-swiper-dot :info="info" :current="current" field="content" mode="default" 
			v-if="item.zone_code=='ICON' && item.zone_status=='NORMAL' && item.zone_code!=indexDate.zones[index-1].zone_code">
				<swiper class="grid_swiper " @change="gridSwiper">
					<swiper-item v-for="(item1,index1) in info" :key="item1.zone_id">
						<view class="grid_content">
							<view class="grid_item" v-for="(item2, index2) in item1.blocks" :key="item2.block_id">
								<template v-if="item2.block_status=='NORMAL'">
									<view class="grid_item_img">
										<image :src="item2.block_pic" mode="" @click="gotoProductlist(item2,item2.block_link)"></image>
									</view>
									<text>{{item2.block_title}}</text>
								</template>
								
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
			
			<!-- ONEPIC -->
			<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'" >
				<!-- class="discount page_padding" -->
				<image :src="item.blocks[0].block_pic" :style="{height:(item.zone_code=='ONEPIC')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item.blocks[0])" ></image>
			</view>
			<!-- TWOPIC -->
			<view class="TWOPIC"  v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'">
				<image :src="item1.block_pic" :style="{height:(item.zone_code=='TWOPIC')?item.zone_column+'rpx':''}" @click="imgTo(item1)"mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
			</view>
			<!-- THREEPIC -->
			<view class="THREEPIC" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'">
				<image :src="item1.block_pic" :style="{height:(item.zone_code=='THREEPIC')?item.zone_column+'rpx':''}"    @click="imgTo(item1)" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
			</view>
			<!-- FOURPIC -->
			<view class="FOURPIC"  v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'">
				<image :src="item1.block_pic" :style="{height:(item.zone_code=='FOURPIC')?item.zone_column+'rpx':''}" mode=""  @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
			</view>
			<!-- FIVEPIC -->
			<view class="FIVEPIC"   v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'">
				<image :src="item1.block_pic" :style="{height:(item.zone_code=='FIVEPIC')?item.zone_column+'rpx':''}" mode=""  @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
			</view>
			<!-- SIXPIC -->
			<view class="SIXPIC" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'">
				<image :src="item1.block_pic" :style="{height:(item.zone_code=='SIXPIC')?item.zone_column+'rpx':''}"mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
			</view>
			
			
			
			<!-- 标题 -->
			<navigator url="/pages/index/flashSale" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
				<view class="index_title page_padding">
					<text>Flash Sale</text>
					<view class="title_right">
						<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes" :second="curEndTime|seconds" color="#FFFFFF" background-color="#1B1B1B" />
						<image src="../../static/img/right.png" mode="" ></image>
					</view>
				</view>
			</navigator>
			
			
			<!-- SPIKE 1 -->
			<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
				<view class="spike1_item" v-for="(item1,index1) in skillList"  :key="item1.goods_id"   >
					<view class="item_img" @click="gotoSkillpage(item1)">
						<image :src="item1.goods_img" mode="" :style="{height:(item.zone_code=='SPIKE1')?item.zone_column+'rpx':'',width:200+'rpx'}" ></image>
					</view>
					<view class="spike1_item_bottom padding_left">
						<text>US${{item1.promote_price}}</text>
						<view class="spike1_item_text">US${{item1.shop_price}}</view>
					</view>
					
				</view>
			</scroll-view>
			
			<!-- 标题 -->
			<view class="index_title page_padding" v-if="item.zone_code=='TITLE' && item.zone_status=='NORMAL'">
				<text>{{item.blocks[0].block_title}}</text>
				<view class="title_right">
					<image src="../../static/img/right.png" mode="" @click="Hotgoto(item.blocks)"></image>
				</view>
			</view>
			
			<!-- HOT SELLS 1 -->
			
			<view class="hotSells1 page_padding" v-if="item.zone_code=='GOODSTWO1' || item.zone_code=='GOODSTHREE1'">
				<template v-if="item.zone_code=='GOODSTWO1' && item.zone_status=='NORMAL'">
					<view class="hotSells1_item" v-for="(item1,index1) in item.blocks"  :key="item1.block_id" >
						<view class="hotSells1_item_img" >
							<image :src="item1.block_pic" :style="{height:(item.zone_code=='GOODSTWO1')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)"></image>
						</view>
						<text>{{item1.block_title}}</text>
					</view>
				</template>
				<template v-if="item.zone_code=='GOODSTHREE1' && item.zone_status=='NORMAL'">
					<view class="hotSells2_item" v-for="(item1,index1) in item.blocks"  :key="item1.block_id">
						<view class="hotSells2_item_img" >
							<image :src="item1.block_pic":style="{height:(item.zone_code=='GOODSTHREE1')?item.zone_column+'rpx':''}" mode="" @click="imgTo(item1)"></image>
						</view>
						<text>{{item1.block_title}}</text>
					</view>
				</template>
			</view>
			
			<!-- 标题 -->
			<!-- <view class="index_title page_padding">
				<text>Hot Selle</text>
				<view class="title_right">
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view> -->
			
			<!-- HOT SELLS 2 -->
			<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'">
				<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"  :key="item1.block_id">
					<view class="item_img":style="{width:(item.zone_code=='HONLIST2')?350+'rpx':''}" >
						<image :src="item1.block_pic" mode="" :style="{height:(item.zone_code=='HONLIST2')?item.zone_column+'rpx':''}"@click="imgTo(item1)"></image>
					</view>	
				</view>
			</scroll-view>
			
			<!-- 标题 -->
			<!-- <view class="index_title page_padding">
				<text>Hot Selle</text>
				<view class="title_right">
					<image src="../../static/img/right.png" mode=""></image>
				</view>
			</view> -->
			
			<!-- HOT SELLS 3 -->
			<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false" v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'">
				<view class="spike1_item" v-for="(item1,index1) in item.blocks"  :key="item1.block_id">
					<view class="item_img">
						<image :src="item1.block_pic" :style="{height:(item.zone_code=='HONLIST3')?item.zone_column+'rpx':'',width:350+'rpx'}" mode="" @click="imgTo(item1)"></image>
					</view>	
					<view class="spike1_item_bottom">
						<text>{{item1.block_title}}</text>
						<view class="spike1_item_text1">{{item1.block_title2}}</view>
					</view>
					
				</view>
			</scroll-view>
			
			<!-- GOODSTHREE 2 -->
			<!-- <view class="goodsthree2">
				<view class="goodsthree2_item" v-for="(item,index) in 3"  :key="index"></view>
			</view> -->
			
			<!-- 轮播图 -->
			<!-- <view class="uni-margin-wrap">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" >
					<swiper-item>
						<view class="swiper-item uni-bg-red">A</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-green">B</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">C</view>
					</swiper-item>
				</swiper>
			</view> -->
			
			<!-- SPIKE 1 -->
			<!-- <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false">
				<view class="spike1_item" v-for="(item,index) in 8"  :key="index">
					<view class="spike1_item_img"></view>
					<view class="spike1_item_bottom1">
						<view class="spike1_item_text">Adidas Yeezy Boost 350  DazzlingBlue Black</view>
						<text>US$314.00</text>
					</view>
				</view>
			</scroll-view> -->
		</view>
		<!-- 瀑布流标题 -->
		<!-- <view class="index_title1" v-if="bestlist.length>0">PRODUCTS FRO YOU</view> -->
		
		<!-- <view class="waterfall" v-if="bestlist.length>0" >
			<custom-waterfalls-flow :value="bestlist" imageKey="block_pic"@imageClick="imgTo(bestlist)">
				<template v-slot:default="item2">
						<view class="item" @click="imgTo(item2)">
							<view class="title">{{item2.block_title}}</view>
								<view >{{item2.block_title2}}</view>
								<view class="desc">{{item2.block_title3}}</view>
						</view>
				</template>
			</custom-waterfalls-flow>
		</view>
		 -->
		 <view class="container" v-if="bestlist">
		 		<view class="left">
		 			<view v-for="(item,index) in leftList" :key="index" >
		 				<image :src="item.block_pic" alt="" mode="widthFix"  @click="imgTo(item)"></image>
		 				<view class="item" @click="imgTo(item)">
		 					<view class="title"  v-if="item.block_title!=0">{{item.block_title}}</view>
		 						<view class="title">{{item.block_title2}}</view>
		 						<view class="desc">{{item.block_title3}}</view>
		 				</view>
		 			</view>
		 		</view>
		 		<view class="right">
		 			<view v-for="(item1,index1) in rightList" :key="index1" >
		 				<image :src="item1.block_pic" alt="" mode="widthFix" @click="imgTo(item1)"></image>
		 				<view class="item" @click="imgTo(item1)">
		 					<view class="title" v-if="item1.block_title!=0">{{item1.block_title}}</view>
		 						<view class="title" >{{item1.block_title2}}</view>
		 						<view class="desc">{{item1.block_title3}}</view>
		 				</view>
		 			</view>
		 			
		 		</view>
		 	</view>
			
			<!-- //广告 -->
			<view style="bottom:0">
				<!-- <button @click="open">打开弹窗</button> -->
				<uni-popup ref="popup" :mask-click="false">
					
					<view class="Popup">
						<view class="popup_close">
							<image mode=" " @click="close" src="../../static/img/close2.png"></image>
						</view>
						<view class="popup_img" >
							<text v-if="countdownTime">{{countdownTime }}</text>
							<image :src="popImg" mode=" " @click="popImgto"></image>
						</view>
					</view>
					<!-- <button @click="close">关闭</button> -->
				</uni-popup>
			</view>
	</view>
</template>

<script>
	import {defaultRequest,defaultRequest4} from '../../api/index.js'
	
	export default {
		data() {
			return {
				isScrollShow:false,
				scroll_active:0,
				scrollList:[
					// {text:'DOPE'},{text:'VIDEO'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'},
				],
				current:0,
				list: [
					{ image: 'https://via.placeholder.com/200x500.png/ff0000', title: 'Adidas Yeezy Boost 350  DazzlingBlue Black', desc: 'US$314.00' }, 
					{ image: 'https://via.placeholder.com/200x200.png/2878ff', title: 'Adidas Yeezy Boost 350  DazzlingBlue Black', desc: 'US$314.00' }
				],
				indexDate:{},
				info:[],
				banner:{},
				cat_list:[],
				sum:0,
				mesNum:0,
				skillList:[],
				backButtonPress:0,
				catQuery:{
					_action:'getgoods',
					page_index:1,
					page_size:30,
					type:'best'
				},
				
				bestlist:[],
				// 初始化左右盒子
				leftList: [],
				rightList: [],
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0,
				isbest:0,
				popImg:'',
				countdownTime: 6,
				popUrl:'',
				myMes:{
					_action:'getmessagelist',
					type:0,
					// importance:'',
					// label:'',
					page_index:1,
					page_size:10
				},
			}
		},
		onPullDownRefresh() {
					
					setTimeout(()=>{
						
						 
						 this.getList()
						uni.stopPullDownRefresh()
						
					},800)
				},
		
		onLoad() {
			
			this.getIndex()
			// //console.info(this.curEndTime)
			 this.getList()
			 this.getMes()
			 this.getPullMes()
			 this.getInfo()	 
			 setTimeout( () =>{
				 this.open()
			 },1000)
		},
		created() {
			this.getPullMes()	
			 this.getCountdownTime()
					
				},
		onShow() {
			
			this.getList()
			this.getMes()
			this.sum=0
		},
		computed:{
			//当天结束时间
			curEndTime(){
				const endtime = new Date(new Date().setHours(23,59,59,999)).getTime()
				 // 获取当前时间
				const nowtime=(new Date()).getTime();
				var date3 = nowtime - endtime;   //时间差的毫秒数      
				date3 = Math.abs(date3)
			  return date3;
			}
		},
		filters:{
			hours (timestamp){
				var leave1=timestamp%(24*3600*1000)    //计算天数后剩余的毫秒数
				var hours=Math.floor(leave1/(3600*1000))
				return hours
			},
			minutes(timestamp){
				var leave2=(timestamp%(24*3600*1000))%(3600*1000)        //计算小时数后剩余的毫秒数
				var minutes=Math.floor(leave2/(60*1000))
				return minutes
			},
			seconds(timestamp){
				var leave3=((timestamp%(24*3600*1000))%(3600*1000))%(60*1000)      //计算分钟数后剩余的毫秒数
				var seconds=Math.round(leave3/1000)
				return seconds
			}
			
		},
		onBackPress(options) {  
							this.backButtonPress++;
							if (this.backButtonPress > 1) { 
								plus.runtime.quit();
							} else {
								plus.nativeUI.toast('Click again to exit');
							} 
							setTimeout(function() {
								this.backButtonPress = 0;
							}, 1000);
							return true;
					},
			
		
		methods: {
			
			open() {
						this.$refs.popup.open('center')
					},
					close() {
						if(this.countdownTime == 0){
							this.$refs.popup.close()
						}
						uni.setTabBarStyle({
						 backgroundColor: "#fff",
						  borderStyle: "black",
						  // selectedColor: "#999",
						  // color: "#999",
						});
						
					},
					//获取广告
			getPullMes(){
				let data={_action:'getpagedata',pagecode:'001-STARTPAGE'}
				defaultRequest(data).then( res =>{
					console.log(res.data.zones)
					let img
					let url 
					if(res.error == 0){
						res.data.zones.map( item =>{
							if(item.zone_code ==  "KAIPIN"){
								img = item.blocks[0].block_pic
								url = item.blocks[0].block_link
							}
						})
						console.log(img)
						this.popImg = img
						this.popUrl = url
					}
				})
			},
			//5秒倒计时
			getCountdownTime() {
				// uni.hideTabBar();
				uni.setTabBarStyle({
				 backgroundColor: "#ccc",
				  borderStyle: "black",
				  // selectedColor: "#999",
				  // color: "#999",
				});
							this.countdownTime = 6
							let timer = setInterval(() => {
								this.countdownTime--;
								if (this.countdownTime < 1) {
									clearInterval(timer)
									this.countdownTime = 0
									
									// uni.redirectTo({
									// 	url:'inde'
									// })
								}
							}, 1000)
						},
		//gaogaoye 跳转
		popImgto(){
			const i = this.popUrl.indexOf('?')
			if(this.popUrl.includes('dope.dope://?goodslist=1')){
				const url = this.popUrl.substring(i)
				console.log(url)
				uni.navigateTo({
					url:'/pages/category/productList'+url
				})
			}
		},
		  
		   
		
	
			// 获取首页数据配置
			getIndex(){
				let data={_action:'getpagedata',pagecode:'HOME'}
				defaultRequest(data).then(res=>{
					
					if(res.error==0){
						this.indexDate=res.data
						 //console.log(this.indexDate,'首页配置')
						res.data.zones.map(item=>{
							if(item.zone_code=='ICON'){
								item.content=''
								this.info.push(item)
								  //console.log(item,'info')
							}
							if(item.zone_code=='LIST1'){
								
								 // this.bestlist.push(item.blocks)
								// //console.log(this.bestlist,'精品')
								 this.isbest = 1
								 this.getCatList()
								item.blocks.map( item =>{
									this.bestlist.push(item)
								})
								//console.log(item,'精品')
							}
							
						})
					}
				})
				defaultRequest({
					_action:'getpagedata',pagecode:'HOMECLASS'
				}).then(res =>{
					// //console.log(res)
					if(res.error ==0){
						this.scrollList = res.data.zones
					}
				})
			},
			Iswish(){
				const i = uni.getStorageSync('isLogin')
				if(i==1){
					uni.navigateTo({
						url:'../account/wishlist'
					})
				}else{
					uni.navigateTo({
						url:'../login/index'
					})
				}
			},
			getMes(){
				let data ={ _action:'getpagedata',pagecode:'006-PERSONALCENTERPAGE'
					
				}
				let a=0, b =0
				defaultRequest(data).then(res =>{
					
					let list = res.data.zones
					
					list.map(item =>{
						if(item.zone_code =='XIAOXI'){
							this.list = item
							
						}
					})
					console.log(this.list.blocks.length)
					a = this.list.blocks.length
					let str = this.list.blocks[0].block_avaiable_from
					
				})
				defaultRequest(this.myMes).then(res =>{
					console.log(res)
					if(res.error ==0){
						this.app_Mes = res.data.message_list
						b = this.app_Mes.length
						console.log(this.app_Mes.length)
					}
				 let sum = parseInt(a) + parseInt(b)
				 console.log(sum)
				 this.mesNum= sum
				
				})
			},
			gotoSearch(){
				uni.navigateTo({
					url:'./search'
				})
			},
			goDetails(id){
				uni.navigateTo({
					url:'/pages/productDetails/index?goodid='+id
				})
			},
		
			getList(){
				 
				
				let data={_action:'getcartgoods'}
				defaultRequest(data).then(res=>{
					// //console.info(res.data.goods_list.length,'//////')
					if(res.error==0){
						 this.sum = res.data.goods_list.length 
					}
				})
				
				let query={
					_action:'getgoods',type:'promote',order_type:0,page_size:50,page_index:0
				}
				
				defaultRequest(query).then(res=>{
					if(res.error==0){
						let skillList = []
						this.skillList = res.data
						// for(let i =0;i<3;i++){
						// 	 var _num = Math.floor(Math.random()*res.data.length)
						// 	       var mm = res.data[_num]
						// 			  skillList.push(mm)
						// 			  this.skillList = skillList
								  
							     
						// }
						
					}
				})
			},
			
			// 指定范围内，指定个数，无重复的随机整数
			getRandomNumber(n,min,max){
			    let arr=[];
			    for(let i = 0; i < n; i ++){
			        arr[i] = parseInt(Math.random() * (max - min + 1) + min);
			    }
			    for(let i = 0; i < n; i++){
			        for(let j = i + 1; j < n; j ++){
			            if(arr[i] === arr[j]){
			                this.getRandomNumber(n,min,max);
			                return false;
			            }
			        }
			    }
			    return arr
			},
			
			//获取用户是否登录
			getInfo(){
				let data = {
					_action:'getinfo'
				}
				defaultRequest(data).then(res =>{
					//console.log(res,'用户信息')
					if(res.error == -1){
						uni.setStorageSync('isLogin',0)
					}else if(res.error==0){
						uni.setStorageSync('isLogin',1)
					}
				})
			},
			// 获取的推荐商品数据
			getCatList(type){
				if(this.isbest ==1){
			defaultRequest4(this.catQuery).then(res=>{
					//console.info(res,'最好的')
					if(res.error==0){
						if(res.data){
							
							res.data.map( item =>{
								this.bestlist.push({
									block_pic:item.goods_img,
									block_title3:'US$'+item.shop_price,
									goodid:item.id
								})
							})
							//console.log(this.bestlist,'合并')
							const that = this
							this.bestlist.forEach(res => {
								// 获取图片宽高
								uni.getImageInfo({
									src: res.block_pic,
									success: (image) => {
										// //console.log(res.block_pic)
										// 计算图片渲染高度
										let showH = (50 * image.height) / image.width
										// 判断左右盒子高度
										if(that.leftH <= that.rightH) {
											that.leftList.push(res)
											that.leftH += showH
										} else {
											that.rightList.push(res)
											that.rightH += showH
										}
									}
								})
							})
						}
					}
				})
				}
			},
			
			goPage(){
				uni.navigateTo({
					url: '/pages/productDetails/index',
				});
			},
			gotoSkillpage(e){
				uni.navigateTo({
					// url:"../productDetails/index?goods_id="+e.id
					url:'./flashSale'
				})
			},
			gotoProductlist(item,url){
				
				const a = url.substring(12);
				const b = url.substring(url.length - 3)
				//console.log(a)
				uni.navigateTo({
					   url:"../category/productList?typethree="+b+'&type=0'+'&title='+item.block_title
					   // url:"../category/productList"+ a +'&title='+item.block_title
				})
			},
			scrollChange(item,index){
				this.info = []
				this.bestlist =[]
				this.scroll_active=index
				let data = {
					_action:'getpagedata',
					pagecode:item.zone_code
				}
				
				defaultRequest(data).then( res =>{
					
					if(res.error == 0){
						this.indexDate = res.data
						res.data.zones.map(item=>{
							if(item.zone_code=='ICON'){
								item.content=''
								this.info.push(item)
								  //console.log(item,'info')
							}
							
						})
							
							
						
					}
				})
				
			},
			gridSwiper(e){
				this.current = e.detail.current
			},
			//轮播图跳转 // 热卖跳转
			imgTo(item){
				//console.log(item,'item')
				let goodid 
				if(item.block_link){
					 goodid = item.block_link.substring(12);
					//console.log(item.block_link)
					if(goodid.includes('goodslist')){
						uni.navigateTo({
							url:'../category/productList'+ goodid 
						})
					}else{
						uni.navigateTo({
							url:'../productDetails/index'+goodid+'&img=1'
						})
					}
				}
				if(item.goodid){
					uni.navigateTo({
						url:'../productDetails/index?goodid='+item.goodid
					})
				}
			},
			Hotgoto(item1){
				//console.log(item1[0].block_title + item1[0].block_link)
				 const url = item1[0].block_link.substring(12)
				if(url.includes('goodslist')){
					uni.navigateTo({
						url:'../category/productList'+ url
					})
				}else{
					uni.navigateTo({
						url:'../productDetails/index'+url+'&img=1'
					})
				}
			}
		},
		onPageScroll(res) {
			if(res.scrollTop>40){
				this.isScrollShow=true
			}else if(res.scrollTop<40){
				this.isScrollShow=false
				
			}
		},
		
		
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: white;
		// position: relative;
	}
	.ONEPIC{
		  width: 100%;
		  height: 100%;
		   margin: -12rpx 0;
		image{
			 height: 100%;
			 width: 100%;
		}
		&:nth-last-child(){
			margin-bottom: 10rpx;
		}
	}
	.TWOPIC{
		 width: 100%;
		display: flex;
		
		image{
			width: 100%;
			height: 100%;
		}
	}
	.THREEPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
			height: 100%;
			
		}
		
	}
	.FOURPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.FIVEPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.SIXPIC{
		width: 100%;
		display: flex;
		justify-content: space-between;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.body{
		padding-top: 300.33rpx;
	}
	.flex{
		display: flex;
	}
	.index_logo{
		width: 270.33rpx !important;
		height: 50rpx !important;
		margin-left: 50rpx;
	}
	
	.isScrollShow{
		float: right;
		
		
		
	}
	.isScrollShow1{
		float: left;
		margin-top: 70rpx;
		width: 65% !important;
	}
	.isScrollShow2{
		float: left;
		
	}
	.isScrollShow3{
		float: left;
		width: 70rpx;
		height: 70rpx;
		margin-top: 70rpx;
		// margin-left: 20rpx;
		margin-right: 25rpx;
		image{
			height: 100%;
			width: 100%;
		}
	}
	.page_padding{
	padding-left: 26.37rpx;
	padding-right: 26.67rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
	}
	.page_padding_left{
		padding-left:  16.67rpx;
		padding-right: 18.67rpx;
	}
	
	.navigation{
		/* display: flex; */
		background-color:#161616;
		position: fixed;
		top: 0;
		z-index: 99;
		height: 261rpx;
		width: 100%;
		.navigation_title{
			display: flex;
			padding: 30rpx 0;
			align-items: center;
			
			justify-content: space-between;
			
			image{
				width: 44rpx;
				height: 44rpx;
			}
			text{
				font-family: Source Han Sans CN;
				font-weight: 800;
				font-style: italic;
				font-size: 42.67rpx;
			
			}
			.navigation_title_padding{
				margin-top: 50rpx !important;
				padding: 0 !important;
				
				}
			.navigation_title_right{
				
				display: flex;
				align-items: center;
				
				>uni-navigator:first-child{
					margin-right: 32.67rpx;
				}
				
			}
			
		}
		.navigation_seach{
			width: 100%;
			background-color: #F5F6FA;
			border-radius: 35rpx;
			height: 66.67rpx;
			display: flex;
			align-items: center;
			color: #8F9094;
			font-size: 26.67rpx;
			padding-left: 22rpx;
			box-sizing: border-box;
			
			image{
				width: 29.33rpx;
				height: 29.33rpx;
				margin-right: 22rpx;
			}
		}
		.navigation_scroll{
			margin-top: 10rpx;
			 padding-top: 10rpx;
			 padding-bottom: 10rpx;
		    background-color: white;
			
			// padding-right: 13rpx;
		  padding-left: 24rpx;
		  padding-right: 24rpx;
			.scroll-view_H{
				white-space: nowrap;
				font-size: 26.67rpx;
				color: #484848;
				width: 100%;
				// display: flex;
				
				::-webkit-scrollbar {
					width: 0;
					height: 0;
					background-color: transparent;
				} 

				view{
					margin-left: 46.67rpx;
					display: inline-block;				
					font-weight: 600;
					padding: 12.67rpx 0;
				}
				view:first-child{
					margin-left: 0;
				}
				.scroll_active{
					font-size: 32rpx;
					border-bottom: 2.67rpx solid #000000;
				}
			}
		}
	}
	.uni-margin-wrap{
		width: 100%;
		margin-top: 45.33rpx;
		margin-bottom: 45.33rpx;
		.swiper {
			   // height: 360.33rpx;
			  width: 720rpx;
			  // height: 100%;
			.swiper-item {
				display: block;
				 // width: 720rpx;
				 height: 100%;
			
				line-height: 373.33rpx;
				text-align: center;
				color: white;
				image{
				    width: 100%;
					height: 100%;
				}
			}
			.uni-bg-red{
				background-color: red;
			}
			.uni-bg-green{
				background-color: green;
			}
			.uni-bg-blue{
				background-color: blue;
			}
		}
	}
	.grid_swiper {
		height: 380rpx;
		// margin: 0 10rpx 0 10rpx;
		
		.grid_content{
			display: flex; 
			flex-wrap: wrap;
			 
			.grid_item{
				// width: 97.33rpx;
				display: flex;
				width: 150rpx;
				height: 150rpx;
				flex-direction: column;
				 align-items: center;
				justify-content: space-between;
				color: #1B1B1B;
				font-size: 24rpx;
				// margin-right: 6rpx;
			    margin-bottom: 13.33rpx;
				font-weight: 500;
			  
				padding-right: 10rpx;
				margin-left: 25.37rpx;
				&:last-child(){
					margin-left: 0;
				}
				.grid_item_img{
					width: 97.33rpx;
					height: 97.33rpx;
					margin-bottom: 6.67rpx;
					// background-color: #8F9094;
					 
					image{
						width: 100%;
						height: 100%;
					}
				}
			}
			// .grid_item:nth-child(n+4){
			// 	margin-right: 0;
			// }
			
		}
	}
	.discount{
		width: 100%;
		height: 239.33rpx;
		margin-bottom: 72.67rpx;
	}
	
	.index_title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 32rpx;
		color: #161616;
		font-weight: bold;
		margin-bottom: 23rpx;
		margin-top: 37.37rpx;
		
		.title_right{
			display: flex;
			align-items: center;
			
			image{
				width: 22rpx;
				height: 22rpx;
				margin-left: 11.33rpx;
			}
		}
	}
	.item_img{
		 width: 100%;
		margin-left: 4rpx;
		image{
			width: 100%;
			height: 100%;
			
		}
	}
	.spike1{
		white-space: nowrap;
		width: 100%;
		padding-right:16rpx ;
		padding-left: 16rpx;
		margin-bottom: 47.67rpx;
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		} 
		
		.spike1_item{
			color: #191919;
			font-size: 26.67rpx;
			// margin-right: 16.67rpx;
			// width: 200rpx;
			// margin-left: 16rpx;
			padding-right:16rpx ;
			display: inline-block;
			font-weight: 500;
			&:last-child{
				margin-right: 37rpx;
			}
			
			.spike1_item_img{
				width: 180rpx;
				height: 180rpx;
				 background-color: #999999;
				 padding-right:16rpx ;
				image{
					width: 100%;
					height: 100%;
					
				}
			}
			// .padding_honlist2{
			// 	margin-right: 280rpx !important;
			// }
			.spike1_item_bottom{
				padding-left: 9.33rpx;
				margin-top: 7.67rpx;
				
				.spike1_item_text{
					color: #9D9D9D;
					font-size: 21.33rpx;
					text-decoration: line-through;
				}
				.spike1_item_text1{
					color: #9D9D9D;
					font-size: 21.33rpx;
				}
			}
			.spike1_item_bottom1{
				padding-left: 9.33rpx;
				margin-top: 19.33rpx;
				font-weight: bold;
				
				.spike1_item_text{
					color: #000000;
					font-size: 16rpx;
					font-weight: 400;
					margin-bottom: 20.67rpx;
					white-space: break-spaces;
					
				}
			}
			
		}
		.spike1_item:last-child{
			margin-right: 0;
		}
	}
	.hotSells1{
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		color: #000000;
		font-size: 28rpx;
		font-weight: 400;
		// margin-bottom: 149.33rpx;
		margin-bottom: 44rpx;
		
		.hotSells1_item{
			width: 340rpx;
			display: flex;
			flex-direction: column;
			
			.hotSells1_item_img{
				width: 100%;
				// // height: 266.67rpx;
				// background-color: #999999;
				margin-bottom: 5.33rpx;
				image{
					width: 100%;
				   height: 100%;
				}
			}
		}
		.hotSells2_item{
			width: 224rpx;
			display: flex;
			flex-direction: column;
			// margin-top: 49.33rpx;
			margin-top: 18.33rpx;
			.hotSells2_item_img{
				// width: 100%;
				// height: 224rpx;
				// background-color: #999999;
				margin-bottom: 5.33rpx;
				
				image{
					width: 100%;
					 height: 100%;
				}
			}
		}
	}
	.goodsthree2{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 29.33rpx;
		
		.goodsthree2_item{
			width: 242.67rpx;
			height: 204.67rpx;
			background-color: #999999;
		}
	}
	.index_title1{
		text-align: center;
		position: relative;
		font-size: 	29.33rpx;
		font-weight: bold;
		margin-top: 116rpx;
		padding-bottom: 52rpx;
		&:before{
			content: '';
			background-color: #000000;
			height: 4rpx;
			width: 53.33rpx;
			position: absolute;
			bottom: 13.33rpx;
			left: 50%;
			margin-left: -26.67rpx;
		}
	}
	.waterfall{
		background-color: #F8F7FB;
		padding:0 25.33rpx;
		box-sizing: border-box;
		padding-top: 52.67rpx;
		
		.item{
			padding: 0 16.67rpx;
			padding-bottom: 36.67rpx;
			.title{
				font-size: 25.33rpx;
				font-weight: 400;
				// margin-top: 24.67rpx;
				margin-top: 14.67rpx;
				// margin-bottom: 32.67rpx;
				
			}
			.desc{
				font-size: 32rpx;
				font-weight: 600;
			}
		}
		
	}
	.padding_left{
		margin-left: 17rpx;
	}
	.best_item{
		display: flex;
		 flex-wrap: wrap;
		flex-direction: row;
		align-items: center;
		margin: 0 10rpx 0 10rpx;
		//  width: 80vw;
		//  height:400rpx ;
		
		.best_one{
			 width: 45vw;
			 height: 400rpx;
			 margin: 10rpx;
			justify-content: center;
			align-items: center;
			background-color: #fff;
			.best_img{
				height: 360rpx;
				width: 360rpx;
				
				image{
					width: 100%;
					height: 100%;
				}
			}
			.best_text{
				line-height:40rpx ;
				text-align: center;
			}
		}
		
		
	}
	.container {
			padding: 0 30rpx;
			font-size: 14rpx;
			line-height: 24rpx;
			
		}
		.title{
			font-size: 25.33rpx;
			font-weight: 400;
			// margin-top: 24.67rpx;
			 margin-top: 10.67rpx;
			 margin-bottom: 10.67rpx;
			
		}
		.desc{
			font-size: 32rpx;
			font-weight: bold;
			margin-top: 24.67rpx;
		}
		.right,
		.left{display: inline-block; width: 49%;vertical-align: top;}
		.left{margin-right: 2%;}
		.left image,
		.right image{width: 100%;margin-bottom: 10rpx;margin-top: 20rpx;}
		.Popup{
			height: 700rpx;
			width: 400rpx;
		  
		   
		.popup_close{
			height: 50rpx;
			width: 50rpx;
			
			margin-left: 400rpx;
			// background-color: #000000;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.popup_img{
			height: 600rpx;
			width: 400rpx;
			margin-top: 10rpx;
			margin-left: 20rpx;
			color:red;
			background-color: white;
			border-radius:25rpx;
			image{
				width: 100%;
				height: 100%;
				border-radius: 25rpx;
				position: relative;
			}
			text{
				right:0;
				position: absolute;
				z-index:99;
			}
		}
		}
</style>
