chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: แก้ การดึงรูปมาแสดงของ product

Browse source
This commit is contained in:
Net 2024-06-18 13:59:46 +07:00
parent b4ee83272b
commit 459934e1ba
1 changed files with 22 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

25
src/components/04_product-service/TotalProductCardComponent.vue
View file

@ -3,6 +3,7 @@ import { ref } from 'vue';
import AppBox from 'components/app/AppBox.vue'; import AppBox from 'components/app/AppBox.vue';
const addedProduct = ref<boolean>(false); const addedProduct = ref<boolean>(false);
const baseUrl = ref<string>(import.meta.env.VITE_API_BASE_URL);
defineProps<{ defineProps<{
title?: string; title?: string;
code?: string; code?: string;
@ -13,11 +14,16 @@ defineProps<{
typeProduct?: string; typeProduct?: string;
price?: number; price?: number;
process?: number; process?: number;
id?: string;
}>(); }>();
</script> </script>
<template> <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="q-pa-sm">
<div class="row flex justify-between text-bold"> <div class="row flex justify-between text-bold">
<div class="col-9">{{ title ?? 'title' }}</div> <div class="col-9">{{ title ?? 'title' }}</div>
@ -93,14 +99,27 @@ defineProps<{
> >
฿ {{ price }} ฿ {{ price }}
</div> </div>
<div <div
class="flex justify-center rounded items-center q-my-md q-py-lg" class="flex justify-center rounded items-center q-my-md q-py-lg"
:style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`" :style="`background-color: var(${typeProduct === 'product' ? '--green-0' : '--orange-0'})`"
> >
<q-img <q-img
:src="typeProduct === 'product' ? 'shop-image.png' : 'work-image.png'" :src="`${baseUrl}/product/${id}/image`"
style="height: 86px; max-width: 100px" 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>
<div class="row justify-between items-center q-mb-xs"> <div class="row justify-between items-center q-mb-xs">
<div class="q-pr-md" v-if="typeProduct === 'work'"> <div class="q-pr-md" v-if="typeProduct === 'work'">