|
|
@@ -1,5 +1,6 @@
|
|
|
<script setup lang="ts">
|
|
|
import { useQrCodePopup } from '~/composables/useQrCodePopup'
|
|
|
+import QrcodeVue from 'qrcode.vue'
|
|
|
|
|
|
const {
|
|
|
state,
|
|
|
@@ -166,9 +167,14 @@ const handleAmountInput = (event: Event) => {
|
|
|
<!-- QR container (placeholder) -->
|
|
|
<div class="qr-popup__qr-wrapper">
|
|
|
<div class="qr-popup__qr-card">
|
|
|
- <div class="qr-popup__qr-inner">
|
|
|
- <!-- QR code placeholder area, you can replace with real QR component -->
|
|
|
- </div>
|
|
|
+ <qrcode-vue
|
|
|
+ :value="`testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest`"
|
|
|
+ :size="145"
|
|
|
+ :gradient="true"
|
|
|
+ :gradient-start-color="`#4ED2FF`"
|
|
|
+ :gradient-end-color="`#B1EF5D`"
|
|
|
+ :image-settings="{ src: 'logo.png', height: 24, width: 24, excavate: true }"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -327,15 +333,6 @@ const handleAmountInput = (event: Event) => {
|
|
|
justify-content: center;
|
|
|
}
|
|
|
|
|
|
- &__qr-inner {
|
|
|
- width: 145px;
|
|
|
- height: 145px;
|
|
|
- border-radius: 12px;
|
|
|
- border: 6px solid #ffffff;
|
|
|
- background-color: #f1f2f5;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
&__price-row {
|
|
|
display: flex;
|
|
|
align-items: center;
|
