<template>
	<view class="content title">
		<view class="status_bar"></view>
		<view class='navhead flextwo'>
			<view class="navheadleft">
				<view class="addimg">
					<image src="../../static/weizhi.png" mode=""></image>
				</view>
				<view class="addname">天津</view>
			</view>
			<view class="navmiddle flexone" @click="search">
				<view class="middleleft">
					<image src="../../static/search.png" mode=""></image>
				</view>
				<view class="middleenter">
					<input type="text" placeholder="请输入商品，店铺搜索" placeholder-class="enterk" />
				</view>
			</view>
			<view class="navright" @click="cartlist">
				<image src="../../static/cart.png" mode=""></image>
				<view class="cartnum">{{carttotal}}</view>
			</view>
		</view>
		<view class="homehead">
			<view class="headtopimg">
				<image src="../../static/headtop.png" mode=""></image>
			</view>
		</view>

		<view class="homebox flexone">
			<view class="homeboxitem flexfour" @click="mianfang">
				<view class="homeitemimg">
					<image src="../../static/mianfang.png" mode=""></image>
				</view>
				<view class="homename">面访用品</view>

			</view>
			<view class="homeboxitem flexfour">
				<view class="homeitemimg">
					<image src="../../static/shopcollect.png" mode=""></image>
				</view>
				<view class="homename">店铺收藏</view>
			</view>
			<view class="homeboxitem flexfour">
				<view class="homeitemimg">
					<image src="../../static/fugaicity.png" mode=""></image>
				</view>
				<view class="homename">覆盖城市</view>
			</view>
			<view class="homeboxitem flexfour" @click="jifenshop">
				<view class="homeitemimg">
					<image src="../../static/jifenshop.png" mode=""></image>
				</view>
				<view class="homename">积分商城</view>

			</view>
			<view class="homeboxitem flexfour" @click="choujiang">
				<view class="homeitemimg">
					<image src="../../static/choujiang.png" mode=""></image>
				</view>
				<view class="homename">抽奖专区</view>

			</view>
			<view class="homeboxitem flexfour" @click="miaosha">
				<view class="homeitemimg">
					<image src="../../static/miaosha.png" mode=""></image>
				</view>
				<view class="homename">秒杀专区</view>
			</view>
			<view class="homeboxitem flexfour">
				<view class="homeitemimg">
					<image src="../../static/hotline.png" mode=""></image>
				</view>
				<view class="homename">加盟热线</view>

			</view>
			<view class="homeboxitem flexfour">
				<view class="homeitemimg">
					<image src="../../static/huiyuanka.png" mode=""></image>
				</view>
				<view class="homename">会员卡</view>
			</view>

		</view>

		<view class="listbox">

			<!-- 商品列表 -->
			<view class="homeshop commnonpadding" @click="goodkind">
				<view class="homeshoptop flextwo">
					<view class="homeshopleft">面访用品</view>
					<view class="homeshopright flexone">
						<view class="homemore">更多</view>
						<view class="yourow">
							<image src="../../static/yourow.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
			<view class="homeshoplist flexone">
				<view class="homeshopitem" v-for="(item,index) in shoplist" :key="index" @click="goodtail" :data-id="item.id">
					<view class="gooditemimg">
						<image :src="item.image" mode=""></image>
						<view class="sale">已售{{item.sales}}件</view>
					</view>
					<view class="goodname hidden">{{item.name}}</view>
					<view class="saleprice">¥{{item.goods_price}}</view>
					<view class="huiyuanprice">会员价：¥{{item.vip_price}}</view>
				</view>
			</view>
		</view>
		<!-- 版本更新 -->
		<view class="register" v-if="showbanben">
			<view class="banbenwrap">
				<view class="banbenimg">
					<image src="../../static/huojian.png" mode=""></image>
				</view>
				<view class="banbenbox">
					<view class="banbentitle">发现新版本</view>
					<view class="banbox">
						<view class="banbennum">版本号:1.44</view>
						<view class="banbennum">文件大小:2.84M</view>
					</view>
					<view class="renew">更新内容：</view>
					<view class="banbox banbentwo">
						<view class="banbennum">1.优化UI，提升用户体验</view>
						<view class="banbennum">2.新增打卡签到功能</view>
					</view>

				</view>
				<view class="banbenbot flextwo">
					<view class="banbenbotleft">暂不更新</view>
					<view class="banebnbotright">立即更新</view>
				</view>
				<view class="chahao" @click="hidebanben">
					<image src="../../static/chahao.png" mode=""></image>
				</view>
			</view>

		</view>

		<!-- 签到-->
		<view class="register" v-if="jifenshow">
			<view class="jiimgbox">
				<view class="jiimg">
					<image src="../../static/ji.png" mode=""></image>
					<view class="jitext">
						<view class="jiname">+5积分</view>
						<view class="qian">每日签到</view>
						<view class="lianxu lianqianday">连续签到22天</view>
						<view class="lianxu">明天签到可获得10积分</view>
					</view>
					<view class="chahao" @click="hidejifen">
						<image src="../../static/chahao.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部导航 -->
		<view class="teacherfooter">
			<view class="teacherfootitem" @click="selnav" :data-id="1">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==1?'../../static/tieziactive.png':'../../static/tiezi.png'"></image>
				</view>
				<view class="teacherfootname " :class="footersel==1?'activename':''">首页</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="2">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==2?'../../static/nearshopactive.png':'../../static/nearshop.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==2?'activename':''">附近店铺</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="3">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==3?'../../static/luntanctive.png':'../../static/luntan.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==3?'activename':''">中面论坛</view>
			</view>
			<view class="teacherfootitem" @click="selnav" :data-id="4">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==4?'../../static/useractive.png':'../../static/user.png'"></image>
				</view>
				<view class="teacherfootname" :class="footersel==4?'activename':''">个人中心</view>
			</view>
		</view>



	</view>
</template>

<script>
	import app from "../../App.vue";
	export default {
		data() {
			return {
				showbanben: false,
				footersel: 1,
				jifenshow: false,
				keyword: '',
				order: '',
				page: 1,
				shoplist: [],
				carttotal:''
			}
		},
		onLoad() {
			this.getfoodlist();
			let token=uni.getStorageSync("token");
			if(token!=''){
				this.getcartnum()
			}
		},
		methods: {
			
			// 获取购物车气泡
			getcartnum(){
				let that = this;
				var url = 'car/bubble';
				var params = {
					
				}
				app.post(url, params).then((res) => {
					console.log(res);
					this.carttotal=res.data.data.total
					
				
				
				}).catch((err) => {
				
				})
			},
			
			// 抽奖专区
			choujiang() {
				uni.navigateTo({
					url: '/pages/homepage/drawlottery'
				})
			},
			// 购物车列表
			cartlist(){
				console.log(4843834)
				uni.navigateTo({
					url:'/pages/nearshop/cartlist'
				})
			},
			// 获取面访商品列表
			getfoodlist() {
				let that = this;
				var url = 'flour_goods/get_flour_goods';
				var params = {
					keyword: that.keyword,
					order: that.order,
					page: that.page,
					pageNum: 6
				}
				app.post(url, params).then((res) => {
					console.log(res);
					that.shoplist = res.data.data

				}).catch((err) => {

				})
			},
			// 商品详情
			goodtail(e) {
				let id = e.currentTarget.dataset.id;
				// type 1 面访商品
				uni.navigateTo({
					url: '/pages/nearshop/goodtail?id=' + id + '&type=' + 1
				})
			},



			hidebanben() {
				this.showbanben = false
			},
			hidejifen() {
				this.jifenshow = false
			},
			// 面坊用品
			mianfang() {
				uni.navigateTo({
					url: '/pages/homepage/shoplist'
				})
			},
			// 更多
			goodkind() {
				uni.navigateTo({
					url: '/pages/homepage/shoplist'
				})
			},
			// 积分商城
			jifenshop() {
				uni.navigateTo({
					url: '/pages/homepage/jifenshop'
				})
			},
			// 搜索
			search() {
				uni.navigateTo({
					url: '/pages/homepage/search'
				})
			},
			// 秒杀
			miaosha() {
				uni.navigateTo({
					url: '/pages/homepage/miaosha'
				})
			},
			// 底部导航跳转
			selnav(e) {
				console.log(e)

				let id = e.currentTarget.dataset.id;
				console.log(id)
				if (id == 1) {
					uni.navigateTo({
						url: '../homepage/homepage'
					})
				} else if (id == 2) {
					uni.navigateTo({
						url: "../nearshop/nearshop"
					})
				} else if (id == 3) {
					uni.navigateTo({
						url: "../luntan/luntan"
					})
				} else if (id == 4) {
					uni.navigateTo({
						url: "../usercenter/my"
					})
				}
			},
		}

	}
</script>

<style>
	@import url('../../base/homepage');
	   
	.content {
		padding-top: calc(var(--status-bar-height) + 88rpx);
	}
	
	.status_bar {
		background: ;
	}
	

	.lianxu {
		color: #3D444C;
		font-size: 28rpx;
		margin-top: 16rpx;
	}

	.qian {
		color: #06121F;
		font-size: 42rpx;

	}

	.lianqianday {
		margin-top: 40rpx;
	}

	.jiimg {
		width: 500rpx;
		height: 600rpx;
		font-size: 0;
		position: relative;

	}

	.jiimgbox {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
	}

	.jitext {
		position: absolute;
		top: 220rpx;
		width: 400rpx;
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.jiname {
		color: #FF9417;
		font-size: 46rpx;
	}

	.qian {
		color: #06121F;
		font-size: 42rpx;
		margin-top: 60rpx;
	}

	.listbox {
		margin-bottom: 150rpx;

	}

	.navhead {
		width: 750rpx;
		position: fixed;
		top: var(--status-bar-height);
		left: 0;
		z-index: 99
	}

	.homehead {
		margin-top: 80rpx;
	}
</style>