php
/
ZhiHuiJiaoWu_UniApp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

refactor(market): 重构市场人员和销售人员的首页展示逻辑- 为市场人员和销售人员分别设计不同的展示页面 

- 添加新的数据统计接口和展示组件
- 优化页面布局和样式，提高可读性和易用性
- 增加用户信息获取功能，用于个性化展示
master
liutong 10 months ago
parent
2572d9b740
commit
ec1290f770
2 changed files with 254 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 10
      api/apiRoute.js
  2. 309
      pages/market/index/index.vue

10
api/apiRoute.js
View File

@ -321,6 +321,16 @@ export default {
}) })
}, },
//员工端统计(销售)-获取销售首页数据统计
xs_statisticsMarketHome(data = {}) {
let url = '/statistics/marketHome'
return http.get(url, data).then(res => {
return res;
})
},

309
pages/market/index/index.vue
View File

@ -7,7 +7,9 @@
</view> </view>
<view style="height: 20rpx;"></view> <view style="height: 20rpx;"></view>
<view class="div-style">
<!-- 市场人员展示-->
<view class="div-style" v-if="infoData.role_type == 'market_type'">
<view style="height: 38vh;"> <view style="height: 38vh;">
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;"> <view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
<view> <view>
@ -22,65 +24,68 @@
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/huang.png" class="drop-image-x"></image> <image src="@/static/images/index/huang.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">目标</view> <view class="title-x">拉新总数</view>
</view> </view>
<view class="title-x1">{{infoData.goal}}元</view> <view class="title-x1">{{infoData.month.new_total}}人</view>
</view> </view>
<view> <view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/lvs.png" class="drop-image-x"></image> <image src="@/static/images/index/lvs.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">预测</view> <view class="title-x">已分配</view>
</view> </view>
<view class="title-x1">{{infoData.yc_yj}}元</view> <view class="title-x1">{{infoData.month.new_total}}人</view>
</view> </view>
<view> <view>
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/shenlan.png" class="drop-image-x"></image> <image src="@/static/images/index/shenlan.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">成交</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>
<view class="title-x1">{{infoData.cj_yj}}元</view> <view class="title-x1">{{infoData.month.today_new}}人</view>
</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">50.000元</view>-->
<!-- </view>-->
</view> </view>
<!-- 目标--> <!-- 统计图-->
<view class="right1"> <view class="right1">
<view style="text-align: center;">{{infoData.date}}</view> <view style="text-align: center;">{{infoData.date_range}}</view>
<view class="statistics_box"> <view class="statistics_box">
<!--目标-->
<view class="item"> <view class="item">
<view class="box"> <view class="box">
<view class="progress-bar" :style="{ height: `${infoData.goal_percent}%`, background: '#f59a23' }"></view> <view class="progress-bar" :style="{ height: `${infoData.month.yesterday_new_rate}%`, background: '#f59a23' }"></view>
<view class="ratio" :style="{ color: infoData.goal_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.goal_percent }}%</view> <view class="ratio" :style="{ color: infoData.month.yesterday_new_rate <= 0 ? '#333333' : '#000' }">{{ infoData.month.yesterday_new_rate }}%</view>
</view> </view>
<view class="title">目标</view> <view class="title">昨日</view>
</view> </view>
<!--预测-->
<view class="item"> <view class="item">
<view class="box"> <view class="box">
<view class="progress-bar" :style="{ height: `${infoData.yc_yj_percent}%`, background: '#039f64' }"></view> <view class="progress-bar" :style="{ height: `${infoData.month.assigned_sales_rate}%`, background: '#039f64' }"></view>
<view class="ratio" :style="{ color: infoData.yc_yj_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.yc_yj_percent }}%</view> <view class="ratio" :style="{ color: infoData.month.assigned_sales_rate <= 0 ? '#333333' : '#000' }">{{ infoData.month.assigned_sales_rate }}%</view>
</view> </view>
<view class="title">预测</view> <view class="title">分配</view>
</view> </view>
<!--成交-->
<view class="item"> <view class="item">
<view class="box"> <view class="box">
<view class="progress-bar" :style="{ height: `${infoData.cj_yj_percent}%`, background: '#4066f2' }"></view> <view class="progress-bar" :style="{ height: `${infoData.month.today_new_rate}%`, background: '#4066f2' }"></view>
<view class="ratio" :style="{ color: infoData.cj_yj_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.cj_yj_percent }}%</view> <view class="ratio" :style="{ color: infoData.month.today_new_rate <= 0 ? '#333333' : '#000' }">{{ infoData.month.today_new_rate }}%</view>
</view> </view>
<view class="title">成交</view> <view class="title">今日</view>
</view> </view>
</view> </view>
@ -88,13 +93,15 @@
</view> </view>
</view> </view>
<view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view> <view style="width: 90%;background: #EFF3F8;height: 4rpx;margin: auto;"></view>
<view style="height: 38vh;"> <view style="height: 38vh;">
<view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;"> <view style="display: flex;align-items: center;padding: 20rpx 0 0 20rpx;">
<view> <view>
<image src="@/static/images/index/danlv.png" class="drop-image"></image> <image src="@/static/images/index/danlv.png" class="drop-image"></image>
</view> </view>
<view class="title">本月业绩</view> <view class="title">上月业绩</view>
</view> </view>
<view class="coach-message"> <view class="coach-message">
@ -105,73 +112,224 @@
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image> <image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">待联系</view> <view class="title-x">拉新总数</view>
</view> </view>
<view class="title-x1">50个</view> <view class="title-x1">{{infoData.last_month.new_total}}人</view>
</view> </view>
<view style="width: 48%;"> <view style="width: 48%;">
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image> <image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">待领取</view> <view class="title-x">已分配</view>
</view> </view>
<view class="title-x1">{{infoData.dlq}}个</view> <view class="title-x1">{{infoData.last_month.assigned_sales}}人</view>
</view> </view>
</view> </view>
<view style="padding: 20rpx 0;display: flex;justify-content: space-between;"> <view style="padding: 20rpx 0;display: flex;justify-content: space-between;">
<view style="width: 48%;"> <view style="width: 48%;">
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image> <image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">待释放</view> <view class="title-x">昨日拉新</view>
</view> </view>
<view class="title-x1">{{infoData.dsf}}个</view> <view class="title-x1">{{infoData.last_month.yesterday_new}}人</view>
</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">50个</view>-->
<!-- </view>-->
<view style="width: 48%;"> <view style="width: 48%;">
<view style="display: flex;align-items: center;"> <view style="display: flex;align-items: center;">
<view style="padding: 12rpx;"> <view style="padding: 12rpx;">
<image src="@/static/images/index/danlv.png" class="drop-image-x"></image> <image src="@/static/images/index/danlv.png" class="drop-image-x"></image>
</view> </view>
<view class="title-x">待协作</view> <view class="title-x">今日拉新</view>
</view> </view>
<view class="title-x1">{{infoData.dxz}}个</view> <view class="title-x1">{{infoData.last_month.today_new}}人</view>
</view> </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.xx}}个</view>
</view>
</view>
</view> </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.goal_percent}%`, background: '#f59a23' }"></view>
<view class="ratio" :style="{ color: infoData.goal_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.goal_percent }}%</view>
</view>
<view class="title">目标</view>
</view>
<!--预测-->
<view class="item">
<view class="box">
<view class="progress-bar" :style="{ height: `${infoData.yc_yj_percent}%`, background: '#039f64' }"></view>
<view class="ratio" :style="{ color: infoData.yc_yj_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.yc_yj_percent }}%</view>
</view>
<view class="title">预测</view>
</view>
<!--成交-->
<view class="item">
<view class="box">
<view class="progress-bar" :style="{ height: `${infoData.cj_yj_percent}%`, background: '#4066f2' }"></view>
<view class="ratio" :style="{ color: infoData.cj_yj_percent <= 0 ? '#333333' : '#fff' }">{{ infoData.cj_yj_percent }}%</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 /> <AQTabber />
</view> </view>
</template> </template>
<script> <script>
import marketApi from '@/api/market.js'; import apiRoute from '@/api/apiRoute.js';
import AQTabber from "@/components/AQ/AQTabber.vue" import AQTabber from "@/components/AQ/AQTabber.vue"
@ -182,6 +340,8 @@ export default {
data() { data() {
return { return {
infoData:{},//详情 infoData:{},//详情
userInfo: {},//当前登录的用户信息
} }
}, },
onShow() { onShow() {
@ -189,12 +349,31 @@ export default {
}, },
methods: { methods: {
async init() { async init() {
this.getXsIndex() 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() { async getXsIndex() {
let res = await marketApi.xsIndex({}) let params = {
personnel_id:this.userInfo.id,//员工表id
role_key_arr:this.userInfo.role_key_arr,//角色key
}
let res = await apiRoute.xs_statisticsMarketHome(params)
if (res.code != 1) { if (res.code != 1) {
uni.showToast({ uni.showToast({
title: res.msg, title: res.msg,
@ -203,7 +382,7 @@ export default {
return return
} }
this.infoData = res.data this.infoData = res.data
console.log('统计',this.infoData)
}, },
} }
} }

Write Preview
Loading…
Cancel
Save