ucard-person-app-front/pages/apply-record/list.vue

<template>
  <cwg-page-wrapper>
    <view class="page page-shadow">
      <view class="apply-card-footer">
        <view v-if="cardList.length > 0">
          <view class="kyc-list">
            <view v-for="item in cardList" :key="item.id" class="kyc-item">
              <view class="g">
                <view class="g-l">
                  <view class="g-item">
                    <view class="label a1 ellipsis">{{ item.cardName }}</view>
                    <view class="status" :class="statusClass1(item.status)">{{
                      status[item.status]
                      }}</view>
                  </view>
                  <view class="g-item">
                    <view class="label a2">{{
                      item?.cardNumber?.replace(
                        /(\d{4})\d+(\d{4})/,
                        "$1 **** **** $2"
                      )
                    }}</view>
                  </view>
                </view>
              </view>
              <view class="g">
                <view class="g-l g-l1">
                  <view class="g-item">
                    <view class="label a3">{{ t("cards.p12") }}</view>
                    <view class="status-views" @click="handleApply(item)">{{
                      t("cards.p11")
                      }}</view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        <cwg-empty-state v-if="cardList.length === 0" :title="t('empty-state.t3')" :text="t('empty-state.c3')" />
      </view>
    </view>
  </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed } from "vue";
import type { CardInfo } from "@/api/ucard";
import { useI18n } from "vue-i18n";
import useRouter from "@/hooks/useRouter";
import { ucardApi } from "@/api/ucard";
import useCardStore from "@/stores/use-card-store";
const cardStore = useCardStore();
const router = useRouter();
const { t } = useI18n();
const status: Record<string, string> = {
  success: t("card.Status.t6"),
  fail: t("card.Status.t7"),
  processing: t("card.Status.t3"),
  wait_process: t("card.Status.t3"),
  cancel: t("card.New2.p3"),
  null: t("card.Status.t3"),
};
function statusClass1(status: string) {
  switch (status) {
    case "success":
      return "status-default status-success";
    case "fail":
      return "status-default status-error";
    case "cancel":
      return "status-default status-error";
    default:
      return "status-default";
  }
}

const cardList = ref<CardInfo[]>([]);
const search = ref({});
async function getCardList() {
  try {
    const res = await ucardApi.applyList({
      ...search.value,
      page: { current: 1, row: 10 },
    });
    if (res.code == 200) {
      const a = res.data.map((i) => {
        if (i.cardNumber) {
          i.isOk = true;
        } else {
          i.isOk = false;
          i.cardNumber = "**** **** **** ****";
        }
        return i;
      });
      cardList.value = a;
    } else {
      cardList.value = [];
    }
    cardStore.saveApplyCard(cardList.value);
  } catch (error) {
    cardList.value = [];
  }
}
function handleApply(item: any) {
  router.push({
    path: "/pages/apply-record/detail",
    query: {
      id: item.id,
    },
  });
}

onMounted(async () => {
  getCardList();
});
</script>

<style scoped lang="scss">
@import "@/uni.scss";

.apply-card-footer {
  width: 100%;
}

.kyc-item {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: px2rpx(12);
  border-bottom: 1px solid var(--border, #333);
  font-size: px2rpx(16);
  background: var(--action-bg);
  border-radius: px2rpx(16);
  margin-bottom: px2rpx(16);
  border: 1px solid rgba(214, 255, 0, 0.2);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  gap: px2rpx(16);
}

.kyc-item:last-child {
  border-bottom: none;
}

.g {
  width: 100%;

  img {
    width: px2rpx(56);
    height: px2rpx(35);
  }

  .g-l {
    margin-left: 0;

    .g-item {
      margin-bottom: 0;
    }

    .label {
      font-family: 'Roboto';
      font-style: normal;
      font-weight: 600;
      font-size: px2rpx(14);
      line-height: px2rpx(16);
      text-align: left;
      color: #1a1a1a;
      width: px2rpx(180);
    }

    .a2 {
      color: #6b7280;
      font-size: px2rpx(12);
      line-height: px2rpx(16);
    }

    .a1 {
      line-height: px2rpx(16);
    }

    .a3 {
      color: #8e8a8a;
      font-family: Roboto;
      font-size: px2rpx(14);
      font-style: normal;
      font-weight: 400;
      line-height: px2rpx(16);
      letter-spacing: px2rpx(0.07);
    }
  }

  .g-l1 {
    margin-left: 0;
  }
}
</style>

//
<style scoped lang="scss">
@import "@/uni.scss";

// .apply-card-footer {
//   width: 100%;
// }

// .kyc-item {
//   display: flex;
//   align-items: center;
//   flex-direction: column;
//   padding: px2rpx(12);
//   border-bottom: 1px solid var(--border, #333);
//   font-size: px2rpx(31);
//   background: var(--action-bg);
//   border-radius: px2rpx(31);
//   margin-bottom: px2rpx(31);
//   border: 1px solid rgba(214, 255, 0, 0.2);
//   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
//   gap: px2rpx(31);
// }

// .kyc-item:last-child {
//   border-bottom: none;
// }

// .g {
//   width: 100%;

//   img {
//     width: px2rpx(111);
//     height: px2rpx(35);
//   }

//   .g-l {
//     margin-left: 0;

//     .g-item {
//       margin-bottom: 0;
//     }

//     .label {
//       font-family: "Roboto";
//       font-style: normal;
//       font-weight: 600;
//       font-size: px2rpx(14);
//       line-height: px2rpx(31);
//       text-align: left;
//       color: #1a1a1a;
//       width: px2rpx(330);
//     }

//     .a2 {
//       color: #6b7280;
//       font-size: px2rpx(12);
//       line-height: px2rpx(31);
//     }

//     .a1 {
//       line-height: px2rpx(31);
//     }

//     .a3 {
//       color: #8e8a8a;
//       font-family: Roboto;
//       font-size: px2rpx(14);
//       font-style: normal;
//       font-weight: 400;
//       line-height: px2rpx(31);
//       letter-spacing: px2rpx(0.07);
//     }
//   }

//   .g-l1 {
//     margin-left: 0;
//   }
// }
// </style>