OfficeApp/subpkg/blockTransaction/blockTransaction.vue

<template>
  <view class="">
    <view class="card">
      <view class="item">
        <view>当日完成金额</view>
        <!-- <view class="price" v-if="company.deposit">{{cCount(company.deposit)}}</view>
        <view class="price" v-else>0.00</view> -->
        <view class="price">{{c_money(card.total_price)}}</view>
      </view>
      <view class="item">
        <view>目标完成金额</view>
        <!-- <view class="price" v-if="company.company_money">{{cCount(company.company_money)}}</view>
        <view class="price" v-else>0.00</view> -->
        <view class="price">{{c_money(card.day_money)}}</view>
      </view>
      <view class="item">
        <view>交易金额剩余池</view>
        <view class="price">{{c_money(card.transaction_pool)}}</view>
      </view>
    </view>


    <!-- <view class="nav">
      <view class="title">账单流水</view>
      <view class="right">
        <view class="btn" :class="current==0?'active':''" @click="current=0;initLoad()">日账单</view>
        <view class="btn" :class="current==1?'active':''" @click="current=1;initLoad()">月账单</view>
        <view class="btn" @click="navTo('/subpkg/companyFinance/companyFinance')">历史账单</view>
      </view>
    </view> -->


    <view class="list">
      <!-- <view class="item" v-for="(item, index) in 10" :key="index">
        <view class="top">
          交易时间：2023-06-16  18:07:59
        </view>
        <view class="bottom">
          <view class="text">
            <view class="t_item">
              <view>购买用户：</view>
              <view class="tips">**某</view>
            </view>
            <view class="t_item">
              <view>交易商户：</view>
              <view class="tips">通滩镇日杂百货里海云仓</view>
            </view>
            <view class="t_item">
              <view>交易金额：</view>
              <view class="tips">40.00(元)</view>
            </view>
          </view>
        </view>
      </view> -->
      <view class="item" v-for="(item, index) in list" :key="item.id">
        <view class="top">
          账单日期：{{item.create_time}}
        </view>
        <view class="t_bottom">
          <view class="order">订单编号：{{item.order_sn}}</view>
          <view class="price">交易额: {{item.total_price}}</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 { Toast } from '../../libs/uniApi'
  import { taskOrderDetail } from "@/api/task.js"
  export default {
    data() {
      return {
        card: {
          total_price: "0.00",
          status: 1,
          day_money: "0.00",
          transaction_pool: "0.00"
        },
        list: [],
        task_id: '',
        loadConfig: {
          page: 1,
          limit: 15,
          lastpage: '',
          loadingText: '努力加载中',
          loadmoreText: '轻轻上拉',
          nomoreText: '我也是有底线的~~',
          status: 'loadmore'
        },
      }
    },
    onLoad(options) {
      options.task_id ? this.task_id = options.task_id : null;
      this.initLoad();
    },
    onShow() {},
    onReachBottom() {
      this.loadList();
    },
    methods: {
      navTo(url) {
        url ?
          uni.navigateTo({
            url: url,
          }) : Toast('暂未开放')
      },
      async initLoad() {
        this.loadConfig.page = 1;
        this.loadConfig.status = "loadmore";
        this.list = [];
        await this.loadList();
      },
      async loadList() {
        try {
          let that = this;
          if (this.loadConfig.status == "nomore") return;
          this.loadConfig.status = "loading"
          let res = await taskOrderDetail({
            page: this.loadConfig.page,
            limit: this.loadConfig.limit,
            id: this.task_id,
            // company_id: this.$store.state.app.userInfo.company_id
          })
          this.loadConfig.status = "loadmore";
          if (res.data?.list?.length == 0 || res.data?.list?.length < 25) {
            this.loadConfig.status = "nomore"
          } else {
            this.loadConfig.page++;
          }
          let extend = res.data?.extend;
          Object.keys(this.card).forEach((key)=>{
            if(extend?.transaction?.arr[key]!=null&&extend?.transaction?.arr[key]!=undefined)this.card[key] = extend?.transaction?.arr[key];
          })
          // this.card.transaction_pool = extend?.transaction.transaction_pool;
          this.list = [...this.list, ...res.data?.list]
        } catch (e) {
          this.loadConfig.status = "nomore"
        }
      },
      c_money(str){
        try{
          if(!isNaN(str)){
            typeof str != 'string' ? str = str.toFixed(2) : str = parseFloat(str).toFixed(2);
          }else str = '0.00'
        }catch(e){
          str = '0.00'
        }
        return '¥'+str;
      }
    },
    onPullDownRefresh() {
      this.initLoad().then(()=>{
        uni.stopPullDownRefresh()
      })
    }
  }
</script>

<style lang="scss">
  .card {
    margin: 28rpx auto;
    width: 694rpx;
    height: 158rpx;
    background: #0122c7;
    border-radius: 18rpx 18rpx 18rpx 18rpx;
    opacity: 1;
    padding: 28rpx 12rpx;
    display: flex;
    justify-content: space-around;
    color: #fff;
    text-align: center;

    .item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 28rpx;
      flex: 1;
      border-right: 1px solid #fff;

      &:last-child {
        border-right: none;
      }

      .price {
        font-size: 42rpx;
        font-weight: 500;
      }
    }
  }

  .nav {
    margin: 28rpx;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;

    .title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333333;
      display: flex;
      align-items: center;

      &:before {
        content: "";
        width: 6rpx;
        height: 26rpx;
        border-radius: 10rpx;
        margin-right: 10rpx;
        display: inline-block;
        background-color: #0122c7;
      }
    }

    .right {
      display: flex;

      .btn {
        margin-left: 28rpx;
      }

      .active {
        color: #0122c7;
      }
    }
  }

  .list {
    .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: #FF7C32;
          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;

            &:nth-child(1) {
              margin-bottom: 16rpx;
            }

            .tips {
              font-size: 28rpx;
              font-weight: 400;
              color: #333333;
            }
          }
        }

        .price {
          display: flex;
          align-items: center;
          font-size: 32rpx;
          font-weight: 500;
          color: #F02828;
        }
      }

      .t_bottom {
        font-size: 25rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .price {
          color: #FF7C32;
          flex-shrink: 0;
        }
      }
    }
  }
</style>