OfficeApp/subpkg/orderDetail/orderDetail.vue

<template>
  <view class="" style="width: 100vw;overflow: hidden;">
    <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">{{extend.deposit.toFixed(2)}}</view>
          </view>
          <!-- <view class="tips">
            押金：{{terraceIncome.count}}元（{{terraceIncome.num}}笔）
          </view> -->
        </view>
        <view class="item">
          <view class="text">
            个人收益金额(元)
            <view class="price">{{extend.user_money.toFixed(2)}}</view>
          </view>
          <!-- <view class="tips">
            收益：{{terraceIncome.count}}元（{{terraceIncome.num}}笔）
          </view> -->
        </view>
        <view class="all" style="justify-content: space-between;">
          <view></view>
          <view style="display: flex;">
            <view>收益总金额(元):</view>
            <view class="price">
              {{(extend.deposit+extend.user_money).toFixed(2)}}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="bill_list">
      <view class="item" v-for="(item, index) in billList" :key="item.id">
        <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.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>
      <!-- <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: ''
        },
        extend: {
          deposit: 0,
          user_money: 0
        },
        loadConfig: {
          page: 1,
          limit: 15,
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '没有更多账单了~~',
          status: 'loadmore'
        },
      }
    },
    onLoad() {
      this.initDate();
      this.initLoad();
    },
    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 initLoad(){
        this.loadConfig.page = 1;
        this.loadConfig.status = 'loadmore';
        this.billList = [];
        await this.loadBill();
      },
      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.limit,
          time: this.nowYMD
        });
        this.loadConfig.status = "loadmore"
        if (res.data.lists.length < this.loadConfig.limit) {
          this.loadConfig.status = "nomore"
        } else {
          this.loadConfig.page++;
        }
        if(res.data?.extend?.deposit){
          this.extend = res.data.extend;
        }
        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.initLoad()
      },
      // 选择月份
      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() {
      this.initLoad().then(()=>{
        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;
        }
      }
    }

    .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: #0122c7;
          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>