refactor(03): customer fallback img

src/pages/03_customer-management/MainPage.vue

@@ -1164,7 +1164,7 @@ const emptyCreateDialog = ref(false);
                                     >
                                       <template #error>
                                         <q-img
-                                          :src="`${props.row.customerType === 'CORP' ? '/images/customer-CORP-avartar.png' : '/images/customer-PERS-avartar.png'}`"
+                                          :src="`${props.row.customerType === 'CORP' ? `/images/customer-CORP-avartar-${props.row.gender}.png` : `/images/customer-PERS-avartar-${props.row.gender}.png`}`"
                                         />
                                       </template>
                                     </q-img>
@@ -1735,11 +1735,16 @@ const emptyCreateDialog = ref(false);
         :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
         :img="
           customerFormState.customerImageUrl ||
-          `/images/customer-${customerFormData.customerType}-avartar.png`
+          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
+        "
+        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
+        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+        :icon="
+          customerFormData.customerType === 'PERS'
+            ? 'mdi-account-plus-outline'
+            : 'mdi-office-building-outline'
         "
-        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar.png`"
-        color="hsla(var(--pink-6-hsl)/1)"
-        bg-color="hsla(var(--pink-6-hsl)/0.15)"
         @view="customerFormState.imageDialog = true"
         @edit="dialogCustomerImageUpload?.browse()"
       />
@@ -2635,13 +2640,35 @@ const emptyCreateDialog = ref(false);
       <div class="full-height full-width" style="background: white">
         <div
           class="full-height full-width flex justify-center items-center"
-          :style="`background: ${customerFormData.customerType === 'CORP' ? '#5f1775' : '#347454'}`"
+          :style="`background: ${
+            customerFormData.gender
+              ? customerFormData.customerType === 'CORP'
+                ? '#5f1775'
+                : '#347454'
+              : `hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`
+          }`"
         >
           <q-img
-            :src="`/images/customer-${customerFormData.customerType}-avartar.png`"
+            :src="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
             fit="contain"
             style="height: 100%"
-          />
+          >
+            <template #error>
+              <span
+                class="full-width full-height column items-center justify-center"
+              >
+                <q-icon
+                  size="7vw"
+                  :name="
+                    customerFormData.customerType === 'PERS'
+                      ? 'mdi-account-plus-outline'
+                      : 'mdi-office-building-outline'
+                  "
+                  :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+                />
+              </span>
+            </template>
+          </q-img>
         </div>
       </div>
     </template>
@@ -2735,11 +2762,16 @@ const emptyCreateDialog = ref(false);
           :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
           :img="
             customerFormState.customerImageUrl ||
-            `/images/customer-${customerFormData.customerType}-avartar.png`
+            `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
+          "
+          :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
+          :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+          :icon="
+            customerFormData.customerType === 'PERS'
+              ? 'mdi-account-plus-outline'
+              : 'mdi-office-building-outline'
           "
-          :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar.png`"
-          color="hsla(var(--pink-6-hsl)/1)"
-          bg-color="hsla(var(--pink-6-hsl)/0.15)"
           @view="customerFormState.imageDialog = true"
           @edit="dialogCustomerImageUpload?.browse()"
         />