order-user-info.vue 2.47 KB
<template>
  <div class="ivu-card">
    <div class="ivu-card-head">
      <p slot="title">物流信息</p>
    </div>
    <div class="ivu-card-body">
      <Row>
        <i-col span="24">收货人:{{ orderInfo.consigneeName }} &nbsp;&nbsp;&nbsp;手机号:{{ orderInfo.mobile }} </i-col>
      </Row>
      <Row>
        <i-col span="24">
          送货地址:{{ orderInfo.province }} {{ orderInfo.city }} {{ orderInfo.district }}
          {{ orderInfo.street }}
        </i-col>
      </Row>
      <Row>
        <i-col span="24">详细地址:{{ orderInfo.address }}</i-col>
      </Row>
      <Row>
        <i-col span="24">邮政编码:{{ orderInfo.zipCode > 0 ? orderInfo.zipCode : '' }}</i-col>
      </Row>
      <Row v-if="isShowExpress">
        <i-col span="24">
          物流公司:
          <template v-for="(item, index) in logisticsList">
            <span v-if="item.id == orderInfo.expressId" :key="index">{{ item.companyName }}</span>
          </template>
          <template v-if="orderInfo.expressNumber > 0">
            <a style="margin-left:20px;" @click="showExpressInfo()">查看物流信息</a>
          </template>
        </i-col>
      </Row>
      <Row v-if="isShowExpress">
        <i-col span="24">运单号:{{ orderInfo.expressNumber > 0 ? orderInfo.expressNumber : '' }} </i-col>
      </Row>
    </div>
    <order-express-info ref="showOrderExpressInfo" :show="showOrderExpressInfo"></order-express-info>
  </div>
</template>
<script>
import _ from 'lodash';
import LogisticsService from 'services/logistics/logistics-service';
import { OrderService } from 'services/order';
import orderExpressInfo from './order-express-info.vue';
export default {
  name: 'OrderUserInfo',
  components: { orderExpressInfo },
  props: ['orderInfo', 'isShowExpress'],
  data() {
    return {
      logisticsList: [],
      showOrderExpressInfo: false,
    };
  },
  created() {
    this.LogisticsService = new LogisticsService();
    this.OrderService = new OrderService();
    this.getLogisticsList();
  },
  methods: {
    //获取物流公司列表
    getLogisticsList() {
      this.LogisticsService.logisticsList().then(ret => {
        this.logisticsList = _.get(ret, 'data', []);
      });
    },
    //获取订单物流轨迹
    showExpressInfo() {
      this.OrderService.queryOrderExpressInfo({ orderCode: this.orderInfo.orderCode }).then(ret => {
        const info = _.get(ret, 'data', []);
        this.$refs.showOrderExpressInfo.show(info);
      });
    },
  },
};
</script>