kailin_mp/pages/balance/index.vue

<template>
  <view class="balance">
    <!-- <view class="date_picker">
      <picker mode="date" :value="selectedDate" fields="month" @change="_bindDateChange">
        <view>{{ formattedDate }}</view>
      </picker>
    </view> -->
    <view class="balance_list">
      <!-- <view class="balance_date">2025年1月</view> -->
      <view class="balance_item" @click="_goDetail(item.id)" v-for="(item, index) in balanceList" :key="item.id">
        <view class="balance_item_left">
          <view style="margin-bottom: 10rpx">{{ item.type_state }}</view>
          <view>{{ item.insert_time }}</view>
        </view>
        <view class="balance_item_right">
          <view class="price">{{ item.prefix == 1 ? "+" : "-" }}{{ item.amount }}</view>
          <view>余额：{{ item.balance }}</view>
        </view>
      </view>
    </view>
    <Empty v-if="balanceList.length == 0 && !isReqing" text="----- 还没有记录啦 -----" />
    <view class="to_bottom" v-if="isLast && balanceList.length"> -----到底啦-----</view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import Empty from "@/components/Empty/Empty.vue";
import http from "@/utils/request";

const selectedDate = ref("请选择日期");
const balanceList = ref([]);
const page = ref(1);
const pageSize = ref(15);
const isLast = ref(false);
const isReqing = ref(false);

const _bindDateChange = (e) => {
  selectedDate.value = e.detail.value;
};

onMounted(() => {
  _getBalacnelist();
});

const _goDetail = (record_id) => {
  uni.navigateTo({
    url: `/pages/balance/detail?record_id=${record_id}`,
  });
};

const _getBalacnelist = async () => {
  if (isReqing.value) return;
  isReqing.value = true;

  try {
    const callback = await http.request("api/custom_amount/get_record_list", { page: page.value, limit: pageSize.value });
    if (callback.code == "success") {
      if (callback.data.last_page <= page.value) isLast.value = true;
      const balanceListData = callback.data.data || [];
      balanceList.value = [...balanceList.value, ...balanceListData];
    }
  } finally {
    isReqing.value = false;
  }
};

onReachBottom(async () => {
  console.log("上拉加载");
  if (isLast.value || isReqing.value) return;
  page.value += 1;
  await _getBalacnelist();
});

onPullDownRefresh(async () => {
  page.value = 1;
  balanceList.value = [];
  isLast.value = false;
  await _getBalacnelist();
  uni.stopPullDownRefresh();
});

const formattedDate = computed(() => {
  if (selectedDate.value === "请选择日期") {
    return selectedDate.value;
  }
  const [year, month] = selectedDate.value.split("-");
  return `${year}年${parseInt(month)}月`;
});
</script>

<style scoped lang="less">
.balance {
  padding: 36rpx;
  box-sizing: border-box;
  width: 100vw;
  .date_picker {
    padding: 0 16rpx;
    border: 1px solid #e5e5e5;
    width: 250rpx;
    height: 60rpx;
    line-height: 60rpx;
    margin-bottom: 40rpx;
  }
  .balance_list {
    .balance_date {
      font-weight: bold;
      padding-bottom: 20rpx;
      border-bottom: 2rpx solid #ddd;
    }
    .balance_item {
      padding-bottom: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-bottom: 1px solid #ddd;
      .balance_item_left,
      .balance_item_right {
        display: flex;
        flex-direction: column;
        font-size: 26rpx;
        padding-top: 20rpx;
      }
      .balance_item_right {
        align-items: flex-end;
        > .price {
          font-weight: bold;
          margin-bottom: 10rpx;
          &.red {
            color: #ff0000;
          }
          &.green {
            color: #00ff00;
          }
        }
      }
    }
  }
}
</style>