<script>
	import {
		defaultRequest,
		defaultRequest2,
		defaultRequest4
	} from '../../api/index.js'
	import {
		tarbar
	} from '../../tarbar/index.vue'
	const app = getApp();

	export default {
		data() {
			return {
				typee: '',
				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,
				currentAttr: 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'
					gid: ''
				},
				bestlist: [],
				// 初始化左右盒子
				leftList: [],
				rightList: [],
				// 初始化左右盒子高度
				leftH: 0,
				rightH: 0,
				isbest: 0,
				popImg: '',
				countdownTime: 10,
				countdownTime2: 8,
				popUrl: '',
				myMes: {
					_action: 'getmessagelist',
					type: 1,
					// importance:'',
					// label:'',
					page_index: 1,
					page_size: 100
				},
				Swiper_H: 826,
				Swiper_Hb: 0,
				open_img: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				hotheight: 0,
				num: 0,
				bootom: 0,
				hot_index: 0,
				clientX: '',
				clientY: '',
				isCart: false,
				goodsDate: {
					comment_summary: [{
						comment_summary: '',
						commentlabel: ""
					}],
					gallery_list: [{
						content: ''
					}],

				},
				query: {
					_action: 'getgoodsdetail',
					goods_id: ''
				},
				// 添加到购物车请求参数
				cartQuery: {
					_action: 'addtocart',
					goods_id: '',
					goods_parent_id: 0,
					goods_number: 1,
					goods_attr_id: '',
					goods_is_package: 0
				},
				//选择规格的数组
				goods_attr_list: [],
				tarbar: [{
						src: '../../static/icon/home4.png',
						name: 'Home',
						url: '../index/index'
					},
					{
						src: '../../static/img/Category.png',
						name: 'Category',
						url: '../category/index'
					},
					{
						src: '../../static/img/min.png',
						url: '../index/index2',
						name: ''
					},
					{
						src: '../../static/img/Cart.png',
						name: 'Cart',
						url: '../shippingCart/index'
					},
					{
						src: '../../static/img/Account.png',
						name: 'Account',
						url: '../account/index'
					},
				],
				list2: [{
						src: '../../static/icon/home4.png'
					},
					{
						src: '../../static/img/Category1.png'
					},
					{
						src: ''
					},
					{
						src: '../../static/img/cart1.png'
					},
					{
						src: '../../static/img/Account1.png'
					}
				],
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.getList()
				uni.stopPullDownRefresh()

			}, 2000)
		},
		// onReady() {
		// 轮询判断
		// typee = 2 有网络
		//判断是否有网络(尝试解决IOS白屏)
		// let that = this;
		// let s = 0;
		// let time = setInterval(()=>{
		// 	console.log('6666')
		// 	uni.getNetworkType({
		// 		success:(res)=>{
		// 			console.log(res.networkType,s);
		// 			if(res.networkType !== 'none'){
		// 				that.typee =  2;
		// 				clearInterval(time);
		// 				console.log('清楚网络..')
		// 			}
		// 		}
		// 	})
		// 	s++;
		// },1000);
		/* uni.getNetworkType({
			success: function(res) {
				console.log(res.networkType);
				//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
				setTimeout(function() {
					if (res.networkType === "none") {
						that.typee = 1;
						console.log("当前无网络", that.typee);
						uni.showToast({
							title: '网络不佳,请重新打开........',
							duration: 20000
						});
					} else {
						that.typee = 2
						console.log("有网络", that.typee);
						uni.showToast({
							title: '网络不佳,请重新打开........',
							duration: 2000
						});
					}
				}, 3000)
			}
		}); */
		// },
		onLoad() {
			let that = this;
			let s = 0;
			// if (res.networkType == 'none') {
			// 	that.typee = 1;
			// 	uni.showToast({
			// 		title: 'Please connect to the network',
			// 		icon: 'exception',
			// 		duration: 850
			// 	});
			// } 
			let time = setInterval(() => {
				uni.getNetworkType({
					success: (res) => {
						console.log(res.networkType, s);
						if (res.networkType !== 'none') {
							that.typee = 2;
							clearInterval(time);
							let home = 'HOME'
							this.getIndex(home)
							this.isLogin = uni.getStorageSync('isLogin')
							// //////console.info(this.curEndTime)
							this.getList()
							this.getMes()
							this.getPullMes()
							this.getInfo()
							this.checkNetwork()
							if (this.countdownTime2 != 0) {
								uni.hideTabBar()
							} else if (this.countdownTime2 == 0 || !this.popImg) {
								//uni.showTabBar()
								uni.setTabBarStyle({
									backgroundColor: "#fff",
									borderStyle: "black",
									// selectedColor: "#999",
									// color: "#999",
								});
							}
						}
					}
				})
				s++;
			}, 5000);
			
		},

		mounted() {
			this.getimgheight()
			this.getimgheight1()
			this.getimgheight2()
			this.checkNetwork()
			console.log(this.open_img)
			if (this.open_img) {
				setTimeout(() => {
					this.getCountdownTime()
				}, 2000)
			} else if (!this.open_img) {
				this.countdownTime2 = 0
			}
		},


		created() {
			this.getPullMes()
			this.getimgheight()
			this.getimgheight2()
			this.checkNetwork()
		},
		onShow() {
			this.isLogin = uni.getStorageSync('isLogin')
			// console.log(this.isLogin)
			uni.hideTabBar()
			this.checkNetwork()
			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
			},


		},
		watch: {},
		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: {
			checkNetwork(){
				uni.getNetworkType({
					complete:function(res){
						// console.log(res.networkType)
						if(res.networkType=='none'){
							setTimeout(()=>{
								uni.showToast({
									icon:'none',
									title:'Please connect to the network',
									duration:3000,
								})
							},200) 
							// return false
						}
					}
				});
			},
			handlechange(e) {
				this.mycurrent = e.detail.current
			},
			change(e) {
				this.index = e
				let tarbar = this.tarbar
				// uni.showTabBar()
				// for(let i =0; i<this.tarbar.length;i++){
				//  if(e==i){
				// 	 this.tarbar[e].src = this.list2[e].src
				//  }else{
				// 	this.tarbar = tarbar
				// 	this.tarbar[i].src = tarbar[i].src
				//  }
				// }
				if (e !== 2) {
					uni.switchTab({
						url: this.tarbar[e].url
					})
				} else {
					uni.navigateTo({
						url: this.tarbar[e].url
					})
				}
			},
			open() {
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close()
				uni.setTabBarStyle({
					backgroundColor: "#fff",
					borderStyle: "black",
					// selectedColor: "#999",
					// color: "#999",
				});

			},
			openClose() {
				// console.log(11)
				this.countdownTime2 = 0
				//uni.showTabBar()
				uni.setTabBarStyle({
					backgroundColor: "#fff",
					borderStyle: "black",
					// selectedColor: "#999",
					// color: "#999",
				});
				uni.switchTab({
					url: '../index/index'
				})
				//uni.showTabBar()
			},
			onReachBottom(e) {
				// console.log(111)
				this.bootom = 1
			},
			getimgheight1(item) {
				// const that = this
				var height = 0
				// 获取图片宽高
				uni.getImageInfo({
					src: item,
					success: (image) => {

						// this.Swiper_H = 0
						height = image.height
						this.hotheight = height
						// 计算图片渲染高度
						let showH = (50 * image.height) / image.width
						// console.log(Swiper_H)	
					}
				})
				return this.hotheight
			},
			//获取广告
			getPullMes() {
				let data = {
					_action: 'getpagedata',
					pagecode: '001-STARTPAGE'
				}
				defaultRequest(data).then(res => {
					////console.log('1',res)
					let img
					let url
					if (res.error == 0) {
						// console.log(res.data.zones)
						if (res.data.zones) {
							res.data.zones.map(item => {
								if (item.zone_code == "KAIPIN") {

									if (item.blocks) {
										img = item.blocks
										url = item.blocks[0].block_link
										this.open_img = img
										console.log(this.open_img.length, '0000')
									}
								}
							});
						} else {
							this.open_img = []
							this.countdownTime2 = 0
						}

						// this.popUrl = url
					}
				})
				let data2 = {
					_action: 'getpagedata',
					pagecode: 'HOMEPOPUPADS'
				}
				defaultRequest(data2).then(res => {
					////console.log('2',res)
					if (res.error == 0 && res.data.zones) {
						res.data.zones.map(item => {
							if (item.zone_code == 'HOMEPOPUP') {
								this.popImg = item.zone_icon
								this.popUrl = item.zone_more_link
								this.open()
								// console.log(this.popImg,item.zone_code)
							}
						})
					}


				})
				let data3 = {
					_action: 'get_splash_ad',
					appcode: 'DOPE+',
					VERS: '1.0.0'
				}
				defaultRequest(data3).then(res => {
					////console.log(res)
				})
			},
			//5秒倒计时
			getCountdownTime() {
				uni.hideTabBar();
				uni.setTabBarStyle({
					backgroundColor: "#ccc",
					borderStyle: "black",
				});
				// this.countdownTime = 10
				// let timer = setInterval(() => {
				// 	this.countdownTime--;
				// 	if (this.countdownTime < 1) {
				// 		clearInterval(timer)
				// 		this.countdownTime = 0
				// 	}
				// }, 1000)
				let timer2 = setInterval(() => {
					// uni.hideTabBar();
					this.countdownTime2--;

					console.log(this.countdownTime2)
					if (this.countdownTime2 < 0) {
						clearInterval(timer2)
						this.countdownTime2 = 0
					}

					if (this.countdownTime2 == 0) {
						//uni.showTabBar()
						uni.setTabBarStyle({
							backgroundColor: "#fff",
							borderStyle: "black",
							// selectedColor: "#999",
							// color: "#999",
						});
						clearInterval(timer2)
					}
				}, 1000)


			},
			//gaogaoye 跳转
			popImgto() {
				const i = this.popUrl.indexOf('?')
				const url = this.popUrl.substring(i)
				////console.log(url)
				if (this.popUrl.includes('dope.dope://?goodslist=1')) {

					////console.log(url)
					uni.navigateTo({
						url: '/pages/category/productList' + url + '&tag=1'
					})
				} else {
					uni.navigateTo({
						url: '../productDetails/index' + url + '&img=1'
					})
				}

			},




			// 获取首页数据配置
			getIndex(code) {

				let data = {
					_action: 'getpagedata',
					pagecode: ''
				}
				data.pagecode = code
				defaultRequest(data).then(res => {

					if (res.error == 0) {
						this.indexDate = res.data
						console.log(this.indexDate, '首页配置')
						this.len = 0
						let height = 0
						this.indexDate.zones.map(item => {
							item.blocks.map(item1 => {
								// console.log(item.zone_code, item + '11111111111111')
								uni.getImageInfo({
									src: item1.block_pic,
									success: (image) => {
										// console.log(image)
										// let showH = (500 * image.height) / image.width
										let showH = (image.height) / 2
										height = image.height
										item1.height = showH
										// item1.image = image
										// console.log(height)
									}
								})


							})
							if (item.zone_code == 'ICON') {
								item.content = ''
								this.info.push(item)
								this.len = item.blocks.length

								// this.len+= this.info.blocks.length
								//console.log(this.info,'info')
							}
							if (item.zone_code == 'BANNER') {
								item.blocks.map(item1 => {
									this.getimgheight(item1.block_pic)
									// console.log(this.Swiper_H)
								})
							}
							if (item.zone_code == 'BANNER1') {
								item.blocks.map(item1 => {
									this.getimgheight2(item1.block_pic)
									// console.log(this.Swiper_H)
								})
							}
							if (item.zone_code == 'HONLIST3') {
								item.blocks.map(item1 => {
									// console.log('HONLIST3',item1)
								})
							}
							if (item.zone_code == 'HONLIST2') {
								item.blocks.map(item1 => {
									// console.log('HONLIST2',item1)
								})
							}
							if (this.info.length > 1) {
								for (let i = 0; i < this.info.length; i++) {
									if (this.info[i].blocks.length > this.len) {
										this.len = this.info[i].blocks.length
									}
								}
							}
							if (item.zone_code == 'LIST1') {
								console.log(item.zone_more_link)
								const i = item.zone_more_link.indexOf('gid=')
								// console.log(i)
								const ids = item.zone_more_link.substring(i + 4, item.zone_more_link
									.length)
								// console.log(ids)
								// this.bestlist.push(item.blocks)
								// //////console.log(this.bestlist,'精品')
								this.isbest = 1
								this.catQuery.gid = ''
								this.catQuery.gid = ids
								this.getCatList()
								item.blocks.map(item1 => {
									this.bestlist.push(item1)

								})
								console.log(this.bestlist, '精品')
							}

						})
					}
				})
				defaultRequest({
					_action: 'getpagedata',
					pagecode: 'HOMECLASS'
				}).then(res => {
					// //////console.log(res)
					if (res.error == 0) {
						this.scrollList = res.data.zones
					}
				})

				// 获取tarbar中间
				let data2 = {
					_action: 'getpagedata',
					pagecode: 'HOMESALEICON '
				}
				defaultRequest(data2).then(res => {
					console.log(res)
					let url
					if (res.error == 0) {
						if (res.data.page_code == 'HOMESALEICON') {
							let src =
								'https://www.dopeplus.com/images/mapp_customized/202211/1667961215280331818.png'
							if (src == res.data.zones[0].blocks[0].block_pic) {
								this.tarbar[2].src = '../../static/img/min.png'
							} else {
								src = res.data.zones[0].blocks[0].block_pic
								// this.tabar[2].src=src
								this.tarbar[2].src = res.data.zones[0].blocks[0].block_pic
								uni.setStorageSync('midButton', src)
							}
						}
					}
				});
			},
			// 获取商品详情数据
			getDate(item) {
				uni.showLoading({
					title: 'loading'
				})
				setTimeout(() => {
					uni.hideLoading()
					this.isCart = true
					uni.hideTabBar()
				}, 1500)
				console.log(item)

				if (item.goodid) {
					this.query.goods_id = item.goodid
					this.cartQuery.goods_id = item.goodid
				} else if (item.block_link) {
					const i = item.block_link.indexOf('=')
					this.query.goods_id = item.block_link.substring(i + 1, item.block_link.length)
					this.cartQuery.goods_id = item.block_link.substring(i + 1, item.block_link.length)
				}
				console.log(this.query.goods_id)
				this.info = []
				this.goods_attr_list = []

				defaultRequest(this.query).then(res => {
					if (res.error == 0) {
						console.log(res.data)
						this.goodsDate = res.data
						this.shop_price = this.goodsDate.shop_price
						this.goodsDate.gallery_list.map(item => {
							item.content = ''
							this.info.push(item.img_url)

						})

						if (this.goodsDate.attr_list) {
							console.log(this.goodsDate.attr_list)
							this.Is_attr = this.goodsDate.attr_list.length
							if (this.Is_attr > 0) {
								let Size_list
								let Attr_list


								this.goodsDate.attr_list.map(item => {

									// if(item.attr_name){
									// 	this.sizenum=item.goods_attrs.length
									// }
									// if(item.attr_name=="Color"){
									// 	this.colorNum=item.goods_attrs.length
									// 	console.log(this.colorNum)
									// 	Attr_list = item.goods_attrs
									// 	let i = 0
									// 	Attr_list.map( item =>{
									// 		 this.Attr_list  +=item.attr_value + '、'
									// 		  i++
									// 	 })
									// 	 this.Attr_list= this.Attr_list.substring(0, this.Attr_list.length-1)
									// 	 console.log(i)
									// 	 this.max = i
									// }
									// else if(item.attr_name=="Size"){
									// 	Size_list = item.goods_attrs
									// 	console.log(this.sizenum)
									// 	Size_list.map( item =>{
									// 		 this.Size_list  +=item.attr_value + ' '
									// 	 })
									// 	  this.Size_list= this.Size_list.substring(0, this.Size_list.length-1)
									// }
									let data = {
										name: item.attr_name,
										goods_attr_id: '',
										attr_id: item.attr_id,
										list: item.goods_attrs
									}
									this.goods_attr_list.push(data)
									console.log(this.goods_attr_list)
									let list = []

									this.goods_attr_list.map(item => {
										item.list.map(item1 => {
											if (!item1.attr_img) {
												this.tag = 1

											}

										})
									})
									// console.log(list)
									// this.noImgtype = list
								})
							}
						} else {
							this.goods_attr_list = []
							this.Is_attr = 0
						}

						// this.catQuery.cat=res.data.cat_id
					}
				})
			},
			CloseCart() {
				this.isCart = false
				//uni.showTabBar()
			},
			// 选择规格
			selectAttr(attr_id, goods_attr_id, index1, attr_price) {
				this.currentAttr = index1
				let sum = this.goodsDate.shop_price
				if (attr_price) {
					sum = parseInt(sum) + parseInt(attr_price)
					console.log(sum)

				}
				this.shop_price = sum
				let data = {
					attr_id: attr_id,
					goods_attr_id: goods_attr_id
				}
				if (this.goods_attr_list.length == 0) {
					this.goods_attr_list.push(data)
				} else {
					// 判断是否有新的规格加入
					let isNew = false
					for (let i in this.goods_attr_list) {
						let item = this.goods_attr_list[i]
						if (item.attr_id == attr_id) {
							if (item.goods_attr_id == goods_attr_id) {
								this.goods_attr_list[i].goods_attr_id = ''
							} else {
								this.goods_attr_list[i].goods_attr_id = goods_attr_id
							}
							isNew = false
							break
						} else {
							isNew = true
						}
					}
					if (isNew) {
						this.goods_attr_list.splice(index, 0, data)
					}
				}
			},
			// 添加到购物车
			addCart() {
				if (this.Is_attr > 0) {
					let goods_attr_id = ''
					this.goods_attr_list.map(item => {
						if (item.goods_attr_id != '') {
							goods_attr_id += item.goods_attr_id + ','
						}

					})
					let isall = 1
					this.goods_attr_list.map(item => {
						//console.log(item.goods_attr_id)
						if (item.goods_attr_id == '') {
							isall = 0
						}
					})

					if (isall == 0) {
						uni.showToast({
							title: 'Please select the product specification',
							icon: 'none',
							duration: 2000
						})
						return
					}

					this.cartQuery.goods_attr_id = goods_attr_id.substring(0, goods_attr_id.lastIndexOf(','));
				}
				console.log(this.cartQuery)
				if (this.isLogin == 1) {
					defaultRequest2(this.cartQuery).then(res => {
						if (res.error == 0) {
							this.isCart = false

							this.cartQuery.goods_attr_id = ''
							if (res.data[0].success) {
								setTimeout(() => {
									uni.showToast({
										title: 'Successfully added',
										icon: 'none',
										duration: 2000
									})
								}, 500)

							}
							//uni.showTabBar()
							this.getList()
						}
					})
				} else if (this.isLogin == 0) {
					uni.navigateTo({
						url: '../login/index'
					})
				}

			},
			clickImg(index, e) {
				console.log(e)
				let list = []
				if (e) {
					if (typeof(e) === 'object') {

						for (let i in e) {

							console.log(e[i].afile)
							list.push(e[i].afile)
							console.log(list)
						}
					} else {
						e.map(item => {
							list.push(item.attr_img)
						})
					}


					wx.previewImage({
						urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: index, // 当前显示图片的http链接，默认是第一个
						indicator: 'number',
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				} else {
					wx.previewImage({
						urls: this.info, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
						current: index, // 当前显示图片的http链接，默认是第一个
						indicator: 'number',
						success: function(res) {},
						fail: function(res) {},
						complete: function(res) {},
					})
				}
			},
			Iswish() {
				const i = uni.getStorageSync('isLogin')
				if (i == 1) {
					uni.navigateTo({
						url: '../account/wishlist'
					})
				} else {
					uni.navigateTo({
						url: '../login/index'
					})
				}
			},
			getMes() {

				defaultRequest(this.myMes).then(res => {
					// console.log(res.data.message_list)
					let i = 0
					if (res.error == 0) {
						let list = res.data.message_list
						list.map(item => {
							// console.log(item)
							if (item.unread == 1) {
								i++
							}
						})
						this.mesNum = i
						console.log(this.mesNum)
					}

					// ////console.log(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)
					}
				})
			},

			getimgheight(item) {
				const that = this

				// 获取图片宽高
				uni.getImageInfo({
					src: item,
					success: (image) => {
						// //console.log(image)
						// this.Swiper_H = 0
						this.Swiper_H = image.height
						// 计算图片渲染高度
						let showH = (50 * image.height) / image.width
						// //console.log(showH)	
						return this.Swiper_H
					}
				})

			},
			getimgheight2(item) {
				const that = this

				// 获取图片宽高
				uni.getImageInfo({
					src: item,
					success: (image) => {
						// //console.log(image)
						// this.Swiper_H = 0
						this.Swiper_Hb = image.height
						// 计算图片渲染高度
						let showH = (50 * image.height) / image.width
						// //console.log(showH)	
						return this.Swiper_Hb
					}
				})

			},

			// 获取的推荐商品数据
			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 => {
									//console.log(item)
									this.bestlist.push({
										block_pic: item.goods_img,
										block_title3: 'US$' + item.shop_price,
										block_name: item.short_name,
										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
											}
										}
									})
								})
							}
						}
					})
				}
			},


			gotoSkillpage(e) {
				uni.navigateTo({
					// url:"../productDetails/index?goods_id="+e.id
					url: './flashSale'
				})
			},

			scrollChange(item, index) {
				this.info = []
				// this.isbest = 0
				this.leftList = []
				this.rightList = []
				this.bestlist = []
				////console.log(this.bestlist)
				this.scroll_active = index
				let code = item.zone_code
				this.getIndex(code)
				// this.getCatList()
			},
			start(e) {
				// console.log(e)
				this.hot_index = e
				return this.hot_index
				// this.clientX=e.changedTouches[0].clientX;             
				// this.clientY=e.changedTouches[0].clientY;
			},

			end(e) {
				// console.log(e)
				this.hot_index = e
				return this.hot_index
				// const subX=e.changedTouches[0].clientX-this.clientX;
				// const subY=e.changedTouches[0].clientY - this.clientY;
				// if(subY>50 || subY<-50){
				//     console.log('上下滑')
				// }else{
				//     if(subX>50){
				//         console.log('右滑')
				//     }else if(subX<-50){
				//         console.log('左滑')
				//     }else{
				//         console.log('无效')
				//     }
				// }
			},
			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)
			},

			gridSwiper(e) {
				this.current = e.detail.current
			},
			//轮播图跳转 // 热卖跳转
			imgTo(item) {
				//console.log(item,'item')
				////console.log(item.block_link.includes('dope.youhui'))
				let goodid

				if (item.goodid) {

					uni.navigateTo({
						url: '../productDetails/index?goodid=' + item.goodid
					})
				} else if (item.block_link) {
					const i = item.block_link.indexOf('?')
					goodid = item.block_link.substring(i);
					//////console.log(item.block_link)
					if (item.block_link.includes('goodslist')) {
						uni.navigateTo({
							url: '../category/productList' + goodid + '&tag=1'
						})
					} else if (item.block_link.includes('goodid')) {
						uni.navigateTo({
							url: '../productDetails/index' + goodid + '&img=1'
						})
					} else if (item.block_link.includes('dope.youhui')) {
						uni.navigateTo({
							url: './pickUpCentre'
						})
					}
				}
				this.countdownTime2 = 0
			},
			Hotgoto(item1) {
				const i = item1[0].block_link.indexOf('?')
				////console.log(item1)
				const url = item1[0].block_link.substring(i)
				if (url.includes('goodslist')) {
					uni.navigateTo({
						url: '../category/productList' + url + '&tag=1'
					})
				} else {
					uni.navigateTo({
						url: '../productDetails/index' + url + '&img=1'
					})
				}
			}
		},
		onPageScroll(res) {
			// console.log(res)
			if (res.scrollTop > 40) {
				this.isScrollShow = true
			} else if (res.scrollTop < 40) {
				this.isScrollShow = false

			}
		},



	}
</script>
<template>

	<view v-if="typee == 2" class="body" :class="isScrollShow?'body_pad':''">
		<!-- 进入页面部分 -->
		<view v-show="!open_img || countdownTime2==0">
			<!-- 头部导航栏 -->
			<view class="navigation ">
				<view class="status_bar"></view>
				<view style="background-color:black">
					<view class="page_margin uni-bg-black">
						<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>
				<!-- <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="navigation_scroll " :class="isScrollShow?'isScrollShow2':'' ">
				<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="true">
					<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 style="max-width: 100%" v-for="(item,index) in indexDate.zones" :key="item.zone_id">
				<!-- 轮播图 -->
				<view class="uni-margin-wrap page_padding_left1" style="padding-left: 0; padding-right: 0;"
					v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true"
						style="height: 455px; display: block !important;" :style="{ height:Swiper_H +'rpx'}">
						<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_colum+'rpx':'',heigth:'auto'}">
								<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 " :style="{height:(len > 4?380+'rpx':190+'rpx')}" @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="imgTo(item2)"></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>
				<!-- 轮播图 BANNER1 -->
				<view class="uni-margin-wrap page_padding_left1" style="padding-left: 0; padding-right: 0;"
					v-if="item.zone_code=='BANNER1' && item.zone_status=='NORMAL'">
					<swiper class="swiper" circular :indicator-dots="true" :autoplay="true"
						style="display: block !important;" :style="{ height:Swiper_Hb +'rpx'}">
						<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=='BANNER1')?item.zone_colum+'rpx':'',heigth:'auto'}">
								<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
							</view>
						</swiper-item>
					</swiper>
				</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="#FFF" background-color="rgb(178 34 52)" />
							<image src="../../static/icon/right_white.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/icon/right_white.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" @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',index1==mycurrent ? 'active' : '']">
							<!-- class="item_img"> -->
							<image :src="item1.block_pic" mode=""
								:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
								@click="imgTo(item1)"></image>
						</view>
					</view>
					<!-- 轮播图 -->
					<!-- <view v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
						<swiper v-for="(item1,index1) in item.blocks" :key="item1.block_id" style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"   :indicator-dots="true"  :circular="true" :interval="3000" :duration="1000">
							<swiper-item v-for="i,index in 10" :key="i">
								<view :class="['swiper-items',index==mycurrent ? 'active' : '']">
									<image :src="item1.block_pic" mode=""
												:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
												@click="imgTo(itesm1)"></image>
					<!-- <view> -->
					<!-- previous-margin指的是当前图片的左边框距离屏幕最左边的距离 -->
					<!-- <swiper class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
							v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" style="height: 600rpx;"
							previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
							:indicator-dots="true" :circular="true" :interval="3000" :duration="1000">
							<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
					<!-- v-for="(item1,index1) in item.blocks" :key="item1.block_id"> -->
					<!--   v-for="i,index in 10" :key="i" -->
					<!-- <view :class="['swiper-items',index==mycurrent ? 'active' : '']">
									<img :src="item1.block_pic" mode=""
										:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
										@click="imgTo(item1)">
								</view>
							</swiper-item>
						</swiper>
					</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'" @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')?280+'rpx':'',height:item.zone_column +'rpx'}">
							<image :src="item1.block_pic" 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>
				<!-- HOT SELLS 1 -->
				<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
					v-if="item.zone_code=='HONLIST1' && item.zone_status=='NORMAL'" @scroll="scrollhot">
					<view class="spike1_item" style="padding-right: 0;" v-for="(item1,index1) in item.blocks"
						:key="item1.block_id" @touchstart="start(index1)" @touchend="end(index1)">
						<view class="item_img "
							:style="{width:(item.zone_code=='HONLIST1')?350+'rpx':'',height:item.zone_column +'rpx'}"
							:class="hot_index == index1?'hotmaxW':'hotmaxmin'">
							<image :src="item1.block_pic" 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.length>0">
				<view class="left">
					<view v-for="(item,index) in leftList" :key="index">
						<image :src="item.block_pic" alt="" mode="widthFix" @click="imgTo(item)"
							:class="item.block_title==0&&!item.block_title2&&!item.block_name&&!item.block_title3?'img_border':''">
						</image>
						<view class="item" v-if="item.block_title!=0">
							<view class="title" v-if="item.block_title!=0">{{item.block_title}}</view>
							<view class="title">{{item.block_title2}}</view>
							<view class="title1" v-if="item.block_name">{{item.block_name}}</view>
							<view class="desc">
								<view>{{item.block_title3}}</view>
								<view class="desc_img">
									<image src="../../static/icon/cat_white.png" @click="getDate(item)"></image>
								</view>
							</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)"
							:class="item1.block_title==0&&!item1.block_title2&&!item1.block_name&&!item1.block_title3?'img_border':''">
						</image>
						<view class="item" v-if="item1.block_title!=0">
							<view class="title" v-if="item1.block_title!=0">{{item1.block_title}}</view>
							<view class="title">{{item1.block_title2}}</view>
							<view class="title1" v-if="item1.block_name">{{item1.block_name}}</view>
							<view class="desc">
								<view>{{item1.block_title3}}</view>
								<view class="desc_img">
									<image src="../../static/icon/cat_white.png" @click="getDate(item1)"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- //购物车 -->
			<view class="addCard" v-show="isCart">
				<image src="/static/img/close1.png" mode="" class="addCard_close" @click="CloseCart()"></image>
				<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
					<image :src="item.img_url" mode="" class="addCard_scroll img_border"
						v-for="(item,index) in goodsDate.gallery_list" :key="index" @click="clickImg(index)"></image>
				</scroll-view>
				<scroll-view class="addCard_body" scroll-y="true">
					<view>{{goodsDate.goods_name}} </view>
					<view class="addCard_price">US${{goodsDate.is_promote==0? shop_price :goodsDate.promote_price}}
					</view>
					<view v-for="(item,index) in goods_attr_list" :key="item.attr_id">
						<view>{{item.name}}</view>
						<view class="color_select variations_select_size">
							<view class="color_select_item" v-for="(item1,index1) in item.list" :key="item1.attr_value"
								:class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''"
								@click="selectAttr(item.attr_id,item1.goods_attr_id,index1,item1.attr_price)">
								<view class="color_select_item_zoom">
									<image src="/static/icon/big2.png" @click="clickImg(index1)" mode=""
										v-if="item1.attr_img!=''"></image>
								</view>
								<image :src="item1.attr_img" mode="" v-if="item1.attr_img!=''"></image>
								<view class="color_select_item_bottom" v-if="item1.attr_img!=''">【{{ item1.attr_value}}】
								</view>
								<view class="color_select_item_bottom" v-if="!item1.attr_img">{{ item1.attr_value}}
								</view>
							</view>
						</view>
					</view>
					<view class="quantity">
						<text>Quantity</text>
						<uni-number-box background="#FFFFFF" v-model="cartQuery.goods_number" :min="1"></uni-number-box>
					</view>
				</scroll-view>
				<button @click="addCart">ADD TO CART</button>
			</view>
			<view class="mask" @click="isCart=false" v-show="isCart"></view>
			<!-- //弹窗广告 -->
			<view v-show="popImg">
				<!-- <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">
							<!-- <view class="popup_text"><text>{{countdownTime }}s跳过</text></view> -->
							<image :src="popImg" mode=" " @click="popImgto"></image>
						</view>
					</view>
					<!-- <button @click="close">关闭</button> -->
				</uni-popup>
			</view>
		</view>
		<!-- 启动页广告 -->
		<view class="open_bg" ref="imgRef" v-show="countdownTime2>0?true:false">
			<!-- <view class="open_text"><text @click="countdownTime2 =0">{{ countdownTime2 }}s skip</text></view> -->
			<swiper class="open_bgimg" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
				:interval="interval" :duration="duration">
				<swiper-item v-for="(item,index) in open_img" :key="item.block_pic">
					<view class="open_text">
						<text style="padding: 100px 15px;" @click="openClose()"
							v-if="countdownTime2 >0||countdownTime2 ==0">{{ countdownTime2 }}sskip</text>
					</view>
					<image :src="item.block_pic" mode="" @click="imgTo(item)"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="bootom_last" v-if="bootom == 1">-THE END-</view>
		<view class="tarbar">
			<view @click="change(index)" v-for="(item,index) in tarbar" :key="item.name"
				:class="index==2?'img_m':'tarbar_img'" :style="{color:index==0?'#000':''}">
				<image :src="item.src"></image>
				<view>{{ item.name}}</view>
			</view>
		</view>
	</view>
</template>


<style>
	page {
		height: 100vh;
	}
</style>
<style lang="scss" scoped>
	.swiper-items {
		border-radius: 30rpx;
		overflow: hidden;
		// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
		// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
		// width: 450rpx;
		height: 85%;
		transform: scale(0.8);
		transition: all 0.5s ease;
		text-align: center;
		transition: all 0.5s ease-in-out;

		&.active {
			transform: scale(1);
		}

		.uni-swiper-dots {
			display: none;
		}
	}

	page {
		background-color: white;
		position: relative;
	}

	.display_none {
		display: none;
	}

	@keyframes scaleDraw {
		/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/

		0% {

			transform: scale(1);
			/*开始为原始大小*/

		}

		25% {

			transform: scale(1.1);
			/*放大1.1倍*/

		}

		50% {

			transform: scale(1);

		}

		75% {

			transform: scale(1.1);

		}

	}

	.bootom_last {
		// height: 300rpx;
		height: 200rpx;
		width: 100%;
		color: #fff;
		background-color: #000;
		margin-bottom: 200rpx;
		font-size: 25rpx;
		padding-bottom: 40rpx;
		line-height: 300rpx;
		text-align: center;
		line-height: 115rpx;
	}

	.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: 190.33rpx;
		background-color: #000000;

	}

	.body_pad {
		padding-top: 147.33rpx;
		background-color: #000000;
	}

	.status_bar {
		background-color: #000000;
	}

	.flex {
		display: flex;
	}

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

	.isScrollShow {
		float: right;



	}

	.isScrollShow1 {
		float: left;
		margin-top: 30rpx;

		width: 65% !important;
	}

	.isScrollShow2 {
		float: left;
		position: fixed;
		background-color: #000;
		z-index: 99;
		background: rgba(0, 0, 0, 0.7) !important;
		// margin-top: -150rpx;
	}

	.isScrollShow3 {
		float: left;
		width: 60rpx;
		height: 64rpx;
		margin-top: 30rpx;

		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_margin {
		margin-left: 26.37rpx;
		margin-right: 26.67rpx;
		margin-bottom: 10rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
		background-color: #000000;
	}

	.page_padding_left {
		padding-left: 10.67rpx;
		padding-right: 10.67rpx;
	}

	.page_padding_left1 {
		padding-left: 5.67rpx;
		padding-right: 5.67rpx;
		// padding-top: 90rpx;
	}

	.navigation {
		/* display: flex; */
		background-color: #000000;
		position: fixed;
		top: 0;
		z-index: 100;
		// opacity: 0.8;
		// height: 260rpx;
		width: 100%;

		.navigation_title {
			display: flex;
			padding: 16rpx 0;
			align-items: center;
			// background-color:#000000;
			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: 25rpx !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: 62rpx;
			display: flex;
			align-items: center;
			color: #8F9094;
			// color:#fff;
			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: -80rpx;
		// padding-top: 10rpx;
		padding-top: 15px;
		// margin: 20rpx 0 !important;
		// position: fixed;
		padding-bottom: 10rpx;
		background-color: #000;
		z-index: 99;
		background: rgba(0, 0, 0, 0.7) !important;
		// padding-right: 13rpx;
		padding-left: 24rpx;
		padding-right: 24rpx;

		.scroll-view_H {
			white-space: nowrap;
			justify-content: space-between;
			font-size: 26.67rpx;
			// color: #484848;
			color: #fff;
			width: 100%;

			// display: flex;
			// height: 100rpx;
			// ::-webkit-scrollbar {
			// 	width: 0;
			// 	height: 0;
			// 	background-color: #000;
			// } 
			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: 34rpx;
				font-weight: bold;
				border-bottom: 2.67rpx solid rgba(255, 255, 255, .5);
			}
		}
	}

	.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;
			}
		}
	}

	.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;
				color: #fff;
				font-size: 24rpx;
				// margin-right: 6rpx;
				margin-bottom: 13.33rpx;
				font-weight: 500;
				background-color: #000000;
				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;

					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;
		color: #fff;
		font-weight: bold;
		margin-bottom: 23rpx;
		margin-top: 37.37rpx;

		.title_right {
			display: flex;
			align-items: center;
			color: white;

			image {
				width: 22rpx;
				height: 22rpx;
				margin-left: 11.33rpx;
			}
		}
	}

	.item_img {
		width: 100%;
		margin-left: 4rpx;
		border-radius: 10rpx;

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

		}
	}

	.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;
			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;
		}
	}

	.hotSells1 {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		// color: #000000;
		color: #fff;
		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;
			// background-color: #ffaa7f;
			padding-bottom: 36.67rpx;

			.title {
				font-size: 25.33rpx;
				font-weight: 400;
				// margin-top: 24.67rpx;
				margin-top: 14.67rpx;
				// margin-bottom: 32.67rpx;
			}

			.title1 {
				font-size: 20.33rpx;
				line-height: 40rpx;
				height: 80rpx;
				overflow: hidden;
				// font-weight: 400;
				// margin-top: 24.67rpx;
				margin-top: 14.67rpx;
				margin-bottom: 14.67rpx;

			}

			.desc {
				font-size: 32rpx;
				height: 50rpx !important;
				font-weight: bold;
				width: 200rpx;
				background-color: #ffaaff !important;
				display: flex;
				justify-content: space-between;
				padding-right: 10rpx;

				.desc_img {
					height: 40rpx;
					width: 40rpx;
					background-color: #55ff7f;

				}
			}
		}

	}

	.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;
		line-height: 34rpx;
		font-size: 26rpx;
		background-color: #000;
		color: white;

		// padding-bottom: 50rpx;
		.uni-view {}

	}

	.item {
		background-color: #1e1e1e;
		padding: 12rpx 20rpx;
		margin-top: -10rpx;
		border-bottom-left-radius: 10rpx;
		border-bottom-right-radius: 10rpx;
	}

	.title {
		font-size: 25.33rpx;
		line-height: 34rpx;
		// font-weight: 200;
		// margin-top: 24.67rpx;
		color: #fff;
		// margin-bottom: 10.67rpx;
	}

	.title1 {
		font-size: 26rpx;
		line-height: 32rpx;
		height: 64rpx;

		overflow: hidden;
		// margin-top: 4.67rpx;
		// margin-top: 4.67rpx;
		margin-bottom: 10.67rpx;
		// padding-left: 6rpx;
		padding-right: 6rpx;

	}

	.desc {
		font-size: 36rpx;
		line-height: 34rpx;
		font-weight: bold;
		margin-bottom: 10.67rpx;
		margin-top: 20.67rpx;
		height: 50rpx;
		font-weight: bold;
		width: 40vw;
		text-align: start;
		// line-height: 50rpx;
		// padding-top: 10rpx;
		align-items: center;
		display: flex;
		justify-content: space-between;
		padding-right: 10rpx;

		.desc_img {
			height: 40rpx;
			width: 40rpx;

			// background-color: #ccc;
			image {
				// margin-top: -10rpx;
				height: 100%;
				width: 100%;
				margin: 0 auto;
			}

		}

		// padding-left: 6rpx;
		padding-right: 6rpx;
		color: #fff;
	}

	.right,
	.left {
		display: inline-block;
		width: 49%;
		vertical-align: top;
	}

	.left {
		margin-right: 2%;
	}

	.left image,
	.right image {
		width: 100%;
		// margin-bottom: 8rpx;
		margin-top: 16rpx;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		// border-top: #8F9094 1rpx solid; 
		// border-right: #8F9094 1rpx solid;
		// border-left: #8F9094 1rpx solid;
		// border: #8F9094 0.5rpx solid;
	}

	.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;
			background-size: 100%;
			padding: 0 !important;

			background-repeat: no-repeat;
			border-radius: 25rpx;
			position: relative;

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

			}

			.popup_text {
				right: 0;
				height: 30rpx;
				width: 60rpx;
				font-size: 20rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;
				background-color: #ccc;
				background-color: rgba(0, 0, 0, 0.4);
				line-height: 30rpx;
				opacity: 0.5;
				color: white;
				text-align: center;
				position: absolute;
				z-index: 99;
				border-radius: 5rpx;
			}
		}
	}

	.open_bg {
		background-color: #000000;
		height: 100vh;
		width: 100%;
		top: 0;
		color: white;
		z-index: 9999999;
		position: fixed;
		// padding-top: 50rpx;
		overflow: hidden;
		background-size: cover;
		background-repeat: no-repeat;
		background-attachment: fixed;

		.open_text {
			right: 10%;
			top: 8%;
			height: 50rpx;
			width: 120rpx;
			font-size: 28rpx;
			margin-right: 10rpx;
			margin-top: 10rpx;
			background-color: #ececec;
			background-color: rgba(0, 0, 0, 0.5);
			line-height: 50rpx;
			opacity: 0.5;
			text-align: center;
			position: absolute;
			z-index: 10000;
			border-radius: 5rpx;
		}

		.open_bgimg {
			top: 0;
			height: 100vh;
			width: 100%;
			position: relative;
			color: white;

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



		}

	}

	button {
		width: 100%;
		height: 73.33rpx;
		line-height: 73.33rpx;
		background-color: #191919;
		color: white;
		font-weight: bold;
		font-size: 26.67rpx;
	}

	// .BANNER1 {
	// 	width: 100%;
	// 	height: 100%;
	// 	margin: -6px 0;
	// 	image {
	// 		width: 100%;
	// 	}
	// }
</style>
