hz/ebiz-h5
1
0
Fork 0
mirror of http://112.124.100.131/GFRS/ebiz-h5.git synced 2025-12-20 17:46:44 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'feature/GFRS-1742【待确定】收入改造' into release/0827

Browse Source
This commit is contained in:
mengxiaolong
2020-08-27 17:08:51 +08:00
parent 51d5622437 42e18e2a77
commit 9e402c5a3b
2 changed files with 244 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/api/ebiz/my/my.js
View File

@@ -41,7 +41,7 @@ export function getAgentInfo(data) {
export function getAgentIncome(data) {
return request({
// url: getUrl('/agent/income/info', 0),
url: getUrl('/agent/agent/income/info', 1),
url: getUrl('/agent/agentTransform/income/info', 1),
method: 'post',
data
})

451
src/views/ebiz/my/UserIncome.vue
View File

@@ -1,112 +1,74 @@
<template>
<div class="user-income-container">
<div class="user-income-info bg-white mt10" id="date-picker">
<!-- 时间选择 -->
<van-cell class="date-picker green" :value="value" @click="showDatePicker = true" title=" "
><span class="green fs14">{{ selectedDate | timeFormat }}</span> <img class="w10 h8 ml10" src="@/assets/images/date_picker.png" alt=""
/></van-cell>
<van-sticky>
<div class="titleBar">
<van-button round color="#e9332f" size="mini" @click="searchCurrentMonth">当月</van-button>
<span class="ml10" style="font-size: 14px; margin: 0 .5em; vertical-align: middle;" @click="showDatePicker = true">
{{ searchMonth ? searchMonth : '选择日期' }}
</span>
<van-icon style="vertical-align: middle;" name="calender-o" @click="showDatePicker = true" />
</div>
<van-row class="stickyContent">
<van-col span="24">
<div id="date-picker">
<!-- 收入展示面板 -->
<div class="user-income-display justify-content-a flex mt16 pl20 pr20 pb20">
<div class="user-income-display-unit h90 w155 fwb bg-green-dark white pt15 pl15 radius5">
<p class="user-income-display-title fs16">当月应发 (元)</p>
<p class="user-income-display-amount fs26 mt15">{{ monthShouldPay || 0 | moneyFormat }}</p>
<div class="moneyWrapper">
<p class="">当月应发 (元)</p>
<p class="moneyNum">{{ monthShouldPay || 0 | moneyFormat }}</p>
</div>
<div class="user-income-display-unit w155 fwb bg-blue-dark white pt15 pl15 radius5">
<p class="user-income-display-title fs16">当月实发 (元)</p>
<p class="user-income-display-amount fs26 mt15">{{ monthActualPay || 0 | moneyFormat }}</p>
<div class="moneyWrapper">
<p class="">当月实发 (元)</p>
<p class="moneyNum" style="color: red;">{{ monthActualPay || 0 | moneyFormat }}</p>
</div>
</div>
</div>
<!-- echarts tab 栏 -->
<div class="user-income-echarts-tab mt10 absolute bottom0 top165">
<div>
<!-- tab 栏 -->
<van-tabs v-model="active" @change="tabChange">
<van-tab title="收入明细"> </van-tab>
<van-tab title="加扣款明细">
<van-cell-group>
<van-cell title="税前加扣款合计 (元)" class="gray"
><span class="black">{{ paymentInfo.totalPreTaxDeductions || 0 | moneyFormat }}</span>
</van-cell>
<van-cell title="算税加扣款 (元)" class="gray"
><span class="black">{{ paymentInfo.taxationPlusDeduction || 0 | moneyFormat }}</span>
</van-cell>
<van-cell title="税后加扣款 (元)" class="gray"
><span class="black">{{ paymentInfo.totalCurTaxDeductions || 0 | moneyFormat }}</span>
</van-cell>
</van-cell-group>
</van-tab>
</van-tabs>
<!-- 图表展示 -->
<div v-show="echartsShow">
<div class="user-income-echarts-wrapper bg-white">
<div class="user-income-echarts" ref="echarts" style="width: 375px;height: 200px;"></div>
</div>
<!-- 数据展示 -->
<van-collapse v-model="activeNames" class="user-income-collape-data mt10" v-if="rewardInfoList.length > 0">
<van-collapse-item :border="false" :title="item.benefit" class="p0 fwb " :name="index + 1" v-for="(item, index) in rewardInfoList" :key="index">
<div class="ph15" v-for="(ele, idx) in item.rewards" :key="idx">
<van-cell class="collapse-item-info pl0 gray fw500" :border="false" :title="ele.value">
<span class="black">{{ ele.money }}</span>
</van-cell>
</div>
</van-collapse-item>
</van-collapse>
</van-col>
</van-row>
<!-- 收入标题 -->
<van-row class="moneyTitle">
<van-col class="text-center" span="12">收入项目</van-col>
<van-col class="text-center" span="12">金额(元)</van-col>
</van-row>
</van-sticky>
<!-- 收入具体内容 -->
<div class="moneyContent" v-if="list.length !== 0">
<div class="payRoll" v-for="item in list" :key="item.payRollCode">
<div class="payRollName">{{ item.payRollName }}</div>
<div class="payRollMoney">{{ item.payRollMoney }}</div>
</div>
</div>
<div v-else class="text-center">
<img class="mt40 w250" src="@/assets/images/pic_page-non.png" />
<div class="fs15 c-gray-dark mt40">暂无收入数据</div>
</div>
<!-- <van-divider v-if="list.length === 0" class="data-divider" /> -->
<!-- 收入曲线图 -->
<!-- <div class="incomeChart" ref="incomeChart"></div> -->
<!-- 日期选择 -->
<van-popup v-model="showDatePicker" position="bottom" :style="{ height: '40%' }">
<van-datetime-picker
v-model="selectedDate"
type="year-month"
:formatter="formatter"
@confirm="onDateConfirm"
@cancel="onDateCancel"
:max-date="currentDate"
/>
<van-datetime-picker v-model="selectedDate" type="year-month" @confirm="onDateConfirm" @cancel="onDateCancel" :max-date="currentDate" />
</van-popup>
</div>
</template>
<script>
// import echarts from 'echarts'
import { Collapse, CollapseItem, Cell, CellGroup, DatetimePicker, Popup, Row, Col, Tab, Tabs } from 'vant'
import { Sticky, List, Button, Collapse, CollapseItem, Cell, CellGroup, DatetimePicker, Popup, Row, Col, Tab, Tabs, Divider } from 'vant'
import { getAgentIncome } from '@/api/ebiz/my/my.js'
import Formatter from '@/assets/js/utils/date-utils.js'
import echarts from 'echarts'
export default {
data() {
return {
// option: {
// tooltip: {
// trigger: 'item',
// formatter: '{a} <br/>{b} : {c} ({d}%)'
// },
// series: [
// {
// name: '访问来源',
// type: 'pie',
// radius: '80%',
// color: ['#ccffff', '#9a99ff', '#993365', '#ffffcb'],
// // data: [{ value: 800, name: '销售收益' }, { value: 200, name: '增员收益' }, { value: 500, name: '管理利益' }, { value: 1200, name: '育成收益' }],
// data: [],
// itemStyle: {
// borderWidth: 2, // 饼图块之间的缝隙
// borderColor: '#000', // 饼图块之间缝隙的颜色
// emphasis: {
// shadowBlur: 10,
// shadowOffsetX: 0,
// shadowColor: 'rgba(0, 0, 0, 0.5)'
// }
// },
// label: {
// normal: {
// show: false // 不显示指标
// }
// }
// }
// ]
// },
searchMonth: '',
wageData: null,
moneyData: [],
list: [],
loading: false,
finished: false,
option: {
tooltip: {
trigger: 'item',
@@ -127,33 +89,6 @@ export default {
return str
}
},
// series: [
// {
// name: '标题',
// type: 'pie',
// // center: ['35%', '50%'],
// radius: ['40%', '75%'],
// clockwise: false, //饼图的扇区是否是顺时针排布
// avoidLabelOverlap: false,
// label: {
// normal: {
// show: true,
// // position: 'outter',
// formatter: function(parms) {
// return parms.data.legendname
// }
// }
// },
// labelLine: {
// normal: {
// length: 5,
// length2: 3,
// smooth: true
// }
// },
// data: []
// }
// ]
series: [
{
name: '收入明细',
@@ -189,13 +124,6 @@ export default {
}
}
}
// labelLine: {
// normal: {
// length: 5,
// length2: 3,
// smooth: true
// }
// }
}
]
},
@@ -208,27 +136,103 @@ export default {
currentDate: new Date(),
active: 2,
echartsShow: true, // 展示 echarts 对应的 tab 栏
monthActualPay: '', // 当月实付
monthShouldPay: '', // 当月应付
monthActualPay: 0, // 当月实付
monthShouldPay: 0, // 当月应付
rewardInfoList: [], // 收益明细
paymentInfo: {} // 加扣款明细
paymentInfo: {}, // 加扣款明细
incomeChart: null,
incomeOption: {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
formatter: function(params) {
return `${params[0].axisValue}月<br/>${params[0].value}元`
}
},
title: {
text: '收入曲线图'
},
xAxis: {
type: 'category',
name: '月份',
nameTextStyle: {
fontSize: 10
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisLabel: {
color: '#888',
fontSize: 10
},
axisTick: {
show: false
},
data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
boundaryGap: false
},
yAxis: {
type: 'value',
name: '收入(元)',
nameTextStyle: {
fontSize: 10
},
axisLabel: {
color: '#888',
fontSize: 10
},
axisLine: {
lineStyle: {
color: '#888'
}
},
axisTick: {
show: false
},
splitLine: false
},
series: [
{
data: [820, 932, 901, 634, 1290, 1330, 820, 322, 843, 1209, 432, 812],
type: 'line',
smooth: true,
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{
offset: 0,
color: 'rgba(255,0,0,0.9)'
},
{
offset: 1,
color: 'rgba(255,0,0,0.3)'
}
],
global: false
}
}
}
],
color: ['#ff0000']
}
}
},
created() {
const monthDate = this.$options.filters.timeFormat(this.currentDate, 'YYYYDD')
this.getIncomeInfo(monthDate)
let currentMonth = Formatter.formatDate(new Date(), 'yyyyMM')
this.getIncomeInfo(currentMonth)
},
mounted() {
// 基于准备好的dom，初始化echarts实例
this.myChart = echarts.init(this.$refs.echarts)
// 绘制图表
this.myChart.setOption(this.option)
// 设置背景颜色
document.body.style.backgroundColor = '#fff'
},
beforeRouteLeave(to, from, next) {
document.body.style.backgroundColor = ''
next()
// this.incomeChart = echarts.init(this.$refs.incomeChart)
// this.incomeChart.setOption(this.incomeOption)
},
components: {
[Collapse.name]: Collapse,
@@ -237,97 +241,52 @@ export default {
[CellGroup.name]: CellGroup,
[DatetimePicker.name]: DatetimePicker,
[Popup.name]: Popup,
[Row.anme]: Row,
[Row.name]: Row,
[Col.name]: Col,
[Tab.name]: Tab,
[Tabs.name]: Tabs
[Tabs.name]: Tabs,
[Button.name]: Button,
[List.name]: List,
[Sticky.name]: Sticky,
[Divider.name]: Divider
},
methods: {
searchCurrentMonth() {
this.onDateConfirm(new Date())
},
onDateConfirm(val) {
// 确认选中的时间
this.selectedDate = val
console.log(val)
const monthDate = this.$options.filters.timeFormat(val, 'YYYYDD')
// 确认选中的时间
this.searchMonth = Formatter.formatDate(val, 'yyyy-MM')
const monthDate = Formatter.formatDate(val, 'yyyyMM')
this.getIncomeInfo(monthDate)
console.log(monthDate)
this.showDatePicker = false
},
onDateCancel() {
// 取消时间选择
console.log('取消了')
this.showDatePicker = false
},
async getIncomeInfo(monthDate) {
console.log(monthDate)
// 获取代理人收入明细
const res = await getAgentIncome({
this.monthShouldPay = 0
this.monthActualPay = 0
this.list.splice(0)
this.$toast.loading({
message: '加载中...',
forbidClick: true,
loadingType: 'spinner'
})
let data = await getAgentIncome({
monthDate
})
console.log(res)
if (res.result == 0) {
// 当月实收
this.monthActualPay = res.monthActualPay
// 当月应收
this.monthShouldPay = res.monthShouldPay
// 收益列表
this.rewardInfoList = res.rewardInfoList
// 加扣款明细
this.paymentInfo = res.paymentInfo
// 处理一下收益名称和钱的格式
this.rewardInfoList.forEach(element => {
element.rewards.forEach(item => {
item.value += '( 元 )'
item.money = this.$options.filters.moneyFormat(item.money)
})
})
// 各收益项的和
let optionData = []
this.rewardInfoList.forEach((item, index) => {
optionData[index] = {}
optionData[index].legendname = item.benefit
optionData[index].value = 0
item.rewards.forEach(ele => {
optionData[index].value += parseInt(ele.money)
})
})
console.log(optionData)
this.option.series[0].data = optionData
// 给图表对应的值,重新初始化图表
let newOption = this.option
newOption.series[0].data = optionData
this.myChart.setOption(newOption)
} else {
// 当月实收
this.monthActualPay = 0
// 当月应收
this.monthShouldPay = 0
// 收益列表
this.rewardInfoList = []
// 加扣款明细
this.paymentInfo = {
taxationPlusDeduction: 0,
totalPreTaxDeductions: 0,
totalCurTaxDeductions: 0
}
// 给图表对应的值,重新初始化图表
let newOption = this.option
newOption.series[0].data = []
this.myChart.setOption(newOption)
if (data && data.content.wageList) {
this.monthShouldPay = data.content.wageList[0].payRollMoney
this.monthActualPay = data.content.wageList[1].payRollMoney
this.list = data.content.wageList.slice(2)
}
},
tabChange(val) {
// tab 栏切换时触发
this.echartsShow = val != 1
},
formatter(type, value) {
// 格式化时间
if (type === 'year') {
return `${value}`
} else if (type === 'month') {
return `${value}`
}
return value
}
},
filters: {
@@ -357,7 +316,6 @@ export default {
// while (str.length <= pointIdx + 2) {
// str += '0'
// }
// console.log(str)
// return str
// }
}
@@ -365,6 +323,80 @@ export default {
</script>
<style lang="scss">
.incomeChart {
height: 40vh;
}
.data-divider {
margin: 2em;
}
.payRoll {
padding: 0 0.25em;
display: flex;
border-bottom: 1px solid #e7e7e7;
}
.payRollName,
.payRollMoney {
font-size: 14px;
flex: 1;
text-align: center;
}
.stickyContent {
background-color: #fff;
}
.titleBar {
background-color: #fff;
padding: 1em;
}
#date-picker {
display: flex;
justify-content: center;
text-align: center;
margin: 1em 0;
}
.moneyWrapper {
width: 40%;
padding: 1em;
border: 1px solid #e7e7e7;
}
.moneyWrapper:first-child {
border-right: none;
}
.moneyNum {
font-size: 20px;
font-weight: bold;
margin: 0.5em 0;
}
.user-income-container {
min-height: 100vh;
background-color: #fff;
}
.moneyTitle {
color: red;
background-color: #fceced;
}
.moneyTitle,
.moneyContent {
line-height: 3em;
border-bottom: 1px solid #ebedf0;
}
.moneyContent {
padding-bottom: 2em;
border-bottom: none;
}
.user-income-container {
.collapse-item-info,
.van-collapse-item__title {
@@ -408,7 +440,4 @@ export default {
}
}
}
#date-picker .van-cell:not(:last-child)::after {
border-bottom: 1px solid transparent;
}
</style>