IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity
gradido/frontend/src/views/KontoOverview/GddSend.vue
ogerly 1c7a689621 fix lint
2021-03-30 15:13:47 +02:00

286 lines
9.5 KiB
Vue
Raw Blame History

<template>
<div>
<b-row v-show="row_form">
<b-col xl="12" md="12">
<b-alert variant="warning" show dismissible>
<strong>Achtung!</strong>
Bitte überprüfe alle deine Eingaben sehr genau. Du bist alleine Verantwortlich für deine
Entscheidungen. Versendete Gradidos können nicht wieder zurück geholt werden.
</b-alert>
<b-card class="p-0 p-md-3" style="background-color: #ebebeba3 !important">
<b-alert show variant="secondary">
<span class="alert-text">
<strong>QR Code Scanner</strong>
- Scanne den QR Code deines Partners
</span>
<b-col v-show="!scan" lg="12" class="text-right">
<img src="/img/icons/gradido/qr-scan-pure.png" height="50" @click="scan = true" />
</b-col>
<b-alert v-show="scan" show variant="warning">
<span class="alert-text" @click="scan = false"><strong>schließen!</strong></span>
</b-alert>
<div v-if="scan">
<!-- <b-row>
<qrcode-capture @detect="onDetect" capture="user" ></qrcode-capture>
</b-row> -->
<qrcode-stream class="mt-3" @decode="onDecode" @detect="onDetect"></qrcode-stream>
<b-container>
<b-row>
<b-col lg="8">
<b-alert show variant="secondary">
<span class="alert-text">
<strong>QR Code Scanner</strong>
- Scanne den QR Code deines Partners
</span>
</b-alert>
</b-col>
</b-row>
</b-container>
</div>
</b-alert>
<validation-observer v-slot="{ handleSubmit }" ref="formValidator">
<b-form
role="form"
@submit.prevent="handleSubmit(onSubmit)"
@reset="onReset"
v-if="show"
>
<br />
<div>
<qrcode-drop-zone id="input-0" v-model="form.img"></qrcode-drop-zone>
</div>
<br />
<div>
<b-col class="text-left p-3 p-sm-1">Empfänger</b-col>
<b-input-group
id="input-group-1"
label="Empfänger:"
label-for="input-1"
description="We'll never share your email with anyone else."
size="lg"
class="mb-3"
>
<b-input-group-prepend class="p-3 d-none d-md-block">
<b-icon icon="envelope" class="display-3"></b-icon>
</b-input-group-prepend>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="E-Mail"
:rules="{ required: true, email: true }"
required
style="font-size: xx-large; padding-left: 20px"
></b-form-input>
</b-input-group>
</div>
<br />
<div>
<b-col class="text-left p-3 p-sm-1">Betrag</b-col>
<b-col v-if="$store.state.user.balance == form.amount" class="text-right">
<b-badge variant="primary">maximale anzahl GDD zum versenden erreicht!</b-badge>
</b-col>
<b-input-group
id="input-group-2"
label="Betrag:"
label-for="input-2"
size="lg"
class="mb-3"
>
<b-input-group-prepend class="p-2 d-none d-md-block">
<div class="h3 pt-3 pr-3">GDD</div>
</b-input-group-prepend>
<b-form-input
id="input-2"
v-model="form.amount"
type="number"
placeholder="0.01"
step="0.01"
min="0.01"
:max="$store.state.user.balance"
style="font-size: xx-large; padding-left: 20px"
></b-form-input>
</b-input-group>
<b-col class="text-left p-3 p-sm-1">Nachricht für den Empfänger</b-col>
<b-input-group>
<b-input-group-prepend class="p-3 d-none d-md-block">
<b-icon icon="chat-right-text" class="display-3"></b-icon>
</b-input-group-prepend>
<b-form-textarea
rows="3"
v-model="form.memo"
class="pl-3"
style="font-size: x-large"
></b-form-textarea>
</b-input-group>
</div>
<br />
<b-row>
<b-col>
<b-button type="reset" variant="secondary">
{{ $t('form.cancel') }}
</b-button>
</b-col>
<b-col class="text-right">
<b-button type="submit" variant="success">
{{ $t('form.send_now') }}
</b-button>
</b-col>
</b-row>
<br />
</b-form>
</validation-observer>
</b-card>
</b-col>
</b-row>
<b-row v-show="row_check">
<b-col>
<div class="display-4 p-4">Bestätige deine Zahlung. Prüfe bitte nochmal alle Daten!</div>
<b-list-group>
<b-list-group-item active>Meine Zahlung</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
{{ ajaxCreateData.email }}
<b-badge variant="primary" pill>Empfänger</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
{{ ajaxCreateData.amount }} GDD
<b-badge variant="primary" pill>Betrag</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
{{ ajaxCreateData.memo }}
<b-badge variant="primary" pill>Nachricht</b-badge>
</b-list-group-item>
<b-list-group-item class="d-flex justify-content-between align-items-center">
{{ $moment(ajaxCreateData.target_date).format('DD.MM.YYYY - HH:mm:ss') }}
<b-badge variant="primary" pill>Datum</b-badge>
</b-list-group-item>
</b-list-group>
<hr />
<b-row>
<b-col><b-button @click="onReset">abbrechen</b-button></b-col>
<b-col class="text-right">
<b-button variant="success" @click="sendTransaction">jetzt versenden</b-button>
</b-col>
</b-row>
</b-col>
</b-row>
<b-row v-show="row_thx">
<b-col>
<div class="display-1 p-4">
Danke
<hr />
Deine Zahlung wurde erfolgreich versendet.
</div>
<b-button variant="success" @click="onReset">schließen</b-button>
<hr />
</b-col>
</b-row>
</div>
</template>
<script>
import { QrcodeStream, QrcodeDropZone } from 'vue-qrcode-reader'
import { BIcon } from 'bootstrap-vue'
import communityAPI from '../../apis/communityAPI.js'
export default {
name: 'GddSent',
components: {
QrcodeStream,
QrcodeDropZone,
BIcon,
},
props: {
row_form: { type: Boolean, default: true },
row_check: { type: Boolean, default: false },
row_thx: { type: Boolean, default: false },
},
data() {
return {
scan: false,
show: true,
form: {
img: '',
email: '',
amount: '',
memo: '',
},
ajaxCreateData: {
email: '',
amount: 0,
target_date: '',
memo: '',
auto_sign: true,
},
send: false,
}
},
computed: {},
methods: {
async onDecode(decodedString) {
const arr = JSON.parse(decodedString)
this.form.email = arr[0].email
this.form.amount = arr[0].amount
this.scan = false
},
async onSubmit() {
//event.preventDefault()
this.ajaxCreateData.email = this.form.email
this.ajaxCreateData.amount = this.form.amount
this.ajaxCreateData.target_date = Date.now()
this.ajaxCreateData.memo = this.form.memo
this.$emit('change-rows', { row_form: false, row_check: true, row_thx: false })
},
async sendTransaction() {
this.ajaxCreateData.amount = this.ajaxCreateData.amount * 10000
const result = await communityAPI.send(
this.$store.state.session_id,
this.ajaxCreateData.email,
this.ajaxCreateData.amount,
this.ajaxCreateData.memo,
)
// console.log(result)
if (result.success) {
// console.log('send success')
this.$emit('change-rows', { row_form: false, row_check: false, row_thx: true })
} else {
// console.log('send error')
alert('error')
this.$emit('change-rows', { row_form: true, row_check: false, row_thx: false })
}
},
onReset(event) {
event.preventDefault()
this.form.email = ''
this.form.amount = ''
this.show = false
this.$nextTick(() => {
this.show = true
})
this.$emit('change-rows', { row_form: true, row_check: false, row_thx: false })
},
},
}
</script>
<style>
video {
max-height: 665px;
max-width: 665px;
}
</style>
Reference in New Issue View Git Blame Copy Permalink