146 lines
3.1 KiB
Vue
146 lines
3.1 KiB
Vue
<template>
|
|
<div class="vipps-container" @click="openVipps">
|
|
<img src="/public/assets/images/vipps-logo.svg" class="vipps-logo" alt="vipps logo" />
|
|
<span>
|
|
kr.
|
|
<span class="big-money">{{ amount * 10 }},- (10,- pr. lodd)</span>
|
|
</span>
|
|
<ing src="/public/assets/images/vipps-qr.png" class="qr-logo" v-if="qrFailed" />
|
|
<canvas v-if="!qrFailed" ref="canvas" class="qr-logo"></canvas>
|
|
<span class="phone-number">977 40 427</span>
|
|
<span class="name">Kasper Rynning-Tønnesen</span>
|
|
<span class="mark-with">Merk med: Vinlodd/🍾</span>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import QRCode from "qrcode";
|
|
|
|
export default {
|
|
props: {
|
|
amount: {
|
|
type: Number,
|
|
default: 1
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
qrImage: null,
|
|
qrFailed: false
|
|
};
|
|
},
|
|
watch: {
|
|
amount: function(price) {
|
|
console.log("price is updated", price);
|
|
this.calculateQr();
|
|
}
|
|
},
|
|
mounted() {
|
|
this.calculateQr();
|
|
},
|
|
computed: {
|
|
price: function() {
|
|
return this.amount * 1000;
|
|
},
|
|
vippsUrlBasedOnUserAgent: function() {
|
|
if (navigator.userAgent.includes('iPhone')) {
|
|
return "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾&a=" + this.price
|
|
}
|
|
|
|
return vippsUrl = "https://qr.vipps.no/28/2/01/031/4797740427?v=1&m=Vinlotteri%20🍾"
|
|
}
|
|
},
|
|
methods: {
|
|
calculateQr: function() {
|
|
let canvas = this.$refs["canvas"];
|
|
QRCode.toCanvas(
|
|
canvas,
|
|
this.vippsUrlBasedOnUserAgent
|
|
{ errorCorrectionLevel: "Q" },
|
|
(err, url) => {
|
|
if (err != null) {
|
|
this.qrFailed = true;
|
|
}
|
|
}
|
|
);
|
|
|
|
this.drawLogoOverCanvas(canvas);
|
|
},
|
|
drawLogoOverCanvas(canvas) {
|
|
const context = canvas.getContext("2d");
|
|
const centerX = canvas.width / 2;
|
|
const centerY = canvas.height / 2;
|
|
context.font = "30px Arial";
|
|
context.textAlign = "center";
|
|
context.textBaseline = "middle";
|
|
context.arc(centerX, centerY, 25, 0, 2 * Math.PI, false);
|
|
context.fillStyle = "white";
|
|
context.fill();
|
|
context.lineWidth = 3;
|
|
context.strokeStyle = "#fe5b23";
|
|
context.stroke();
|
|
context.fillText("🍾", centerX, centerY);
|
|
},
|
|
openVipps: function() {
|
|
window.location.assign(this.vippsUrlBasedOnUserAgent);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import "../styles/global.scss";
|
|
@import "../styles/media-queries.scss";
|
|
.vipps-container {
|
|
font-family: Arial;
|
|
}
|
|
|
|
.vipps-container {
|
|
border-radius: 10px;
|
|
background-color: #ff5b23;
|
|
display: flex;
|
|
flex-direction: column;
|
|
color: white;
|
|
text-align: center;
|
|
padding: 25px;
|
|
width: 250px;
|
|
margin: auto 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.big-money {
|
|
font-size: 1.5rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.vipps-logo {
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.phone-number {
|
|
font-size: 1.75rem;
|
|
font-weight: bold;
|
|
padding-top: 20px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.qr-logo {
|
|
margin-top: 15px;
|
|
border-radius: 10px;
|
|
width: 220px;
|
|
margin: 15px auto auto auto;
|
|
}
|
|
|
|
.name,
|
|
.mark-with {
|
|
font-weight: 600;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
@include mobile {
|
|
.vipps-container {
|
|
margin-left: 0px;
|
|
}
|
|
}
|
|
</style>
|