fix: 修复下架商品展示

xinkeaboard-web/assets/style/member/index.scss

@@ -583,6 +583,7 @@ a:active {
                 justify-content: center;
                 overflow: hidden;
                 cursor: pointer;
+                position: relative;
                 &:last-child {
                     margin-right: 0;
                 }
@@ -595,6 +596,35 @@ a:active {
                     border: 1px solid $colorMain;
                 }
 
+                /* 遮罩层 */
+            .mask {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background-color: rgba(153, 153, 153, 0.6);
+                /* 灰色透明遮罩 */
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                z-index: 1;
+            }
+
+            /* 白色圆圈 */
+            .circle {
+                background-color: white;
+                width: 30px;
+                height: 30px;
+                border-radius: 50%;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-size: 5px;
+                color: black;
+                text-align: center;
+            }
+
 
             }
         }

xinkeaboard-web/pages/member/index/home.vue

@@ -59,7 +59,7 @@
           <ul class="clearfix">
             <li
               class="list_item"
-              v-for="({ productImage, productId,goodsName }, index) in collectGoods.goods"
+              v-for="({ productImage, productId,goodsName, state }, index) in collectGoods.goods"
               :key="index"
             >
               <router-link
@@ -67,6 +67,9 @@
                   :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ productId"
               >
                 <img :src="productImage" alt="" />
+                <div class="mask" v-if="[5, 6].includes(state)">
+                  <div class="circle">{{  L['已下架']  }}</div>
+                </div>
               </router-link>
             </li>
             <div class="no_footprint" v-show="!collectGoods.goods.length">
@@ -115,7 +118,7 @@
           <ul class="clearfix">
             <li
               class="list_item"
-              v-for="({ goodsImage, productId,goodsName }, index) in looklog.log"
+              v-for="({ goodsImage, productId,goodsName, state }, index) in looklog.log"
               :key="index"
             >
               <router-link
@@ -123,6 +126,9 @@
                   :to="'/goods/detail/'+ calcProductName(goodsName) +'_'+ productId"
               >
                 <img :src="goodsImage" alt="" />
+                 <div class="mask" v-if="[5, 6].includes(state)">
+                  <div class="circle">{{  L['已下架']  }}</div>
+                </div>
               </router-link>
             </li>
             <div class="no_footprint" v-show="!looklog.log.length">