【无标题】

<!--pages/account/account.wxml-->

<!-- <image src="../../image/profile_bg.png" class="bj"> -->

  <image class='title_bg' src='../../image/profile_bg.png'></image> <view class='container'>

  <view class="container1">

   

      <view class="userinfo">

        <block wx:if="{{canIUseOpenData}}">

          <view class="userinfo-avatar" bindtap="bindViewTap">

            <open-data type="userAvatarUrl"></open-data>

          </view>

          <open-data type="userNickName"></open-data>

        </block>

        <block wx:else>

          <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>

          <text class="userinfo-nickname">{{userInfo.nickName}}</text>

        </block>

      </view>

  

  </view>

</view> 

 <!-- </image> -->

<view class='item'>

  <view class='item_left'>

    <image class='img_left' src='../../image/balance.png'></image>

    <text class='text_left'>余额</text>

  </view>

  <view class='item_right' bindtap='pay_click'>

    <text class='right_balance'>￥{{userInfo.balance}}</text>

    <text class='right_recharge'>充值</text>

  </view>

</view>

<view class='item' bindtap='consumption_click'>

  <view class='item_left'>

    <image class='img_left' src='../../image/consumption.png'></image>

    <text class='text_left'>消费记录</text>

  </view>

  <image class='img_more' src='../../image/right.png'></image>

</view>

<view class='item' bindtap='recharge_click'>

  <view class='item_left'>

    <image class='img_left' src='../../image/recharge.png'></image>

    <text class='text_left'>充值记录</text>

  </view>

  <image class='img_more' src='../../image/right.png'></image>

</view>

<button open-type="share">

  <view class='item1' bindtap='fenxiang_click'>

  <view class='item_left1'>

    <image class='img_left1' src='../../image/share.png'></image>

    <text class='text_left1'>分享</text>

  </view>

  <image class='img_more1' src='../../image/right.png'></image>

</view></button>

 

/* pages/account/account.wxss */

.title_bg{

 height: 200rpx;

  

}

.title{

  width: 100%;

  height: 120rpx;

  position: absolute;

  top:40rpx;

  display: flex;

  align-items:center;

}

.userinfo_avatar {

  width: 120rpx;

  height: 120rpx;

  border-radius: 50%;

  margin-left: 40rpx;

}

.user_name{

  margin-left: 30rpx;

  color:white;

}

.item{

  width: 100%;

  display: flex;

  justify-content:space-between;

  border-bottom: 1rpx solid rgb(218, 201, 201);

  align-items:center;

}

.img_more{

  margin: 30rpx;

  width: 50rpx;

  height: 50rpx;

}

.img_more1{

  width: 50rpx;

  height: 50rpx;

}

.item_left{

  display: flex;

  align-items:center;

}

.item_left1{

  display: flex;

  align-items:center;

}

.img_left{

  width: 50rpx;

  height: 50rpx;

  margin-left: 30rpx;

}

.text_left{

  margin-left: 20rpx;

  font-size: 35rpx;

}

.item_right{

  margin: 30rpx;

  height: 50rpx;

}

.right_balance{

  font-size: 35rpx;

}

.right_recharge{

  font-size: 35rpx;

  color: red;

  border: 1px solid red;

  padding: 5rpx;

  margin-left: 10rpx;

}

.img_left1{

  

  width: 50rpx;

  height: 50rpx;

}

.text_left1{

 margin-left: 20rpx;

  font-size: 35rpx;

}

.item1{

  width: 100%;

  display: flex;

  justify-content:space-between;

  border-bottom: 1rpx solid rgb(218, 201, 201);

  align-items:center;

}

 

.userinfo {

  width: 90vw;

  height: 18vh;

  position: absolute;

  top: 0;

  left: 30rpx;

  display: flex;

  /* flex-direction: column; */

  align-items: center;

  color: black;

}

.userinfo-avatar {

  overflow: hidden;

  width: 128rpx;

  height: 128rpx;

  margin: 20rpx;

  border-radius: 50%;

}

.container {

  height: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: space-between;

  /* padding: 50rpx 0; */

  box-sizing: border-box;

  /* background-image: url("../../image/profile_bg.png"); */

} 

// pages/person/person.js

Page({

  /**

   * 页面的初始数据

   */

  data: {

    

    userInfo: {},

    hasUserInfo: false,

    canIUse: wx.canIUse('button.open-type.getUserInfo'),

    canIUseGetUserProfile: false,

    canIUseOpenData: wx.canIUse('open-data.type.userAvatarUrl') && wx.canIUse('open-data.type.userNickName') // 如需尝试获取用户信息可改为false

  },

  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {

  

  },

  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {

    wx.setNavigationBarTitle({

      title: '个人中心'

    })

   

  },

  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

  },

  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {

  },

  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {

  },

  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {

  },

  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {

  },

  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {

  },

  

  recharge_click: function () {

    wx.navigateTo({

      url: '../recharge/recharge'

    })

  },

  fenxiang_click:function(){

    

  }

 

})