From d6ebe782f3e1da612e73042ef667f3a6adf572be Mon Sep 17 00:00:00 2001
From: safavimohadeseh78 <safavimohadeseh78@gmail.com>
Date: Mon, 18 May 2026 10:13:50 +0330
Subject: [PATCH] dynamic images of products

---
 components.d.ts                               |  3 +--
 src/models/products.ts                        |  2 ++
 src/utils/file.ts                             | 17 +++++++++++++
 .../base/products/components/ProductItem.vue  | 24 +++++++++++++------
 4 files changed, 37 insertions(+), 9 deletions(-)
 create mode 100644 src/utils/file.ts

diff --git a/components.d.ts b/components.d.ts
index e9be9b0..58439f6 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AButton: typeof import('ant-design-vue/es')['Button']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
     ADivider: typeof import('ant-design-vue/es')['Divider']
     AForm: typeof import('ant-design-vue/es')['Form']
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
@@ -21,7 +22,6 @@ declare module 'vue' {
     ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
     ASlider: typeof import('ant-design-vue/es')['Slider']
     ASpin: typeof import('ant-design-vue/es')['Spin']
-    ASwitch: typeof import('ant-design-vue/es')['Switch']
     ATag: typeof import('ant-design-vue/es')['Tag']
     ATextarea: typeof import('ant-design-vue/es')['Textarea']
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
@@ -67,6 +67,5 @@ declare module 'vue' {
     TransactionSkeleton: typeof import('./src/components/TransactionSkeleton.vue')['default']
     VanActionSheet: typeof import('vant/es')['ActionSheet']
     VanDialog: typeof import('vant/es')['Dialog']
-    VanField: typeof import('vant/es')['Field']
   }
 }
diff --git a/src/models/products.ts b/src/models/products.ts
index f94dcf2..95fca6c 100644
--- a/src/models/products.ts
+++ b/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
diff --git a/src/utils/file.ts b/src/utils/file.ts
new file mode 100644
index 0000000..aaeaffc
--- /dev/null
+++ b/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}`
+}
diff --git a/src/views/base/products/components/ProductItem.vue b/src/views/base/products/components/ProductItem.vue
index 13a2aee..5113a89 100644
--- a/src/views/base/products/components/ProductItem.vue
+++ b/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 'گوی'