Fix：5183 【商城小程序】商品足迹列表中已下架/删除的商品增加灰色蒙版提示“商品已下架”

pages/user/History/index.vue

@@ -39,6 +39,9 @@
                 :src="historyItem.image"
                 mode="scaleToFill"
               />
+              <view v-if="isInvalidItem(historyItem)" class="invalid-mask">
+                <text class="invalid-mask-text">商品已下架</text>
+              </view>
               <view class="good-info">
                 <view
                   v-if="historyItem.couponName"
@@ -179,6 +182,13 @@ export default {
       return str.replace(regx, '')
     },
     goodsDetail (item) {
+      if (this.isInvalidItem(item)) {
+        uni.showToast({
+          title: '商品已下架',
+          icon: 'none'
+        })
+        return
+      }
       this.$yrouter.push({
         path: '/pages/shop/GoodsCon/index',
         query: {
@@ -186,6 +196,11 @@ export default {
         }
       })
     },
+    isInvalidItem(item) {
+      if (!item) return false
+      if (item.isInvalid === true || item.isInvalid === 'true') return true
+      return Number(item.isInvalid) === 1
+    },
     deleteHistoryItem(historyItem) {
       const id = historyItem.id
       if (!id) return
@@ -276,6 +291,26 @@ export default {
     width: 226rpx;
     height: 226rpx;
   }
+  .invalid-mask{
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, 0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1;
+    .invalid-mask-text{
+      color: #fff;
+      font-size: 24rpx;
+      padding: 8rpx 16rpx;
+      border: 1px solid rgba(255, 255, 255, 0.7);
+      border-radius: 24rpx;
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
   .good-info {
     padding: 12rpx 12rpx 20rpx 12rpx;
     .price {