My SMM panel
 
 
 
 
 
 

65 lines
1.9 KiB

  1. <template>
  2. <div>
  3. <div class="services-menu">
  4. <button class="selected">Services</button>
  5. <button>Credits</button>
  6. <div class="menu-slider">
  7. <div></div></div>
  8. </div>
  9. <div class="services-legend"><h5>Name</h5>
  10. <h5>Credits per 1000</h5><h5>Min Qt.</h5><h5>Max Qt.</h5></div>
  11. <ServicePane :site="'youtube'" :services="services" @select="select"></ServicePane>
  12. <ServicePane :site="'instagram'" :services="services" @select="select"></ServicePane>
  13. <ServicePane :site="'twitter'" :services="services" @select="select"></ServicePane>
  14. <ServicePane :site="'tiktok'" :services="services" @select="select"></ServicePane>
  15. <div id="overlay" v-if="selected">
  16. <div class="overlay-item">
  17. <img @click="selected = null" class="cancel icon" src="../../images/cancel-icon2.svg" alt=""/>
  18. <img class="icon" src="../../images/youtube-icon.svg" alt="">
  19. <h3>Location Targeted Views</h3>
  20. <h4>Cost: 50</h4>
  21. <h4>Quantity</h4>
  22. <div><input required type="number"><span> / 10000</span></div>
  23. <h4>Location</h4>
  24. <div><select required id="country" name="">
  25. <option value="usa">USA</option>
  26. <option value="canada">Canada</option>
  27. <option value="uk">United Kingdom</option>
  28. <option value="germany">Germany</option>
  29. <option value="france">France</option>
  30. </select></div>
  31. <h4>URL</h4>
  32. <div><input required type="url" id="url"></div>
  33. <button>Submit</button>
  34. </div>
  35. </div>
  36. </div>
  37. </template>
  38. <script>
  39. import ServicePane from './service-pane.vue'
  40. function select(service) {
  41. this.selected = service
  42. }
  43. export default {
  44. data() {
  45. return {servicePane: true, services: null, selected: null }
  46. },
  47. components: {ServicePane},
  48. props: ['token'],
  49. created() {
  50. fetch("/panel/services", {
  51. method: 'GET',
  52. headers: {'Content-Type': 'application/json',
  53. 'Accept': 'application/json',
  54. 'X-XSRF-TOKEN': this.token}
  55. }).then(response => {
  56. response.json().then(data => {this.services = data})
  57. })
  58. },
  59. methods: {select}
  60. }
  61. </script>