hbsmUniapp/src/pagesShop/pages/balance/balance.vue

<script setup lang="ts">
import { nextTick, ref } from 'vue'
import { onLoad, onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app'
import useZPaging from '@/uni_modules/z-paging/components/z-paging/js/hooks/useZPaging.js'
import { getBalanceLogApi } from '@/api/member'
import type { balanceLogResultItem } from '@/types/member'
import type { TabItem } from '@/types/global'
import { pageUrl } from '@/utils/constants'

const paging = ref()
useZPaging(paging)

const dataList = ref<balanceLogResultItem[]>([])
const statisticsData = ref({
  balance: '0',
  total_recharge: '0',
  total_expend: '0',
})
const tabList = ref<TabItem[]>([])
const tabIndex = ref(0)
const tabsChange = (index: number) => {
  tabIndex.value = index
  paging.value.refresh()
}
const dataTypes = ref<TabItem[]>()
const queryList = (page: number, page_size: number) => {
  const params = {
    page,
    page_size,
    type: tabList.value[tabIndex.value]?.value ?? 'all',
  }
  getBalanceLogApi(params).then((res) => {
    paging.value.complete(res.result.data)
    tabList.value = res.result.tabs
    statisticsData.value = res.result.statistics
    dataTypes.value = res.result.types
  })
}

const toRecharge = () => {
  uni.navigateTo({
    url: `${pageUrl['balance-recharge']}`,
  })
}

const getTypeDesc = (type: number) => {
  return dataTypes.value!.find((item) => Number(item.value) == type)?.name ?? ''
}

onShow(() => {
  nextTick(() => {
    paging.value.reload()
  })
})
</script>

<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="dataList"
      @query="queryList"
      :safe-area-inset-bottom="true"
      :auto="false"
      :paging-style="{ background: '#fff' }"
    >
      <template #top>
        <view style="margin: 10rpx">
          <view class="card">
            <view class="card-item">
              <view class="top">
                <view class="total">
                  <view class="title">当前余额</view>
                  <text class="money" id="statistics_balance">{{ statisticsData.balance }}元</text>
                </view>
                <view class="button">
                  <button hover-class="button-hover" @tap="toRecharge">充值</button>
                </view>
              </view>
              <view class="cumulative">
                <view>
                  <view class="title">累计充值(不含赠送)</view>
                  <text class="money">{{ statisticsData.total_recharge }}元</text>
                </view>
                <view>
                  <view class="title">累计支出</view>
                  <text class="money">{{ statisticsData.total_expend }}元</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <z-tabs :list="tabList" @change="tabsChange" :current="tabIndex" />
      </template>
      <view class="list">
        <view class="list-item" v-for="(item, index) in dataList" :key="index">
          <view>
            <view class="desc"> {{ getTypeDesc(item.type) }}</view>
            <view class="memo">{{ item.memo }}</view>
            <view class="time">{{ item.create_time }}</view>
          </view>
          <view class="money">
            <view v-if="Number(item.money) >= 0" class="add">+{{ item.money }}</view>
            <view v-else class="sub">{{ item.money }}</view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<style lang="scss">
.container {
  .card {
    width: 100%;
    background-color: #ff5f3c;
    border-radius: 30rpx;
    padding: 5rpx;

    .card-item {
      padding: 30rpx;
      color: #fff;
      font-size: 26rpx;

      text {
        font-size: 40rpx;
      }
      & > view {
        margin-bottom: 30rpx;
      }
    }
  }

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20rpx;

    .money {
      display: flex;
      flex-direction: column;
    }

    button {
      font-size: 26rpx;
      border-radius: 24rpx;
      line-height: 60rpx;
    }
  }

  .cumulative {
    display: flex;
    justify-content: space-between;
  }

  .title {
    padding-bottom: 10rpx;
  }

  .list {
    font-size: 30rpx;

    &-item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #eee;
      padding: 35rpx;

      .desc {
        padding-bottom: 15rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 500rpx;
      }

      .memo {
        font-size: 26rpx;
        padding-bottom: 15rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 500rpx;
        color: #666;
      }

      .time {
        color: #999;
        font-size: 24rpx;
      }

      .money {
        .add {
          color: red;
        }

        .sub {
          color: green;
        }
      }
    }
  }
}
</style>