<!--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(){
}
})