以下图片是物流信息的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
})
},
