OfficeApp/subpkg/blockTransaction/blockTransaction.vue

<template>
  <view class="">
    <view class="card">
      <view class="item" v-if="card.is_show == true">
        <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.transaction_pool) }}</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",
        is_show: true
      },
      list: [],
      task_id: '',
      loadConfig: {
        page: 1,
        limit: 15,
        lastpage: '',
        loadingText: '努力加载中',
        loadmoreText: '轻轻上拉',
        nomoreText: '我也是有底线的~~',
        status: 'loadmore'
      },
    }
  },
  onLoad (options) {
    options?.is_show == 'false' ? this.card.is_show = options.is_show : null;
    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 += this.card.total_price;
        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>