ucard-person-app-front/pages/card/components/VirtualCard.vue

<template>
  <view v-if="cardList.length" class="page">
    <view class="card-swiper">
      <swiper class="swiper-container" :current="currentIndex" @change="handleSwiperChange">
        <swiper-item v-for="(card, index) in cardList" :key="card.id">
          <view class="card-wrapper">
            <view class="card-info" :class="{ flipping: isFlipping[card.id] }"
              @click.stop="(e: MouseEvent) => toggleCardNo(card, e)">
              <view v-if="card.type == 'Virtual'" class="card-name">
                {{ card.type || "Virtual" }}
              </view>
              <view v-if="card.type == 'Physical'" class="card-name">
                {{ card.type || "Physical" }}
              </view>
              <image class="card-type" src="/static/images/c-type.png" alt="" srcset="" />
              <image class="logo" src="/static/images/logo1.png" alt="" srcset="" />
              <template v-if="showCardNo[card.id]">
                <view class="number">
                  {{ card?.cardNumber }}
                  <view class="copy" @click.stop="cardCopy(card.cardNumber, 'cardNumber')"><cwg-icon name="copy"
                      :size="13" color="" /></view>
                </view>
                <view class="card-b">
                  <view class="valid">
                    <view class="lable">{{ t("cards.p13") }}</view>
                    <view>{{ card.firstName }} {{ card.lastName }}</view>
                  </view>
                  <view class="valid">
                    <view class="lable">{{ t("cards.p14") }}</view>
                    <view>{{ card.expireDate || "--" }}</view>
                  </view>
                  <view class="valid" @click.stop="setCvv">
                    <view class="lable" v-if="!card.expireDate">CVV</view>
                    <view v-if="!card.expireDate" class="cvv">
                      ***
                      <view class="copy"><cwg-icon name="icon_visiable" :size="13" color="" /></view>
                    </view>
                  </view>
                </view>
              </template>
              <template v-else>
                <view v-if="currentCard.status == 'success' && currentCard?.activateStatus" class="zw">{{
                  card.cardNumber }}</view>
                <view v-else class="zw">{{ "**** **** **** ****" }}</view>
              </template>
            </view>
          </view>
        </swiper-item>
      </swiper>
      <view v-if="cardList.length > 1" class="swiper-indicators">
        <view v-for="(card, index) in cardList" :key="card.id" class="indicator-dot"
          :class="{ active: index === currentIndex }" @click="currentIndex = index"></view>
      </view>
    </view>
    <template v-if="currentCard.status == 'success' && currentCard?.activateStatus">
      <view class="actions">
        <template v-if="
          currentCard.freezeType == 1 && currentCard.freezeStatus == 'success'
        ">
          <view class="action-btn" @click="ucardOperation(currentCard, 2)">
            <cwg-icon name="icon_recharge" :size="28" color="#EA002A" />
            <view>{{ t("card.Btn.b3") }}</view>
          </view>
          <view class="action-btn" @click="ucardOperation(currentCard, 3)">
            <cwg-icon name="icon_card password reset" :size="28" color="#EA002A" />
            <view>{{ t("card.Btn.b4") }}</view>
          </view>
        </template>
        <template v-else>
          <view class="action-btn action-btn1">
            <cwg-icon name="icon_recharge" :size="28" color="#999" />
            <view>{{ t("card.Btn.b3") }}</view>
          </view>
          <view class="action-btn action-btn1">
            <cwg-icon name="icon_card password reset" :size="28" color="#999" />
            <view>{{ t("card.Btn.b4") }}</view>
          </view>
        </template>
        <view v-if="currentCard.freezeType == '1'" class="action-btn" @click="ucardOperation(currentCard, 4)">
          <cwg-icon name="icon_unfreeze" :size="28" color="#EA002A" />
          <view v-if="currentCard.freezeStatus == 'success'">{{
            t("card.Btn.b5")
            }}</view>
          <view v-else>{{ t("card.Btn.b14") }}</view>
        </view>
        <view v-if="currentCard.freezeType == '2'" class="action-btn" @click="ucardOperation(currentCard, 5)">
          <cwg-icon name="icon_freeze" :size="28" color="#EA002A" />
          <view v-if="currentCard.freezeStatus == 'success'">{{
            t("card.Btn.b6")
            }}</view>
          <view v-else>{{ t("card.Btn.b15") }}</view>
        </view>
      </view>
      <view class="balance-wrap">
        <!-- <view class="balance-content">{{ t('cards.currency') }}</view> -->
        <view class="balance-content">{{ t("card.Btn.b10") }}</view>
      </view>
      <view class="balance-wrap balance-wrap1">
        <view class="global-con-l">
          <!-- <view class="global-con-l" @click="setModelValue"> -->
          <image class="l-img" :src="imageSrc(currency)" alt="" srcset="" />
          <view class="r">
            <view>{{ currency }}</view>
          </view>
          <!-- <cwg-icon name="icon_dropdown" :size="24" /> -->
        </view>
        <view class="balance">
          <view class="balance-amount">{{
            isOpen ? amount + " " + "USD" : "*****"
            }}</view>
          <cwg-icon :name="isOpen ? 'icon_visiable' : 'icon_unvisiable'" :size="24" @click.stop="debouncedGetBalance" />
        </view>
      </view>
      <view class="trans-header">
        <view class="trans-title">{{ t("cards.transactions") }}</view>
        <view class="all" @click="goRechargeRecord">{{
          t("card.Status.t22")
          }}</view>
        <!-- <i class="i-mdi-calendar-month-outline" @click="showDatePicker = true" /> -->
      </view>
      <cwg-tabs :list="tabList" @click="handleTabClick" />
      <view class="transaction-list">
        <!-- Recharge Records -->
        <view v-if="jiluIndex === 0" :a="currentCard.cardNumber">
          <RechargeList :pageSize="4" ref="rechargeListRef" :cardNumber="currentCard.cardNumber" />
        </view>
        <!-- Transfer Records -->
        <view v-if="jiluIndex === 1" :a="currentCard.cardNumber">
          <TransactionList :pageSize="4" ref="rechargeListRef" :cardNumber="currentCard.cardNumber" />
        </view>
      </view>
    </template>
    <template v-else>
      <view class="actions1">
        <view class="card-btn">
          <view class="yue st">
            <view class="a">{{ t("card.Info.t15") }}</view>
            <view v-if="
              !currentCard.activateStatus &&
              (currentCard.applyStatus == null ||
                currentCard.applyStatus == 'wait_process' ||
                currentCard.applyStatus == 'processing')
            " v-t="'card.Info.t16'" class="v"></view>
            <view v-if="currentCard.applyStatus == 'fail'" v-t="'card.Info.t17'" class="v"></view>
            <view v-if="currentCard.activateStatus == 'unactivate'" v-t="'card.Info.t18'" class="v"></view>
            <view v-if="
              currentCard.activateStatus &&
              (currentCard.status == 'processing' ||
                currentCard.status == 'wait_process')
            " v-t="'card.Info.t19'" class="v"></view>
            <view v-if="currentCard.activateStatus == 'fail'" v-t="'card.Info.t20'" class="v"></view>
          </view>
          <!-- 查询进度 -->
          <view v-if="!currentCard.activateStatus" class="btn1 btn2" @click="viewApply(currentCard)">
            <view v-t="'card.Btn.b11'"></view>
          </view>
          <!-- 激活 -->
          <view v-if="currentCard.activateStatus" class="btn1 btn2" :class="currentCard.activateStatus == 'unactivate' ||
            currentCard.activateStatus == 'fail'
            ? ''
            : 'btn3'
            " @click="ucardOperation(currentCard, 1)">
            <view v-t="'card.Btn.b1'"></view>
          </view>
          <!-- 重新开卡 -->
          <view v-if="
            (currentCard.tradeStatus == '3' ||
              (currentCard.tradeStatus == '2' &&
                currentCard.tradeType == '2')) &&
            currentCard.applyStatus == 'fail'
          " class="btn1 btn2" @click="updateCardTypes(card, 1)">
            <view v-t="'card.Btn.b12'"></view>
          </view>
        </view>
      </view>
    </template>
    <CardHandle v-if="dialogInfoTradingAdd" :dialog-info-trading-add="dialogInfoTradingAdd" :form-list="formList"
      @close-add="dialogInfoTradingAdd = false" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, computed, onUnmounted } from "vue";
import type { CardInfo } from "@/api/ucard";
import { showToast } from "@/utils/toast";
import { useI18n } from "vue-i18n";
import useRouter from "@/hooks/useRouter";
import { ucardApi } from "@/api/ucard";
import _ from 'lodash';
import useCardStore from "@/stores/use-card-store";
import CardHandle from "./CardHandle.vue";
import RechargeList from "@/pages/recharge-record/components/RechargeList.vue";
import TransactionList from "@/pages/recharge-record/components/TransactionList.vue";
const debouncedGetBalance = _.debounce(getBalance, 300, { leading: true, trailing: false });
const router = useRouter();
const cardStore = useCardStore();
const cardList = computed(() => {
  return cardStore.userCard;
});
const { t } = useI18n();
const currentCard = computed<CardInfo | null>(() => {
  if (!cardList.value.length) return null;
  return cardList.value[currentIndex.value] || null;
});
const formList = ref({});
const balance = ref<{ amount: number; currency: string; value: string }[]>([
  {
    amount: 0,
    currency: "USD",
    value: "USD",
  },
]);
const showCardNo = ref<{ [key: string]: boolean }>({});
const isFlipping = ref<{ [key: string]: boolean }>({});
const isOpen = ref(false);
const currentIndex = ref(0);
const dialogInfoTradingAdd = ref(false);
const images = import.meta.glob("/static/images/currency/*.png", {
  eager: true,
});
const tabList = ref([
  { name: t("cards.rechargeB1") },
  { name: t("Shop.Index.Transaction") }
]);

const handleTabClick = (item, index) => {
  jiluIndex.value = index;
};

function imageSrc(currency: string) {
  return images[`/static/images/currency/${currency}.png`]?.default;
}
function setCvv() {
  dialogInfoTradingAdd.value = true;
  formList.value = currentCard.value;
}
const jiluIndex = ref(0);
function cardCopy(data) {
  let title = t("common.copy1");
  console.log(title);
  uni.setClipboardData({
    data,
    success: () => {
      uni.showToast({ title });
    },
  });
}
const currency = ref("USD");
const amount = ref(0);
const dateRange = ref<[string, string] | undefined>(undefined);
dateRange.value = ["", ""];

function goRechargeRecord() {
  router.push(`/pages/recharge-record/list?cardNumber=${currentCard.value?.cardNumber}`);
}


async function getBalance() {
  if (isOpen.value) {
    isOpen.value = false;
    return;
  }
  try {
    balance.value = [
      {
        amount: 0,
        currency: "USD",
        value: "USD",
      },
    ];
    if (!currentCard.value?.cardNo) return;
    const res = await ucardApi.ucardBalance({
      cardNo: currentCard.value?.cardNo,
      uniqueId: currentCard.value?.uniqueId,
    });

    if (res.code == 200) {
      currency.value = "USD";
      amount.value = res.data.amount;
      isOpen.value = true;
    } else {
      balance.value = [
        {
          amount: 0,
          currency: "USD",
          value: "USD",
        },
      ];
      currency.value = "USD";
      amount.value = 0;
      isOpen.value = false;
    }
  } catch (error: any) {
    showToast(error?.message || String(error));
    balance.value = [
      {
        amount: 0,
        currency: "USD",
        value: "USD",
      },
    ];
    isOpen.value = false;
  }
}


function toggleCardNo(card: any, event: MouseEvent) {
  if (!card.id) return;
  if (!(card.status == "success" && card?.activateStatus)) return;
  event.stopPropagation();
  isFlipping.value[card.id] = !isFlipping.value[card.id];
  showCardNo.value[card.id] = !showCardNo.value[card.id];
}

function handleSwiperChange(e: any) {
  const newIndex = e?.detail?.current ?? 0;
  currentIndex.value = newIndex;
  // 切换卡片时重置卡号显示状态
  cardList.value.forEach((card) => {
    if (!card.id) return;
    showCardNo.value[card.id] = false;
    isFlipping.value[card.id] = false;
  });
}

async function ucardOperation(card, type) {
  if (card.freezeType == "2" && type != "5") {
    showToast(t("card.Msg.m10"));
    return;
  }
  if (card.blocked) {
    showToast(t("card.New2.p6"));
    return;
  }
  if (card.freezeStatus != "success") {
    if (card.freezeType == "1") {
      showToast(t("card.Btn.b14"));
    } else {
      showToast(t("card.Btn.b15"));
    }
    return;
  }
  router.push({
    path: "/pages/card/operations",
    query: { id: card.id, type },
  });
}
function viewApply(item: any) {
  router.push({
    path: "/pages/apply-record/detail",
    query: {
      id: item.id,
      type: "card",
    },
  });
}

watch(
  currentIndex,
  (newIndex) => {
    if (cardList.value[newIndex]) {
      if (
        cardList.value[newIndex].cardNo &&
        cardList.value[newIndex].activateStatus == "success"
      ) {
        isOpen.value = false;
      }
    }
  },
  { immediate: true }
);

onMounted(async () => {
  cardList.value.forEach((card) => {
    showCardNo.value[card.id] = false;
    isFlipping.value[card.id] = false;
  });
});
onUnmounted(() => {
  debouncedGetBalance.cancel();
});
</script>
<style scoped lang="scss">
@import "@/uni.scss";

.page {
  padding: 0 px2rpx(24) px2rpx(130) px2rpx(24);
}

.card-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.card-info {
  background: url(/static/images/card/physical.png) no-repeat center center;
  background-size: cover;
  border-radius: px2rpx(16);
  padding: px2rpx(16);
  color: var(--main-yellow);
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: baseline;
  flex-wrap: wrap;
  /* transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); */
  /* flex-direction: column; */

  .logo {
    width: px2rpx(120);
    height: auto;
    margin-bottom: px2rpx(16);
  }

  .card-type {
    width: px2rpx(74);
    height: px2rpx(39);
    position: absolute;
    bottom: px2rpx(16);
    right: px2rpx(16);
    z-index: 1;
  }

  .card-name {
    position: absolute;
    top: px2rpx(16);
    right: px2rpx(16);
    font-size: var(--font-size-14);
    font-weight: 500;
    color: #fff;
    font-family: Rubik;
  }

  &.flipping {
    transform: rotateX(360deg);
  }

  .zw {
    position: absolute;
    left: px2rpx(16);
    bottom: px2rpx(16);
    color: #fff;
    font-family: Rubik;
    font-size: px2rpx(12);
    font-style: normal;
    font-weight: 700;
    display: flex;
    align-items: center;
  }

  .card-b {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: px2rpx(16);

    span {
      display: block;
    }

    .valid {
      font-size: var(--font-size-14);
      font-weight: 500;
      color: var(--black);
      gap: px2rpx(8);
      line-height: px2rpx(20);
    }

    .lable {
      font-size: var(--font-size-10);
      font-weight: 400;
    }

    .cvv {
      display: flex;
      align-items: center;
      gap: px2rpx(8);
      font-size: var(--font-size-14);
      font-weight: 500;
      color: var(--black);

      .copy,
      .icon {
        display: flex;
      }
    }
  }

  .copy {
    width: px2rpx(18);
    height: px2rpx(18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
  }
}

.card-front,
.card-back {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: px2rpx(24) px2rpx(20) px2rpx(16) px2rpx(20);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.card-back {
  transform: rotateY(180deg);
}

.owner {
  font-size: var(--font-size-14);
  line-height: 2;
  margin-bottom: px2rpx(8);
  display: flex;
  align-items: center;
  gap: px2rpx(8);

  i {
    font-size: var(--font-size-18);
    color: var(--main-yellow);
  }
}

.number {
  color: var(--black);
  font-size: var(--font-size-18);
  font-weight: 500;
  line-height: 3;
  margin: px2rpx(20) 0;
  display: flex;
  align-items: center;
  gap: px2rpx(8);
}

.actions {
  display: flex;
  justify-content: space-between;
  margin: px2rpx(20) 0 px2rpx(16) 0;
  gap: px2rpx(8);
  background-color: #fff;
  width: 100%;
}

.action-btn {
  color: var(--white);
  border: none;
  border-radius: px2rpx(12);
  padding: 0 px2rpx(12);
  font-size: var(--font-size-14);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: px2rpx(8);
  transition: all 0.3s ease;
  text-align: center;
  color: #1a1a1a;
  flex: 1;
  height: px2rpx(100);
  flex-shrink: 0;
  border-radius: px2rpx(15);
  box-shadow: 0px 5px 30px 0px rgba(5, 0, 1, 0.05);

  .icon {
    margin: px2rpx(16) 0 px2rpx(4) 0;
  }

  span {
    line-height: px2rpx(20);
  }
}

.action-btn1 {
  background: rgba(153, 153, 153, 0.03) !important;
  color: #999 !important;
  pointer-events: none !important;
}

.balance-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: px2rpx(24) 0;
  font-size: var(--font-size-14);
}

.balance-wrap1 {
  background-color: #f9fafb;
  border-radius: px2rpx(12);
  padding: px2rpx(16) px2rpx(12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: px2rpx(12);

  .global-con-l {
    display: flex;
    width: px2rpx(164);
    align-items: center;
    gap: px2rpx(12);
    border-radius: px2rpx(12);
    // box-shadow: 0px 5px 30px 0px rgba(5, 0, 1, 0.05);
    color: var(--white);

    p {
      color: #000;
      font-family: Roboto;
      font-size: px2rpx(16);
      font-style: normal;
      font-weight: 600;
      line-height: px2rpx(24);
    }

    .l-img {
      width: px2rpx(36);
      height: px2rpx(36);
      border: 1px solid #f4f4f4;
      border-radius: 50%;
    }
  }
}

.balance-content {
  font-size: var(--font-size-20);
  color: var(--white);
  font-weight: bold;
}

.balance-title {
  font-size: var(--font-size-12);
  color: var(--white);
}

.currency {
  display: flex;
  align-items: center;
  font-size: var(--font-size-14);
  margin-right: px2rpx(12);
  color: var(--white);
}

.flag {
  width: px2rpx(24);
  height: px2rpx(24);
  border-radius: 50%;
  margin-right: px2rpx(6);
}

.balance {
  display: flex;
  align-items: center;
  font-size: var(--font-size-14);
  font-weight: bold;
  color: var(--white);

  .balance-amount {
    display: inline-flex;
    padding-right: px2rpx(8);
  }
}

.transactions {
  border-radius: px2rpx(16);
  margin-bottom: px2rpx(16);
  padding-bottom: px2rpx(16);
}

.trans-icon {
  width: px2rpx(48);
  height: px2rpx(48);
  display: flex;
  background: var(--main-bg);
  box-shadow: 0 4px 12px rgba(214, 255, 0, 0.1);
  border-radius: px2rpx(8);
  margin-right: px2rpx(12);
  align-items: center;
  justify-content: center;

  .trans-icon-inner {
    width: px2rpx(48);
    height: px2rpx(48);
    background: rgba(212, 206, 206, 0.24);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  i {
    color: #000;
    width: px2rpx(24);
    height: px2rpx(24);
    border-radius: 50%;
  }
}

.trans-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: px2rpx(32) 0;
  color: var(--white);

  i {
    font-size: var(--font-size-20);
    cursor: pointer;
  }
}

::v-deep .van-calendar {
  background: var(--action-bg);
}

::v-deep .van-calendar__month-mark {
  display: none;
}

::v-deep .van-calendar__header-subtitle {
  color: var(--white);
}

::v-deep .van-calendar__header-title {
  color: var(--white);
}

::v-deep .van-calendar__month-title {
  color: var(--main-yellow);
}

.trans-title {
  font-size: var(--font-size-20);
  color: var(--white);
  font-weight: bold;
}

.date-field {
  width: px2rpx(200);

  :deep(.van-field__control) {
    color: var(--white);
  }

  :deep(.van-field__placeholder) {
    color: var(--gray);
  }
}

:deep(.van-popup) {
  background: var(--action-bg);
}

:deep(.van-picker__toolbar) {
  background: var(--action-bg);
  border-bottom: 1px solid var(--border);
}

:deep(.van-picker__title) {
  color: var(--white);
}

:deep(.van-picker__confirm) {
  color: var(--main-yellow);
}

:deep(.van-picker__cancel) {
  color: var(--gray);
}

:deep(.van-picker-column) {
  color: var(--white);
}

:deep(.van-picker-column__item) {
  color: var(--white);
}

:deep(.van-picker-column__item--selected) {
  color: var(--main-yellow);
}

.transaction {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: px2rpx(10) 0;
  /* border-bottom: 1px solid var(--border); */
  font-size: var(--font-size-16);
}

.transaction:last-child {
  border-bottom: none;
}

.trans-left {
  width: px2rpx(200);
}

.trans-right {
  width: px2rpx(100);

  div {
    text-align: right;
  }
}

.trans-type {
  color: var(--white);
  font-size: var(--font-size-16);
  font-weight: 600;
  line-height: 2;
}

.trans-desc {
  font-size: var(--font-size-12);
  color: var(--gray);
}

.trans-amount {
  font-size: var(--font-size-16);
  font-weight: 600;
  color: var(--white);
  line-height: 2;
}

.trans-date {
  color: var(--gray);
  font-size: var(--font-size-12);
}

.card-swiper {
  width: 100%;
  margin: px2rpx(20) 0 0 0;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-bottom: px2rpx(5);
}

.swiper-container {
  position: relative;
  width: 100%;
  height: px2rpx(219);
  touch-action: pan-y pinch-zoom;
  user-select: none;
}

.card-info {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: transform 0.3s ease;
  will-change: transform;
  box-sizing: border-box;
}

.swiper-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: px2rpx(12);
  gap: px2rpx(16);
}

.swiper-btn {
  background: var(--action-bg);
  border: none;
  border-radius: 50%;
  width: px2rpx(32);
  height: px2rpx(32);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--main-yellow);

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  i {
    font-size: var(--font-size-20);
  }
}

.swiper-dots {
  display: flex;
  gap: px2rpx(8);
}

.dot {
  width: px2rpx(8);
  height: px2rpx(8);
  border-radius: 50%;
  background: var(--action-bg);
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    background: var(--main-yellow);
    transform: scale(1.2);
  }
}

.swiper-indicators {
  display: flex;
  justify-content: center;
  margin-top: px2rpx(16);
  gap: px2rpx(8);
}

.indicator-dot {
  width: px2rpx(8);
  height: px2rpx(8);
  border-radius: 50%;
  background: var(--gray);
  cursor: pointer;
  transition: all 0.3s ease;

  &.active {
    background: var(--main-yellow);
    transform: scale(1.2);
  }
}

.flags {
  width: px2rpx(20);
  height: px2rpx(20);
  cursor: pointer;
  position: absolute;
  top: px2rpx(10);
  right: px2rpx(10);
}

.balance-content1 {
  margin-bottom: px2rpx(20);
  font-size: var(--font-size-20);
  color: var(--white);
  font-weight: bold;
}

.cwg-btn {
  margin-top: px2rpx(36);
}



.custom-toast {
  background: rgba(0, 0, 0, 0) !important;
  color: #fff;
  font-size: px2rpx(14);
  padding: px2rpx(10);
  border-radius: px2rpx(8);
  display: flex;
  align-items: center;
  gap: px2rpx(8);

  .van-icon {
    width: px2rpx(24);
    height: px2rpx(24);
  }

  .van-icon--copy {
    color: #fff;
  }
}

.actions1 {
  width: 100%;
  padding: px2rpx(20);

  margin-top: px2rpx(20);
  border: 1px solid rgba(214, 255, 0, 0.2);
  box-shadow: 0 0.053333rem 0.213333rem rgba(0, 0, 0, 0.08);
}

.card-btn {
  width: 100%;

  .yue {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    line-height: px2rpx(50);
    width: 100%;
    height: px2rpx(50);
    background: rgba(208, 37, 55, 0.03);
    border-radius: px2rpx(8);
    text-align: left;
    padding-left: px2rpx(20);
    margin-bottom: px2rpx(20);
  }

  .a {
    font-size: px2rpx(14);
    color: #333333;
    font-weight: bold;
    padding: 0;
  }

  .v {
    font-size: px2rpx(14);
    color: #eb3f57;
    padding: 0;
  }

  .btn {
    width: px2rpx(193);
    height: px2rpx(40);
    border: 1px solid #eb3f57;
    border-radius: px2rpx(4);
    text-align: center;
    color: #eb3f57;
    font-size: px2rpx(16);
    font-family: Roboto;
    font-weight: 600;
    line-height: px2rpx(40);
    cursor: pointer;
    user-select: none;
  }

  .btn1 {
    width: px2rpx(100);
    height: px2rpx(94);
    background: rgba(208, 37, 55, 0.03);
    border: 1px solid rgba(208, 37, 55, 0.03);
    border-radius: px2rpx(15);
    text-align: center;
    color: #eb3f57;
    font-size: px2rpx(16);
    font-family: Roboto;
    font-weight: 600;
    line-height: px2rpx(20);
    padding: 0 px2rpx(8);
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: px2rpx(8);

    &:hover {
      border: 1px solid #eb3f57;
    }

    img {
      width: px2rpx(28);
      height: px2rpx(28);
      vertical-align: middle;
      margin-right: px2rpx(5);
    }
  }

  .btn2 {
    width: px2rpx(162);
  }

  .btn3 {
    background: rgba(153, 153, 153, 0.03) !important;
    color: #999 !important;
    pointer-events: none !important;
  }
}

.status {
  position: absolute;
  top: px2rpx(15);
  right: -px2rpx(30);
  padding: px2rpx(4) px2rpx(40);
  background: rgba(235, 63, 87, 0.1);
  color: #eb3f57;
  font-size: px2rpx(14);
  font-weight: 500;
  text-align: center;
  transform: rotate(45deg);
  transform-origin: center center;
}

.status1 {
  position: absolute;
  top: px2rpx(15);
  right: -px2rpx(30);
  padding: px2rpx(4) px2rpx(40);
  background: rgba(67, 68, 68, 0.1);
  color: #434444;
  font-size: px2rpx(14);
  font-weight: 500;
  text-align: center;
  transform: rotate(45deg);
  transform-origin: center center;
}

.transaction-list {
  display: flex;
  flex-direction: column;

  .transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: px2rpx(16) 0;
    border-bottom: 1px solid #f3f4f6;
  }

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

  .transaction-left {
    display: flex;
    align-items: center;
    gap: px2rpx(12);
  }

  .transaction-icon {
    width: px2rpx(40);
    height: px2rpx(40);
    background-color: #f9fafb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .icon-text {
    font-size: px2rpx(20);
    color: #6b7280;
  }

  .transaction-info {
    display: flex;
    flex-direction: column;
    gap: px2rpx(4);
  }

  .transaction-status {
    font-size: px2rpx(14);
    color: #111827;
  }

  .transaction-time {
    font-size: px2rpx(12);
    color: #9ca3af;
  }

  .transaction-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .transaction-amount {
    font-size: px2rpx(16);
    font-weight: 600;
    color: #111827;
  }

  .transaction-amount.negative {
    color: #ef4444;
  }
}
</style>