小程序点餐系统——个人中心

个人中心

页面展示

代码

页面设计

<view class="avatar">
  <image src="{{listData.avatar}}" mode="aspectFill"></image>
</view>
<view class="content">
  <view class="con">消费记录</view>
</view>
<view class="record-content" wx:for="{{listData.record}}" wx:for-item="items" wx:key="{{items.record_id}}">
  <view class="content-infoL" style='display:flex'>
    <view>消费</view>
    <view class="content-time">{{items.date}} {{items.time}}</view>
  </view>
  <view class="content-infoR" style='display:flex'>
    <text>￥{{items.summoney}}</text>
  </view>
</view>

页面样式

page {
  background-color: #f8f8f8;
  font-size: 32rpx;
}
/* 我的头像 */
.avatar {
  width: 100%;
  background-color: #f7982a;
  height: 400rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.avatar image {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  border: 10rpx solid rgba(0, 0, 0, 0.1);
}
/* 消费记录 */
.content {
  background-color: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 20rpx 0;
}
/* 消费记录列表 */
.record-content {
  padding: 40rpx 20rpx;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border-bottom: 1rpx solid #ececec;
}
/* 左侧布局 */
.content-infoL {
  display: flex;
  flex-direction: column;
}
.content-time {
  font-size: 26rpx;
  color: #999;
}
/* 右侧布局 */
.content-infoR {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.content-infoR text{
  color: #f7982a;
  font-weight: 600;
  font-size: 36rpx;
}

页面逻辑

请求个人中心的信息

// 引入fetch文件
const fetch=require('../../utils/fetch.js')
Page({
  data: {
    listData:[]
  },
  onLoad: function (options) {
    wx.showLoading({
      title: "努力加载中"
    })
    // 设置小程序导航栏标题文字内容
    wx.setNavigationBarTitle({ 
      title: '消费记录' 
    })
    // 请求消费记录接口 
    fetch('food/record').then((res)=>{
      // 关闭加载信息
      wx.hideLoading();
      console.log("listDate:");
      console.log(res.data);
      this.setData({
        listData:res.data
      })
    }) 
  }
})