<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">{{provincename}}</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" v-if="carttotal!=0">{{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" @click="collectshop">
				<view class="homeitemimg">
					<image src="../../static/shopcollect.png" mode=""></image>
				</view>
				<view class="homename">店铺收藏</view>
			</view>
			<view class="homeboxitem flexfour" @click="gocityfugai">
				<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" @click="huiyuanka">
				<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="huiyuanpricek">会员价：¥{{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>
		<!-- <tabBar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tabBar> -->

		<!-- 底部导航 -->
		<view class="teacherfooter">
			<view class="teacherfootitem" @click="selnav" :data-id="1">
				<view class="teacherfootitemtop shou">
					<image :src="footersel==1?'../../static/indexactive.png':'../../static/index.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";
	import tabBar from '../../components/tabvue/tabvue.vue'
	// Vue.component('tab-bar', tabBar)
	export default {
		components:{
				tabBar
			},
		data() {
			
			return {
				showbanben: false,
				footersel: 1,
				jifenshow: false,
				keyword: '',
				order: '',
				page: 1,
				shoplist: [],
				carttotal:0,
				provincename:'',
				currentTabIndex:0
			}
		},
		onLoad() {
			this.getfoodlist();
			  // uni.setStorageSync("token","")
			let token=uni.getStorageSync("token");
			if(token!=''){
				this.getcartnum()
			}
			
		},
		methods: {
			tabClick(){
				
			},
			// 获取签到信息
			getqiandaoinfo(){
				let that = this;
				var url = 'sign/index';
				var params = {
				
				}
				console.log(params)
				app.post(url, params).then((res) => {
					console.log(res);
					
				}).catch((err) => {
					
				})
			},
			// 签到
			qiandao(){
				let that = this;
				var url = 'sign/sign';
				var params = {
				
				}
				console.log(params)
				app.post(url, params).then((res) => {
					console.log(res);
					
				}).catch((err) => {
					
				})
			},
			
			getlocation() {
				let that=this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						uni.setStorageSync("longitude",res.longitude);
						uni.setStorageSync("latitude",res.latitude)
						var point = new plus.maps.Point(res.longitude, res.latitude);
						plus.maps.Map.reverseGeocode(
							point, {},
							function(event) {
								console.log(event)
								var address = event.address; // 转换后的地理位置
								var point = event.coord; // 转换后的坐标信息
								var coordType = event.coordType; // 转换后的坐标系类型
								console.log(address, 'address');
								var reg = /.+?(省|市|自治区|自治州|县|区)/g;
								console.log(address.match(reg));
								var addressname=address.match(reg);
								console.log(addressname);
								
								if(uni.getStorageSync("provincename")==''){
									that.provincename=addressname[0];
									uni.setStorageSync("provincename",that.provincename)
								}else{
									that.provincename=uni.getStorageSync("provincename")
								}
								
								console.log(that.provincename);
								that.changeinfo()
								// that.getprovinceid()
								
								// _this.addressList = address.match(reg).toString().split(",");
								// _this.address = _this.addressList[1];
								// console.log(_this.addressList[0]);
								// console.log(_this.addressList[1]);
								// console.log(_this.addressList[2]);
			
							},
							function(e) {}
						);
					}
				});
			},
			// 修改个人信息
			changeinfo(){
				let that = this;
				var url = 'member/update_user';
				var params = {
					avatar:'',
					nickname:'',
					longitude:uni.getStorageSync("longitude"),
					latitude:uni.getStorageSync("latitude")
				}
				console.log(params)
				app.post(url, params).then((res) => {
					console.log(res);
					this.carttotal=res.data.data.total
				}).catch((err) => {
					
				})
			},
			// 获取购物车气泡
			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) => {
				
				})
			},
			// 店铺收藏
			collectshop(){
				uni.navigateTo({
					url:"/pages/homepage/collectshop"
				})
			},
			
			// 抽奖专区
			choujiang() {
				uni.navigateTo({
					url: '/pages/homepage/drawlottery'
				})
			},
			// 购物车列表
			cartlist(){
				let token=uni.getStorageSync("token");
				if(token==''){
					uni.redirectTo({
						url:'/pages/login/loginindex?type=1'
					})
				}else{
					uni.navigateTo({
						url:'/pages/nearshop/cartlist'
					})
				}
				
			},
			// 会员卡
			huiyuanka(){
				uni.navigateTo({
					url:'/pages/usercenter/usercenter'
				})
			},
			
			// 覆盖城市
			gocityfugai(){
				uni.navigateTo({
					url:'/pages/homepage/map'
				})
			},
			// 获取面访商品列表
			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"
					})
				}
			},
		},
		onShow(){
			this.getlocation();
			this.getqiandaoinfo()
		}

	}
</script>

<style>
	@import url('../../base/homepage');
	.middleenter{
		color:#BDC4CE;
		font-size: 24rpx;
		height:60rpx;
		line-height: 60rpx;
	}
	   
	.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>