feat(product_detail): add qiugou

@@ -8,7 +8,12 @@
       v-show="isVisible"
       @mask-click="maskClick">
       <transition :name="transition" appear>
-        <div class="cube-action-sheet-panel" v-show="isVisible" @click.stop>
+        <div class="cube-action-sheet-panel"
+             :class="{withRadius: hasBorderRadius}"
+             :style="panelStyle"
+             v-show="isVisible"
+             ref="panel"
+             @click.stop="fakeMask">
           <slot></slot>
         </div>
       </transition>
@@ -26,6 +31,20 @@ export default {
       type: String,
       default: 'bottom',
     },
+    panelStyle: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    hasBorderRadius: {
+      type: Boolean,
+      default: true,
+    },
+    emulateMask: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -59,7 +78,12 @@ export default {
           this._shownCallback();
         });
       }
-    }
+    },
+    fakeMask(e) {
+      if (this.emulateMask && e.target === this.$refs.panel) {
+        this.hide();
+      }
+    },
   },
   components: {
     'cube-popup': Popup,
@@ -78,8 +102,10 @@ export default {
 
   .cube-action-sheet-panel {
     background: #fff;
-    border-top-left-radius: 20px 24px;
-    border-top-right-radius: 20px 24px;
+    &.with-radius {
+      border-top-left-radius: 20px 24px;
+      border-top-right-radius: 20px 24px;
+    }
   }
 
   .cube-action-sheet-bottom-enter, .cube-action-sheet-bottom-leave-active {
@@ -94,8 +120,4 @@ export default {
   .cube-action-sheet-right-enter-active, .cube-action-sheet-right-leave-active {
     transition: all 0.3s ease-in-out;
   }
-
-  /deep/ .cube-popup-mask {
-    opacity: 0.2;
-  }
 </style>

 <template>
-  <action-sheet @hidden="onHidden" position="right" ref="popup">
+  <action-sheet @hidden="onHidden" position="right" ref="popup"
+                :panelStyle="{background: 'transparent', paddingLeft: '20%'}"
+                :hasBorderRadius="false"
+                :emulateMask="true">
       <div class="buy-sheet">
-        <div class="header">
-          <div class="back-wrapper flex" @touchend="onBack">
-            <div class="back"></div>
-          </div>
-        </div>
+        <div class="header">求购<i class="cubeic-question"></i></div>
         <div class="title">
           <img-size class="title-thumbnail" :src="imageUrl" :width="300" :height="300"/>
-          <div>{{productDetail.product_name}} {{goodsName}}</div>
+          <div>选择尺码填写理想的价格发布求购</div>
         </div>
         <div class="size-list">
           <cube-scroll>
             <ul>
               <li :class="['size-item', item.available ? '': 'disable']" v-for="(item, idx) in sizeViewList" :key="idx" @click="buy(item)">
                 <div class="size"><span>{{item.name}}</span><span v-if="item.subName">{{item.subName}}</span></div>
-                <div class="price">¥ {{item.price}} <i class="cubeic-arrow"></i></div>
+                <div class="price">最高求购价 ¥{{item.price}} <i class="cubeic-arrow"></i></div>
               </li>
             </ul>
           </cube-scroll>
@@ -113,54 +112,34 @@ export default {
     display: flex;
     flex-direction: column;
     position: relative;
-    .size-list {
-      flex: 1;
-      padding: 10px 40px;
-      overflow: scroll;
-    }
-  }
-  .title-thumbnail {
-    width: 140px;
-    height: 140px;
-    margin: 0 auto;
-    display: block;
+    padding: 0 40px;
+    background: #fff;
   }
 
   .header {
-    width: 100%;
-    height: 90px;
-    padding-left: 40px;
-    padding-right: 40px;
-    display: flex;
-    justify-content: flex-end;
-    align-items: stretch;
-    box-sizing: border-box;
     position: absolute;
     top: 0;
+    right: 40px;
+    line-height: 88px;
+    font-size: 28px;
+    color: #999;
+    letter-spacing: 0;
+    text-align: right;
+  }
 
-    .flex {
-      display: flex;
-      align-items: center;
-    }
-
-    .back-wrapper {
-      height: 100%;
-    }
-
-    .back {
-      width: 48px;
-      height: 48px;
-      background: url(~statics/image/address/close.png) no-repeat;
-      background-size: cover;
-    }
+  .title-thumbnail {
+    width: 200px;
+    height: 200px;
+    margin: 0 auto;
+    display: block;
   }
 
   .title {
-    padding: 20px 40px 80px;
+    font-size: 24px;
+    color: #999;
+    letter-spacing: 0;
     text-align: center;
-    font-weight: bold;
-    font-size: 0.9em;
-    border-bottom: 1px solid #ddd;
+    padding-bottom: 28px;
   }
 
   .size-item {
@@ -168,17 +147,14 @@ export default {
     justify-content: space-between;
     align-items: center;
     color: #000;
-    font-size: 32px;
-    padding: 40px;
-    margin-bottom: 40px;
-    border-bottom: 1px solid #ddd;
+    line-height: 120px;
+    border-bottom: 1px solid #eee;
 
     .size {
-      line-height: 1.8;
       display: flex;
-      font-size: 1.3em;
-      font-weight: bold;
       align-items: baseline;
+      font-size: 40px;
+      letter-spacing: 0;
 
       span:nth-child(2) {
         font-size: 0.8em;
@@ -190,15 +166,20 @@ export default {
     .price {
       display: flex;
       align-items: center;
+      font-size: 24px;
+      letter-spacing: 0;
+      text-align: right;
 
       i {
         display: inline-block;
         margin-left: 5px;
-        color: #999;
+        color: #888;
       }
     }
+
     &.disable {
-      .size, .price {
+      .size,
+      .price {
         color: #999;
       }
     }

@@ -21,6 +21,7 @@
             <span class="dot" :class="{active: props.current === index}" v-for="(item, index) in props.dots">{{index + 1}}</span>
           </template>
         </cube-slide>
+        <div class="qiugou" @click="qiugou"></div>
       </div>
 
       <div class="info">
@@ -84,7 +85,7 @@
                        @select="onSelectTradeProduct"
                        @add="onRequestSize"/>
     <size-request-sheet v-if="showSizeRequestSheet" @hidden="onSizeRequestHidden"/>
-    <buy-sheet v-if="showBuySheet" @hidden="onBuyHidden"/>
+    <buy-sheet v-if="showBuySheet" @hidden="onBuyHidden" />
   </div>
 </template>
 
@@ -182,7 +183,7 @@ export default {
   },
   mounted() {
     this.loadData(this.productId);
-    this.imageHideThreadhold = -window.innerWidth * 0.8;
+    this.imageHideThreadhold = -window.innerWidth * 0.5;
   },
   activated() {
     this.refresh();
@@ -263,9 +264,6 @@ export default {
       };
       this.showSizeSelectSheet = true;
     },
-    onBuyHidden() {
-      this.showBuySheet = false;
-    },
     sell() {
       this.selectSizeConfig = {
         dest: 'OrderSellConfirm',
@@ -288,7 +286,12 @@ export default {
     onSizeRequestHidden() {
       this.showSizeRequestSheet = false;
     },
-
+    qiugou() {
+      this.showBuySheet = true;
+    },
+    onBuyHidden() {
+      this.showBuySheet = false;
+    },
   },
 };
 </script>
@@ -317,6 +320,7 @@ export default {
     width: 520px;
     height: 520px;
     margin: 0 auto;
+    position: relative;
     .dot {
       width: 10px;
       height: 10px;
@@ -327,6 +331,16 @@ export default {
         background-color: #08304b;
       }
     }
+
+    .qiugou {
+      position: absolute;
+      top: 0;
+      right: - 58px;
+      width: 58px;
+      height: 48px;
+      background: top left url("~statics/image/product/qiugou@3x.png") no-repeat;
+      background-size: 100% 100%;
+    }
   }
 
   .cube-slide-item {