From 459934e1baadab984c86162aab6f85869729b9bc Mon Sep 17 00:00:00 2001
From: Net <93821485+somnetsak123@users.noreply.github.com>
Date: Tue, 18 Jun 2024 13:59:46 +0700
Subject: [PATCH] =?UTF-8?q?fix:=20=E0=B9=81=E0=B8=81=E0=B9=89=20=E0=B8=81?=
 =?UTF-8?q?=E0=B8=B2=E0=B8=A3=E0=B8=94=E0=B8=B6=E0=B8=87=E0=B8=A3=E0=B8=B9?=
 =?UTF-8?q?=E0=B8=9B=E0=B8=A1=E0=B8=B2=E0=B9=81=E0=B8=AA=E0=B8=94=E0=B8=87?=
 =?UTF-8?q?=E0=B8=82=E0=B8=AD=E0=B8=87=20product?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../TotalProductCardComponent.vue             | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 768da600..df7526ad 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -3,6 +3,7 @@ import { ref } from 'vue';
 import AppBox from 'components/app/AppBox.vue';
 const addedProduct = ref<boolean>(false);
 
+const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
 defineProps<{
   title?: string;
   code?: string;
@@ -13,11 +14,16 @@ defineProps<{
   typeProduct?: string;
   price?: number;
   process?: number;
+  id?: string;
 }>();
 </script>
 
 <template>
-  <AppBox no-padding bordered style="box-shadow: var(--shadow-3)">
+  <AppBox
+    no-padding
+    bordered
+    style="box-shadow: var(--shadow-3); width: 236px; height: 286px"
+  >
     <div class="q-pa-sm">
       <div class="row flex justify-between text-bold">
         <div class="col-9">{{ title ?? 'title' }}</div>
@@ -93,14 +99,27 @@ defineProps<{
       >
         ฿ {{ price }}
       </div>
+
       <div
         class="flex justify-center rounded items-center q-my-md q-py-lg"
         :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
       >
         <q-img
-          :src="typeProduct === 'product' ? 'shop-image.png' : 'work-image.png'"
+          :src="`${baseUrl}/product/${id}/image`"
           style="height: 86px; max-width: 100px"
-        ></q-img>
+        >
+          <template #error>
+            <q-img
+              style="background: none; height: 86px; max-width: 100px"
+              :src="
+                typeProduct === 'product'
+                  ? '/shop-image.png'
+                  : '/work-image.png'
+              "
+              width="100%"
+            />
+          </template>
+        </q-img>
       </div>
       <div class="row justify-between items-center q-mb-xs">
         <div class="q-pr-md" v-if="typeProduct === 'work'">