<view class="page-body">
    <view class="header">
        <image src="{{userHeaderUrl}}" class="userheadImg" mode="aspectFill"></image>
        <view>
        <text style="color:white;font-size:30rpx">蛋壳儿</text>
        </view>  
    </view>
    <view class="option-view">
        <block wx:for="{{optionNamas}}" wx:key="*this">
            <view class="option-item" bindtap="selectoption" data-index="{{index}}">
                <image class="item-icon" src="{{optionIcons[index]}}" style="width:45rpx;height:45rpx;"></image>
                <text style="font-size:28rpx;">{{item}}</text>
            </view>
        </block>
        <!--此处为分割线-->
        <view class="line_h_1 line_h"></view>
        <view class="line_h_2 line_h"></view>
        <view class="line_v_1 line_v"></view>
        <view class="line_v_2 line_v"></view>
    </view>
    <view class="tel-view" bindtap="makePhone">
        <text style="color:#c30000;font-size:30rpx">4008-166-188</text>
    </view>
</view>

.page-body{
    background-color: #f5f4f4;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}

.header{
    width: 100%;
    height: 380rpx;
    background-color: #000000;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.header .userheadImg{
    width: 180rpx;
    height: 180rpx;
    border-radius: 90rpx;
    margin-top: 70rpx;
    margin-bottom: 30rpx;
    
}
.option-view{
    width: 100%;
    height: 400rpx;
    display: flex;
    flex-direction: row;
    flex-wrap:wrap;
    position: relative;
    
}
.option-view .option-item{
    width: 250rpx;
    height: 200rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.item-icon{
    width: 40px;
    height: 40px;
    margin-top: 45rpx;
    margin-bottom: 15rpx;
}

.line_h_1{
    position: absolute;
    top: 200rpx;  
    left: 0;
}
.line_h_2{
    position: absolute;
    top: 399rpx;
    left: 0;
}
.line_v_1{
    position: absolute;
    left: 249.5rpx; 
    top: 0;
    bottom: 0; 
    width: 1rpx;
    background-color: #dedede;
}
.line_v_2{
    position: absolute;
    left: 499.5rpx;
    top: 0;
    bottom: 0; 
}
.line_h{
    width: 100%;
    height: 1rpx;
    background-color: #dedede;
}
.line_v{
    width: 1rpx;
    background-color: #dedede;
}
.tel-view{
    position: absolute;
    bottom: 40rpx;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 80rpx;
    left: 0;
    right: 0;
}

Page({
  data:{
    userHeaderUrl:"../../images/useravatar.png",
    optionNamas:['我的订单','我的优惠','麻小e卡','收货地址','设置','关于我们'],
    optionIcons:['../../images/mine_1.png','../../images/mine_2.png','../../images/mine_3.png','../../images/mine_4.png','../../images/mine_5.png','../../images/mine_6.png',]
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    
  },
  onReady:function(){
    // 页面渲染完成
    
  },
  onShow:function(){
    // 页面显示
    
  },
  onHide:function(){
    // 页面隐藏
    
  },
  onUnload:function(){
    // 页面关闭
    
  },
  makePhone:function(){
    wx.showModal({
      title:"提示",
      content:"你将使用运营商拨打电话4008166188",
      success:function(res){
        if (res.confirm) {
              wx.makePhoneCall({
                phoneNumber:'4008166188'
              })
          }
      }
    })
  },
  selectoption:function(event){
    console.log(event)
    let index = event.currentTarget.dataset.index
    switch(parseInt(index)){
      case 0:
            this.navigationTo("order",'')
            break;
      case 1:
            this.navigationTo("coupon",'')
            break;
      case 2:
            this.navigationTo("ecard",'')
            break;
      case 3:
            this.navigationTo("address",'')
            break;
      case 4:
            this.navigationTo("setting",'')
            break;
      case 5:
            this.navigationTo("aboutus",'')
            break;
      default:
            break;
    }
  },
  navigationTo:function(pageName,params){
    console.log('跳转' + '../' + pageName + '/' + pageName + params)
    wx.navigateTo({
      url: '../' + pageName + '/' + pageName + params,
      success: function(res){
        // success
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }
})