income-detail.vue

<template>
  <div class="income-detail">
    <div class="chart-box">
      <v-chart class="chart" :option="pieOption" />
    </div>
    <div class="detail">
      <p style="font-size:14px;font-weight:bold;">收益明细</p>
      <div class="detail-list">
        <base-refresh-scroll @downLoad="onDownLoad" @upRefresh="onUpRefresh">
          <div slot="content">
            <div
              v-for="(item, index) in detailList"
              :key="`income-detail-${index}`"
              class="detail-list-item"
            >
              <span>{{ item.name }}</span>
              <span>￥{{ item.money }}</span>
              <span class="time">2021.02.26 10:02</span>
            </div>
          </div>
        </base-refresh-scroll>
      </div>
    </div>
  </div>
</template>

<script>
import { queryIncomeDetail } from "@/api/wallet";
import BaseRefreshScroll from "../../components/BaseRefreshScroll.vue";
export default {
  components: { BaseRefreshScroll },
  name: "IncomeDetail",
  data() {
    return {
      detailList: [],
      legendPos: [
        {
          x: "1%",
          y: "65%"
        },
        {
          x: "28%",
          y: "65%"
        },
        {
          x: "65%",
          y: "65%"
        },
        {
          x: "1%",
          y: "75%"
        },
        {
          x: "28%",
          y: "75%"
        },
        {
          x: "65%",
          y: "75%"
        },
        {
          x: "1%",
          y: "85%"
        },
        {
          x: "28%",
          y: "85%"
        },
        {
          x: "65%",
          y: "85%"
        }
      ],
      pieOption: {
        legend: [
          {
            selectedMode: false,
            x: "1%",
            y: "65%",
            itemWidth: 12,
            data: ["工资收益"]
          },
          {
            selectedMode: false,
            x: "28%",
            y: "65%",
            itemWidth: 12,
            data: ["曾极差奖金"]
          },
          {
            selectedMode: false,
            x: "65%",
            y: "65%",
            itemWidth: 12,
            data: ["自身消费返佣"]
          },
          {
            selectedMode: false,
            x: "1%",
            y: "75%",
            itemWidth: 12,
            data: ["培育奖"]
          },
          {
            selectedMode: false,
            x: "28%",
            y: "75%",
            itemWidth: 12,
            data: ["月度肥料池分红"]
          },
          {
            selectedMode: false,
            x: "65%",
            y: "75%",
            itemWidth: 12,
            data: ["进步奖"]
          },
          {
            selectedMode: false,
            x: "1%",
            y: "85%",
            itemWidth: 12,
            data: ["红包"]
          },
          {
            selectedMode: false,
            align: "left",
            x: "28%",
            y: "85%",
            itemWidth: 12,
            data: ["运营中心补贴"]
          },
          {
            selectedMode: false,
            align: "left",
            x: "65%",
            y: "85%",
            itemWidth: 12,
            data: ["其他收益"]
          }
        ],
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: ["50%", "70%"], // pie 内外环
            width: "180",
            height: "180",
            top: -10,
            left: "center",
            avoidLabelOverlap: true,
            label: {
              // 标签
              show: false,
              position: "outside", // 饼图扇区外侧
              overflow: "break"
            },
            emphasis: {
              // 点击圆环上的每一项显示label
              label: {
                show: false
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 1048, name: "工资收益" },
              { value: 735, name: "曾极差奖金" },
              { value: 580, name: "自身消费返佣" },
              { value: 484, name: "培育奖" },
              { value: 300, name: "月度肥料池分红" },
              { value: 300, name: "进步奖" },
              { value: 300, name: "红包" },
              { value: 300, name: "运营中心补贴" },
              { value: 300, name: "其他收益" }
            ]
          }
        ],
        graphic: {
          type: "group",
          top: "70",
          left: "center",
          height: 80,
          children: [
            {
              type: "text",
              top: "25%",
              left: "center",
              style: {
                width: "80",
                text: "",
                textAlign: "center",
                overflow: "truncate",
                textVerticaAlign: "middle",
                fill: "#3d383a",
                fontSize: "16px",
                fontWeight: "bold"
              }
            },
            {
              type: "text",
              top: "50%",
              left: "center",
              style: {
                text: "当前总收益",
                textAlign: "center",
                textVerticaAlign: "middle",
                fill: "#333333",
                fontSize: "12px"
              }
            }
          ]
        }
      }
    };
  },
  mounted() {
    // this.pieOption.graphic.children[0].style.text = "123456";
    this.getDetail();
  },
  methods: {
    onDownLoad(val) {
      console.log("下拉刷新", val);
    },
    onUpRefresh(val) {
      console.log("上拉加载", val);
    },
    getDetail() {
      const params = {
        userId: this.$userId
      };
      queryIncomeDetail(params).then(res => {
        if (res.code === 0) {
          this.pieOption.graphic.children[0].style.text = res.data.totalIncome;
          this.detailList = res.data.list.map(item => {
            return {
              name: item.typeName,
              money: item.money,
              incomeTime: item.incomeTime.substr(0, 16).replaceAll("-", ".")
            };
          });
          this.pieOption.series[0].data = this.detailList.map(item => {
            return {
              value: item.money,
              name: item.name
            };
          });
          const legend = this.detailList.map((item, index) => {
            return {
              selectedMode: false,
              ...this.legendPos[index],
              itemWidth: 12,
              data: [item.name]
            };
          });
          this.pieOption.legend = legend;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.income-detail {
  padding: 10px 16px;
}
.chart-box {
  width: 345px;
  height: 268px;
  margin: 15px auto 12px;
  padding: 0 5px;
  background-color: #ffffff;
}

.detail {
  box-sizing: border-box;
  width: 345px;
  margin: 0 auto;
  padding: 10px 16px;
  font-size: 14px;
  background-color: #ffffff;

  .detail-list {
    position: relative;
    height: 309px;
  }
  .detail-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    color: #333333;

    .time {
      color: #999999;
    }
  }
}
</style>