You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
150 lines
3.6 KiB
Vue
150 lines
3.6 KiB
Vue
<template>
|
|
|
|
<div id="payment" class="flex flex-column">
|
|
<div class="header flex flex-column justify-between items-start mb1">
|
|
|
|
|
|
<div class="uid flex justify-between items-center w-100 f5">
|
|
<span class="b f5 mid-gray">ID: {{uploadId}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<img class="ba bw3 light-gray" v-if="unpaid" :src="payreqURI" />
|
|
|
|
|
|
<div v-if="showTimer" class="payreq-wrapper bg-washed-yellow flex justify-center">
|
|
<div class="payreq b f6 tc courier gray">
|
|
<p>
|
|
{{invoice.payreq}}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="status flex flex-row justify-between items-center">
|
|
<div class="paid">
|
|
<p class="light-red f5 mv2" v-if="unpaid">UNPAID</p>
|
|
<p class="yellow b f5 mv2" v-if="expired">EXPIRED</p>
|
|
<p class="green b f5 mv2" v-if="paid">PAID</p>
|
|
</div>
|
|
<timer v-if="showTimer" :expires="expires" :expired="expired"></timer>
|
|
<div class="paid-date f6 mid-gray" v-if="paid">on {{paidAt}}</div>
|
|
</div>
|
|
<span class="b f5 mid-gray">{{invoice.msatoshi / 1000}} Satoshi</span>
|
|
<canvas id="canvas" hidden>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script charset="utf-8">
|
|
import { mapState, mapGetters } from 'vuex'
|
|
import QRCode from 'qrcode';
|
|
import Timer from './Timer.vue';
|
|
|
|
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
payreqURI: "",
|
|
expired: false,
|
|
expires: 0,
|
|
}
|
|
},
|
|
props: ['invoice', 'uploadId', 'status'],
|
|
methods:{
|
|
makeLnQR(payreq) {
|
|
let canvas = this.$el.querySelector('#canvas')
|
|
|
|
QRCode.toDataURL(canvas, payreq.toUpperCase(), {
|
|
margin: 4,
|
|
width: 340,
|
|
errorCorrectionLevel: 'H',
|
|
type: 'png',
|
|
color: {
|
|
dark: '#ff725cff',
|
|
},
|
|
renderOpts:{
|
|
quality: 1,
|
|
}
|
|
})
|
|
.then(url => {
|
|
this.payreqURI = url;
|
|
})
|
|
.catch(err =>{
|
|
console.error(err);
|
|
})
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
...mapGetters([
|
|
'paid',
|
|
'unpaid'
|
|
]),
|
|
|
|
paidAt: function(){
|
|
return new Date(this.invoice.paid_at).toGMTString();
|
|
},
|
|
//paid: function() {
|
|
// return this.invoice.status == 'paid';
|
|
//},
|
|
|
|
//unpaid: function(){
|
|
// return this.invoice.status == 'unpaid';
|
|
//},
|
|
|
|
showTimer: function(){
|
|
return !this.paid
|
|
//if (this.invoice.status !== undefined) {
|
|
// return this.invoice.status != 'paid';
|
|
//}
|
|
|
|
//return false;
|
|
}
|
|
},
|
|
watch: {
|
|
invoice: function(val) {
|
|
if (val){
|
|
console.log("new invoice")
|
|
this.expires = 0;
|
|
this.expires = val.expires_at;
|
|
|
|
if ((new Date(val.expires_at*1000) - new Date() <= 0 ) &&
|
|
!this.paid) {
|
|
this.expired = true;
|
|
} else {
|
|
this.expired = false;
|
|
}
|
|
|
|
this.makeLnQR(val.payreq)
|
|
}
|
|
}
|
|
},
|
|
components:{
|
|
Timer,
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
<style>
|
|
img {
|
|
width: var(--qrcode-width);
|
|
height: var(--qrcode-width);
|
|
}
|
|
|
|
.status {
|
|
min-width: var(--qrcode-width);
|
|
}
|
|
|
|
.payreq {
|
|
word-wrap: break-word;
|
|
max-width: var(--qrcode-width);
|
|
}
|
|
</style>
|