trendplays/resources/js/panel/services.vue

<template>
<div>
	<div class="services-menu">
	<button class="selected">Services</button>
	<button>Credits</button>
	<div class="menu-slider">
	<div></div></div>
	</div>
	<div class="services-legend"><h5>Name</h5>
<h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
<ServicePane :site="'youtube'" :services="services" @select="select"></ServicePane>
<ServicePane :site="'instagram'" :services="services" @select="select"></ServicePane>
<ServicePane :site="'twitter'" :services="services" @select="select"></ServicePane>
<ServicePane :site="'tiktok'" :services="services" @select="select"></ServicePane>
<div id="overlay" v-if="selected">
	<div class="overlay-item">
	<img @click="selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
		<img v-if="selected.site == 'youtube'" class="icon" src="../../images/youtube-icon.svg" alt="">
		<img v-if="selected.site == 'instagram'" class="icon" src="../../images/instagram-icon.svg" alt="">
		<img v-if="selected.site == 'twitter'" class="icon" src="../../images/twitter.svg" alt="">
		<img v-if="selected.site == 'tiktok'" class="icon" src="../../images/tik-tok.svg" alt="">
		<h3>{{selected.name}}</h3>
		<h4>Cost: {{cost.toLocaleString('en')}}</h4>
		<h4>Quantity</h4>
		<div><input required :min="selected.minimum" :max="selected.maximum" type="number" v-model="amount" id="selQty"><span> / {{selected.maximum.toLocaleString('en')}}</span></div> 
		<template v-if="selected.modifier == 'location'">
		<h4>Location</h4>
		<div><select required id="country" name="">
		<option value="usa">USA</option>
		<option value="canada">Canada</option>
		<option value="uk">United Kingdom</option>
		<option value="germany">Germany</option>
		<option value="france">France</option>
		</select></div> 
		</template>
		<h4>URL</h4>
		<div><input required type="url" id="url"></div> 
		<button @click="buyService" :disabled="paying">Submit<loading v-if="paying"></loading></button>
		<p></p>
	</div>
</div>
</div>
</template>

<script>
import ServicePane from './service-pane.vue'
import Loading from '../icons/loading.vue'

function select(service) {
	this.selected = service
}

function cost() {
	return Math.ceil(this.selected.price * this.amount / 1000)
}

function buyService() {
	this.paying = true
	return
}

export default {
	data() {
		return {servicePane: true, services: null, selected: null, amount: 0,
		paying: false }
	},
	components: {ServicePane, Loading},
	props: ['token'],
	created() {
		fetch("/panel/services", {
			method: 'GET',
			headers: {'Content-Type': 'application/json',
				'Accept': 'application/json',
				'X-XSRF-TOKEN': this.token}
		}).then(response => {
			response.json().then(data => {this.services = data})
		})
	},
	methods: {select, buyService},
	computed: {cost}
}
</script>