yunshengtai-uniapp/pages/user/incomeDetail/index.vue

<template>
<!--pages/user/incomeDetail/index.wxml-->
<view class="detail-page">
  <view class="back-btn" :style="'top:' + navTopHeight + 'rpx'" @tap="backPage">
			<image src="/static/images/back.png" mode></image>
	</view>
  <view class="top-bg">
    <image src="https://download.cyjyyjy.com/userIndex-top-bg.png" mode="aspectFill"></image>
    <view class="income-box">
      <view class="income-l acea-row row-column row-left row-middle">
        <view class="t">累计邀请</view>
        <view class="num">{{pageData.inviterCount}}人</view>
      </view>
      <view class="income-l income-r acea-row row-column row-middle row-left">
        <view class="t">累计收益</view>
        <view class="num">{{pageData.brokeragePrice}}元</view>
        <!-- <view class="btn">提现</view> -->
      </view>
    </view>
  </view>
  <view class="invitation-list-box">
    <view class="list-box">
      <view class="rank-list-box">
        <view v-for="(item, index) in pageData.userProfitList" :key="index" class="rank-item acea-row row-middle row-between">
          <view class="num">{{index+1}}</view>
          <view class="item-right acea-row row-between row-middle">
            <view class="item-right-l acea-row-nowrap row-middle">
              <image :src="item.avatar"></image>
              <view style="width:80%;">
                <view class="name line1">{{item.nickname}}</view>
                <view class="name">{{item.spreadTime}}</view>
              </view>
            </view>
            <view class="item-right-r">
              <view class="money">+100元</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>
</template>

<script>
// pages/user/incomeDetail/index.js
const app = getApp();

export default {
  data() {
    return {
      navTopHeight: app.globalData.menuTop + app.globalData.navTopHeight + 10,
      pageData: {}
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getDetail();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {}
  /**
   * 用户点击右上角分享
   */
  // onShareAppMessage: function () {
  // }
  ,
  methods: {
    getDetail() {
      app.http('get', 'user/profitDetail').then(res => {
        if (res.data.success) {
          this.setData({
            pageData: res.data.data
          });
        } else {
          uni.showToast({
            title: res.data.msg,
            icon: 'none'
          });
        }
      });
    },

    backPage() {
      uni.navigateBack({
        delta: 1
      });
    }

  }
};
</script>
<style>
/* pages/user/incomeDetail/index.wxss */
page{
  background: #212226;
}
.detail-page{
  width: 100%;
  position: relative;
}
.top-bg{
  width: 100%;
  height: 450rpx;
}
.top-bg image{
  width: 100%;
  height: 450rpx;
  position: absolute;
}
.income-box{
  width: 100%;
  min-height: 200rpx;
  position: relative;
  top: 140rpx;
  left: 0rpx;
  
}
.income-box image{
  width: 670rpx;
  height: 208rpx;
  position: absolute;
  top: 0;
  left: 0;
}
.income-l{
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0;
  z-index: 2;
  color: #946F46;
  padding: 30rpx 0 20rpx;
}
.t{
  color:#E4C6B0;
}
.num{
  color: #E4C6B0;
  font-size: 36rpx;
  font-weight: bold;
  margin: 20rpx 0;
}
.btn{
  width: 124rpx;
  height: 44rpx;
  line-height: 44rpx;
  text-align: center;
  background: #EFDACA;
  border-radius: 62rpx;
  font-size: 26rpx;
}
.income-r{
  height: auto;
  left: 50%;
}

.invitation-list-box{
  position: relative;
  z-index: 99;
  top: -80rpx;
}
.invi-title{
  padding-left: 40rpx;
  font-size: 32rpx;
  color: #EFDACA;
  line-height: 40rpx;
  margin-bottom: 12rpx;
}
.list-box{
  width: 100%;
  min-height: 200rpx;
  background: #212226;
  border-radius: 40rpx 40rpx 0px 0px;
  padding-top: 36rpx;
}
.rank-list-box{
  width: 100%;
  max-height: 780rpx;
  padding: 0 40rpx;
  font-size: 24rpx;
  overflow-y: scroll;
  color: #E4C6B0;
}
.rank-item .num{
  min-width: 38rpx;
  height: 32rpx;
  color: #E4C6B0;
  font-size: 26rpx;
}
.item-right-l image{
  width: 74rpx;
  height: 74rpx;
  border-radius: 50%;
  margin-right: 16rpx;
}
.item-right-l{
  width: 70%;
}
.item-right-l .name{
  font-size: 24rpx;
  color: #fff;
  width: 80%;
  line-height: 34rpx;
  margin-top: 6rpx;
}
.item-right{
  width: 618rpx;
  height: 132rpx;
  border-bottom: 1px solid #6B6158;
}
</style>