Arbitrate-Frontend/src/views/caseManagement/components/expressDeliveryDialog.vue

<template>
  <div>
    <el-dialog
      title="快递信息"
      :visible="showDelivery"
      @close="cancel"
      center
      :distroy-on-close="true"
    >
      <div class="loading" v-if="flagLoading">
        <i class="el-icon-loading"></i>
      </div>
      <div v-else>
        <div class="noData" v-if="noData">暂无快递信息！</div>
        <div v-else>
          <div class="deliverName">
            {{ applicantdelivery.company }} {{ applicantdelivery.no }}
          </div>
          <el-divider></el-divider>
          <el-timeline :reverse="reverse">
            <el-timeline-item
              v-for="(activity, index) in activities"
              :key="index"
              :timestamp="activity.timestamp"
            >
              {{ activity.content }}
            </el-timeline-item>
          </el-timeline>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel" class="endbutton"
          ><span>取 消</span></el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: ["showDelivery", "deliveryDataArr", "flagLoading"],
  data() {
    return {
      // key: value
      reverse: true,
      applicantdelivery: {}, //申请人物流信息
      activities: [],
      noData: false,
    };
  },
  watch: {
    deliveryDataArr: {
      handler(val) {
        if (val) {
          val.forEach((item) => {
            if (item.identityType == 1) {
              let applicantdata = item.logisticsInfo;
              this.applicantdelivery = JSON.parse(applicantdata);
              if (this.applicantdelivery.list) {
                this.activities = this.applicantdelivery.list;
                this.activities.forEach((item) => {
                  item.content = item.datetime;
                  item.timestamp = item.remark;
                });
              } else {
                this.noData = true;
                return;
              }
            }
          });
        }
      },
    },
  },
  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;
}
.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;
  }
}
.noData {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  color: #959595;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>