Vue realizes the logistics timeline effect

<template>
  <div class="steps-wrap">
    <ul>
      <li v-for="(item,index) in steps" :key="index">
        <span class="time">{{item.time}}</span>
        <div class="circle">
          <img class="icon" v-if="index===0" src="../../../assets/images/user_seleted.png" />
          <img
            class="icon"
            v-else-if="index === steps.length-1"
            src="../../../assets/images/user_seleted.png"
          />
          <i v-else class="circle-icon"></i>
        </div>

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

<script>
export default {
  props: {
    steps: {
      type: Array,
    }
  }
}
</script>

<style lang="less">
.steps-wrap {
  ul {
    padding: 0 16px;
    li {
      display: flex;
      line-height: 1rem;
      color: #999;
      .time {
        text-align: center;
        width: 80px;
        font-size: 12px;
      }
      .circle {
        position: relative;
        z-index: 999;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        width: 16px;
        height: 16px;
        top: 0;
        .icon {
          width: 100%;
          height: 100%;
        }
        .circle-icon {
          position: relative;
          z-index: 999;
          display: inline-block;
          border-radius: 50%;
          width: 8px;
          height: 8px;
          background-color: #333333;
        }
      }
      .message {
        padding: 0 0 1.6rem 25px;
        font-size: 12px;
        flex: 1;
        border-left: 1px solid #999999;
        margin-left: -8px;
      }
      &:last-child {
        .message {
          border-left: 1px solid transparent;
        }
      }
    }
  }
}
</style>

<template>
  <div class="logistics">
    <m-header :title="title" fixed>
      <a @click="$router.go(-1)" slot="left">
        <img src="../../assets/images/root_back.png" class="m-icon-img" style="width:20px" />
      </a>
    </m-header>
    <div class="item" @click="isShow = true">
      <img class="left" src="../../assets/images/ck.jpg" />
      <div class="text">
        <p class="name">{{current.nu}}</p>
        <p class="title">{{current.com}}</p>
      </div>
      <img class="refresh" src="../../assets/images/root_next.png" />
    </div>
 
    <v-steps v-if="loadDataDone" :steps="current.data"></v-steps>
    <div v-else class="empty">
      <img src="../../assets/images/vip.png" alt />
      <span>Sorry! No query records yet</span>
    </div>

    <van-action-sheet v-model="isShow" title="Logistics">
      <ul class="list">
        <li v-for="item in list" @click="onSelect(item)" :key="item.nu" class="item">
          <img class="left" src="../../assets/images/ck.jpg" />
          <div class="text">
            <p class="name">{{item.nu}}</p>
            <p class="title">{{item.com}}</p>
          </div>
        </li>
      </ul>
    </van-action-sheet>
  </div>
</template>

<script>
import mHeader from '@/components/common/header/header.vue'
import vSteps from '@/components/common/steps/Steps.vue'
export default {
  name: 'logistics',
  components:
    mHeader,
    vSteps
  },
  computed: {
    orderSn () {
      return this.$route.query.orderSn
    }
  },
  data () {
    return {
      title: 'Query results',
      isShow: false,
      list: [],
      current: {},
      loadDataDone: false
    }
  },
  created () {
    this.getData()
  },
  methods: {
    async getData () {
      this.loadDataDone = true
      let res = await this.get(this.API.message.deliveryHtml, {
        params: {
          orderSn: this.orderSn
        }
      }).then(res => {
        if (res.Status == 'true' && res.StatusCode === '200') {
          // Mobile phone number click dial processing const telReg = /1[3-9]\d{9}|[0][1-9]{2,3}-[0-9]{5,10}|95\d{3}/g
          res.Result.forEach(item => {
            item.data.forEach(item1 => {
              // Extract the phone number if (telReg.test(item1.context)) {
                 let tels = [...new Set(item1.context.match(telReg))]
                 tels.forEach(item2 => {
                    item1.context = item1.context.replace(new RegExp(item2, 'g'), `<a style="color:red" href="tel:${item2}" rel="external nofollow" >${item2}</a>`)
                  })
              }
            })
          })
          this.current = res.Result[0]
          this.list = res.Result
        }

        if (res.Status == 0 || res.Status == 4) {
          this.loadDataDone = false
        }
      })
    },
    onSelect (item) {
      this.isShow = false
      this.current = item
    }
  }
}
</script>

<style lang="less" >
.logistics {
  .item {
    display: flex;
    align-items: center; /* vertical center */
    padding: 12px 24px;
    .left {
      width: 50px;
      height: 50px;
      object-fit: cover;
    }
    .text {
      flex: 1;
      p {
        margin: 0;
        padding-left: 12px;
      }
    }
    .refresh {
      width: 24px;
      height: 24px;
    }
  }
  .empty {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 48px;
    font-size: 14px;
    span {
      padding-left: 12px;
    }
  }
}
</style>

{
    "Status": "true",
    "StatusCode": "200",
    "Msg": "Success",
    "Timestamp": 1584005302985,
    "Sign": null,
    "Result": [{
        "state": "Signed for",
        "status": "3",
        "com": "SF",
        "nu": "SF1018384252542",
        "data": [{
            "context": "[Shanghai] SF Express has received the express shipment",
            "time": "2020-03-01 18:16:59",
            "ftime": "2020-03-01 18:16:59"
        }, {
            "context": "[Shanghai] Express shipment has been loaded at [Shanghai Qingpu Chonggu Business Point] and is ready to be sent to [Shanghai Huaxin Distribution Center]",
            "time": "2020-03-01 18:40:14",
            "ftime": "2020-03-01 18:40:14"
        }, {
            "context": "[Shanghai] Express has been dispatched",
            "time": "2020-03-01 18:42:12",
            "ftime": "2020-03-01 18:42:12"
        }, {
            "context": "[Shanghai] Express delivery arrived at [Shanghai Huaxin Distribution Center]",
            "time": "2020-03-01 19:01:08",
            "ftime": "2020-03-01 19:01:08"
        }, {
            "context": "[Shanghai] Express shipments have been loaded at [Shanghai Huaxin Distribution Center] and are ready to be sent to [National Aviation Hub (Xiaoshan)]",
            "time": "2020-03-01 20:01:27",
            "ftime": "2020-03-01 20:01:27"
        }, {
            "context": "[Shanghai] Express has been dispatched",
            "time": "2020-03-01 20:48:53",
            "ftime": "2020-03-01 20:48:53"
        }, {
            "context": "[Hangzhou] Express arrived at [National Aviation Hub (Xiaoshan]]",
            "time": "2020-03-01 23:20:28",
            "ftime": "2020-03-01 23:20:28"
        }, {
            "context": "[Hangzhou] express shipments have been loaded at [National Aviation Hub (Xiaoshan)] and are ready to be sent to [Shijiazhuang Gaokai Distribution Center]",
            "time": "2020-03-02 01:31:35",
            "ftime": "2020-03-02 01:31:35"
        }, {
            "context": "[Hangzhou] express has taken off on [Hangzhou to Shijiazhuang flight]",
            "time": "2020-03-02 04:15:00",
            "ftime": "2020-03-02 04:15:00"
        }, {
            "context": "[Shijiazhuang City] Express arrived at [Shijiazhuang] and is ready to be sent to [Shijiazhuang Gaokai Distribution Center]",
            "time": "2020-03-02 06:02:00",
            "ftime": "2020-03-02 06:02:00"
        }, {
            "context": "[Shijiazhuang City] Express delivery arrived at [Shijiazhuang Gaokai Distribution Center]",
            "time": "2020-03-02 08:21:18",
            "ftime": "2020-03-02 08:21:18"
        }, {
            "context": "[Shijiazhuang City] Express shipments have been loaded at [Shijiazhuang Gaokai Distribution Center] and are ready to be sent to [Xingtai High-tech Distribution Point]",
            "time": "2020-03-02 09:15:47",
            "ftime": "2020-03-02 09:15:47"
        }, {
            "context": "[Shijiazhuang City] Express has been dispatched",
            "time": "2020-03-02 09:16:05",
            "ftime": "2020-03-02 09:16:05"
        }, {
            "context": "[Xingtai City] Express delivery arrived at [Xingtai High-tech Distribution Point]",
            "time": "2020-03-02 11:48:24",
            "ftime": "2020-03-02 11:48:24"
        }, {
            "context": "[Xingtai City] Express shipments have been loaded at [Xingtai High-tech Distribution Point] and are ready to be sent to [Songjing Business Point, Shahe City, Xingtai City]",
            "time": "2020-03-02 13:17:55",
            "ftime": "2020-03-02 13:17:55"
        }, {
            "context": "[Xingtai City] Express has been dispatched",
            "time": "2020-03-02 13:18:54",
            "ftime": "2020-03-02 13:18:54"
        }, {
            "context": "[Xingtai City] Express delivery arrived at [Songjing Business Point, Shahe City, Xingtai City]",
            "time": "2020-03-02 13:46:04",
            "ftime": "2020-03-02 13:46:04"
        }, {
            "context": "[Xingtai City] is being delivered, please prepare to sign for it (deliverer: Deng Pengfei, phone: 18631965961)",
            "time": "2020-03-02 13:59:33",
            "ftime": "2020-03-02 13:59:33"
        }, {
            "context": "[Xingtai City] The express was handed over to Deng Pengfei and is on the way (contact number: 18631965961, SF Express has enabled "safe call" to protect your phone privacy, please feel free to answer the call!)",
            "time": "2020-03-02 14:04:19",
            "ftime": "2020-03-02 14:04:19"
        }, {
            "context": "[Xingtai City] Your express has been signed for. If you have any questions, please call the deliveryman [Deng Pengfei, Tel: 18631965961]. During the epidemic, SF Express disinfects outlets every day, and the deliverymen take their temperatures and wear masks every day. Thank you for using SF Express and we look forward to serving you again. (Total number of items in the main order: 1)",
            "time": "2020-03-02 14:37:20",
            "ftime": "2020-03-02 14:37:20"
        }, {
            "context": "[Xingtai City] In the official website\"Waybill Information & Receipt Picture\", you can view the consignee information",
            "time": "2020-03-02 14:37:20",
            "ftime": "2020-03-02 14:37:20"
        }]
    }, {
        "state": "Signed for",
        "status": "3",
        "com": "YD",
        "nu": "3103140966821",
        "data": [{
            "context": "Shanghai Putuo District Xu Company collects and scans the items",
            "time": "2020-02-13 20:13:39",
            "ftime": "2020-02-13 20:13:39"
        }, {
            "context": "Shanghai distribution center is weighing and scanning at the distribution center",
            "time": "2020-02-13 23:22:20",
            "ftime": "2020-02-13 23:22:20"
        }, {
            "context": "Shanghai Distribution Center scans the vehicle for loading and sends it to: Jiangsu Suzhou Distribution Center",
            "time": "2020-02-14 00:29:45",
            "ftime": "2020-02-14 00:29:45"
        }, {
            "context": "Jiangsu Suzhou Distribution Center is scanning the unloading vehicles at the distribution center",
            "time": "2020-02-24 04:36:07",
            "ftime": "2020-02-24 04:36:07"
        }, {
            "context": "Sent from Jiangsu Suzhou Distribution Center, this transfer destination: Jiangsu Suzhou Xiangcheng District Company",
            "time": "2020-02-24 04:55:10",
            "ftime": "2020-02-24 04:55:10"
        }, {
            "context": "Jiangsu Suzhou Xiangcheng District Company Wanli Road Convenience Storage Branch is scanning for delivery; delivery salesperson: Fu Longlong; contact number: 18751166952",
            "time": "2020-02-24 09:22:13",
            "ftime": "2020-02-24 09:22:13"
        }, {
            "context": "Jiangsu Suzhou Xiangcheng District Company Wanli Road Convenience Storage Branch is scanning for delivery; delivery salesperson: Fu Longlong; contact number: 18751166952",
            "time": "2020-02-24 09:30:24",
            "ftime": "2020-02-24 09:30:24"
        }, {
            "context": "The express mail of Wanli Road Convenience Storage Branch of Xiangcheng District Company in Suzhou, Jiangsu Province has been received by me. If you have any questions, please call the salesperson: Fu Longlong [18751166952]. Meeting is fate. If you are satisfied with my service, can you give me five stars? [Please give a five-star praise in the evaluation of the courier]",
            "time": "2020-02-24 11:11:05",
            "ftime": "2020-02-24 11:11:05"
        }]
    }, {
        "state": "Signed for",
        "status": "3",
        "com": "ZTO",
        "nu": "73122326322138",
        "data": [{
            "context": "【Suzhou City】 【Kunshan】 (0512-83630555, 0512-87807044) CK (18762410718) has been collected",
            "time": "2019-11-07 18:42:40",
            "ftime": "2019-11-07 18:42:40"
        }, {
            "context": "【Suzhou City】 Express has arrived at 【Kunshan】",
            "time": "2019-11-07 22:37:12",
            "ftime": "2019-11-07 22:37:12"
        }, {
            "context": "【Suzhou City】 Express shipment left 【Kunshan】 and has been sent to 【Wuxi Transit Department】",
            "time": "2019-11-07 22:49:26",
            "ftime": "2019-11-07 22:49:26"
        }, {
            "context": "【Wuxi City】The express has arrived at 【Wuxi Transit Department】",
            "time": "2019-11-08 05:15:58",
            "ftime": "2019-11-08 05:15:58"
        }, {
            "context": "【Wuxi City】 Express shipment has left 【Wuxi Transit Department】 and has been sent to 【Nanjing Transit Department】",
            "time": "2019-11-08 05:16:50",
            "ftime": "2019-11-08 05:16:50"
        }, {
            "context": "【Nanjing City】The express has arrived at 【Nanjing Transit Department】",
            "time": "2019-11-08 10:04:29",
            "ftime": "2019-11-08 10:04:29"
        }, {
            "context": "【Nanjing City】 Express shipment has left 【Nanjing Transit Department】 and has been sent to 【Nanjing Pukou District】",
            "time": "2019-11-08 10:12:19",
            "ftime": "2019-11-08 10:12:19"
        }, {
            "context": "【Nanjing City】 The express has arrived at 【Nanjing Pukou District】",
            "time": "2019-11-08 13:03:28",
            "ftime": "2019-11-08 13:03:28"
        }, {
            "context": "【Nanjing City】 【Nanjing Pukou District】The Intermediate Court (13291283965) is delivering the first package. Please keep the phone open and wait patiently (95720 is the exclusive number for Zhongtong couriers to call out, please feel free to answer it). The brother's temperature is normal today. He will wear a mask to deliver the package for you. You can also contact the brother to put your package at your designated collection point. I wish you good health!",
            "time": "2019-11-08 13:06:57",
            "ftime": "2019-11-08 13:06:57"
        }, {
            "context": "【Nanjing】The express has been signed for by 【Cainiao Station at the bottom of Binjiang Building, Nanxin Daxiyuan】. If you have any questions, please call (13291283965 / 95311). Thank you for using ZTO Express. We look forward to serving you again!",
            "time": "2019-11-08 13:40:19",
            "ftime": "2019-11-08 13:40:19"
        }]
    }],
    "AlertType": "toast"
}