dynamic images of products

src/models/products.ts

@@ -1,4 +1,5 @@
 import type {Wallet} from "@/models/wallet";
+import type { ProductFile } from '@/utils/file'
 
 export interface  Product {
     id: number
@@ -7,6 +8,7 @@ export interface  Product {
     amount: any
     metal_id: any
     file_id: any
+    file?: ProductFile | null
     unit: string
     active: boolean
     show: boolean

src/utils/file.ts

@@ -0,0 +1,17 @@
+import { baseURL } from '@/themeConfig'
+
+export interface ProductFile {
+  id?: number
+  url?: string | null
+  src?: string
+}
+
+export function getFileUrl(file?: ProductFile | null): string | null {
+  if (!file) return null
+  if (file.url) return file.url
+  if (!file.src) return null
+  if (/^https?:\/\//i.test(file.src)) return file.src
+  const base = baseURL.replace(/\/$/, '')
+  const path = file.src.replace(/^\//, '')
+  return `${base}/${path}`
+}

src/views/base/products/components/ProductItem.vue

@@ -2,13 +2,7 @@
 <div class="flex bg-white border-1 border-gray-200 rounded-lg"
      :class="props.ProductItem.show ? 'bg-white opacity-100' : 'bg-gray-200 opacity-50'">
   <div class="bg-gray-100 m-2 rounded-lg w-28 h-28 flex justify-center p-2">
-    <img v-if="props.ProductItem.group_type=='گوی'"  :src="goyImg">
-    <img v-if="props.ProductItem.group_type=='مکعب'" :src="mokaabImg">
-    <img v-if="props.ProductItem.group_type=='سکه'" :src="sekkeImg">
-    <img v-if="props.ProductItem.group_type=='مس'" :src="mesImg">
-    <img v-if="props.ProductItem.group_type=='نقره'" :src="noghrehImg">
-    <img v-if="props.ProductItem.group_type=='سکه پارسیان'" :src="parsianImg">
-    <img v-if="props.ProductItem.group_type=='طلا'|| props.ProductItem.group_type=='آبشده'|| props.ProductItem.group_type== null" :src="defaultImg">
+    <img :src="displayImage" class="object-contain w-full h-full" alt="">
   </div>
   <div class="m-1 flex flex-col gap-1 justify-center">
     <div class="text-base font-500">{{ props.ProductItem.title }}</div>
@@ -36,6 +30,7 @@ import parsianImg from "@/assets/img/parsianImg.svg"
 
 import type {Product} from "@/models/products";
 import {usePrice} from '@/utils/usePrice';
+import {getFileUrl} from '@/utils/file';
 import {computed, ref} from "vue";
 import { lastPrice } from '@/utils/price'
 import type { Price } from '@/models/home'
@@ -49,6 +44,21 @@ const amountProduct=computed(()=>{
   }else return `${props.ProductItem.amount}گرم`
 })
 const props = withDefaults(defineProps<Prop>(), {})
+
+const defaultImages: Record<string, string> = {
+  'گوی': goyImg,
+  'مکعب': mokaabImg,
+  'سکه': sekkeImg,
+  'مس': mesImg,
+  'نقره': noghrehImg,
+  'سکه پارسیان': parsianImg,
+}
+
+const displayImage = computed(() => {
+  const fileUrl = getFileUrl(props.ProductItem.file)
+  if (fileUrl) return fileUrl
+  return defaultImages[props.ProductItem.group_type] ?? defaultImg
+})
 // const typeOfProduct=(val:string)=>{
 //   if (val.includes('گوی'))
 //     return 'گوی'