new-greemall-wxapp/pages/mine/ranking/list.vue

<template>
  <view class="app-container">
    <custom
      :bgColor="'bg-them'"
      :backColor="'#FFFFFF'"
      :isBack="true"
      v-show="isCustom"
    >
      <text slot="content" style="color: #ffffff; font-size: 36rpx"
        >收益排行榜</text
      >
    </custom>

    <view class="menu-container" :style="cuStyle">
      <image @tap="toBack" src="@/static/icon/back.png"></image>
    </view>

    <view class="top-container">
      <image
        src="@/static/mine/ranking/bg.png"
        mode="widthFix"
        class="bg"
      ></image>

      <view class="content">
        <view class="list">
          <block v-for="(item, index) in top_ranking" :key="index">
            <view class="item" :class="'no_' + item.ranking">
              <view class="top">
                <block v-if="!item.nodata">
                  <image
                    :src="item.avatar"
                    class="head"
                    v-if="item.avatar.indexOf('http') >= 0"
                  ></image>
                  <image
                    :src="imageUrl + item.avatar"
                    class="head"
                    v-else
                  ></image>
                </block>
                <image :src="configInfo.minLogo3" class="head" v-else></image>
                <image
                  :src="'/static/mine/ranking/No_' + item.ranking + '.png'"
                  class="rank"
                ></image>
              </view>
              <block v-if="!item.nodata">
                <view class="money">¥{{ item.total }}</view>
                <view class="name">{{ item.workUserName }}</view>
                <view class="text">{{ item.websitName }}</view>
              </block>
              <block v-if="item.nodata">
                <view class="nodata">{{ item.nodata }}</view>
              </block>
            </view>
          </block>
        </view>
      </view>
    </view>

    <view class="list-container">
      <view class="mine">
        <view class="left">
          <view class="rank">
            <view class="row1" :class="mine_ranking.ranking ? 'big' : ''">{{
              mine_ranking.ranking || '未入榜'
            }}</view>
            <view class="row2">我的排名</view>
          </view>
          <block v-if="mine_ranking.avatar">
            <image
              :src="mine_ranking.avatar"
              v-if="mine_ranking.avatar.indexOf('http') >= 0"
            ></image>
            <image :src="imageUrl + mine_ranking.avatar" v-else></image>
          </block>
          <view class="info">
            <view class="name">{{ mine_ranking.workUserName }}</view>
            <view class="text ellipsis-2">{{
              mine_ranking.websitName || ''
            }}</view>
          </view>
        </view>
        <view class="right">
          <view class="money">{{ mine_ranking.total | numToFixed }}</view>
          <view class="report" @tap="toMyReport">查看我的月报></view>
        </view>
      </view>
      <view class="list" v-if="bottom_ranking && bottom_ranking.length > 0">
        <block v-for="(item, index) in bottom_ranking" :key="index">
          <view class="item">
            <view class="rank">{{ index + 4 }}</view>
            <block v-if="item.avatar">
              <image
                :src="item.avatar"
                v-if="item.avatar.indexOf('http') >= 0"
              ></image>
              <image :src="imageUrl + item.avatar" v-else></image>
            </block>
            <view class="main">
              <view class="top">
                <view class="name">{{ item.workUserName }}</view>
                <view class="money">{{ item.total | numToFixed }}</view>
              </view>
              <view class="text ellipsis">{{ item.websitName }}</view>
            </view>
          </view>
        </block>
      </view>
    </view>

    <view class="bottom-container" v-if="statisticalDate.start"
      >统计时间：{{ statisticalDate.start }} 至 {{ statisticalDate.end }}</view
    >
  </view>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: this.$imageUrl,
      configInfo: uni.getStorageSync('configInfo'),
      scrollTop: 0, // 滚动高度（用于控制自定义导航）
      isCustom: false, // 是否显示自定义导航
      top_ranking: [],
      bottom_ranking: [],
      mine_ranking: {},
      statisticalDate: {},
    };
  },
  watch: {
    scrollTop() {
      if (this.scrollTop > 100) {
        this.isCustom = true;
      } else {
        this.isCustom = false;
      }
    },
  },
  computed: {
    cuStyle() {
      return `height:${this.CustomBar - this.StatusBar}px;padding-top:${
        this.StatusBar
      }px;`;
    },
  },
  onPageScroll(res) {
    this.scrollTop = res.scrollTop;
  },
  onLoad() {
    this.getData();
  },
  methods: {
    // 获取数据
    getData() {
      this.$axios({
        url: '/user/rank',
        method: 'get',
        params: {},
        isLoading: 1,
      }).then((res) => {
        let rankList = res.data.rankList || [];
        let top_ranking = rankList.slice(0, 3);
        for (let i = 0; i < 3; i++) {
          if (!top_ranking[i]) {
            top_ranking.push({ nodata: '虚位以待', ranking: i + 1 });
          }
        }

        let bottom_ranking = rankList;
        bottom_ranking.splice(0, 3);

        this.top_ranking = top_ranking;
        this.bottom_ranking = bottom_ranking;
        this.mine_ranking = res.data.myRank;
        this.statisticalDate = {
          start: res.data.startPeriod,
          end: res.data.endPeriod,
        };
      });
    },

    // 去我的月报
    toMyReport() {
      uni.navigateTo({
        url: '/pages/mine/ranking/report',
      });
    },

    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss">
.app-container {
  background: #ffffff;
  box-sizing: border-box;
}
.menu-container {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
  display: flex;
  align-items: center;
  image {
    width: 32rpx;
    height: 32rpx;
    display: block;
    margin-left: 30rpx;
  }
}
.top-container {
  position: relative;
  height: 900rpx;
  .bg {
    display: block;
    width: 750rpx;
    height: 900rpx;
    position: absolute;
    top: 0;
    z-index: 0;
  }
  .content {
    position: relative;
    z-index: 1;
    .list {
      display: flex;
      padding-top: 350rpx;
      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 33.33%;
        padding: 0 20rpx;
        box-sizing: border-box;
        .top {
          position: relative;
          .head {
            border-radius: 50%;
            display: block;
          }
          .rank {
            position: absolute;
            display: block;
          }
        }
        .nodata {
          font-size: 28rpx;
          color: #ffffff;
          line-height: 32rpx;
          margin-top: 16rpx;
        }
        .money {
          font-size: 32rpx;
          color: #ffffff;
          line-height: 32rpx;
          margin-top: 16rpx;
        }
        .name {
          font-size: 32rpx;
          color: #ffffff;
          line-height: 32rpx;
          margin-top: 16rpx;
        }
        .text {
          font-size: 24rpx;
          color: #ffffff;
          line-height: 28rpx;
          text-align: center;
          margin-top: 10rpx;
          opacity: 0.6;
        }
      }
      .item.no_1 {
        order: 2;
        .head {
          width: 160rpx;
          height: 160rpx;
          border: 2px solid #ffb103;
        }
        .rank {
          width: 80rpx;
          height: 58rpx;
          top: -50rpx;
          left: 50%;
          margin-left: -40rpx;
        }
      }
      .item.no_2 {
        order: 1;
        margin-top: 100rpx;
        .head {
          width: 140rpx;
          height: 140rpx;
          border: 2px solid #cccccc;
        }
        .rank {
          width: 72rpx;
          height: 52rpx;
          top: -44rpx;
          left: 50%;
          margin-left: -36rpx;
        }
      }
      .item.no_3 {
        order: 3;
        margin-top: 140rpx;
        .head {
          width: 140rpx;
          height: 140rpx;
          border: 2px solid #f59234;
        }
        .rank {
          width: 72rpx;
          height: 52rpx;
          top: -44rpx;
          left: 50%;
          margin-left: -36rpx;
        }
      }
    }
  }
}
.list-container {
  padding: 0 20rpx;
  margin-top: -40rpx;
  position: relative;
  z-index: 2;
  .mine {
    border-radius: 10rpx;
    padding: 25rpx 20rpx;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 0 6px 0 rgba(84, 84, 84, 0.23);
    background: #ffffff;
    .left {
      display: flex;
      align-items: center;
      .rank {
        flex-shrink: 0;
        text-align: center;
        .row1 {
          font-size: 24rpx;
          color: #fe781f;
          line-height: 24rpx;
          font-weight: 500;
          &.big {
            font-size: 32rpx;
          }
        }
        .row2 {
          font-size: 22rpx;
          color: #666666;
          line-height: 24rpx;
          margin-top: 10rpx;
        }
      }
      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 10rpx;
      }
      .info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 20rpx;
        height: 100rpx;
        .name {
          font-size: 28rpx;
          color: #333333;
          line-height: 32rpx;
        }
        .text {
          font-size: 24rpx;
          color: #666666;
          line-height: 28rpx;
        }
      }
    }
    .right {
      flex-shrink: 0;
      text-align: right;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin-left: 40rpx;
      .money {
        font-size: 32rpx;
        color: #fe781f;
        line-height: 32rpx;
        font-weight: 500;
      }
      .report {
        font-size: 24rpx;
        color: #3f9eff;
        line-height: 28rpx;
      }
    }
  }
  .list {
    margin-top: 20rpx;
    .item {
      border-bottom: 1px solid #eaeaea;
      display: flex;
      align-items: center;
      padding: 12rpx 0;
      .rank {
        width: 90rpx;
        text-align: center;
        font-size: 36rpx;
        font-weight: 500;
        flex-shrink: 0;
      }
      image {
        width: 100rpx;
        height: 100rpx;
        display: block;
        border-radius: 50%;
        flex-shrink: 0;
        margin-left: 10rpx;
      }
      .main {
        margin-left: 20rpx;
        width: 100%;
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .name {
            font-size: 28rpx;
            color: #333333;
            line-height: 32rpx;
          }
          .money {
            font-size: 32rpx;
            color: #fe781f;
            line-height: 32rpx;
            font-weight: 500;
          }
        }
        .text {
          font-size: 24rpx;
          color: #666666;
          line-height: 28rpx;
          width: 490rpx;
        }
      }
    }
  }
}
.bottom-container {
  text-align: center;
  font-size: 24rpx;
  line-height: 28rpx;
  color: #999999;
  padding-top: 30rpx;
  padding-bottom: 60rpx;
}
</style>