Cards

src/components/ui/Card.vue

@@ -10,7 +10,12 @@
         <p v-if="discount" class="tag discount">-{{ discount }}%</p>
       </div>
 
-      <img class="card-img" :src="imgSrc" :alt="alt" @load="handleLoad" />
+      <img
+        class="card-img"
+        :src="imgSrc ? imgSrc : '../../assets/empty-img.png'"
+        :alt="alt"
+        @load="handleLoad"
+      />
 
       <div class="head-hovered">
         <IconEyes />
@@ -23,7 +28,7 @@
 
       <div class="card-values">
         <p class="price" v-if="productValue">{{ productValue }}€</p>
-        <p class="price offer tachado" v-if="valueWithDiscount">
+        <p class="price offer tachado" v-if="+valueWithDiscount > 0">
           {{ valueWithDiscount() }}€
         </p>
       </div>
@@ -32,7 +37,7 @@
 </template>
 
 <script lang="ts">
-import { PropType, defineComponent } from 'vue';
+import { PropType, defineComponent, ref } from 'vue';
 import IconEyes from '../icons/IconEyes.vue';
 
 type Size = 'sm-card' | 'md-card' | 'lg-card';
@@ -78,15 +83,17 @@ export default defineComponent({
     },
   },
   setup({ productValue, discount }) {
+    const loadingImg = ref(true);
     const handleLoad = () => {
-      // console.log('Carregou');
+      loadingImg.value = false;
     };
 
     const valueWithDiscount = () => {
+      const productWithouCaracters = ~~productValue.replaceAll('€', '');
+
       if (discount) {
-        const finalValue = (+discount / 100) * +productValue;
-        // console.log(finalValue);
-        return finalValue;
+        const finalValue = (+discount / 100) * productWithouCaracters;
+        return finalValue.toFixed(2);
       }
     };
 
@@ -179,6 +186,7 @@ export default defineComponent({
     & .card-img {
       width: 100%;
       height: 100%;
+
       object-fit: cover;
     }
 

src/components/ui/Chat.vue

@@ -0,0 +1,21 @@
+<template>
+  <q-btn flat @click="handleClick"><IconChat /></q-btn>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue';
+import IconChat from '../icons/IconChat.vue';
+
+export default defineComponent({
+  name: 'chat-component',
+  components: { IconChat },
+  setup() {
+    const handleClick = () => {
+      console.log('click');
+    };
+    return { handleClick };
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>