uniapp微信小程序物流信息中手机号高亮显示并可以拨打电话

正则匹配留言，找出手机号，结合uni.makePhoneCall()

想要实现效果如下图：

image.png

后端返回数据如图：

image.png

<template>
    <view>
        ...
       <view class="content">
                    <view>物流跟踪明细</view>
                    <view v-if="message != 'ok'" style="margin-top: 10rpx;color: #808080; font-size: 27rpx;">
                        {{message}}
                    </view>
                    <ul class="kdwz_content" v-else>
                        <li class="item" v-for="item in list" :key="item.time">
                            <view class="item-left"></view>
                            <view class="item-right">
                                <view class="time">{{item.time}}</view>
                                 // 注意此处
                                <text class="item-text" v-for="(t,i) in distinguishPhone(item.context)" :key="i"
                                    @click="phoneCall(t)" :style="{color: t.type === 'phone' ? '#ff5215' : ''}">
                                    {{t.val}}
                                </text>
                            </view>
                        </li>
                    </ul>
                </view>
    </view>
</template>
<script>
    export default {
          methods:{
                distinguishPhone(val) {
                let a = val,
                    c = a.split(/(1\d{10})/),
                    list = []
                for (let i in c) {
                    let flag = c[i] != '' && /^(1\d{10})$/.test(c[i])
                    c[i] != '' && list.push({
                        type: flag ? 'phone' : 'text',
                        val: c[i]
                    })
                }
                return list
            },
            phoneCall(t) {
                if (t.type === 'phone') {
                    uni.makePhoneCall({
                        phoneNumber: t.val,
                        success: () => {},
                        fail: () => {}
                    });
                }
            }
          }
     }
</script>