Browse Source

fixbug

master
王泽彦 10 months ago
parent
commit
2dc31df741
  1. 748
      pages/market/index/index.vue

748
pages/market/index/index.vue

@ -1,19 +1,20 @@
<template>
<view class="assemble">
<!--自定义导航栏-->
<view class="navbar_section">
<view class="title">首页</view>
</view>
<!--自定义导航栏-->
<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="$util.img('/uniapp_src/static/images/index/danlan.png')" class="drop-image"></image>
<image :src="$util.img('/uniapp_src/static/images/index/danlan.png')" class="drop-image">
</image>
</view>
<view class="title">本月业绩</view>
</view>
@ -22,9 +23,10 @@
<view style="padding: 20rpx 0;">
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/huang.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/huang.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">拉新总数</view>
<view class="title-x">资源总数</view>
</view>
<view class="title-x1">{{infoData.month.new_total}}</view>
</view>
@ -32,7 +34,8 @@
<view>
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/lvs.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/lvs.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">已分配</view>
</view>
@ -42,9 +45,10 @@
<view>
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/shenlan.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/shenlan.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">昨日</view>
<view class="title-x">昨日新</view>
</view>
<view class="title-x1">{{infoData.month.yesterday_new}}</view>
</view>
@ -52,43 +56,56 @@
<view>
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/lan.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/lan.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">今日</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 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>
@ -110,9 +127,10 @@
<view style="width: 48%;">
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">拉新总数</view>
<view class="title-x">资源总数</view>
</view>
<view class="title-x1">{{infoData.last_month.new_total}}</view>
</view>
@ -120,9 +138,10 @@
<view style="width: 48%;">
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">已分配</view>
<view class="title-x">业绩收入</view>
</view>
<view class="title-x1">{{infoData.last_month.assigned_sales}}</view>
</view>
@ -132,285 +151,309 @@
<view style="width: 48%;">
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')" class="drop-image-x"></image>
<image :src="$util.img('/uniapp_src/static/images/index/danlv.png')"
class="drop-image-x"></image>
</view>
<view class="title-x">昨日拉新</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="$util.img('/uniapp_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 style="width: 48%;">
<view style="display: flex;align-items: center;">
<view style="padding: 12rpx;">
<image :src="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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 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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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="$util.img('/uniapp_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)
},
}
}
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;
//
.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
/* 小程序端样式 */
// #ifdef MP-WEIXIN
padding: 80rpx 0rpx;
// #endif
font-size: 30rpx;
color: #858585;
}
}
font-size: 30rpx;
color: #858585;
}
}
.assemble {
width: 100%;
@ -451,52 +494,59 @@ export default {
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;
}
}
}
}
.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%;

Loading…
Cancel
Save