<template>
|
<!-- 顾问排行榜 -->
|
<view class="container" @click="isShowFilter = false">
|
<view class="header flex justify-around" v-if="list.length">
|
<view class="flex flex-1 flex-v align-center mt-20">
|
<view class="img-box flex align-center justify-center">
|
<image class="header-img" :src="secondPlace.photo?secondPlace.photo:'../../static/images/default-avatar.png'"></image>
|
<image class="ranking-img" mode="widthFix" src="../../static/images/small-medal2.png"></image>
|
</view>
|
<text class="font-12 white mt-5">{{secondPlace.name}} - {{secondPlace.shopName}}</text>
|
<text class="font-16 white mt-5">￥{{secondPlace.amount | formatNum}}</text>
|
</view>
|
<view class="flex flex-1 flex-v align-center">
|
<view class="img-box flex align-center justify-center">
|
<image class="header-img" :src="firstPlace.photo?firstPlace.photo:'../../static/images/default-avatar.png'"></image>
|
<image class="ranking-img" mode="widthFix" src="../../static/images/small-medal1.png"></image>
|
<image class="crown-img" mode="widthFix" src="../../static/images/crown.png"></image>
|
</view>
|
<text class="font-12 white mt-5">{{firstPlace.name}} - {{firstPlace.shopName}}</text>
|
<text class="font-16 white mt-5">￥{{firstPlace.amount | formatNum}}</text>
|
</view>
|
<view class="flex flex-1 flex-v align-center mt-20">
|
<view class="img-box flex align-center justify-center">
|
<image class="header-img" :src="thirdPlace.photo?thirdPlace.photo:'../../static/images/default-avatar.png'"></image>
|
<image class="ranking-img" mode="widthFix" src="../../static/images/small-medal3.png"></image>
|
</view>
|
<text class="font-12 white mt-5">{{thirdPlace.name}} - {{thirdPlace.shopName}}</text>
|
<text class="font-16 white mt-5">￥{{thirdPlace.amount | formatNum}}</text>
|
</view>
|
</view>
|
<view class="content" v-if="selfPlace">
|
<view class="content-row flex align-center justify-between">
|
<view class="flex align-center">
|
<text class="rank blue font-bold">{{selfPlace.rank}}</text>
|
<image class="content-img" :src="selfPlace.photo?selfPlace.photo:'../../static/images/default-avatar.png'"></image>
|
<view class="ml-20 flex flex-v">
|
<text class="font-14">{{selfPlace.name}}</text>
|
<text class="font-12 gray mt-5">{{selfPlace.shopName}}</text>
|
</view>
|
</view>
|
<text>￥{{selfPlace.amount}}</text>
|
</view>
|
</view>
|
<view class="content" v-if="otherList.length">
|
<view class="content-row flex align-center justify-between" v-for="(item, index) in otherList">
|
<view class="flex align-center">
|
<text class="rank">{{index+4}}</text>
|
<image class="content-img" :src="item.photo?item.photo:'../../static/images/default-avatar.png'"></image>
|
<view class="ml-20 flex flex-v">
|
<text class="font-14">{{item.name}}</text>
|
<text class="font-12 gray mt-5">{{item.shopName}}</text>
|
</view>
|
</view>
|
<text>￥{{item.amount}}</text>
|
</view>
|
</view>
|
<no-record :isShow="!otherList.length && !selfPlace" txt="暂无业绩排名"></no-record>
|
<view class="drop-down" v-show="isShowFilter">
|
<view class="drop-down-row" v-for="item in timeList">
|
<text @click="timeChange(item)">{{item.label}}</text>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default{
|
data(){
|
return{
|
pageType: 1, //1 顾问业绩排行榜 2美疗师业绩排行榜
|
isShowFilter:false,
|
timeList: [{
|
label: '年榜',
|
value: 3
|
},{
|
label: '月榜',
|
value: 2
|
},{
|
label: '日榜',
|
value: 1
|
}],
|
type: 2,
|
list: [],
|
userId: ''
|
}
|
},
|
computed:{
|
firstPlace(){
|
if(this.list.length){
|
return this.list[0]
|
}
|
return {}
|
},
|
secondPlace(){
|
if(this.list.length>1){
|
return this.list[1]
|
}
|
return {}
|
},
|
thirdPlace(){
|
if(this.list.length>2){
|
return this.list[2]
|
}
|
return {}
|
},
|
selfPlace(){
|
let result = '';
|
this.list.forEach((item, index) => {
|
if(item.id == this.userId){
|
Object.assign(item, {rank: index+1});
|
result = item;
|
}
|
});
|
return result
|
},
|
otherList(){
|
return this.list.filter((item, index) => index >= 3)
|
}
|
},
|
onNavigationBarButtonTap(e) {
|
this.isShowFilter=!this.isShowFilter;
|
},
|
onLoad(options) {
|
this.userId = this.$httpUtils.getRoleInfo().id;
|
this.pageType = options.type;
|
uni.setNavigationBarTitle({
|
title: options.name
|
});
|
this.loadList()
|
},
|
methods:{
|
timeChange(item){
|
this.isShowFilter = false;
|
if(this.type == item.value){
|
return;
|
}
|
this.type = item.value;
|
// #ifdef APP-PLUS
|
let webView = this.$mp.page.$getAppWebview();
|
webView.setTitleNViewButtonStyle(1, {
|
text: item.label,
|
});
|
// #endif
|
this.loadList();
|
},
|
loadList(){
|
let url = '';
|
if(this.pageType == 1){
|
url = '/api/ranking/findStaffAchieveRanking'
|
}else{
|
url = '/api/ranking/findBeauticianAchieveRanking'
|
}
|
this.$httpUtils.request(url,{
|
type: this.type
|
},'POST').then((res) => {
|
if(res.status == 200){
|
this.list = res.rows;
|
}else{
|
this.list = [];
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style>
|
page{
|
height: 100%;
|
}
|
.container{
|
min-height: 100%;
|
}
|
.header{
|
background: #518EFF;
|
border-bottom-left-radius: 20px;
|
border-bottom-right-radius: 20px;
|
padding: 15px 0;
|
}
|
.img-box{
|
width: 72px;
|
height: 72px;
|
position: relative;
|
border-radius: 50%;
|
background: #a8c6ff;
|
}
|
.header-img{
|
width: 64px;
|
height: 64px;
|
border-radius: 50%;
|
}
|
.ranking-img{
|
width: 18px;
|
position: absolute;
|
bottom: 0;
|
left: 45px;
|
}
|
.crown-img{
|
width: 35px;
|
position: absolute;
|
top: -15px;
|
left: 40px;
|
}
|
.content{
|
border: 1px solid #EDEAF4;
|
border-radius: 4px;
|
box-shadow:0 6px 6px rgba(237,234,244,0.5);
|
margin: 10px;
|
padding: 0 15px;
|
}
|
.content-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 10px 0;
|
}
|
.content-row:nth-last-child(1){
|
border: 0;
|
}
|
.content-img{
|
width: 48px;
|
height: 48px;
|
border-radius: 50%;
|
}
|
.rank{
|
width: 30px;
|
font-size: 15px;
|
}
|
.drop-down{
|
width: 56px;
|
background: #F6F6F8;
|
border-radius: 4px;
|
padding: 0 5px;
|
position: fixed;
|
right: 10px;
|
top: 0;
|
z-index: 99;
|
color: #a5abaf;
|
font-size: 12px;
|
}
|
.drop-down-row{
|
border-bottom: 1px solid #EDEAF4;
|
padding: 5px 0;
|
text-align: center;
|
}
|
.drop-down-row:nth-last-child(1){
|
border: 0;
|
}
|
</style>
|
