develop
/
qwl-data-report-h5
10
0
Fork 1
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Merge branch 'guoqiang' into develop

pull/8/head
zhaoguoqiang 3 years ago
parent
99e84d442d bdfb7e51e4
commit
6825da221e
6 changed files with 666 additions and 28 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      src/api/data.js
  2. 13
      src/router/index.js
  3. 46
      src/views/dataOverview/index.vue
  4. 28
      src/views/login.vue
  5. 212
      src/views/teamList/index.vue
  6. 391
      src/views/teamPerformance/index.vue

4
src/api/data.js
View File

@ -15,6 +15,10 @@ class data{
async dataDistribution(){
return await get("/admin/DataReport/ShopDataReport/dataDistribution")
}
//全国服务商数据
async poxyList(param){
return await get("/admin/DataReport/ShopDataReport/poxyList",param)
}
}
export default new data()

13
src/router/index.js
View File

@ -47,6 +47,19 @@ const routes = [{
name: 'dataOverview',
component: () => import('../views/dataOverview/index.vue'),
},
{
path: "/teamList",
name: 'teamList',
component: () => import('../views/teamList/index.vue'),
meta: {
// title: '列表'
}
},
{
path: "/teamPerformance",
name: 'teamPerformance',
component: () => import('../views/teamPerformance/index.vue'),
},
];
const router = new VueRouter({

46
src/views/dataOverview/index.vue
View File

@ -9,7 +9,7 @@
<p class="title">服务商总数量</p>
<p class="num">{{list.level_count | capitalize}}</p>
<div class="list">
<div class="item">
<div class="item" @click="toTeamList('1','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
@ -18,7 +18,7 @@
<p class="num">{{list.level_5}}</p>
</div>
</div>
<div class="item">
<div class="item" @click="toTeamList('1','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
@ -27,7 +27,7 @@
<p class="num">{{list.level_4}}</p>
</div>
</div>
<div class="item">
<div class="item" @click="toTeamList('1','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
@ -36,7 +36,7 @@
<p class="num">{{list.level_3}}</p>
</div>
</div>
<div class="item">
<div class="item" @click="toTeamList('1','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
@ -45,7 +45,7 @@
<p class="num">{{list.level_2}}</p>
</div>
</div>
<div class="item" style="margin-bottom:0px">
<div class="item" style="margin-bottom:0px" @click="toTeamList('1','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
</div>
@ -59,7 +59,7 @@
<div class="providersSum1 providersSum">
<p class="title">本月新增服务商</p>
<div class="list">
<div class="item">
<div class="item" @click="toTeamList('2','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
@ -68,7 +68,7 @@
<p class="num">{{list.month_add_level_5}}</p>
</div>
</div>
<div class="item">
<div class="item" @click="toTeamList('2','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
@ -77,7 +77,7 @@
<p class="num">{{list.month_add_level_4}}</p>
</div>
</div>
<div class="item">
<div class="item" @click="toTeamList('2','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
@ -86,7 +86,7 @@
<p class="num">{{list.month_add_level_3}}</p>
</div>
</div>
<div class="item">
<div class="item" @click="toTeamList('2','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
@ -95,7 +95,7 @@
<p class="num">{{list.month_add_level_2}}</p>
</div>
</div>
<div class="item" style="margin-bottom:0px">
<div class="item" style="margin-bottom:0px" @click="toTeamList('2','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
</div>
@ -110,7 +110,7 @@
<div class="moneyRanking">
<div class="title">本月团队业绩排名TOP</div>
<div class="list">
<div class="item" v-for="(item,index) of list.month_money_top" :key="index">
<div class="item" @click="toTeamPerformance" v-for="(item,index) of list.month_money_top" :key="index">
<div class="rankNum">
<p>{{index+1}}</p>
</div>
@ -139,7 +139,7 @@
filters: {
capitalize: function (val) {
return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
}
},
},
created() {
this.getData()
@ -150,6 +150,24 @@
this.list = res.data
console.log(this.list, '---this.list');
},
toTeamList(type, id) {
this.$router.push({
path: '/teamList',
query: {
type: type,
level_id: id,
}
})
},
toTeamPerformance(){
// this.$router.push({
// path: '/teamPerformance',
// query: {
// // type: type,
// // level_id: id,
// }
// })
},
}
}
</script>
@ -354,8 +372,8 @@
height: 26px;
line-height: 26px;
margin-bottom: 10px;
overflow: hidden;
width: 320px;
overflow: hidden;
width: 320px;
}
.teamMoney {

28
src/views/login.vue
View File

@ -6,22 +6,22 @@
let url = this.$route.query;
let token;
let url_string = JSON.stringify(url);
if (url_string == "{}") {
this.$toast('请先登录')
} else {
token = url.token_type + " " + url.access_token;
this.$store.commit("user/setToken", token);
this.$router.push({
path: "/home",
});
}
// token =
// "bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC90ZXN0LnFpbmd3ZWlsYWk4ODgueHl6XC9hZG1pblwvbG9naW4iLCJpYXQiOjE2Mjc0NjU1ODksImV4cCI6MTk4NzQ2NTU4OSwibmJmIjoxNjI3NDY1NTg5LCJqdGkiOiJ6clVHYnJCOXlPWkpRanRUIiwic3ViIjoxNjEsInBydiI6IjBiMzZjMGUwMjMyZGVlZTlkOTZhZDA0NGY3YWE2MjQ2YTUwYTU3ZmEifQ.aFc5fCUffmDN7zBRn-D13kx1LuLNG1Ej7vQOu4O2_AA"
// this.$store.commit("user/setToken", token);
// this.$router.push({
// if (url_string == "{}") {
// this.$toast('请先登录')
// } else {
// token = url.token_type + " " + url.access_token;
// this.$store.commit("user/setToken", token);
// this.$router.push({
// path: "/home",
// });
// }
token =
"bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJodHRwOlwvXC90ZXN0LnFpbmd3ZWlsYWk4ODgueHl6XC9hZG1pblwvbG9naW4iLCJpYXQiOjE2Mjc0NjU1ODksImV4cCI6MTk4NzQ2NTU4OSwibmJmIjoxNjI3NDY1NTg5LCJqdGkiOiJ6clVHYnJCOXlPWkpRanRUIiwic3ViIjoxNjEsInBydiI6IjBiMzZjMGUwMjMyZGVlZTlkOTZhZDA0NGY3YWE2MjQ2YTUwYTU3ZmEifQ.aFc5fCUffmDN7zBRn-D13kx1LuLNG1Ej7vQOu4O2_AA"
this.$store.commit("user/setToken", token);
this.$router.push({
path: "/home",
});
},
};
</script>

212
src/views/teamList/index.vue
View File

@ -0,0 +1,212 @@
<template>
<div class="teamList">
<div v-if="list.data.length>0" class="moneyRanking">
<!-- <p class="title">{{this.$route.query.level_id | capitalize2}}</p> -->
<div class="list">
<van-list v-model="list.loading" :finished="list.finished" :error.sync="error" error-text="请求失败，点击重新加载"
finished-text="没有更多了" @load="onLoad">
<div class="item" v-for="(item,index) of list.data" :key="index">
<div class="rankNum">
<p>{{index+1}}</p>
</div>
<div class="teamImg">
<img :src="item.headimg" alt="">
</div>
<div class="teamInfo">
<div class="teamName">{{item.username}}</div>
<div class="teamMoney">7月打款业绩：{{item.team_integral | capitalize}}</div>
<div class="teamNum">团队人数：{{item.team_num}}</div>
</div>
</div>
</van-list>
</div>
</div>
<van-empty class="empty" v-else image="search" description="暂无数据" image-size="180px" />
</div>
</template>
<script>
import data from "@/api/data.js";
import {
Tab,
Tabs,
Empty
} from 'vant';
export default {
data() {
return {
list: {
loading: false,
finished: false,
data: [],
curPage: 0,
totalPage: 1,
},
error: false,
type:'',
level_id:'',
}
},
filters: {
capitalize: function (val) {
return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
},
capitalize2: function (index) {
let key = Number(index-1)
const statusList = [
"vip",
"总代",
"合伙人",
"分公司",
"股东",
];
return statusList[key];
}
},
created() {
this.getList()
},
methods: {
async getList() {
const res = await data.poxyList({
type: this.$route.query.type,
level_id: this.$route.query.level_id,
page:++this.list.curPage,
})
const information = res.data.data
if (JSON.stringify(information.data) != '[]') {
this.list.data.push(...information.data);
this.list.totalPage = information.last_page;
this.list.loading = false
if (this.list.curPage >= this.list.totalPage) {
this.list.finished = true;
}
this.$nextTick(() => {
this.list.loading = false;
});
} else {
this.$nextTick(() => {
this.list.loading = false;
this.list.finished = true;
});
}
},
addList() {
},
onLoad() {
var _this = this;
clearTimeout(this.timmer);
console.log(`我在这里`);
_this.timmer = setTimeout(function () {
_this.getList()
}, 300);
this.list.loading = false;
},
}
}
</script>
<style lang="scss" scoped>
.teamList {
min-height: 100vh;
background: RGBA(63, 66, 88, 1);
position: relative;
.empty{
position: absolute;
top: 20%;
left:50%;
transform: translateX(-50%);
}
.moneyRanking {
min-height: 100vh;
background: RGBA(63, 66, 88, 1);
padding: 0 70px;
padding-top: 50px;
.title {
font-size: 40px;
height: 40px;
line-height: 40px;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 33px;
}
.list {
padding-bottom: 50px;
.item {
width: 610px;
height: 160px;
background: linear-gradient(90deg, #729EFF, #5D48E1);
border-radius: 20px;
margin: 0 auto;
display: flex;
margin-bottom: 26px;
.rankNum {
width: 95px;
p {
height: 100%;
font-size: 40px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 160px;
text-align: center;
}
}
.teamImg {
width: 160px;
padding: 15px 0;
img {
background: #fff;
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
}
}
.teamInfo {
padding: 29px 0;
padding-left: 22px;
.teamName {
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
height: 26px;
line-height: 26px;
margin-bottom: 10px;
overflow: hidden;
width: 320px;
}
.teamMoney {
height: 26px;
line-height: 26px;
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 10px;
}
.teamNum {
height: 26px;
line-height: 26px;
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
}
}
</style>

391
src/views/teamPerformance/index.vue
View File

@ -0,0 +1,391 @@
<template>
<div class="dataOverview">
<div class="top">
<p class="title">2021年总业绩</p>
<p class="money">¥{{list.year_count | capitalize}}</p>
<p class="monthMoney">本月业绩：{{list.month_count | capitalize}}</p>
</div>
<div class="providersSum">
<p class="title">服务商总数量</p>
<p class="num">{{list.level_count | capitalize}}</p>
<div class="list">
<div class="item" @click="toTeamList('1','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
<div class="right">
<p class="name">股东</p>
<p class="num">{{list.level_5}}</p>
</div>
</div>
<div class="item" @click="toTeamList('1','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
<div class="right">
<p class="name">分公司</p>
<p class="num">{{list.level_4}}</p>
</div>
</div>
<div class="item" @click="toTeamList('1','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
<div class="right">
<p class="name">合伙人</p>
<p class="num">{{list.level_3}}</p>
</div>
</div>
<div class="item" @click="toTeamList('1','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
<div class="right">
<p class="name">总代</p>
<p class="num">{{list.level_2}}</p>
</div>
</div>
<div class="item" style="margin-bottom:0px" @click="toTeamList('1','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
</div>
<div class="right">
<p class="name">vip</p>
<p class="num">{{list.level_1}}</p>
</div>
</div>
</div>
</div>
<div class="providersSum1 providersSum">
<p class="title">本月新增服务商</p>
<div class="list">
<div class="item" @click="toTeamList('2','5')">
<div class="left">
<img src="../../assets/shareholder.svg" alt="">
</div>
<div class="right">
<p class="name">股东</p>
<p class="num">{{list.month_add_level_5}}</p>
</div>
</div>
<div class="item" @click="toTeamList('2','4')">
<div class="left">
<img src="../../assets/filiale.svg" alt="">
</div>
<div class="right">
<p class="name">分公司</p>
<p class="num">{{list.month_add_level_4}}</p>
</div>
</div>
<div class="item" @click="toTeamList('2','3')">
<div class="left">
<img src="../../assets/partner.svg" alt="">
</div>
<div class="right">
<p class="name">合伙人</p>
<p class="num">{{list.month_add_level_3}}</p>
</div>
</div>
<div class="item" @click="toTeamList('2','2')">
<div class="left">
<img src="../../assets/general.svg" alt="">
</div>
<div class="right">
<p class="name">总代</p>
<p class="num">{{list.month_add_level_2}}</p>
</div>
</div>
<div class="item" style="margin-bottom:0px" @click="toTeamList('2','1')">
<div class="left">
<img src="../../assets/vip.svg" alt="">
</div>
<div class="right">
<p class="name">vip</p>
<p class="num">{{list.month_add_level_1}}</p>
</div>
</div>
</div>
</div>
<div class="moneyRanking">
<div class="title">本月团队业绩排名TOP</div>
<div class="list">
<div class="item" v-for="(item,index) of list.month_money_top" :key="index">
<div class="rankNum">
<p>{{index+1}}</p>
</div>
<div class="teamImg">
<img :src="item.headimg" alt="">
</div>
<div class="teamInfo">
<div class="teamName">{{item.username}}</div>
<div class="teamMoney">7月打款业绩：{{item.team_integral | capitalize}}</div>
<div class="teamNum">团队人数：{{item.team_num}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import data from "@/api/data.js";
export default {
name: "dataOverview",
data() {
return {
list: {},
}
},
filters: {
capitalize: function (val) {
return (+val || 0).toFixed(0).replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g, '$&,')
},
},
created() {
this.getData()
},
methods: {
async getData() {
const res = await data.overview();
this.list = res.data
console.log(this.list, '---this.list');
},
toTeamList(type, id) {
// this.$router.push({
// path: '/teamList',
// query: {
// type: type,
// level_id: id,
// }
// })
},
}
}
</script>
<style lang="scss" scoped>
.dataOverview {
background: #3C3F50;
.top {
width: 750px;
height: 334px;
background: linear-gradient(90deg, #729EFF, #5D48E1);
box-shadow: 0px 17px 35px 0px rgba(58, 61, 80, 0.2);
border-radius: 0px 0px 20px 20px;
padding: 0 70px;
padding-top: 46px;
margin-bottom: 50px;
.title {
height: 40px;
font-size: 40px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
height: 39px;
line-height: 40px;
margin-bottom: 20px;
}
.money {
height: 77px;
font-size: 76px;
font-family: OPPOSans;
font-weight: normal;
color: #FFFFFF;
line-height: 77px;
margin-bottom: 30px;
}
.monthMoney {
height: 74px;
background: rgba(255, 255, 255, .14);
border-radius: 37px;
font-size: 44px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 74px;
padding: 0 37px;
display: inline-block;
}
}
.providersSum {
padding: 50px 70px;
min-height: 580px;
background: RGBA(63, 66, 88, 1);
border-radius: 20px;
margin-bottom: 50px;
.title {
font-size: 40px;
font-weight: 400;
color: #FFFFFF;
line-height: 40px;
height: 40px;
margin-bottom: 23px;
}
.num {
font-size: 76px;
font-weight: normal;
color: #27F0F1;
line-height: 76px;
height: 76px;
margin-bottom: 36px;
}
.list {
display: flex;
justify-content: space-between;
flex-flow: wrap;
.item {
width: 272px;
height: 115px;
border-radius: 20px;
display: flex;
background: rgba(58, 61, 80, 0.36);
overflow: hidden;
margin-bottom: 26px;
.left {
width: 104px;
height: 115px;
background: #616595;
position: relative;
img {
width: 80px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.right {
width: 168px;
background: #616582;
padding-top: 19px;
padding-left: 18px;
.name {
font-size: 32px;
height: 32px;
line-height: 32px;
margin-bottom: 14px;
font-weight: 400;
color: #FFFFFF;
}
.num {
font-size: 40px;
height: 40px;
line-height: 40px;
font-weight: normal;
color: #FFFFFF;
}
}
}
}
}
.providersSum1 {
.title {
margin-bottom: 43px;
}
}
.moneyRanking {
padding: 0 70px;
padding-top: 50px;
background: RGBA(63, 66, 88, 1);
.title {
font-size: 40px;
height: 40px;
line-height: 40px;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 33px;
}
.list {
padding-bottom: 50px;
.item {
width: 610px;
height: 160px;
background: linear-gradient(90deg, #729EFF, #5D48E1);
border-radius: 20px;
margin: 0 auto;
display: flex;
margin-bottom: 26px;
.rankNum {
width: 95px;
p {
height: 100%;
font-size: 40px;
font-family: Microsoft YaHei;
font-weight: 400;
color: #FFFFFF;
line-height: 160px;
text-align: center;
}
}
.teamImg {
width: 160px;
padding: 15px 0;
img {
background: #fff;
width: 100%;
height: 100%;
display: block;
border-radius: 10px;
}
}
.teamInfo {
padding: 29px 0;
padding-left: 22px;
.teamName {
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
height: 26px;
line-height: 26px;
margin-bottom: 10px;
overflow: hidden;
width: 320px;
}
.teamMoney {
height: 26px;
line-height: 26px;
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
margin-bottom: 10px;
}
.teamNum {
height: 26px;
line-height: 26px;
font-size: 26px;
font-weight: 400;
color: #FFFFFF;
}
}
}
}
}
}
</style>
Write Preview
Loading…
Cancel
Save