归档详情页面开发及接口联调

2023-10-11 20:20:30 +08:00
parent 620f3411e7
commit 9891cbd6e8
6 changed files with 470 additions and 61 deletions
@@ -0,0 +1,130 @@
+<template>
+  <div>
+    <div class="loading" v-if="flagLoading">
+      <i class="el-icon-loading"></i>
+    </div>
+    <div v-else>
+      <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", "flagLoading"],
+  data() {
+    return {
+      reverse: true,
+      applicantdelivery: {}, //申请人物流信息
+      expressOne: {},
+      expressTwo: {},
+    };
+  },
+  created() {
+    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);
+          this.expressOne = this.applicantdelivery;
+          console.log(this.expressOne, "this.expressOne");
+          if (this.expressOne.length > 0) {
+            this.expressOne.list.forEach((item) => {
+              item.content = item.datetime;
+              item.timestamp = item.remark;
+            });
+          }
+        } else {
+          let applicantdata = item.logisticsInfo;
+          this.applicantdelivery = JSON.parse(applicantdata);
+          if (this.applicantdelivery.list) {
+            this.expressTwo = this.applicantdelivery;
+            if (this.expressOne.length > 0) {
+              this.expressTwo.forEach((item) => {
+                item.content = item.datetime;
+                item.timestamp = item.remark;
+              });
+            }
+          }
+        }
+      });
+    }
+  },
+  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>