menduner-uniapp/pagesA/balance/index.vue

<template>
  <layout-page>
    <scroll-view class="scrollBox defaultBgc" scroll-y="true" @scrolltolower="loadingMore">
      <view class="panel">
        <view>
          <uni-icons color="#f30" type="icon-renminbi1688" size="16" custom-prefix="iconfont"></uni-icons>
          <text class="text">{{ balance.balance > 0 ? (balance?.balance / 100.0).toFixed(2) : 0 }}</text>
        </view>
        <view>
          <button class="btn">充值</button>
        </view>
      </view>
      <view class="list">
        <uni-list border-full>
          <uni-list-item
            v-for="item in items"
            :key="item.id"
            :title="item._payPrice"
            :note="item._payTime"
            :rightText="item.payChannelName"
          />
        </uni-list>
      </view>
    </scroll-view>
  </layout-page>
</template>
<!-- balance 余额 -->
<script setup>
import { ref } from 'vue'
import {
  getAccountBalance,
  getUserWalletRechargePage
} from '@/api/sign'
import { timesTampChange } from '@/utils/date'

const balance = ref({})

const items = ref([])
const pageInfo = ref({
  pageNo: 1,
  pageSize: 20
})
const total = ref(0)
const more = ref('more')

getBalance()
getList()
// 获取积分余额
async function getBalance() {
  const { data } = await getAccountBalance()
  if (!data) {
    return
  }
  balance.value = data
}

async function getList () {
  try {
    const { data } = await getUserWalletRechargePage(pageInfo.value)
    if (!data || !data.list || !data.list.length) {
      if (pageInfo.value.pageNo === 1) {
        return
      }
      pageInfo.value.pageNo--
      more.value = 'more'
      return
    }
    items.value.push(...data.list.map(e => {
      return {
        ...e,
        _payPrice: (e.payPrice / 100.0).toFixed(2),
        _payTime: timesTampChange(e.payTime)
      }
    }))
    total.value = +data.total
    more.value = total.value === items.value.length ? 'noMore' : 'more'
  } catch (error) {
    if (pageInfo.value.pageNo === 1) {
      return
    }
    pageInfo.value.pageNo--
    more.value = 'more'
  }
}
function loadingMore () {
  if (more.value === 'noMore') {
    return
  }
  more.value = 'loading'
  pageInfo.value.pageNo++
  getList()
}
</script>

<style lang="scss" scoped>
.scrollBox {
  width: 100vw;
  padding: 20rpx;
  box-sizing: border-box;
  .panel {
    width: 100%;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    .text {
      color: #F30;
      font-size: 54rpx;

    }
    .btn {
      width: 180rpx;
      height: 60rpx;
      line-height: 60rpx;
      font-size: 28rpx;
      text-align: center;
      background: #00897B;
      color: #FFF;
      border-radius: 30rpx;
    }
  }
  .list {
    padding: 20rpx;
  }
}
</style>