<!--technician.wxml-->

<view class="container">
<scroll-view  scroll-y="true"  class="page-body" bindscrolltolower="loadMore">
  <!--category picker-->
  <view class="ar_picker" style="background:#fff">
    <view class="ar_picker_wrap">
        <picker bindchange="bindCasPickerChange" value="{{casIndex}}" range="{{casArray}}">
            <view>
                <text>{{casArray[casIndex]}}</text>
            </view>
        </picker>
    </view>
  </view>
  <!--address picker-->
  <view class="ar_picker">
     <view class="ar_picker_wrap">
        <picker bindchange="bindAddrPickerChange" value="{{addrIndex}}" range="{{addrArray}}">
            <view>
                <text>{{addrArray[addrIndex]}}</text>
            </view>
        </picker>
     </view>
  </view>
  <!--list-->
  <view class="nav_section">
    <view wx:if="{{list}}">
        <block wx:for="{{list}}" wx:key="item.id">
            <view class="nav_section_items" bindtap="navigateDetail" data-aid="{{item.id}}">
                <!--image-->
                <view class="section_image" >
                <block wx:if="{{item.avatar}}">
                    <image src="{{item.avatar}}" mode="aspectFill"></image>
                </block>
                <block wx:else>
                    <image src="../../images/default_pic.png" mode="aspectFill"></image>
                </block>
                </view>
                <!--content-->
                <view class="section_cont" >
                    <view class="section_cont_sub">
                        <text>{{item.company}}</text>
                    </view>
                    <view class="section_cont_price" style="color:#000">{{item.nickname}}<text class="section_cont_price">  {{item.price}}</text></view>
                    <view>{{item.message}}</view>
                </view>
                <!--book-->
                <view class="section_book" >
                        <view>{{item.distance}}</view>
                </view>
            </view>
            
        </block>
    </view>
    
    <view wx:else>暂无数据</view>
          
</view>

</scroll-view>
</view>

/**index.wxss**/
.container{
    padding:0;
    margin:0;
}
.ar_picker{
    width:100%;
    font-size:30rpx;
    color:#000;
    background: #efeff4;
    margin:0;
    padding:10rpx 0rpx;
}

.ar_picker .ar_picker_wrap{
    width: 670rpx;
    background: #fff url(../../images/arrow.png) no-repeat right center;
    background-size:25rpx 14rpx;
    background-position:650rpx;
    border-radius:20rpx;
    padding:10rpx 30rpx;
    margin:10rpx auto;
    border:1px solid #ddd;
}
/* 导航条 */
.nav_top{
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    width:100%;
    box-sizing: border-box;
    padding:20rpx 10rpx;
    background:url(../../images/black_line.png) repeat;
    color:#fff;
}
.nav_top_items{
    text-align: center;
    font-size:28rpx;
    width:100rpx;
    border-radius:8rpx;
    box-sizing:border-box;
}
.nav_top_items image{
    width:83rpx;
    height:93rpx;
    display: inline-block;
}
.nav_top .active{
    color:#38b337;
}
.active_red{
    color:#e5004f;
}
.active_orange{
    color:#eb6100;
}
.active_yellow{
    color:#fff100;
}
.active_green{
    color:#8fc31f;
}
.active_purple{
    color:#aa2adf;
}


/* 导航对应内容项 */
.nav_section{
    width:100%;
}
.nav_section_items{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
    padding:30rpx;
    border-bottom:2rpx solid #ddd;
    position: relative;
}
.nav_section_items:active{
    background:#ddd;
}
.nav_section_items .section_image{
    width:170rpx;
    height:158rpx;
}
.nav_section_items .section_image image{
    width:100%;
    height:100%;
}
.nav_section_items .section_cont{
    width:380rpx;
    font-size:26rpx;
    color:#a9a9a9;
}
.nav_section_items .section_cont view{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space:nowrap;
    display: block;
}
.nav_section_items .section_cont .section_cont_intro{
    white-space:normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.nav_section_items .section_cont .section_cont_sub{
    font-size: 30rpx;
    line-height:60rpx;
    color:#000;
    margin-bottom:10rpx;
}
.nav_section_items .section_cont .section_cont_price{
    font-size:32rpx;
    color:#d24a58;
}
.nav_section_items .section_book{
    height:80rpx;
    font-size:26rpx;
    background:url(../../images/location.png) no-repeat left;
    background-size:17rpx 28rpx;
    line-height: 80rpx;
    color:#d24a58;
    text-align: left;
    margin-top:35rpx;
    padding-left:30rpx;
}

/*technician.js*/

//获取应用实例
var app = getApp()
var fileData = require('../../utils/data.js')
var util = require('../../utils/util')

Page({
  // 页面初始数据
  data: {
      // nav 初始化
      // cas picker
      casArray: ['美发','美容','美甲','美睫'],
      casIndex:0,
      // addr picker
      addrArray: util.replacePhone(fileData.userData().addrs,false),
      addrIndex:0,
      skillData: fileData.getSkilledData(),
      curNavId: 1,
		  curIndex: 0
  },
   
  onLoad:function(){
    var that = this
    that.setData({
      list: that.data.skillData
    })
  },
  // 跳转至详情页
  navigateDetail: function(e){
    wx.navigateTo({
      url:'../technicain_detail/technicain_detail?artype=' + e.currentTarget.dataset.arid
    })
  },
  // 加载更多
  loadMore: function (e) {
    console.log('加载更多')
    if (this.data.skillData.length === 0) return
    var that = this
    // 由于是模拟数据，加载更多时候，数据重复加载
    that.data.skillData= that.data.skillData.concat(that.data.skillData)
    that.setData({
      list: that.data.skillData,
    }) 
  },
  // 类别选择
  bindCasPickerChange:function(e){
    console.log('Category picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      casIndex: e.detail.value
    })
  },
  // 地址选择
  bindAddrPickerChange:function(e){
    console.log('Category picker发送选择改变，携带值为', e.detail.value)
    this.setData({
      addrIndex: e.detail.value
    })
  }

  
})