以下图片是物流信息的UI图

物流信息.jpg

按照UI图实现html和css
物流信息分为左右两侧，左侧是竖线和圆圈，按照定位，都定在左侧，右侧是信息，也是父级，给相对定位

<view class="logisticStepBox">
  <view class="stepBox">
    <view class="stepMsg">
      <view>2022-01-22 12:12:21</view>
      <block>
        <text>物流信息</text>
      </block>
    </view>
    <view class="stepCircle"></view>
    <view class="stepLine"></view>
  </view>
</view>

.logisticStepBox {
  padding: 0 8rpx 8rpx 50rpx;
}
.stepBox {
  position: relative;
  padding-block: 20rpx;
  font-size: 24rpx;
  color: #C2C4CC;
}
.stepCircle {
  position: absolute;
  left: -38rpx;
  top: 30rpx;
  width: 16rpx;
  height: 16rpx;
  background:#C2C4CC;
  border-radius: 50%;
  z-index: 1;
}
.stepLine {
  width: 1px;
  height: 100%;
  background: #C2C4CC;
  position: absolute;
  left: -30rpx;
  top: 30rpx;
}

页面写好后，开始用数据循环渲染了，首先，我们看下接口给的数据结构，然后我们需要让快递员的手机号高亮，并且点击可以打电话，所以需要把expressInfo中的信息拆分一下，手机号和其他信息分别拆出来，然后再组合起来，循环到页面上

{
  "logisticsInfo": [{
    "expressInfo": "您的快件已由本人签收，如有疑问请电联快递员【钱钱，电话：199999999999】，感谢您使用顺丰，期待再次为您服务。（主单总件数：1件）",
    "expressTime": "2024-07-15 16:00:29"
  }, {
    "expressInfo": "快件交给钱钱，正在派送途中（联系电话：199999999999，顺丰已开启“安全呼叫”保护您的电话隐私,请放心接听！）（主单总件数：1件）",
    "expressTime": "2024-07-15 15:13:45"
  }, {
    "expressInfo": "快件到达【扬州邗江京华店】",
    "expressTime": "2024-07-15 14:13:51"
  }, {
    "expressInfo": "快件离开【扬州维扬中转场】，已在发往【扬州邗江京华店】的路上",
    "expressTime": "2024-07-15 13:19:51"
  }, {
    "expressInfo": "快件在【扬州维扬中转场】完成分拣，准备发往【扬州邗江京华店】",
    "expressTime": "2024-07-15 13:14:46"
  }, {
    "expressInfo": "顺丰速运已收取快件",
    "expressTime": "2024-07-14 10:49:49"
  }]
}

需要将物流信息拆分成以下的格式，然后在html中循环渲染，例如将物流信息物流信息前190099999999物流信息后拆分以下数组

[
  {type: 'text', val: "物流信息前"},
  {type: 'phone', val: "199999999999"},
  {type: 'text', val: "物流信息后"},
]

拆分的方法如下，将物流信息传入进去后，返回拆分后的信息

// 处理拆分物流信息中手机号, 分割出字符串中的手机号
phoneNumStrArry(str) {
  if (!str) return false
  const phoneReg = /[1][3,4,5,7,6,8,9][0-9]{9}|\d{3,4}-\d{7,8}/g
  // 匹配出所有的手机号
  const phoneNumList = str.match(phoneReg)
  // 用手机号分割成字符串数组
  const textList = str.split(phoneReg)
  // 重新生成的字符串和手机号数组
  const phoneNumStrList = []
  // 循环生成手机号和普通字符串的数组
  textList.forEach((item, index) => {
    if (item === '') {
      index === 0 && phoneNumStrList.push({ type: 'phone', val: phoneNumList[0] })
    } else {
      phoneNumStrList.push({ type: 'text', val: item })
      // 如果有手机号才能添加
      phoneNumList && phoneNumList[index] && phoneNumStrList.push({ type: 'phone', val: phoneNumList[index] })
    }
  })
  return phoneNumStrList
}

下面将接口返回的信息拆分出手机号，可以高亮且点击能打电话

const { logisticsInfo } = await getLogisticsInfo(params)
logisticsInfo.forEach(item => {
  item.expressStrList = this.phoneNumStrArry(item.expressInfo)
})

将拆分后的数据循环渲染到页面上

<view class="logisticStepBox">
  <view class="stepBox" wx:for="{{logisticsInfo}}" wx:key="index">
    <view class="stepMsg {{index === 0 ? 'stepMsgActive' : ''}}">
      <view>{{item.expressTime}}</view>
      <block wx:for="{{item.expressStrList}}" wx:for-item="express" wx:for-index="i" wx:key="i">
        <text wx:if="{{express.type === 'phone'}}" class="highlight" catchtap="phoneCall" data-phone="{{express.val}}">{{express.val}}</text>
        <text wx:else>{{express.val}}</text>
      </block>
    </view>
    <view class="stepCircle  {{index === 0 ? 'stepCircleActive' : ''}}"></view>
    <view class="stepLine"></view>
  </view>
</view>

加入第一行物流信息的高亮样式

.logisticStepBox {
  padding: 0 8rpx 8rpx 50rpx;
}
.stepBox {
  position: relative;
  padding-block: 20rpx;
  font-size: 24rpx;
  color: #C2C4CC;
}
.stepMsgActive {
  color: #111746;
}
.highlight {
  color: #1681FC;
}
.stepCircle {
  position: absolute;
  left: -38rpx;
  top: 30rpx;
  width: 16rpx;
  height: 16rpx;
  background:#C2C4CC;
  border-radius: 50%;
  z-index: 1;
}
.stepCircleActive {
  background: #1681FC;
}
.stepLine {
  width: 1px;
  height: 100%;
  background: #C2C4CC;
  position: absolute;
  left: -30rpx;
  top: 30rpx;
}

点击手机号打电话

phoneCall(e) {
  const phoneNum = e.currentTarget.dataset.phone;
  wx.makePhoneCall({
    phoneNumber: phoneNum
  })
},