detection-business/pages/staff/goRoyalty.vue

<template>
  <view class="container">
    <!-- 时间选择器 -->
    <view class="date-picker">
      <view @click="show = true" class="date-picker-button">选择月份</view>
      <span class="selected-date" v-if="rescueStartMonth">已选时间: {{ rescueStartMonth }}</span>
      <view @click="clearDate" class="clear-date-button" v-if="rescueStartMonth">清除时间</view>
    </view>
    <u-datetime-picker
        :show="show"
        v-model="value1"
        mode="year-month"
        @input="selectDate"
        @cancel="show = false"
    ></u-datetime-picker>

    <!-- 总提成金额 -->
    <view class="total-royalty">
      总提成金额: ¥{{ totalRoyalty.toFixed(2) }}
    </view>

    <!-- 提成记录列表 -->
    <view v-for="item in list" :key="item.node_id" class="list-item">
      <view class="row">
        <span class="label">项目名称:</span>
        <span class="project-name">{{ item.projectName }}</span>
      </view>
      <!--      <view class="row">-->
      <!--        <span class="label">处理人:</span>-->
      <!--        <span class="handler-name">{{ item.handlerName }}</span>-->
      <!--      </view>-->
      <view class="row">
        <span class="label">提成金额:</span>
        <span class="royalty-amount">¥{{ item.royaltyAmount.toFixed(2) }}</span>
      </view>
      <view class="row">
        <span class="label">完成时间:</span>
        <span class="create-time">{{ formatDate(item.node_create_time) }}</span>
      </view>
    </view>
  </view>
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      list: [],
      page: 1,
      size: 10,
      total: 0,
      pages: 2,
      totalRoyalty: 0,
      value1: Number(new Date()),
      rescueStartMonth: null,
      show: false,
    };
  },
  onLoad() {
    this.getRoyalty();
  },
  onReachBottom() {
    if (this.page < this.pages) {
      this.page++;
      this.getRoyalty();
    }
  },
  methods: {
    getRoyalty() {
      request({
        url: '/system/info/getRoyaltyListApp',
        method: 'get',
        params: {
          pageNo: this.page,
          pageSize: this.size,
          rescueStartMonth: this.rescueStartMonth
        }
      }).then(res => {
        this.total = res.data.total;
        this.page = res.data.current;
        this.pages = res.data.pages;
        this.list = [...this.list, ...res.data.records];

        request({
          url: '/system/info/getRoyaltySumApp',
          method: 'get',
          params: {
            rescueStartMonth: this.rescueStartMonth
          }
        }).then(res => {
          this.totalRoyalty = res.data.royaltyAmountSum;
        })
      });
    },
    selectDate() {
      this.page = 1;
      this.show = false;
      const date = new Date(this.value1);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      this.rescueStartMonth = `${year}-${month}`;
      this.list = [];
      this.getRoyalty();
    },
    clearDate() {
      this.rescueStartMonth = null;
      this.value1 = Number(new Date());
      this.list = [];
      this.totalRoyalty = 0;
      this.page = 1;
      this.getRoyalty();
    },
    formatDate(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      const hours = date.getHours().toString().padStart(2, '0');
      const minutes = date.getMinutes().toString().padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}`;
    }
  },
};
</script>

<style lang="scss">
.container {
  padding: 10px;
  background-color: #f9f9f9;
}

.date-picker {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
  justify-content: space-between;
}

.date-picker-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.selected-date {
  color: #666;
  font-size: 14px;
  margin-left: 10px;
}

.clear-date-button {
  background-color: #ff4d4d;
  color: #fff;
  padding: 10px 20px;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  margin-left: 10px;
}

.total-royalty {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  padding: 15px;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.list-item {
  padding: 15px;
  margin-bottom: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.row {
  display: flex;
  align-items: center;
  margin: 5px 0;
}

.label {
  font-weight: bold;
  color: #333;
  min-width: 80px;
}

.project-name, .handler-name, .royalty-amount, .create-time {
  color: #666;
}
</style>