wx-qhb/pageC/balanceDetail/balanceDetail.vue

<template>
  <view class="detail">
    <!-- 顶部tab -->
    <view class="tab">
      <text :class="{ selected: selected == '' }" @click="swcthTab('')">{{
        i18n.whole
      }}</text>
      <text
        :class="{ selected: selected == 'income' }"
        @click="swcthTab('income')"
        >{{ i18n.income }}</text
      >
      <text
        :class="{ selected: selected == 'consume' }"
        @click="swcthTab('consume')"
        >{{ i18n.expenditure }}</text
      >
    </view>
    <!-- 顶部tab -->

    <view class="content">
      <!-- 余额明细 -->
      <MoneyDetail
        v-for="(item, index) in moneyDetail"
        :itemInfo="item"
        :key="index"
      />
      <!-- 余额明细 -->
    </view>
  </view>
</template>

<script>
import MoneyDetail from "../mineComponent/moneyDetail/index.vue";
export default {
  components: {
    MoneyDetail,
  },
  data() {
    return {
      selected: "", //判断选中某个tab栏
      page: 1,
      total: 0,
      //存放余额明细数据
      moneyDetail: [],
      type: "",
    };
  },
  computed: {
    i18n() {
      return this.$t("index");
    },
  },
  onReachBottom() {
    //商品总数量小于当前获取到的商品数量
    if (this.total > this.moneyDetail.length) {
      this.page++;
      this.getMoneyList();
    }
  },
  onLoad(options) {
    this.type = options.type;
    if (this.type == "balance") {
      uni.setNavigationBarTitle({
        title: "余额明细",
      });
    } else {
      uni.setNavigationBarTitle({
        title: this.i18n.depositDetails,
      });
    }
  },
  methods: {
    swcthTab(num) {
      this.selected = num;
      this.getMoneyList(1);
    },
    //获取余额明细
    getMoneyList(value) {
      uni.$u.http
        .get(
          `/api/finance?is_page=1&page=${this.page}&limit=10&account_type=${this.type}&type=${this.selected}`
        )
        .then((res) => {
          //判断是否为触底加载 不是直接赋值，是则连接两个数组,value存在则为筛选
          if (this.moneyDetail.length == 0 || value) {
            this.moneyDetail = res.data;
          } else {
            this.moneyDetail = this.moneyDetail.concat(res.data);
          }
          this.total = res.total;
        });
    },
  },
  mounted() {
    this.getMoneyList();
  },
};
</script>

<style lang="scss" scoped>
.detail {
  width: 100%;
  background-color: #fff;
  .tab {
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: rgba(34, 34, 34, 0.6);
    border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
    height: 90rpx;
  }
  .selected {
    color: #222;
    font-weight: 600;
    position: relative;
  }
  .selected::before {
    content: "";
    display: block;
    height: 4rpx;
    background-color: #f83224;
    width: 100%;
    position: absolute;
    bottom: -24rpx;
  }
  .content {
    padding: 0 32rpx;
  }
}
</style>