Arbitrate-Frontend/src/views/caseFiling/components/expressDeliveryInfo.vue

<template>
  <div>
    <div>
      <div class="deliverName">
        <span>申请人快递信息：</span>
        {{ expressOne.company }} {{ expressOne.no }}
      </div>
      <el-divider></el-divider>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in expressOne.list"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>

      <div class="deliverName">
        <span>被申请人快递信息：</span>
        {{ expressTwo.company }} {{ expressTwo.no }}
      </div>
      <el-divider></el-divider>
      <el-timeline :reverse="reverse">
        <el-timeline-item
          v-for="(activity, index) in expressTwo.list"
          :key="index"
          :timestamp="activity.timestamp"
        >
          {{ activity.content }}
        </el-timeline-item>
      </el-timeline>
    </div>
  </div>
</template>

<script>
export default {
  props: ["deliveryDataArr"],
  data() {
    return {
      reverse: true,
      applicantdelivery: {}, //申请人物流信息
      expressOne: {},
      expressTwo: {},
    };
  },
  watch: {
    deliveryDataArr() {
    console.log(this.deliveryDataArr, "deliveryDataArr");
      if (this.deliveryDataArr && this.deliveryDataArr.length > 0) {
      this.deliveryDataArr.forEach((item) => {
        if (item.identityType == 1) {
          let applicantdata = item.logisticsInfo;
          this.applicantdelivery = JSON.parse(applicantdata);
          if (this.applicantdelivery.list) {
            this.applicantdelivery.list.forEach((item) => {
              item.content = item.datetime;
              item.timestamp = item.remark;
            });
            this.expressOne = this.applicantdelivery;
          }
        } else {
          let applicantdata = item.logisticsInfo;
          this.applicantdelivery = JSON.parse(applicantdata);
          if (this.applicantdelivery.list) {
            this.applicantdelivery.list.forEach((item) => {
              item.content = item.datetime;
              item.timestamp = item.remark;
            });
            this.expressTwo = this.applicantdelivery;
          }
        }
      });
    }
    }
  },
  methods: {
    cancel() {
      this.$emit("closeDeliveryModel");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-dialog {
  width: 600px;
  background: #ffffff;
  border-radius: 20px;
}
.deliverName {
  // margin-left: 6%;
  font-size: 16px;
  font-weight: 500;
  span {
    font-size: 18px;
    font-weight: 600;
  }
}
.endbutton {
  width: 154px;
  height: 37px;
  background: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 19px;
  span {
    width: 31px;
    height: 13px;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #959595;
  }
}
.loading {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  .el-icon-loading {
    font-size: 50px;
  }
}
</style>