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="账单明细 2023-7-24" type="line"></uni-section>
      <view class="card">
        <view class="item">
          <view class="text">
            收益总金额(元)
            <view class="price">100.00</view>
          </view>
          <view class="tips">
            平台收益：100.00元（1笔）
          </view>
        </view>
        <view class="item">
          <view class="text">
            支出总金额(元)
            <view class="price">0.00</view>
          </view>
          <view class="tips">
            平台支出：0.00元（0笔）
          </view>
        </view>
        <view class="all">
          <view>收益总金额(元):</view>
          <view class="price">
            100.00
          </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 {
        billList: [],
        nowDate:{
          y: '',
          m: '',
          d: ''
        },
        loadConfig:{
          page: 1,
          limit: 15,
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '我也是有底线的~~',
          status: 'nomore'
        },
      }
    },
    onLoad() {},
    onShow() {
      this.initDate()
      this.loadBill()
    },
    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;
      }
    },
    methods: {
      async loadBill() {
        let res = await accountLogLists({
          type: 'um', //账户余额
          page_no: 1,
          page_size: 10
        });
        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) {
        console.log(e);
      },
      // 选择月份
      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 {
    .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;
        }
      }
    }
  }
</style>