You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
655 lines
14 KiB
655 lines
14 KiB
<template>
|
|
<view class="ranking-page">
|
|
<view class="title">
|
|
<view class="title-sreach">
|
|
<view class="back-btn" @tap="back">
|
|
<uni-icons type="left" size="26" color="#20243a"></uni-icons>
|
|
</view>
|
|
<view class="title-name">
|
|
配送今日排行榜
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="notice-wrap" v-if="reward != ''">
|
|
<view class="reward-card">
|
|
<view class="reward-title">
|
|
<view class="reward-icon">
|
|
<text>奖</text>
|
|
</view>
|
|
<text>奖励规则</text>
|
|
</view>
|
|
<view class="reward-marquee">
|
|
<view class="reward-marquee-inner">{{reward}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="hero">
|
|
<view class="hero-glow hero-glow-one"></view>
|
|
<view class="hero-glow hero-glow-two"></view>
|
|
<view class="hero-copy">
|
|
<!-- <view class="hero-tag">实时战况</view> -->
|
|
<view class="hero-title">今日配送之星</view>
|
|
<view class="hero-subtitle">按今日完成订单数排名，晚 10 点截止</view>
|
|
</view>
|
|
|
|
<view class="podium">
|
|
<view class="podium-card podium-second" :class="{'podium-empty': !rankItem(1).workerName}">
|
|
<view class="podium-crown silver">2</view>
|
|
<image class="podium-avatar" :src="rankItem(1).icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
|
|
<view class="podium-name">{{displayName(rankItem(1))}}</view>
|
|
<view class="podium-count">{{displayCount(rankItem(1))}}单</view>
|
|
<view class="podium-base">NO.2</view>
|
|
</view>
|
|
<view class="podium-card podium-first" :class="{'podium-empty': !rankItem(0).workerName}">
|
|
<view class="podium-crown gold">1</view>
|
|
<image class="podium-avatar champion" :src="rankItem(0).icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
|
|
<view class="podium-name">{{displayName(rankItem(0))}}</view>
|
|
<view class="podium-count">{{displayCount(rankItem(0))}}单</view>
|
|
<view class="podium-base">NO.1</view>
|
|
</view>
|
|
<view class="podium-card podium-third" :class="{'podium-empty': !rankItem(2).workerName}">
|
|
<view class="podium-crown bronze">3</view>
|
|
<image class="podium-avatar" :src="rankItem(2).icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
|
|
<view class="podium-name">{{displayName(rankItem(2))}}</view>
|
|
<view class="podium-count">{{displayCount(rankItem(2))}}单</view>
|
|
<view class="podium-base">NO.3</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="content-list">
|
|
<view class="list-head">
|
|
<view>
|
|
<view class="list-title">今日榜单</view>
|
|
<view class="list-subtitle">多劳多得，冲刺奖励</view>
|
|
</view>
|
|
<view class="list-total">{{fireList.length}} 人上榜</view>
|
|
</view>
|
|
<view v-if="fireList.length == 0" class="empty-box">
|
|
<image src="../../static/image/songshu.png" mode="aspectFit"></image>
|
|
<view>暂无配送员上榜</view>
|
|
</view>
|
|
<view v-for="(item,index) in fireList" :key="index" class="content-item">
|
|
<view class="rank-badge" :class="rankClass(index)">
|
|
<uni-icons v-if="index < 3" type="medal-filled" size="22" :color="medalColor(index)"></uni-icons>
|
|
<text v-else>{{index + 1}}</text>
|
|
</view>
|
|
<image class="box-avatar" :src="item.icon || '../../static/image/songshu.png'" mode="aspectFill"></image>
|
|
<view class="box-right">
|
|
<view class="box-right-num">{{item.workerName == null?'暂无':item.workerName}}</view>
|
|
<view class="box-right-name">当前排名第 {{index + 1}}</view>
|
|
</view>
|
|
<view class="order-pill">
|
|
<text>{{item.orderCount || 0}}</text> 单
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
range:[],
|
|
fireList:[],
|
|
indexList: [],
|
|
reward:'',
|
|
rewardList:[],
|
|
bigImg:[],
|
|
swiperDotIndex:0,
|
|
|
|
};
|
|
},
|
|
onShow(){
|
|
this.getMonth()
|
|
this.getFireList()
|
|
},
|
|
onReachBottom() {
|
|
this.getFireList();
|
|
|
|
},
|
|
methods: {
|
|
rankItem(index) {
|
|
return this.fireList[index] || {}
|
|
},
|
|
displayName(item) {
|
|
return item.workerName || '虚位以待'
|
|
},
|
|
displayCount(item) {
|
|
return item.orderCount || 0
|
|
},
|
|
rankClass(index) {
|
|
if (index == 0) return 'rank-first'
|
|
if (index == 1) return 'rank-second'
|
|
if (index == 2) return 'rank-third'
|
|
return ''
|
|
},
|
|
medalColor(index) {
|
|
if (index == 0) return '#f8c33c'
|
|
if (index == 1) return '#b9c2d1'
|
|
return '#d99a55'
|
|
},
|
|
lunbochange(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
getFireList(){
|
|
this.NB.sendRequest("/mall/delivery/countOrdersLimit", {
|
|
regionId: JSON.parse(uni.getStorageSync('area')).regionId
|
|
}, false, 'GET', 'application/x-www-form-urlencoded').then(res => {
|
|
if (res.code == 200) {
|
|
if(res.result.data != null){
|
|
this.fireList = res.result.data
|
|
}
|
|
|
|
if(res.result.reward != undefined && res.result.reward != null){
|
|
this.rewardList = res.result.reward
|
|
this.reward = '排位规则：'
|
|
for(let i = 0; i < res.result.reward.length; i++){
|
|
this.reward += '第' + res.result.reward[i].orderNum + '名 - 奖励' + res.result.reward[i].reward + '元；'
|
|
}
|
|
this.reward += '晚上10点截止'
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: res.message,
|
|
icon: 'none'
|
|
});
|
|
}
|
|
uni.hideLoading()
|
|
})
|
|
},
|
|
searchList(res) {
|
|
this.pageNum = 1;
|
|
this.fireList = [];
|
|
this.getFireList()
|
|
},
|
|
//获取当月1日到当前时间
|
|
getMonth() {
|
|
let date = new Date()
|
|
let year = date.getFullYear().toString() //'年'
|
|
let month = date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1).toString():(date.getMonth()+1).toString() //'月'
|
|
let da = date.getDate() < 10 ? '0'+date.getDate().toString():date.getDate().toString() //'日'
|
|
let end = year + '-' + month + '-' + da //当天
|
|
let beg = year + '-' + month + '-01' //当月第一天
|
|
this.range = [beg,end]
|
|
},
|
|
largeImg(img) {
|
|
if((img.productPicture == null &&img.productPictures == null) || (img.productPicture == '' &&img.productPictures == '') || (img.productPicture == null &&img.productPictures == '') || (img.productPicture == '' &&img.productPictures == null)){
|
|
uni.showToast({
|
|
title: "暂无可展示的图片",
|
|
icon: 'none'
|
|
});
|
|
return
|
|
}
|
|
this.bigImg = []
|
|
if(img.productPicture != null){
|
|
let data = {
|
|
productPicture:img.productPicture
|
|
}
|
|
this.bigImg.push(data)
|
|
}
|
|
if(img.productPictures != null){
|
|
for(let i=0;i<img.productPictures.length;i++){
|
|
this.bigImg.push(img.productPictures[i])
|
|
}
|
|
}
|
|
this.$refs.imgPopup.open()
|
|
},
|
|
back() {
|
|
uni.navigateBack()
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.ranking-page {
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #f0ffe1 0%, #eafff9 34%, #f6f8ff 100%);
|
|
padding-bottom: 60rpx;
|
|
}
|
|
|
|
.title {
|
|
width: 100%;
|
|
background: linear-gradient(135deg, #e3ff96 0%, #c9ffcf 42%, #a6ffea 100%);
|
|
}
|
|
|
|
.title-sreach {
|
|
width: 100%;
|
|
display: flex;
|
|
height: 176rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.back-btn {
|
|
padding-top: 80rpx;
|
|
width: 72rpx;
|
|
height: 72rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.title-name {
|
|
padding-top: 100rpx;
|
|
font-size: 36rpx;
|
|
font-weight: 800;
|
|
color: #20243a;
|
|
flex: 1;
|
|
text-align: center;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.notice-wrap {
|
|
position: relative;
|
|
z-index: 3;
|
|
margin: 0 24rpx 20rpx;
|
|
}
|
|
|
|
.reward-card {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 82rpx;
|
|
padding: 0 14rpx 0 16rpx;
|
|
border: 1px solid rgba(119, 238, 204, 0.58);
|
|
border-radius: 28rpx;
|
|
background:
|
|
linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(245, 255, 247, 0.88) 100%),
|
|
linear-gradient(90deg, #e3ff96, #a6ffea);
|
|
box-shadow: 0 16rpx 34rpx rgba(55, 190, 166, 0.14);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.reward-title {
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-right: 16rpx;
|
|
color: #113c36;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.reward-icon {
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
margin-right: 8rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #e3ff96, #a6ffea);
|
|
box-shadow: 0 8rpx 16rpx rgba(74, 206, 163, 0.2);
|
|
color: #0f5a50;
|
|
font-size: 22rpx;
|
|
font-weight: 900;
|
|
}
|
|
|
|
.reward-marquee {
|
|
flex: 1;
|
|
min-width: 0;
|
|
height: 54rpx;
|
|
overflow: hidden;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.58);
|
|
}
|
|
|
|
.reward-marquee-inner {
|
|
display: inline-block;
|
|
min-width: 100%;
|
|
padding-left: 100%;
|
|
padding-right: 18rpx;
|
|
box-sizing: border-box;
|
|
height: 54rpx;
|
|
line-height: 54rpx;
|
|
white-space: nowrap;
|
|
color: #0f5a50;
|
|
font-size: 24rpx;
|
|
font-weight: 800;
|
|
animation: reward-marquee 16s linear infinite;
|
|
}
|
|
|
|
@keyframes reward-marquee {
|
|
0% {
|
|
transform: translateX(0);
|
|
}
|
|
100% {
|
|
transform: translateX(-100%);
|
|
}
|
|
}
|
|
|
|
.hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin: 0 24rpx;
|
|
min-height: 610rpx;
|
|
border-radius: 0 0 42rpx 42rpx;
|
|
background:
|
|
radial-gradient(circle at 82% 18%, rgba(255, 255, 255, 0.38) 0, rgba(255, 255, 255, 0.2) 62rpx, transparent 64rpx),
|
|
linear-gradient(145deg, #86f2d8 0%, #8edfff 46%, #9aa7ff 100%);
|
|
box-shadow: 0 22rpx 44rpx rgba(68, 202, 185, 0.24);
|
|
}
|
|
|
|
.hero::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -120rpx;
|
|
top: -180rpx;
|
|
width: 620rpx;
|
|
height: 620rpx;
|
|
border-radius: 50%;
|
|
background: rgba(227, 255, 150, 0.2);
|
|
}
|
|
|
|
.hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -160rpx;
|
|
bottom: -200rpx;
|
|
width: 520rpx;
|
|
height: 520rpx;
|
|
border-radius: 50%;
|
|
background: rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.hero-glow {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(2rpx);
|
|
}
|
|
|
|
.hero-glow-one {
|
|
right: 74rpx;
|
|
top: 72rpx;
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
background: rgba(227, 255, 150, 0.58);
|
|
}
|
|
|
|
.hero-glow-two {
|
|
left: 66rpx;
|
|
top: 238rpx;
|
|
width: 42rpx;
|
|
height: 42rpx;
|
|
background: rgba(255, 255, 255, 0.32);
|
|
}
|
|
|
|
.hero-copy {
|
|
position: relative;
|
|
z-index: 2;
|
|
padding: 42rpx 40rpx 18rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.hero-tag {
|
|
display: inline-flex;
|
|
padding: 10rpx 22rpx;
|
|
border-radius: 999rpx;
|
|
background: rgba(255, 255, 255, 0.24);
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.hero-title {
|
|
font-size: 48rpx;
|
|
font-weight: 900;
|
|
letter-spacing: 2rpx;
|
|
}
|
|
|
|
.hero-subtitle {
|
|
margin-top: 10rpx;
|
|
font-size: 25rpx;
|
|
color: rgba(255, 255, 255, 0.82);
|
|
}
|
|
|
|
.podium {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: space-between;
|
|
padding: 22rpx 28rpx 34rpx;
|
|
}
|
|
|
|
.podium-card {
|
|
width: 204rpx;
|
|
min-height: 312rpx;
|
|
padding: 24rpx 16rpx 0;
|
|
box-sizing: border-box;
|
|
border-radius: 34rpx 34rpx 20rpx 20rpx;
|
|
background: rgba(255, 255, 255, 0.95);
|
|
text-align: center;
|
|
box-shadow: 0 18rpx 32rpx rgba(34, 54, 136, 0.18);
|
|
}
|
|
|
|
.podium-first {
|
|
width: 232rpx;
|
|
min-height: 368rpx;
|
|
margin-bottom: 18rpx;
|
|
background: linear-gradient(180deg, #fff9dc 0%, #fff 58%);
|
|
}
|
|
|
|
.podium-second {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.podium-third {
|
|
margin-bottom: -10rpx;
|
|
}
|
|
|
|
.podium-empty {
|
|
opacity: 0.72;
|
|
}
|
|
|
|
.podium-crown {
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
margin: 0 auto 14rpx;
|
|
border-radius: 50%;
|
|
line-height: 54rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 900;
|
|
color: #fff;
|
|
}
|
|
|
|
.gold {
|
|
background: linear-gradient(135deg, #ffc72e, #ff9f1c);
|
|
box-shadow: 0 8rpx 18rpx rgba(255, 176, 31, 0.36);
|
|
}
|
|
|
|
.silver {
|
|
background: linear-gradient(135deg, #dbe4f1, #aeb9c9);
|
|
}
|
|
|
|
.bronze {
|
|
background: linear-gradient(135deg, #e6ad70, #c98145);
|
|
}
|
|
|
|
.podium-avatar {
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 50%;
|
|
border: 6rpx solid #fff;
|
|
box-shadow: 0 10rpx 22rpx rgba(40, 67, 146, 0.16);
|
|
}
|
|
|
|
.podium-avatar.champion {
|
|
width: 128rpx;
|
|
height: 128rpx;
|
|
}
|
|
|
|
.podium-name {
|
|
margin-top: 16rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 800;
|
|
color: #20243a;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.podium-count {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #6b7280;
|
|
}
|
|
|
|
.podium-base {
|
|
margin: 22rpx -16rpx 0;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
border-radius: 0 0 20rpx 20rpx;
|
|
background: linear-gradient(135deg, #3655d9, #6c7dff);
|
|
font-size: 30rpx;
|
|
font-weight: 900;
|
|
color: rgba(255, 255, 255, 0.9);
|
|
}
|
|
|
|
.podium-first .podium-base {
|
|
background: linear-gradient(135deg, #37cfa8, #58b8ff);
|
|
}
|
|
|
|
.podium-second .podium-base {
|
|
background: linear-gradient(135deg, #75d6cf, #80a7ff);
|
|
}
|
|
|
|
.podium-third .podium-base {
|
|
background: linear-gradient(135deg, #7fdcb9, #8f9fff);
|
|
}
|
|
|
|
.content-list {
|
|
width: 92%;
|
|
margin: -20rpx auto 0;
|
|
position: relative;
|
|
z-index: 4;
|
|
border-radius: 34rpx;
|
|
background: #fff;
|
|
box-shadow: 0 18rpx 40rpx rgba(38, 48, 80, 0.09);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.list-head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 32rpx 30rpx 22rpx;
|
|
}
|
|
|
|
.list-title {
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
color: #20243a;
|
|
}
|
|
|
|
.list-subtitle {
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
color: #99a1b3;
|
|
}
|
|
|
|
.list-total {
|
|
padding: 10rpx 20rpx;
|
|
border-radius: 999rpx;
|
|
background: #f1f5ff;
|
|
font-size: 24rpx;
|
|
color: #5772e8;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.empty-box {
|
|
padding: 48rpx 0 58rpx;
|
|
text-align: center;
|
|
color: #98a1b2;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.empty-box image {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.content-item {
|
|
min-height: 148rpx;
|
|
margin: 0 24rpx;
|
|
padding: 20rpx 0;
|
|
box-sizing: border-box;
|
|
font-size: 30rpx;
|
|
border-top: 1px solid #f1f2f6;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.rank-badge {
|
|
width: 58rpx;
|
|
height: 58rpx;
|
|
margin-right: 18rpx;
|
|
border-radius: 18rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f5f6fa;
|
|
color: #8b93a7;
|
|
font-size: 26rpx;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.rank-first {
|
|
background: #fff6d9;
|
|
}
|
|
|
|
.rank-second {
|
|
background: #f0f4fa;
|
|
}
|
|
|
|
.rank-third {
|
|
background: #fff0df;
|
|
}
|
|
|
|
.box-avatar {
|
|
width: 94rpx;
|
|
height: 94rpx;
|
|
margin-right: 22rpx;
|
|
border-radius: 50%;
|
|
background: #f4f6fb;
|
|
}
|
|
|
|
.box-right {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.box-right-num {
|
|
color: #20243a;
|
|
font-weight: 800;
|
|
font-size: 30rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.box-right-name {
|
|
margin-top: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #9aa2b4;
|
|
}
|
|
|
|
.order-pill {
|
|
min-width: 112rpx;
|
|
padding: 12rpx 18rpx;
|
|
border-radius: 999rpx;
|
|
background: linear-gradient(135deg, #fff7e2, #fff0d2);
|
|
color: #9b6517;
|
|
font-size: 24rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.order-pill text {
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
color: #ff9818;
|
|
}
|
|
</style>
|