<!--pages/customer/customerDetail.wxml-->
<view class="container">
    <view class="customerInfo">
        <view class="hd-title">
                基本信息
        </view>
        <view class="view-list line-before-bottom ">
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户名称</view>
            </view>
            <view class="list__bd">
               <input class="choose" bindinput="bindKeyInput" value="{{customerInfo.customerName}}"/>
            </view>
        </view>
          <view class="view-list line-before-bottom arrow-right ">
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户性别</view>
            </view>
            <view class="list__bd ">
                <picker bindchange="bindSexChange" class="picker" value="{{sexIndex}}" range="{{sexs}}">
                    <input class="choose" disabled="true" placeholder="请选择" placeholder-class="font-color-ccc" value="{{customerInfo.sex || sexs[sexIndex]}}"/>
                </picker>
            </view>
        </view>
        <view class="view-list arrow-right" >
            <view class="list__hd">
                    <view class="weui-label font-color-666">客户年龄</view>
            </view>
            <view class="list__bd">
                <picker bindchange="bindAgeChange" class="picker"  value="{{ageIndex}}" range="{{ages}}">
                       <input class="choose" disabled="true"  placeholder="请选择" placeholder-class="font-color-ccc" value="{{customerInfo.age || ages[ageIndex]}}"/>
                </picker>
            </view>
        </view>
     </view>
     <view class="customerInfo">
          <view class="hd-title">
            收货地址
          </view> 
          <navigator url="shippingAddress?type=edit&addressid={{list.addressId}}" class="view-group line-before-bottom" wx:for="{{customerInfo.address}}" wx:for-item="list">
              <view class="group-hd"><image class="imgsize" src="/assets/images/address.png"></image> <text class="font-color-c24e4e">{{list.addressName}}</text></view>
              <view class="group-bd">
                  <view class="group-bd-hd">地址:<text class="font-color-999">{{list.address}}</text></view>
                  <view class="consignee-info">
                      <view>收货人：<text class="font-color-999">{{list.consignee}}</text></view>
                      <view>电话：<text class="font-color-999">{{list.phone}}</text></view>
                  </view>
              </view>
              <view class="group-icon">
                  <image src="/assets/images/buy_go@2x.png"></image>
              </view>
          </navigator>
      </view>
      <view class="butbox" style="margin:30rpx auto; ">
             <navigator url="shippingAddress?type=add" class="but bg-color-c24e4e font-color-white">添加收货地址</navigator>
      </view>
</view>        

/* pages/customer/customerDetail.wxss */
@import '/assets/styles/view-input.wxss';

.view-group{
    background-color: #fff;
    padding: 30rpx;
    position: relative;
}
.group-hd{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    margin-bottom: 40rpx;
}
.group-bd{
    padding-right:30rpx;
}
.group-hd .imgsize{
    width: 50rpx;
    height: 50rpx;
    margin-right: 30rpx;
}
.group-icon{
    width:40rpx;
    height: 40rpx;
    position: absolute;
    top: 50%;
    margin-top: -25rpx;
    right: 10rpx;  
}
.group-icon image{
    width:30rpx;
    height: 50rpx;
}
.consignee-info{
    display: flex;
    flex-direction: row;
}
.group-bd-hd{
    margin-bottom: 30rpx;
}
.consignee-info{
    display: flex;
    flex-direction: row;
    
}
.consignee-info view{
    flex: 1;
}

// pages/customer/customerDetail.js
Page({
  data:{
     customerInfo:{
       
     },
     sexs: ["男", "女"],
     sexIndex: null,
     ages:["20岁以下","20~30岁",'30~40岁','50~60岁','60岁以上'],
     ageIndex:null
  },
  bindSexChange(e) {
          console.log('picker account 发生选择改变，携带值为', e.detail.value);
          this.setData({
              'sexIndex': e.detail.value,
              'customerInfo.sex':this.data.sexs[e.detail.value]
          })
      },
  bindAgeChange (e) {
      this.setData({
          'ageIndex': e.detail.value,
          'customerInfo.age':this.data.ages[e.detail.value]
      });
  },
  bindKeyInput(e){
     this.setData({
      'customerInfo.customerName':e.detail.value
     })
  },
  onLoad: function (options) {
      let type = options.type=='add' ?  'add' : 'edit';
      let title =  options.type=='add' ? '新建客户' : '编辑客户';
      wx.setNavigationBarTitle({
        title:title, 
      })
      let customerInfo={};
      if(type=="add"){
        customerInfo={}
      }else{
        customerInfo={
         customerName:'测试',
          sex:'男',
          age:'20~30岁',
          address:[{
            addressId:1,
            addressName:'公司',
            address:'湖北省武汉市硚口区人名西路302号明日财富大厦20层，迪吧拉亚公司研发部',
            consignee:'轩少',
            phone:13985858585
          },{
            addressId:2,
            addressName:'家',
            address:'湖北省武汉市硚口区人名西路302号明日财富大厦20层，迪吧拉亚公司研发部',
            consignee:'袁小娇',
            phone:13985858585
          }
          ]
        }
      }
      this.setData({
        customerInfo:customerInfo
      })
  },
  onReady:function(){
    // 页面渲染完成
  },
  onShow:function(){
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
  onUnload:function(){
    // 页面关闭
  }
})