<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="goScenic()">
					<image src="@/static/img/index/classify1.png"></image>
					<view>
						景区门票
					</view>
				</view>
				<view @click="goHotel()">
					<image src="@/static/img/index/classify2.png" ></image>
					<view>
						酒店民宿
					</view>
				</view>
				<view @click="goScenic()">
					<image src="@/static/img/index/classify4.png"></image>
					<view>
						周边游
					</view>
				</view>
				<view @click="goScenic()">
					<image src="@/static/img/index/classify5.png"></image>
					<view>
						跟团游
					</view>
				</view>
				<view @click="goScenic()">
					<image src="@/static/img/index/classify6.png"></image>
					<view>
						亲子游
					</view>
				</view>
				<view @click="goTravelList()">
					<image src="@/static/img/index/classify7.png"></image>
					<view>
						行程订制
					</view>
				</view>
				<view @click="goAlbum()">
					<image src="@/static/img/index/album.png"></image>
					<view>
						摄影/旅拍
					</view>
				</view>
				<view @click="goVlog()">
					<image src="@/static/img/index/video.png"></image>
					<view>
						欢乐影集
					</view>
				</view>
			</view>
			
			<view class="banner">
				<u-swiper :list="list" mode="number" height="300" indicator-pos="bottomRight" @click="swiperClick">
					
				</u-swiper>
			</view>
		</view>
		
		<view class="list">
			<view class="list-wrap" @click="goSuodao()">
				<view class="list-head">
					<image src="http://wx.pangdly.com/static/img/sodao.1cdf287.jpg" mode="widthFix">
						
					</image>
					<view class="address">
						<u-icon name="map"></u-icon>
						重庆
					</view>
				</view>
				
				<view class="list-bottom">
					<view style="font-size: 32rpx;">
						长江索道
					</view>
					<view class="bottom-price">
						<view class="price-left">
							<text>
								¥
							</text>
							<text>
								20
							</text>
							<text>
								起
							</text>
						</view>
						<view>
							5分
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-wrap" @click="goGuoji()">
				<view class="list-head">
					<image src="http://wx.pangdly.com/static/img/yunduan.331a774.jpg" mode="widthFix">
						
					</image>
					<view class="address">
						<u-icon name="map"></u-icon>
						重庆
					</view>
				</view>
				
				<view class="list-bottom">
					<view style="font-size: 32rpx;">
						云端之眼
					</view>
					<view class="bottom-price">
						<view class="price-left">
							<text>
								¥
							</text>
							<text>
								68
							</text>
							<text>
								起
							</text>
						</view>
						<view>
							5分
						</view>
					</view>
				</view>
			</view>
			
			<view class="list-wrap" @click="goLiangjiang()">
				<view class="list-head">
					<image src="http://wx.pangdly.com/static/img/liangjiang.097258e.jpg" mode="widthFix">
						
					</image>
					<view class="address">
						<u-icon name="map"></u-icon>
						重庆
					</view>
				</view>
				
				<view class="list-bottom">
					<view style="font-size: 32rpx;">
						两江游金碧系列
					</view>
					<view class="bottom-price">
						<view class="price-left">
							<text>
								¥
							</text>
							<text>
								138
							</text>
							<text>
								起
							</text>
						</view>
						<view>
							5分
						</view>
					</view>
					
				</view>
			</view>
			
			<view class="list-wrap" @click="goHuiguan()">
				<view class="list-head">
					<image src="http://wx.pangdly.com/static/img/huiguan.c00da69.jpg" mode="widthFix">
						
					</image>
					<view class="address">
						<u-icon name="map"></u-icon>
						重庆
					</view>
				</view>
				
				<view class="list-bottom">
					<view style="font-size: 32rpx;">
						重庆湖广会馆
					</view>
					<view class="bottom-price">
						<view class="price-left">
							<text>
								¥
							</text>
							<text>
								23
							</text>
							<text>
								起
							</text>
						</view>
						<view>
							5分
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
  data() {
    return {
      list: [
			  {
			    image: 'http://wx.pangdly.com/static/img/home1.69efcf8.jpg'
			  },
			  {
			    image: 'http://wx.pangdly.com/static/img/home2.2ec1a04.jpg'
			  },
			  {
			    image: 'http://wx.pangdly.com/static/img/home3.df60ec3.jpg'
			  }
      ],
    }
  },
  onLoad(option){
    let companyId=this.$commonjs.getCompanyId(option)
    if(!companyId){
      this.getCompanyId()
    }
  },
  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){
        this.goSuodao()
      }
      //湖广会馆
      if(index==1){
        this.goHuiguan()
      }
      //联合国际
      if(index==2){
        this.goGuoji()
      }
    },
    //---跳转景区首页
    goScenic(){
      uni.navigateTo({
        url:'/pages/scenic/scenicIndex/scenicIndex'
      })
    },
    //---跳转酒店首页
    goHotel(){
      uni.navigateTo({
        url:'/pages/hotel/hotelIndex/hotelIndex'
      })
    },
    //跳转影集首页
    goAlbum(){
		  uni.navigateTo({
		    url:'/pages/album/albumIndex?index=1'
		  })
    },
    //---跳转vlog
    goVlog(){
      uni.navigateTo({
        url:'/pages/vlog/vlogIndex/vlogIndex'
      })
    },
    //---跳转行程订制
    goTravelList(){
		  uni.navigateTo({
		    url:'/pages/my/travelList/travelList/travelList'
		  })
    },
    //---跳转索道
    goSuodao(){
      uni.navigateTo({
        url:'/pages/combination/distributionCombiChoose/distributionCombiChoose?channelId=1&merchantId=z0015605022691a5945bbe463141668c'+
				'&groupId=z0016038113016708b8ad38c637b2f26&groupChannelId=z00160423712018998e6260ffcaf3369'
      })
    },
    //---跳转联合国际
    goGuoji(){
      uni.navigateTo({
        url:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z00160128940329482da6bd94d443a91&channelType=1'
      })
    },
    //---跳转两江游
    goLiangjiang(){
      uni.navigateTo({
        url:'/pages/scenic/scenicProduct/scenicProduct?merchantId=z001578652229233acd0134cf825fdbe'
      })
			
    },
    //---跳转湖广会馆
    goHuiguan(){
      uni.navigateTo({
        url:'/pages/scenic/scenicProduct/scenicProduct?merchantId=cdd4da5d154a4512bd5f3bec2797557b'
      })
    }
		
  }
}
</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;
}
.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: inline-block;
	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>
