mirror of
https://git.hmsn.ink/kospo/svcm/oa.git
synced 2026-03-20 13:53:30 +09:00
first
This commit is contained in:
313
src/components/base-addons/VCreditCard.vue
Normal file
313
src/components/base-addons/VCreditCard.vue
Normal file
@@ -0,0 +1,313 @@
|
||||
<script setup lang="ts">
|
||||
import type { VCreditCardColor } from '/@src/composables/credit-card'
|
||||
|
||||
export interface VCreditCardEmits {
|
||||
(e: 'flip'): void
|
||||
}
|
||||
export interface VCreditCardProps {
|
||||
number?: string
|
||||
name?: string
|
||||
expiry?: string
|
||||
cvc?: string | number
|
||||
color?: VCreditCardColor
|
||||
flipped?: boolean
|
||||
}
|
||||
|
||||
const emit = defineEmits<VCreditCardEmits>()
|
||||
const props = withDefaults(defineProps<VCreditCardProps>(), {
|
||||
color: 'grey',
|
||||
name: 'John Doe',
|
||||
number: '1234 1234 1234 1234',
|
||||
cvc: '123',
|
||||
expiry: '01/30',
|
||||
})
|
||||
|
||||
const { t } = useI18n()
|
||||
const nameUppercase = computed(() => props.name?.toUpperCase() ?? '')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="card-container">
|
||||
<div
|
||||
:class="[props.flipped && 'flipped']"
|
||||
class="creditcard"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@keydown.enter.prevent="emit('flip')"
|
||||
@click="emit('flip')"
|
||||
>
|
||||
<div class="front">
|
||||
<slot />
|
||||
|
||||
<svg
|
||||
id="cardfront"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 750 471"
|
||||
style="enable-background: new 0 0 750 471"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g id="Front2">
|
||||
<g id="CardBackground">
|
||||
<g id="Page-1_1_">
|
||||
<g id="amex_1_">
|
||||
<path
|
||||
id="Rectangle-1_1_"
|
||||
class="lightcolor"
|
||||
:class="props.color"
|
||||
d="M40,0h670c22.1,0,40,17.9,40,40v391c0,22.1-17.9,40-40,40H40c-22.1,0-40-17.9-40-40V40
|
||||
C0,17.9,17.9,0,40,0z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<path
|
||||
class="darkcolor"
|
||||
:class="`${props.color}dark`"
|
||||
d="M750,431V193.2c-217.6-57.5-556.4-13.5-750,24.9V431c0,22.1,17.9,40,40,40h670C732.1,471,750,453.1,750,431z"
|
||||
/>
|
||||
</g>
|
||||
<text
|
||||
id="svgnumber"
|
||||
transform="matrix(1 0 0 1 60.106 295.0121)"
|
||||
class="st2 st3 st4"
|
||||
>
|
||||
{{ props.number }}
|
||||
</text>
|
||||
<text
|
||||
id="svgname"
|
||||
transform="matrix(1 0 0 1 54.1064 428.1723)"
|
||||
class="st2 st5 st6"
|
||||
>
|
||||
{{ nameUppercase }}
|
||||
</text>
|
||||
<text
|
||||
transform="matrix(1 0 0 1 54.1074 389.8793)"
|
||||
class="st7 st5 st8"
|
||||
>
|
||||
{{ t('components.v-credit-card.holder-label') }}
|
||||
</text>
|
||||
<text
|
||||
transform="matrix(1 0 0 1 479.7754 388.8793)"
|
||||
class="st7 st5 st8"
|
||||
>
|
||||
{{ t('components.v-credit-card.expiration-label') }}
|
||||
</text>
|
||||
<text
|
||||
transform="matrix(1 0 0 1 65.1054 241.5)"
|
||||
class="st7 st5 st8"
|
||||
>
|
||||
{{ t('components.v-credit-card.number-label') }}
|
||||
</text>
|
||||
<g>
|
||||
<text
|
||||
id="svgexpire"
|
||||
transform="matrix(1 0 0 1 574.4219 433.8095)"
|
||||
class="st2 st5 st9"
|
||||
>
|
||||
{{ props.expiry }}
|
||||
</text>
|
||||
<text
|
||||
transform="matrix(1 0 0 1 479.3848 417.0097)"
|
||||
class="st2 st10 st11"
|
||||
>
|
||||
{{ t('components.v-credit-card.valid-label') }}
|
||||
</text>
|
||||
<text
|
||||
transform="matrix(1 0 0 1 479.3848 435.6762)"
|
||||
class="st2 st10 st11"
|
||||
>
|
||||
{{ t('components.v-credit-card.valid-thru-label') }}
|
||||
</text>
|
||||
<polygon
|
||||
class="st2"
|
||||
points="554.5,421 540.4,414.2 540.4,427.9"
|
||||
/>
|
||||
</g>
|
||||
<g id="cchip">
|
||||
<g>
|
||||
<path
|
||||
class="st2"
|
||||
d="M168.1,143.6H82.9c-10.2,0-18.5-8.3-18.5-18.5V74.9c0-10.2,8.3-18.5,18.5-18.5h85.3
|
||||
c10.2,0,18.5,8.3,18.5,18.5v50.2C186.6,135.3,178.3,143.6,168.1,143.6z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<rect
|
||||
x="82"
|
||||
y="70"
|
||||
class="st12"
|
||||
width="1.5"
|
||||
height="60"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="167.4"
|
||||
y="70"
|
||||
class="st12"
|
||||
width="1.5"
|
||||
height="60"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path
|
||||
class="st12"
|
||||
d="M125.5,130.8c-10.2,0-18.5-8.3-18.5-18.5c0-4.6,1.7-8.9,4.7-12.3c-3-3.4-4.7-7.7-4.7-12.3
|
||||
c0-10.2,8.3-18.5,18.5-18.5s18.5,8.3,18.5,18.5c0,4.6-1.7,8.9-4.7,12.3c3,3.4,4.7,7.7,4.7,12.3
|
||||
C143.9,122.5,135.7,130.8,125.5,130.8z M125.5,70.8c-9.3,0-16.9,7.6-16.9,16.9c0,4.4,1.7,8.6,4.8,11.8l0.5,0.5l-0.5,0.5
|
||||
c-3.1,3.2-4.8,7.4-4.8,11.8c0,9.3,7.6,16.9,16.9,16.9s16.9-7.6,16.9-16.9c0-4.4-1.7-8.6-4.8-11.8l-0.5-0.5l0.5-0.5
|
||||
c3.1-3.2,4.8-7.4,4.8-11.8C142.4,78.4,134.8,70.8,125.5,70.8z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="82.8"
|
||||
y="82.1"
|
||||
class="st12"
|
||||
width="25.8"
|
||||
height="1.5"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="82.8"
|
||||
y="117.9"
|
||||
class="st12"
|
||||
width="26.1"
|
||||
height="1.5"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="142.4"
|
||||
y="82.1"
|
||||
class="st12"
|
||||
width="25.8"
|
||||
height="1.5"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<rect
|
||||
x="142"
|
||||
y="117.9"
|
||||
class="st12"
|
||||
width="26.2"
|
||||
height="1.5"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g id="Back" />
|
||||
</svg>
|
||||
</div>
|
||||
<div class="back">
|
||||
<svg
|
||||
id="cardback"
|
||||
version="1.1"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
x="0px"
|
||||
y="0px"
|
||||
viewBox="0 0 750 471"
|
||||
style="enable-background: new 0 0 750 471"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g id="Front">
|
||||
<line
|
||||
class="st0"
|
||||
x1="35.3"
|
||||
y1="10.4"
|
||||
x2="36.7"
|
||||
y2="11"
|
||||
/>
|
||||
</g>
|
||||
<g id="Back2">
|
||||
<g id="Page-1_2_">
|
||||
<g id="amex_2_">
|
||||
<path
|
||||
id="Rectangle-1_2_"
|
||||
class="darkcolor"
|
||||
:class="`${props.color}dark`"
|
||||
d="M40,0h670c22.1,0,40,17.9,40,40v391c0,22.1-17.9,40-40,40H40c-22.1,0-40-17.9-40-40V40
|
||||
C0,17.9,17.9,0,40,0z"
|
||||
/>
|
||||
</g>
|
||||
</g>
|
||||
<rect
|
||||
y="61.6"
|
||||
class="st2"
|
||||
width="750"
|
||||
height="78"
|
||||
/>
|
||||
<g>
|
||||
<path
|
||||
class="st3"
|
||||
d="M701.1,249.1H48.9c-3.3,0-6-2.7-6-6v-52.5c0-3.3,2.7-6,6-6h652.1c3.3,0,6,2.7,6,6v52.5
|
||||
C707.1,246.4,704.4,249.1,701.1,249.1z"
|
||||
/>
|
||||
<rect
|
||||
x="42.9"
|
||||
y="198.6"
|
||||
class="st4"
|
||||
width="664.1"
|
||||
height="10.5"
|
||||
/>
|
||||
<rect
|
||||
x="42.9"
|
||||
y="224.5"
|
||||
class="st4"
|
||||
width="664.1"
|
||||
height="10.5"
|
||||
/>
|
||||
<path
|
||||
class="st5"
|
||||
d="M701.1,184.6H618h-8h-10v64.5h10h8h83.1c3.3,0,6-2.7,6-6v-52.5C707.1,187.3,704.4,184.6,701.1,184.6z"
|
||||
/>
|
||||
</g>
|
||||
<text
|
||||
id="svgsecurity"
|
||||
transform="matrix(1 0 0 1 621.999 227.2734)"
|
||||
class="st6 st7"
|
||||
>
|
||||
{{ props.cvc }}
|
||||
</text>
|
||||
<g class="st8">
|
||||
<text
|
||||
transform="matrix(1 0 0 1 518.083 280.0879)"
|
||||
class="st9 st6 st10"
|
||||
>
|
||||
{{ t('components.v-credit-card.cvc-label') }}
|
||||
</text>
|
||||
</g>
|
||||
<rect
|
||||
x="58.1"
|
||||
y="378.6"
|
||||
class="st11"
|
||||
width="375.5"
|
||||
height="13.5"
|
||||
/>
|
||||
<rect
|
||||
x="58.1"
|
||||
y="405.6"
|
||||
class="st11"
|
||||
width="421.7"
|
||||
height="13.5"
|
||||
/>
|
||||
<text
|
||||
id="svgnameback"
|
||||
transform="matrix(1 0 0 1 59.5073 228.6099)"
|
||||
class="st12 st13"
|
||||
>
|
||||
{{ props.name }}
|
||||
</text>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user