home and uplaod view with pay management/wip admin token
Chakib Benziane
5 years ago
parent
6b74f86164
commit
a2ae0ce517
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="flex flex-column items-center justify-center" id="upload-view">
|
||||
<pay :uploadId="uploadId" :status="status" :invoice="invoice"></pay>
|
||||
<div class="hr"></div>
|
||||
<!--<upload></upload>-->
|
||||
<!--<download-link v-if="uploadId && paid" :id="uploadId"></download-link>-->
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script charset="utf-8">
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
|
||||
import Upload from './Upload.vue';
|
||||
import Pay from './Pay.vue';
|
||||
import DownloadLink from './DownloadLink.vue';
|
||||
|
||||
import GetWorker from './workerInterface.js';
|
||||
import Api from './api.js';
|
||||
|
||||
const Worker = GetWorker('main');
|
||||
|
||||
|
||||
export default {
|
||||
name: 'UploadView',
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
props: ['uploadId'],
|
||||
mounted (){
|
||||
let self = this;
|
||||
this.worker = Worker;
|
||||
|
||||
this.worker.listenTo('payment-received', (e)=>{
|
||||
console.log('pay received', e.data)
|
||||
this.$store.commit('setInvoice', e.data.invoice)
|
||||
this.$store.commit('setStatus', e.data.status)
|
||||
})
|
||||
|
||||
// First check the status to get the invoice
|
||||
Api.checkUploadStatus(this.uploadId)
|
||||
.then((data)=>{
|
||||
|
||||
// Set upload metadata
|
||||
this.$store.commit('setInvoice', data.invoice)
|
||||
this.$store.commit('setStatus', data.status)
|
||||
|
||||
// if paayment required
|
||||
if (data.status.pay_status === 'unpaid') {
|
||||
Api.pollUploadStatus(this.uploadId)
|
||||
.then((data)=>{
|
||||
console.log(data)
|
||||
this.$store.commit('setInvoice', data.invoice)
|
||||
this.$store.commit('setStatus', data.status)
|
||||
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
})
|
||||
.catch((err)=>{
|
||||
console.error(err)
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
status: state => state.upload.status,
|
||||
invoice: state => state.upload.invoice,
|
||||
}),
|
||||
},
|
||||
components: {
|
||||
Upload,
|
||||
Pay,
|
||||
DownloadLink,
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
</style>
|
||||
@ -0,0 +1,49 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
const upload ={
|
||||
state: {
|
||||
invoice: {},
|
||||
status: {},
|
||||
},
|
||||
getters: {
|
||||
paid(state) {
|
||||
return state.status.pay_status == 'paid'
|
||||
},
|
||||
expired (state){
|
||||
return state.status.pay_status == 'expired'
|
||||
},
|
||||
unpaid (state){
|
||||
return state.status.pay_status == 'waiting'
|
||||
}
|
||||
},
|
||||
mutations:{
|
||||
setInvoice (state, invoice) {
|
||||
state.invoice = invoice
|
||||
},
|
||||
setStatus (state, status) {
|
||||
state.status = status
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const base = {
|
||||
state: {
|
||||
uploadId: 0
|
||||
},
|
||||
mutations: {
|
||||
setUploadId (state, id) {
|
||||
state.uploadId = id
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new Vuex.Store({
|
||||
modules: {
|
||||
upload,
|
||||
base
|
||||
}
|
||||
})
|
||||
@ -1,10 +1,6 @@
|
||||
@import './variables.css';
|
||||
|
||||
body {
|
||||
font-family:
|
||||
}
|
||||
|
||||
body {
|
||||
/*font-size: var(--test);*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
:root{
|
||||
--test: 16px;
|
||||
--qrcode-width: 350px;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue