charge-front/src/pages-user/wallet-detail/wallet-detail.vue

<template>
  <view class="tabs flex-align-center">
    <view
      v-for="(item, index) in types"
      :key="index"
      class="fs-30 mr-60"
      :style="{
        color:
          type === item.value ? 'rgba(0, 0, 0, 1);' : 'rgba(0, 0, 0, 0.6);',
      }"
      @click="changeType(index)"
      >{{ item.label
      }}<view
        :style="{ opacity: type === item.value ? '1' : '0' }"
        class="active"
      ></view
    ></view>
  </view>

  <view
    class="pl-30 pr-30"
    v-if="infiniteScroller.list && infiniteScroller.list.length"
  >
    <view
      class="item flex-align-center"
      v-for="(item, index) in infiniteScroller.list"
      :key="index"
      @click="detail(index)"
    >
      <view>
        <view class="fs-30 fw-500" key="title" duration="300">{{
          typesMap[item.type - 1]
        }}</view>
        <view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">余额</view>
      </view>
      <view class="ml-auto" style="text-align: right">
        <view class="fs-30 fw-500">
          <text>{{ item.type > 1 ? "- " : "" }}{{ item.amount }}</text>
          <text class="fs-24 ml-6">元</text>
        </view>
        <view class="fs-24" style="color: rgba(0, 0, 0, 0.4)">{{
          item.transaction_time
        }}</view>
      </view>
      <view class="ml-32" v-if="item.type === 3">
        <uni-icons type="right" size="12" color="rgba(0,0,0,0.4)"></uni-icons>
      </view>
    </view>
  </view>

  <view
    class="pt-40 flex-center fs-30"
    style="color: rgba(0, 0, 0, 0.6)"
    v-if="infiniteScroller.list && infiniteScroller.list.length <= 0"
    >暂无数据</view
  >
</template>

<script setup lang="ts">
import { useInfiniteScroll } from "../../utils/infinite-scroll";
import { onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import { ref } from "vue";
import { fetchWallet } from "../../api/user";
const type = ref(0);
const types = ref([
  {
    label: "全部",
    value: 0,
  },
  {
    label: "充值",
    value: 1,
  },
  {
    label: "消费",
    value: 3,
  },
]);
const typesMap = ref(["充值", "提现", "消费"]);
const infiniteScroller = useInfiniteScroll(10, (page) => {
  return fetchWallet(type.value, page, 10).then((res: any) => {
    if (res && res.length) {
      res.forEach((item: any) => {
        item.amount = (Number(item.amount) / 100).toFixed(2);
      });
    }
    return res;
  });
});
const changeType = (index: number) => {
  type.value = types.value[index].value;
  infiniteScroller.refresh();
};
const detail = (index: number) => {
  if (!infiniteScroller.list) {
    return;
  }
  if (infiniteScroller.list[index].type === 3) {
    uni.navigateTo({
      url: `/pages-charge/order/order?id=${infiniteScroller.list[index].transaction_id}`,
    });
  }
};
onLoad(() => {
  infiniteScroller.refresh();
});
onReachBottom(() => {
  infiniteScroller.next();
});
onPullDownRefresh(() => {
  infiniteScroller.refresh();
});
</script>

<style lang="scss">
.tabs {
  height: 92rpx;
  padding: 0 40rpx;
  & > view {
    position: relative;
    height: 62rpx;
    .active {
      position: absolute;
      left: 50%;
      bottom: 0px;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      border-radius: 4rpx;
      background-color: var(--color-primary);
    }
  }
}

.item {
  height: 170rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
  &:last-child {
    border-bottom: none;
  }
}
</style>