Browse Source

Merge branch 'guoqiang' into develop

pull/8/head
zhaoguoqiang 3 years ago
parent
commit
6825da221e
  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

@ -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

@ -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

@ -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

@ -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

@ -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

@ -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>
Loading…
Cancel
Save