mall-uniapp/pages/commission/commission-ranking.vue

<!-- 佣金排行榜 -->
<template>
  <s-layout title="佣金排行榜">
    <view class="commission-rank">
      <view class="header">
        <view class="rank" v-if="state.position">
          您目前的排名
          <text class="num">{{ state.position }}</text> 名
        </view>
        <view class="rank" v-else>您目前暂无排名</view>
      </view>
      <view class="wrapper">
        <view class="nav acea-row row-around" style="justify-content: space-around; display: flex">
          <view
            class="item"
            :class="state.currentTab === index ? 'font-color' : ''"
            v-for="(item, index) in tabMaps"
            :key="index"
            @click="switchTap(index)"
          >
            {{ item }}
          </view>
        </view>
        <view class="list">
          <view class="item" v-for="(item, index) in state.pagination.list" :key="index">
            <view class="num" v-if="index <= 2">
              <image :src="'/static/images/medal0' + (index + 1) + '.png'" />
            </view>
            <view class="num" v-else>
              {{ index + 1 }}
            </view>
            <view class="pictrue">
              <image :src="item.avatar" />
            </view>
            <view class="text">{{ item.nickname }}</view>
            <view class="people">￥{{ fen2yuan(item.brokeragePrice) }}</view>
          </view>
        </view>
        <view class="noCommodity" v-if="state.pagination.list.length === 0">
          <emptyPage title="暂无排行～" />
        </view>
      </view>
    </view>

    <uni-load-more
      v-if="state.pagination.total > 0"
      :status="state.loadStatus"
      :content-text="{
        contentdown: '上拉加载更多',
      }"
      @tap="loadMore"
    />
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import BrokerageApi from '@/sheep/api/trade/brokerage';
  import { fen2yuan } from '@/sheep/hooks/useGoods';
  import _ from 'lodash-es';
  import { resetPagination } from '@/sheep/util';

  const tabMaps = ['周排行', '月排行'];

  const state = reactive({
    currentTab: 0,
    position: 0, // 排名
    pagination: {
      list: [],
      total: 0,
      pageNo: 1,
      pageSize: 10,
    },
    loadStatus: '',
  });

  async function switchTap(index) {
    state.currentTab = index;
    resetPagination(state.pagination);
    calculateTimes();
    getBrokerageRankList();
  }

  async function getBrokerageRankList() {
    const { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
      pageNo: state.pagination.pageNo,
      pageSize: state.pagination.pageSize,
      'times[0]': state.times[0],
      'times[1]': state.times[1],
    });
    if (code !== 0) {
      return;
    }
    state.pagination.list = _.concat(state.pagination.list, data.list);
    state.pagination.total = data.total;
    state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore';
    if (state.pagination.pageNo === 1) {
      getBrokerageRankNumber();
    }
  }

  async function getBrokerageRankNumber() {
    const { code, data } = await BrokerageApi.getRankByPrice({
      times: state.times,
    });
    if (code !== 0) {
      return;
    }
    state.position = data;
  }

  function formatDate(date) {
    return sheep.$helper.timeFormat(date, 'yyyy-mm-dd hh:MM:ss');
  }

  function calculateTimes() {
    let times;
    if (state.currentTab === 0) {
      times = getWeekTimes();
    } else {
      times = getMonthTimes();
    }
    state.times = [formatDate(times[0]), formatDate(times[1])];
  }

  onLoad(function () {
    calculateTimes();
    getBrokerageRankList();
  });

  // TODO 芋艿：此处可考虑抽离
  /**
   * 获得当前周的开始和结束时间
   */
  function getWeekTimes() {
    const today = new Date();
    const dayOfWeek = today.getDay();
    return [
      new Date(today.getFullYear(), today.getMonth(), today.getDate() - dayOfWeek, 0, 0, 0),
      new Date(
        today.getFullYear(),
        today.getMonth(),
        today.getDate() + (6 - dayOfWeek),
        23,
        59,
        59,
      ),
    ];
  }

  /**
   * 获得当前月的开始和结束时间
   */
  function getMonthTimes() {
    const today = new Date();
    const year = today.getFullYear();
    const month = today.getMonth();
    const startDate = new Date(year, month, 1, 0, 0, 0);
    const nextMonth = new Date(year, month + 1, 1);
    const endDate = new Date(nextMonth.getTime() - 1);
    return [startDate, endDate];
  }

  // 加载更多
  function loadMore() {
    if (state.loadStatus === 'noMore') {
      return;
    }
    state.pagination.pageNo++;
    getBrokerageRankList();
  }

  // 上拉加载更多
  onReachBottom(() => loadMore());
</script>
<style lang="scss" scoped>
  .commission-rank {
    .header {
      background: url('data:image/jpeg;base64,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
        no-repeat;
      width: 100%;
      height: 344rpx;
      background-size: 100% 100%;

      .rank {
        font-size: 33rpx;
        color: #fff;
        position: absolute;
        top: 160rpx;
        left: 48rpx;

        .num {
          font-size: 51rpx;
          font-weight: bold;
          margin: 0 10rpx;
        }
      }
    }

    .wrapper {
      width: 710rpx;
      background-color: #fff;
      border-radius: 14rpx;
      margin: -76rpx auto 0 auto;

      .nav {
        height: 99rpx;
        border-bottom: 2.5rpx solid #f3f3f3;
        font-size: 30rpx;
        font-weight: bold;
        color: #999;
        line-height: 99rpx;

        .item.font-color {
          border-bottom: 4rpx solid #e93323;
          margin-top: -2rpx;
          color: #e93323;
        }
      }

      .list {
        padding: 0 20rpx;

        .item {
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-bottom: 1px solid #f3f3f3;
          height: 101rpx;
          font-size: 28rpx;

          .num {
            color: #666;
            flex: 0.08;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            image {
              width: 50rpx;
              height: 50rpx;
            }
          }

          .pictrue {
            flex: 0.15;

            image {
              width: 68rpx;
              height: 68rpx;
              display: block;
              border-radius: 50%;
              margin: 0 auto;
            }
          }

          .text {
            color: #333;
            flex: 0.5;
          }

          .people {
            text-align: right;
            flex: 0.27;
          }
        }
      }
    }
  }
</style>