liebao-web/src/components/orderComponents/orderTrack.vue

<template>
  <div class="order-detail">
    <!-- 取货中 -->
    <div class="picking-up">
      <div class="top-cancel" v-if="buttonStatus === -1 || buttonStatus === -2">
        <img src="../../../static/image/icon_warn.png" alt="" srcset="">
        {{showCancelType(trackOrder.cancelType)}}
      </div>
      <div class="top" v-if="
          (buttonStatus === 2 && riderArriveTime.riderArriveMinute) ||
          (buttonStatus === 3 && riderArriveTime.estimateArriveTime)
        ">
        <div class="top-l">
          <img src="../../../static/image/time-icon.png" class="time-icon" />
          <span class="top-tlt">骑手预计</span>
        </div>
        <span v-if="buttonStatus === 2" class="top-tlt-l">{{ riderArriveTime.riderArriveMinute }}分钟后到店取件</span>
        <span v-if="buttonStatus === 3" class="top-tlt-l">{{ riderArriveTime.estimateArriveTime }}送达</span>
      </div>
      <!-- 配送信息 ( 待接单无配送信息 ) -->
      <div class="send-info" v-if="trackOrder.deliveryName">
        <div class="send-tlt">配送信息</div>
        <div class="delivery">
          <img v-if="trackOrder.deliveryLogo" class="img" :src="trackOrder.deliveryLogo" alt="">
          <div class="con">
            <div class="delivery-top">
              <div class="left">{{trackOrder.shipperName}}</div>
              <div class="right">{{trackOrder.shipperPhone}}</div>
            </div>
            <div class="delivery-bot" v-if="trackOrder.customerPhone">
              <div class="left">{{trackOrder.deliveryName}}客服</div>
              <div class="right">{{ trackOrder.customerPhone }}</div>
            </div>
          </div>
        </div>
        <div class="label">
          <div class="label-tlt">接单时间：</div>
          <div class="label-right">
            <span>{{ trackOrder.receiveTime }}</span>
          </div>
        </div>
        <div class="label">
          <div class="label-tlt">{{ trackOrder.deliveryName }}订单号：</div>
          <div class="label-right">
            <span>{{ trackOrder.deliveryOrderSn }}</span>
          </div>
        </div>
      </div>
      <!-- 发单信息 -->
      <div class="send-info">
        <div class="send-tlt">发单信息</div>
        <div class="label">
          <div class="label-tlt">支付金额：</div>
          <div class="label-right">
            <span>¥{{ trackOrder.payAmount }}</span>
            <div class="detail">明细</div>
          </div>
        </div>
        <div class="label">
          <div class="label-tlt">发单时间：</div>
          <div class="label-right">
            <span>{{ trackOrder.sendTime || '--' }}</span>
          </div>
        </div>
      </div>
      <!-- 收件地址信息、配送进度 -->
      <div class="address-box">
        <div class="process">
          <el-timeline>
            <el-timeline-item class="p-item" v-for="(v, i) in trackOrder.itemList" :key="i" type="info" size="large" :icon="i ? 'el-icon-success' : 'el-icon-circle-check'">
              <div class="p-right">
                <div class="p-top">
                  <span class="p-status">{{ v.orderStatus === -1 ? showCancelType(trackOrder.cancelType) : orderStatus(v.orderStatus) }}</span>
                  <span class="p-time">{{ v.nodeTime }}</span>
                </div>
                <div class="p-bottom" v-if="v.orderStatus === 1">
                  <span>20分钟内无骑手接单将自动取消订单</span>
                </div>
                <div class="p-bottom" v-if="v.orderStatus === 2">
                  {{ trackOrder.deliveryName }}骑手
                  <span class="has-driver">{{ trackOrder.shipperName }}（{{
                      trackOrder.shipperPhone
                    }})</span>
                  已接单
                </div>
                <div class="p-bottom" v-if="v.orderStatus === 3 && buttonStatus === 3">
                  <span class="send">正在派送中</span>
                </div>
              </div>
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderTrack",
  props: {
    trackOrder: Object,
    buttonStatus: Number,
    riderArriveTime: Object,
  },
  data() {
    return {};
  },
  methods: {
    showCancelType(type) {
      let name = "";
      switch (type) {
        case 1:
          name = "商家取消";
          break;
        case 2:
          name = "骑手取消";
          break;
        case 3:
          name = "系统取消";
          break;
        case 4:
          name = "用户取消";
          break;
        case 5:
          name = "平台取消";
          break;

        default:
          name = "已取消";
          break;
      }
      return name;
    },
    orderStatus(status) {
      let name = "";
      switch (status) {
        case -2:
          name = "异常单";
          break;
        case -1:
          name = "已取消";
          break;
        case 1:
          name = "发起配送";
          break;
        case 2:
          name = "骑手已接单";
          break;
        case 3:
          name = "骑手取件";
          break;
        case 4:
          name = "配送已完成";
          break;
        case 5:
          name = "支付成功";
          break;
        case 98:
          name = "其他平台完成";
          break;
        case 99:
          name = "外卖订单成功";
          break;
        case 0:
          name = "下单成功";
          break;
        default:
          name = "配送已完成";
          break;
      }
      return name;
    },
    getTrackOrder() {
      if (!this.orderInfo) return;
      trackOrder({ orderId: this.orderInfo.id }).then((res) => {
        if (res.code === 200) {
          this.trackOrder = res.data;
          this.trackOrder.itemList = this.trackOrder.itemList.filter((v) => {
            return v.orderStatus !== -2;
          });
        } else {
          this.$message({
            message: res.msg,
            type: "error",
          });
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-timeline {
  padding: 0 0 0 5px !important;
}
/deep/ .el-timeline-item__wrapper {
  width: 100%;
}
.clearfix:after {
  content: "";
  font-size: 0;
  height: 0;
  display: block;
  clear: both;
}
.order-detail {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 40px;
  .picking-up {
    .top-cancel {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 13px;
      font-weight: bold;
      color: #fc7200;
      margin-bottom: 10px;
      img {
        width: 20px;
        height: 20px;
        margin-right: 5px;
      }
    }
    .top {
      display: flex;
      align-items: flex-start;
      justify-content: center;
      font-weight: bold;
      margin: 15px 0;
      .top-l {
        display: flex;
        align-items: center;
        .time-icon {
          width: 15px;
          height: 16px;
        }
        .top-tlt {
          flex-shrink: 0;
          margin: 0 6px;
          font-size: 14px;
          color: #00152a;
          line-height: 16px;
        }
      }
      .top-tlt-l {
        text-align: right;
        font-size: 14px;
        line-height: 16px;
        color: #009cff;
      }
    }
    .send-info {
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 2px dotted #f0f0f0;
      .send-tlt {
        font-size: 13px;
        font-weight: bold;
        color: #333333;
        margin-bottom: 15px;
      }
      .delivery {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10px;
        .img {
          flex-shrink: 0;
          width: 44px;
          height: 44px;
          background: rgba(255, 255, 255, 0.39);
          box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.16);
          border-radius: 8px;
          margin-right: 10px;
        }
        .con {
          flex: 1;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: calc(100% - 54px);
          .delivery-top,
          .delivery-bot {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            line-height: 20px;
            color: #007aff;
            .left {
              max-width: 60%;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .delivery-bot {
            color: #999999;
          }
        }
      }
      .label {
        display: flex;
        justify-content: space-between;
        margin-bottom: 4px;
        .label-tlt {
          flex-shrink: 0;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
        }
        .label-right {
          display: flex;
          flex-wrap: wrap;
          align-items: center;
          .detail {
            color: #fc7200;
            font-size: 14px;
            margin-left: 10px;
            cursor: pointer;
          }
          .send-logo {
            width: 16px;
            height: 16px;
            margin-right: 4px;
          }
          span {
            text-align: right;
            font-size: 14px;
            font-weight: 400;
            color: #333333;
            line-height: 20px;
            word-break: break-all;
          }
        }
      }
    }
    .address-box {
      padding-top: 20px;
      .address-info {
        display: flex;
        .address-icon {
          width: 21px;
          height: 22px;
          margin-right: 11px;
        }
        .address-content {
          word-break: break-all;
          font-size: 14px;
          font-weight: 600;
          color: #00152a;
          line-height: 20px;
        }
      }
      .process {
        .p-item {
          display: flex;
          padding-bottom: 30px;
          .p-left {
            margin-left: 6px;
            margin-right: 14px;
            .black-point {
              width: 9px;
              height: 10px;
            }
          }
          .p-right {
            flex: 1;
            .p-top {
              display: flex;
              justify-content: space-between;
              align-items: flex-start;
              font-size: 14px;
              font-weight: 600;
              color: #00152a;
              margin-bottom: 6px;
              .p-status {
                flex-shrink: 0;
                line-height: 20px;
              }
              .p-time {
                margin-left: 10px;
                font-weight: normal;
                text-align: right;
                line-height: 20px;
                font-size: 12px;
              }
            }
            .p-bottom {
              font-size: 12px;
              font-weight: 400;
              color: #b1b1b1;
              .send {
                color: #fc7200;
              }
              .has-driver {
                color: #009cff;
              }
            }
          }
        }
      }
    }
    .button-list {
      padding-bottom: 15px;
      .btn-item {
        float: right;
        width: 74px;
        height: 30px;
        line-height: 30px;
        box-sizing: border-box;
        text-align: center;
        border-radius: 4px;
        font-size: 12px;
        cursor: pointer;
      }
      .add-tip {
        background-color: #fc7200;
        color: #fff;
      }
      .cancel {
        color: #888888;
        border: 1px solid #eee;
      }
    }
  }
}
</style>