Lev
2 years ago
9 changed files with 186 additions and 13 deletions
@ -0,0 +1,75 @@
|
||||
<template> |
||||
<div class="center" v-if="result === null"> |
||||
<RotateSquare2 style="width: 5rem; height: 5rem; margin-top: 3rem;"/> |
||||
</div> |
||||
<GetDomainBtn v-else-if="result.canBuy()" |
||||
:domain="domain" :price="result.auction_price" |
||||
@click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/> |
||||
<!-- todo: differentiate between auction and buy --> |
||||
<GetDomainBtn v-else-if="result.canAuction()" |
||||
:domain="domain" :price="result.auction_price" |
||||
@click="$router.push({name: 'Checkout', params: result.getRouteParams()})"/> |
||||
<div v-else class="owned" @click="$router.push({name: 'Explore', params: {domain: domain}})"> |
||||
<p class="domain">{{ domain }}</p> |
||||
<p>is owned.</p> |
||||
<p>Click here to explore</p> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import RotateSquare2 from "./RotateSquare2.vue"; |
||||
import {get_domain_result} from "../result"; |
||||
import GetDomainBtn from "./GetDomainBtn.vue"; |
||||
|
||||
export default { |
||||
name: "DomainResult", |
||||
components: {GetDomainBtn, RotateSquare2}, |
||||
props: { |
||||
domain: { |
||||
type: String, |
||||
} |
||||
}, |
||||
data() { |
||||
return {result: null} |
||||
}, |
||||
mounted() { |
||||
this.get_result(); |
||||
}, |
||||
methods: { |
||||
async get_result() { |
||||
this.result = await get_domain_result(this.domain); |
||||
} |
||||
}, |
||||
watch: { |
||||
domain: function () { |
||||
this.result = null; |
||||
this.get_result(); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
.domain { |
||||
font-family: 'Inconsolata', monospace; |
||||
font-weight: bold; |
||||
font-size: 2.5rem; |
||||
} |
||||
|
||||
@media only screen and (max-width: 800px) { |
||||
.domain { |
||||
font-size: 1.7rem; |
||||
} |
||||
} |
||||
|
||||
.owned { |
||||
border-radius: 1rem; |
||||
background-color: #363e5e; |
||||
color: white; |
||||
font-size: 1.5rem; |
||||
text-align: center; |
||||
padding: 2rem; |
||||
cursor: pointer; |
||||
} |
||||
</style> |
@ -0,0 +1,29 @@
|
||||
<template> |
||||
<DarkLayout> |
||||
<!-- todo: button to go back to Get --> |
||||
<div class="to-buy">To buy</div> |
||||
<DomainBar :zone="'.' + zone" :value="domain" :has_button="false" :editable="false"/> |
||||
|
||||
</DarkLayout> |
||||
</template> |
||||
|
||||
<script> |
||||
import DarkLayout from "../components/DarkLayout.vue"; |
||||
import DomainBar from "../components/DomainBar.vue"; |
||||
export default { |
||||
name: "Checkout", |
||||
components: {DomainBar, DarkLayout}, |
||||
props: { |
||||
domain: { |
||||
type: String, |
||||
}, |
||||
zone: { |
||||
type: String, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
@ -0,0 +1,31 @@
|
||||
<template> |
||||
<DarkLayout> |
||||
<DomainBar :value="core_domain" :zone="'.' + zone" :has_button="false" :editable="false"/> |
||||
</DarkLayout> |
||||
</template> |
||||
|
||||
<script> |
||||
import DarkLayout from "../components/DarkLayout.vue"; |
||||
import DomainBar from "../components/DomainBar.vue"; |
||||
export default { |
||||
name: "Explore", |
||||
components: {DomainBar, DarkLayout}, |
||||
props: { |
||||
domain: { |
||||
type: String, |
||||
} |
||||
}, |
||||
computed: { |
||||
core_domain() { |
||||
return this.domain.split('.')[0]; |
||||
}, |
||||
zone() { |
||||
return this.domain.split('.').slice(1).join('.'); |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
Loading…
Reference in new issue