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

<template>
  <view class="page flex-column">
    <navigation-bar
      autoFixedStyle="background-color:#fff;"
      title="我的钱包"
      @ready="ready"
    ></navigation-bar>
    <view class="head flex-shrink">
      <view>
        <image class="bg" src="/pages-user/static/wallet-banner.png"></image>
        <view class="fg pt-48 pl-48 pr-48">
          <view class="flex-align-center">
            <uni-icons
              type="wallet-filled"
              size="24"
              color="#ffffff"
            ></uni-icons>
            <view class="fs-36 color-fff fw-500 ml-16">我的钱包</view>
            <view
              class="btn flex-center fs-28 ml-auto"
              @click="to(`/pages-user/wallet-refund/wallet-refund`)"
              >退款</view
            >
          </view>
          <view class="price mt-50" v-if="user">
            <text class="color-fff fw-600 fs-48" style="vertical-align: top"
              >¥</text
            >
            <text
              class="color-fff fw-600 ml-12"
              style="font-size: 46px; line-height: 46px"
              >{{ user.balance }}</text
            >
          </view>
        </view>
      </view>
    </view>
    <view class="body flex-grow flex-column">
      <view class="tabs flex-shrink flex-align-center">
        <view
          v-for="(item, index) in tabs"
          :key="index"
          class="flex-align-center fs-30 mr-60"
          :style="{
            color:
              tab === item.value ? 'rgba(0, 0, 0, 1);' : 'rgba(0, 0, 0, 0.6);',
          }"
          @click="changeTab(index)"
          >{{ item.label
          }}<view
            :style="{ opacity: tab === item.value ? '1' : '0' }"
            class="active"
          ></view
        ></view>
      </view>
      <view class="list pl-30 pr-30">
        <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">{{
              typeMap[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.transactionTime
            }}</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 style="height: 170rpx"></view>
    </view>
    <style-bottom-view background="#ffffff">
      <view class="pl-40 pr-40 pb-30 pt-30">
        <style-button
          type="primary"
          @click="to(`/pages-user/wallet-recharge/wallet-recharge`)"
          >充值</style-button
        >
      </view>
    </style-bottom-view>
  </view>
</template>

<script setup lang="ts">
import { useInfiniteScroll } from "../../utils/infinite-scroll";
import { onLoad, onReachBottom, onPullDownRefresh } from "@dcloudio/uni-app";
import { fetchWallet } from "../../api/user";
import { to } from "../../utils/navigate";
import { ref } from "vue";
import { rpxToPx } from "@/utils/device";

const user = ref();

const tab = ref(0);
const tabs = ref([
  {
    label: "全部",
    value: 0,
  },
  {
    label: "充值",
    value: 1,
  },
  {
    label: "消费",
    value: 3,
  },
  {
    label: "退款",
    value: 2,
  },
]);

const typeMap = ref(["充值", "提现", "消费"]);
const infiniteScroller = useInfiniteScroll(10, (page) => {
  return fetchWallet(tab.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 scrollViewHeight = ref(0);

onLoad(() => {
  infiniteScroller.refresh();
  if (getApp<any>().globalData.user) {
    user.value = getApp<any>().globalData.user;
  }
});

onReachBottom(() => {
  infiniteScroller.next();
});

onPullDownRefresh(() => {
  infiniteScroller.refresh();
});

const ready = (e: any) => {
  scrollViewHeight.value =
    getApp<any>().globalData.device.windowHeight -
    (e.detail.navigationBarHeight + rpxToPx(380));
};

const changeTab = (index: number) => {
  tab.value = tabs.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].orderNo}`,
    });
  }
};
</script>

<style lang="scss">
.page {
  height: 100vh;
  width: 100vw;
  background: linear-gradient(
    180deg,
    #e0ebff 0%,
    rgba(255, 255, 255, 0) 60.13%
  );
  .head {
    padding: 30rpx 40rpx;
    & > view {
      position: relative;
      height: 320rpx;
      border-radius: 40rpx;
      overflow: hidden;
      .bg {
        height: 100%;
        width: 100%;
      }
      .fg {
        position: absolute;
        left: 0px;
        top: 0px;
        height: 100%;
        width: 100%;
        .btn {
          width: 120rpx;
          height: 64rpx;
          border-radius: 40rpx;
          background: rgba(255, 255, 255, 0.3);
          color: #076370;
        }
      }
    }
  }
  .body {
    .tabs {
      padding: 0 40rpx;
      & > view {
        position: relative;
        height: 72rpx;
        .active {
          position: absolute;
          left: 50%;
          bottom: 0px;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          border-radius: 4rpx;
          background-color: var(--color-primary);
        }
      }
    }
    .list {
      .item {
        height: 170rpx;
        border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}
</style>