gx

queenwuli

2020-12-30 bb6aebd55fc9a8039e1c199ae1ea8af4eb547b1b

 hive-app/pages/manager/counselorRanking.vue

@@ -1,61 +1,63 @@
<template>
   <!-- 顾问排行榜 -->
   <view>
      <!-- #ifndef H5 -->
      <view class="status_bar"></view>
      <!-- #endif -->
      <view class="drop-down gray font-12" v-show="isShow">
         <view class="drop-down-row center" v-for="item in Crunchies">
            <text>{{item}}</text>
         </view>
      </view>
      <view class="header flex justify-around">
   <view class="container" @click="isShowFilter = false">
      <view class="header flex justify-around" v-if="list.length">
         <view class="flex flex-v align-center mt-20">
            <view class="img-box flex align-center justify-center">
               <image class="header-img" src="../../static/images/head-img.jpg"></image>
               <image class="header-img" src="../../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">妍妍</text>
            <text class="font-16 white mt-5">￥9,020</text>
            <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-v align-center">
            <view class="img-box flex align-center justify-center">
               <image class="header-img" src="../../static/images/head-img.jpg"></image>
               <image class="header-img" src="../../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">倩倩</text>
            <text class="font-16 white mt-5">￥12,020</text>
            <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-v align-center mt-20">
            <view class="img-box flex align-center justify-center">
               <image class="header-img" src="../../static/images/head-img.jpg"></image>
               <image class="header-img" src="../../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">雯雯</text>
            <text class="font-16 white mt-5">￥6,020</text>
            <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">
      <view class="content" v-if="selfPlace">
         <view class="content-row flex align-center justify-between">
            <view class="flex align-center">
               <image class="content-img ml-30" src="../../static/images/head-img.jpg"></image>
               <text class="rank blue font-bold">{{selfPlace.rank}}</text>
               <image class="content-img" src="../../static/images/default-avatar.png"></image>
               <view class="ml-20 flex flex-v">
                  <text class="font-14">我的</text>
                  <text class="font-12 gray mt-5">第32名</text>
                  <text class="font-14">{{selfPlace.name}}</text>
                  <text class="font-12 gray mt-5">{{selfPlace.shopName}}</text>
               </view>
            </view>
            <text>￥6,020</text>
            <text>￥{{selfPlace.amount}}</text>
         </view>
      </view>
      <view class="content">
         <view class="content-row flex align-center justify-between" v-for="item in 4">
      <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="font-16">4</text>
               <image class="content-img ml-20" src="../../static/images/head-img.jpg"></image>
               <text class="font-14 ml-20">冯丽妍</text>
               <text class="rank">{{index+4}}</text>
               <image class="content-img" src="../../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>￥6,020</text>
            <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>
@@ -65,19 +67,110 @@
   export default{
      data(){
         return{
            isShow:false,
            Crunchies:['年榜','月榜','日榜']
            pageType: 1, //1 顾问业绩排行榜 2美疗师业绩排行榜
            isShowFilter:false,
            timeList: [{
               label: '年榜',
               value: 3
            },{
               label: '月榜',
               value: 2
            },{
               label: '日榜',
               value: 1
            }],
            type: 2,
            list: [],
            userId: ''
         }
      },
      methods:{
         onNavigationBarButtonTap(e) {
            this.isShow=!this.isShow
      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;
@@ -127,19 +220,26 @@
      height: 48px;
      border-radius: 50%;
   }
   .rank{
      width: 30px;
      font-size: 15px;
   }
   .drop-down{
      width: 56px;
      background: #FFFFFF;
      background: #F6F6F8;
      border-radius: 4px;
      padding: 0 5px;
      position: absolute;
      right: 15px;
      top: -10px;
      z-index: 999;
      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;