From a3a48da30bdea132d2bfbb47fa2ccf83f1937c45 Mon Sep 17 00:00:00 2001
From: queenwuli <942534046@qq.com>
Date: Tue, 19 Jan 2021 08:29:55 +0800
Subject: [PATCH] 提交
---
hive-app/pages/manager/storeRanking.vue | 211 ++++++++++++++++++++++++++++++++++++++--------------
1 files changed, 154 insertions(+), 57 deletions(-)
diff --git a/hive-app/pages/manager/storeRanking.vue b/hive-app/pages/manager/storeRanking.vue
index 0d426e3..12643ff 100644
--- a/hive-app/pages/manager/storeRanking.vue
+++ b/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.png"></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.png"></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.png"></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>
--
Gitblit v1.9.1