求购

app.html

@@ -5,7 +5,7 @@
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/element-ui/1.3.7/theme-default/index.css"/>
   <!--<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_0d1jjt5tukcblnmi.css"/>-->
-  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_crpyz8n3b4qxs9k9.css">
+  <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_452262_fhw1qsxh5yfa8aor.css">
   <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/Swiper/3.4.2/css/swiper.css"/>
   {{ HEAD }}
   <script>

assets/scss/mobileCommon.scss

@@ -204,6 +204,7 @@ input {
 
 .mobile-content {
   padding-top: .88rem !important;
+  margin-bottom: 1rem;
 }
 
 /*求购title*/
@@ -238,3 +239,69 @@ input {
     }
   }
 }
+
+/*search*/
+.search-content {
+  input {
+    width: 6.48rem;
+    height: .58rem;
+    border-radius: .14rem;
+    margin: .15rem 0 0 .11rem;
+    font-size: .23rem;
+    padding: 0 0 0 .21rem;
+    border: .01rem solid #376ff3;
+  }
+  span {
+    display: inline-block;
+    height: .46rem;
+    line-height: .46rem;
+    width: .68rem;
+    color: #376ff3;
+    border-left: .01rem solid #376ff3;
+    margin-left: -.68rem;
+    text-align: center;
+    vertical-align: middle;
+    margin-bottom: .08rem;
+    i {
+      font-size: .3rem;
+    }
+  }
+  img {
+    width: .44rem;
+    height: .44rem;
+    float: right;
+    margin-right: .2rem;
+    margin-top: .2rem;
+  }
+}
+/*报价info*/
+.base-info {
+  width: 7.17rem;
+  margin: 0 auto .18rem;
+  background: #fff;
+  padding: 0 29px;
+  .content-line {
+    height: .5rem;
+    line-height: .5rem;
+    font-size: .28rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    span {
+      color: #666;
+    }
+  }
+}
+
+.say-price-btn {
+  display: block;
+  width: 6.7rem;
+  height: .74rem;
+  line-height: .74rem;
+  text-align: center;
+  color: #fff;
+  background: #3f84f6;
+  border-radius: .08rem;
+  font-size: .32rem;
+  margin: 0 auto;
+}

components/mobile/Home.vue

@@ -1,30 +1,32 @@
 <template>
   <div class="home">
     <div class="header">
-      <input type="text" placeholder="请输入您要查找的型号或品牌">
-      <span>
+      <div class="search-content">
+        <input type="text" placeholder="请输入您要查找的型号或品牌">
+        <span>
         <i class="iconfont icon-sousuo"></i>
       </span>
-      <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="">
+        <img src="/images/mobile/@2x/applyPurchase/home/phone.png" alt="">
+      </div>
     </div>
     <ul class="link-list">
       <li>
-        <a href="">
+        <nuxt-link to="/mobile/shop">
           <img src="/images/mobile/@2x/applyPurchase/home/shop.png" alt="">
           <span>店铺列表</span>
-        </a>
+        </nuxt-link>
       </li>
       <li>
-        <a href="">
+        <nuxt-link to="/mobile/brand/brandCenter/ABCD">
           <img src="/images/mobile/@2x/applyPurchase/home/brand.png" alt="">
           <span>品牌列表</span>
-        </a>
+        </nuxt-link>
       </li>
       <li>
-        <a href="">
+        <nuxt-link to="/mobile/applyPurchase/list">
           <img src="/images/mobile/@2x/applyPurchase/home/seek.png" alt="">
           <span>求购询价</span>
-        </a>
+        </nuxt-link>
       </li>
     </ul>
     <div class="seek-title">
@@ -50,36 +52,6 @@
       background: url('/images/mobile/@2x/applyPurchase/home/home-bg.png') no-repeat;
       background-size: cover;
       height: 3.26rem;
-      input {
-        width: 6.48rem;
-        height: .58rem;
-        border-radius: .14rem;
-        margin: .15rem 0 0 .11rem;
-        font-size: .23rem;
-        padding: 0 0 0 .21rem;
-      }
-      span {
-        display: inline-block;
-        height: .46rem;
-        line-height: .46rem;
-        width: .68rem;
-        color: #376ff3;
-        border-left: .04rem solid #376ff3;
-        margin-left: -.68rem;
-        text-align: center;
-        vertical-align: middle;
-        margin-bottom: .08rem;
-        i {
-          font-size: .3rem;
-        }
-      }
-      img {
-        width: .44rem;
-        height: .44rem;
-        float: right;
-        margin-right: .2rem;
-        margin-top: .2rem;
-      }
     }
     .link-list {
       background: #f3f3f7;
@@ -92,6 +64,7 @@
         height: 1.36rem;
         img {
           width: .63rem;
+          height: .63rem;
           margin-top: .2rem;
         }
         span {

components/mobile/MobileFooter.vue

@@ -23,13 +23,13 @@
     </span>
     <a @click="toTop" v-show="!hideToTop"><i class="iconfont icon-arrow-up icon-xlg"></i></a>
     <login-box @onLoginBoxClose="showLoginBox = false" v-if="showLoginBox"></login-box>
-    <say-price :showSayPriceBox="showSayPriceBox" @cancelAction="showSayPriceBox = false"></say-price>
+    <publish-seek :showSayPriceBox="showSayPriceBox" @cancelAction="showSayPriceBox = false"></publish-seek>
   </div>
 </template>
 <script>
   import { scrollTo } from '~utils/scroll'
   import {LoginBox} from '~components/mobile/common'
-  import SayPrice from './applyPurchase/SayPrice.vue'
+  import PublishSeek from './applyPurchase/PublishSeek.vue'
   export default{
     name: 'MobileFooter',
     data () {
@@ -41,7 +41,7 @@
     },
     components: {
       LoginBox,
-      SayPrice
+      PublishSeek
     },
     computed: {
       activeType () {

components/mobile/applyPurchase/PublishSeek.vue

@@ -0,0 +1,122 @@
+<template>
+  <div class="mobile-modal" v-if="showSayPriceBox">
+    <div class="mobile-modal-box">
+      <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont" @click="cancel"></i></div>
+      <div class="publish-seek">
+        <div class="content-line">
+          <span><i>*</i>型号：</span>
+          <input type="text" placeholder="请勿填中文符号">
+        </div>
+        <div class="content-line">
+          <span><i>*</i>品牌：</span>
+          <input type="text" placeholder="请勿填中文符号">
+        </div>
+        <div class="content-line">
+          <span><i>*</i>截止日期：</span>
+          <input type="text" placeholder="请勿填中文符号">
+        </div>
+        <div class="content-line">
+          <span>币种：</span>
+          <a href="">RMB </a>
+          <ul>
+            <li>不限</li>
+            <li>RMB</li>
+            <li>USD</li>
+          </ul>
+        </div>
+        <div class="content-line">
+          <span>数量：</span>
+          <input type="text">
+        </div>
+        <div class="content-line">
+          <span>规格：</span>
+          <input type="text">
+        </div>
+        <a>确认发布</a>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    props: ['showSayPriceBox'],
+    methods: {
+      cancel: function () {
+        this.$emit('cancelAction')
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .mobile-modal {
+    .mobile-modal-box {
+      .publish-seek {
+        background: #fff;
+        padding-top: .1rem;
+        padding-bottom: .4rem;
+        .content-line {
+          height: .8rem;
+          line-height: .8rem;
+          font-size: .26rem;
+          text-align: left;
+          border-bottom: .01rem solid #b7d5fe;
+          position: relative;
+          input {
+            width: 3.49rem;
+            height: .52rem;
+            padding-left: .19rem;
+            border: .01rem solid #7e7e7e;
+          }
+          > span {
+            display: inline-block;
+            width: 1.76rem;
+            text-align: right;
+            i {
+              color: #ff0000;
+              margin-right: .05rem;
+              font-style: normal;
+            }
+          }
+          > a {
+            font-size: .26rem;
+            color: #666;
+          }
+          > ul {
+            position: absolute;
+            top: .6rem;
+            left: 1.16rem;
+            z-index: 1;
+            width: 1.75rem;
+            background: #fff;
+            text-align: center;
+            border-radius: .1rem;
+            border: .01rem solid #dfdfdf;
+            -webkit-box-shadow: 0 0 .12rem .02rem #e2d9d975;
+            -moz-box-shadow:  0 0 .12rem .02rem #e2d9d975;
+            box-shadow:  0 0 .12rem .02rem #e2d9d975;
+            li {
+              height: .52rem;
+              line-height: .52rem;
+              border-bottom: .01rem solid #dfdfdf;
+              &:hover, &:active {
+                background: #dedede;
+              }
+            }
+          }
+        }
+        > a {
+          display: block;
+          width: 5.19rem;
+          height: .84rem;
+          text-align: center;
+          line-height: .84rem;
+          font-size: .38rem;
+          margin: .3rem auto 0;
+          background: #3f84f6;
+          color: #fff;
+          border-radius: .08rem;
+        }
+      }
+    }
+  }
+</style>

components/mobile/applyPurchase/SayPrice.vue

@@ -1,88 +1,127 @@
 <template>
-  <div class="mobile-modal" v-if="showSayPriceBox">
-    <div class="mobile-modal-box">
-      <div class="mobile-modal-header">发布求购<i class="icon-guanbi iconfont" @click="cancel"></i></div>
-      <div class="publish-seek">
-        <div class="content-line">
-          <span><i>*</i>型号：</span>
-          <input type="text" placeholder="请勿填中文符号">
-        </div>
-        <div class="content-line">
-          <span><i>*</i>品牌：</span>
-          <input type="text" placeholder="请勿填中文符号">
-        </div>
-        <div class="content-line">
-          <span><i>*</i>截止日期：</span>
-          <input type="text" placeholder="请勿填中文符号">
-        </div>
-        <div class="content-line">
-          <span>币种：</span>
-          <a href="">RMB </a>
-        </div>
-        <div class="content-line">
-          <span>数量：</span>
-          <input type="text">
-        </div>
-        <div class="content-line">
-          <span>规格：</span>
-          <input type="text">
-        </div>
-        <a>确认发布</a>
+  <div class="say-price">
+    <div class="base-info">
+      <div class="content-line">
+        型号：<span>ASDASDASDASDASD</span>
       </div>
+      <div class="content-line">
+        品牌：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        规格：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        采购数量：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        币种：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        截止日期：<span>ASDASDASDASDASD</span>
+      </div>
+    </div>
+    <div class="form-list">
+      <div class="form-title">
+        <span class="fl">价格梯度<span>(PCS)</span></span>
+        <span class="fr">RMB<img src="/images/mobile/@2x/applyPurchase/currency-arrow-down.png" alt=""></span>
+      </div>
+      <div class="form-item">
+        <input type="number" placeholder="梯度" class="fl">
+        <input type="number" placeholder="单价" class="fr">
+        <i class="iconfont icon-add"></i>
+      </div>
+      <div class="form-item">
+        <input type="number" placeholder="梯度" class="fl">
+        <input type="number" placeholder="单价" class="fr">
+        <i class="iconfont icon-minus"></i>
+      </div>
+      <div class="form-item">
+        <input type="number" placeholder="梯度" class="fl">
+        <input type="number" placeholder="单价" class="fr">
+        <i class="iconfont icon-minus"></i>
+      </div>
+      <div class="form-item">
+        <input type="number" placeholder="梯度" class="fl">
+        <input type="number" placeholder="单价" class="fr">
+        <i class="iconfont icon-minus"></i>
+      </div>
+      <div class="form-item">
+        <input type="number" placeholder="梯度" class="fl">
+        <input type="number" placeholder="单价" class="fr">
+        <i class="iconfont icon-minus"></i>
+      </div>
+      <div class="date">
+        <span>交期(天)</span>
+        <input type="number" placeholder="最大值" class="fr">
+      </div>
+      <a class="say-price-btn">确定</a>
     </div>
   </div>
 </template>
-<script>
-  export default {
-    props: ['showSayPriceBox'],
-    methods: {
-      cancel: function () {
-        this.$emit('cancelAction')
-      }
-    }
-  }
-</script>
 <style lang="scss" scoped>
-  .mobile-modal {
-    .mobile-modal-box {
-      .publish-seek {
-        background: #fff;
-        padding-top: .1rem;
-        padding-bottom: .4rem;
-        .content-line {
-          height: .8rem;
-          line-height: .8rem;
-          font-size: .26rem;
-          text-align: left;
-          border-bottom: .01rem solid #b7d5fe;
+  .say-price {
+    background: #f3f3f3;
+    padding: .18rem 0;
+    position: absolute;
+    top: .88rem;
+    bottom: 1rem;
+    width: 100%;
+    overflow-y: auto;
+    .form-list {
+      height: 7.53rem;
+      background: #fff;
+      padding-top: .2rem;
+      > div {
+        height: .7rem;
+        line-height: .7rem;
+        width: 6.12rem;
+        font-size: .28rem;
+        margin: 0 auto .2rem;
+        input {
+          height: .7rem;
+          text-align: center;
+          border: .01rem solid #666;
+          border-radius: .05rem;
+        }
+        &.form-title {
+          border: .01rem solid #666;
+          border-radius: .05rem;
+          padding: 0 .07rem 0 .17rem;
+          .fl {
+            span {
+              color: #666;
+            }
+          }
+          .fr {
+            img {
+              width: .12rem;
+              height: .06rem;
+              margin-left: .04rem;
+            }
+          }
+        }
+        &.form-item {
+          position: relative;
           input {
-            width: 3.49rem;
-            height: .52rem;
-            padding-left: .19rem;
-            border: .01rem solid #7e7e7e;
+            width: 2.93rem;
           }
-          span {
-            display: inline-block;
-            width: 1.76rem;
-            text-align: right;
-            i {
-              color: #ff0000;
-              margin-right: .05rem;
-              font-style: normal;
+          i {
+            position: absolute;
+            right: -.5rem;
+            top: 0;
+            font-size: .34rem;
+            &.icon-add {
+              color: #4768f3;
+            }
+            &.icon-minus {
+              color: #8d8d8d;
             }
           }
         }
-        > a {
-          display: block;
-          width: 5.19rem;
-          height: .84rem;
-          text-align: center;
-          line-height: .84rem;
-          font-size: .38rem;
-          margin: .3rem auto 0;
-          background: #3f84f6;
-          color: #fff;
-          border-radius: .08rem;
+        &.date {
+          input {
+            width: 4.8rem;
+          }
         }
       }
     }

components/mobile/applyPurchase/SayPriceInfo.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="say-price-info">
+    <div class="base-info">
+      <div class="content-line">
+        型号：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        品牌：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        规格：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        采购数量：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        币种：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        截止日期：<span>ASDASDASDASDASD</span>
+      </div>
+    </div>
+    <div class="base-info">
+      <div class="content-line">
+        买家：<span>ASDASDASDASDASD</span>
+      </div>
+      <div class="content-line">
+        联系电话：<span>ASDASDASDASDASD</span>
+      </div>
+    </div>
+    <div class="base-info say-info">
+      <img src="/images/mobile/@2x/applyPurchase/say-price-check.png" alt="">
+      <!--<img src="/images/mobile/@2x/applyPurchase/say-price-accept.png" alt="">-->
+      <div class="content-line">
+        华商龙肯德基撒话费卡刷卡
+      </div>
+      <div class="content-line">
+        报价人：<span>张三</span>
+      </div>
+      <div class="content-line">
+        电话：<span>13213123123</span>
+      </div>
+      <div class="content-line date">
+        交期(天)：<span>3-5</span>
+      </div>
+      <p>2018-01-22</p>
+      <div class="price-level">
+        <p>价格梯度：<span>(pcs)</span></p>
+        <ul>
+          <li>
+            <span>1+</span>
+            <span>$10</span>
+          </li>
+          <li>
+            <span>1+</span>
+            <span>$10</span>
+          </li>
+          <li>
+            <span>1+</span>
+            <span>$10</span>
+          </li>
+          <li>
+            <span>1+</span>
+            <span>$10</span>
+          </li>
+          <li>
+            <span>1+</span>
+            <span>$10</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <a class="say-price-btn">采纳报价</a>
+  </div>
+</template>
+<style lang="scss" scoped>
+  .say-price-info {
+    background: #f3f3f3;
+    padding: .18rem 0;
+    position: absolute;
+    top: .88rem;
+    bottom: 1rem;
+    width: 100%;
+    overflow-y: auto;
+    .base-info {
+      &.say-info {
+        height: 4.54rem;
+        position: relative;
+        > img {
+          position: absolute;
+          right: 0;
+          top: 0;
+        }
+        .content-line {
+          width: 4.55rem;
+          span {
+            color: #333;
+          }
+          &.date {
+            span {
+              color: #ef5042;
+            }
+          }
+        }
+        > p {
+          font-size: .24rem;
+          color: #999;
+        }
+        .price-level {
+          font-size: .26rem;
+          position: absolute;
+          top: 1.3rem;
+          right: .3rem;
+          width: 4rem;
+          text-align: center;
+          p {
+            margin-bottom: .1rem;
+            span {
+              color: #666;
+            }
+          }
+          ul {
+            li {
+              height: .52rem;
+              line-height: .52rem;
+              span {
+                padding-left: .22rem;
+                text-align: left;
+                display: inline-block;
+                border-top: .01rem solid #7e7e7e;
+                border-left: .01rem solid #7e7e7e;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                &:first-child {
+                  width: 45%;
+                }
+                &:last-child {
+                  width: 55%;
+                  border-right: .01rem solid #7e7e7e;
+                }
+              }
+              &:last-child {
+                border-bottom: .01rem solid #7e7e7e;
+              }
+            }
+          }
+        }
+      }
+    }
+    .say-price-btn {
+      margin: .87rem auto 0;
+    }
+  }
+</style>

components/mobile/applyPurchase/SeekList.vue

@@ -1,76 +1,78 @@
 <template>
   <ul class="seek-list">
-    <li>
-      <p><span>深圳市英唐数码有限公司</span></p>
+    <li v-for="(item, index) in purchaseManList.content">
+      <p>
+      <span v-if="item.inquiry.enterprise && item.inquiry.enterprise.enName">{{item.inquiry.enterprise.enName | enterpriseFilter}}</span>
+      <span v-else>{{item.userName | userNameFilter}}</span>
+      </p>
       <div>
         <div class="fl">
           <div>
-            品牌：<span>asjkfahksf</span>
+            品牌：<span>{{item.cmpCode || '-'}}</span>
           </div>
           <div>
-            型号：<span>asjkfahksf</span>
+            型号：<span>{{item.inbrand || '-'}}</span>
           </div>
           <div>
-            规格：<span>asjkfahksf</span>
+            规格：<span>{{item.spec || '-'}}</span>
           </div>
           <div>
-            截止日期：<span class="date">2018-02-03</span>
+            截止日期：<span class="date">{{item.endDate | date}}</span>
           </div>
         </div>
         <div class="fr">
-          <p>剩余：<span>04</span>小时</p>
-          <a href="">我要报价</a>
-        </div>
-      </div>
-    </li>
-    <li>
-      <p><span>深圳市英唐数码有限公司</span></p>
-      <div>
-        <div class="fl">
-          <div>
-            品牌：<span>asjkfahksf</span>
-          </div>
-          <div>
-            型号：<span>asjkfahksf</span>
-          </div>
-          <div>
-            规格：<span>asjkfahksf</span>
-          </div>
-          <div>
-            截止日期：<span class="date">2018-02-03</span>
-          </div>
-        </div>
-        <div class="fr">
-          <p>剩余：<span>04</span>小时</p>
-          <a href="">我要报价</a>
-        </div>
-      </div>
-    </li>
-    <li>
-      <p><span>深圳市英唐数码有限公司</span></p>
-      <div>
-        <div class="fl">
-          <div>
-            品牌：<span>asjkfahksf</span>
-          </div>
-          <div>
-            型号：<span>asjkfahksf</span>
-          </div>
-          <div>
-            规格：<span>asjkfahksf</span>
-          </div>
-          <div>
-            截止日期：<span class="date">2018-02-03</span>
-          </div>
-        </div>
-        <div class="fr">
-          <p>剩余：<span>04</span>小时</p>
-          <a href="">我要报价</a>
+          <p v-if="item.remainingTime > 0">剩余：
+            <span v-if="getDay(item.remainingTime) > 0" v-text="getDay(item.remainingTime)"></span>
+            <i v-if="getDay(item.remainingTime) > 0">&nbsp;天&nbsp;</i>
+            <span v-if="getDay(item.remainingTime) <= 0" v-text="getHours(item.remainingTime)"></span>
+            <i v-if="getDay(item.remainingTime) <= 0" >&nbsp;小时</i>
+          </p>
+          <p v-else>已截止</p>
+          <a v-if="item.remainingTime > 0 && (!item.quoted || item.quoted != 1) && (user.logged && ((item.inquiry.enterprise && user.data.enterprise && (item.inquiry.enterprise.uu === user.data.enterprise.uu)) || (!user.data.enterprise.uu && item.userUU == user.data.userUU  && !item.inquiry.enterprise)))">自己发布</a>
+          <a v-else>我要报价</a>
+          <a v-if="item.remainingTime > 0 && item.quoted == 1">已报价</a>
+          <!--<nuxt-link to="/mobile/applyPurchase/list/1">查看报价</nuxt-link>-->
         </div>
       </div>
     </li>
   </ul>
 </template>
+<script>
+  export default {
+    filters: {
+      date: function (date) {
+        const d = new Date(Number(date))
+        const year = d.getFullYear()
+        const monthTemp = d.getMonth() + 1
+        const month = monthTemp < 10 ? '0' + monthTemp : '' + monthTemp
+        const day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate() + ' '
+        return year + '-' + month + '-' + day
+      },
+      enterpriseFilter (str) {
+        return str.length > 4 ? str.substring(0, 2) + '**' + str.substring(str.length - 2, str.length) : str
+      },
+      userNameFilter (str) {
+        return str.substring(0, 1) + '**'
+      }
+    },
+    computed: {
+      purchaseManList () {
+        return this.$store.state.applyPurchase.purchaseManList.purchaseManList.data
+      },
+      user () {
+        return this.$store.state.option.user
+      }
+    },
+    methods: {
+      getDay: function (timeStamp) {
+        return Math.floor(timeStamp / (1000 * 60 * 60 * 24))
+      },
+      getHours: function (timeStamp) {
+        return Math.floor((timeStamp / (1000 * 60 * 60)) % 24)
+      }
+    }
+  }
+</script>
 <style lang="scss" scoped>
   .seek-list {
     width: 7.26rem;
@@ -110,8 +112,14 @@
           line-height: .46rem;
           border-right: .04rem dashed #9f9f9f;
 
-          span {
-            color: #333;
+          > div {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+
+            span {
+              color: #333;
+            }
           }
 
         }
@@ -127,6 +135,10 @@
               color: #ff3208;
             }
 
+            i {
+              font-style: normal;
+            }
+
           }
           a {
             display: block;

components/mobile/index.js

@@ -1,5 +1,7 @@
 import MobileHeader from './MobileHeader.vue'
 import MobileFooter from './MobileFooter.vue'
 import Home from './Home.vue'
+import SayPriceInfo from './applyPurchase/SayPriceInfo.vue'
+import SayPrice from './applyPurchase/SayPrice.vue'
 
-export { MobileFooter, MobileHeader, Home }
+export { MobileFooter, MobileHeader, Home, SayPriceInfo, SayPrice }

pages/index.vue

@@ -101,7 +101,9 @@
             'BT2018012900002056']
         }),
         store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 50, enUU: store.state.option.user.data.enterprise ? store.state.option.user.data.enterprise.uu : null})
-      ]) : []
+      ]) : [
+        store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 5, enUU: store.state.option.user.data.enterprise ? store.state.option.user.data.enterprise.uu : null})
+      ]
     },
     computed: {
       user () {

pages/mobile/applyPurchase/list/_id.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="mobile-content">
+    <say-price-info></say-price-info>
+  </div>
+</template>
+<script>
+  import {SayPriceInfo} from '~components/mobile'
+  export default {
+    layout: 'mobile',
+    components: {
+      SayPriceInfo
+    }
+  }
+</script>

pages/mobile/applyPurchase/list/index.vue

@@ -13,6 +13,11 @@
     layout: 'mobile',
     components: {
       SeekList
+    },
+    fetch ({store}) {
+      return Promise.all([
+        store.dispatch('applyPurchase/loadPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: store.state.option.user.data.enterprise ? store.state.option.user.data.enterprise.uu : null})
+      ])
     }
   }
 </script>

pages/mobile/applyPurchase/sayPrice/_id.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="mobile-content">
+    <say-price></say-price>
+  </div>
+</template>
+<script>
+  import {SayPrice} from '~components/mobile'
+  export default {
+    layout: 'mobile',
+    components: {
+      SayPrice
+    }
+  }
+</script>

pages/mobile/user/index.vue

@@ -6,17 +6,28 @@
         <p v-text="userInfo.data.userName"></p>
         <p v-text="enterpriseInfo.enName"></p>
       </div>
-      <span @click="onclick()">{{listName}}<i class="iconfont icon-arrow-down"></i></span>
-      <ul class="supdown" v-if="down">
-        <li @click="onDown('1')" v-show="!isDevice || !isShop">全部收藏</li>
-        <li @click="onDown('-1')" v-show="isDevice || !isShop">店铺关注</li>
-        <li @click="onDown('0')" v-show="!isDevice || isShop">器件收藏</li>
-      </ul>
+      <a>切换至卖家中心</a>
     </div>
-    <div class="collect-list-type" v-if="focusPage.totalElements > 0 && isShop">
-      <p>店铺</p>
+    <ul class="switch-list">
+      <li :class="{active: activeType == 'seek'}" @click="activeType = 'seek'">我的求购</li>
+      <li :class="{active: activeType == 'comp'}" @click="activeType = 'comp'">器件收藏</li>
+      <li :class="{active: activeType == 'store'}" @click="activeType = 'store'">店铺关注</li>
+    </ul>
+    <div class="seek" v-if="activeType == 'seek'">
+      <ul class="seek-type">
+        <li :class="{active: seekType == 'wait'}" @click="switchSeek('wait')"><div>待报价</div></li>
+        <li :class="{active: seekType == 'done'}" @click="switchSeek('done')"><div>已报价</div></li>
+        <li :class="{active: seekType == 'accept'}" @click="switchSeek('accept')"><div>已采纳</div></li>
+      </ul>
+      <div class="search-content">
+        <input type="text" placeholder="请输入您要查找的型号或品牌">
+        <span>
+        <i class="iconfont icon-sousuo"></i>
+        </span>
+      </div>
+      <seek-list></seek-list>
     </div>
-    <div class="shop-list" v-if="isShop" v-for="item in focusPage.content" @click="goStoreDetail(item.storeInfo.uuid)">
+    <div class="shop-list" v-if="activeType == 'store'" v-for="item in focusPage.content" @click="goStoreDetail(item.storeInfo.uuid)">
       <h3>{{item.storeName}}</h3>
       <div class="list-item">
         <div class="item-img">
@@ -31,10 +42,7 @@
         </div>
       </div>
     </div>
-    <div class="collect-list-type" v-if="collectSave.totalElements > 0 && isDevice">
-      <p>器件</p>
-    </div>
-    <div class="detail-brand" v-for="(item, index) in collectSave.content" v-if="isDevice" @click="goComponentDetail(item.componentinfo.uuid)">
+    <div class="detail-brand" v-for="(item, index) in collectSave.content" v-if="activeType == 'comp'" @click="goComponentDetail(item.componentinfo.uuid)">
       <a>
         <div class="brand-item">
           <p>型号：<span>{{item.componentinfo.code}}</span></p>
@@ -44,7 +52,7 @@
         </div>
       </a>
     </div>
-    <div class="none-state" v-if="(collectSave.totalElements == 0 && !isShop) || (focusPage.totalElements == 0 && !isDevice) || (collectSave.totalElements == 0 && focusPage.totalElements == 0)">
+    <div class="none-state" v-if="(collectSave.totalElements == 0 && activeType == 'comp') || (focusPage.totalElements == 0 && activeType == 'store') || (collectSave.totalElements == 0 && focusPage.totalElements == 0)">
       <img src="/images/mobile/@2x/empty-collect.png">
       <p v-text="getRemindText()"></p>
       <nuxt-link to="/">返回首页</nuxt-link>
@@ -66,57 +74,35 @@
 
 <script>
   import RemindBox from '~components/mobile/common/RemindBox.vue'
+  import SeekList from '~components/mobile/applyPurchase/SeekList.vue'
   export default {
     layout: 'mobile',
     data () {
       return {
         userName: '',
-        down: false,
         count: '',
         page: '',
         type: '',
-        listName: '全部收藏',
-        isShop: true,
-        isDevice: true,
+        activeType: 'seek',
         collectResult: '取消成功',
         timeoutCount: 0,
         showStoreInfo: false,
-        storeInfo: {}
+        storeInfo: {},
+        seekType: 'wait'
       }
     },
     components: {
-      RemindBox
+      RemindBox,
+      SeekList
     },
     fetch ({ store }) {
       return Promise.all([
         store.dispatch('product/saveStores', { count: 100, page: 1, type: 'component' }),
-        store.dispatch('shop/StoreFocusPage', { count: 100, page: 1 })
+        store.dispatch('shop/StoreFocusPage', { count: 100, page: 1 }),
+        store.dispatch('applyPurchase/loadBuyerPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: store.state.option.user.data.enterprise ? store.state.option.user.data.enterprise.uu : store.state.option.user.data.userUU})
       ])
     },
     methods: {
-      onclick () {
-        this.down = !this.down
-      },
-      onDown (type) {
-        if (type === '-1') {
-          this.listName = '店铺关注'
-          this.isShop = true
-          this.isDevice = false
-          this.down = false
-        }
-        if (type === '0') {
-          this.listName = '器件收藏'
-          this.isDevice = true
-          this.isShop = false
-          this.down = false
-        }
-        if (type === '1') {
-          this.listName = '全部收藏'
-          this.isDevice = true
-          this.isShop = true
-          this.down = false
-        }
-      },
       cancelFocus: function (type, item, event) {
         event.stopPropagation()
         if (type === 'store') {
@@ -154,12 +140,10 @@
         this.$router.push('/mobile/brand/componentDetail/' + uuid)
       },
       getRemindText: function () {
-        if (this.isDevice && !this.isShop) {
+        if (this.activeType === 'comp') {
           return '抱歉，暂无器件收藏'
-        } else if (!this.isDevice && this.isShop) {
+        } else if (this.activeType === 'store') {
           return '抱歉，暂无店铺关注'
-        } else {
-          return '抱歉，暂无收藏记录'
         }
       },
       selectStoreInfo: function (store, event) {
@@ -169,6 +153,16 @@
       },
       checkInfo: function (str) {
         return str && str.trim() !== ''
+      },
+      switchSeek: function (type) {
+        this.seekType = type
+        if (type === 'wait') {
+          this.$store.dispatch('applyPurchase/loadBuyerPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: this.$store.state.option.user.data.enterprise ? this.$store.state.option.user.data.enterprise.uu : null})
+        } else if (type === 'done') {
+          this.$store.dispatch('applyPurchase/loadBuyerPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: this.$store.state.option.user.data.enterprise ? this.$store.state.option.user.data.enterprise.uu : null, _state: 'done'})
+        } else {
+          this.$store.dispatch('applyPurchase/loadBuyerPurchaseManList', {pageNumber: 1, pageSize: 10, enUU: this.$store.state.option.user.data.enterprise ? this.$store.state.option.user.data.enterprise.uu : null, _state: 'done'})
+        }
       }
     },
     computed: {
@@ -204,8 +198,6 @@
 <style scoped lang="scss">
   .user-content{
     margin-bottom: .98rem;
-    background: #dfe2e4;
-
     .none-state{
       text-align: center;
       padding:1.5rem 0;
@@ -239,24 +231,6 @@
       background:#fff;
       width:100%;
       position:relative;
-      border-bottom: .1rem solid #dfe2e4;
-      .supdown{
-        position:absolute;
-        top:.8rem;
-        right:.3rem;
-        z-index:10;
-        width:1.7rem;
-        background:#616264;
-        border-radius:.1rem;
-        li{
-          font-size: .28rem;
-          color:#ffffff;
-          height: .32rem;
-          line-height: .32rem;
-          margin: .4rem 0;
-          text-align: center;
-        }
-      }
       img{
         display: inline-block;
         width:1.25rem;
@@ -284,11 +258,15 @@
           }
         }
       }
-      span{
-        font-size:.28rem;
-        color:#53a0f7;
-        position: relative;
-        bottom: .3rem;
+      > a {
+        font-size: .24rem;
+        position: absolute;
+        top: .45rem;
+        right: .1rem;
+        color: #3f84f6;
+        border: .01rem solid #3f84f6;
+        border-radius: .2rem;
+        padding: .06rem .12rem;
       }
     }
     .shop-list {
@@ -414,5 +392,60 @@
         border-bottom: .06rem solid #418bf6;
       }
     }
+    ul.switch-list {
+      li {
+        display: inline-block;
+        width: 2.5rem;
+        height: .63rem;
+        line-height: .63rem;
+        text-align: center;
+        font-size: .28rem;
+        color: #666;
+        background: #fff;
+        border: .01rem solid #b4b4b4;
+        &.active {
+          background: #0067e7;
+          border: .01rem solid #0067e7;
+          color: #fff;
+        }
+        &:first-child {
+          border-left: none;
+        }
+        &:last-child {
+          border-right: none;
+        }
+      }
+    }
+    .seek {
+      ul.seek-type {
+        margin-top: .06rem;
+        li {
+          font-size: .28rem;
+          color: #666;
+          display: inline-block;
+          width: 2.5rem;
+          text-align: center;
+          div {
+            width: 2rem;
+            border-bottom: .04rem solid #c1c4c9;
+            margin: 0 auto;
+            height: .6rem;
+            line-height: .6rem;
+          }
+          &.active {
+            color: #3f84f6;
+            div {
+              border-color: #3f84f6;
+            }
+          }
+        }
+      }
+      .search-content {
+        text-align: center;
+        input {
+          margin: .25rem 0 0 0;
+        }
+      }
+    }
   }
 </style>

store/applyPurchase.js

@@ -45,6 +45,15 @@ export const actions = {
         commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
       })
   },
+  loadBuyerPurchaseManList ({ commit }, params = {}) {
+    commit('purchaseManList/REQUEST_PURCHASEMAN')
+    return axios.get('/inquiry/buyer/quotations', {params})
+      .then(response => {
+        commit('purchaseManList/GET_PURCHASEMAN_SUCCESS', response.data)
+      }, err => {
+        commit('purchaseManList/GET_PURCHASEMAN_FAILURE', err)
+      })
+  },
   // 求购排行榜
   loadPurchaseApplyRank ({ commit }, params = {}) {
     commit('purchaseApplyRank/REQUEST_PURCHASERANK', params)