You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
160 lines
4.4 KiB
160 lines
4.4 KiB
<template>
|
|
<div class="invoice tw-p-5 tw-mb-[20px] tw-bg-neutrals-0 tw-rounded-xl">
|
|
<h3
|
|
:class="[
|
|
'collapse',
|
|
't16',
|
|
'tw-relative',
|
|
'tw-cursor-pointer',
|
|
'xl:tw-text-[18px]',
|
|
show ? 'show' : 'hide',
|
|
disabled ? 'disabled' : '',
|
|
disabled ? 'tw-text-neutrals-300' : 'tw-text-black',
|
|
]"
|
|
@click="show = !show"
|
|
>
|
|
{{ "電子發票/收據" }}
|
|
</h3>
|
|
<Transition name="bounce">
|
|
<div v-show="show" class="tw-mt-[32px] md:tw-ml-[60px]">
|
|
<div class="element tw-mb-[20px]">
|
|
<div class="t16">{{ "是否開立統編？" }}</div>
|
|
</div>
|
|
<div class="element tw-w-max tw-flex tw-items-center">
|
|
<input id="true" type="radio" value="true" v-model="method" />
|
|
<label for="true" class="t16 tw-font-normal"
|
|
><span>{{ "是" }}</span></label
|
|
>
|
|
</div>
|
|
<Transition name="bounce">
|
|
<div v-show="method == 'true'">
|
|
<div
|
|
class="card-info tw-grid tw-grid-cols-1 tw-gap-x-[20px] tw-gap-y-[20px] tw-ml-[40px] tw-mt-[20px] tw-max-w-[630px] md:tw-grid-cols-2"
|
|
>
|
|
<div class="element tw-flex tw-flex-col">
|
|
<label class="tw-mb-[10px]"
|
|
><span
|
|
>買受人（公司抬頭）<span class="required">*</span></span
|
|
></label
|
|
>
|
|
<input id="Buyer" type="text" />
|
|
</div>
|
|
<div class="element tw-flex tw-flex-col">
|
|
<label class="tw-mb-[10px]"
|
|
><span>統一編號<span class="required">*</span></span></label
|
|
>
|
|
<input
|
|
id="UniformNumbers"
|
|
type="text"
|
|
value=""
|
|
class="tw-text-center"
|
|
/>
|
|
</div>
|
|
<div class="element tw-flex tw-flex-col">
|
|
<label class="tw-mb-[10px]"
|
|
><span>電子郵件<span class="required">*</span></span></label
|
|
>
|
|
<input
|
|
id="InvoiceEmail"
|
|
type="text"
|
|
value=""
|
|
class="tw-text-center"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
<div class="element tw-mt-[20px]">
|
|
<input id="false" type="radio" value="fasle" v-model="method" />
|
|
<label for="false" class="t16 tw-font-normal"
|
|
><span>{{ "否" }}</span></label
|
|
>
|
|
</div>
|
|
</div></Transition
|
|
>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
name: "Invoice",
|
|
data() {
|
|
return {
|
|
show: false,
|
|
disabled: false,
|
|
completed: false,
|
|
method: null,
|
|
};
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.collapse {
|
|
&::before {
|
|
content: "";
|
|
display: inline-block;
|
|
position: relative;
|
|
left: 0;
|
|
top: 0;
|
|
background-image: url("~/assets/svg/down-arrow.svg");
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
width: 16px;
|
|
height: 10px;
|
|
margin-right: 40px;
|
|
transform: rotate(-90deg);
|
|
transition: all 0.2s linear;
|
|
}
|
|
&.disabled {
|
|
pointer-events: none;
|
|
&::before {
|
|
background-image: url("~/assets/svg/down-arrow-disabled.svg");
|
|
}
|
|
}
|
|
&.show {
|
|
&::before {
|
|
transform: rotate(0);
|
|
transition: all 0.2s linear;
|
|
}
|
|
}
|
|
}
|
|
.card-icon {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 100%;
|
|
}
|
|
.icon {
|
|
&--visa {
|
|
background-image: url("~/assets/img/credit-card/Visa.png");
|
|
}
|
|
&--union-pay {
|
|
background-image: url("~/assets/img/credit-card/UnionPay.png");
|
|
}
|
|
&--mastercard {
|
|
background-image: url("~/assets/img/credit-card/Mastercard.png");
|
|
}
|
|
&--jcb {
|
|
background-image: url("~/assets/img/credit-card/JCB.png");
|
|
}
|
|
}
|
|
.bounce-enter-active {
|
|
animation: bounce-in 0.3s ease-out;
|
|
}
|
|
.bounce-leave-active {
|
|
animation: bounce-in 0.3s cubic-bezier(1, 0.5, 0.8, 1) reverse;
|
|
}
|
|
@keyframes bounce-in {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
50% {
|
|
opacity: 0.5;
|
|
transform: translateY(-5px);
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
</style>
|