<template> <q-page padding> <div class="q-pa-md"> </div> <div class="q-pa-md"> <q-banner dense inline-actions class="text-white bg-blue font-tajuk"> <div class="font-tajuk text-h4"> Fines </div> </q-banner> <q-input bottom-slots v-model="borrower_id" ref="borrower_id" :rules="[val => !!val || 'Field is required']" label="Student/Staff ID" dense> <template v-slot:hint> Borrower id </template> <template v-slot:append> <q-btn round dense flat icon="search" @click="findFines" /> </template> </q-input> <div v-if="total_fines>0" class="q-pa-md fit row wrap justify-center q-gutter-md"> <q-avatar size="70vw" color="green">{{ total_fines }}</q-avatar> </div> </div> </q-page> </template> <script> export default { data () { return { borrower_id: '2016607348', total_fines: .0 } }, methods: { findFines() { this.$refs.borrower_id.validate() if (this.$refs.borrower_id.hasError){ this.$q.notify({ message: 'Error. Please enter ID.', icon: 'error', color: 'red' }) } else { this.$q.loading.show({ delay: 10 // ms }) this.$axios.get('wils/denda',{ params: { borrower_id: this.borrower_id } }).then((response) => { console.log(response) this.total_fines = response.data.jumlah this.$q.notify({ message: 'Record was successfully retrieved.', icon: 'check', color: 'green' }) }).catch((err) => { console.log(err) this.$q.notify({ message: 'Error. please try again.', icon: 'error', color: 'red' }) }).finally(()=>{ this.$q.loading.hide() }) } } } } </script> <style> @import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300&display=swap'); .font-tajuk { font-family: 'Roboto Condensed', sans-serif; } .my-card { width: 100%; max-width: 300px; } </style>