zyejMAll-mobile/pages/commission/commission-ranking.vue

<!-- 佣金排行榜 -->
<template>
  <s-layout title="佣金排行榜">
    <view class="CommissionRank">
      <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 acea-row row-between-wrapper"
            v-for="(item, index) in state.rankList"
            :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="picTxt acea-row row-between-wrapper">
              <view class="pictrue">
                <image :src="item.avatar" />
              </view>
              <view class="text line1">{{ item.nickname }}</view>
            </view>
            <view class="people font-color">￥{{ fen2yuan(item.brokeragePrice) }}</view>
          </view>
        </view>
        <view
          class="noCommodity"
          v-if="state.rankList.length === 0 && (state.page !== 1 || state.active === 0)"
        >
          <emptyPage title="暂无排行～" />
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { reactive } from 'vue';
  import BrokerageApi from '@/sheep/api/trade/brokerage';
  import { fen2yuan } from '@/sheep/hooks/useGoods';

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

  const state = reactive({
    currentTab: 0,
    position: 0, // 排名
    rankList: [],
  });

  async function switchTap(index) {
    state.currentTab = index;
    state.rankList = [];
    calculateTimes();
    getBrokerageRankList();
    getBrokerageRankNumber();
  }

  async function getBrokerageRankList() {
    const { code, data } = await BrokerageApi.getBrokerageUserChildSummaryPageByPrice({
      pageNo: 1,
      pageSize: 10,
      'times[0]': state.times[0],
      'times[1]': state.times[1],
    });
    if (code !== 0) {
      return;
    }
    state.rankList = data.list;
  }

  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();
    getBrokerageRankNumber();
  });

  // 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];
  }

  // TODO 芋艿：css 需要优化下；并且展示样式有问题
</script>
<style lang="scss" scoped>
  .CommissionRank .header {
    background: url('data:image/jpeg;base64,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
      no-repeat;
    width: 100%;
    height: 344rpx;
    background-size: 100% 100%;
  }

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

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

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

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

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

  .CommissionRank .wrapper .list {
    padding: 0 30rpx;
  }

  .CommissionRank .wrapper .list .item {
    border-bottom: 1px solid #f3f3f3;
    height: 101rpx;
    font-size: 28rpx;
  }

  .CommissionRank .wrapper .list .item .num {
    color: #666;
    width: 70rpx;
  }

  .CommissionRank .wrapper .list .item .num image {
    width: 34rpx;
    height: 40rpx;
    display: block;
  }

  .CommissionRank .wrapper .list .item .picTxt {
    width: 350rpx;
  }

  .CommissionRank .wrapper .list .item .picTxt .pictrue {
    width: 68rpx;
    height: 68rpx;
  }

  .CommissionRank .wrapper .list .item .picTxt .pictrue image {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 50%;
  }

  .CommissionRank .wrapper .list .item .picTxt .text {
    width: 262rpx;
    color: #333;
  }

  .CommissionRank .wrapper .list .item .people {
    width: 175rpx;
    text-align: right;
  }
</style>