<view class="page">
 <!--页头-->
 <view class="page__hd">
  <view class="head">
    <input bindblur="getstart" value="{{start}}" placeholder="始发地" type="text" />
    <image src="/img/to.png" class="to"></image>
    <input bindblur="getover" value="{{over}}" placeholder="目的地" auto-focus/>
    <image src="/img/date.png" class="dateImg"></image>
    <picker mode="date" value="{{date}}" class="date" start="{{minday}}" end="{{maxday}}" bindchange="bindDateChange">
    <view class="picker">
      {{date}}
    </view>
  </picker>
  </view>
 </view>
 <!--主体-->
 <view class="page__bd"> 
  <view class="weui-tab">
            <view class="weui-navbar">
                <block wx:for="{{tabs}}" wx:key="*this">
                    <view id="{{index}}" class="weui-navbar__item {{activeIndex == index ? 'weui-bar__item_on' : ''}}" bindtap="tabClick">
                        <view class="weui-navbar__title">{{item}}</view>
                    </view>
                </block>
                <view class="weui-navbar__slider" style="left: {{sliderLeft}}px; transform: translateX({{sliderOffset}}px); -webkit-transform: translateX({{sliderOffset}}px);"></view>
            </view>
            <view class="weui-tab__panel">
                <view class="weui-tab__content" hidden="{{activeIndex != 0}}">
                    
                    <view class="weui-panel__bd">
                        <navigator wx:for="{{list}}" wx:for-index="idx" wx:key="k" wx:for-item="item" url="{{item.url}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                            <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                                <image class="weui-media-box__thumb" src="{{item.avatarUrl}}" ></image>
                            </view>
                            <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                                <view class="weui-media-box__title list_title"><text class="list_start">{{item.start}}</text> <image src="/img/to.png" class="to1"></image> <text class="list_over">{{item.over}}</text><text class="list_tm">{{item.tm}}</text></view>
                                <view class="weui-media-box__desc list_desc">出发：{{item.date}} {{item.time}}</view>
                                <view class="weui-media-box__info">
                                    <view class="weui-media-box__info__meta list_type_{{item.tp}}">{{item.type}}</view>
                                    <view class="weui-media-box__info__meta"><image src="/img/people.png" class="list_icon"></image><text>{{item.surplus}}</text></view>
                                </view>
                            </view>
                        </navigator>
                    </view>

                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 1}}">
                    <view class="weui-panel__bd">
                        <navigator wx:for="{{list1}}" wx:for-index="idx" wx:key="k" wx:for-item="item" url="{{item.url}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                            <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                                <image class="weui-media-box__thumb" src="{{item.avatarUrl}}" />
                            </view>
                            <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                                <view class="weui-media-box__title list_title"><text class="list_start">{{item.start}}</text> <image src="/img/to.png" class="to1"></image> <text class="list_over">{{item.over}}</text><text class="list_tm">{{item.tm}}</text></view>
                                <view class="weui-media-box__desc list_desc">出发：{{item.date}} {{item.time}}</view>
                                <view class="weui-media-box__info">
                                    <view class="weui-media-box__info__meta list_type_{{item.tp}}">{{item.type}}</view>
                                    <view class="weui-media-box__info__meta"><image src="/img/people.png" class="list_icon"></image><text>{{item.surplus}}</text></view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                </view>
                <view class="weui-tab__content" hidden="{{activeIndex != 2}}">
                    <view class="weui-panel__bd">
                        <navigator wx:for="{{list2}}" wx:for-index="idx" wx:key="k" wx:for-item="item" url="{{item.url}}" class="weui-media-box weui-media-box_appmsg" hover-class="weui-cell_active">
                            <view class="weui-media-box__hd weui-media-box__hd_in-appmsg">
                                <image class="weui-media-box__thumb" src="{{item.avatarUrl}}" />
                            </view>
                            <view class="weui-media-box__bd weui-media-box__bd_in-appmsg">
                                <view class="weui-media-box__title list_title"><text class="list_start">{{item.start}}</text> <image src="/img/to.png" class="to1"></image> <text class="list_over">{{item.over}}</text><text class="list_tm">{{item.tm}}</text></view>
                                <view class="weui-media-box__desc list_desc">出发：{{item.date}} {{item.time}}</view>
                                <view class="weui-media-box__info">
                                    <view class="weui-media-box__info__meta list_type_{{item.tp}}">{{item.type}}</view>
                                    <view class="weui-media-box__info__meta"><image src="/img/people.png" class="list_icon"></image><text>{{item.surplus}}</text></view>
                                </view>
                            </view>
                        </navigator>
                    </view>
                </view>
            </view>
        </view>
 </view>
<view class="page__bd">
    <view class="weui-loadmore" bindtap="onReachBottom" wx:if="{{!nomore}}">
        <view class="weui-loading"></view>
        <view class="weui-loadmore__tips">正在加载</view>
    </view>
    <view class="weui-loadmore weui-loadmore_line" wx:if="{{nomore}}">
        <view class="weui-loadmore__tips weui-loadmore__tips_in-line">没有更多了~</view>
    </view>
</view>
</view>

<navigator url="/pages/info/add">
    <view class="add" bindtap="add">
    <image src="/img/adddy.png"></image>
    </view>
</navigator>

/**index.wxss**/
.head{display:flex;flex-direction: row;background: #f5f5f5;width:100%;padding: 10rpx 0rpx 3rpx 0rpx; align-items: center;  justify-content: space-between;}
.head input,.head picker{background: #fff;width: 180rpx;margin:5rpx;height: 70rpx;border-radius: 10rpx;font-size: .8rem;text-align: center;line-height:70rpx;color:#444;}
.dateImg{width: 40rpx;height:40rpx;margin:25rpx 10rpx;}
.to{width: 60rpx;height:60rpx;margin:20rpx 0rpx;}

.date{font-size: .8rem!important;width: 200rpx!important;}

.page__bd{
    height: 100%;
}
.page__bd{
    padding-bottom: 0;
}
.weui-tab__content{
    padding-top: 60px;
    text-align: center;
}
.weui-navbar{background: #fff;}
.weui-media-box{position: relative}
.weui-navbar__slider{background: rgb(254,230,50)}
.weui-tab__content{padding-top: 0!important;}
.list_title,.list_desc{text-align: left!important;}
.list_title{color:black;font-size: .85rem;}
.list_desc{margin: 5rpx 0rpx;color: #444}
.list_type_1{background: rgb(254,230,50);padding: 0rpx 5rpx;margin-right:1rem;color:lightseagreen;}
.list_type_2{background: lightseagreen;padding: 0rpx 5rpx;margin-right:1rem;color:rgb(254,230,50);}
.to1{width: 60rpx;height:60rpx;position:absolute;top:12px;}
.list_over{margin-left:60rpx;}
.list_icon{width:30rpx;height:30rpx;position:absolute}
.weui-media-box__info__meta text{margin:0rpx 33rpx;}
.list_tm{float: right;color: indianred;font-size: .8rem;}
.weui-media-box__info__meta{padding-right: .2rem!important;}
.icon-gender{width:30rpx;height: 30rpx;bottom: 16rpx;position:absolute;left:120rpx;}

.add{position: fixed;bottom: 30px;right:30px;}
.add image{width: 80rpx;height: 80rpx;}

//index.js
//获取应用实例
var util = require('../../utils/util.js');
var app = getApp();
var today = util.formatTime(new Date((new Date()).getTime()+(1000*60*60*24*7))).split(' ')[0];
var minday = util.formatTime(new Date()).split(' ')[0];
var maxday =  util.formatTime(new Date((new Date()).getTime()+(1000*60*60*24*62))).split(' ')[0];
var sliderWidth = 96; // 需要设置slider的宽度，用于计算中间位置
var page = 1;
var list = new Array();
var list1 = new Array();
var list2 = new Array();

Page({
  data: {
    all:'act',
    date:today,
    minday:today,
    maxday:maxday,
    tabs: ["全部", "车找人", "人找车"],
    activeIndex: 0,
    sliderOffset: 0,
    sliderLeft: 0,
    start:'',
    over:''
  },
  tabClick: function (e) {
        this.setData({
            sliderOffset: e.currentTarget.offsetLeft,
            activeIndex: e.currentTarget.id
        });
    },
  bindDateChange:function(e){
    this.setData({
      date:e.detail.value
    })
    this.getList(e.detail.value,this.data.start,this.data.over);
  },
  onShareAppMessage: function () {
    return {
      title: '同城拼车',
      path: 'pages/index/index'
    }
  },
  getList:function(date='',start='',over=''){

    var that = this;
    util.req('info/lists',
      {start:start,over:over,date:date,page:page},
      function(data){
        if(!data.list){
          that.setData({nomore:true});
          return false;
        } 
        if(page == 1){          
          list = new Array();
          list1 = new Array();
          list2 = new Array();
        }
        var surp = new Array('','空位','人');
        data.list.forEach(function(item){
          try{
            var start = ((item.departure).split('市')[1]).replace(/([u4e00-u9fa5]+[县区]).+/, '$1');
          }catch(e){
            var start = (item.departure).split(/[县区]/)[0];
          }

          try {
            var over = ((item.destination).split('市')[1]).replace(/([u4e00-u9fa5]+[县区]).+/, '$1');
          } catch (e) {
            var over = (item.destination).split(/[县区]/)[0];
          }

          var obj = {
            start:start,
            over:over,
            type:that.data.tabs[item.type],
            tp:item.type,
            time:util.formatTime(new Date(item.time*1000)),
            surplus:item.surplus+surp[item.type],
            see:item.see,
            gender:item.gender,
            avatarUrl:item.avatarUrl,
            url:'/pages/info/index?id='+item.id,
            tm:util.getDateDiff(item.time*1000)
            };
            list.push(obj);
            if(item.type == 1){
              list1.push(obj);
            }else{
              list2.push(obj);
            }
        })

        that.setData({list:list,list1:list1,list2:list2});
    })

  },
  onPullDownRefresh: function(){
    page = 1;
    this.getList(this.data.date,this.data.start,this.data.over);
    wx.stopPullDownRefresh();
  },
  getstart:function(e){
    this.setData({
      start:e.detail.value
    })
    page = 1;
    this.getList(this.data.date,e.detail.value,this.data.over);
  },
  getover:function(e){
    this.setData({
      over:e.detail.value
    })
    page = 1;
    this.getList(this.data.date,this.data.start,e.detail.value);
  },
  onLoad: function () {
    var that = this;
    wx.getSystemInfo({
        success: function(res) {
            that.setData({
                sliderLeft: (res.windowWidth / that.data.tabs.length - sliderWidth) / 2,
                sliderOffset: res.windowWidth / that.data.tabs.length * that.data.activeIndex,
                windowHeight: res.windowHeight,
                windowWidth: res.windowWidth
            });
        }
    });

    wx.getLocation({
      success: function (res) { 
        var latitude = res.latitude
        var longitude = res.longitude       
        wx.request({
          url: 'https://api.map.baidu.com/geocoder/v2/?ak=zIOkoO8wWrWA22ObIHPNkCgtLZpkP5lE&location=' + latitude + ',' + longitude + '&output=json&pois=0',
          data: {},
          method: 'GET', 
          header: { 'Content-Type': 'application/json' },
          success: function(res){
            that.setData({
              start:res.data.result.addressComponent.city
            })
            that.getList(that.data.date,res.data.result.addressComponent.city);
          }
        })
      }
    })
  },
  onReachBottom:function(){
    if(!this.data.nomore){
      page++;
      this.getList(this.data.date,this.data.start,this.data.over);
    }
  }
})