新增不可用商品页面相关显示

 <!--
  * @Date: 2024-09-29 14:26:41
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-25 18:01:01
+ * @LastEditTime: 2024-10-28 11:44:26
  * @FilePath: /hager/src/views/product/detail.vue
  * @Description: 文件描述
 -->
@@ -17,7 +17,7 @@
         </el-breadcrumb>
       </div>
     </hager-box>
-    <hager-box class="box-n">
+    <hager-box v-if="is_enable" class="box-n">
       <el-row v-if="!is_xs" :gutter="10" style="margin-bottom: 3rem;">
         <el-col :span="8">
           <hager-carousel :images="info_images"></hager-carousel>
@@ -39,7 +39,7 @@
         </div>
       </div>
     </hager-box>
-    <hager-box class="box-2n">
+    <hager-box v-if="is_enable" class="box-2n">
       <hager-h1 title="产品优势" sub="Product Advantages"></hager-h1>
       <div :class="['product-advantage', is_xs ? 'xs' : '']">
         <div :class="['item', is_xs ? 'xs' : '']" v-for="(item, index) in product_advantages" :key="index">
@@ -49,7 +49,7 @@
         </div>
       </div>
     </hager-box>
-    <hager-box class="box-n">
+    <hager-box v-if="is_enable" class="box-n">
       <hager-h1 title="产品资料" sub="Product Information"></hager-h1>
       <div class="product-info">
         <div class="info-control">
@@ -121,6 +121,15 @@
         </div>
       </div>
     </hager-box>
+    <hager-box v-if="!is_enable" class="no-product">
+      <div class="product-img-wrapper">
+        <img :class="['product-img', is_xs ? 'xs' : '']" style="" src="https://cdn.ipadbiz.cn/hager/img/product/%E7%BB%84%20130@2x.png">
+      </div>
+      <div class="product-text-wrapper">
+        <div :class="['product-text-zh', is_xs ? 'xs' : '']">更多内容，敬请期待！</div>
+        <div :class="['product-text-en', is_xs ? 'xs' : '']">Please look forward to more content！</div>
+      </div>
+    </hager-box>
   </div>
 </template>
 
@@ -171,6 +180,7 @@ export default {
       product_advantages: [],
       checked_items: [],
       is_login: false,
+      is_enable: true, // 产品是否有效
     }
   },
   computed: {
@@ -203,6 +213,8 @@ export default {
       const { code, data } = await getProductInfoAPI( { id: this.$route.query.id });
       if (code) {
         this.info = data;
+        // 产品是否可用
+        this.is_enable = data.product_status === 'publish' ? true : false;
         if (this.info.file?.img) {
           this.info_images = this.info.file.img.map(item => item.value);
         }
@@ -514,5 +526,45 @@ export default {
     margin-bottom: 1rem;
     border: 1px solid #ebebeb;
   }
+
+  .no-product {
+    .product-img-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 2rem 0;
+      .product-img {
+        height: 25vw;
+        width: auto;
+        &.xs {
+          height: 12rem;
+        }
+      }
+    }
+    .product-text-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-direction: column;
+      margin: 2rem 0;
+      .product-text-zh {
+        font-size: 1.3rem;
+        font-weight: bold;
+        margin-bottom: 0.5rem;
+        color: @secondary-color;
+        &.xs {
+          font-size: 1.05rem;
+        }
+      }
+      .product-text-en {
+        font-size: 1.15rem;
+        font-weight: bold;
+        color: @primary-color;
+        &.xs {
+          font-size: 0.95rem;
+        }
+      }
+    }
+  }
 }
 </style>

 <!--
  * @Date: 2024-09-27 16:53:09
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-10-25 16:32:22
+ * @LastEditTime: 2024-10-28 11:43:10
  * @FilePath: /hager/src/views/product/index.vue
  * @Description: 文件描述
 -->
@@ -33,7 +33,7 @@
           <div class="product-list">
             <div class="product-item" v-for="(item, index) in product_list" :key="index">
               <div class="product-item-img">
-                <img style="width: 100%; height: auto;" :src="item.cover">
+                <img style="width: 100%; height: auto;" :src="item.product_status === 'publish' ? item.cover : 'https://cdn.ipadbiz.cn/hager/img/product/%E7%BB%84%20130@2x.png'">
               </div>
               <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
             </div>
@@ -44,7 +44,7 @@
       <div v-else class="product-list">
         <div class="product-item xs" v-for="(item, index) in product_list" :key="index">
           <div @click="goToDetail(item)" class="product-item-img xs">
-            <img style="width: 100%; height: auto;" :src="item.cover">
+            <img style="width: 100%; height: auto;" :src="item.product_status === 'publish' ? item.cover : 'https://cdn.ipadbiz.cn/hager/img/product/%E7%BB%84%20130@2x.png'">
           </div>
           <p @click="goToDetail(item)" class="product-item-title">{{ item.product_name }}</p>
         </div>

@@ -160,6 +160,12 @@ export default {
         this.count_solution = data.count_solution;
         //
         this.product_list = data.product;
+        // 新增不可用状态的图片
+        this.product_list.forEach(item => {
+          if (item.product_status === 'apply') {
+            item.cover = 'https://cdn.ipadbiz.cn/hager/img/product/%E7%BB%84%20130@2x.png'
+          }
+        })
         this.solution_list = data.solution;
       }
     },