yh-uniapp/pages/income/index.vue

<template>
  <view>
    <view class="search-bar">
      <u-text v-if="queryParams.year == null || queryParams.month == null" suffixIcon="arrow-down" iconStyle="font-size: 26rpx" text="点击选择年月" labelColor="#999" @click="showYearMonth = true"/>
      <template v-else>
        <view style="display: flex;">
          <view style="flex: 1">
            <u-text suffixIcon="arrow-down" :text="`当前选择：${queryParams.year}年${queryParams.month}月`" iconStyle="font-size: 26rpx" labelColor="#000" @click="showYearMonth = true"/>
          </view>
          <view style="width: fit-content;padding: 0 1em;color: #3c9cff" @click="onClearQuery">清除筛选</view>
        </view>
      </template>
    </view>
    <scroll-view scroll-y style="height: calc(100vh - 80rpx)" @scrolltolower="handleScrolltolower">
      <view class="app-container">
        <view class="income-card" v-for="(item, index) of list">
          <u-collapse >
            <u-collapse-item
                :name="index"
                :title="`${item.year}年${item.month}月`"
                :label="`审核中:${item.verifying.toFixed(2)}元 已审核:${item.verified.toFixed(2)}元`">
              <u-empty v-if="isEmpty(item.children)"/>
              <template v-else >
                <view class="income-item" v-for="dateItem of item.children">
                  <u-cell :title="dateItem.date" is-link @click="$tab.navigateTo(`/pages/income/detail?date=${dateItem.date}`)">
                    <view slot="label" class="income-label">
                      <view>审核中: {{dateItem.verifying | fix2}}元</view>
                      <view style="margin-left: 20rpx; color: red;">已审核: {{dateItem.verified | fix2}}元</view>
                    </view>
                  </u-cell>
                </view>
              </template>
            </u-collapse-item>
          </u-collapse>
        </view>
      </view>
      <uni-load-more :status="loadStatus(this.loading,this.list.length,this.total)"/>
    </scroll-view>

    <u-datetime-picker
      ref="datetimePicker"
      :show="showYearMonth"
      v-model="yearMonth"
      mode="year-month"
      @close="showYearMonth = false"
      @cancel="showYearMonth = false"
      closeOnClickOverlay
      @confirm="onConfirmYearMonth"
      :max-date="new Date().getTime()"
    />
  </view>

</template>

<script>
import {parseTime} from "@/utils/ruoyi";
import {$loadList} from "@/utils/mixins";
import {listUserProdGroupByDate, listUserProdGroupByYearMonth} from "@/api/app/userProd";
import {isEmpty} from "@/utils";
import UEmpty from "@/uni_modules/uview-ui/components/u-empty/u-empty.vue";

export default {
  components: {UEmpty},
  mixins: [$loadList],
  data() {
    return {
      showYearMonth: false,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        year: null,
        month: null,
      },
      yearMonth: new Date(),
      list: [],
      loading: false,
      total: null,
    };
  },
  onReady() {
    // 微信小程序需要用此写法
    this.$refs.datetimePicker.setFormatter(this.formatter)
  },
  onLoad(option) {
    this.getList()
  },
  methods: {
    isEmpty,
    onOpenCollapse(index) {
      this.loadChildren(index);
    },
    loadChildren(index) {
      let row = this.list[index];
      let params = {
        year: row.year,
        month: row.month,
        pageNum: 1,
        pageSize: 100
      }
      this.$modal.loading("加载中");
      listUserProdGroupByDate(params).then(res => {
        row.children = res.rows;
      }).finally(() => {
        this.$modal.closeLoading();
      })
    },
    onClearQuery() {
      this.queryParams.year = null;
      this.queryParams.month = null;
      this.getList();
    },
    handleScrolltolower() {
      this.loadList()
    },
    // 加载更多
    loadList() {
      this.loadMore(() => {
        this.queryParams.pageNum ++;
        this.loading = true;
        listUserProdGroupByYearMonth(this.queryParams).then(res => {
          if (res.code === 200) {
            this.list.push(...res.rows);
            this.total = res.total;
          }
        }).finally(() => {
          this.loading = false;
        })
      }, this.loadStatus(this.loading, this.list.length, this.total))
    },
    formatter(type, value) {
      if (type === 'year') {
        return `${value}年`
      }
      if (type === 'month') {
        return `${value}月`
      }
      if (type === 'day') {
        return `${value}日`
      }
      return value
    },
    onConfirmYearMonth({value}) {
      let valueDate = new Date(value);
      this.queryParams.year = valueDate.getFullYear();
      this.queryParams.month = valueDate.getMonth() + 1;
      this.showYearMonth = false;
      this.getList();
    },
    getList() {
      this.queryParams.pageNum = 0;
      this.list = [];
      this.total = null;
      this.loadList();
    }
  },
}
</script>

<style lang="scss">
.search-bar {
  position: relative;
  height: fit-content;
  padding: 0 20rpx;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0,0,0,0.2);
  z-index: 99;
  line-height: 80rpx;
}
.income-card {
  background-color:#fff;
  border-radius: 8rpx;
  margin-bottom: 14rpx;

  .income-label {
    color: $uni-color-subtitle;
    display: flex;
    font-size: 26rpx;
  }
  .income-total {
    height: fit-content;
    font-size: 30rpx;
    color: red;
    padding-left: 1em;
  }
}
</style>