114 lines
4.4 KiB
Vue
114 lines
4.4 KiB
Vue
<template>
|
|
<main>
|
|
<div class="section">
|
|
<div class="columns" v-if="loading">
|
|
<div class="column is-4">
|
|
<h1 class="title has-text-centered"><b-skeleton></b-skeleton></h1>
|
|
<div class="box">
|
|
<b-skeleton></b-skeleton>
|
|
</div>
|
|
</div>
|
|
<div class="column is-7">
|
|
<h1 class="title has-text-centered"><b-skeleton></b-skeleton></h1>
|
|
<div class="box has-text-right">
|
|
<b-skeleton></b-skeleton>
|
|
<b-skeleton></b-skeleton>
|
|
<b-skeleton></b-skeleton>
|
|
</div>
|
|
<h1 class="title has-text-centered"><b-skeleton></b-skeleton></h1>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
|
|
<div class="content">
|
|
<b-skeleton></b-skeleton>
|
|
<b-skeleton></b-skeleton>
|
|
<b-skeleton></b-skeleton>
|
|
<b-skeleton></b-skeleton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="columns" v-if="!loading">
|
|
<div class="column is-4 has-text-centered">
|
|
<h1 class="title has-text-centered">{{item.name}}</h1>
|
|
<div class="box">
|
|
<img width=50% :src="'https://cdn.kaverti.com/marketplace/avatars/' + item.previewFile + '.png'">
|
|
</div>
|
|
<b-button class="is-info" v-if="!item.saleEnabled && !purchased">Buy now</b-button>
|
|
<b-button class="is-success" v-if="item.saleEnabled && !purchased">Buy now for discounted price</b-button>
|
|
<b-button disabled v-if="purchased">You own this item!</b-button>
|
|
</div>
|
|
<div class="column is-7">
|
|
<h1 class="title has-text-centered">{{$t('marketplaceItem.moreInfo')}}</h1>
|
|
<div class="box has-text-right">
|
|
<b-button class="is-info" v-if="!item.saleEnabled && !purchased">Buy now</b-button>
|
|
<b-button class="is-success" v-if="item.saleEnabled && !purchased">Buy now for discounted price</b-button>
|
|
<b-button disabled v-if="purchased">You own this item!</b-button>
|
|
<hr class="solid">
|
|
<p v-if="item.saleEnabled">{{$t('marketplaceItem.price')}}: {{item.salePrice}} Koins</p>
|
|
<p v-if="item.saleEnabled">{{$t('marketplaceItem.originalPrice')}}: {{item.price}} Koins</p>
|
|
<p v-if="!item.saleEnabled">{{$t('marketplaceItem.price')}}: {{item.price}} Koins</p>
|
|
<p>Uploaded at: {{item.createdAt | formatDate()}}</p>
|
|
</div>
|
|
<h1 class="title has-text-centered">{{$t('marketplaceItem.creator')}}</h1>
|
|
<div class="card">
|
|
<div class="card-content">
|
|
<div class="media">
|
|
<div class="media-left">
|
|
<figure class="image is-48x48">
|
|
<img :src="'https://cdn.kaverti.com/user/avatars/headshot/default.png'" alt="Avatar Image">
|
|
</figure>
|
|
</div>
|
|
<div class="media-content">
|
|
<router-link :to="'/u/' + item.User.username" class="title">{{item.User.username}}</router-link>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content" v-if="item.User.description">
|
|
{{item.User.description}}
|
|
</div>
|
|
<div class="content" v-if="!item.User.description">
|
|
{{$t('user.defaultDesc')}} {{item.User.username}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
import AjaxErrorHandler from '.././assets/js/errorHandler'
|
|
export default {
|
|
name: 'MarketplaceItem',
|
|
data() {
|
|
return {
|
|
modifyUserModal: true,
|
|
loading: true,
|
|
item: {
|
|
name: "Loading",
|
|
description: "Loading",
|
|
price: 0,
|
|
previewFile: 'loading',
|
|
User: {
|
|
username: 'Loading'
|
|
},
|
|
createdAt: "2020-01-01T00:00:00.000Z"
|
|
},
|
|
purchased: false
|
|
}
|
|
},
|
|
mounted() {
|
|
this.axios
|
|
.get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `marketplace/view/${this.$route.params.id}`)
|
|
.then(res => this.item = res.data, this.loading = false)
|
|
.catch((e) => {
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
this.axios
|
|
.get(process.env.VUE_APP_API_ENDPOINT + process.env.VUE_APP_API_VERSION + `/` + `marketplace/check/${this.$route.params.id}`)
|
|
.then(res => this.purchased = res.data.purchased)
|
|
}
|
|
}
|
|
</script> |