311 lines
9.1 KiB
Vue
311 lines
9.1 KiB
Vue
<template>
|
|
<div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-12 col-lg-9 col-md-11 col-sm-12 col-xl-8">
|
|
<h1 class="h3 fw-bold text-center pt-3">
|
|
{{ t("Donation") }}
|
|
</h1>
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="fw-light text-center py-3">
|
|
{{ t("DonationHeading") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex flex-column flex-md-row gap-3">
|
|
<div class="col-12 py-1 flex-auto">
|
|
<div class="card" :class="{'active-sub':oneMonth,'sub-card':!oneMonth}" @click="oneMonth=true;twoMonth=false;threeMonth=false">
|
|
<div class="card-body py-4">
|
|
<h2 class="text-center fw-bolder">
|
|
€3.00
|
|
</h2>
|
|
<p class="text-center">
|
|
{{ t("SmallAmount") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 py-1 flex-auto">
|
|
<div class="card" :class="{'active-sub':twoMonth,'sub-card':!twoMonth}" @click="twoMonth=true;oneMonth=false;threeMonth=false">
|
|
<div class="card-body py-4">
|
|
<h2 class="text-center fw-bolder">
|
|
€10.00
|
|
</h2>
|
|
<p class=" text-center">
|
|
{{ t("MediumAmount") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-12 py-1 flex-auto">
|
|
<div class="card" :class="{'active-sub':threeMonth,'sub-card':!threeMonth}" @click="threeMonth=true;twoMonth=false;oneMonth=false">
|
|
<div class="card-body py-4">
|
|
<h2 class="text-center fw-bolder">
|
|
€15.00
|
|
</h2>
|
|
<p class=" text-center">
|
|
{{ t("BigAmount") }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row pt-5">
|
|
<div class="col-12 px-md-5 px-0">
|
|
<p class="text-center text-muted">
|
|
{{ t("EndStatement") }}
|
|
</p>
|
|
</div>
|
|
<div class="col-12 text-end" />
|
|
</div>
|
|
<div class="row pt-5 justify-content-center ">
|
|
<div class="col-12 col-md-6 col-lg-6 text-center">
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<p class="fw-medium text-center"><strong>{{ t("bankaccount") }}:</strong><br></p>
|
|
<p class="fw-light text-center">
|
|
{{ t("Name") }}: Robert Rapp<br>
|
|
</p>
|
|
<p class="fw-light text-center">
|
|
IBAN: DE42 1001 1001 2629 4590 53
|
|
<span class="tooltip-container">
|
|
<i class="fas fa-copy ml-2 cursor-pointer" title="In die Zwischenablage kopieren" @click="copyIBANToClipboard('DE42 1001 1001 2629 4590 53')" />
|
|
<span class="tooltiptext" :class="{ 'show': showTooltip }">Kopiert!</span>
|
|
</span>
|
|
</p>
|
|
<p class="fw-light text-center">
|
|
BIC: NTSBDEB1XXX
|
|
</p>
|
|
<p class="fw-light text-center">
|
|
{{ userVerwendungszweck }}
|
|
<span class="tooltip-container">
|
|
<i class="fas fa-copy ml-2 cursor-pointer" title="In die Zwischenablage kopieren" @click="copyToClipboard(userVerwendungszweck)" />
|
|
<span class="tooltiptext" :class="{ 'show': showTooltip1 }">Kopiert!</span>
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <StripeElements-->
|
|
<!-- v-if="stripeLoaded"-->
|
|
<!-- v-slot="{ elements, instance }" ref="elms"-->
|
|
<!-- :stripe-key="stripeKey"-->
|
|
<!-- :instance-options="instanceOptions"-->
|
|
<!-- :elements-options="elementsOptions"-->
|
|
<!-- >-->
|
|
<!-- <StripeElement-->
|
|
<!-- ref="card"-->
|
|
<!-- :elements="elements"-->
|
|
<!-- :options="cardOptions"-->
|
|
<!-- />-->
|
|
<!-- </StripeElements>-->
|
|
<!-- <button type="button" class="btn text-white fs-5 col-12 fw-bold py-2" @click="pay" style="background-color: #e9c046">Pay</button>-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import { mapActions, mapStores } from 'pinia'
|
|
import { useUserStore } from '~/stores/user'
|
|
export default {
|
|
setup () {
|
|
const { t } = useI18n()
|
|
const localePath = useLocalePath()
|
|
const userVerwendungszweck = ref(useUserStore().user.email)
|
|
const usermail = useUserStore().user.email
|
|
|
|
return { t, localePath, userVerwendungszweck, usermail }
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
oneMonth: false,
|
|
twoMonth: false,
|
|
threeMonth: false,
|
|
loading: false,
|
|
cancel_loading: false,
|
|
showTooltip: false,
|
|
showTooltip1: false,
|
|
subscription: '',
|
|
form: {
|
|
type: 'one'
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
// ...mapState(useUserStore, ['user']),
|
|
...mapStores(useUserStore)
|
|
},
|
|
mounted () {
|
|
this.fetchSubscription()
|
|
},
|
|
|
|
methods: {
|
|
...mapActions(useUserStore, ['updateUser', 'logout']),
|
|
copyToClipboard (text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
this.showTooltip1 = true
|
|
setTimeout(() => {
|
|
this.showTooltip1 = false
|
|
}, 2000) // Tooltip verschwindet nach 2 Sekunden
|
|
}).catch((err) => {
|
|
useNuxtApp().$logger.error('Fehler beim Kopieren: ', err)
|
|
})
|
|
},
|
|
copyIBANToClipboard (text) {
|
|
navigator.clipboard.writeText(text).then(() => {
|
|
this.showTooltip = true
|
|
setTimeout(() => {
|
|
this.showTooltip = false
|
|
}, 2000) // Tooltip verschwindet nach 2 Sekunden
|
|
}).catch((err) => {
|
|
useNuxtApp().$logger.error('Fehler beim Kopieren: ', err)
|
|
})
|
|
},
|
|
updateUserNow () {
|
|
this.$axios.post('/api/auth/me').then(({ data }) => {
|
|
this.updateUser(data.user)
|
|
}).catch(() => {
|
|
this.logout()
|
|
this.$router.push(this.localePath('/auth/login'))
|
|
})
|
|
},
|
|
paypal () {
|
|
window.open('https://www.paypal.com/pools/c/93YzF9GqEP', '_blank')
|
|
},
|
|
fetchSubscription () {
|
|
this.$axios.post('/api/fetch-subscription').then(({ data }) => {
|
|
this.subscription = data.name
|
|
if (data.name === 'monthly') {
|
|
this.oneMonth = true
|
|
this.twoMonth = false
|
|
this.threeMonth = false
|
|
}
|
|
if (data.name === 'sixmonth') {
|
|
this.oneMonth = false
|
|
this.twoMonth = true
|
|
this.threeMonth = false
|
|
}
|
|
if (data.name === 'yearly') {
|
|
this.oneMonth = false
|
|
this.twoMonth = false
|
|
this.threeMonth = true
|
|
}
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// export default {
|
|
// name: 'CardOnly',
|
|
// data() {
|
|
// return {
|
|
// stripeKey: 'pk_test_0S0H9CTYtkhPlArgg4KkPFcZ',
|
|
// instanceOptions: {},
|
|
// elementsOptions: {},
|
|
// cardOptions: {},
|
|
// stripeLoaded: false,
|
|
// card: null,
|
|
// elms: null,
|
|
// oneMonth:false,
|
|
// twoMonth:false,
|
|
// threeMonth:false,
|
|
// };
|
|
// },
|
|
// components: {
|
|
// StripeElements,
|
|
// StripeElement,
|
|
// },
|
|
// beforeMount() {
|
|
// const stripePromise = loadStripe(this.stripeKey);
|
|
// stripePromise.then(() => {
|
|
// this.stripeLoaded = true;
|
|
// });
|
|
// },
|
|
// methods: {
|
|
// pay() {
|
|
// const cardElement = this.$refs.card.stripeElement;
|
|
//
|
|
// this.$refs.elms.instance
|
|
// .createPaymentMethod({ type: 'card', card: cardElement })
|
|
// .then((result) => {
|
|
// // useNuxtApp().$logger.log(result);
|
|
// // useNuxtApp().$logger.log(result.paymentMethod);
|
|
// this.$axios.post('/api/subscribe', result).then((response) => {
|
|
// // useNuxtApp().$logger.log(response.data);
|
|
// });
|
|
// });
|
|
// },
|
|
// },
|
|
// computed: {
|
|
//
|
|
// },
|
|
// created() {
|
|
//
|
|
// },
|
|
// };
|
|
</script>
|
|
<style>
|
|
.flex-auto {
|
|
flex: 1 1 auto;
|
|
}
|
|
.active-sub{
|
|
background: #E9C046;
|
|
box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);
|
|
border-radius: 12px;
|
|
color:white;
|
|
background-color:#E9C046 !important;
|
|
}
|
|
.sub-card{
|
|
background: #FFFFFF;
|
|
box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);
|
|
border-radius: 12px;
|
|
color:black;
|
|
height: 100%;
|
|
transition: 250ms ease-in-out;
|
|
}
|
|
.sub-card:hover, .sub-card:focus{
|
|
background: #E9C046;
|
|
box-shadow: 0px 0px 16px 1px rgba(108, 97, 97, 0.05);
|
|
border-radius: 12px;
|
|
color:white;
|
|
border-color: #E9C046;
|
|
background-color:#E9C046 !important;
|
|
}
|
|
.tooltip-container {
|
|
margin-left: 10px;
|
|
font-size: smaller;
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tooltiptext {
|
|
visibility: hidden;
|
|
font-family: 'Montserrat', sans-serif;
|
|
font-size: 14px;
|
|
width: auto;
|
|
background-color: #e9c046;
|
|
color: #000000;
|
|
text-align: center;
|
|
border-radius: 6px;
|
|
padding: 5px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
bottom: 125%;
|
|
left: 20%;
|
|
margin-left: -30px;
|
|
opacity: 0;
|
|
transition: opacity 0.3s;
|
|
}
|
|
|
|
.tooltiptext.show {
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
</style>
|