已售罄、已下架产品展示

components/store/CommodityInfo.vue

@@ -15,7 +15,9 @@
       <div class="commodity-detail">
         <div class="img">
           <img :src="commodity.img || '/images/store/common/default.png'" style="width: 256px;height: 256px;"/>
-          <div class="box"></div>
+          <div class="box">
+            <img v-if="commodity.status === 602" src="/images/store/isSellOut.png" alt="">
+          </div>
         </div>
         <div class="content">
           <div class="code">
@@ -56,10 +58,10 @@
                 <span v-text="commodity.b2cMinDelivery || 0"></span>
                 <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery">-</span>
                 <span v-if="commodity.b2cMaxDelivery && commodity.b2cMaxDelivery !== commodity.b2cMinDelivery" v-text="commodity.b2cMaxDelivery || 0"></span>
-                <span>(天)</span>
+                <span>(天){{commodity.status}}</span>
               </div>
             </div>
-            <div class="com-info form-inline">
+            <div class="com-info form-inline" v-if="commodity.status !== 602 && commodity.status !== 612">
               <span class="name">数&nbsp;量</span>：
               <div class="input-group" style="width: 120px">
                 <div :class="fragment.canSub ? ' input-group-addon operate':'input-group-addon'" @click="fragment.canSub ?subNum():''" :style="!fragment.canSub ?'cursor: not-allowed;':''">-</div>
@@ -89,10 +91,11 @@
                  <span>{{(calculate || 0) | currency}}</span>
               </span>
             </div>
-            <div class="button">
+            <div class="button" v-if="commodity.status !== 602 && commodity.status !== 612">
               <button class="btn btn-default btn-primary" @click="buyNow(false, commodity)">加入购物车</button>
               <button class="btn btn-default btn-now" @click="buyNow(true, commodity)">立即购买</button>
             </div>
+            <div class="warn-area" v-if="commodity.status === 602 || commodity.status === 612" v-text="commodity.status === 602 ? '此产品已售罄':'此产品已下架'"></div>
           </div>
           <div class="price-block">
             <div class="commodity-price">
@@ -474,13 +477,19 @@ export default {
 		height: 320px;
 	}
 
-	.commodity-detail .img img {
+	.commodity-detail .img >img {
 		border: 1px solid #D6D3CE;
 	}
 
 	.commodity-detail .img  .box {
 		height: 62px;
+    position: relative;
 	}
+  .commodity-detail .img  .box img {
+    position: absolute;
+    right: 3px;
+    bottom: 64px;
+  }
 
 	.commodity-detail .content {
 		width: 932px;
@@ -536,6 +545,12 @@ export default {
   .content .com-info:hover a{
     color: #23527c;
   }
+  .content .warn-area {
+    font-size: 16px;
+    font-weight: bold;
+    color: #333;
+    margin-top: 15px;
+  }
   .commodity-info-detail {
 		float: left;
 		padding-top: 10px;