vue.js客服系统实时聊天项目开发（十九）使用正则将消息格式替换为产品卡片信息

我们客服系统的消息列表中，会有产品卡片展示，这个是怎么实现的呢

 

 

产品信息其实就是下面这个字符串

product[{"title":"纯坚果零食大礼包一整箱干果类网红爆款解馋小吃休闲食品送女友","price":"￥9.9","img":"https://img.alicdn.com/bao/uploaded/i1/2201453915278/O1CN01dZolFu1orN8dFeKAj_!!0-item_pic.jpg_200x200q90.jpg_.webp","url":"https://www.taobao.com"}] 

只需要把上面的字符串解析成html格式就可以了

//转换产品卡片
function replaceProduct(str){
    return str.replace(/product\[([^\[\]]+?)\]/g, function (product) {
        console.log(str,arguments);
        if(!arguments[1]){
            return;
        }
        let jsonStr=arguments[1].replace(/\'/g,'"');
        try{
            let info=JSON.parse(jsonStr);
            if(typeof info=="undefined"){
                return;
            }
            if(!info.title) info.title="智能客服系统产品卡片";
            if(!info.price) info.price="￥0";
            if(info.img){
                info.img="<img src='"+info.img+"'/>";
            }else{
                info.img="";
            }
            if(!info.url) info.url="/";
            let html= `
                    <a class="productCard" href="`+info.url+`" target="_blank"/>
                    `+info.img+`

                    <div class="productCardTitle">
                        <p class="productCardTitle">`+info.title+`</p>
                        <p class="productCardPrice">`+info.price+`</p>
                    </div>
                    </a>
            `;
            return html;
        }catch (e) {
            return jsonStr;
        }
    });
}

然后给转换后的html增加相应的样式

.productCard{
        cursor: pointer;
        background: #fff;
        padding: 5px;
        border-radius: 2px;
        width: auto;
        max-width: 730px;
        display: flex;
        border-radius: 5px;
    }
    .productCard img{
        width: 100px;
        height: 100px;
        margin-right: 15px;
    }
    .productCard .productCardPrice{
        color: #ff7736;
        font-weight: bold;
        font-size: 16px;
        margin-top: 10px;
    }
    .productCard .productCardTitle{
        color: #333;
    }

唯一在线客服系统

https://gofly.v1kf.com