微信小程序日常0309

最终效果图 

源码

//index.wxml

<view class="container">
    <view class="header">
        <image class="avatar" src="{{userInfo.avatarUrl}}" />
        <view class="nickname">{{userInfo.nickName}}</view>
    </view>
    <view class="section">
        <view class="line judgement">绑定账户<text class="tl">深圳XXX酒店</text></view>
        <view class="line judgement">业务名称<text class="tl">居家家具</text></view>
        <view class="line judgement">会员到期时间<text class="tl">2018-03-09</text></view>
        <view class="line judgement">租用类型<text class="tl">日租</text></view>
        <view class="line judgement">支付方式<text class="tl">微信/支付宝/现金</text></view>
        <view class="line judgement">历史账单</view>
    </view>
    
    
</view>

 

//index.wxss

.header {
    background: #60CA56;
    padding: 30rpx;
}
.header .avatar {
    display: block;
    margin: 0 auto;
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    border: 2px solid #fee767;
}
.header .nickname {
    color: #000;
    font-size: 22px;
    line-height: 2.4;
    text-align: center;
}

.section {
    padding: 0;
    color: #2e2e2e;
    font-size: 30rpx;
}
.section .line {
    margin-left: 30rpx;
    padding-right: 30rpx;
    line-height: 3;
    border-bottom: 1px solid #efefef;
}
.section .line:last-child {
    border-bottom: none;
}
.section .line:before {
    
    color: #aaa;
    margin-left: 20rpx;
}
.section .line .tl {
    margin-left: 40rpx;
    color: #aaa;
}
.container {
  width:100%;
  height: 100%;
  display: flex;
  flex-direction: column;
 
  justify-content: space-between;
 
  box-sizing: border-box;
}

//index.js

var app = getApp()
Page({
  data: {
   
    userInfo: {}
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  },
  onShow: function () {
        this.setData({
            userInfo: app.globalData.userInfo
        });
    }

})

 

转载于:https://www.cnblogs.com/panlaixing/p/6524764.html