OfficeApp/subpkg/orderDetail/orderDetail.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="detail">
      <uni-section class="title" titleFontSize="32rpx" :title="'账单明细 '+ nowYMD" type="line"></uni-section>
      <view class="card">
        <view class="item">
          <view class="text">
            收益总金额(元)
            <view class="price">{{income}}</view>
          </view>
          <view class="tips">
            平台收益：{{terraceIncome.count}}元（{{terraceIncome.num}}笔）
          </view>
        </view>
        <view class="item">
          <view class="text">
            支出总金额(元)
            <view class="price">{{disbursement}}</view>
          </view>
          <view class="tips">
            平台支出：{{terraceIncome.count}}元（{{terraceIncome.num}}笔）
          </view>
        </view>
        <view class="all">
          <view>收益总金额(元):</view>
          <view class="price">
            {{aggregateAmount}}
          </view>
        </view>
      </view>
    </view>
    <view class="bill_list">
      <view class="card" v-for="(item, index) in billList" :key="index">
        <view class="top">
          <view class="blue">账单详情</view>
          <view>账单日期：{{item.create_time}}</view>
        </view>
        <view class="bottom">
          <view class="left">
            <view>收益金额(元){{item.change_amount}}</view>
            <view class="num"></view>
          </view>
          <view class="right">
            <view>支出金额:{{item.change_amount_desc<0?item.change_amount:'0.00'}}</view>
            <view>入账金额:{{item.change_amount_desc>0?item.change_amount:'0.00'}}</view>
          </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 { accountLogLists } from "@/api/pay.js"
  import { Toast } from '@/libs/uniApi.js'
  export default {
    data() {
      return {
        transition: true,
        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() {
        if(this.loadConfig.status=="nomore")return;
        this.loadConfig.status="loading"
        let res = await accountLogLists({
          type: 'um', //账户余额
          page_no: this.loadConfig.page,
          page_size: this.loadConfig.page_size,
          time: this.nowYMD
        });
        this.loadConfig.status="loadmore"
        if(res.data.lists.length<this.loadConfig.limit){
          this.loadConfig.status="nomore"
        }else {
          this.loadConfig.page++;
        }
        this.billList = [...this.billList, ...res.data.lists];
      },
      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;
    .card{
      width: 694rpx;
      padding: 28rpx;
      background-color: #fff;
      margin-bottom: 21rpx;
      .top{
        display: flex;
        align-items: center;
        font-size: 25rpx;
        font-weight: 400;
        color: #333333FF;
        line-height: 39rpx;
        .blue{
          width: 137rpx;
          height: 49rpx;
          background: #3274F9;
          border-radius: 26rpx 26rpx 26rpx 26rpx;
          font-size: 25rpx;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 39rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 28rpx;
        }
      }
      .bottom{
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 160rpx;
        .left{
          flex: 1;
          text-align: center;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
          .num{
            font-size: 39rpx;
            font-weight: 500;
            color: #F02828;
            line-height: 39rpx;
          }
        }
        .right{
          flex: 1;
          font-size: 25rpx;
          font-weight: 400;
          color: #666666;
          line-height: 39rpx;
        }
      }
    }
  }
  
</style>