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"> <component name="ChangeListManager">
<list default="true" id="ddb8afd5-d3ba-47b1-b6d0-227403f1abf7" name="Changes" comment="Awesome QR at checkout"> <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$/.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" /> <change beforePath="$PROJECT_DIR$/src/views/Checkout.vue" beforeDir="false" afterPath="$PROJECT_DIR$/src/views/Checkout.vue" afterDir="false" />
</list> </list>
<option name="SHOW_DIALOG" value="false" /> <option name="SHOW_DIALOG" value="false" />
@ -75,7 +71,7 @@
<workItem from="1670927344373" duration="29000" /> <workItem from="1670927344373" duration="29000" />
<workItem from="1670927391338" duration="2277000" /> <workItem from="1670927391338" duration="2277000" />
<workItem from="1671024025708" duration="19806000" /> <workItem from="1671024025708" duration="19806000" />
<workItem from="1671204365793" duration="19127000" /> <workItem from="1671204365793" duration="19693000" />
</task> </task>
<task id="LOCAL-00001" summary="Wrote the landing"> <task id="LOCAL-00001" summary="Wrote the landing">
<created>1670844191163</created> <created>1670844191163</created>
@ -154,7 +150,14 @@
<option name="project" value="LOCAL" /> <option name="project" value="LOCAL" />
<updated>1671240411281</updated> <updated>1671240411281</updated>
</task> </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 /> <servers />
</component> </component>
<component name="TypeScriptGeneratedFilesManager"> <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> <div class="text">To buy</div>
<DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/> <DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/>
<div class="text">Scan this:</div> <div class="text">Scan this:</div>
<div class="qr"> <div class="qr" v-if="loaded">
<div ref="qrCode"></div> <div ref="qrCode"></div>
</div> </div>
<div v-else class="center">
<RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 5rem"/>
</div>
</DarkLayout> </DarkLayout>
</template> </template>
@ -16,10 +19,11 @@ import DarkLayout from "../components/DarkLayout.vue";
import DomainBar from "../components/DomainBar.vue"; import DomainBar from "../components/DomainBar.vue";
import {get_domain_result, get_ton_link} from "../result"; import {get_domain_result, get_ton_link} from "../result";
import QRCodeStyling from 'qr-code-styling'; import QRCodeStyling from 'qr-code-styling';
import RotateSquare2 from "../components/RotateSquare2.vue";
export default { export default {
name: "Checkout", name: "Checkout",
components: {DomainBar, DarkLayout}, components: {RotateSquare2, DomainBar, DarkLayout},
props: { props: {
domain: { domain: {
type: String, type: String,
@ -50,47 +54,47 @@ export default {
) )
}, },
computed: { computed: {
loaded () { loaded() {
return this.result !== null && this.ton_link !== null; return this.result !== null && this.ton_link !== null;
}, },
options () { options() {
if (!this.loaded) { if (!this.loaded) {
return null; return null;
} }
return { return {
width: 300, width: 300,
height: 300, height: 300,
type: 'svg', type: 'svg',
data: this.ton_link.getLink(), data: this.ton_link.getLink(),
image: '/favicon.png', image: '/logo_mono.png',
margin: 10, margin: 10,
qrOptions: { qrOptions: {
typeNumber: 0, typeNumber: 0,
mode: 'Byte', mode: 'Byte',
errorCorrectionLevel: 'Q' errorCorrectionLevel: 'Q'
}, },
imageOptions: { imageOptions: {
hideBackgroundDots: true, hideBackgroundDots: true,
imageSize: 0.4, imageSize: 0.4,
margin: 5, margin: 5,
crossOrigin: 'anonymous', crossOrigin: 'anonymous',
}, },
dotsOptions: { dotsOptions: {
color: '#282e46', color: '#282e46',
type: 'rounded' type: 'rounded'
}, },
backgroundOptions: { backgroundOptions: {
color: '#ffffff', color: '#ffffff',
}, },
cornersSquareOptions: { cornersSquareOptions: {
color: '#282e46', color: '#282e46',
type: 'extra-rounded', type: 'extra-rounded',
}, },
cornersDotOptions: { cornersDotOptions: {
color: '#282e46', color: '#282e46',
type: 'dot', type: 'dot',
} }
}; };
} }
} }
} }

Loading…
Cancel
Save