新增B2B销售订单

components/mobile/MobileHeader.vue

@@ -241,6 +241,8 @@
         } else if (this.startWith(val, '/mobile/order/logistics')) {
           this.showSearchIcon = false
           title = '物流信息'
+        } else if (this.startWith(val, '/mobile/order/b2border')) {
+          title = '采购订单'
         } else if (this.startWith(val, '/mobile/order')) {
           this.showSearchIcon = false
           if (query.type === 'buyer') {

nuxt.config.js

@@ -208,6 +208,7 @@ module.exports = {
     // 代办事项
     '/adminToDo/**': baseUrl,
     // 账户中心获取申请绑定列表接口
-    '/api/userspace/apply/**': ssoUrl
+    '/api/userspace/apply/**': ssoUrl,
+    '/sale/orders/**': uasUrl
   }
 }

pages/mobile/order/index.vue

@@ -1,5 +1,13 @@
 <template>
   <div class="order-wrapper">
+    <div class="order-tab" v-if="vendorType === 'saler'">
+      <div class="order-tab-wrapper clearfix">
+        <nuxt-link class="fl tab" to="/mobile/order/orderbtob" tag="div" >
+          B2B
+        </nuxt-link>
+        <div class="fl active tab">商城</div>
+      </div>
+    </div>
     <div class="order-nav">
       <div :class="activeType === '' ? 'active': ''" @click="ChangeList('')"><span>全部</span></div>
       <div :class="activeType === 'tobeconfirmed' ? 'active' : ''" @click="ChangeList('tobeconfirmed')"><span>待付款</span></div>
@@ -18,7 +26,7 @@
           <i class="iconfont icon-sousuo"></i>
       </span>
     </div>
-    <ul class="order-list-wrap"  id="order-wrapper" v-show="orderList.length > 0">
+    <ul class="order-list-wrap" :class="vendorType === 'saler' ? 'order-list-wrap2' : ''"  id="order-wrapper" v-show="orderList.length > 0">
       <li class="clearfix" v-for="item in orderList">
         <div class="orderNumber clearfix">
           <div class="pull-left">订单号：<span>{{item.orderid}}</span></div>
@@ -270,7 +278,7 @@
              :allPage="allPage"
              :page="page"
              @pullUpAction="getMoreSearch"></pull-up>
-  </div>
+    </div>
 </template>
 
 <script>
@@ -914,572 +922,598 @@
     height: $value;
     line-height: $value;
   }
-.order-wrapper {
-  background: #f1f3f6;
-  margin: 1.26rem 0 0.98rem 0;
-  height: calc(100vh - 1.26rem - 0.98rem);
-  /*padding-bottom: 0.96rem;*/
-  .order-nav {
-    background: #fff;
-    div {
-      height: 0.82rem;
-      line-height: 0.82rem;
-      display: inline-block;
-      width: 25%;
-      text-align: center;
-      font-size: .28rem;
-      color: #666;
-      &.active span{
-        color: #3f84f6;
-        border-bottom: 0.04rem solid #3f84f6;
-        padding-bottom: 0.2rem;
+  .order-wrapper {
+    background: #f1f3f6;
+    margin: 1.26rem 0 0.98rem 0;
+    height: calc(100vh - 1.26rem - 0.98rem);
+    /*padding-bottom: 0.96rem;*/
+    .order-tab {
+      background: #3f84f6;
+      padding-bottom: 0.2rem;
+      .order-tab-wrapper {
+        border: solid 1px #ffffff;
+        width: 7.06rem;
+        margin: 0 auto;
+        border-radius: 0.04rem;
+        line-height: 0.72rem;
+        height: 0.72rem;
+        overflow: hidden;
+        div {
+          color: #ffffff;
+          font-size: 0.28rem;
+          text-align: center;
+          width: 50%;
+          &.active {
+            background-color: #ffffff;
+            color: #3f84f6;
+          }
+        }
       }
     }
-  }
-  .search-content2 {
-    text-align: center;
-    padding: .25rem 0 0 0;
-    margin-top: 0 !important;
-    input {
-      width: 7.1rem;
-      border: 1px solid #376ff3;
-    }
-    span {
-      /*height: .46rem;*/
-      /*line-height: .46rem;*/
+    .order-nav {
+      background: #fff;
+      div {
+        height: 0.82rem;
+        line-height: 0.82rem;
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        font-size: .28rem;
+        color: #666;
+        &.active span{
+          color: #3f84f6;
+          border-bottom: 0.04rem solid #3f84f6;
+          padding-bottom: 0.2rem;
+        }
+      }
     }
-  }
-  .order-list-wrap {
-    height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem);
-    overflow-y: scroll;
-    li {
-      margin-bottom: 0.2rem;
+    .search-content2 {
+      text-align: center;
+      padding: .25rem 0 0 0;
+      margin-top: 0 !important;
+      input {
+        width: 7.1rem;
+        border: 1px solid #376ff3;
+      }
+      span {
+        /*height: .46rem;*/
+        /*line-height: .46rem;*/
+      }
     }
-    .list-wrap-title{
-       padding: 0 0.2rem;
-       background: #fff;
-       @include lineHeight(0.67rem);
-       font-size: 0.28rem;
-       color: #333;
-       border-bottom: 1px solid #e4e4e4;
-       .pull-left {
-         width: 5rem;
-         @include overFlowHidden();
-         span {
-           max-width: 3rem;
+    .order-list-wrap {
+      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem);
+      overflow-y: scroll;
+      li {
+        margin-bottom: 0.2rem;
+      }
+      .list-wrap-title{
+         padding: 0 0.2rem;
+         background: #fff;
+         @include lineHeight(0.67rem);
+         font-size: 0.28rem;
+         color: #333;
+         border-bottom: 1px solid #e4e4e4;
+         .pull-left {
+           width: 5rem;
            @include overFlowHidden();
-           display: inline-block;
-         }
-         img {
-           width: 0.18rem;
-           height: 0.32rem;
-           vertical-align: top;
-           margin-top: 0.18rem;
-           margin-left: 0.1rem;
+           span {
+             max-width: 3rem;
+             @include overFlowHidden();
+             display: inline-block;
+           }
+           img {
+             width: 0.18rem;
+             height: 0.32rem;
+             vertical-align: top;
+             margin-top: 0.18rem;
+             margin-left: 0.1rem;
+           }
          }
-       }
-       .pull-right {
-         .red {
-           color: #f21c1c;
+         .pull-right {
+           .red {
+             color: #f21c1c;
+           }
          }
-       }
-    }
-    .list-wrap-content {
-      background: #f9f9f8;
-      padding: 0.3rem 0.2rem;
-      padding-right: 0.32rem;
-      border-bottom: 1px solid #e4e4e4;
-      .list-item {
-        font-size: 0.28rem;
-        color: #333;
-        /*line-height: 0.5rem;*/
-        margin-top: 0.22rem;
-        &:nth-child(1) {
-          margin-top: 0px;
-        }
-        .list-wrap-content-brand {
-          @include overFlowHidden();
-          .spec {
-            width: 3.1rem;
+      }
+      .list-wrap-content {
+        background: #f9f9f8;
+        padding: 0.3rem 0.2rem;
+        padding-right: 0.32rem;
+        border-bottom: 1px solid #e4e4e4;
+        .list-item {
+          font-size: 0.28rem;
+          color: #333;
+          /*line-height: 0.5rem;*/
+          margin-top: 0.22rem;
+          &:nth-child(1) {
+            margin-top: 0px;
+          }
+          .list-wrap-content-brand {
             @include overFlowHidden();
-            margin-right: 0.2rem;
-            &.noMargin {
-              margin-right: 0;
-              width: 1.5rem;
+            .spec {
+              width: 3.1rem;
+              @include overFlowHidden();
+              margin-right: 0.2rem;
+              &.noMargin {
+                margin-right: 0;
+                width: 1.5rem;
+              }
             }
           }
+          .name {
+            color: #666;
+          }
+          .lab {
+            color: #999;
+            font-size: 0.24rem;
+            max-width: 2.1rem;
+            @include overFlowHidden();
+            span {
+              font-size: 0.16rem;
+            }
+          }
+          .pri {
+            font-size: 0.28rem;
+            color: #f43938;
+            @include overFlowHidden();
+            width: 2.4rem;
+          }
         }
-        .name {
-          color: #666;
-        }
-        .lab {
-          color: #999;
-          font-size: 0.24rem;
-          max-width: 2.1rem;
+      }
+      .orderNumber {
+        font-size: 0.27rem;
+        color: #666;
+        border-bottom: 1px solid #e4e4e4;
+        @include lineHeight(0.88rem);
+        background: #fff;
+        padding: 0 0.2rem;
+        .pull-left {
+          width: 5rem;
           @include overFlowHidden();
           span {
-            font-size: 0.16rem;
+            color: #3f84f6
           }
         }
-        .pri {
-          font-size: 0.28rem;
-          color: #f43938;
-          @include overFlowHidden();
-          width: 2.4rem;
-        }
       }
-    }
-    .orderNumber {
-      font-size: 0.27rem;
-      color: #666;
-      border-bottom: 1px solid #e4e4e4;
-      @include lineHeight(0.88rem);
-      background: #fff;
-      padding: 0 0.2rem;
-      .pull-left {
-        width: 5rem;
+      .list-all-info{
+        text-align: right;
+        background: #fff;
+        padding: 0 0.2rem;
         @include overFlowHidden();
-        span {
-          color: #3f84f6
-        }
-      }
-    }
-    .list-all-info{
-      text-align: right;
-      background: #fff;
-      padding: 0 0.2rem;
-      @include overFlowHidden();
-      line-height: 0.66rem;
-      font-size: 0.26rem;
-      color: #333;
-      border-bottom: 1px solid #e4e4e4;
-      .pri {
-        font-size: 0.32rem;
-        color: #f43938;
-      }
-      .red {
-        color: #f43938;
-        font-size: 0.24rem;
-      }
-      .lab {
-        color: #999;
-        font-size: 0.24rem;
-      }
-    }
-    .list-btn {
-      background: #fff;
-      @include lineHeight(0.8rem);
-      padding: 0 0.2rem;
-      div {
-        display: inline-block;
-        width: 1.5rem;
-        @include lineHeight(0.56rem);
-        border: 1px solid #333;
+        line-height: 0.66rem;
         font-size: 0.26rem;
         color: #333;
-        text-align: center;
-        margin-top: 0.11rem;
-        margin-left: 0.2rem;
-        border-radius: 3px;
-        &.sendGoods {
+        border-bottom: 1px solid #e4e4e4;
+        .pri {
+          font-size: 0.32rem;
           color: #f43938;
-          border: 1px solid #f43938;
         }
-        &.cancat {
-          height: 0.56rem;
-          line-height: 0.56rem;
-          border: 1px solid #3f84f6;
-          color: #3f84f6;
+        .red {
+          color: #f43938;
+          font-size: 0.24rem;
+        }
+        .lab {
+          color: #999;
+          font-size: 0.24rem;
+        }
+      }
+      .list-btn {
+        background: #fff;
+        @include lineHeight(0.8rem);
+        padding: 0 0.2rem;
+        div {
+          display: inline-block;
+          width: 1.5rem;
+          @include lineHeight(0.56rem);
+          border: 1px solid #333;
           font-size: 0.26rem;
+          color: #333;
           text-align: center;
+          margin-top: 0.11rem;
+          margin-left: 0.2rem;
           border-radius: 3px;
-          padding: 0 0.1rem;
-          overflow: hidden;
-          width: auto;
-          i {
+          &.sendGoods {
+            color: #f43938;
+            border: 1px solid #f43938;
+          }
+          &.cancat {
+            height: 0.56rem;
+            line-height: 0.56rem;
+            border: 1px solid #3f84f6;
+            color: #3f84f6;
             font-size: 0.26rem;
+            text-align: center;
+            border-radius: 3px;
+            padding: 0 0.1rem;
+            overflow: hidden;
+            width: auto;
+            i {
+              font-size: 0.26rem;
+            }
           }
         }
       }
-    }
-    .lookMorePro {
-      background: #fff;
-      font-size: 0.28rem;
-      color: #999;
-      text-align: center;
-      border-bottom: 1px solid #e4e4e4;
-      @include lineHeight(0.67rem);
-      img {
-        transform: rotate(90deg);
-        width: 0.16rem;
-        height: 0.26rem;
-        vertical-align: top;
-        margin-top: 0.23rem;
-        margin-left: 0.1rem;
-      }
-    }
-  }
-  .sendGoods_Alert {
-    background: #fff;
-    position: fixed;
-    bottom: 0.98rem;
-    left: 0;
-    width: 100%;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    overflow: hidden;
-    .sendGoods_title {
-      color: #333;
-      font-size: 0.42rem;
-      text-align: center;
-      line-height: 1rem;
-      font-weight: 600;
-      position: relative;
-      i {
-        position: absolute;
-        font-size: 16px;
-        right: 0.2rem;
-      }
-    }
-    .sendGoods_buyer {
-      padding: 0.3rem 0.2rem;
-      border-bottom: 1px solid #d9d9d9;
-      border-top: 1px solid #d9d9d9;
-      .sendGoods_buyer_top {
-        color: #333;
-        font-size: 0.3rem;
-        font-weight: bold;
-        .name {
-          margin-right: 0.3rem;
-          margin-left: 0.32rem;
-        }
-      }
-      .sendGoods_buyer_bottom {
-        color: #333;
-        font-size: 0.26rem;
-        margin-top: 0.2rem;
-        img {
-          width: 0.22rem;
-          height: 0.29rem;
-          margin-right: 0.1rem;
-          margin-top: -0.1rem;
-        }
-      }
-    }
-    .sendGoods_list {
-      padding: 0 0.2rem;
-      @include lineHeight(0.8rem);
-      border-bottom: 1px solid #d9d9d9;
-      font-size: 0.32rem;
-      color: #333;
-      /*.ti {*/
-        /*font-weight: bold;*/
-      /*}*/
-      .pull-right {
+      .lookMorePro {
+        background: #fff;
         font-size: 0.28rem;
         color: #999;
+        text-align: center;
+        border-bottom: 1px solid #e4e4e4;
+        @include lineHeight(0.67rem);
         img {
-          width: 0.14rem;
-          height: 0.24rem;
-          vertical-align: middle;
-          margin-top: -0.02rem;
+          transform: rotate(90deg);
+          width: 0.16rem;
+          height: 0.26rem;
+          vertical-align: top;
+          margin-top: 0.23rem;
           margin-left: 0.1rem;
         }
       }
-      input {
-        width: 4rem;
-        text-align: right;
-        color: #333;
-      }
     }
-    .sendGoods_Btn {
-      @include lineHeight(1rem);
-      text-align: center;
-      color: #fff;
-      font-size: 0.36rem;
-      background: #3f84f6;
+    .order-list-wrap2 {
+      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
     }
-  }
-  .search-content {
-    margin-top: 0.88rem;
-    margin-bottom: 0.2rem;
-    text-align: center;
-    padding: .25rem 0 0 0;
-    input {
-      border: 1px solid #376ff3;
-    }
-    span {
-      /*height: .46rem;*/
-      /*line-height: .46rem;*/
-    }
-  }
-  .peisong_Alert {
-    background: #f1f3f6;
-    position: fixed;
-    bottom: 0.98rem;
-    left: 0;
-    right: 0;
-    top: 0;
-    z-index: 11111;
-    ul {
-      height: calc(100vh - 1.2rem - 1.7rem - 1rem);
-      overflow-y: scroll;
-      li {
-        line-height: 1rem;
-        background: #fff;
-        padding: 0 0.2rem;
-        font-size: 0.28rem;
-        color: #333;
-        border-bottom: 1px solid #e0e1e2;
-        div.name {
-          @include overFlowHidden();
-        }
-        div.target {
-          width: 0.36rem;
-          height: 0.36rem;
-          border-radius: 50%;
-          overflow: hidden;
-          border: 1px solid #a4a4a4;
-          margin-top: 0.3rem;
-          &.active {
-            background-image: url('/images/order/getChoose_icon.png');
-            background-size: 100% 100%;
-            border: 0px;
-          }
-        }
-      }
-    }
-    .sendGoods_Btn {
-      @include lineHeight(1rem);
-      text-align: center;
-      color: #fff;
-      font-size: 0.36rem;
-      background: #3f84f6;
-    }
-  }
-  .deleteKuang {
-    position: fixed;
-    background: rgba(0,0,0,0.5);
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    z-index: 9999;
-    .kuangContent {
-      border-radius: 5px;
+    .sendGoods_Alert {
       background: #fff;
-      width: 5rem;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate3d(-50%, -50%, 0);
+      position: fixed;
+      bottom: 0.98rem;
+      left: 0;
+      width: 100%;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
       overflow: hidden;
-      .titleinfo {
-        font-size: .3rem;
-        color: #666;
-        text-align: center;
-        margin-top: 0.5rem;
-        margin-bottom: 0.1rem;
-      }
-      .title {
-        background: #5078cb;
-        height: .7rem;
-        line-height: .7rem;
-        font-size: .3rem;
-        color: #fff;
-        text-align: center;
-      }
-      .info {
-        color: #f00;
+      .sendGoods_title {
+        color: #333;
+        font-size: 0.42rem;
         text-align: center;
-      }
-      .K_btn {
-        margin-top: 0.4rem;
-        line-height: 0.7rem;
-        height: 0.7rem;
-        &::after{
-          clear: both;
-          display: block;
-          content: ' ';
-          visibility: hidden;
-          zoom: 1;
+        line-height: 1rem;
+        font-weight: 600;
+        position: relative;
+        i {
+          position: absolute;
+          font-size: 16px;
+          right: 0.2rem;
         }
-        div {
-          float: left;
-          width: 50%;
+      }
+      .sendGoods_buyer {
+        padding: 0.3rem 0.2rem;
+        border-bottom: 1px solid #d9d9d9;
+        border-top: 1px solid #d9d9d9;
+        .sendGoods_buyer_top {
+          color: #333;
           font-size: 0.3rem;
-          text-align: center;
-          &.cancelBtn {
-            background: #b4b5b9;
-            color: #333;
+          font-weight: bold;
+          .name {
+            margin-right: 0.3rem;
+            margin-left: 0.32rem;
           }
-          &.answerBtn {
-            background: #5078cb;
-            color: #fff;
+        }
+        .sendGoods_buyer_bottom {
+          color: #333;
+          font-size: 0.26rem;
+          margin-top: 0.2rem;
+          img {
+            width: 0.22rem;
+            height: 0.29rem;
+            margin-right: 0.1rem;
+            margin-top: -0.1rem;
           }
         }
       }
-    }
-    i {
-      font-size: .6rem;
-      position: absolute;
-      right: -0.3rem;
-      top: -0.35rem;
-      color: #fff;
-      &::after{
-        position: absolute;
-        top: -0.1rem;
-        left: -0.1rem;
-        right: -0.1rem;
-        bottom: -0.1rem;
-        content: ' '
+      .sendGoods_list {
+        padding: 0 0.2rem;
+        @include lineHeight(0.8rem);
+        border-bottom: 1px solid #d9d9d9;
+        font-size: 0.32rem;
+        color: #333;
+        /*.ti {*/
+          /*font-weight: bold;*/
+        /*}*/
+        .pull-right {
+          font-size: 0.28rem;
+          color: #999;
+          img {
+            width: 0.14rem;
+            height: 0.24rem;
+            vertical-align: middle;
+            margin-top: -0.02rem;
+            margin-left: 0.1rem;
+          }
+        }
+        input {
+          width: 4rem;
+          text-align: right;
+          color: #333;
+        }
+      }
+      .sendGoods_Btn {
+        @include lineHeight(1rem);
+        text-align: center;
+        color: #fff;
+        font-size: 0.36rem;
+        background: #3f84f6;
       }
     }
-    .title {
-      background: #3f84f6;
-      height: 0.7rem;
-      line-height: 0.7rem;
-      color: #fff;
+    .search-content {
+      margin-top: 0.88rem;
+      margin-bottom: 0.2rem;
       text-align: center;
-      font-size: 0.3rem;
-      position: relative;
-    }
-    .Kuang {
-      max-height: 10rem;
-      width: 6.7rem;
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate3d(-50%, -50%, 0);
-      background: #ececec;
-      border-radius: 5px;
+      padding: .25rem 0 0 0;
+      input {
+        border: 1px solid #376ff3;
+      }
+      span {
+        /*height: .46rem;*/
+        /*line-height: .46rem;*/
+      }
     }
-    .content {
-      overflow-y: scroll;
-      max-height: 9.3rem;
-      .infob {
-        background: #e3edfd;
-        padding: 0.2rem;
-        .info {
+    .peisong_Alert {
+      background: #f1f3f6;
+      position: fixed;
+      bottom: 0.98rem;
+      left: 0;
+      right: 0;
+      top: 0;
+      z-index: 11111;
+      ul {
+        height: calc(100vh - 1.2rem - 1.7rem - 1rem);
+        overflow-y: scroll;
+        li {
+          line-height: 1rem;
+          background: #fff;
+          padding: 0 0.2rem;
+          font-size: 0.28rem;
           color: #333;
-          font-size: 0.3rem;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          margin-bottom: 0.18rem;
-          .name {
-            color: #666;
+          border-bottom: 1px solid #e0e1e2;
+          div.name {
+            @include overFlowHidden();
           }
-          div {
-            display: inline-block;
+          div.target {
+            width: 0.36rem;
+            height: 0.36rem;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 1px solid #a4a4a4;
+            margin-top: 0.3rem;
+            &.active {
+              background-image: url('/images/order/getChoose_icon.png');
+              background-size: 100% 100%;
+              border: 0px;
+            }
           }
         }
       }
-      .content_sq {
-        width: 6.4rem;
-        margin: 0.1rem auto;
+      .sendGoods_Btn {
+        @include lineHeight(1rem);
+        text-align: center;
+        color: #fff;
+        font-size: 0.36rem;
+        background: #3f84f6;
+      }
+    }
+    .deleteKuang {
+      position: fixed;
+      background: rgba(0,0,0,0.5);
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 9999;
+      .kuangContent {
+        border-radius: 5px;
         background: #fff;
-        padding: 0.2rem 0rem;
-        .list {
-          margin-bottom: 0.18rem;
+        width: 5rem;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        overflow: hidden;
+        .titleinfo {
+          font-size: .3rem;
+          color: #666;
+          text-align: center;
+          margin-top: 0.5rem;
+          margin-bottom: 0.1rem;
         }
-        .fl {
-          width: 3.2rem;
+        .title {
+          background: #5078cb;
+          height: .7rem;
+          line-height: .7rem;
+          font-size: .3rem;
+          color: #fff;
+          text-align: center;
         }
-        .table {
-          width: 4.2rem;
-          margin-top: -0.1rem;
+        .info {
+          color: #f00;
+          text-align: center;
         }
-        .labelinfo {
-          background-image: url('/images/mobile/@2x/labelTop.png');
-          background-repeat: no-repeat;
-          width: 6.29rem;
-          height: 0.64rem;
-          line-height: 0.64rem;
-          background-size: 100%;
-          margin-top: 0rem;
-          margin-right: 0rem;
-          background-color: rgba(0, 0, 0, 0);
-          color: #666;
+        .K_btn {
+          margin-top: 0.4rem;
+          line-height: 0.7rem;
+          height: 0.7rem;
+          &::after{
+            clear: both;
+            display: block;
+            content: ' ';
+            visibility: hidden;
+            zoom: 1;
+          }
+          div {
+            float: left;
+            width: 50%;
+            font-size: 0.3rem;
+            text-align: center;
+            &.cancelBtn {
+              background: #b4b5b9;
+              color: #333;
+            }
+            &.answerBtn {
+              background: #5078cb;
+              color: #fff;
+            }
+          }
         }
       }
-    }
-  }
-  .cancelOrder {
-    background: #fff;
-    position: absolute;
-    bottom: 0.98rem;
-    left: 0;
-    width: 100%;
-    border-top-left-radius: 5px;
-    border-top-right-radius: 5px;
-    overflow: hidden;
-    .sendGoods_title {
-      color: #333;
-      font-size: 0.42rem;
-      text-align: center;
-      line-height: 1rem;
-      font-weight: 600;
-      position: relative;
       i {
+        font-size: .6rem;
         position: absolute;
-        font-size: 16px;
-        right: 0.2rem;
+        right: -0.3rem;
+        top: -0.35rem;
+        color: #fff;
+        &::after{
+          position: absolute;
+          top: -0.1rem;
+          left: -0.1rem;
+          right: -0.1rem;
+          bottom: -0.1rem;
+          content: ' '
+        }
+      }
+      .title {
+        background: #3f84f6;
+        height: 0.7rem;
+        line-height: 0.7rem;
+        color: #fff;
+        text-align: center;
+        font-size: 0.3rem;
+        position: relative;
+      }
+      .Kuang {
+        max-height: 10rem;
+        width: 6.7rem;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate3d(-50%, -50%, 0);
+        background: #ececec;
+        border-radius: 5px;
+      }
+      .content {
+        overflow-y: scroll;
+        max-height: 9.3rem;
+        .infob {
+          background: #e3edfd;
+          padding: 0.2rem;
+          .info {
+            color: #333;
+            font-size: 0.3rem;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            margin-bottom: 0.18rem;
+            .name {
+              color: #666;
+            }
+            div {
+              display: inline-block;
+            }
+          }
+        }
+        .content_sq {
+          width: 6.4rem;
+          margin: 0.1rem auto;
+          background: #fff;
+          padding: 0.2rem 0rem;
+          .list {
+            margin-bottom: 0.18rem;
+          }
+          .fl {
+            width: 3.2rem;
+          }
+          .table {
+            width: 4.2rem;
+            margin-top: -0.1rem;
+          }
+          .labelinfo {
+            background-image: url('/images/mobile/@2x/labelTop.png');
+            background-repeat: no-repeat;
+            width: 6.29rem;
+            height: 0.64rem;
+            line-height: 0.64rem;
+            background-size: 100%;
+            margin-top: 0rem;
+            margin-right: 0rem;
+            background-color: rgba(0, 0, 0, 0);
+            color: #666;
+          }
+        }
       }
     }
-    .cancelOrder_title {
-      font-size: 0.36rem;
-      color: #333;
-      border-bottom: 1px solid #d9d9d9;
-      font-weight: bold;
-      padding: 0 0.2rem;
-      line-height: 0.6rem;
-    }
-    ul {
-      li {
+    .cancelOrder {
+      background: #fff;
+      position: absolute;
+      bottom: 0.98rem;
+      left: 0;
+      width: 100%;
+      border-top-left-radius: 5px;
+      border-top-right-radius: 5px;
+      overflow: hidden;
+      .sendGoods_title {
+        color: #333;
+        font-size: 0.42rem;
+        text-align: center;
         line-height: 1rem;
-        background: #fff;
-        padding: 0 0.2rem;
-        font-size: 0.32rem;
+        font-weight: 600;
+        position: relative;
+        i {
+          position: absolute;
+          font-size: 16px;
+          right: 0.2rem;
+        }
+      }
+      .cancelOrder_title {
+        font-size: 0.36rem;
         color: #333;
         border-bottom: 1px solid #d9d9d9;
-        div.name {
-          @include overFlowHidden();
-        }
-        div.target {
-          margin-right: 0.2rem;
-          width: 0.36rem;
-          height: 0.36rem;
-          border-radius: 50%;
-          overflow: hidden;
-          border: 1px solid #a4a4a4;
-          margin-top: 0.3rem;
-          &.active {
-            background-image: url('/images/order/getChoose_icon.png');
-            background-size: 100% 100%;
-            border: 0px;
+        font-weight: bold;
+        padding: 0 0.2rem;
+        line-height: 0.6rem;
+      }
+      ul {
+        li {
+          line-height: 1rem;
+          background: #fff;
+          padding: 0 0.2rem;
+          font-size: 0.32rem;
+          color: #333;
+          border-bottom: 1px solid #d9d9d9;
+          div.name {
+            @include overFlowHidden();
+          }
+          div.target {
+            margin-right: 0.2rem;
+            width: 0.36rem;
+            height: 0.36rem;
+            border-radius: 50%;
+            overflow: hidden;
+            border: 1px solid #a4a4a4;
+            margin-top: 0.3rem;
+            &.active {
+              background-image: url('/images/order/getChoose_icon.png');
+              background-size: 100% 100%;
+              border: 0px;
+            }
           }
         }
       }
+      .sendGoods_Btn {
+        @include lineHeight(1rem);
+        text-align: center;
+        color: #fff;
+        font-size: 0.36rem;
+        background: #3f84f6;
+      }
     }
-    .sendGoods_Btn {
-      @include lineHeight(1rem);
-      text-align: center;
+    .labelInfo_ForItem {
       color: #fff;
-      font-size: 0.36rem;
-      background: #3f84f6;
+      font-size: 0.24rem;
+      padding: 0.05rem 0.1rem;
+      background: #15b262;
+      margin-right: 0.1rem;
+      border-radius: 3px;
+    }
+    .com-none-state{
+      background: #f1f3f6
     }
   }
-  .labelInfo_ForItem {
-    color: #fff;
-    font-size: 0.24rem;
-    padding: 0.05rem 0.1rem;
-    background: #15b262;
-    margin-right: 0.1rem;
-    border-radius: 3px;
-  }
-  .com-none-state{
-    background: #f1f3f6
-  }
-}
 </style>

pages/mobile/order/orderbtob.vue

@@ -0,0 +1,284 @@
+<template>
+  <div class="order-wrapper">
+    <div class="order-tab">
+      <div class="order-tab-wrapper clearfix">
+        <div class="fl active tab">B2B</div>
+        <nuxt-link class="fl tab" to="/mobile/order?type=saler" tag="div" >
+          商城
+        </nuxt-link>
+      </div>
+    </div>
+    <div class="order-nav">
+      <div :class="activeType === 'todo' ? 'active': ''" @click="ChangeList('todo')"><span>待回复</span></div>
+      <div :class="activeType === 'done' ? 'active' : ''" @click="ChangeList('done')"><span>已回复</span></div>
+      <div :class="activeType === 'end' ? 'active' : ''" @click="ChangeList('end')"><span>已结案</span></div>
+    </div>
+    <div class="search-content search-content2">
+      <input type="text" placeholder="单据编号/客户名称/物料名称" v-model="keyword" @keyup.13="searchOrderlist">
+      <span @click="searchOrderlist">
+          <i class="iconfont icon-sousuo"></i>
+      </span>
+    </div>
+    <ul class="order-list-wrap" id="b2border-wrapper" v-show="orderList.length > 0">
+      <li v-for="item in orderList">
+        <div class="list-title">{{item.enName}}</div>
+        <div class="clearfix list-content">
+          <div class="fl left">
+            <div class="item">
+              <span>单号：</span>
+              <label v-html="item.code" style="color: #333"></label>
+            </div>
+            <div class="item">
+              <span>币别：</span>{{item.currency}}
+            </div>
+            <div class="item pric">
+              <span>金额：</span>{{item.sum}}
+            </div>
+            <div class="item">
+              <span>时间：</span>{{item.date | time}}
+            </div>
+          </div>
+          <div class="fr right">
+            <div v-if="activeType === 'todo'" class="todo">
+              待回复
+            </div>
+            <div v-else-if="activeType === 'done'" class="done">
+              已回复
+            </div>
+            <div v-else-if="activeType === 'end'" class="end">
+              已结案
+            </div>
+          </div>
+        </div>
+      </li>
+    </ul>
+    <div v-if="orderList.length === 0" class="com-none-state">
+      <img src="/images/mobile/@2x/search-empty.png">
+      <p>抱歉，暂无订单消息</p>
+      <nuxt-link to="/">返回首页</nuxt-link>
+    </div>
+    <pull-up :fixId="'b2border-wrapper'"
+             :allPage="allPage"
+             :page="page"
+             :FixedEl="true"
+             @pullUpAction="getMoreSearch"></pull-up>
+  </div>
+</template>
+
+<script>
+  import { RemindBox, PullUp } from '~components/mobile/common'
+  export default {
+    name: 'orderbtob',
+    layout: 'mobile',
+    middleware: 'authenticated',
+    data() {
+      return {
+        activeType: 'todo',
+        page: 1,
+        // isSearchSearchingMore: false,
+        orderList: [],
+        keyword: '',
+        allPage: 0
+      }
+    },
+    created() {
+      this.getResource()
+    },
+    methods: {
+      getResource(Reset) {
+        // this.isSearchSearchingMore = false
+        this.$http.get('/sale/orders/info/nosearch', {params: {
+          _state: this.activeType,
+          count: 10,
+          page: this.page,
+          searchFilter: {'fromDate': 1293811200000, 'endDate': new Date().getTime(), 'keyword': this.keyword},
+          sorting: {date: 'desc', id: 'desc'}
+        }}).then(res => {
+          if (Reset) {
+            this.orderList = []
+          }
+          res.data.content.forEach(item => {
+            item.sum = 0
+            item.orderItems.forEach(order => {
+              item.sum += order.qty * order.price
+            })
+          })
+          this.orderList.push(...res.data.content)
+          this.allPage = Math.floor(res.data.totalElement / 10)
+          // this.isSearchSearchingMore = true
+          console.log(this.orderList)
+        })
+      },
+      ChangeList(_tp) {
+        this.activeType = _tp
+        this.getResource(true)
+      },
+      getMoreSearch() {
+        this.page++
+        this.getResource()
+      },
+      searchOrderlist() {
+        this.page = 1
+        this.getResource(true)
+      }
+    },
+    components: {
+      RemindBox, PullUp
+    },
+    filters: {
+      time: function(time) {
+        if (typeof time === 'number') {
+          if (!time) {
+            return '无'
+          } else {
+            let d = new Date(time)
+            let year = d.getFullYear()
+            let month = d.getMonth() + 1
+            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+            return year + '-' + month + '-' + day
+          }
+        }
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
+
+  .order-wrapper {
+    background: #f1f3f6;
+    margin: 1.26rem 0 0.98rem 0;
+    height: calc(100vh - 1.26rem - 0.98rem);
+    /*padding-bottom: 0.96rem;*/
+    .order-tab {
+      background: #3f84f6;
+      padding-bottom: 0.2rem;
+      .order-tab-wrapper {
+        border: solid 1px #ffffff;
+        width: 7.06rem;
+        margin: 0 auto;
+        border-radius: 0.04rem;
+        line-height: 0.72rem;
+        height: 0.72rem;
+        overflow: hidden;
+        div {
+          color: #ffffff;
+          font-size: 0.28rem;
+          text-align: center;
+          width: 50%;
+          &.active {
+            background-color: #ffffff;
+            color: #3f84f6;
+          }
+        }
+      }
+    }
+    .order-nav {
+      background: #fff;
+      div {
+        height: 0.82rem;
+        line-height: 0.82rem;
+        display: inline-block;
+        width: 33.3%;
+        text-align: center;
+        font-size: .28rem;
+        color: #666;
+        &.active span{
+          color: #3f84f6;
+          border-bottom: 0.04rem solid #3f84f6;
+          padding-bottom: 0.2rem;
+        }
+      }
+    }
+    .search-content2 {
+      text-align: center;
+      padding: .25rem 0 0 0;
+      margin-top: 0 !important;
+      input {
+        width: 7.1rem;
+        border: 1px solid #376ff3;
+      }
+      span {
+        /*height: .46rem;*/
+        /*line-height: .46rem;*/
+      }
+    }
+    .order-list-wrap {
+      height: calc(100vh - 1.26rem - 0.96rem - 0.84rem - 1rem - 0.92rem);
+      overflow-y: scroll;
+      margin-top: 0.2rem;
+      li {
+        background: #fff;
+        width: 7.1rem;
+        margin: 0 auto 0.2rem;
+        border-radius: 0.04rem;
+        border: 1px solid #e4e4e4;
+        padding: 0 0.24rem;
+        .list-title {
+          @include lineHeight(0.91rem);
+          @include overFlowHidden();
+          font-size: 0.28rem;
+          color: #3a3a3a;
+          border-bottom: 1px solid #d3d3d3;
+        }
+        .list-content {
+          margin-top: 0.23rem;
+          padding-bottom: 0.28rem;
+          .left {
+            border-right: dashed 1px #9f9f9f;
+            width: 4.6rem;
+            .item {
+              font-size: 0.28rem;
+              color: #333;
+              @include overFlowHidden();
+              margin-bottom: 0.15rem;
+              span {
+                color: #666;
+              }
+              &.pric {
+                color: #e6353d;
+              }
+            }
+          }
+          .right {
+            div {
+              width: 1.7rem;
+              height: 0.47rem;
+              line-height: 0.47rem;
+              font-size: 0.28rem;
+              text-align: center;
+              border-radius: 0.04rem;
+              margin-top: 0.7rem;
+              &.todo {
+                border: 1px solid #3e82f5;
+                background: #3e82f5;
+                color: #fff;
+              }
+              &.done {
+                border: 1px solid #3e82f5;
+                color: #3e82f5;
+              }
+              &.end {
+                background: #cccccc;
+                border: 1px solid #cccccc;
+                color: #fff;
+              }
+            }
+          }
+        }
+      }
+    }
+    .com-none-state{
+      background: #f1f3f6
+    }
+  }
+</style>