Parcourir la source

订单详情中,商品没有图片设一个默认的图片

张田田 il y a 3 mois
Parent
commit
306f546a66
1 fichiers modifiés avec 32 ajouts et 2 suppressions
  1. 32 2
      src/service/SingleItemDetail.vue

+ 32 - 2
src/service/SingleItemDetail.vue

@@ -171,10 +171,13 @@ const sellTypeText: Record<string, string> = {
           </h3>
           <div class="package-items">
             <div v-for="(item, index) in mockPackageItems" :key="index" class="package-item">
-              <div class="package-item-image">
+              <div class="package-item-image" v-if="item.conditioningProgramPhoto">
                 <a-image v-if="item.conditioningProgramPhoto" :width="60" :height="60" style="border-radius: 4px;"
                   :src="item.conditioningProgramPhoto" class="item-img" />
               </div>
+              <div class="package-item-placeholder" v-else>
+                <text class="placeholder-icon">📦</text>
+              </div>
               <div class="package-item-details">
                 <div class="package-item-name">{{ item.conditioningProgramName }}</div>
                 <div class="package-item-spec">{{ item.convertDose }} {{ item.convertUnit }}</div>
@@ -194,7 +197,7 @@ const sellTypeText: Record<string, string> = {
       <h3 class="info-title">
         服务记录
         <span class="title-count">({{ data?.patientConditioningOfflines?.length || 0 }}/{{ data?.totalMeasure || 0
-        }})</span>
+          }})</span>
       </h3>
       <vxe-table :data="data?.patientConditioningOfflines" border>
         <vxe-column type="seq" title="序号" width="60" align="center" />
@@ -233,6 +236,23 @@ const sellTypeText: Record<string, string> = {
     background: #fff;
   }
 
+  .service-package-placeholder {
+    width: 120rpx;
+    height: 120rpx;
+    border-radius: 8rpx;
+    margin-right: 20rpx;
+    background-color: #f5f5f5;
+    border: 1px solid #e8e8e8;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+  .placeholder-icon {
+  font-size: 40rpx;
+  opacity: 0.3;
+}
+
   .info-title {
     font-size: 16px;
     font-weight: 600;
@@ -434,6 +454,16 @@ const sellTypeText: Record<string, string> = {
   .package-item-image {
     flex-shrink: 0;
   }
+  .package-item-placeholder {
+    flex-shrink: 0;
+    width: 60px;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: #f5f5f5;
+    border-radius: 4px;
+  }
 
   .item-img {
     border-radius: 4px;