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.
269 lines
8.6 KiB
269 lines
8.6 KiB
5 years ago
|
<template>
|
||
|
|
<div class="card">
|
||
|
|
<div class="card-header">Donate</div>
|
||
|
|
|
||
|
|
<div class="card-body">
|
||
|
|
<form method="POST" action>
|
||
|
|
<div class="form-group row">
|
||
|
|
<label for="currency" class="col-md-4 col-form-label text-md-right">Donation currency</label>
|
||
|
|
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col" v-for="currencyItem in currencies" :key="currencyItem.code">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-block"
|
||
|
|
:class="{'btn-primary':currency==currencyItem.code, 'btn-outline-primary':currency!=currencyItem.code}"
|
||
|
|
@click="currency=currencyItem.code"
|
||
|
|
>{{currencyItem.symbol}} | {{currencyItem.name}}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group row">
|
||
|
|
<label for="frequency" class="col-md-4 col-form-label text-md-right">Donation frequency</label>
|
||
|
|
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="row">
|
||
|
|
<div class="col" v-for="frequencyItem in frequencies" :key="frequencyItem.code">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-block"
|
||
|
|
:class="{'btn-primary':frequency==frequencyItem.code, 'btn-outline-primary':frequency!=frequencyItem.code}"
|
||
|
|
@click="frequency=frequencyItem.code"
|
||
|
|
>{{frequencyItem.name}}</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group row">
|
||
|
|
<label for="donationPackage" class="col-md-4 col-form-label text-md-right">Donation amount</label>
|
||
|
|
|
||
|
|
<div class="col-md-8">
|
||
|
|
<div class="row">
|
||
|
|
<div
|
||
|
|
class="col-6"
|
||
|
|
v-for="donationPackageItem in donationPackages"
|
||
|
|
:key="donationPackageItem.id"
|
||
|
|
>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-block mb-2"
|
||
|
|
:class="{'btn-primary':donationPackage==donationPackageItem.id, 'btn-outline-primary':donationPackage!=donationPackageItem.id}"
|
||
|
|
@click="setDonationPackage(donationPackageItem.id)"
|
||
|
|
>
|
||
|
|
<span>{{activeCurrency.symbol}}</span>
|
||
|
|
<span v-if="frequency=='once'">{{donationPackageItem.once_amount}}</span>
|
||
|
|
<span v-else-if="frequency=='monthly'">{{donationPackageItem.monthly_amount}} /mo</span>
|
||
|
|
<span
|
||
|
|
v-else-if="frequency=='annually'"
|
||
|
|
>{{donationPackageItem.annually_amount}} /yr</span>
|
||
|
|
|
||
|
|
<br />
|
||
|
|
<small>{{donationPackageItem.name}}</small>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<div class="col-6">
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
class="btn btn-block mb-2"
|
||
|
|
:class="{'btn-primary':donationPackage==null, 'btn-outline-primary':donationPackage!=null}"
|
||
|
|
@click="setDonationPackage(null)"
|
||
|
|
>
|
||
|
|
<small>other</small>
|
||
|
|
<br />
|
||
|
|
|
||
|
|
<div class="input-group mb-3">
|
||
|
|
<div class="input-group-prepend">
|
||
|
|
<span class="input-group-text">{{activeCurrency.symbol}}</span>
|
||
|
|
</div>
|
||
|
|
<input
|
||
|
|
type="number"
|
||
|
|
class="form-control"
|
||
|
|
aria-label="Amount"
|
||
|
|
v-model.number="amount"
|
||
|
|
@keypress="onlyNumber"
|
||
|
|
/>
|
||
|
|
<div
|
||
|
|
class="input-group-append"
|
||
|
|
v-if="frequency=='monthly' || frequency=='annually'"
|
||
|
|
>
|
||
|
|
<span v-if="frequency=='monthly'" class="input-group-text">/mo</span>
|
||
|
|
<span v-else-if="frequency=='annually'" class="input-group-text">/yr</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<!-- <div class="form-group row">
|
||
|
|
<label for="email" class="col-md-4 col-form-label text-md-right">E-Mail Address</label>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<input
|
||
|
|
id="email"
|
||
|
|
type="email"
|
||
|
|
class="form-control is-invalid"
|
||
|
|
name="email"
|
||
|
|
required
|
||
|
|
autocomplete="email"
|
||
|
|
autofocus
|
||
|
|
/>
|
||
|
|
<span class="invalid-feedback" role="alert">
|
||
|
|
<strong>Sample error</strong>
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<label for="password" class="col-md-4 col-form-label text-md-right">Password</label>
|
||
|
|
|
||
|
|
<div class="col-md-6">
|
||
|
|
<input
|
||
|
|
id="password"
|
||
|
|
type="password"
|
||
|
|
class="form-control"
|
||
|
|
name="password"
|
||
|
|
required
|
||
|
|
autocomplete="current-password"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-group row">
|
||
|
|
<div class="col-md-6 offset-md-4">
|
||
|
|
<div class="form-check">
|
||
|
|
<input class="form-check-input" type="checkbox" name="remember" id="remember" />
|
||
|
|
<label class="form-check-label" for="remember">Remember Me</label>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>-->
|
||
|
|
|
||
|
|
<div class="form-group row mb-0">
|
||
|
|
<div class="col-md-8 offset-md-4">
|
||
|
|
<button type="submit" class="btn btn-primary btn-lg">Donate {{amountText}}</button>
|
||
|
|
|
||
|
|
<!-- <a class="btn btn-link" href="#">Forgot Your Password?</a> -->
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
currency: "USD",
|
||
|
|
frequency: "monthly",
|
||
|
|
donationPackage: 4,
|
||
|
|
amount: 25,
|
||
|
|
currencies: [
|
||
|
|
{ name: "USD", code: "USD", symbol: "$" },
|
||
|
|
{ name: "EUR", code: "EUR", symbol: "€" },
|
||
|
|
{ name: "TRY", code: "TRY", symbol: "₺" }
|
||
|
|
],
|
||
|
|
frequencies: [
|
||
|
|
{ name: "once", code: "once" },
|
||
|
|
{ name: "monthly", code: "monthly" },
|
||
|
|
{ name: "annually", code: "annually" }
|
||
|
|
],
|
||
|
|
donationPackages: [
|
||
|
|
{
|
||
|
|
id: 1,
|
||
|
|
name: "Super Major Donor",
|
||
|
|
once_amount: 2500,
|
||
|
|
monthly_amount: 250,
|
||
|
|
annually_amount: 2500
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 2,
|
||
|
|
name: "Major Donor",
|
||
|
|
once_amount: 1000,
|
||
|
|
monthly_amount: 100,
|
||
|
|
annually_amount: 1000
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 3,
|
||
|
|
name: "Rare Earths Level",
|
||
|
|
once_amount: 500,
|
||
|
|
monthly_amount: 50,
|
||
|
|
annually_amount: 500
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 4,
|
||
|
|
name: "Titanium Level",
|
||
|
|
once_amount: 250,
|
||
|
|
monthly_amount: 25,
|
||
|
|
annually_amount: 250
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 5,
|
||
|
|
name: "Gold Level",
|
||
|
|
once_amount: 100,
|
||
|
|
monthly_amount: 10,
|
||
|
|
annually_amount: 100
|
||
|
|
},
|
||
|
|
{
|
||
|
|
id: 6,
|
||
|
|
name: "Copper Level",
|
||
|
|
once_amount: 50,
|
||
|
|
monthly_amount: 5,
|
||
|
|
annually_amount: 50
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
activeCurrency() {
|
||
|
|
const itemIndex = this.currencies.findIndex(
|
||
|
|
item => item.code === this.currency
|
||
|
|
);
|
||
|
|
if (itemIndex === -1) return false;
|
||
|
|
return this.currencies[itemIndex];
|
||
|
|
},
|
||
|
|
amountText() {
|
||
|
|
var text = this.activeCurrency.symbol + this.amount;
|
||
|
|
if (this.frequency == "monthly") {
|
||
|
|
text = text + "/mo";
|
||
|
|
} else if (this.frequency == "annually") {
|
||
|
|
text = text + "/yr";
|
||
|
|
}
|
||
|
|
return text;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
setDonationPackage(id) {
|
||
|
|
this.donationPackage = id;
|
||
|
|
const itemIndex = this.donationPackages.findIndex(item => item.id === id);
|
||
|
|
if (itemIndex !== -1) {
|
||
|
|
if (this.frequency == "once") {
|
||
|
|
this.amount = this.donationPackages[itemIndex].once_amount;
|
||
|
|
} else if (this.frequency == "monthly") {
|
||
|
|
this.amount = this.donationPackages[itemIndex].monthly_amount;
|
||
|
|
} else if (this.frequency == "annually") {
|
||
|
|
this.amount = this.donationPackages[itemIndex].annually_amount;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onlyNumber($event) {
|
||
|
|
//console.log($event.keyCode); //keyCodes value
|
||
|
|
let keyCode = $event.keyCode ? $event.keyCode : $event.which;
|
||
|
|
if ((keyCode < 48 || keyCode > 57) && keyCode !== 46) {
|
||
|
|
// 46 is dot
|
||
|
|
$event.preventDefault();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
amount() {
|
||
|
|
if (this.amount < 1) {
|
||
|
|
this.amount = 5;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|