<template>
	<view class="wrap">
		<!-- 头部区域 -->
		<view class="header">
		    <view class="header_city" @click="toAddress">
		      <view class="header_city_title">{{allData.district}}</view>
		      <text class="iconfont header_bottom"></text>
		    </view>
		    <view class="inp">
		      <input type="text" @input="getInp" @confirm="toMainList" placeholder="输入商家或者商品名" class="find" placeholder-class="find_place" ></input>
		      <view class="find_box" @click="toMainList"><view class="iconfont find_font"></view></view>
		    </view>
		    <!-- <navigator open-type="redirect" hover-class="none" url="../dealer_tabbar/dealer_tabbar" class="cut">
		      <text>切换至\n经销商</text>
		    </navigator> -->
		    <view class="cut">
		      <text>切换至\n经销商</text>
		    </view>
		</view>
		<!-- banner区域 -->
		<view class="banner">
			<swiper @change="change" autoplay="true" duration="1000" style="height:100%;" class="swiper-box"circular="true">
				<swiper-item v-for="item,index in banner_list" :key="index">
					<image :src="item"></image>
				</swiper-item>
			</swiper>
		    <view class="dots clear">
		        <view v-for="item,index in banner_list" :key="index" :class="{dot:true, swiperCurrent:index == swiperCurrent}"></view>
		    </view>
		</view>
		<!-- 公告区域 -->
		<view class="notice">
		    <!-- 左边公告 -->
		    <view class="notice_left">
		      <view style="height:68rpx;overflow:hidden;">
		        <view class="iconfont notice_font_act"></view>
		        <swiper autoplay="true" style="width:calc(100% - 72rpx);height:68rpx; float:left;" vertical="true" circular="true">
		            <swiper-item v-for="item,index in allData.notice" :key="index" @touchmove="catchTouchMove">
						<view class="notice_font">恭贺 <text class="notice_font_text">{{item.title}}</text> 入驻成功</view>
					</swiper-item>
		        </swiper>
		      </view>
		    </view>
			<navigator v-if="isEnter == 0" url="../../freeEnter/index/index" class="notice_right" hover-class="none">免费入驻</navigator>
		</view>
		<!-- 宫格导航 一级分类 -->
		<view class="navigator_big">
		    <view v-for="item,index in allData.serviceCategoryOne" :key="index" :data-value="item.name" class="navigator_big_item" :data-id="item.id" @tap="navigator">
		        <image :src="url+item.img"></image>
		        <view class="navigator_big_font">{{item.name}}</view>
		    </view>
		</view>
		<!-- 宫格导航  二级分类 -->
		<view class="navigator_small clear">
		    <view class="navigator_small_top">
		        <navigator v-for="item,index in allData.serviceCategoryTwo" :key="index" url="" class="navigator_small_top_item" hover-class="none" :data-id="item.id" :data-pid = "item.pId" >
					<view class="top_img_view"><image :src="url + item.img"></image></view>
					<view class="navigator_small_top_item_text">{{item.name}}</view>
		        </navigator>
		        <navigator class="navigator_small_top_item" url="../../pages/facilitator/all_serve/all_class/all_class" hover-class="none">
					<view class="top_img_view"><image src="https://wx.fujinyangche.com/nvrnetwork/images/more.png"></image></view>
		            <view class="navigator_small_top_item_text">更多服务</view>
		        </navigator>
		    </view>
		</view>
		<!-- 空白区域 -->
		<view class="back"></view>
		<!-- 车主服务 -->
		<view class="car_owner">
		    <view class="car_owner_top clear">
		      <view class="car_owner_top_p1">车主服务</view>
		    </view>
		    <view class="car_owner_bottom">
		        <scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; display: flex">
		            <view v-for="item,index in allData.serviceArticle" :key="index" class="scroll-view-item bc1" :data-id="item.id" @tap="toCarDetail">
						<image :src="url + item.articleImage"></image>
						<view class="car_title">{{item.articleTitle}}</view>
						<view class="car_company">
						  <view class="iconfont car_icon"></view>
						  {{item.browsingVolume}}人浏览
						</view>
						<!-- 蒙版 -->
						<view class="small_mask"></view>
		            </view>
		        </scroll-view>
		    </view>
		    <navigator class="car_more" hover-class="none" url="../../pages/facilitator/car_owner/car_owner_list/car_owner_list">更多服务<view style="display:inline-block;font-family:'宋体'">>></view></navigator>
		</view>
		<!-- 广告banner区域 -->
		<view class="ad">
		    <swiper class="swiper" previous-margin="34rpx"  next-margin="20rpx" bindchange="swiperChange" style="width:100%;height:100%;">  
		        <swiper-item v-for="item,index in ad_list" :key="index" :data-item-id="index" @tap='clickChange'>  
					<view class='li'>
						<image class='li1' :src="item" @tap="toFreeEnter"></image>
					</view> 
		        </swiper-item>  
		    </swiper>
		</view>
		<!-- 商家列表 -->
		<view class="nav">
		    <view class="nav_ul">
		        <scroll-view scroll-x="true" style="width: 100%; white-space: nowrap; display: flex;height:48rpx;">
					<view v-for="item,index in allData.serviceCategoryOnes" :key="index" :class="['nav_nav',num == index?'active':'']" @tap="switchTab(item,index)">{{item.name}}
						<!-- 下划线 -->
						<view class="nav_line"></view>
					</view>
		        </scroll-view>
		    </view>
		    <view style="box-sizing:border-box;padding-bottom:100rpx;">
				<view class="back1"></view>
				<shopItem :msg="allData.provide"></shopItem>
		    </view>
		</view>
	</view>
		
</template>

<script>
	import api from "../../../../api.js";
	import shopItem from "@/components/shop-item/shop-item";
	let app = getApp();
	export default {
		data() {
			return {
				url:app.globalData.url,
				allData:null,
				district:'普陀区',
				banner_list:[
				    'https://wx.fujinyangche.com/nvrnetwork/images/banner_con.jpg',
					'https://wx.fujinyangche.com/nvrnetwork/images/banner_con.jpg',
				],//banner图
				swiperCurrent:0, //轮播图下标
				isEnter:0,//是否入驻
				ad_list:[
				      'https://wx.fujinyangche.com/nvrnetwork/images/middle_banner.jpg',
				      'https://wx.fujinyangche.com/nvrnetwork/images/middle_banner.jpg',
				      'https://wx.fujinyangche.com/nvrnetwork/images/middle_banner.jpg',
				      'https://wx.fujinyangche.com/nvrnetwork/images/middle_banner.jpg',
				], //腰部广告
				num:0,//商家列表导航默认显示
			};
		},
		components:{
			shopItem,
		},
		mounted(){
			uni.getLocation({
				success: (res) => {
					let data = {
						latitude:res.latitude,
						longitude:res.longitude,
						token: app.globalData.token,//自己id
					}
					api.getIndex(data).then((res)=>{
						console.log(res);
						this.allData = res.data.data;
					})
				}
			})
		},
		methods:{
			//轮播图指示图标切换
			change: function (e) {
				this.swiperCurrent = e.detail.current;
			},
			//商家列表导航栏点击
			switchTab(item,index){
				this.num = index
			}
		}
	}
</script>

<style>
.clear:after{
  content: "";
  display: block;
  clear: both;
}
.header{
  width:100%;
  height:70rpx;
}
.header_city_title{
  width:94rpx;
  display: inline-block;
  color:rgba(34,34,34,1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.header_city{
  font-size:28rpx;
  line-height: 70rpx;
  color:rgba(34,34,34,1);
  margin-left: 28rpx;
  font-weight: 500;
  float: left;
}
.header_bottom{
  vertical-align:top;
  display: inline-block;
  line-height: 70rpx;
  font-size:20rpx;
  color:#999999;
}
.inp{
  width:424rpx;
  height:70rpx;
  padding-left: 50rpx;
  box-sizing: border-box;
  background-color: rgba(245,245,245,1);
  border-radius:18px;
  float:left;
  margin-left: 28rpx;
  position: relative
}
.find{
  width:100%;
  height:70rpx;
  border-radius:18px;
  box-sizing: border-box;
}
.find_box{
  width:70rpx;
  height:70rpx;
  position: absolute;
  top:0;
  right:0;
  text-align: center;
  line-height: 70rpx;
  z-index:200
}
.find_font{
  font-size:28rpx;
  color:#979797;
}
.find_place{
  /* text-align: center; */
  font-size:28rpx;
  color:rgba(153,153,153,1);
}
.cut{
  font-size: 20rpx;
  color:rgba(231,120,23,1);
  font-weight: 500;
  width:102rpx;
  height:70rpx;
  float:left;
  text-align: center;
  line-height: 26rpx;
  padding-top:9rpx;
  box-sizing: border-box;
  margin-left: 30rpx;
  border-radius: 36rpx;
  background:rgba(231,120,23,0.1);
}

/* banner区域样式 */
.banner{
  width:100%;
  height:230rpx;
  margin-top:36rpx;
  padding:0 30rpx;
  box-sizing: border-box;
  position: relative;
}
.banner image{
  display: block;
  width:100%;
  height:100%;
  border-radius: 6rpx;
}
.dots{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom:20rpx;
}
.dot{
  width:20rpx;
  height:4rpx;
  background-color: rgba(0,0,0,0.2);
  margin-right:20rpx;
  float:left;
}
.dots .swiperCurrent{
  background-color: #ffffff;
}
.dot:last-child{
  margin-right: 0;
}

/* 公告区域样式 */
.notice{
  width:100%;
  height:68rpx;
  padding:0 30rpx 0 32rpx;
  box-sizing: border-box;
  margin-top:32rpx;
}
.notice_left{
  width:542rpx;
  height:68rpx;
  line-height: 68rpx;
  background-color: rgba(245,245,245,1);
  border-radius: 4rpx 0 0 4rpx;
  float:left;
}
.notice_font{
  font-size: 26rpx;
  color:#666666;
}
.notice_font_text{
  color:#E77817
}
.notice_font_act{
  float:left;
  background: linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent; 
  margin:0 20rpx 0 20rpx;
}
.notice_right{
  width:146rpx;
  height:68rpx;
  background: #E77817;
  border-radius:0px 4rpx 4rpx 0px;
  line-height: 68rpx;
  text-align: center;
  font-size: 28rpx;
  color:#ffffff;
  float:left;
}
/* 宫格导航 一级分类 */
.navigator_big{
  width:100%;
  height:118rpx;
  margin-top:40rpx;
  box-sizing: border-box;
  display: flex;
}
.navigator_big_item{
  flex:1;
  height:118rpx;
  text-align: center;
}
.navigator_big_item image{
  display: block;
  width:116rpx;
  height:80rpx;
  margin:0 auto;
}
.navigator_big_font{
  font-size:24rpx;
  color:#222222;
  /* margin-top:12rpx; */
  font-weight: bold;
}
/* 宫格导航 二级分类 */
.navigator_small{
  width:100%;
  box-sizing: border-box;
  margin-top:30rpx;
  text-align: center;
}
.navigator_small_top,.navigator_small_bom{
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.navigator_small_top_item{
  width:20%;
  text-align: center;
  margin-bottom:30rpx;
}
.top_img_view{
  width:68rpx;
  height:68rpx;
  margin:0 auto;
}
.top_img_view image{
  display: block;
  width:100%;
  height:100%;
}
.navigator_small_top_item_text{
  font-size:24rpx;
  color:#222222;
  margin-top:12rpx;
}
.navigator_small_bom{
  margin-top:30rpx;
}
.back{
  width:100%;
  height:20rpx;
  background-color: rgba(249,249,249,1);
}
.back1{
  width:100%;
  height:10rpx;
  background-color: rgba(249,249,249,1);
}
/* 车主服务 */
.car_owner{
  width:100%;
  overflow: hidden;
}
.car_owner_top_p1{
  font-size:36rpx;
  color:#2A2A2A;
  font-weight: bold;
  font-family:PingFangSC-Medium;
  margin:36rpx 0 0 30rpx;
  float:left;
}
.car_owner_top_p2{
  font-size: 26rpx;
  color:#999999;
  float:right;
  margin:42rpx 28rpx 0 0;
}
.car_owner_top_p3{
  display: inline-block;
  font-size: 26rpx;
  color:#222222;
}
.car_owner_bottom{
  height:150rpx;
  margin-top:18rpx;
  padding-left: 30rpx;
}
.scroll-view-item{
  width:250rpx;
  height:150rpx;
  margin-right: 20rpx;
  display: inline-block;
  position: relative;
}
.scroll-view-item image{
  display: block;
  width:100%;
  height:150rpx;
  border-radius: 6rpx;
  position: absolute;
  top:0;
  left:0;
  z-index: -200;
}
.scroll-view-item:last-child{
  margin-right: 0;
}
.car_title{
  width:90%;
  display:-webkit-box;
  overflow:hidden;
  white-space:normal;
  text-overflow:ellipsis;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  font-size: 24rpx;
  color:#ffffff;
  position: absolute;
  top:12rpx;
  left:18rpx;
  font-weight: 400;
  z-index:100;
}
.car_icon{
  font-size: 20rpx;
  display: inline-block;
  color:#E77817;
}
.car_company{
  font-size: 20rpx;
  color:#F6F6F6;
  position: absolute;
  top:86rpx;
  left:18rpx;
  z-index: 100;
}
.car_more{
  font-size: 24rpx;
  color:#E77817;
  margin:32rpx 0 34rpx 0;
  text-align: center;
}
/* 广告区域 */
.ad{
  width: 100%;
  height: 190rpx;
  background-color: #F9F9F9;
  padding: 20rpx 0;
  box-sizing: border-box;
}
.ad image{
  display: block;
  width:680rpx;
  height:150rpx;
}
.l1{
  width:100%;
  padding:0 16rpx;
  position: relative;
  box-sizing: border-box;
}
.nav{
  width:100%;
  overflow: hidden;
  /* padding-left: 30rpx; */
  box-sizing:border-box;
  padding-bottom:200rpx;
}
.nav_ul{
  height:48rpx;
  padding-left: 30rpx;
  box-sizing: border-box;
  margin-top:30rpx;
}
.nav_nav{
  font-size: 28rpx;
  color:#222222;
  font-weight: bold;
  margin-right: 40rpx;
  display: inline-block;
  position: relative;
}
.active{
  font-size: 34rpx;
  font-weight:bold;
  color:rgba(34,34,34,1);
  line-height:22px;
  background:linear-gradient(270deg, rgba(254,107,21,1) 0%, rgba(254,163,48,1) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.nav_line{
  position: absolute;
  left:50%;
  transform: translateX(-50%);
  width:calc(100% - 30rpx);
  height:4rpx;
  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
  display: none;
}
.active .nav_line{
  display: block;
}
.small_mask{
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.4);
  position: absolute;
  top:0;
  left:0;
}
</style>
