VAVABUY/pages/bank/withdraw_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="/users/extract/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.order_no }}</view>
              </view>
              <view class="_list_item">
                <view class="label">
                  <trans _t="取款金额" />
                </view>
                <view class="money"
                  ><text
                    >{{ symbol.symbol }}{{ Moneyhtml(item.money) }}</text
                  ></view
                >
              </view>
              <view class="_list_item" v-if="item.status == '未通过'">
                <view class="label">
                  <trans _t="未通过原因" />
                </view>
                <view class="money">{{ item.reason }}</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 listRef = ref(null);

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

const statusText = (status) => {
  switch (status) {
    case "汇款中":
      return t("汇款中");
      break;
    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;
      border-bottom: var(--bor);
      .size(28rpx);

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

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

        .money {
          .size(24rpx);

          text {
            .size(32rpx);
            margin-left: 8rpx;
          }
        }
      }

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