139 lines
4.8 KiB
Vue
139 lines
4.8 KiB
Vue
<template>
|
|
<main class="columns">
|
|
<div class="column is-5">
|
|
<h1 class="title" v-if="createType === 0">
|
|
Uploading a hat
|
|
</h1>
|
|
<p v-if="createType === 0">Please contact Troplo if you do not have the required assets for uploading this item type.</p>
|
|
Name:
|
|
<b-input :value="'debug'"
|
|
v-model="item.name"
|
|
maxlength="30">
|
|
</b-input>
|
|
Description:
|
|
<b-input v-model="item.description" maxlength="150" type="textarea">
|
|
|
|
</b-input>
|
|
Options:<br>
|
|
<b-switch v-model="item.limited" v-if="$store.state.user.admin">
|
|
Limited Edition
|
|
</b-switch>
|
|
<div v-if="item.limited && $store.state.user.admin">
|
|
Quantity allowed (0 for unlimited):
|
|
<b-numberinput v-model="item.quantity"></b-numberinput>
|
|
</div>
|
|
<br>
|
|
<b-switch v-model="item.onSale">
|
|
On sale
|
|
</b-switch>
|
|
<br>
|
|
<div v-if="item.onSale">
|
|
On sale price:
|
|
<b-input v-model="item.onSalePrice" v-if="item.onSale"></b-input>
|
|
<br>
|
|
</div>
|
|
<br>
|
|
Price:
|
|
<b-input v-model="item.price"></b-input>
|
|
<br>
|
|
<b-field class="file">
|
|
<b-upload v-model="item.file" expanded v-if="createType === 0">
|
|
<a class="button is-primary is-fullwidth">
|
|
<b-icon icon="upload"></b-icon>
|
|
<span>{{ item.file.name || "Upload .PNG of modified template"}}</span>
|
|
</a>
|
|
</b-upload>
|
|
</b-field>
|
|
<b-field class="file">
|
|
<b-upload v-model="item.fileObj" expanded v-if="createType === 0">
|
|
<a class="button is-primary is-fullwidth">
|
|
<b-icon icon="upload"></b-icon>
|
|
<span>{{ item.fileObj.name || "Upload .OBJ of modified template"}}</span>
|
|
</a>
|
|
</b-upload>
|
|
</b-field>
|
|
<div class="buttons">
|
|
<b-button v-if="createType === 0" @click="submitItem" :loading="loading">Submit</b-button>
|
|
<b-button v-if="createType === 1" @click="submitItem" :loading="loading">Submit</b-button>
|
|
<b-button v-if="createType === 2" @click="submitItem" :loading="loading">Submit</b-button>
|
|
<b-button v-if="createType === 3" @click="submitItem" :loading="loading">Submit</b-button>
|
|
<b-button v-if="createType === 0" @click="previewItem" :loading="loadingPreview">Preview</b-button>
|
|
</div>
|
|
</div>
|
|
<div class="column is-5">
|
|
<h1 class="title">Preview Image</h1>
|
|
<img :src="'https://cdn.kaverti.com/marketplace/preview/' + preview + '.png'" v-if="preview">
|
|
<h1 class="subtitle" v-if="!preview">Press preview to preview the hat as if it were uploaded on the Marketplace.</h1>
|
|
<h1 class="subtitle">Please validate to make sure all information is correct, your item will automatically be approved.</h1>
|
|
</div>
|
|
</main>
|
|
</template>
|
|
<script>
|
|
|
|
import AjaxErrorHandler from ".././assets/js/errorHandler";
|
|
|
|
export default {
|
|
name: 'MarketplaceCreate',
|
|
data() {
|
|
return {
|
|
createType: 0,
|
|
stage: 1,
|
|
loading: false,
|
|
loadingPreview: false,
|
|
preview: '',
|
|
item: {
|
|
file: '',
|
|
fileObj: '',
|
|
files: [],
|
|
dropFiles: null,
|
|
name: 'Item',
|
|
limited: false,
|
|
onSale: false,
|
|
onSalePrice: 0,
|
|
quantity: 0,
|
|
price: 100,
|
|
description: ''
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
previewItem() {
|
|
this.loadingPreview = true
|
|
const data = new FormData();
|
|
|
|
data.append('image', this.item.file);
|
|
data.append('fileObj', this.item.fileObj);
|
|
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/preview/' + this.createType, data)
|
|
.then((res) => {
|
|
this.loadingPreview = false
|
|
this.preview = res.data.image
|
|
}).catch((e) => {
|
|
this.loadingPreview = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
},
|
|
submitItem() {
|
|
this.loading = true
|
|
const data = new FormData();
|
|
|
|
data.append('name', this.item.name);
|
|
data.append('price', this.item.price);
|
|
data.append('image', this.item.file);
|
|
data.append('fileObj', this.item.fileObj);
|
|
data.append('description', this.item.description);
|
|
data.append('onSale', this.item.onSale);
|
|
data.append('onSalePrice', this.item.onSalePrice);
|
|
data.append('limited', this.item.limited);
|
|
data.append('quantityAllowed', this.item.quantity);
|
|
this.axios.post(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/upload/' + this.createType, data)
|
|
.then((res) => {
|
|
this.loading = false
|
|
this.axios.put(process.env.VUE_APP_APIENDPOINT + process.env.VUE_APP_APIVERSION + '/' + 'marketplace/rerender/' + res.data.id)
|
|
}).catch((e) => {
|
|
this.loading = false
|
|
AjaxErrorHandler(this.$store)(e)
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script> |