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>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(v,i) in list" :key='i' :title="`第${list.length - i}次配送`" :name="i">
          <!-- 配送信息 ( 待接单无配送信息 ) -->
          <div class="send-info" v-if="v.deliveryName">
            <div class="send-tlt">配送信息</div>
            <div class="delivery">
              <img v-if="v.deliveryLogo" class="img" :src="v.deliveryLogo" alt="">
              <div class="con">
                <div class="delivery-top">
                  <div class="left">{{v.shipperName}}</div>
                  <div class="right">{{v.shipperPhone}}</div>
                </div>
                <div class="delivery-bot" v-if="v.customerPhone">
                  <div class="left">{{v.deliveryName}}客服</div>
                  <div class="right">{{ v.customerPhone }}</div>
                </div>
              </div>
            </div>
            <div class="label">
              <div class="label-tlt">接单时间：</div>
              <div class="label-right">
                <span>{{ shipperReceiveTime(v.itemList) }}</span>
              </div>
            </div>
            <div class="label">
              <div class="label-tlt">{{ v.deliveryName }}订单号：</div>
              <div class="label-right">
                <span>{{ v.outTradeNo }}</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>¥{{ v.payAmount }}</span>
                <!-- <div class="detail">明细</div> -->
              </div>
            </div>
            <div class="label">
              <div class="label-tlt">发单时间：</div>
              <div class="label-right">
                <span>{{ sendOrderTime(v.itemList) }}</span>
              </div>
            </div>
          </div>
          <!-- 收件地址信息、配送进度 -->
          <div class="address-box">
            <div class="process">
              <el-timeline>
                <el-timeline-item class="p-item" v-for="(item, i) in v.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">{{ item.orderStatus === -1 ? showCancelType(v.cancelType) : orderStatus(item.orderStatus) }}</span>
                      <span class="p-time">{{ item.nodeTime }}</span>
                    </div>
                    <div class="p-bottom" v-if="item.orderStatus === 1">
                      <span>20分钟内无骑手接单将自动取消订单</span>
                    </div>
                    <div class="p-bottom" v-if="item.orderStatus === 2">
                      {{ v.deliveryName }}骑手
                      <span class="has-driver">{{ v.shipperName }}（{{
                      v.shipperPhone
                    }})</span>
                      已接单
                    </div>
                    <div class="p-bottom" v-if="item.orderStatus === 3 && buttonStatus === 3">
                      <span class="send">正在派送中</span>
                    </div>
                  </div>
                </el-timeline-item>
              </el-timeline>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
  </div>
</template>

<script>
export default {
  name: "orderTrack",
  props: {
    trackOrder: Object,
    buttonStatus: Number,
    riderArriveTime: Object,
  },
  data() {
    return {
      activeNames: 0,
    };
  },
  computed: {
    list() {
      return (
        this.trackOrder.list 
      );
    },
  },
  methods: {
    sendOrderTime(itemList) {
      let data = itemList.find((v) => {
        return v.orderStatus === 5;
      });
      return (data && data.nodeTime) || "--";
    },
    shipperReceiveTime(itemList) {
      let data = itemList.find((v) => {
        return v.orderStatus === 2;
      });
      return (data && data.nodeTime) || "--";
    },
    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;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-timeline {
  padding: 0 0 0 5px !important;
}
/deep/ .el-timeline-item__wrapper {
  width: 100%;
}
/deep/ .el-collapse-item__header {
  font-size: 14px !important;
  font-weight: bold !important;
}
.clearfix:after {
  content: "";
  font-size: 0;
  height: 0;
  display: block;
  clear: both;
}
.order-detail {
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 80px;
  .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: #777;
        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>