khnffz

Campaign Show vue

Oct 16th, 2021
981
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2.     <div class="pb-20 pt-20">
  3.         <div class="container mx-auto grid grid-cols-1 p-3 sm:w-full md:w-5/12">
  4.  
  5.             <div class="bg-white rounded-md shadow-md p-3">
  6.                 <img class="rounded-md w-full" :src="campaign.image">
  7.  
  8.                 <div class="mt-5">
  9.                     <p class="text-lg font-semibold">
  10.                         {{ campaign.title }}
  11.                     </p>
  12.                 </div>
  13.  
  14.                 <div v-if="sumDonation.length > 0">
  15.                     <div v-for="donation in sumDonation" :key="donation">
  16.  
  17.                         <p class="mt-4 text-base text-gray-500">
  18.                             <span class="font-bold text-blue-400">Rp. {{ formatPrice(donation.total) }} </span>
  19.                             terkumpul dari
  20.                             <span class="font-bold">Rp. {{ formatPrice(campaign.target_donation) }}</span>
  21.                         </p>
  22.  
  23.                         <div class="relative pt-1 mt-2">
  24.                             <div class="overflow-hidden h-2 mb-4 text-base flex rounded bg-blue-200">
  25.                                 <div :style="{width: percentage(donation.total, campaign.target_donation) + '%'}"
  26.                                     class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500">
  27.                                 </div>
  28.                             </div>
  29.                         </div>
  30.  
  31.                     </div>
  32.                 </div>
  33.                 <div v-else>
  34.  
  35.                     <p class="mt-4 text-base text-gray-500">
  36.                         <span class="font-bold text-blue-400">Rp. 0 </span> terkumpul dari
  37.                         <span class="font-bold">Rp. {{ formatPrice(campaign.target_donation) }}</span>
  38.                     </p>
  39.  
  40.                     <div class="relative pt-1 mt-2">
  41.                         <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
  42.                             <div :style="{width: percentage(0, campaign.target_donation) + '%'}"
  43.                                 class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-500">
  44.                             </div>
  45.                         </div>
  46.                     </div>
  47.  
  48.                 </div>
  49.  
  50.                 <div class="mt-3">
  51.                     <span class="font-bold">{{ donations.length }}</span> Donasi
  52.                     <span class="float-right"> <strong>{{ countDay(campaign.max_date) }}</strong> hari lagi</span>
  53.                 </div>
  54.  
  55.                 <div v-if="maxDate(campaign.max_date) == true">
  56.                     <div class="mt-5">
  57.                         <button
  58.                             class="bg-yellow-500 py-3 rounded-md shadow-md text-xl w-full uppercase font-bold focus:outline-none opacity-50 cursor-not-allowed">Donasi Ditutup!</button>
  59.                     </div>
  60.                 </div>
  61.                 <div v-else>
  62.                     <div class="mt-5">
  63.                         <router-link :to="{name: 'donation.create', params:{slug: campaign.slug}}">
  64.                             <button
  65.                                 class="bg-yellow-500 py-3 rounded-md shadow-md text-xl w-full uppercase font-bold focus:outline-none focus:bg-yellow-600">Donasi
  66.                                 Sekarang!</button>
  67.                         </router-link>
  68.                     </div>
  69.                 </div>
  70.  
  71.             </div>
  72.  
  73.         </div>
  74.  
  75.         <div class="container mx-auto grid grid-cols-1 p-3 sm:w-full md:w-5/12">
  76.  
  77.             <div class="bg-white rounded-md shadow-md p-3">
  78.                 <div class="text-lg font-semibold">
  79.                     Penggalang Dana
  80.                 </div>
  81.                 <div class="border-2 border-gray-200 mt-3 mb-2"></div>
  82.  
  83.                 <div class="bg-gray-200 p-3 rounded shadow-md mb-3">
  84.  
  85.                     <div class="grid grid-cols-10 gap-4">
  86.                         <div class="col-span-2">
  87.                             <img :src="user.avatar" class="w-15 h-15 rounded-full shadow">
  88.                         </div>
  89.                         <div class="col-span-8 text-lg font-bold mt-6">
  90.                             {{ user.name }}
  91.                         </div>
  92.                     </div>
  93.                 </div>
  94.  
  95.             </div>
  96.  
  97.         </div>
  98.  
  99.         <div class="container mx-auto grid grid-cols-1 p-3 sm:w-full md:w-5/12">
  100.  
  101.             <div class="bg-white rounded-md shadow-md p-3">
  102.                 <div class="text-lg font-semibold">
  103.                     Cerita
  104.                 </div>
  105.                 <div class="border-2 border-gray-200 mt-3 mb-2"></div>
  106.                 <div v-html="campaign.description"></div>
  107.             </div>
  108.  
  109.         </div>
  110.  
  111.         <div class="container mx-auto grid grid-cols-1 p-3 sm:w-full md:w-5/12">
  112.  
  113.             <div class="bg-white rounded-md shadow-md p-3">
  114.                 <div class="text-lg font-semibold">
  115.                     Donasi ({{ donations.length }})
  116.                 </div>
  117.                 <div class="border-2 border-gray-200 mt-3 mb-2"></div>
  118.  
  119.                 <div v-for="donation in donations" :key="donation.id" class="bg-gray-200 p-3 rounded shadow-md mb-3">
  120.  
  121.                     <div class="grid grid-cols-10 gap-4">
  122.  
  123.                         <div class="col-span-1">
  124.                             <img :src="donation.donatur.avatar" class="w-15 h-15 rounded-full">
  125.                         </div>
  126.                         <div class="col-span-9 mt-1">
  127.                             <div class="text-base font-bold">
  128.                                 {{ donation.donatur.name }}
  129.                             </div>
  130.                             <div class="text-sm mt-2 text-gray-500">
  131.                                 Berdonasi sebesar <span class="font-bold">Rp. {{ formatPrice(donation.amount) }}</span>
  132.                             </div>
  133.                         </div>
  134.  
  135.                     </div>
  136.  
  137.                     <div class="grid grid-cols-1 gap-4 mt-3">
  138.                         <div class="text-gray-600 text-sm">
  139.                             {{ donation.pray }}
  140.                         </div>
  141.                         <div class="text-gray-500 text-sm italic text-right">
  142.                             {{ donation.created_at }}
  143.                         </div>
  144.                     </div>
  145.  
  146.                 </div>
  147.  
  148.             </div>
  149.  
  150.         </div>
  151.  
  152.     </div>
  153. </template>
  154.  
  155.  
  156. <script>
  157.  
  158.     //hook vue
  159.     import { computed, onMounted } from 'vue' // computed dan onMounted
  160.    
  161.     //hook vuex
  162.     import { useStore } from 'vuex'
  163.  
  164.     //hook vue router
  165.     import { useRoute } from 'vue-router'
  166.  
  167.     export default {
  168.  
  169.         setup() {
  170.  
  171.             //vue route
  172.             const route = useRoute()
  173.  
  174.             //store vuex
  175.             const store = useStore()
  176.  
  177.             //onMounted akan menjalankan action "getDetailCampaign" di module "campaign"
  178.             onMounted(() => {
  179.                 store.dispatch('campaign/getDetailCampaign', route.params.slug)
  180.             })
  181.  
  182.             //digunakan untuk mendapatkan data detail campaign dari state "campaign" di module "campaign" Vuex
  183.             const campaign = computed(() => {
  184.                 return store.state.campaign.campaign
  185.             })
  186.  
  187.             //digunakan untuk mendapatkan data detail user dari state "user" di module "campaign" Vuex
  188.             const user = computed(() => {
  189.                 return store.state.campaign.user
  190.             })
  191.  
  192.             //digunakan untuk mendapatkan data jumlah donasi state "sumDonation" di module "campaign" Vuex
  193.             const sumDonation = computed(() => {
  194.                 return store.state.campaign.sumDonation
  195.             })
  196.  
  197.             //digunakan untuk mendapatkan data donation dari state "donations" di module "campaign" Vuex
  198.             const donations = computed(() => {
  199.                 return store.state.campaign.donations
  200.             })
  201.  
  202.             return {
  203.                 campaign,       // <-- campaign
  204.                 user,           // <-- user
  205.                 sumDonation,    // <-- sumDonation
  206.                 donations,      // <-- donations
  207.             }
  208.         }
  209.  
  210.     }
  211. </script>
  212.  
  213. <style>
  214.  
  215. </style>
RAW Paste Data