VAVABUY/pages/bank/recharge_list.vue

<template>
  <Theme>
    <view class="wrap">
      <Navbar title="充值记录" fixed border>
        <template #right>
          <navMenu :options="{ icon: 'icon-home', text: '主页' }" />
        </template>
      </Navbar>
      <view class="content">
        <List url="/pay/record" ref="listRef">
          <template #item="{ item }">
            <view class="_list">
              <view class="status">{{ statusText(item.status) }}</view>
              <view class="_list_item">
                <view class="label">
                  <trans _t="订单号" />
                </view>
                <view class="value">{{ item.payid }}</view>
              </view>
              <view class="_list_item">
                <view class="label">
                  <trans _t="充值金额" />
                </view>
                <view class="money">{{ symbol.symbol }}<text>{{ Moneyhtml(item.money) }}</text></view>
              </view>
              <view class="indate">{{ useGlobal().$format(item.indate) }}</view>
            </view>
          </template>
        </List>
      </view>
    </view>
  </Theme>
</template>
<script setup>
import Navbar from "@/components/navbar";
import navMenu from "@/components/nav_menu";
import List from "@/components/list";
import { onMounted, ref, nextTick, computed } from "vue";
import { useSystemStore } from "@/store";
import { onReachBottom } from "@dcloudio/uni-app";
import { t } from "@/locale"
import { useGlobal, Moneyhtml } from "@/utils"


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

const currency = computed(() => useSystem.getCurrency);

const statusText = (status) => {
  switch (status) {
    case '待审核':
      return t('待审核')
      break;
    case '已完成':
      return t('已完成')
      break;
    default:
      return status
      break;
  }
}

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 {
      margin-top: 16rpx;
      border-radius: 16rpx;
      background-color: var(--light);
      padding: 16rpx;
      .size(28rpx);

      .status {
        .flex_position(flex-end);
        line-height: 50rpx;
      }

      &_item {
        .flex_position(space-between);
        line-height: 50rpx;

        .money {
          .size(32rpx);

          text {

            margin-left: 8rpx;
          }
        }
      }

      .indate {
        .flex_position(flex-end);
        color: var(--text-01);
        .size(24rpx);
      }
    }
  }
}
</style>