商品详情:调整变现流程

@@ -18,8 +18,8 @@
                    @select="onSelectSize"
                    @add="onAdd" />
         <div class="footer">
-          <cube-button v-if="config.type === 'sell'" @click="magic">变现 <span><i>¥</i>{{399}}</span></cube-button>
-          <cube-button @click="select" :class="{active: selectedSize.size_id }">{{config.title}}</cube-button>
+          <cube-button v-if="config.type === 'sell'" @click="convertToCash" :class="{active: isMarketable}">变现<span> <i>¥</i>{{cashPrice}}</span></cube-button>
+          <cube-button @click="select" :class="{active: isTradable }">{{config.title}}</cube-button>
         </div>
       </div>
     </div>
@@ -83,6 +83,31 @@ export default {
     },
     canAddSize() {
       return get(this.product, 'goods_list[0].canAddSize', false);
+    },
+
+    /**
+     * 可交易(购买|出售)
+     */
+    isTradable() {
+      return this.selectedSize && this.selectedSize.size_id;
+    },
+
+    /**
+     * 变现价格,使用bid_moster_price
+     */
+    cashPrice() {
+      if (this.selectedSize && this.selectedSize.hasOwnProperty('bid_moster_price')) {
+        return this.selectedSize.bid_moster_price;
+      }
+
+      return '-';
+    },
+
+    /**
+     * 是否可变现
+     */
+    isMarketable() {
+      return this.cashPrice !== '-' && this.cashPrice > 0;
     }
   },
   mounted() {
@@ -106,12 +131,18 @@ export default {
       this.$emit('add');
     },
     select() {
+      if (!this.isTradable) {
+        return;
+      }
       this.$emit('select', {
         productId: this.product.product_id,
         storageId: this.selectedSize.storage_id,
       });
     },
-    magic() {
+    convertToCash() {
+      if (!this.isMarketable) {
+        return;
+      }
       this.hide();
 
       // TODO: TBD

@@ -64,7 +64,7 @@ export default {
 
     .row {
       overflow: hidden;
-      margin: -8px;
+      margin: 0 -8px;
 
       .col {
         width: 33.3333%;

@@ -17,7 +17,7 @@ $sub-color : #64ad88;
     }
 
     &.active {
-      border: 0;
+      border-color: $primary-color;
       background: $primary-color;
       color: #fff;
     }

@@ -178,7 +178,9 @@ export default {
     this.imageHideThreadhold = -window.innerWidth * 0.693;
   },
   activated() {
-    this.loadData(this.productId);
+    if (this.productId !== this.productDetail.product_id) {
+      this.loadData(this.productId);
+    }
   },
   methods: {
     ...mapActions(['fetchProductInfo', 'fetchTop3', 'toggleFav', 'updateTradeInfo', 'getSelectedTradeProduct']),