求购频道页报价历史

components/applyPurchase/ApplyInfo.vue

@@ -35,17 +35,47 @@
       </p>
       <ul>
         <li v-for="purchaseMan in purchaseManList.content" :class="{'active': purchaseMan.active}">
-          <span>{{purchaseMan.releaseDate | date}}</span>
-          <span :title="getPurchaseManName(purchaseMan)">{{getPurchaseManName(purchaseMan)}}</span>
-          <span :title="purchaseMan.code">{{purchaseMan.code}}</span>
-          <span :title="purchaseMan.brand">{{purchaseMan.brand}}</span>
-          <span class="date-content"><span>剩余&nbsp;</span><span v-if="getDay(purchaseMan.remainingTime) > 0" v-text="getDay(purchaseMan.remainingTime)"></span><i v-if="getDay(purchaseMan.remainingTime) > 0">&nbsp;天&nbsp;</i><span v-if="getDay(purchaseMan.remainingTime) <= 0" v-text="getHours(purchaseMan.remainingTime)"></span><i v-if="getDay(purchaseMan.remainingTime) <= 0" >&nbsp;小时</i></span>
-          <span class="number-content"><img src="/images/applyPurchase/hot-fire.png" alt="" v-if="purchaseMan.offerAmount > 10"><span :style="purchaseMan.offerAmount > 10 ? 'color: #ff9a00': ''">{{purchaseMan.offerAmount || 0}}</span>&nbsp;条</span>
-          <span class="btn-content">
+          <div>{{purchaseMan.releaseDate | date}}</div>
+          <div :title="getPurchaseManName(purchaseMan)">{{getPurchaseManName(purchaseMan)}}</div>
+          <div :title="purchaseMan.code">{{purchaseMan.code}}</div>
+          <div :title="purchaseMan.brand">{{purchaseMan.brand}}</div>
+          <div class="date-content"><span>剩余&nbsp;</span><span v-if="getDay(purchaseMan.remainingTime) > 0" v-text="getDay(purchaseMan.remainingTime)"></span><i v-if="getDay(purchaseMan.remainingTime) > 0">&nbsp;天&nbsp;</i><span v-if="getDay(purchaseMan.remainingTime) <= 0" v-text="getHours(purchaseMan.remainingTime)"></span><i v-if="getDay(purchaseMan.remainingTime) <= 0" >&nbsp;小时</i></div>
+          <div class="number-content"><img src="/images/applyPurchase/hot-fire.png" alt="" v-if="purchaseMan.offerAmount > 10"><span :style="purchaseMan.offerAmount > 10 ? 'color: #ff9a00': ''">{{purchaseMan.offerAmount || 0}}</span>&nbsp;条</div>
+          <div class="btn-content">
             <a>联系买家</a>
             <a v-if="!purchaseMan.isOffer" @click="sayPrice(purchaseMan)">我要报价</a>
-            <span v-else>已报价 <img src="/images/applyPurchase/green-check.png" alt=""></span>
-          </span>
+            <div class="is-say-price" v-else>已报价 <img src="/images/applyPurchase/green-check.png" alt="">
+              <div class="say-price-history">
+                <p class="price-title">历史报价</p>
+                <div>
+                  <div>
+                    <span>交期：</span><span class="red-text">6 天</span>
+                  </div>
+                  <div>
+                    <span>附件：</span><a href="">下载</a>
+                  </div>
+                  <div class="pre-line">
+                    <span>规格：</span>2016-05-21
+                  </div>
+                  <p class="price-level">价格梯度</p>
+                  <ul>
+                    <li>
+                      <span>1333+</span>
+                      <span>$123123</span>
+                    </li>
+                    <li>
+                      <span>1333+</span>
+                      <span>$123123</span>
+                    </li>
+                    <li>
+                      <span>1333+</span>
+                      <span>$123123</span>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
           <div class="expand-content">
             <div>
               生产日期：{{purchaseMan.produceDate || '-'}}
@@ -502,12 +532,13 @@
       }
       >ul {
         margin-bottom: 29px;
-        li {
+        > li {
+          position: relative;
           min-height: 67px;
           line-height: 67px;
           border: 1px solid #ededed;
-          >span {
-            overflow: hidden;
+          >div {
+            overflow-x: hidden;
             text-overflow: ellipsis;
             white-space: nowrap;
             display: inline-block;
@@ -560,7 +591,7 @@
               }
             }
             &.btn-content {
-              a {
+              > a {
                 display: inline-block;
                 width: 71px;
                 height: 28px;
@@ -574,11 +605,110 @@
                   margin-right: 10px;
                 }
               }
-              span {
+              .is-say-price {
+                display: inline-block;
                 color: #39ae05;
+                margin-left: 11px;
                 img {
                   margin-bottom: 2px;
                 }
+                .say-price-history {
+                  position: absolute;
+                  top: 53px;
+                  right: 11px;
+                  line-height: normal;
+                  width: 198px;
+                  height: 0;
+                  background: #fff;
+                  border: 1px solid #fab89a;
+                  z-index: 1;
+                  overflow: hidden;
+                  transition: height 1s;
+                  -moz-transition: height 1s; /* Firefox 4 */
+                  -webkit-transition: height 1s; /* Safari 和 Chrome */
+                  -o-transition: height 1s; /* Opera */
+                  opacity: 0;
+                  p {
+                    color: #020202;
+                    font-weight: bold;
+                    margin: 0;
+                    &.price-title {
+                      background: #fee6db;
+                      height: 28px;
+                      line-height: 28px;
+                    }
+                    &.price-level {
+                      margin: 6px 0;
+                      text-align: left;
+                    }
+                  }
+                  > div {
+                    padding: 9px 12px;
+                    > div {
+                      display: inline-block;
+                      text-align: left;
+                      &:nth-child(1) {
+                        float: left;
+                      }
+                      &:nth-child(2) {
+                        margin-left: 32px;
+                      }
+                      span {
+                        color: #020202;
+                        margin: 0;
+                        &.red-text {
+                          color: #f62d37;
+                        }
+                      }
+                      &.pre-line {
+                        display: block;
+                        padding: 13px 0;
+                        border-bottom: 1px dashed #fee6db;
+                      }
+                    }
+                    ul {
+                      li {
+                        color: #333;
+                        height: 22px;
+                        line-height: 22px;
+                        padding: 0 6px;
+                        &:nth-child(odd) {
+                          background: #f6f5f4;
+                        }
+                        span {
+                          color: #333;
+                          display: inline-block;
+                          text-align: left;
+                          width: 50%;
+                          margin: 0;
+                        }
+                        &:last-child {
+                          span {
+                            color: #4290f7;
+                          }
+                        }
+                      }
+                    }
+                  }
+                }
+                &:hover {
+                  .say-price-history {
+                    opacity: 1;
+                   /* animation: expand 1s infinite;
+                    -webkit-animation: expand 1s infinite; !*Safari and Chrome*!
+                    animation-iteration-count: 1;
+                    -webkit-animation-iteration-count: 1;*/
+                    height: 210px;
+                  }
+                }
+               /* @keyframes expand {
+                  from {bottom: 58px}
+                  to {bottom: auto}
+                }
+                @-webkit-keyframes expand {
+                  from {bottom: 58px}
+                  to {bottom: auto}
+                }*/
               }
             }
           }
@@ -737,6 +867,7 @@
       float: none;
     }
     .say-price-box {
+      display: none;
       position: fixed;
       width: 527px;
       top: 30%;

components/applyPurchase/PublishApply.vue

@@ -33,6 +33,22 @@
               <li v-for="sBrand in similarBrand" @click="setBrand(sBrand.nameEn)">{{sBrand.nameEn}}</li>
             </ul>
           </div>
+          <div class="form-item">
+            <span>
+              <i>*</i>截止日期：
+            </span>
+            <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
+            <el-date-picker
+              v-model="applyObj.deadline"
+              type="date"
+              :picker-options="pickerOptions"
+              :class="{'error': !validObj.deadline}"
+              @change="setDeadLineValid"
+              :editable="false"
+              :clearable="true"
+              size="mini">
+            </el-date-picker>
+          </div>
           <div class="form-item">
             <span>
               单价预算：
@@ -49,34 +65,18 @@
             </span>
             <input type="text" class="form-control" v-model="applyObj.encapsulation" @input="onEncapsulationChange" />
           </div>
-          <div class="form-item">
-            <span>
-              生产日期：
-            </span>
-            <input type="text" class="form-control" v-model="applyObj.produceDate" @input="onProduceDateChange" />
-          </div>
           <div class="form-item">
             <span>
               采购数量：
             </span>
             <input type="text" class="form-control" :class="{'error': !validObj.amount}" v-model="applyObj.amount" @blur="checkAmount" @input="onAmountInput" />
           </div>
-          <div class="form-item">
+        </div>
+        <div class="form-item">
             <span>
-              <i>*</i>截止日期：
+              规格：
             </span>
-            <!--<input type="text" class="form-control" readonly :class="{'error': !validObj.deadline}" v-model="applyObj.deadline" @blur="checkDeadline" />-->
-            <el-date-picker
-              v-model="applyObj.deadline"
-              type="date"
-              :picker-options="pickerOptions"
-              :class="{'error': !validObj.deadline}"
-              @change="setDeadLineValid"
-              :editable="false"
-              :clearable="true"
-              size="mini">
-            </el-date-picker>
-          </div>
+          <input type="text" class="form-control" v-model="applyObj.produceDate" @input="onProduceDateChange" />
         </div>
         <a @click="goPublish()">发布求购</a>
       </div>