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

add components FigureQrCode.vue for show qr code image with gradido coin

Browse Source
This commit is contained in:
ogerly 2022-03-24 09:11:26 +01:00
parent 6bd44f6eb9
commit 4e006f2d84
2 changed files with 32 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
frontend/src/components/GddSend/TransactionResultLink.vue
View File

@ -4,9 +4,17 @@
<b-col>
<b-card class="p-0 gradido-custom-background">
<div class="p-4">
<div class="h3 mb-5">{{ $t('gdd_per_link.created') }}</div>
<div class="h3">{{ $t('gdd_per_link.created') }}</div>
</div>
<b-row>
<b-col class="text-center">
<figure-qr-code :text="link" />
</b-col>
</b-row>
<div class="p-4">
<clipboard-copy :code="code" />
</div>
<p class="text-center mt-3">
<b-button variant="success" @click="$emit('on-reset')">{{ $t('form.close') }}</b-button>
</p>
@ -17,11 +25,13 @@
</template>
<script>
import ClipboardCopy from '../ClipboardCopy.vue'
import FigureQrCode from '../QrCode/FigureQrCode.vue'
export default {
name: 'TransactionResultLink',
components: {
ClipboardCopy,
FigureQrCode,
},
props: {
code: {
@ -29,5 +39,10 @@ export default {
required: true,
},
},
computed: {
link() {
return `${window.location.origin}/redeem/${this.code}`
},
},
}
</script>

61
frontend/src/components/TransactionLinks/TransactionLink.vue
View File

@ -22,6 +22,15 @@
<b-icon icon="clipboard"></b-icon>
</b-button>
<br />
<b-button
@click="$bvModal.show('modalPopover-' + id)"
class="p-2 mt-1"
size="sm"
variant="outline-success"
>
<b-img src="img/svg/qr-code.svg"></b-img>
</b-button>
<br />
<b-button
class="p-2 mt-1"
size="sm"
@ -31,23 +40,11 @@
>
<b-icon icon="trash"></b-icon>
</b-button>
<br />
<b-button
@click="$bvModal.show('modalPopover-' + id)"
class="p-2 mt-1"
size="sm"
variant="outline-success"
>
<b-img src="img/svg/qr-code.svg"></b-img>
</b-button>
</b-col>
</b-row>
<b-modal :id="'modalPopover-' + id" title="QR-Code" ok-only :hideHeaderClose="false">
<b-modal :id="'modalPopover-' + id" title="QR-Code" ok-only hide-header-close>
<div class="text-center">
<figure class="qrcode">
<vue-qrcode :value="link" type="image/png" class="qrbox"></vue-qrcode>
<img class="qrcode__image" src="img/gdd-coin.png" alt="GDD" />
</figure>
<figure-qr-code :text="link" />
<p>{{ link }}</p>
</div>
</b-modal>
@ -60,7 +57,7 @@ import AmountAndNameRow from '../TransactionRows/AmountAndNameRow'
import MemoRow from '../TransactionRows/MemoRow'
import DateRow from '../TransactionRows/DateRow'
import DecayRow from '../TransactionRows/DecayRow'
import VueQrcode from 'vue-qrcode'
import FigureQrCode from '@/components/QrCode/FigureQrCode.vue'
export default {
name: 'TransactionLink',
@ -70,7 +67,7 @@ export default {
MemoRow,
DateRow,
DecayRow,
VueQrcode,
FigureQrCode,
},
props: {
amount: { type: String, required: true },
@ -80,11 +77,6 @@ export default {
memo: { type: String, required: true },
validUntil: { type: String, required: true },
},
data() {
return {
link: `${window.location.origin}/redeem/${this.code}`,
}
},
methods: {
copy() {
navigator.clipboard
@ -120,30 +112,9 @@ export default {
decay() {
return `${this.amount - this.holdAvailableAmount}`
},
link() {
return `${window.location.origin}/redeem/${this.code}`
},
},
}
</script>
<style scoped>
.qrcode {
display: inline-block;
font-size: 0;
margin-bottom: 0;
position: relative;
}
.qrbox {
width: 400px;
}
.qrcode__image {
background-color: #fff;
border: 0.25rem solid #fff;
border-radius: 0.25rem;
box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.25);
height: 15%;
left: 50%;
overflow: hidden;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 15%;
}
</style>