mirror of
http://112.124.100.131/GFRS/ebiz-h5.git
synced 2025-12-24 23:02:52 +08:00
444 lines
12 KiB
Vue
444 lines
12 KiB
Vue
<template>
|
||
<div class="user-income-container">
|
||
<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="moneyWrapper">
|
||
<p class="">当月应发 (元)</p>
|
||
<p class="moneyNum">{{ monthShouldPay || 0 | moneyFormat }}</p>
|
||
</div>
|
||
<div class="moneyWrapper">
|
||
<p class="">当月实发 (元)</p>
|
||
<p class="moneyNum" style="color: red;">{{ monthActualPay || 0 | moneyFormat }}</p>
|
||
</div>
|
||
</div>
|
||
</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" @confirm="onDateConfirm" @cancel="onDateCancel" :max-date="currentDate" />
|
||
</van-popup>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
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 {
|
||
searchMonth: '',
|
||
wageData: null,
|
||
moneyData: [],
|
||
list: [],
|
||
loading: false,
|
||
finished: false,
|
||
option: {
|
||
tooltip: {
|
||
trigger: 'item',
|
||
formatter: function(parms) {
|
||
var str =
|
||
parms.seriesName +
|
||
'</br>' +
|
||
parms.marker +
|
||
'' +
|
||
parms.data.legendname +
|
||
'</br>' +
|
||
'数量：' +
|
||
parms.data.value +
|
||
'</br>' +
|
||
'占比：' +
|
||
parms.percent +
|
||
'%'
|
||
return str
|
||
}
|
||
},
|
||
series: [
|
||
{
|
||
name: '收入明细',
|
||
type: 'pie',
|
||
clickable: true, //是否开启点击
|
||
minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
|
||
// avoidLabelOverlap: true, //是否启用防止标签重叠策略
|
||
// hoverAnimation: true, //是否开启 hover 在扇区上的放大动画效果。
|
||
// silent: false, //图形是否不响应和触发鼠标事件
|
||
radius: ['40%', '75%'],
|
||
center: ['50%', '55%'],
|
||
data: [],
|
||
label: {
|
||
align: 'left',
|
||
normal: {
|
||
show: true,
|
||
formatter(v) {
|
||
let text = Math.round(v.percent) + '%' + '' + v.data.legendname
|
||
if (text.length <= 8) {
|
||
return text
|
||
} else if (text.length > 8 && text.length <= 16) {
|
||
return (text = `${text.slice(0, 8)}\n${text.slice(8)}`)
|
||
} else if (text.length > 16 && text.length <= 24) {
|
||
return (text = `${text.slice(0, 8)}\n${text.slice(8, 16)}\n${text.slice(16)}`)
|
||
} else if (text.length > 24 && text.length <= 30) {
|
||
return (text = `${text.slice(0, 8)}\n${text.slice(8, 16)}\n${text.slice(16, 24)}\n${text.slice(24)}`)
|
||
} else if (text.length > 30) {
|
||
return (text = `${text.slice(0, 8)}\n${text.slice(8, 16)}\n${text.slice(16, 24)}\n${text.slice(24, 30)}\n${text.slice(30)}`)
|
||
}
|
||
},
|
||
textStyle: {
|
||
fontSize: 10
|
||
}
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
myChart: '', // echarts 图表
|
||
activeNames: [1],
|
||
dataTitle: ['销售收益', '增员收益', '管理利益', '育成收益', '加扣款'],
|
||
value: '',
|
||
showDatePicker: false, // 时间选择器的显示与隐藏
|
||
selectedDate: new Date(), // 用户选中的时间
|
||
currentDate: new Date(),
|
||
active: 2,
|
||
echartsShow: true, // 展示 echarts 对应的 tab 栏
|
||
monthActualPay: 0, // 当月实付
|
||
monthShouldPay: 0, // 当月应付
|
||
rewardInfoList: [], // 收益明细
|
||
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() {
|
||
let currentMonth = Formatter.formatDate(new Date(), 'yyyyMM')
|
||
this.getIncomeInfo(currentMonth)
|
||
},
|
||
mounted() {
|
||
// this.incomeChart = echarts.init(this.$refs.incomeChart)
|
||
// this.incomeChart.setOption(this.incomeOption)
|
||
},
|
||
components: {
|
||
[Collapse.name]: Collapse,
|
||
[CollapseItem.name]: CollapseItem,
|
||
[Cell.name]: Cell,
|
||
[CellGroup.name]: CellGroup,
|
||
[DatetimePicker.name]: DatetimePicker,
|
||
[Popup.name]: Popup,
|
||
[Row.name]: Row,
|
||
[Col.name]: Col,
|
||
[Tab.name]: Tab,
|
||
[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
|
||
// 确认选中的时间
|
||
this.searchMonth = Formatter.formatDate(val, 'yyyy-MM')
|
||
const monthDate = Formatter.formatDate(val, 'yyyyMM')
|
||
this.getIncomeInfo(monthDate)
|
||
this.showDatePicker = false
|
||
},
|
||
onDateCancel() {
|
||
// 取消时间选择
|
||
this.showDatePicker = false
|
||
},
|
||
async getIncomeInfo(monthDate) {
|
||
this.monthShouldPay = 0
|
||
this.monthActualPay = 0
|
||
this.list.splice(0)
|
||
this.$toast.loading({
|
||
message: '加载中...',
|
||
forbidClick: true,
|
||
loadingType: 'spinner'
|
||
})
|
||
let data = await getAgentIncome({
|
||
monthDate
|
||
})
|
||
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
|
||
}
|
||
},
|
||
filters: {
|
||
// 处理时间格式
|
||
timeFormat(timeStr, pattern) {
|
||
const date = new Date(timeStr)
|
||
const year = date.getFullYear()
|
||
var month = date.getMonth() + 1
|
||
month = month.toString().padStart(2, '0')
|
||
if (pattern && pattern.toLowerCase() == 'yyyydd') {
|
||
return `${year}${month}`
|
||
}
|
||
return `${year}-${month}`
|
||
}
|
||
// moneyFormat(moneyStr) {
|
||
// // 处理钱的格式
|
||
// let str = (Math.round(moneyStr * 100) / 100).toString()
|
||
// let pointIdx = str.indexOf('.')
|
||
// if (pointIdx < 0) {
|
||
// str = str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
|
||
// pointIdx = str.length
|
||
// str += '.'
|
||
// } else {
|
||
// let int = str.substr(0, pointIdx)
|
||
// int.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
|
||
// }
|
||
// while (str.length <= pointIdx + 2) {
|
||
// str += '0'
|
||
// }
|
||
// return str
|
||
// }
|
||
}
|
||
}
|
||
</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 {
|
||
border-bottom: 1px solid #ebedf0;
|
||
}
|
||
.user-income-info {
|
||
overflow-y: hidden;
|
||
/deep/.van-cell:not(:last-child)::after {
|
||
border-bottom: 1px solid transparent;
|
||
}
|
||
.user-income-display-unit {
|
||
box-sizing: border-box;
|
||
.user-income-display-title {
|
||
line-height: 16px;
|
||
}
|
||
.user-income-display-amount {
|
||
line-height: 26px;
|
||
}
|
||
}
|
||
}
|
||
.user-income-echarts-tab {
|
||
overflow-y: scroll;
|
||
width: 100%;
|
||
.user-income-echarts {
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
.user-income-collape-data {
|
||
width: 100%;
|
||
/deep/.van-collapse-item__content {
|
||
padding: 0;
|
||
.ph15:last-child {
|
||
.collapse-item-info {
|
||
border: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.van-hairline--top-bottom::after {
|
||
border-width: 1px 0;
|
||
}
|
||
}
|
||
}
|
||
</style>
|