<template>
	<view class="wrap">
		<view class="search">
			<text>重庆</text>
			<view class="search-right">
				<u-icon name="search" style="margin-right: 10rpx;"></u-icon>
				<input placeholder="商品/用户/关键词搜索" disabled/>
			</view>
			
		</view>
		
		<view class="middle">
			<view class="tabbar">
				<view @click="jumpPage(item.projectLinkUrl)" v-for="(item,index) in iconList" :key='index' v-show="item.projectStatus==0">
					<image :src="item.projectImgUrl"></image>
					<view>
						{{item.merchantExtendProjectName}}
					</view>
				</view>
			</view>
			
			<view class="banner">
				<u-swiper :list="swiperList" @change="e => currentNum = e.current" indicatorStyle="right: 20px" height="300" circular @click='swiperClick(currentNum)'>
						<view slot="indicator" class="indicator-num">
								<text class="indicator-num__text">{{ currentNum + 1 }}/{{ swiperList.length }}</text>
						</view>
				</u-swiper>
			</view>
		</view>
		
		<view class="product-list">
			<view class="list-wrap" @click="goProduct(item.pageUrl)" v-for="(item,index) in productList" :key='index'>
				<view class="list-head">
					<image :src='item.imgUrl' mode="widthFix">
						
					</image>
					<view class="address">
						<u-icon name="map" color="#ffffff" size="24"></u-icon>
						重庆
					</view>
				</view>
				
				<view class="list-bottom">
					<view style="font-size: 32rpx;">
						{{item.merchantName}}
					</view>
					<view class="bottom-price">
						<view class="price-left">
							<text>
								¥
							</text>
							<text>
								{{item.price}}
							</text>
							<text>
								起
							</text>
						</view>
						<view>
							5分
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      currentNum:0,//轮播图下标
      swiperList: [//轮播图图片
			  {
			    url: 'http://lx.pangdly.com/img/home1.69efcf8.jpg'
			  },
			  {
			    url: 'http://lx.pangdly.com/img/home2.2ec1a04.jpg'
			  },
			  {
			    url: 'http://lx.pangdly.com/img/home3.df60ec3.jpg'
			  }
      ],
      productList:[//产品列表
        {
          merchantName:'长江索道',
          pageUrl:'/pages/combination/distributionCombiChoose/distributionCombiChoose?channelId=1&merchantId=z0015605022691a5945bbe463141668c&groupId=z0016038113016708b8ad38c637b2f26&groupChannelId=z00160423712018998e6260ffcaf3369',
          imgUrl:'http://lx.pangdly.com/img/sodao.1cdf287.jpg',
          price:20
        },
        {
          merchantName:'云端之眼',
          pageUrl:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z00160128940329482da6bd94d443a91&channelType=1',
          imgUrl:'http://lx.pangdly.com/img/yunduan.331a774.jpg',
          price:68
        },
        {
          merchantName:'两江游金碧系列',
          pageUrl:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z001578652229233acd0134cf825fdbe',
          imgUrl:'http://lx.pangdly.com/img/liangjiang.097258e.jpg',
          price:138
        },
        {
          merchantName:'重庆湖广会馆',
          pageUrl:'/pages/scenic/scenicProduct/scenicProduct?merchantId=cdd4da5d154a4512bd5f3bec2797557b',
          imgUrl:'http://lx.pangdly.com/img/huiguan.c00da69.jpg',
          price:23
        },
      ],
      iconList:[//图标列表
        {
          merchantExtendProjectName:'景区名称',
          projectImgUrl:'/static/img/index/classify1.png',
          projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
          projectStatus:0
        },
        {
          merchantExtendProjectName:'酒店民宿',
          projectImgUrl:'/static/img/index/classify2.png',
          projectLinkUrl:'/pages/hotel/hotelIndex/hotelIndex',
          projectStatus:0
        },
        {
          merchantExtendProjectName:'周边游',
          projectImgUrl:'/static/img/index/classify4.png',
          projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
          projectStatus:0
        },
        {
          merchantExtendProjectName:'跟团游',
          projectImgUrl:'/static/img/index/classify5.png',
          projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
          projectStatus:0
        },
        {
          merchantExtendProjectName:'亲子游',
          projectImgUrl:'/static/img/index/classify6.png',
          projectLinkUrl:'/pages/scenic/scenicIndex/scenicIndex',
          projectStatus:0
        },
        {
          merchantExtendProjectName:'行程订制',
          projectImgUrl:'/static/img/index/classify7.png',
          projectLinkUrl:'/pages/my/travelList/travelList/travelList',
          projectStatus:0
        }
      ],
    }
  },
  onLoad(option){
    // 首次进入时执行
    let companyId=this.$commonjs.getKey(option,'companyId')||''
    if(!companyId){
      this.getCompanyId()
    }
  },
  onShow() {
    // 首次进入、后台切入前台时会执行
    this.loadIcon()
  },
  methods: {
    //---获取公司Id
    getCompanyId(){
      let openid=uni.getStorageSync('openid')||''
      let data={openid}
      this.$request('wechatUser/wxUser/getLastRecord',data).then((res) => {
        if (res.code == '00'){
          //公司Id,用于入口判断，跳入公众号页面时需要传入到公众号
          let companyId=res.data.companyId||''
          uni.setStorageSync('companyId',companyId)
        }
      })
    },
    //---轮播图点击
    swiperClick(index){
      //长江索道
      if(index==0){
			 uni.navigateTo({
				 url:'/pages/combination/distributionCombiChoose/distributionCombiChoose?channelId=1&merchantId=z0015605022691a5945bbe463141668c&groupId=z0016038113016708b8ad38c637b2f26&groupChannelId=z00160423712018998e6260ffcaf3369'
			 })
      }
      //湖广会馆
      if(index==1){
			 uni.navigateTo({
				 url:'/pages/scenic/scenicProduct/scenicProduct?merchantId=cdd4da5d154a4512bd5f3bec2797557b'
			 })
      }
      //联合国际
      if(index==2){
			 uni.navigateTo({
				 url:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z00160128940329482da6bd94d443a91&channelType=1'
			 })
      }
    },
    //---加载图标
    loadIcon(){
      let data={
        merchantType:0,//商户类型，其他
      }
      this.$request('scenic/merchantExtendProject/loadList',data).then((res)=>{
        if(res.code=='00'){
				  this.iconList=res.data
        }
      })
    },
    //---图片页面跳转
    jumpPage(url){
      uni.navigateTo({
			  url
      })
    },
    //---产品跳转
    goProduct(url){
      uni.navigateTo({
        url
      })
    }
		
  }
}
</script>

<style lang="scss" scoped>
.search{
	position: fixed;
	width: 100%;
	height:100rpx;
	top: 0;
	display: flex;
	align-items: center;
	padding:24rpx;
	background: #f5f5f5;
	z-index: 10;
}
.search-right{
	flex: 1;
	display: flex;
	margin-left: 20rpx;
	background: #fff;
	padding:12rpx 24rpx;
	border-radius:48rpx;
}
.middle{
	padding: 0 24rpx;
	margin-top: 110rpx;
}
.tabbar{
	padding: 10rpx 0;
	display: flex;
	flex-wrap: wrap;
	background: #fff;
	border-radius:16rpx;
	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
	justify-content: space-between;
	>view{
		width: 25%;
		text-align: center;
		margin: 24rpx 0;
	}
	image{
		width: 64rpx;
		height: 64rpx;
	}
}
.banner{
	margin-top: 20rpx;
}
.product-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 0 20rpx;
	border-radius: 24rpx 24rpx 0 0;
}
.list-wrap{
	width: 49%;
	margin-top: 30rpx;
}
.list-head{
	position: relative;
	image{
		width: 100%;
		border-radius: 16rpx 16rpx 0 0;
	}
}
.address{
	position: absolute;
	left: 20rpx;
	bottom: 20rpx;
	display: flex;
	background: rgba(0,0,0,0.5);
	padding: 8rpx 20rpx 12rpx 10rpx;
	border-radius: 24rpx;
	color: #FFFFFF;
	font-size: 22rpx;
}
.list-bottom{
	padding:16rpx 20rpx;
	background: #fff;
}
.bottom-price{
	display: flex;
	justify-content: space-between;
	margin-top: 10rpx;
}
.price-left{
	color:$red;
	font-size: 24rpx;
}
.price-left text:nth-child(2){
	color: $red;
	font-size: 36rpx;
	font-weight: bold;
	margin: 0 6rpx;
}
.price-left text:nth-child(3){
	color: $grey;
}
</style>
