<template>
	<view class="body">
		<!-- 头部导航栏 -->
		<uni-nav-bar :statusBar="true" :title="Pet" color="#fff" backgroundColor="#000000" :border="false"
			:fixed="true">
			<block slot="left">
				<view class="nav_left">
					<image src="../../static/img/left_white.png" mode="" @click="back()"></image>
					<!-- <image src="../../static/img/seach.png" mode="" @click="goPage()"></image> -->
				</view>
			</block>
			<block slot="right">
				<view class="nav_right">
					<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>
			</block>
		</uni-nav-bar>
		<view v-for="(item,index) in indexDate.zones" :key="item.zone_id">

			<!-- 轮播图 -->
			<view class="uni-margin-wrap page_padding" v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
				<swiper class="swiper" circular :indicator-dots="true" :autoplay="true">
					<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id">
						<view class="swiper-item " v-if="item1.block_status=='NORMAL'"
							:style="{width:(item.zone_code=='BANNER')?item.zone_column+'rpx':'700rpx'}">
							<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" class="page_padding"
				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>
			
	<!-- HONLIST1 -->
	<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
		:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
		v-if="item.zone_code=='HONLIST1' && item.zone_status=='NORMAL'" :current="mycurrent">
			<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
				:indicator-dots="false" :circular="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item1,index1 in item.blocks" :key="item1.block_id">
						<view :class="['swiper-items',index1==mycurrent ? 'active' : '']">
							<image :src="item1.block_pic" mode=""
								:style="{width:(item.zone_code=='HONLIST1')?420+'rpx':'',height:item.zone_column+'rpx'}"
								@click="imgTo(item1)"></image>
						</view>
				</swiper-item>
			</swiper>
	</scroll-view>
	<!-- HONLIST2 -->
	<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
		:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
		v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
		<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
			:key="item1.block_id">
			<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
				<image :src="item1.block_pic" mode=""
					:style="{width:(item.zone_code=='HONLIST2')?160+'px':'',height:item.zone_column+'rpx'}"
					@click="imgTo(item1)"></image>
			</view>
		</view>
	</scroll-view>
	<!-- HONLIST3 -->
	<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
		v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'" @scroll="scrollhot">
		<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
			<view class="item_img "
				:style="{width:(item.zone_code=='HONLIST3')?+'rpx':'',height:item.zone_column +'rpx'}">
				<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
				<a :href="item1.block_link"></a>
			</view>
			<view class="spike1_item_bottom">
				<text>{{item1.block_title}}</text>
				<view class="spike1_item_text1">{{item1.block_title2}}</view>
			</view>
		</view>
	</scroll-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_left" 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_left" 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')?400+'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_left" 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:400+'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 class="index_title1" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">PRODUCTS FRO YOU
			</view>

			<view class="waterfall" v-if="item.zone_code=='LIST1' && item.zone_status=='NORMAL'">
				<custom-waterfalls-flow :value="item.blocks" imageKey="block_pic" @click="imgTo(item1)">
					<template v-slot:default="item1">
						<view class="item" @click="imgTo(item1)">
							<view class="title">{{item1.block_title}} {{item1.block_title3}}</view>
							<view class="desc">{{item1.block_title2}}</view>
							<!-- <view class="desc">{{item1.block_title3}}</view> -->
						</view>
					</template>
				</custom-waterfalls-flow>
			</view>


		</view>
		<!-- <view class="index_title1" v-if="catList.length>0">BEST</view>
		<view class="best_item">
			<view class="best_one"  v-for="(item,index) in catList"  :key="index">
				<view  class="best_img" @click="goDetails(item.id)">
					<image :src="item.goods_img" mode=""></image>
				</view>
				<view class="best_text">
					<view class="desc">US${{item.is_promote==0? item.shop_price :item.promote_price}}</view>
					
				</view>
			</view>
		</view> -->
	</view>

</template>

<script>
	import {
		defaultRequest,
		defaultRequest4
	} from '../../api/index.js'

	export default {
		data() {
			return {
				mycurrent: 0,
				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'
				},
				catList: [],
				Pet: ''
			}
		},
		onPullDownRefresh() {

			setTimeout(() => {
				// this.getIndex()
				this.getList()
				uni.stopPullDownRefresh()

			}, 800)
		},

		onLoad() {
			let that = this;
			let s = 0;
			let time = setInterval(() => {
				uni.getNetworkType({
					success: (res) => {
						console.log(res.networkType, s);
						if (res.networkType == 'none') {
							uni.showToast({
								icon: 'none',
								title: 'Please connect to the network',
								duration: 3000,
							})
						} else if (res.networkType !== 'none') {
							that.typee = 2;
							clearInterval(time);
							
						}
					}
				})
				s++;
			}, 1000);
			this.getIndex()
			// console.info(this.curEndTime)
			this.getList()
			this.getMes()
			this.getInfo()
			this.getCatList()
			uni.showTabBar()


		},
		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: {
			handlechange(e) {
				this.mycurrent = e.detail.current
			},
			scrollhot(e) {
				// console.log(e)
				// let i = e.scrollLeft/200
				// this.hot_index = i
				// console.log('滚动了',this.hot_index)	
				// this.start(this.hot_index)
				// this.end(this.hot_index)
			},
			// 获取页数据配置
			getIndex() {
				let data = {
					_action: 'getpagedata',
					pagecode: 'HOME-SALE'
				}
				defaultRequest(data).then(res => {
					this.Pet = res.data.page_name
					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')
							}

						})
					}
				})
				defaultRequest({
					_action: 'getpagedata',
					pagecode: 'HOME-SALE'
				}).then(res => {
					// console.log(res)
					if (res.error == 0) {
						this.scrollList = res.data.zones
					}
				})
			},
			back() {
				uni.switchTab({
					url: './index'
				})
			},
			goDetails(id) {
				uni.navigateTo({
					url: '/pages/productDetails/index?goodid=' + id
				})
			},
			getMes() {
				let data = {
					_action: 'getpagedata',
					pagecode: '006-PERSONALCENTERPAGE'

				}
				// let data2 ={ _action:'getpagedata',pagecode:'HOME-SALE'}
				// defaultRequest(data2).then(res =>{
				// 	console.log(res,'中间按钮')
				// 	if(res.error ==0){
				// 		this.indexDate = res.data
				// 	}
				// })
				defaultRequest(data).then(res => {
					// console.log(res,'个人页面配置信息')
					res.data.zones.map(item => {
						if (item.zone_code == 'XIAOXI') {
							let list = item
							this.mesNum = list.blocks.length

						}
					})
				})
			},
			getList() {
				// this.sum = uni.getStorageSync('cartSum')

				let data = {
					_action: 'getcartgoods'
				}
				defaultRequest4(data).then(res => {
					console.info(res)
					if (res.error == 0) {
						this.sum = res.data.goods_list.length
						uni.setStorageSync('cartSum', this.sum)
					}
				})

				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) {
				defaultRequest4(this.catQuery).then(res => {
					// console.info(res,'最好的')
					if (res.error == 0) {
						if (res.data) {
							this.catList = res.data
						}
					}
				})
			},
			goPage() {
				uni.navigateTo({
					url: './search',
				});
			},
			gotoSkillpage(e) {
				uni.navigateTo({
					// url:"../productDetails/index?goods_id="+e.id
					url: './flashSale'
				})
			},
			gotoProductlist(item, url) {
				console.log(item, '///')
				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.scroll_active = index
				this.info = []
				let data = {
					_action: 'getpagedata',
					pagecode: item.zone_code
				}

				defaultRequest(data).then(res => {
					console.log(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')
							}
							if (item.zone_code == 'HONLIST1') {
								item.blocks.map(item1 => {
									// console.log('HONLIST2',item1)
								})
							}
							if (item.zone_code == 'HONLIST2') {
								item.blocks.map(item1 => {
									// console.log('HONLIST2',item1)
								})
							}
							if (item.zone_code == 'HONLIST3') {
								item.blocks.map(item1 => {
									// console.log('HONLIST3',item1)
								})
							}
						})
					}
				})

			},
			gridSwiper(e) {
				this.current = e.detail.current	
			},
			//轮播图跳转 // 热卖跳转
			imgTo(item) {
				console.log(item, 'item')
				// let goodid = item.block_link;
				// let goodid = item.block_link.split('?')[1];
				const i = item.block_link.indexOf('?')
				let goodid = item.block_link.substring(i);
				if (goodid.includes('goodslist')) {
					uni.navigateTo({
						url: '../category/productList'+goodid
					})
					console.log(gooid);
					console.log(11111)
				} else if (goodid.includes('?id=0')) {
					uni.navigateTo({
						url: '../index/pickUpCentre'
					})
					console.log(goodid);
					console.log(33333);
				} else if (goodid.includes('goodid')) {
						uni.navigateTo({
							url: '../productDetails/index' + goodid + '&img=1'
					})
					console.log(goodid);
					console.log(item.block_link);
					console.log(44444444)
				} else {
					uni.navigateTo({
						url: '../productDetails/index'+goodid+'&img=1'
					})
					console.log(goodid);
					console.log(item.block_link);
					console.log(22222)
				}

			},
			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: #000;
		// position: relative;
	}

	.ONEPIC {
		width: 100%;
		height: 100%;
		margin: -12rpx 0;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.TWOPIC {
		width: 100%;
		display: flex;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.THREEPIC {
		width: 100%;
		display: flex;
		margin: 0;
		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: 30.33rpx;
	}

	.uni-navbar {
		font-size: 32rpx;
		font-weight: bold;
	}

	.nav_left {
		image {
			width: 36rpx;
			height: 36rpx;

			&:last-child {
				margin-left: 36.67rpx;
			}
		}
	}

	.nav_right {
		padding-right: 30rpx;

		image {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.flex {
		display: flex;
	}

	.index_logo {
		width: 270.33rpx !important;
		height: 50rpx !important;
		margin-left: 50rpx;
	}

	.isScrollShow {
		float: right;
	}

	.isScrollShow1 {
		float: left;
		margin-top: 20rpx;
		width: 60% !important;
	}

	.isScrollShow2 {
		float: left;
	}

	.isScrollShow3 {
		float: left;
		width: 70rpx;
		height: 70rpx;
		margin-top: 21rpx;
		margin-left: 20rpx;
		margin-right: 25rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	.page_padding {
		padding: 0 26.67rpx;
		box-sizing: border-box;
	}

	.page_padding_left {
		padding-left: 24.67rpx;
	}
	.page_margin {
		margin-left: 26.37rpx;
		margin-right: 26.67rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
		background-color: #000000;
	}
	.page_padding_left1 {
		padding-left: 5.67rpx;
		padding-right: 5.67rpx;
		// padding-top: 90rpx;
	}

	// .navigation1{

	// 	position: fixed;
	// 	background-color: white;
	// 	z-index: 99;
	// 	margin-top: -100rpx;
	// 	width: 100%;

	// 	.navigation_scroll{
	// 		// padding-top: 10rpx;
	// 		padding-bottom: 14rpx;

	// 		padding-left: 14rpx;
	// 		.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: 28.67rpx 0;
	// 			}
	// 			view:first-child{
	// 				margin-left: 0;
	// 			}
	// 			.scroll_active{
	// 				font-size: 32rpx;
	// 				border-bottom: 2.67rpx solid #000000;
	// 			}
	// 		}
	// 	}

	// }
	.navigation {
		/* display: flex; */
		background-color: #000000;
		position: fixed;
		top: 0;
		z-index: 99;
		// background: white;
		// height: 210rpx;
		width: 100%;

		.navigation_title {
			display: flex;
			background-color: #000000;
			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_right {
				display: flex;
				align-items: center;

				>uni-navigator:first-child {
					margin-right: 32.67rpx;
				}
			}

		}

		.navigation_seach {
			width: 100%;
			background-color: #F5F6FA;
			border-radius: 6.67rpx;
			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: 20rpx;
			padding-top: 6rpx;
			padding-bottom: 14rpx;
			background-color: white;
			padding-left: 20rpx;

			.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: 28.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-bottom: 35.33rpx;

		.swiper {

			// height: 320.33rpx;
			// width: 720rpx;
			.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;
			}

			.uni-bg-black {
				background-color: #000000;
			}
		}
	}

	.grid_swiper {
		height: 380rpx;


		.grid_content {
			display: flex;
			// justify-content:space-around;
			flex-wrap: wrap;
			// padding: 0 2rpx;
			// width: 80vw;


			.grid_item {
				// width: 97.33rpx;
				display: flex;
				width: 15vw;
				padding: 0 7vw 0 1vw;
				flex-direction: column;
				align-items: center;
				// flex-direction: flex-start;
				color: #1B1B1B;
				font-size: 24rpx;
				margin-bottom: 53.33rpx;
				// margin-right: 84rpx;
				font-weight: 500;

				.grid_item_img {
					width: 100%;
					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: 40rpx;

		.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%;
			object-fit: cover;
		}
	}

	.spike1 {
		white-space: nowrap;
		width: 100%;
		padding-bottom: 47.67rpx;
		background: #000;

		::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		}

		.spike1_item {
			color: #191919;
			font-size: 26.67rpx;
			margin-right: 16.67rpx;
			// width: 200rpx;
			display: inline-block;
			font-weight: 500;

			.spike1_item_img {
				width: 200rpx;
				height: 200rpx;
				background-color: #999999;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.padding_honlist2 {
				margin-right: 280rpx !important;
			}

			.spike1_item_bottom {
				padding-left: 9.33rpx;
				margin-top: 22.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;

		.hotSells1_item {
			width: 340rpx;
			display: flex;
			flex-direction: column;

			.hotSells1_item_img {
				width: 100%;
				// // height: 266.67rpx;
				// background-color: #999999;
				margin-bottom: 23.33rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.hotSells2_item {
			width: 224rpx;
			display: flex;
			flex-direction: column;
			margin-top: 49.33rpx;

			.hotSells2_item_img {
				// width: 100%;
				// height: 224rpx;
				// background-color: #999999;
				margin-bottom: 25.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: 29.33rpx;
				font-weight: 400;
				margin-top: 24.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;
			}
		}
	}
	
	.spike1 {
		white-space: nowrap;
		width: 100%;
		padding-right: 16rpx;
		padding-left: 16rpx;
		padding-bottom: 47.67rpx;
	
		::-webkit-scrollbar {
			width: 0;
			height: 0;
			background-color: transparent;
		}
	
		.spike1_item {
			// color: #191919;
			color: #fff;
			font-size: 26.67rpx;
			// margin-right: 16.67rpx;
			// width: 200rpx;
			// margin-left: 16rpx;
			padding-right: 20rpx;
			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;
					color: #fff;
					font-size: 21.33rpx;
					text-decoration: line-through;
				}
	
				.spike1_item_text1 {
					// color: #9D9D9D;
					color: #fff;
					font-size: 21.33rpx;
				}
			}
	
			.spike1_item_bottom1 {
				padding-left: 9.33rpx;
				margin-top: 19.33rpx;
				font-weight: bold;
	
				.spike1_item_text {
					// color: #000000;
					color: #fff;
					font-size: 16rpx;
					font-weight: 400;
					margin-bottom: 20.67rpx;
					white-space: break-spaces;
	
				}
			}
	
		}
	
		.spike1_item:last-child {
			margin-right: 0;
		}
	}
	.swiper-items {
		border-radius: 30rpx;
		overflow: hidden;
		// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
		// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
		// width: 450rpx;
		height: 100%;
		transform: scale(0.8);
		transition: all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;
	
		&.active {
			transform: scale(1);
		}
	
		/deep/ .uni-swiper-dots {
			display: none !important;
		}
		uni-swiper .uni-swiper-dots {
			display: none !important;
			z-index: -1 !important;
		}
		/deep/ .uni-swiper .uni-swiper-dots-horizontal {
			display: none !important;
		}
		uni-swiper .uni-swiper-dot {
			z-index: -1 !important;
			display: none !important;
		}
		
	}
	@keyframes scaleDraw {
		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
	
		0% {
	
			transform: scale(1);
			/*开始为原始大小*/
	
		}
	
		25% {
	
			transform: scale(1.1);
			/*放大1.1倍*/
	
		}
	
		50% {
	
			transform: scale(1);
	
		}
	
		75% {
	
			transform: scale(1.1);
	
		}
	
	}
	
	.uni-margin-wrap {
		width: 100%;
		height: 100%;
		// margin-top: 45.33rpx;
		// margin-top: 10rpx;
		margin-bottom: 45.33rpx;
	
		.swiper {
	
			// height: 650.33rpx;
			// width: 720rpx;
			// height: 100%;
			/deep/ .uni-swiper {
				height: auto;
			}
	
			.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;
			}
		}
	}
	
</style>
