求购列表修改

components/applyPurchase/ApplyInfo.vue

@@ -9,95 +9,70 @@
       </div>
     </div>
     <div class="apply-info-list">
-      <p>
-        <span>发布时间
-          <a href="javascript:void(0)" @click="sortListByParam('releaseDate')">
-            <!--<i class=" fa fa-long-arrow-up" :class="{active: sorting.releaseDate == 'ASC'}"></i>-->
-            <!--<i class=" fa fa-long-arrow-down" :class="{active: sorting.releaseDate == 'DESC'}"></i>-->
-          </a>
+      <p class="list-title">
+        <span class="list-title-item">买家/发布时间
+          <!--<a href="javascript:void(0)" @click="sortListByParam('releaseDate')">
+            <i class=" fa fa-long-arrow-up" :class="{active: sorting.releaseDate == 'ASC'}"></i>
+            <i class=" fa fa-long-arrow-down" :class="{active: sorting.releaseDate == 'DESC'}"></i>
+          </a>-->
         </span>
-        <span>买家</span>
-        <span>型号</span>
-        <span>品牌</span>
-        <span>已报价
-          <a href="javascript:void(0)" @click="sortListByParam('offerAmount')">
-            <!--<i class=" fa fa-long-arrow-up" :class="{active: sorting.offerAmount == 'ASC'}"></i>-->
-            <!--<i class=" fa fa-long-arrow-down" :class="{active: sorting.offerAmount == 'DESC'}"></i>-->
-          </a>
+        <span class="list-title-item">产品信息</span>
+        <span class="list-title-item">已报价
+          <!--<a href="javascript:void(0)" @click="sortListByParam('offerAmount')">
+            <i class=" fa fa-long-arrow-up" :class="{active: sorting.offerAmount == 'ASC'}"></i>
+            <i class=" fa fa-long-arrow-down" :class="{active: sorting.offerAmount == 'DESC'}"></i>
+          </a>-->
         </span>
-        <span>截止时间
-          <a href="javascript:void(0)" @click="sortListByParam('deadline')">
-            <!--<i class=" fa fa-long-arrow-up" :class="{active: sorting.deadline == 'ASC'}"></i>-->
-            <!--<i class=" fa fa-long-arrow-down" :class="{active: sorting.deadline == 'DESC'}"></i>-->
-          </a>
+        <span class="list-title-item">截止时间
+          <!--<a href="javascript:void(0)" @click="sortListByParam('deadline')">
+            <i class=" fa fa-long-arrow-up" :class="{active: sorting.deadline == 'ASC'}"></i>
+            <i class=" fa fa-long-arrow-down" :class="{active: sorting.deadline == 'DESC'}"></i>
+          </a>-->
         </span>
-        <span>操作</span>
       </p>
       <ul v-if="purchaseManList.content && purchaseManList.content.length">
         <li v-for="(purchaseMan, index) in purchaseManList.content" :class="{'active': purchaseMan.active}">
-          <div>{{purchaseMan.date| date}}</div>
-          <div v-if="purchaseMan.inquiry.enterprise && purchaseMan.inquiry.enterprise.enName" :title="user.logged ? purchaseMan.inquiry.enterprise.enName : null">{{[purchaseMan.inquiry.enterprise.enName, user] | enterpriseFilter}}</div>
-          <div v-else :title="user.logged ? purchaseMan.userName : null">{{[purchaseMan.userName, user] | userNameFilter}}</div>
-          <div :title="purchaseMan.cmpCode">{{purchaseMan.cmpCode || '-'}}</div>
-          <div :title="purchaseMan.inbrand">{{purchaseMan.inbrand || '-'}}</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="date-content">
-            <div v-if="purchaseMan.remainingTime > 0">
-              <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>
-            <span v-if="!purchaseMan.remainingTime || purchaseMan.remainingTime <= 0">已截止</span>
-          </div>
-          <div class="btn-content">
-            <!--<a @click="setLinkBoxIndex(index)">联系买家</a>-->
-            <!--判断该求购是自己的-->
-            <div class="is-say-price" v-if="purchaseMan.remainingTime > 0 && purchaseMan.quoted == 1">已报价 <img src="/images/applyPurchase/green-check.png" alt=""></div>
-            <div v-else>
-              <a title="该求购已截止" v-if="!purchaseMan.remainingTime || purchaseMan.remainingTime <= 0" style="background: #cccbcb;" @click="sayPriceStop">我要报价</a>
-              <a title="此为贵公司的求购" v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1) && (user.logged && ((purchaseMan.inquiry.enterprise && user.data.enterprise && (purchaseMan.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && purchaseMan.userUU == user.data.userUU  && !purchaseMan.inquiry.enterprise)))" style="background: #cccbcb;" @click="sayPriceSeft">我要报价</a>
-              <a v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1) && !(user.logged && ((purchaseMan.inquiry.enterprise && user.data.enterprise && (purchaseMan.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && purchaseMan.userUU == user.data.userUU  && !purchaseMan.inquiry.enterprise)))" @click="sayPrice(purchaseMan, index)">我要报价</a>
-            </div>
+          <div class="il-item il-left">
+            <div v-if="purchaseMan.inquiry.enterprise && purchaseMan.inquiry.enterprise.enName" :title="user.logged ? purchaseMan.inquiry.enterprise.enName : null">{{[purchaseMan.inquiry.enterprise.enName, user] | enterpriseFilter}}</div>
+            <div v-else :title="user.logged ? purchaseMan.userName : null">{{[purchaseMan.userName, user] | userNameFilter}}</div>
+            <div>{{purchaseMan.date| date}}</div>
           </div>
-          <div class="expand-content">
-            <div>
-              封装：{{purchaseMan.encapsulation || '-'}}
-            </div>
-            <div>
-              采购数量：<span>{{purchaseMan.needquantity || '-'}}</span><span v-if="purchaseMan.needquantity">个</span>
-            </div>
-            <div>
-              单价预算：<span>{{purchaseMan.unitPrice ? (purchaseMan.currency == 'RMB' ? '￥' : '$') + purchaseMan.unitPrice : '-'}}</span>
+          <div class="il-item il-center">
+            <div class="il-box-large">
+              <div :title="purchaseMan.inbrand" class="fl"><span>类目：</span>{{purchaseMan.inbrand || '-'}}</div>
+              <div :title="purchaseMan.inbrand" class="fl"><span>品牌：</span>{{purchaseMan.inbrand || '-'}}</div>
+              <div :title="purchaseMan.cmpCode" class="fl"><span>型号：</span>{{purchaseMan.cmpCode || '-'}}</div>
+              <div :title="purchaseMan.cmpCode" class="fl"><span>规格：</span>{{purchaseMan.spec || '-'}}</div>
             </div>
-            <div>
-              生产日期：{{purchaseMan.produceDate || '-'}}
+            <div class="il-box-small">
+              <div :title="purchaseMan.cmpCode" class="fl"><span>封装：</span>{{purchaseMan.encapsulation || '-'}}</div>
+              <div :title="purchaseMan.cmpCode" class="fl"><span>采购数量：</span>{{purchaseMan.needquantity || '-'}}</div>
+              <div :title="purchaseMan.cmpCode" class="fl"><span>单价预算：</span>{{purchaseMan.unitPrice ? (purchaseMan.currency == 'RMB' ? '￥' : '$') + purchaseMan.unitPrice : '-'}}</div>
             </div>
           </div>
-          <!--<div class="say-price">
-            <div>报价</div>
-            <div>
-              <i>*</i>单价
-              <select v-if="!purchaseMan.currency" v-model="sayPriceObj.currency">
-                <option value="RMB">¥</option>
-                <option value="USD">$</option>
-              </select>
-              <div v-if="purchaseMan.currency" v-text="purchaseMan.currency == 'RMB' ? '￥' : '$'"></div>
-              <input type="number" v-model="sayPriceObj.unitPrice" class="form-control" @blur="onUnitPriceBlur" @input="onUnitPriceChange">
+          <div class="il-item 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="il-item il-right">
+            <div class="date-content">
+              <div v-if="purchaseMan.remainingTime > 0">
+                <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>
+              <span v-if="!purchaseMan.remainingTime || purchaseMan.remainingTime <= 0">已截止</span>
             </div>
-            <div>
-              <i>*</i>交期&nbsp;
-              <input type="number" v-model="sayPriceObj.minDay" @blur="onMinDayInput" @input="onMinDayChange" class="form-control">&nbsp;-&nbsp;<input type="number" v-model="sayPriceObj.maxDay" @blur="onMaxDayInput" @input="onMaxDayChange" class="form-control">&nbsp;天
+            <div class="btn-content">
+              <!--<a @click="setLinkBoxIndex(index)">联系买家</a>-->
+              <!--判断该求购是自己的-->
+              <div class="is-say-price" v-if="purchaseMan.remainingTime > 0 && purchaseMan.quoted == 1">已报价 <img src="/images/applyPurchase/green-check.png" alt=""></div>
+              <div v-else>
+                <a title="该求购已截止" v-if="!purchaseMan.remainingTime || purchaseMan.remainingTime <= 0" style="background: #cccbcb;" @click="sayPriceStop">我要报价</a>
+                <a title="此为贵公司的求购" v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1) && (user.logged && ((purchaseMan.inquiry.enterprise && user.data.enterprise && (purchaseMan.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && purchaseMan.userUU == user.data.userUU  && !purchaseMan.inquiry.enterprise)))" style="background: #cccbcb;" @click="sayPriceSeft">我要报价</a>
+                <a v-if="purchaseMan.remainingTime > 0 && (!purchaseMan.quoted || purchaseMan.quoted != 1) && !(user.logged && ((purchaseMan.inquiry.enterprise && user.data.enterprise && (purchaseMan.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && purchaseMan.userUU == user.data.userUU  && !purchaseMan.inquiry.enterprise)))" @click="sayPrice(purchaseMan, index)">我要报价</a>
+              </div>
             </div>
-            <div>
-              生产日期&nbsp;<input v-model="sayPriceObj.produceDate" @input="onProduceDateChange" type="text" class="form-control">
-            </div>
-            <div>
-              <span @click="cancelSayPrice(purchaseMan)">取消</span>
-              <span @click="commitSayPrice(purchaseMan)">提交</span>
-            </div>
-          </div>-->
+          </div>
         </li>
       </ul>
       <div class="empty" v-else>
@@ -326,43 +301,31 @@
       }
     }
     .apply-info-list {
-      >p {
+      .list-title {
         background: #ededed;
         height: 40px;
         line-height: 40px;
         margin: 9px 0 0 0;
-        span {
+        .list-title-item {
           display: inline-block;
           text-align: center;
-          a {
-            i {
-              color: #333;
-              &.active {
-                color: #5078cb;
-              }
+          .fa {
+            color: #333;
+            &.active {
+              color: #5078cb;
             }
           }
           &:nth-child(1) {
-            width: 186px;
+            margin-left: 21px;
           }
           &:nth-child(2) {
-            width: 106px;
+            margin-left: 290px;
           }
           &:nth-child(3) {
-            width: 200px;
+            margin-left: 480px;
           }
           &:nth-child(4) {
-            width: 174px;
-          }
-          &:nth-child(5) {
-            width: 152px;
-          }
-          &:nth-child(6) {
-            width: 158px;
-          }
-          &:nth-child(7) {
-            width: 180px;
-            margin-left: 30px;
+            margin-left: 44px;
           }
         }
       }
@@ -370,41 +333,57 @@
         margin-bottom: 29px;
         > li {
           position: relative;
-          min-height: 61px;
-          line-height: 61px;
           border: 1px solid #ededed;
-          >div {
-            overflow-x: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
+          .il-item {
+            height: 120px;
             display: inline-block;
             text-align: center;
             color: #3c3c3c;
+            padding-top: 16px;
             vertical-align: middle;
-            &:nth-child(1) {
-              width: 186px;
-            }
-            &:nth-child(2) {
-              width: 106px;
-            }
-            &:nth-child(3) {
-              width: 200px;
-            }
-            &:nth-child(4) {
-              width: 174px;
-            }
-            &:nth-child(5) {
-              width: 152px;
+            > div {
+              display: inline-block;
+              span {
+                color: #999;
+              }
             }
-            &:nth-child(6) {
-              width: 158px;
+            &.il-left {
+              margin-left: 17px;
+              div {
+                display: block;
+                &:last-child {
+                  margin-top: 37px;
+                  color: #666;
+                }
+              }
             }
-            &:nth-child(7) {
-              width: 180px;
-              margin-left: 32px;
-              float: right;
+            &.il-center {
+              margin-left: 47px;
+              text-align: left;
+              .fl {
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+              }
+              .il-box-large {
+                width: 420px;
+                .fl {
+                  width: 209px;
+                  height: 38px;
+                  line-height: 19px;
+                }
+              }
+              .il-box-small {
+                width: 250px;
+                .fl {
+                  width: 121px;
+                  &:nth-child(n + 2) {
+                    margin-top: 14px;
+                  }
+                }
+              }
             }
-            &.date-content {
+            .date-content {
               span {
                 &:first-child {
                   font-size: 12px;
@@ -416,7 +395,7 @@
                 font-style: normal;
               }
             }
-            &.number-content {
+            .number-content {
               span {
                 color: #5392f9;
                 &.active {
@@ -428,7 +407,7 @@
                 margin-right: 2px;
               }
             }
-            &.btn-content {
+            .btn-content {
               >div a {
                 display: inline-block;
                 width: 71px;
@@ -451,263 +430,8 @@
                 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}
-                 }*/
-              }
-            }
-          }
-          .expand-content {
-            display: none;
-            position: absolute;
-            top: 63px;
-            justify-content: space-between;
-            padding: 0 236px 0 36px;
-            background: #fffbf0;
-            height: 48px;
-            line-height: 48px;
-            color: #020202;
-            div {
-              display: inline-block;
-              span {
-                color: #f71026;
-              }
-            }
-          }
-          &:hover {
-            border-top: 1px solid #4290f7;
-            border-left: 1px solid #4290f7;
-            border-right: 1px solid #4290f7;
-            .expand-content {
-              display: flex;
-              width: 1190px;
-              z-index: 1;
-              border-bottom: 1px solid #4290f7;
-              border-left: 1px solid #4290f7;
-              border-right: 1px solid #4290f7;
-              left: -1px;
-            }
-          }
-          .say-price {
-            background-color: #e7eef9;
-            height: 64px;
-            line-height: 64px;
-            display: none;
-            >div {
-              display: inline-block;
-              position: relative;
-              height: 64px;
-              line-height: 64px;
-              input {
-                border-radius: 3px;
               }
-              &:nth-child(1) {
-                width: 282px;
-                background: url('/images/applyPurchase/say-price.png')no-repeat;
-                text-align: center;
-                margin-right: 44px;
-              }
-              &:nth-child(2) {
-                margin-right: 39px;
-                input {
-                  width: 118px;
-                  height: 26px;
-                  border: 1px solid #5392f9;
-                }
-                select {
-                  position: absolute;
-                  top: 19px;
-                  width: 32px;
-                  height: 26px;
-                  background: url('/images/applyPurchase/arrow-down.png')no-repeat right center;
-                  -webkit-box-shadow: none;
-                  -moz-box-shadow: none;
-                  box-shadow: none;
-                  border: {
-                    left: none;
-                    top: none;
-                    bottom: none;
-                    right: 1px solid #5392f9;
-                    bottom-left-radius: 4px;
-                    top-left-radius: 4px;
-                  }
-                  color: #5392f9;
-                  font: small-caption;
-                  padding-left: 8px;
-                  & + input {
-                    padding-left: 34px;
-                  }
-                }
-                div {
-                  position: absolute;
-                  top: 19px;
-                  left: 38px;
-                  width: 32px;
-                  height: 26px;
-                  line-height: 26px;
-                  text-align: center;
-                  border: {
-                    left: none;
-                    top: none;
-                    bottom: none;
-                    right: 1px solid #5392f9;
-                    bottom-left-radius: 4px;
-                    top-left-radius: 4px;
-                  }
-                  color: #5392f9;
-                  & + input {
-                    padding-left: 34px;
-                  }
-                }
-              }
-              &:nth-child(3) {
-                margin-right: 37px;
-                input {
-                  width: 32px;
-                  height: 26px;
-                  padding: 0 0 0 6px;
-                }
-              }
-              &:nth-child(4) {
-                margin-right: 132px;
-                input {
-                  width: 118px;
-                  height: 26px;
-                }
-              }
-              &:nth-child(5) {
-                span {
-                  width: 71px;
-                  height: 28px;
-                  line-height: 28px;
-                  text-align: center;
-                  display: inline-block;
-                  cursor: pointer;
-                  &:first-child {
-                    background: #dedddd;
-                    margin-right: 10px;
-                  }
-                  &:last-child {
-                    background: #fa4701;
-                    color: #fff;
-                  }
-                }
-              }
-              i {
-                color: #e41515;
-                position: relative;
-                top: 2px;
-                right: 3px;
-              }
-            }
-          }
-          &.active {
-            border: 1px solid #4290f7;
-            .expand-content {
-              display: flex;
-              width: 1190px;
-              z-index: 1;
-              border: 1px solid #4290f7;
-              left: -1px;
-              border-top: none;
             }
-            /*.say-price {*/
-            /*display: block;*/
-            /*}*/
           }
         }
       }

components/applyPurchase/PublishApply.vue

@@ -59,6 +59,12 @@
             </select>
             <input type="number" class="form-control" :class="{'error': !validObj.unitPrice}" v-model="applyObj.unitPrice" @blur="checkUnitPrice" @input="onUnitPriceInput" />
           </div>
+          <div class="form-item">
+           <span>
+              规格：
+            </span>
+            <input type="text" class="form-control" v-model="applyObj.spec"/>
+          </div>
           <div class="form-item">
            <span>
               封装：
@@ -152,6 +158,7 @@
           brand: '',
           unitPrice: '',
           currency: 'RMB',
+          spec: '',
           encapsulation: '',
           produceDate: '',
           amount: '',
@@ -247,6 +254,7 @@
             inquiryItem.date = date
             inquiryItem.endDate = this.applyObj.deadline
             inquiryItem.encapsulation = this.applyObj.encapsulation
+            inquiryItem.spec = this.applyObj.spec
             let inquiryItems = []
             inquiryItems.push(inquiryItem)
             inquiry.inquiryItems = inquiryItems
@@ -504,16 +512,16 @@
         float: left;
         height: 100%;
         p {
-          padding-top: 18px;
+          padding-top: 16px;
           font-size: 26px;
           color: #3975f4;
-          margin-bottom: 7px;
+          margin-bottom: 4px;
         }
         >div {
           text-align: left;
           margin-left: 14px;
           .form-item {
-            margin-bottom: 5px;
+            margin-bottom: 3px;
             position: relative;
             span {
               width: 80px;