You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
523 lines
17 KiB
523 lines
17 KiB
<template>
|
|
<view class="assemble">
|
|
|
|
<!--自定义导航栏-->
|
|
<view class="navbar_section">
|
|
<view class="title">首页</view>
|
|
</view>
|
|
|
|
<view style="height: 20rpx;"></view>
|
|
|
|
<!-- 市场人员展示-->
|
|
<view class="div-style" v-if="infoData.role_type == 'market_type'">
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image src="@/static/images/index/danlan.png" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">本月业绩</view>
|
|
</view>
|
|
<view class="coach-message">
|
|
<view class="left1">
|
|
<view style="padding: 20rpx 0;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/huang.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">拉新总数</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.new_total}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lvs.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已分配</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.new_total}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/shenlan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">昨日拉新</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.yesterday_new}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">今日拉新</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.today_new}}人</view>
|
|
</view>
|
|
</view>
|
|
<!-- 统计图-->
|
|
<view class="right1">
|
|
<view style="text-align: center;">{{infoData.date_range}}</view>
|
|
<view class="statistics_box">
|
|
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar" :style="{ height: `${infoData.month.yesterday_new_rate}%`, background: '#f59a23' }"></view>
|
|
<view class="ratio" :style="{ color: infoData.month.yesterday_new_rate <= 0 ? '#333333' : '#000' }">{{ infoData.month.yesterday_new_rate }}%</view>
|
|
</view>
|
|
<view class="title">昨日</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar" :style="{ height: `${infoData.month.assigned_sales_rate}%`, background: '#039f64' }"></view>
|
|
<view class="ratio" :style="{ color: infoData.month.assigned_sales_rate <= 0 ? '#333333' : '#000' }">{{ infoData.month.assigned_sales_rate }}%</view>
|
|
</view>
|
|
<view class="title">分配</view>
|
|
</view>
|
|
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar" :style="{ height: `${infoData.month.today_new_rate}%`, background: '#4066f2' }"></view>
|
|
<view class="ratio" :style="{ color: infoData.month.today_new_rate <= 0 ? '#333333' : '#000' }">{{ infoData.month.today_new_rate }}%</view>
|
|
</view>
|
|
<view class="title">今日</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>
|
|
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image src="@/static/images/index/danlv.png" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">上月业绩</view>
|
|
</view>
|
|
|
|
<view class="coach-message">
|
|
<view class="this_month">
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">拉新总数</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.new_total}}人</view>
|
|
</view>
|
|
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已分配</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.assigned_sales}}人</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">昨日拉新</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.yesterday_new}}人</view>
|
|
</view>
|
|
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">今日拉新</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.today_new}}人</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 销售人员展示-->
|
|
<view class="div-style" v-if="infoData.role_type == 'sale_type'">
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image src="@/static/images/index/danlan.png" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">本月业绩</view>
|
|
</view>
|
|
<view class="coach-message">
|
|
<view class="left1">
|
|
<view style="padding: 20rpx 0;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/huang.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已分配</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.assigned_clients}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lvs.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已沟通</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.contacted_clients}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/shenlan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">未成交</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.unconverted_clients}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">待续费</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.renewal_clients}}人</view>
|
|
</view>
|
|
|
|
<view>
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/lan.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已关单</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.month.closed_clients}}人</view>
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<!--统计图-->
|
|
<view class="right1">
|
|
<view style="text-align: center;">{{infoData.date}}</view>
|
|
<view class="statistics_box">
|
|
<!--未成交-->
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar" :style="{ height: `${infoData.month.unconverted_rate}%`, background: '#f59a23' }"></view>
|
|
<view class="ratio" :style="{ color: infoData.month.unconverted_rate <= 0 ? '#333333' : '#fff' }">{{ infoData.month.unconverted_rate }}%</view>
|
|
</view>
|
|
<view class="title">未成交</view>
|
|
</view>
|
|
<!--待续费-->
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar" :style="{ height: `${infoData.month.renewal_rate}%`, background: '#039f64' }"></view>
|
|
<view class="ratio" :style="{ color: infoData.month.renewal_rate <= 0 ? '#333333' : '#fff' }">{{ infoData.month.renewal_rate }}%</view>
|
|
</view>
|
|
<view class="title">待续费</view>
|
|
</view>
|
|
<!--已关单-->
|
|
<view class="item">
|
|
<view class="box">
|
|
<view class="progress-bar" :style="{ height: `${infoData.month.closed_rate}%`, background: '#4066f2' }"></view>
|
|
<view class="ratio" :style="{ color: infoData.month.closed_rate <= 0 ? '#333333' : '#fff' }">{{ infoData.month.closed_rate }}%</view>
|
|
</view>
|
|
<view class="title">已关单</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>
|
|
|
|
<view style="height: 38vh;">
|
|
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
|
|
<view>
|
|
<image src="@/static/images/index/danlv.png" class="drop-image"></image>
|
|
</view>
|
|
<view class="title">上月业绩</view>
|
|
</view>
|
|
|
|
<view class="coach-message">
|
|
<view class="this_month">
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已分配</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.assigned_clients}}人</view>
|
|
</view>
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已沟通</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.contacted_clients}}人</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">未成交</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.unconverted_clients}}个</view>
|
|
</view>
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">待续费</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.renewal_clients}}人</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
|
|
|
|
<view style="width: 48%;">
|
|
<view style="display: flex;align-items: center;">
|
|
<view style="padding: 12rpx;">
|
|
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
|
|
</view>
|
|
<view class="title-x">已关单</view>
|
|
</view>
|
|
<view class="title-x1">{{infoData.last_month.closed_clients}}人</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<AQTabber />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import apiRoute from '@/api/apiRoute.js';
|
|
|
|
import AQTabber from "@/components/AQ/AQTabber.vue"
|
|
|
|
export default {
|
|
components: {
|
|
AQTabber,
|
|
},
|
|
data() {
|
|
return {
|
|
infoData:{},//详情
|
|
|
|
userInfo: {},//当前登录的用户信息
|
|
}
|
|
},
|
|
onShow() {
|
|
this.init()
|
|
},
|
|
methods: {
|
|
async init() {
|
|
await this.getUserInfo()
|
|
await this.getXsIndex()
|
|
},
|
|
|
|
//获取用户信息
|
|
async getUserInfo(){
|
|
let res = await apiRoute.getPersonnelInfo({})
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
|
|
this.userInfo = res.data
|
|
},
|
|
|
|
//获取销售首页详情
|
|
async getXsIndex() {
|
|
let role_key_arr = this.userInfo.role_key_arr.join(',')
|
|
let params = {
|
|
personnel_id:this.userInfo.id,//员工表id
|
|
role_key_arr: role_key_arr, // 角色key 转换数组为字符串，若为空则赋予空字符串
|
|
}
|
|
let res = await apiRoute.xs_statisticsMarketHome(params)
|
|
if (res.code != 1) {
|
|
uni.showToast({
|
|
title: res.msg,
|
|
icon: 'none'
|
|
})
|
|
return
|
|
}
|
|
this.infoData = res.data
|
|
console.log('统计',this.infoData)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
|
|
|
|
//自定义导航栏
|
|
.navbar_section{
|
|
border: 1px solid #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background: #fff;
|
|
.title{
|
|
padding: 40rpx 0rpx;
|
|
|
|
/* 小程序端样式 */
|
|
// #ifdef MP-WEIXIN
|
|
padding: 80rpx 0rpx;
|
|
// #endif
|
|
|
|
font-size: 30rpx;
|
|
color: #858585;
|
|
}
|
|
}
|
|
|
|
.assemble {
|
|
width: 100%;
|
|
height: 100vh;
|
|
background: #292929;
|
|
}
|
|
|
|
.div-style {
|
|
width: 92%;
|
|
height: 85vh;
|
|
background: #fff;
|
|
border-radius: 16rpx;
|
|
margin: auto;
|
|
}
|
|
|
|
.coach-message {
|
|
width: 92%;
|
|
margin: 10rpx auto;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-top: 20rpx;
|
|
}
|
|
|
|
.drop-image {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.left1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.right1 {
|
|
width: 48%;
|
|
height: 95%;
|
|
margin: auto;
|
|
.statistics_box {
|
|
margin: auto;
|
|
margin-top: 10rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.item {
|
|
width: 90rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.box {
|
|
width: 100%;
|
|
height: 328rpx;
|
|
border: 1px solid #ddd;
|
|
border-radius: 6rpx;
|
|
background: #f5f5f5;
|
|
position: relative;
|
|
.progress-bar {
|
|
width: 100%;
|
|
height: 0;
|
|
transition: height 0.3s ease;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
.ratio {
|
|
width: 100%;
|
|
position: absolute;
|
|
bottom: -0rpx;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
.title {
|
|
margin-top: 5rpx;
|
|
padding: 0;
|
|
font-size: 26rpx;
|
|
color: #999999;;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.this_month {
|
|
width: 100%;
|
|
height: 95%;
|
|
margin: auto;
|
|
}
|
|
|
|
.drop-image-x {
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.title-x {
|
|
font-size: 28rpx;
|
|
color: #7F7F7F;
|
|
padding-left: 20rpx;
|
|
}
|
|
|
|
.title-x1 {
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
padding-left: 60rpx;
|
|
}
|
|
</style>
|