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

src/api/ebiz/my/my.js

@@ -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
   })

src/views/ebiz/my/UserIncome.vue

@@ -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>