<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '银行卡',
    navigationBarBackgroundColor: '#fff',
    navigationStyle: 'custom',
  },
}
</route>

<template>
  <view class="bank-page min-h-screen pb-100">
    <NavBar title-color="#333" />
    <view
      class="mx-auto rounded-tl-20 ml-15 mt-15 rounded-br-20 w-fit px-10 py-2 text-15"
      style="background: linear-gradient(90deg, #ffdd99 0%, #efb85a 100%)"
    >
      我的银行卡片
    </view>
    <view class="bank-card mx-auto mt-24 relative w-345 h-210">
      <view class="absolute text-19 top-120 left-40 text-white" style="font-family: FARRINGTON-7B">
        {{ userStore.userInfo.banknum.replace(/(\d{4})(?=\d)/g, '$1 ') }}
      </view>
    </view>
    <view
      class="rounded-full mx-auto mt-24 w-345 h-40 flex items-center justify-center text-15"
      style="
        background: linear-gradient(
          90deg,
          rgba(255, 221, 153, 0.2) 0%,
          rgba(239, 184, 90, 0.2) 100%
        );
        border: 1px solid #ffdd99;
      "
    >
      卡内余额：{{ userStore.userInfo.money }}
    </view>
    <view
      class="btn-gradient rounded-full text-white mx-auto mt-50 w-345 h-40 flex items-center justify-center text-15"
      @click="onWithdraw"
    >
      提现
    </view>
  </view>
</template>

<script setup lang="ts">
import NavBar from '@/components/NavBar.vue'
import { getBankCardAPI } from '@/service'
import { useUserStore } from '@/store'

const userStore = useUserStore()

const list = ref([])
const loadData = async () => {
  list.value = (await getBankCardAPI({
    limit: 1000,
    page: 1,
  }).then((res) => res.data)) as any
}
onShow(async () => {
  loadData()
})

function onWithdraw() {
  uni.navigateTo({
    url: '/pages-sub/withdrawal/index',
  })
}
</script>

<style lang="scss" scoped>
.bank-page {
  background: linear-gradient(180deg, #fff3eb 0%, #ffffff 100%);
}
.bank-card {
  background-image: url('@/static/images/bank/card.png');
  background-size: 100% 100%;
}
</style>
