VAVABUY/pages/bank/account.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="账单" border fixed />
      <view class="content">
        <List url="/users/account/lists" ref="listRef">
          <template #item="{ item }">
            <view class="list">
              <view class="list_top">
                <view class="title">{{ item.title }}</view>
                <view class="money"
                  >{{ symbol.symbol }}&nbsp;{{ Moneyhtml(item.setup) }}</view
                >
              </view>
              <view class="date">{{ useGlobal().$format(item.indate) }}</view>
            </view>
          </template>
        </List>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import List from "@/components/list";
import { ref, computed, onMounted, nextTick } from "vue";
import { useGlobal, Moneyhtml } from "@/utils";
import { onReachBottom } from "@dcloudio/uni-app";
import { useSystemStore } from "@/store";

const useSystem = useSystemStore();
const listRef = ref(null);
const symbol = computed(() => useSystem.getSymbol);

onMounted(() => {
  nextTick(() => {
    listRef.value && listRef.value.getData();
  });
});
onReachBottom(() => {
  nextTick(() => {
    listRef.value && listRef.value.scrolltolower();
  });
});
</script>
<style lang="less" scoped>
@import url("@/style.less");

.wrap {
  min-height: 100vh;
  background-color: var(--bg);

  .content {
    padding: 0 24rpx;

    .list {
      padding: 24rpx;
      background-color: var(--light);
      margin-top: 24rpx;
      border-radius: 12rpx;
      border-bottom: var(--bor);
      &_top {
        .flex_position(space-between);
        .size(28rpx);

        .title {
          color: var(--text);
        }

        .money {
          font-weight: 700;
          color: var(--danger);
        }
      }

      .date {
        color: var(--text-02);
        .size(24rpx);
        text-align: right;
        margin-top: 8rpx;
      }
    }
  }
}
</style>