249 lines
33 KiB
Vue
249 lines
33 KiB
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 '@/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,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAYEBQYFBAYGBQYHBwYIChAKCgkJChQODwwQFxQYGBcUFhYaHSUfGhsjHBYWICwgIyYnKSopGR8tMC0oMCUoKSj/2wBDAQcHBwoIChMKChMoGhYaKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCj/wgARCAFYAu4DAREAAhEBAxEB/8QAHAABAAIDAQEBAAAAAAAAAAAAAAIDAQQFBwYI/8QAGwEBAAIDAQEAAAAAAAAAAAAAAAECAwQFBgf/2gAMAwEAAhADEAAAAPnvKfaQAAAAAAAAAAAAAAAAAAAAAAAAAAAAImAYRgGDBiYGAYAAAMgyZETkyZBlOQSAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAImAYRgwYMTGDBgxMDAMAAyAZMwykZMmYnJkyZTkEgAAAAAAAAAAAAAAAAAAAAAAAAAAACIMGEYMGJiJgwYmMEQjEsGYXY6TrXJGZqvau9hkzE5MmTMTIyZicmTJlOSQAAAAAAAAAAAAAAAAAAAAAAAAAABEwYRgwYmImCMxgiYmMQ7WhqfScnR73N0+xo6/R1cF+KsoZRiJryTp58nM28/E6G38/wBTc+a629qZ8uYSTklE5JGYmRkykTAAAAAAAAAAAAAAAAAAAAAAAAAAImDCMETExEjMRMIjLr6Gr9t5/lfYcLm9DUxhIIAJAIBIYtHz3U3PjO90/ju71Kct8xMiUTIySicmSxIAAAAAAAAAAAAAAAAAAAAAAAAAiYMIiYmIkSMxEjMfQ8rR9F8vxfpuPpZgAAAAAAAABrZ7fDeh6vn/AKfs6mfLOJkSiZGYnJckAAAAAAAAAAAAAAAAAAAAAAAACJgijBGYiRmIkJjo6mD1DyHA+r4ehkAAAAAAAAAAA1s9vOfU9n4P0nZxMzTKJkZNiLAAAAAAAAAAAAAAAAAAAAAAAACJFGDBGYiQmIojL7nznH9M8lw7sMAAAAAAAASIkiIAABxOls+S+29Hyd7ZnEyJRO1FgAAAAAAAAMmSIAAAAAAAAAAAAAImCKIkZiJGYhMWY6eseK879dwuemUEwSiEyAgkgEiCUEwSAgmASgkEQmacryr2Xofju905xMjdrcAAD9Ddz5x8nrdjzbnen9w7XguDg6H3+75/yrm+r870PTfZbfE9b6njvznwPpf3m7576za5H0mxzPLOb6z5rX6lVcnsvX8TycW353oej+l2Ob97ved1KZvjdTufBaPf04zgAAAAAACJgijBCYiQmITG3r4fZPCeZ7fN1wAAAAABm8ZkRiJVnEAAAAAAEvOPV9nzv1PbkdCmQAAe69nwXqvS8ng+P1O19jt8XzDneo9L6HmZTH5+4X0P13q+N+a1+n4NxPoP7C9X8awZB+aPO/T/AEro+W9I6HmYRb4HS9D9lt8TSrmvmmE/mfzn1LlU2gAAAAAAImDCIkZiBCYhMbmth9p8D5fq6OEAAAACexW3ZpHMqvkrWhFkTKaytW6lLKVhrzXq3xSQAAAAPP8A1HW8z9b3enTKAAN+2D9M+i+WfH6va8J4n0D9Meh+X8DDv+l9DzPg/F995/o+i997nz3tZdDwDh/ROjk1gBrVy9bLp+rdPyenTJ8Xqd31jp+PzMXzTRpn/OPn/pvBxb4AAAAAAiYMIiRmIkJiuYuxY/a/AeX7HO11ioAADN125jhtTpV2NXBmjivOtZRGUARmYTbGRfmxbubBtYsNOjeGKyoAABYq899T0/ifU+lAAA/U3ovlHNrsfI6nZ9U6fkvgNH0XpfQ8zwcO74NxPoX6B7vzn5rX6vzGt1fRN7zg3smtvX1/h9PvfMa3W+73OAl8fq9j6TNzPlsHVJ+pz8nwrj++4GHoAAAAAACJFGCMxAhMQmIxHsnhPM/TcjSAAAAu3McNyeZg3K9bJbWltKTisojMQMmDEziZhM12tVbJDNPQ2tXdpr0c7JikgAAAeD/UPcAAD2rreG9g6vj9CmXwTifQ/aux4X5DU7XpfQ8z5jz/AE3lXM9d7J1vFdvLo/l3zv1YD13p+P8AWun4/wDJHmfsHs3V8V91ucFL5nX6X1+1yOtl0a4tzce5+cuB9K4eLeAAAAAAiYIoiRmITEEVy9G8rxPRPLcfIAAAvGx0sPLjd1tTNsY8dtMdlayRKIzEDIBgxM4IzMJtXa9GTJDPPW2tGelFWpkAAAHg/wBQ9uAAPr9njfoDu/O/P+f6P5PX6/tHX8P8fqdr0voeZ830PR+O8n2vpvQ8v91vcD8uec+rAeu9Px/rXT8f+SPM/YPZur4r7rc4KXl/O9R9Lscv1XpeV8v53qKoyeM8j22hXOAAAAABAwiJGYgQmK5jt83T9r8B5iVQAAE81bOlTjavQs1630x20pOK5iMgAAAAGLTBMJtTfJrZcu7u62/h19bn5QAAPCfqHtwAAP1N6L5R8Rp92y1fRuh5j4HR9F6X0PM/N4Oh4bxfffebvA+33eD+XPOfVgPXun4/1np+P/JHmfsHtHW8T9xt8JLyHlex9N6XlPo8/N5OLc+u2uT+SfL/AF/l02gAAAABEwRREhMQmK5jEV9u+feW7PO1wAALM9ZdGONp7+xgx30xWVrJGaxkwDIAAAMGTBi01zaq19bLmu3MXUrqavNygADwr6h7cAAegbvnf0L3vnHj3J9p43yva/pr0Hy/gYd/0voeZ8H4vvvMef6n27reE+13eJ+XPOfVvuNvg+0dbxPUzaevXJ+U/NfXPs9ri+vdXxvHxbnmnO9P+lvQ/MPJeX6/0Hf873c2j+RvLfYtCucAAAAARIoiRmK5iBXMfZ8Dleq+L4OJADMMSnki3p04mn0NnBi2MeOcVmggYAASQASQAMgimK1V76uXNduYunj1NXQyjMAPCvqHtwABu2wfR5+b8trdahf6XPy6K5enk1eBh3+bTa+lz8vYtj+S1uxuWwfS5+aONi3ePj3B9Hm5utXLzqbPbzaPIxbn0Gfm69cvzWDpgAAAACJgiiMoIhMVzGIr7r858p0dTEAAExt9XFwdbpbGvi2MeKytcoAwkYAmcAAyBEDIRkAhNqb31cufe3tbY0sVWtcAeF/T/bAAAAAAAAAAAAAAAAAAAAARIoiRmIIrlXMfW8Pmes+J4GQAAbO/h5Ft9qRs48VlaZgMTMZYTiZwnEiQAAQMxGSURmIkhBKEzTfJqZs/b3ufRyrqSB4X9P8AbAAAAAAAAAAAAAAAAAAAAAQIoiQmITFcxXL2bwPmPoeXqIAATyw6Tl6O5t4cNtceYlMRmYTaMzzOjuUZ8tsUnFcSzEgDExmEJmK1U37HL0LcWOcRKIlDBC06+TLXs27dufp87MB4b9P9sAAAAAAAAAAAAAAAAAAABgwYIohMQITFUxu62D3f5x5VEAAsN3pa/BxdK/XxbGPFKGJa+TJwt7pkzit+bHs2xXxjsimQAACKabZNa2XW1skFoTbfwa3W09CUMFdrambP1N/TxzEMcjw76d7YAAAAAAAAAAAAAAAAAAAARIoiQmITFaK5fbef5Pp3juKAAJZKz6kcrn7m3iwW1rghNuHv9LjbnQ39fWnFehfW6M6uxXFbFMxAAAJhM0Wyals/JxblLJRly6uXL9txPOyrEkRTr5MtW1ftufp6GceH/TvaAAAAAAAAAAAAAAAAAAAACBhECExCYrmKpet+I879XxdEAAbW7h5Ft6WrXYx4pREJmFr8Te6XO2NruaHNqvk2NnH0Wrt0wXRTKAAAK1te+bSvn5evt246a98vI3d/7DkcCdKTrXJTe+nm2O5u87W5OYeH/TfaAAAAAAAAAAAAAAAAAAAACBFEZishMVzFc194+b+V3tbGAANzqYPntXp7mHXvpjFc2rtk427v8/Y3Ozpc6m+TZ2MfTjT3KYL4x5iBtb+Dv+q5ny3hu2QK5vq3zaN9jlYdy3FSi+Tlbm99byODZWs60nEV2tq5c23u4tjSw14L+H/TfaAAAAAAAAAAAAAAAAAAAARMEUQmIFcxXMX4cPvXz
|
|||
|
|
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>
|