新增移动端B2B销售订单详情页

nuxt.config.js

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

pages/mobile/order/orderbtob_details.vue

@@ -1,21 +1,281 @@
 <template>
   <div class="orderbtob_details_wrapper">
+    <div class="mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>订单详情</p>
+    </div>
+    <div class="orderbtob_details_content">
+      <div class="orderbtob_details_top">
+        <div class="item">
+          <span class="name">客户：</span>
+          {{listInfo.enterprise.enName}}
+        </div>
+        <div class="item">
+          <span class="name">收货地址：</span>
+          {{listInfo.enterprise.enAddress}}
+        </div>
+        <div class="item">
+          <span class="name">订单号：</span>
+          {{listInfo.code}}
+        </div>
+        <div class="item">
+          <span class="name">单据时间：</span>
+          {{listInfo.date | time}}
+        </div>
+        <div class="item">
+          <span class="name">备注：</span>
+          {{listInfo.remark || '无'}}
+        </div>
+        <div class="item">
+          <span class="name">币别：</span>
+          {{listInfo.currency}}
+        </div>
+        <div class="item">
+          <span class="name">金额：</span>
+          {{listInfo.sum}}
+        </div>
+      </div>
+      <div class="orderbtob_details_middle">
+        <div class="list" v-for="(item, index) in listInfo.orderItems">
+          <div class="item">
+            <span class="name">编号：</span>{{item.product.code}}
+          </div>
+          <div class="item">
+            <span class="name">产品：</span>{{item.product.title}}
+          </div>
+          <div class="item clearfix">
+            <div class="name fl">规格型号：</div>
+            <div class="fl ovrflow">{{item.product.spec}}</div>
+          </div>
+          <div class="item">
+            <span class="name">购买数量：</span>{{item.qty}}
+          </div>
+          <ul class="bottom" v-if="item.replayList.length > 0">
+            <li v-for="ls in item.replayList">
+              <span style="margin-right:0.1rem"> <strong>{{ls.date | time}}</strong></span>
+              <span style="margin-right:0.1rem">{{ls.recorder}}回复数量：</span>
+              <span>{{ls.qty}}</span>
+            </li>
+          </ul>
+          <div v-if="!item.replyQty || item.replyQty < item.qty">
+            <div class="item clearfix">
+              <span class="name">回复数量：</span>
+              <input type="number" class="dateinput" v-model="count">
+            </div>
+            <div class="item clearfix">
+              <span class="name">交货日期：</span>
+              <input type="date" :min="item.delivery | time" class="dateinput" v-model="date">
+            </div>
+            <div class="item clearfix">
+              <span class="name">备注：</span>
+              <input type="text" class="dateinput" v-model="remank">
+            </div>
+            <div class="replayBtn" @click="Replay(item)">
+              回复
+            </div>
+          </div>
+          <div v-if="item.replyQty >= item.qty && item.replayList.length === 0" class="replayBtn" @click="LookReplay(item)">
+            查看回复
+          </div>
+        </div>
+      </div>
+
+    </div>
+    <remind-box :title="collectResult" :timeoutCount="timeoutCount"></remind-box>
   </div>
 </template>
 
 <script>
+  import { RemindBox } from '~components/mobile/common'
   export default {
     name: 'orderbtob_details',
-    layout: 'mobile',
+    layout: 'mobileActivity',
     middleware: 'authenticated',
     data() {
-      return {}
+      return {
+        listInfo: {
+          enterprise: {}
+        },
+        date: '',
+        count: '',
+        remank: '',
+        collectResult: '',
+        timeoutCount: 0,
+        token: ''
+      }
+    },
+    created() {
+      this.getInitInfo()
+      this._getToken()
+    },
+    methods: {
+      Replay(item) {
+        if (this.count === '') {
+          this._iniFo('数量不能为空')
+        } else if (Number(this.count) > Number(item.qty)) {
+          this._iniFo('回复数量不能大于订单数量')
+        } else {
+          this.$http.post(`/sale/orders/items/${item.id}/reply?token=${this.token}`, {
+            delivery: new Date().getTime(),
+            qty: this.count,
+            remark: this.remank
+          }).then(res => {
+            this.remank = ''
+            this.count = ''
+            this._iniFo('回复成功')
+            this.getInitInfo()
+          })
+        }
+      },
+      LookReplay(item) {
+        this.$http.get(`/sale/orders/items/${item.id}/reply/all`).then(res => {
+          item.replayList = res.data
+        })
+      },
+      _iniFo(str) {
+        this.collectResult = str
+        this.timeoutCount++
+      },
+      _getToken() {
+        this.$http.get('/token?userType=sale').then(res => {
+          this.token = res.data.token
+        })
+      },
+      getInitInfo() {
+        this.$http.get(`/sale/orders/${this.$route.query.id}/info`).then(res => {
+          res.data.sum = 0
+          res.data.orderItems.forEach(item => {
+            res.data.sum += item.qty * item.price
+            item.replayList = []
+            item.showReplay = false
+          })
+          this.listInfo = res.data
+        })
+      }
+    },
+    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 < 10 ? '0' + (d.getMonth() + 1) : '' + (d.getMonth() + 1)
+            let day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate()
+            return year + '-' + month + '-' + day
+          }
+        }
+      }
+    },
+    components: {
+      RemindBox
     }
   }
 </script>
 
 <style scoped lang="scss">
 .orderbtob_details_wrapper {
-
+  background: #f5f5f5;
+  .mobile-header{
+    position: fixed;
+    top: 0;
+    z-index: 10;
+    width:100%;
+    height:.88rem;
+    line-height: .88rem;
+    /*border-bottom:.01rem solid #ccc;*/
+    background: #3e82f5;
+    padding:0 .2rem 0 .1rem;
+    color:#fff;
+  }
+  .mobile-header p{
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size:.36rem;
+    text-align: center;
+    margin: 0;
+    width: 6rem;
+    padding-left: 1rem;
+  }
+  .mobile-header a{
+    font-size:.28rem;
+    color:#fff;
+    position: absolute;
+  }
+  .mobile-header a i{
+    font-size: .48rem;
+    margin-right: -.1rem;
+  }
+  .orderbtob_details_content {
+    margin-top: 0.9rem;
+    padding: 0.2rem;
+    .orderbtob_details_top {
+      background: #3f84f6;
+      border-radius: 0.07rem;
+      border: solid 0.01rem #e3e5e8;
+      padding: 0.24rem 0.2rem 0.14rem;
+      .item {
+        color: #fff;
+        font-size: 0.28rem;
+        margin-bottom: 0.1rem;
+      }
+    }
+    .orderbtob_details_middle {
+      margin-top: 0.2rem;
+      .list {
+        border: solid 1px #e3e5e8;
+        border-radius: 0.07rem;
+        overflow: hidden;
+        color: #333;
+        font-size: 0.28rem;
+        padding: 0.24rem 0.2rem;
+        margin-bottom: 0.2rem;
+        background: #fff;
+        .item {
+          margin-bottom: 0.1rem;
+          line-height: 0.5rem;
+        }
+        .ovrflow {
+          width: 5.2rem;
+          line-height: 0.5rem
+        }
+        .name {
+          color: #666;
+          width: 1.4rem;
+          display: inline-block;
+        }
+        .dateinput {
+          width: 3.49rem;
+          height: .5rem;
+          line-height: .5rem;
+          border: 1px solid #aeaeae;
+          font-size: .26rem;
+          vertical-align: middle;
+          background: #fff;
+          border-radius: 0;
+        }
+      }
+      .replayBtn {
+        width: 6.59rem;
+        height: 0.77rem;
+        background-color: #3f84f6;
+        border-radius: 0.08rem;
+        font-size: 0.28rem;
+        line-height: 0.77rem;
+        color: #ffffff;
+        overflow: hidden;
+        text-align: center;
+        margin-top: 0.2rem
+      }
+    }
+    .bottom {
+      font-size: 0.2rem;
+      color: #999;
+      border-top: 1px solid #aeaeae;
+      padding-top: 0.1rem;
+    }
+  }
 }
 </style>