menduner-uniapp/pagesA/balance/index.vue

<template>
  <layout-page>
    <view class="box defaultBgc">
      <scroll-view class="scrollBox" scroll-y="true" @scrolltolower="loadingMore">
        <view>
          <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, index) in items"
                :key="index"
                :title="item.title"
                :note="item.price"
                :rightText="item.createTime"
              />
            </uni-list>
            <uni-load-more :status="more" />
          </view>
        </view>
      </scroll-view>
    </view>
  </layout-page>
</template>
<!-- balance 余额 -->
<script setup>
import { ref } from 'vue'
import {
  getAccountBalance,
  getUserWalletTransactionPage
} 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 getUserWalletTransactionPage(pageInfo.value)
    if (!data || !data.list || !data.list.length) {
      if (pageInfo.value.pageNo === 1) {
        return
      }
      pageInfo.value.pageNo--
      more.value = 'more'
      return
    }
    const _data = data.list.map(e => {
      return {
        // ...e,
        // _payPrice: (e.payPrice / 100.0).toFixed(2),
        // _payTime: timesTampChange(e.payTime)
        // ...e,
        title: e.title,
        createTime: timesTampChange(e.createTime),
        price: (e.price / 100.0).toFixed(2)
      }
    })
    items.value.push(..._data)
    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>
.box {
  height: 100vh;
}
.scrollBox {
  width: 100vw;
  // padding: 20rpx;
  box-sizing: border-box;
  .panel {
    position: sticky;
    z-index: 2;
    top: 0;
    width: 100%;
    padding: 20rpx;
    margin-bottom: 20rpx;
    box-sizing: border-box;
    background: #FFF;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    box-shadow: 0px 0px 10px 0px rgb(0, 0, 0, 0.25);
    .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>