<view class="main">
    <view class="header">
        <image src="userbg.png" class="bg"></image>
        <image src="{{thumb}}" class="thumb"></image>
        <text class="nickname">{{nickname}}</text>

        <view class="top3">
            <view class="top33">
              <text class="t1">0.00元</text>
              <text class="t2">账户余额</text>
            </view>
            <view class="top33">
              <text class="t1">0张</text>
              <text class="t2">优惠券</text>
            </view>
            <view class="top33">
              <text class="t1">0个</text>
              <text class="t2">积分数量</text>
            </view>
        </view>
    </view>
    
    <view class="orders-box">
        <view class="orders">积分充值</view>
        
        <view class="userbut" bindtap="Recharge">
         <image src="../../image/userbut.png"></image>
        </view>
        


    </view>


    <view class="address-box">
        <view class="address-manage">
            <navigator url="/pages/order/order">全部订单</navigator>
        </view>
        <view wx:if="{{hasAddress}}" class="address-list">
            <view>{{address.name}}</view>
            <view>{{address.phone}}</view>
            <view>{{address.detail}}</view>
        </view>
    </view>
    <view class="address-box">
        <view class="address-manage">
            <navigator url="#">意见反馈</navigator>
        </view>
        <view wx:if="{{hasAddress}}" class="address-list">
            <view>{{address.name}}</view>
            <view>{{address.phone}}</view>
            <view>{{address.detail}}</view>
        </view>
    </view>
</view>

.header{
    position: relative;
    width: 100vw;
    height: 57.87vw;
    line-height: 100rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    color: #fff;
}
.bg{position: absolute;
top: 0;
width: 100%;
height: 100%;
}
.header .thumb{
    position: absolute;
    left: 50rpx;
    top: 50rpx;
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
    box-shadow:#FEC47B 0px 0px 5px 5px;

}
.top3{ width: 100%;  position: absolute; bottom: 30px;}
.top3 .top33{width: 33.33%; float: left; text-align: center;}
.t1{ height: 25px; line-height: 25px;}
.t2{ height: 25px; line-height: 25px; color: #522F07;}
.top3 .top33 text{ width: 100%; float: left;}
.nickname{
   position: absolute;
    left: 230rpx;
    line-height: 120px;
}
.header .about{
    float: right;
}

.address-box{
   border-bottom: 1rpx solid #e9e9e9;
    color: #999;
    line-height: 90rpx;
    font-size: 28rpx;
}
.address-box .address-manage{
    position: relative;
    height: 90rpx;
   
    padding-left: 20rpx;
    
}
.address-box .address-manage::after{
    position: absolute;
    right: 30rpx;
    top: 34rpx;
    content: '';
    width: 16rpx;
    height: 16rpx;
    border-top: 4rpx solid #7f7f7f;
    border-right: 4rpx solid #7f7f7f;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}
.address-box .address-list{
    padding-left: 30rpx;
}
.address-box .address-list view{
    height: 90rpx;
    
}
.address-box .address-list view:last-child{
    border-bottom: 0;
}

.orders-box{
    color: #999;
    font-size: 28rpx;
    border-bottom: 20rpx solid #e9e9e9;
    

}
.orders{
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
    color: #000;
    margin: 30rpx 0;
}
.userbut{
  width: 350px;
  height: 127px;
  margin: 0 auto;
  margin-bottom:50rpx;
}
.userbut image{
  width: 100%;
  height: 100%;
}
.orders-list{
    padding-left: 30rpx;
}
.orders-list:last-child{
    border-bottom: 0;
}
.orders-number{
    height: 90rpx;
    line-height: 90rpx;
    border-bottom: 1rpx solid #e9e9e9;
}
.orders-detail{
    position: relative;
    height: 120rpx;
    padding: 35rpx 20rpx 35rpx 170rpx;
}
.orders-detail image{
    position: absolute;
    left: 0;
    top: 20rpx;
    width: 150rpx;
    height: 150rpx;
}
.orders-detail view{
    line-height: 60rpx;
}
.orders-detail .orders-status{
    position: absolute;
    right: 20rpx;
    top: 35rpx;
    height: 120rpx;
    line-height: 120rpx;
    color: #b42f2d;
}
.orders-footer{
    height: 60rpx;
    line-height: 60rpx;
    color: #2f2f2f;
    padding:15rpx 30rpx 15rpx 0;
}
.orders-btn{
    float: right;
    width: 170rpx;
    height: 60rpx;
    position:absolute;
    right:20rpx;
    top:60rpx;
    line-height:60rpx;
    border-radius: 6rpx;
    background: #FF8503;
    color: #fff;
}

// page/component/new-pages/user/user.js
Page({
  data:{
    thumb:'',
    nickname:'',
    orders:[],
    hasAddress:false,
    address:{}
  },
  Recharge: function () {
    var that = this
    wx.showModal({
      title: '消息',
      content: '该功能尚未开放',
      success: function (res) {
        if (res.confirm) {
          console.log('用户点击确定')
        }
      }
    })
  },
  onLoad(){
    var self = this;
    /**
     * 获取用户信息
     */
    wx.getUserInfo({
      success: function(res){
        self.setData({
          thumb: res.userInfo.avatarUrl,
          nickname: res.userInfo.nickName
        })
      }
    }),

    /**
     * 发起请求获取订单列表信息
     */
    wx.request({
      url: '',
      success(res){
        self.setData({
          orders: res.data
        })
      }
    })
  },
  onShow(){
    var self = this;
    /**
     * 获取本地缓存 地址信息
     */
    wx.getStorage({
      key: 'address',
      success: function(res){
        self.setData({
          hasAddress: true,
          address: res.data
        })
      }
    })
  },
  /**
   * 发起支付请求
   */
  payOrders(){
    wx.requestPayment({
      timeStamp: 'String1',
      nonceStr: 'String2',
      package: 'String3',
      signType: 'MD5',
      paySign: 'String4',
      success: function(res){
        console.log(res)
      },
      fail: function(res) {
        wx.showModal({
          title:'支付提示',
          content:'<text>',
          showCancel: false
        })
      }
    })
  }
})