fix

Helius

2021-02-20 45fb4b11ad51bb38306765b11a6747402e382cee

 hive-app/pages/manager/storeRanking.vue

@@ -1,59 +1,42 @@
<template>
   <!-- 门店排行榜 -->
   <view>
      <view class="header flex justify-end">
         <view class="flex flex-v">
            <text class="font-16 white">总计</text>
            <text class="font-20 white mt-10">￥180，8088</text>
         </view>
   <view class="container" @click="isShowFilter = false">
      <view class="header">
         <view>总计</view>
         <view class="font-20">￥{{totalAmount | formatNum}}</view>
      </view>
      <view>
         <h-tabs
            class="tab"
            :tabData="tabs" 
            :config="{
               color: '#abb1cc',
               activeColor: '#518EFF',
               underLineColor: '#518EFF',
               underLineHeight: 6,
               fontSize: '28',
               underLineWidth: 60,
            }"
         />
      </view>
      <h-tabs
         class="tab"
         :tabData="tabs" 
         @tabClick="tabChange"
         :config="{
            color: '#abb1cc',
            activeColor: '#518EFF',
            underLineColor: '#518EFF',
            underLineHeight: 6,
            fontSize: '28',
            underLineWidth: 60,
         }"
      />
      <view class="content">
         <view class="content-row flex justify-between mt-10">
            <view class="flex align-center content-row-left">
               <image class="row-img" src="../../static/images/head-img.jpg"></image>
               <view class="flex flex-v ml-10">
                  <text class="font-16">时光秘境会所</text>
                  <text class="font-14 gray mt-10">￥23，960</text>
         <view class="content-row" v-for="(item, index) in list">
            <view class="flex align-center">
               <image class="avatar" :src="item.photo?item.photo:'../../static/images/no-img.png'"></image>
               <view>
                  <view class="title">{{item.name}}</view>
                  <view class="amount">￥{{item.amount | formatNum}}</view>
               </view>
            </view>
            <image class="medal" mode="widthFix" src="../../static/images/medal1.png"></image>
         </view>
         <view class="content-row flex justify-between mt-10">
            <view class="flex align-center content-row-left">
               <image class="row-img" src="../../static/images/head-img.jpg"></image>
               <view class="flex flex-v ml-10">
                  <text class="font-16">时光秘境会所</text>
                  <text class="font-14 gray mt-10">￥23，960</text>
               </view>
            </view>
            <image class="medal" mode="widthFix" src="../../static/images/medal2.png"></image>
         </view>
         <view class="content-row flex justify-between mt-10">
            <view class="flex align-center content-row-left">
               <image class="row-img" src="../../static/images/head-img.jpg"></image>
               <view class="flex flex-v ml-10">
                  <text class="font-16">时光秘境会所</text>
                  <text class="font-14 gray mt-10">￥23，960</text>
               </view>
            </view>
            <image class="medal" mode="widthFix" src="../../static/images/medal3.png"></image>
            <image v-if="index<3" class="medal" mode="widthFix" :src="'../../static/images/medal'+Number(index+1)+'.png'"></image>
            <view v-else class="rank">{{index+1}}</view>
         </view>
      </view>
		
      <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>
      <no-record :isShow="!list.length" txt="暂无榜单排名"></no-record>
   </view>
</template>

@@ -75,35 +58,149 @@
               name: '消耗榜'
            }
         ],
         dataType: 1,
         isShowFilter: false,
         timeList: [{
            label: '年榜',
            value: 3
         },{
            label: '月榜',
            value: 2
         },{
            label: '日榜',
            value: 1
         }],
         type: 2,
         list: []
        }  
      },
      computed:{
         totalAmount(){
            let total = 0;
            this.list.forEach((item) => {
               total += item.amount
            })
            return total;
         }
      },
      onLoad() {
         this.loadList()
      },
      onNavigationBarButtonTap(e) { 
         this.isShowFilter=!this.isShowFilter;
      },
      methods:{
         tabChange(e){
            if(this.dataType == e+1){
               return;
            }
            this.dataType = e + 1;
            this.loadList()
         },
         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(){
            this.$httpUtils.request('/api/ranking/findShopAchieveRanking',{
               dataType: this.dataType,
               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: url(../../static/images/ranking.png) no-repeat;
      background-size: 100% 100%;
      padding: 30px;
      padding: 30px 25px;
      line-height: 30px;
      text-align: right;
      color: #FFFFFF;
      font-size: 16px;
   }
   .content{
      padding: 0 10px;
      padding: 10px 10px 0;
   }
   .content-row{
      display: flex;
      align-items: center;
      justify-content: space-between;
      border: 1px solid #EDEAF4;
      border-radius: 4px;
      box-shadow:0 6px 6px rgba(237,234,244,0.5);
      padding: 0 10px;
      padding: 10px;
      margin-bottom: 10px;
   }
   .content-row-left{
      padding: 10px 0;
   .content-row .avatar{
      width: 60px;
      height: 60px;
      border-radius: 50%;
      margin-right: 10px;
   }
   .medal{
   .content-row .title{
      font-size: 16px;
      margin-bottom: 8px;
   }
   .content-row .amount{
      font-size: 14px;
      color: #a5abaf;
   }
   .content-row .medal{
      width: 36px;
   }
   .row-img{
      width: 64px;
      height: 64px;
   .content-row .rank{
      background: #F6F6F8;
      width: 36px;
      height: 36px;
      line-height: 36px;
      border-radius: 50%;
      text-align: center;
      color: #a5abaf;
      font-size: 16px;
   }
   .drop-down{
      width: 56px;
      background: #F6F6F8;
      border-radius: 4px;
      padding: 0 5px;
      position: absolute;
      right: 10px;
      top: 0;
      z-index: 999;
      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>