PunchSettle-MiniProgram/src/pages/account/accountTransferHistory.vue

<template>
  <!-- 月份选择器 -->
  <view class="date-picker">
    <view class="date-picker-item arrow left-arrow">
      <uni-icons type="left" size="30" @click="plusMonth(-1)"></uni-icons>
    </view>
    <view class="date-picker-item">
      <picker mode="date" fields="month" :value="currentMonth" @change="monthChange">
        <view class="picker-view">{{ currentMonth }}</view>
      </picker>
    </view>
    <view class="date-picker-item arrow right-arrow">
      <uni-icons type="right" size="30" @click="plusMonth(1)"></uni-icons>
    </view>
  </view>

  <!-- 数据列表 -->
  <uni-list :border="true">
    <uni-list-item v-for="item in listData" :key="item.id">
      <template v-slot:body>
        <view class="item-box">
          <span class="item-label">转账类型</span>
          <span class="item-label">{{ item.transferCategory == 'TRANSFER' ? '转账' : '结算' }}</span>
        </view>
        <view class="item-box" v-if="item.transferCategory == 'TRANSFER'">
          <span class="item-label">转出账户</span>
          <span class="item-label">{{ item.senderAccountName }}</span>
        </view>
        <view class="item-box" v-if="item.transferCategory == 'TRANSFER'">
          <span class="item-label">转出账户转入前积分</span>
          <span class="item-label">{{ item.saPointsBeforeTransfer }}</span>
        </view>
        <view class="item-box" v-if="item.transferCategory == 'TRANSFER'">
          <span class="item-label">转出账户转入后积分</span>
          <span class="item-label">{{ item.saPointsAfterTransfer }}</span>
        </view>
        <view class="item-box">
          <span class="item-label">转出账户</span>
          <span class="item-label">{{ item.recipientAccountName }}</span>
        </view>
        <view class="item-box">
          <span class="item-label">转入账户转入前积分</span>
          <span class="item-label">{{ item.raPointsBeforeTransfer }}</span>
        </view>
        <view class="item-box">
          <span class="item-label">转入账户转入后积分</span>
          <span class="item-label">{{ item.raPointsAfterTransfer }}</span>
        </view>
        <view class="item-box">
          <span class="item-label">转账积分</span>
          <span class="item-label">{{ item.transferPoints }}</span>
        </view>
        <view class="item-box">
          <span class="item-label">转账时间</span>
          <span class="item-value">{{ item.transferTime }}</span>
        </view>
      </template>
    </uni-list-item>
  </uni-list>
  <uni-load-more status="no-more" v-if="!listData || listData.length == 0" />
</template>

<script setup>
import { ref } from 'vue';
import { accountApi } from '@/apis/apis';
import { onLoad, onShow, onPullDownRefresh } from '@dcloudio/uni-app';

// 属性
/**
 * 当前选中的月
 */
const currentMonth = ref('2025-04');

/**
 * 数据
 */
const listData = ref([]);

// 方法
/**
 * 月份选择器
 */
const monthChange = (e) => {
  currentMonth.value = e.detail.value
}

/**
 * 月份加减
 */
const plusMonth = (num) => {
  // 转换成date对象
  let tempDate = new Date(currentMonth.value);
  // 月份加减
  tempDate.setMonth(tempDate.getMonth() + num);

  // daet对象转换成字符串
  let tempYear = tempDate.getFullYear();
  let tempMonth = (tempDate.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，+1后格式化为两位数
  currentMonth.value = `${tempYear}-${tempMonth}`;

  loadData();
}

/**
 * 获取转账数据
 */
const loadData = async () => {
  let res = await accountApi.queryTransferHistory({ 'transferMonth': currentMonth.value });
  listData.value = res ? res : [];
}

// 生命周期
onLoad(() => {
  // daet对象转换成字符串
  let tempDate = new Date();
  let tempYear = tempDate.getFullYear();
  let tempMonth = (tempDate.getMonth() + 1).toString().padStart(2, "0"); // 月份从0开始，+1后格式化为两位数
  currentMonth.value = `${tempYear}-${tempMonth}`;
});

onShow(() => {
  loadData();
})

onPullDownRefresh(() => {
  loadData();
});
</script>

<style lang="scss" scoped>
.date-picker {
  display: flex;

  .date-picker-item {
    flex: 1;

    picker {
      width: 100%;
      height: 100%;
      display: flex;

      display: flex;
      /* 水平居中 */
      justify-content: center;
      /* 垂直居中 */
      align-items: center;
    }
  }

  .arrow {
    /* 启用 Flexbox 布局 */
    display: flex;
    /* 垂直居中 */
    align-items: center;
  }

  .left-arrow {
    /* 将子元素对齐到右侧 */
    justify-content: flex-end;
  }

  .right-arrow {
    /* 将子元素对齐到右侧 */
    justify-content: flex-start;
  }
}

::v-deep .uni-list-item__container .uni-list-item__header {
  width: 0%;
}

::v-deep .uni-list-item__container>view {
  width: 100%;
}

.item-box {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100%;
}
</style>