mall-web-ssr/pages/mobile/order/orderbtob_details.vue

<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) && listInfo.end !== 1">
            <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 >= 0 && 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: 'mobileActivity',
    middleware: 'authenticated',
    data() {
      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
          })
          res.data.sum = parseFloat(res.data.sum).toFixed(2)
          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;
  position: absolute;
  height: 100%;
  width: 100%;
  overflow-y: scroll;
  .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>