OfficeApp/subpkg/companyFinance/companyFinance.vue

<template>
  <view class="">
    <view class="calendar">
      <picker mode="date" fields="month" @change="bindDateChangeMonth">
        <view class="date">
          <view class="month">{{nowDate.m}}月</view>
          <view>{{nowDate.y}}</view>
        </view>
      </picker>
      <uni-calendar :insert="true" @change="changeDate" :date="nowYMD" :showMonth="false"/>
    </view>
    <view class="bill_list">
      <view class="item" v-for="(item, index) in billList" :key="index">
        <view class="top">
          账单日期: {{item.create_time}}
        </view>
        <view class="bottom">
          <view class="text">
            <view class="t_item">
              <view class="t_title">任务名称：</view>
              <view class="tips">{{item.remark}}</view>
            </view>
            <view class="t_item">
              <view class="t_title">金额归属：</view>
              <view class="tips"><text v-if="item.userInfo">{{item.userInfo.nickname}}</text></view>
            </view>
            <view class="t_item">
              <view class="t_title">收益来源：</view>
              <view class="tips">
                <text v-if="item.change_type==202" style="color: #46be61;">{{item.type_desc}}</text>
                <text v-else-if="item.change_type==203" style="color: #ff7c32;">{{item.type_desc}}</text>
                <text v-else="item.change_type==203">{{item.type_desc}}</text>
              </view>
            </view>
          </view>
          <view class="price">{{item.change_amount_desc}}</view>
        </view>
      </view>
      <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
    </view>
  </view>
</template>

<script>
  import { accountDateList } from "@/api/company.js"
  import { Toast } from '@/libs/uniApi.js'
  export default {
    data() {
      return {
        billList: [],
        nowDate:{
          y: '',
          m: '',
          d: ''
        },
        loadConfig:{
          page: 1,
          limit: 25,
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '没有更多账单了~~',
          status: 'loadmore'
        },
      }
    },
    onLoad() {
      this.initDate()
      this.loadBill()
    },
    onShow() {},
    computed:{
      nowYMD(){
        let m = this.nowDate.m<10?'0'+this.nowDate.m:this.nowDate.m;
        let d = this.nowDate.d<10?'0'+this.nowDate.d:this.nowDate.d;
        return this.nowDate.y+'-'+m+'-'+d;
      },
      // 总收益
      aggregateAmount(){
        return (this.income>this.disbursement?this.income-this.disbursement:0).toFixed(2);
      },
      // 收益
      income(){
        let count = 0;
        this.billList.forEach(item=>{
          item.action==1?count+=+item.change_amount:null;
        })
        return count.toFixed(2);
      },
      // 平台收益
      terraceIncome(){
        let count = 0;
        let num = 0;
        this.billList.forEach(item=>{
          if(item.action==1&&item.change_type!==201){
            count+=+item.change_amount;
            num++;
          }
        })
        return {
          count: count.toFixed(2),
          num: num
        };
      },
      // 支出
      disbursement(){
        let count = 0;
        this.billList.forEach(item=>{
          item.action==2?count+=+item.change_amount:null;
        })
        return count.toFixed(2);
      },
      // 平台支出
      terraceDisbursement(){
        let count = 0;
        let num = 0;
        this.billList.forEach(item=>{
          if(item.action==2&&item.change_type!==201){
            count+=+item.change_amount;
            num++;
          }
        })
        return {
          count: count.toFixed(2),
          num: num
        };
      }
    },
    onReachBottom() {
      this.loadBill()
    },
    methods: {
      async loadBill() {
        // change_type 200,201,202,203
        // 200 平台增加余额
        // 201 充值增加余额
        // 202 任务收益金额
        // 203 任务账户余额增加
        if(this.loadConfig.status=="nomore")return;
        this.loadConfig.status="loading"
        let res = await accountDateList({
          page_no: this.loadConfig.page,
          page_size: this.loadConfig.page_size,
          time: this.nowYMD,
          company_id: this.$store.state.app.userInfo.company_id
        });
        this.loadConfig.status="loadmore"
        if(res.data.length<this.loadConfig.limit){
          this.loadConfig.status="nomore"
        }else {
          this.loadConfig.page++;
        }
        this.billList = [...this.billList, ...res.data];
      },
      initDate(){
        let date = new Date();
        this.nowDate.y = date.getFullYear();
        this.nowDate.m = date.getMonth()+1;
        this.nowDate.d = date.getDate();
      },
      // 选择日期
      changeDate(e) {
        this.nowDate.y = e.year;
        this.nowDate.m = +e.month;
        this.nowDate.d = e.date;
        this.loadConfig.page = 1;
        this.loadConfig.status = 'loadmore';
        this.billList = [];
        this.loadBill();
      },
      // 选择月份
      bindDateChangeMonth(e){
        this.nowDate.y = e.detail.value.split('-')[0];
        let m = e.detail.value.split('-')[1];
        this.nowDate.m = m<10 ? +m : m;
      }
    },
    onPullDownRefresh() {
      uni.stopPullDownRefresh()
    }
  }
</script>

<style lang="scss">
  .calendar {
    background-color: #fff;
    padding-bottom: 28rpx;
    .date {
      display: flex;
      align-items: flex-end;
      background-color: #fff;
      padding: 28rpx;
      color: #333333;
      font-size: 25rpx;

      .month {
        margin-right: 15rpx;
        height: 49rpx;
        font-size: 35rpx;
        font-weight: bold;
      }
    }
  }

  .detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 28rpx;

    .title {
      width: 100%;
      background-color: transparent;
      margin-left: 10rpx;
    }
    
    .card {
      width: 694rpx;
      // height: 454rpx;
      padding: 28rpx;
      background: #FFFFFF;
      border-radius: 14rpx 14rpx 14rpx 14rpx;

      .item {
        font-size: 25rpx;
        font-weight: 400;
        color: #666666;
        line-height: 39rpx;
        padding-bottom: 40rpx;

        .text {
          font-size: 28rpx;
          color: #333333;
          line-height: 39rpx;
          display: flex;
          justify-content: left;
          padding-bottom: 28rpx;

          .price {
            font-size: 35rpx;
            font-weight: 500;
            color: #F9AA32;
            line-height: 39rpx;
            margin-left: 32rpx;
          }
        }
      }

      .all {
        font-size: 28rpx;
        font-weight: 400;
        color: #333333;
        line-height: 39rpx;
        display: flex;
        justify-content: right;

        .price {
          font-size: 42rpx;
          font-weight: 500;
          color: #F02828;
          line-height: 39rpx;
          margin-left: 18rpx;
        }
      }
    }
  }
  
  .bill_list{
    // background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 28rpx;
    .item {
      margin: 0 auto;
      margin-bottom: 28rpx;
      width: 694rpx;
      // height: 238rpx;
      background: #FFFFFF;
      border-radius: 14rpx 14rpx 14rpx 14rpx;
      opacity: 1;
      padding: 28rpx;
    
      .top {
        margin-bottom: 28rpx;
        font-size: 25rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
    
        &:before {
          display: inline-block;
          content: '账单详情';
          width: 137rpx;
          height: 49rpx;
          line-height: 49rpx;
          text-align: center;
          background: #3274F9;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          color: #fff;
          margin-right: 28rpx;
        }
      }
    
      .bottom {
        display: flex;
        justify-content: space-between;
    
        .text {
          font-size: 25rpx;
          font-weight: 400;
          color: #999999;
          line-height: 39rpx;
          .t_item{
            display: flex;
            .t_title{
              margin-bottom: 16rpx;
              flex-shrink: 0 !important;
            }
            .tips{
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }
        .price{
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #F02828;
        }
      }
    }
  }
  
</style>