From 31a5566dd7ff56a3405ce79a764cd9e3d63154c9 Mon Sep 17 00:00:00 2001
From: li-guang <153605324@qq.com>
Date: Wed, 23 Dec 2020 16:21:11 +0800
Subject: [PATCH] 排行榜
---
hive-app/pages/manager/index.vue | 12
hive-app/static/images/small-medal1.png | 0
hive-app/pages.json | 52 +++++++
hive-app/static/images/medal2.png | 0
hive-app/static/images/ranking.png | 0
hive-app/static/images/small-medal3.png | 0
hive-app/pages/manager/counselorRanking.vue | 147 +++++++++++++++++++++
hive-app/static/images/crown.png | 0
hive-app/static/images/medal1.png | 0
hive-app/static/images/small-medal2.png | 0
hive-app/pages/login/index.vue | 58 ++++++-
hive-app/common/styles/index.css | 3
hive-app/static/images/medal3.png | 0
hive-app/pages/manager/storeRanking.vue | 109 +++++++++++++++
14 files changed, 365 insertions(+), 16 deletions(-)
diff --git a/hive-app/common/styles/index.css b/hive-app/common/styles/index.css
index 6482a8e..d09494f 100644
--- a/hive-app/common/styles/index.css
+++ b/hive-app/common/styles/index.css
@@ -33,6 +33,9 @@
.ml-20{
margin-left: 20px;
}
+.ml-30{
+ margin-left: 30px;
+}
.mr-0{
margin-right: 0;
diff --git a/hive-app/pages.json b/hive-app/pages.json
index e2ab8de..66b9598 100644
--- a/hive-app/pages.json
+++ b/hive-app/pages.json
@@ -286,6 +286,58 @@
"scrollIndicator": "none"
}
}
+ },
+ {
+ "path": "pages/manager/storeRanking",
+ "style": {
+ "navigationBarTitleText": "门店业绩排行榜",
+ "navigationBarBackgroundColor":"#FFFFFF",
+ "navigationBarTextStyle":"black",
+ "app-plus":{
+ "scrollIndicator": "none",
+ "titleNView": {
+ "buttons": [
+ {
+ "text": "\ue6aa",
+ "fontSrc": "/static/iconfont/iconfont.ttf",
+ "fontSize": "16px",
+ "width":"25px",
+ "float":"right"
+ },
+ {
+ "text":"月榜",
+ "fontSize": "14px"
+ }
+ ]
+ }
+ }
+ }
+ },
+ {
+ "path": "pages/manager/counselorRanking",
+ "style": {
+ "navigationBarTitleText": "业绩排行榜",
+ "navigationBarBackgroundColor":"#518EFF",
+ "navigationBarTextStyle":"white",
+ "app-plus":{
+ "scrollIndicator": "none",
+ "titleNView": {
+ "buttons": [
+ {
+ "text": "\ue6aa",
+ "fontSrc": "/static/iconfont/iconfont.ttf",
+ "fontSize": "16px",
+ "width":"25px",
+ "float":"right"
+ },
+ {
+ "text":"月榜",
+ "fontSize": "14px"
+ }
+ ]
+ }
+ }
+ }
}
],
"globalStyle": {
diff --git a/hive-app/pages/login/index.vue b/hive-app/pages/login/index.vue
index 5fd2660..83a4788 100644
--- a/hive-app/pages/login/index.vue
+++ b/hive-app/pages/login/index.vue
@@ -1,9 +1,24 @@
<template>
<!-- 登录 -->
<view>
- <view class="login-box">
- <input v-model="username" placeholder="输入账号" class="login-input" maxlength="60"/>
- <input v-model="password" placeholder="输入密码" class="login-input mt-20" maxlength="60"/>
+ <!-- #ifndef H5 -->
+ <view class="status_bar"></view>
+ <!-- #endif -->
+ <view class="login-header flex flex-v align-center">
+ <view class="login-img"></view>
+ <text class="font-20 white mt-10">蜂巢美业</text>
+ </view>
+ <view class="login-box center">
+ <text class="font-20 blue font-bold">登录</text>
+ <input v-model="username" placeholder="请输入账号" placeholder-class="placeholder" class="input-group-row left mt-20" maxlength="60"/>
+ <view class="input-group-row">
+ <input v-model="password" placeholder="请输入密码" placeholder-class="placeholder" class="input-left" maxlength="60"/>
+ <text class="iconfont iconyanjing font-14 gray"></text>
+ </view>
+ <view class="right mt-5">
+ <text class="font-14 blue">忘记密码?</text>
+ </view>
+
<button :disabled="isDisabled" class="blue-btn mt-20" @click="login">登录</button>
</view>
</view>
@@ -64,19 +79,42 @@
</script>
<style>
- .login-box{
- padding: 30px;
- box-sizing: border-box;
- width: 100%;
- position: absolute;
- bottom: 40px;
+ .status_bar{
+ background: #518EFF;
}
- .login-input{
+ .login-header{
+ background: #518EFF;
+ border-bottom-left-radius: 20px;
+ border-bottom-right-radius: 20px;
+ padding: 60px 0 80px;
+ }
+ .login-img{
+ width: 72px;
+ height: 72px;
+ background: #FFFFFF;
+ border-radius: 8px;
+ }
+ .login-box{
+ background: #FFFFFF;
+ padding:20px;
+ box-sizing: border-box;
+ position: absolute;
+ left: 10px;
+ right: 10px;
+ bottom: 150px;
+ border: 1px solid #EDEAF4;
+ border-radius: 4px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ }
+ /* .login-input{
border: 1px solid #ABB1CC;
border-radius: 20px;
text-align: center;
padding: 10px 0;
font-size: 14px;
+ } */
+ .input-left{
+ text-align: left;
}
.blue-btn{
background: #2483ff;
diff --git a/hive-app/pages/manager/counselorRanking.vue b/hive-app/pages/manager/counselorRanking.vue
new file mode 100644
index 0000000..484efd5
--- /dev/null
+++ b/hive-app/pages/manager/counselorRanking.vue
@@ -0,0 +1,147 @@
+<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="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="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>
+ </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="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>
+ </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="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>
+ </view>
+ </view>
+ <view class="content">
+ <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>
+ <view class="ml-20 flex flex-v">
+ <text class="font-14">我的</text>
+ <text class="font-12 gray mt-5">第32名</text>
+ </view>
+ </view>
+ <text>￥6,020</text>
+ </view>
+ </view>
+ <view class="content">
+ <view class="content-row flex align-center justify-between" v-for="item in 4">
+ <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>
+ </view>
+ <text>￥6,020</text>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default{
+ data(){
+ return{
+ isShow:false,
+ Crunchies:['年榜','月榜','日榜']
+ }
+ },
+ methods:{
+ onNavigationBarButtonTap(e) {
+ this.isShow=!this.isShow
+ },
+ }
+ }
+</script>
+
+<style>
+ .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%;
+ }
+ .drop-down{
+ width: 56px;
+ background: #FFFFFF;
+ border-radius: 4px;
+ padding: 0 5px;
+ position: absolute;
+ right: 15px;
+ top: -10px;
+ z-index: 999;
+ }
+ .drop-down-row{
+ border-bottom: 1px solid #EDEAF4;
+ padding: 5px 0;
+ }
+ .drop-down-row:nth-last-child(1){
+ border: 0;
+ }
+</style>
diff --git a/hive-app/pages/manager/index.vue b/hive-app/pages/manager/index.vue
index f86dbe6..8e60ba5 100644
--- a/hive-app/pages/manager/index.vue
+++ b/hive-app/pages/manager/index.vue
@@ -5,18 +5,18 @@
<view class="content-item">
<text class="title">排行榜</text>
<view class="flex align-center mt-10">
- <view class="flex flex-v align-center list-item">
+ <navigator url="./storeRanking" class="flex flex-v align-center list-item" hover-class="none">
<image class="content-icon" src="../../static/images/statement1.png"></image>
<text class="font-12 font-dark">门店业绩排行榜</text>
- </view>
- <view class="flex flex-v align-center list-item">
+ </navigator>
+ <navigator url="./counselorRanking" hover-class="none" class="flex flex-v align-center list-item">
<image class="content-icon" src="../../static/images/statement2.png"></image>
<text class="font-12 font-dark">顾问业绩排行榜</text>
- </view>
- <view class="flex flex-v align-center list-item">
+ </navigator>
+ <navigator url="./beautyTherapistsRanking" hover-class="none" class="flex flex-v align-center list-item">
<image class="content-icon" src="../../static/images/statement3.png"></image>
<text class="font-12 font-dark">美疗师业绩排行榜</text>
- </view>
+ </navigator>
</view>
</view>
<view class="content-item">
diff --git a/hive-app/pages/manager/storeRanking.vue b/hive-app/pages/manager/storeRanking.vue
new file mode 100644
index 0000000..fd92084
--- /dev/null
+++ b/hive-app/pages/manager/storeRanking.vue
@@ -0,0 +1,109 @@
+<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>
+ <view>
+ <h-tabs
+ class="tab"
+ :tabData="tabs"
+ :config="{
+ color: '#abb1cc',
+ activeColor: '#518EFF',
+ underLineColor: '#518EFF',
+ underLineHeight: 6,
+ fontSize: '28',
+ underLineWidth: 60,
+ }"
+ />
+ </view>
+ <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>
+ </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>
+ </view>
+ </view>
+
+ </view>
+</template>
+
+<script>
+ import HTabs from "@/components/liuyuno-tabs/liuyuno-tabs.vue";
+ export default {
+ components: {
+ HTabs
+ },
+ data() {
+ return {
+ tabs:[
+ {
+ state: 1,
+ name: '销售榜'
+ },
+ {
+ state: 2,
+ name: '消耗榜'
+ }
+ ],
+ }
+ }
+ }
+</script>
+
+<style>
+ .header{
+ background: url(../../static/images/ranking.png) no-repeat;
+ background-size: 100% 100%;
+ padding: 30px;
+ }
+ .content{
+ padding: 0 10px;
+ }
+ .content-row{
+ border: 1px solid #EDEAF4;
+ border-radius: 4px;
+ box-shadow:0 6px 6px rgba(237,234,244,0.5);
+ padding: 0 10px;
+ }
+ .content-row-left{
+ padding: 10px 0;
+ }
+ .medal{
+ width: 36px;
+ }
+ .row-img{
+ width: 64px;
+ height: 64px;
+ border-radius: 50%;
+ }
+</style>
diff --git a/hive-app/static/images/crown.png b/hive-app/static/images/crown.png
new file mode 100644
index 0000000..981bf90
--- /dev/null
+++ b/hive-app/static/images/crown.png
Binary files differ
diff --git a/hive-app/static/images/medal1.png b/hive-app/static/images/medal1.png
new file mode 100644
index 0000000..819b5c6
--- /dev/null
+++ b/hive-app/static/images/medal1.png
Binary files differ
diff --git a/hive-app/static/images/medal2.png b/hive-app/static/images/medal2.png
new file mode 100644
index 0000000..dd50541
--- /dev/null
+++ b/hive-app/static/images/medal2.png
Binary files differ
diff --git a/hive-app/static/images/medal3.png b/hive-app/static/images/medal3.png
new file mode 100644
index 0000000..071c477
--- /dev/null
+++ b/hive-app/static/images/medal3.png
Binary files differ
diff --git a/hive-app/static/images/ranking.png b/hive-app/static/images/ranking.png
new file mode 100644
index 0000000..641bc96
--- /dev/null
+++ b/hive-app/static/images/ranking.png
Binary files differ
diff --git a/hive-app/static/images/small-medal1.png b/hive-app/static/images/small-medal1.png
new file mode 100644
index 0000000..636145e
--- /dev/null
+++ b/hive-app/static/images/small-medal1.png
Binary files differ
diff --git a/hive-app/static/images/small-medal2.png b/hive-app/static/images/small-medal2.png
new file mode 100644
index 0000000..fb206a0
--- /dev/null
+++ b/hive-app/static/images/small-medal2.png
Binary files differ
diff --git a/hive-app/static/images/small-medal3.png b/hive-app/static/images/small-medal3.png
new file mode 100644
index 0000000..f23c30f
--- /dev/null
+++ b/hive-app/static/images/small-medal3.png
Binary files differ
--
Gitblit v1.9.1