Vue realisiert den Logistik-Timeline-Effekt

<Vorlage>
  <div Klasse="Schritte-Wrap">
    <ul>
      <li v-for="(item,index) in Schritten" :key="index">
        <span class="Zeit">{{item.Zeit}}</span>
        <div Klasse="Kreis">
          <img class="icon" v-if="index===0" src="../../../assets/images/user_seleted.png" />
          <Bild
            Klasse="Symbol"
            v-else-if="index === Schritte.Länge-1"
            src="../../../assets/images/user_seleted.png"
          />
          <i v-else class="Kreis-Symbol"></i>
        </div>

        <span v-html="item.context" class="message"></span>
      </li>
    </ul>
  </div>
</Vorlage>

<Skript>
Standard exportieren {
  Requisiten: {
    Schritte: {
      Typ: Array,
    }
  }
}
</Skript>

<style lang="less">
.Schritte-Wrap {
  ul {
    Polsterung: 0 16px;
    li {
      Anzeige: Flex;
      Zeilenhöhe: 1rem;
      Farbe: #999;
      .Zeit {
        Textausrichtung: zentriert;
        Breite: 80px;
        Schriftgröße: 12px;
      }
      .Kreis {
        Position: relativ;
        Z-Index: 999;
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Elemente ausrichten: zentrieren;
        Randradius: 50 %;
        Breite: 16px;
        Höhe: 16px;
        oben: 0;
        .Symbol {
          Breite: 100 %;
          Höhe: 100%;
        }
        .Kreissymbol {
          Position: relativ;
          Z-Index: 999;
          Anzeige: Inline-Block;
          Randradius: 50 %;
          Breite: 8px;
          Höhe: 8px;
          Hintergrundfarbe: #333333;
        }
      }
      .Nachricht {
        Polsterung: 0 0 1,6rem 25px;
        Schriftgröße: 12px;
        biegen: 1;
        Rahmen links: 1px durchgezogen #999999;
        Rand links: -8px;
      }
      &:letztes-Kind {
        .Nachricht {
          Rahmen links: 1px durchgehend transparent;
        }
      }
    }
  }
}
</Stil>

<Vorlage>
  <div Klasse="Logistik">
    <m-header :title="Titel" behoben>
      <a @click="$router.go(-1)" slot="links">
        <img src="../../assets/images/root_back.png" class="m-icon-img" style="width:20px" />
      </a>
    </m-header>
    <div Klasse="Artikel" @click="isShow = true">
      <img class="left" src="../../assets/images/ck.jpg" />
      <div Klasse="Text">
        <p class="name">{{current.nu}}</p>
        <p class="title">{{current.com}}</p>
      </div>
      <img class="aktualisieren" src="../../assets/images/root_next.png" />
    </div>
 
    <v-steps v-if="loadDataDone" :steps="current.data"></v-steps>
    <div v-else Klasse="leer">
      <img src="../../assets/images/vip.png" alt />
      <span>Entschuldigung! Noch keine Abfragedatensätze</span>
    </div>

    <van-action-sheet v-model="isShow" title="Logistik">
      <ul Klasse="Liste">
        <li v-for="Element in Liste" @click="onSelect(Element)" :key="element.nu" class="Element">
          <img class="left" src="../../assets/images/ck.jpg" />
          <div Klasse="Text">
            <p class="name">{{item.nu}}</p>
            <p class="title">{{item.com}}</p>
          </div>
        </li>
      </ul>
    </van-action-sheet>
  </div>
</Vorlage>

<Skript>
importiere mHeader aus '@/components/common/header/header.vue'
vSteps aus '@/components/common/steps/Steps.vue' importieren
Standard exportieren {
  Name: 'Logistik',
  Komponenten:
    mHeader,
    vSchritte
  },
  berechnet: {
    orderSn () {
      gib dies zurück.$route.query.orderSn
    }
  },
  Daten () {
    zurückkehren {
      Titel: „Abfrageergebnisse“,
      isShow: false,
      Liste: [],
      aktuell: {},
      loadDataDone: falsch
    }
  },
  erstellt () {
    dies.getData()
  },
  Methoden: {
    asynchron getData () {
      this.loadDataDone = wahr
      let res = warte auf dies.get(this.API.message.deliveryHtml, {
        Parameter: {
          orderSn: diese.orderSn
        }
      }).dann(res => {
        wenn (res.Status == 'true' und res.StatusCode === '200') {
          // Handynummer per Klickwählen verarbeiten const telReg = /1[3-9]\d{9}|[0][1-9]{2,3}-[0-9]{5,10}|95\d{3}/g
          res.Ergebnis.fürJeden(Element => {
            item.data.forEach(item1 => {
              // Extrahiere die Telefonnummer, wenn (telReg.test(item1.context)) {
                 let tels = [...neues Set(item1.context.match(telReg))]
                 tels.forEach(item2 => {
                    item1.context = item1.context.replace(neuer RegExp(item2, 'g'), `<a style="color:red" href="tel:${item2}" rel="external nofollow" >${item2}</a>`)
                  })
              }
            })
          })
          this.current = res.Ergebnis[0]
          diese.Liste = res.Ergebnis
        }

        wenn (res.Status == 0 || res.Status == 4) {
          this.loadDataDone = falsch
        }
      })
    },
    bei Auswahl (Element) {
      this.isShow = false
      this.current = Artikel
    }
  }
}
</Skript>

<style lang="less" >
.logistik {
  .Artikel {
    Anzeige: Flex;
    align-items: center; /* vertikal zentriert */
    Polsterung: 12px 24px;
    .links {
      Breite: 50px;
      Höhe: 50px;
      Objekt-Passung: Abdeckung;
    }
    .text {
      biegen: 1;
      P {
        Rand: 0;
        Polsterung links: 12px;
      }
    }
    .aktualisieren {
      Breite: 24px;
      Höhe: 24px;
    }
  }
  .leer {
    Anzeige: Flex;
    Inhalt ausrichten: zentriert;
    Elemente ausrichten: zentrieren;
    Polsterung oben: 48px;
    Schriftgröße: 14px;
    Spanne {
      Polsterung links: 12px;
    }
  }
}
</Stil>

{
    "Status": "wahr",
    "StatusCode": "200",
    "Msg": "Erfolgreich",
    "Zeitstempel": 1584005302985,
    "Vorzeichen": null,
    "Ergebnis": [{
        "state": "Unterzeichnet für",
        "Status": "3",
        "com": "SF",
        "nu": "SF1018384252542",
        "Daten": [{
            "context": "[Shanghai] SF Express hat die Express-Sendung erhalten",
            "Zeit": "2020-03-01 18:16:59",
            "ftime": "01.03.2020 18:16:59"
        }, {
            "Kontext": "[Shanghai] Express-Sendung wurde am [Shanghai Qingpu Chonggu Business Point] verladen und ist bereit zum Versand an [Shanghai Huaxin Distribution Center]",
            "Zeit": "2020-03-01 18:40:14",
            "ftime": "2020-03-01 18:40:14"
        }, {
            "Kontext": "[Shanghai] Express wurde versandt",
            "Zeit": "2020-03-01 18:42:12",
            "ftime": "2020-03-01 18:42:12"
        }, {
            "Kontext": "[Shanghai] Express-Lieferung ist im [Shanghai Huaxin Distribution Center] eingetroffen",
            "Zeit": "2020-03-01 19:01:08",
            "ftime": "2020-03-01 19:01:08"
        }, {
            "Kontext": "[Shanghai] Express-Sendungen wurden im [Shanghai Huaxin Distribution Center] verladen und sind bereit zum Versand an [National Aviation Hub (Xiaoshan)]",
            "Zeit": "2020-03-01 20:01:27",
            "ftime": "01.03.2020 20:01:27"
        }, {
            "Kontext": "[Shanghai] Express wurde versandt",
            "Zeit": "2020-03-01 20:48:53",
            "ftime": "01.03.2020 20:48:53"
        }, {
            "Kontext": "[Hangzhou] Express ist am [National Aviation Hub (Xiaoshan]] angekommen",
            "Zeit": "2020-03-01 23:20:28",
            "ftime": "01.03.2020 23:20:28"
        }, {
            "Kontext": "Expresssendungen [von Hangzhou] wurden am [National Aviation Hub (Xiaoshan)] verladen und sind bereit zum Versand an das [Shijiazhuang Gaokai Distribution Center]",
            "Zeit": "2020-03-02 01:31:35",
            "ftime": "2020-03-02 01:31:35"
        }, {
            "Kontext": "[Hangzhou] Express ist zum [Flug von Hangzhou nach Shijiazhuang] gestartet",
            "Zeit": "2020-03-02 04:15:00",
            "ftime": "2020-03-02 04:15:00"
        }, {
            "Kontext": "[Shijiazhuang City] Express ist in [Shijiazhuang] angekommen und kann an [Shijiazhuang Gaokai Distribution Center] verschickt werden",
            "Zeit": "2020-03-02 06:02:00",
            "ftime": "02.03.2020 06:02:00"
        }, {
            "Kontext": "[Stadt Shijiazhuang] Expresslieferung ist im [Verteilungszentrum Shijiazhuang Gaokai] eingetroffen",
            "Zeit": "2020-03-02 08:21:18",
            "ftime": "2020-03-02 08:21:18"
        }, {
            "Kontext": "[Stadt Shijiazhuang] Expresssendungen wurden im [Shijiazhuang Gaokai Distribution Center] verladen und sind bereit zum Versand an [Xingtai High-tech Distribution Point]",
            "Zeit": "2020-03-02 09:15:47",
            "ftime": "2020-03-02 09:15:47"
        }, {
            "Kontext": "[Shijiazhuang City] Express wurde versandt",
            "Zeit": "2020-03-02 09:16:05",
            "ftime": "2020-03-02 09:16:05"
        }, {
            "Kontext": "[Xingtai City] Expresslieferung ist am [Xingtai High-Tech Distribution Point] angekommen",
            "Zeit": "2020-03-02 11:48:24",
            "ftime": "2020-03-02 11:48:24"
        }, {
            "Kontext": "[Xingtai City] Express-Sendungen wurden am [Xingtai High-tech Distribution Point] verladen und sind bereit zum Versand an [Songjing Business Point, Shahe City, Xingtai City]",
            "Zeit": "2020-03-02 13:17:55",
            "ftime": "2020-03-02 13:17:55"
        }, {
            "Kontext": "[Xingtai City] Express wurde versandt",
            "Zeit": "2020-03-02 13:18:54",
            "ftime": "2020-03-02 13:18:54"
        }, {
            "Kontext": "[Xingtai City] Expresslieferung ist bei [Songjing Business Point, Shahe City, Xingtai City] eingetroffen",
            "Zeit": "2020-03-02 13:46:04",
            "ftime": "2020-03-02 13:46:04"
        }, {
            "Kontext": "[Xingtai City] wird zugestellt. Bitte halten Sie Ihre Unterschrift bereit (Zusteller: Deng Pengfei, Telefon: 18631965961)",
            "Zeit": "2020-03-02 13:59:33",
            "ftime": "2020-03-02 13:59:33"
        }, {
            "Kontext": "[Xingtai City] Der Express wurde an Deng Pengfei übergeben und ist unterwegs (Kontaktnummer: 18631965961, SF Express hat "Sicherer Anruf" aktiviert, um die Privatsphäre Ihres Telefons zu schützen. Bitte nehmen Sie den Anruf gerne an!)",
            "Zeit": "2020-03-02 14:04:19",
            "ftime": "2020-03-02 14:04:19"
        }, {
            "Kontext": "[Xingtai City] Ihr Express wurde unterschrieben. Wenn Sie Fragen haben, rufen Sie bitte den Zusteller an [Deng Pengfei, Tel.: 18631965961]. Während der Epidemie desinfiziert SF Express die Verkaufsstellen täglich, und die Zusteller messen täglich ihre Temperatur und tragen Masken. Vielen Dank, dass Sie SF Express nutzen, und wir freuen uns darauf, Sie wieder bedienen zu dürfen. (Gesamtzahl der Artikel in der Hauptbestellung: 1)",
            "Zeit": "2020-03-02 14:37:20",
            "ftime": "2020-03-02 14:37:20"
        }, {
            "Kontext": "[Stadt Xingtai] Auf der offiziellen Website \"Frachtbriefinformationen und Empfangsbilder\" können Sie die Empfängerinformationen einsehen",
            "Zeit": "2020-03-02 14:37:20",
            "ftime": "2020-03-02 14:37:20"
        }]
    }, {
        "state": "Unterzeichnet für",
        "Status": "3",
        "com": "YD",
        "nu": "3103140966821",
        "Daten": [{
            "Kontext": "Shanghai Putuo District Xu Company sammelt und scannt die Artikel",
            "Zeit": "13.02.2020 20:13:39",
            "ftime": "13.02.2020 20:13:39"
        }, {
            "Kontext": "Das Shanghaier Distributionszentrum wiegt und scannt im Distributionszentrum",
            "Zeit": "2020-02-13 23:22:20",
            "ftime": "13.02.2020 23:22:20"
        }, {
            "Kontext": "Das Shanghai Distribution Center scannt das Fahrzeug zum Beladen und sendet es an: Jiangsu Suzhou Distribution Center",
            "Zeit": "2020-02-14 00:29:45",
            "ftime": "14.02.2020 00:29:45"
        }, {
            "Kontext": "Das Jiangsu Suzhou Distribution Center scannt die Entladefahrzeuge im Distributionszentrum",
            "Zeit": "24.02.2020 04:36:07",
            "ftime": "24.02.2020 04:36:07"
        }, {
            "Kontext": "Gesendet vom Jiangsu Suzhou Distribution Center, Ziel dieser Übertragung: Jiangsu Suzhou Xiangcheng District Company",
            "Zeit": "24.02.2020 04:55:10",
            "ftime": "24.02.2020 04:55:10"
        }, {
            "Kontext": "Jiangsu Suzhou Xiangcheng District Company Wanli Road Convenience Storage Branch scannt nach Lieferung; Lieferverkäufer: Fu Longlong; Kontaktnummer: 18751166952",
            "Zeit": "24.02.2020 09:22:13",
            "ftime": "24.02.2020 09:22:13"
        }, {
            "Kontext": "Jiangsu Suzhou Xiangcheng District Company Wanli Road Convenience Storage Branch scannt nach Lieferung; Lieferverkäufer: Fu Longlong; Kontaktnummer: 18751166952",
            "Zeit": "24.02.2020 09:30:24",
            "ftime": "24.02.2020 09:30:24"
        }, {
            "Kontext": "Ich habe die Expresspost der Wanli Road Convenience Storage Branch der Xiangcheng District Company in Suzhou, Provinz Jiangsu, erhalten. Wenn Sie Fragen haben, wenden Sie sich bitte an den Verkäufer: Fu Longlong [18751166952]. Treffen ist Schicksal. Wenn Sie mit meinem Service zufrieden sind, können Sie mir fünf Sterne geben? [Bitte geben Sie dem Kurier bei der Bewertung ein Fünf-Sterne-Lob]",
            "Zeit": "24.02.2020 11:11:05",
            "ftime": "24.02.2020 11:11:05"
        }]
    }, {
        "state": "Unterzeichnet für",
        "Status": "3",
        "com": "ZTO",
        "nu": "73122326322138",
        "Daten": [{
            "Kontext": "【Stadt Suzhou】 【Kunshan】 (0512-83630555, 0512-87807044) CK (18762410718) wurde gesammelt",
            "Zeit": "07.11.2019 18:42:40",
            "ftime": "07.11.2019 18:42:40"
        }, {
            "Kontext": "Der 【Suzhou City】 Express ist in 【Kunshan】 angekommen",
            "Zeit": "07.11.2019 22:37:12",
            "ftime": "07.11.2019 22:37:12"
        }, {
            "Kontext": "【Stadt Suzhou】 Expresssendung hat 【Kunshan】 verlassen und wurde an 【Wuxi Transit Department】 weitergeleitet",
            "Zeit": "07.11.2019 22:49:26",
            "ftime": "07.11.2019 22:49:26"
        }, {
            "Kontext": "【Stadt Wuxi】Der Express ist bei der 【Verkehrsbehörde Wuxi】 angekommen",
            "Zeit": "08.11.2019 05:15:58",
            "ftime": "08.11.2019 05:15:58"
        }, {
            "Kontext": "【Stadt Wuxi】 Expresssendung hat 【Transportabteilung Wuxi】 verlassen und wurde an 【Transportabteilung Nanjing】 weitergeleitet",
            "Zeit": "08.11.2019 05:16:50",
            "ftime": "08.11.2019 05:16:50"
        }, {
            "Kontext": "【Stadt Nanjing】Der Express ist bei der 【Nanjing Transitabteilung】 angekommen",
            "Zeit": "08.11.2019 10:04:29",
            "ftime": "08.11.2019 10:04:29"
        }, {
            "Kontext": "【Stadt Nanjing】 Expresssendung hat die 【Nanjing Transitabteilung】 verlassen und wurde an 【Nanjing Pukou District】 geschickt",
            "Zeit": "08.11.2019 10:12:19",
            "ftime": "08.11.2019 10:12:19"
        }, {
            "Kontext": "【Stadt Nanjing】 Der Express ist im 【Bezirk Nanjing Pukou】 angekommen",
            "Zeit": "08.11.2019 13:03:28",
            "ftime": "08.11.2019 13:03:28"
        }, {
            "Kontext": "【Stadt Nanjing】 【Bezirk Nanjing Pukou】 Das Mittlere Gericht (13291283965) liefert das erste Paket aus. Bitte halten Sie das Telefon offen und warten Sie geduldig (95720 ist die exklusive Nummer für Zhongtong-Kurier, bitte gehen Sie ruhig ran). Die Temperatur des Bruders ist heute normal. Er wird eine Maske tragen, um das Paket für Sie auszuliefern. Sie können den Bruder auch kontaktieren, um Ihr Paket an Ihrer angegebenen Abholstelle abzugeben. Ich wünsche Ihnen gute Gesundheit!",
            "Zeit": "08.11.2019 13:06:57",
            "ftime": "08.11.2019 13:06:57"
        }, {
            "Kontext": "【Nanjing】Der Express wurde von 【Cainiao Station am Fuße des Binjiang-Gebäudes, Nanxin Daxiyuan】 unterschrieben. Wenn Sie Fragen haben, rufen Sie bitte an (13291283965 / 95311). Vielen Dank, dass Sie ZTO Express genutzt haben. Wir freuen uns darauf, Sie wieder bedienen zu dürfen!",
            "Zeit": "08.11.2019 13:40:19",
            "ftime": "08.11.2019 13:40:19"
        }]
    }],
    "Alarmtyp": "Toast"
}