Browse Source

Add (almost) monochrome logo + loading QR on checkout

vue
Lev 2 years ago
parent
commit
09b3a924a7
  1. 15
      .idea/workspace.xml
  2. BIN
      public/logo_mono.png
  3. 78
      src/views/Checkout.vue

15
.idea/workspace.xml

@ -3,10 +3,6 @@
<component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Awesome QR at checkout">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package-lock.json" beforeDir="false" afterPath="$PROJECT_DIR$/package-lock.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/components/ZonePricing.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ZonePricing.vue" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/result.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/result.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
@ -75,7 +71,7 @@
<workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="19806000" />
<workItem from="1671204365793" duration="19127000" />
<workItem from="1671204365793" duration="19693000" />
</task>
<task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created>
@ -154,7 +150,14 @@
<option name="project" value="LOCAL" />
<updated>1671240411281</updated>
</task>
<option name="localTasksCounter" value="12" />
<task id="LOCAL-00012" summary="Awesome QR at checkout">
<created>1671302241009</created>
<option name="number" value="00012" />
<option name="presentableId" value="LOCAL-00012" />
<option name="project" value="LOCAL" />
<updated>1671302241009</updated>
</task>
<option name="localTasksCounter" value="13" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">

BIN
public/logo_mono.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 154 KiB

78
src/views/Checkout.vue

@ -5,9 +5,12 @@
<div class="text">To buy</div>
<DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>
<div class="text">Scan this:</div>
<div class="qr">
<div class="qr" v-if="loaded">
<div ref="qrCode"></div>
</div>
<div v-else class="center">
<RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 5rem"/>
</div>
</DarkLayout>
</template>
@ -16,10 +19,11 @@ import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue";
import {get_domain_result, get_ton_link} from "../result";
import QRCodeStyling from 'qr-code-styling';
import RotateSquare2 from "../components/RotateSquare2.vue";
export default {
name: "Checkout",
components: {DomainBar, DarkLayout},
components: {RotateSquare2, DomainBar, DarkLayout},
props: {
domain: {
type: String,
@ -50,47 +54,47 @@ export default {
)
},
computed: {
loaded () {
loaded() {
return this.result !== null && this.ton_link !== null;
},
options () {
options() {
if (!this.loaded) {
return null;
}
return {
width: 300,
height: 300,
type: 'svg',
data: this.ton_link.getLink(),
image: '/favicon.png',
margin: 10,
qrOptions: {
typeNumber: 0,
mode: 'Byte',
errorCorrectionLevel: 'Q'
},
imageOptions: {
hideBackgroundDots: true,
imageSize: 0.4,
margin: 5,
crossOrigin: 'anonymous',
},
dotsOptions: {
color: '#282e46',
type: 'rounded'
},
backgroundOptions: {
color: '#ffffff',
},
cornersSquareOptions: {
color: '#282e46',
type: 'extra-rounded',
},
cornersDotOptions: {
color: '#282e46',
type: 'dot',
}
};
width: 300,
height: 300,
type: 'svg',
data: this.ton_link.getLink(),
image: '/logo_mono.png',
margin: 10,
qrOptions: {
typeNumber: 0,
mode: 'Byte',
errorCorrectionLevel: 'Q'
},
imageOptions: {
hideBackgroundDots: true,
imageSize: 0.4,
margin: 5,
crossOrigin: 'anonymous',
},
dotsOptions: {
color: '#282e46',
type: 'rounded'
},
backgroundOptions: {
color: '#ffffff',
},
cornersSquareOptions: {
color: '#282e46',
type: 'extra-rounded',
},
cornersDotOptions: {
color: '#282e46',
type: 'dot',
}
};
}
}
}

Loading…
Cancel
Save