CINXE.COM

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>在线客服中心-中国路面机械网</title> <meta name="keywords" content="智能客服中心" /> <meta name="description" content="智能客服中心" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /> <meta name="format-detection" content="telephone=no,address=no,email=no" /> <meta name="mobileOptimized" content="width" /> <meta name="handheldFriendly" content="true" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" href="https://u-static.lmjx.net/2021/aicsd/m/css/style.css"> <script type="text/javascript"> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://hm.baidu.com/hm.js?d36bd6ab22b64b2de5270ff7921c8904"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="https://bigping.lmjx.net/ding/uuid"></script> </head> <div id="app"> <div class="popupchat"> <div class="chattitle"> <div class="back" @click="clickToBack"></div> <div class="tit">在线客服</div> </div> <div class="chatcon" v-if="pageLoading"> <div class="crobot"> <div class="icon"><img :src="kficon" alt=""></div> <div class="crobotin"> <div class="name"><span>{{kfname}}</span> 09:50:35</div> <div class="chatpro"> <div class="img"><img src="https://zj-static.lmjx.net/upload/202403/07/1000w667h1709800796431694.jpg!605x375.jpg" alt=""></div> <div class="chatproin"> <div class="tit">美通筑机 LMT5046GLQZ 智能型沥青洒布车</div> </div> </div> </div> </div> <template v-for="(item,index) in messages"> <div class="crobot" v-if="item.type == 'pull' && item.contenttype == 'text'"> <div class="icon"><img :src="kficon" alt=""></div> <div class="crobotin"> <div class="name">{{kfname}}<span>{{item.created}}</span></div> <div class="text">{{item.message}}</div> </div> </div> <div class="crobot" v-if="item.type == 'pull' && item.contenttype == 'acclist'"> <div class="crobot"> <div class="icon"><img :src="kficon" alt=""></div> <div class="crobotin"> <div class="name"><span>{{kfname}}</span> 09:50:35</div> <div style="background: #f4f4f4;margin-right: 60px;border-radius: 6px"> <div class="acctip" style="padding: 6px 0 5px 14px">为您推荐以下相关产品</div> <div class="chatpro" v-for="(iitem,iindex) in item.acclist" style="margin-top:0;margin-right:0px"> <div class="img"><img :src="iitem.icon" alt=""></div> <div class="chatproin"> <div class="tit">{{iitem.title}}</div> </div> </div> <div style="width: 100%;padding:10px"> <div class="accsubmit" style="text-align: center;width: 147px;background: rgb(225, 47, 47);line-height: 30px;color: white;margin: 0 10px 0 10px;border-radius: 7px;margin: 0px auto;" @click="clickToAskpAccList(item)">同时帮我问问以上价格</div> </div> </div> </div> </div> </div> <div class="crobot" v-if="item.type == 'pull' && item.contenttype == 'tel//'"> <div class="icon"><img :src="kficon" alt=""></div> <div class="crobotin"> <div class="name">{{kfname}}<span>{{item.created}}</span></div> <div class="text">{{item.message1}} <a class="kefutel" :href="'tel:' + item.tel">{{item.tel}}</a> {{item.message2}}</div> </div> </div> <div class="crobot" v-if="item.type == 'pull' && item.contenttype == 'askpphone'"> <div class="icon"><img :src="kficon" alt=""></div> <div class="crobotin"> <div class="name">{{kfname}}<span>{{item.created}}</span></div> <div class="chatform"> <div class="it" v-if="item.issub"><input type="text" placeholder="请输入电话" disabled="disabled" v-model="item.model"></div> <div class="it" v-if="!item.issub"><input type="text" placeholder="请输入电话" v-model="item.model"></div> <div class="it" v-if="!item.issub"><input type="submit" value="提交" class="submit" @click="clickToAskpPhone(index)"></div> </div> </div> </div> <div class="crobot" v-if="item.type == 'pull' && item.contenttype == 'askpname'"> <div class="icon"><img :src="kficon" alt=""></div> <div class="crobotin"> <div class="name">{{kfname}}<span>{{item.created}}</span></div> <div class="chatform"> <div class="it" v-if="item.issub"><input type="text" placeholder="请输入您的姓名" disabled="disabled" v-model="item.model"></div> <div class="it" v-if="!item.issub"><input type="text" placeholder="请输入您的姓名" v-model="item.model"></div> <div class="it" v-if="!item.issub"><input type="submit" value="提交" class="submit" @click="clickToAskpName(index)"></div> </div> </div> </div> <div class="cuser" v-if="item.type == 'push' && item.contenttype == 'text'"> <div class="crobotin"> <div class="name"><span>{{item.created}}</span></div> <div class="text">{{item.message}}</div> </div> <div class="icon"><img src="https://u-static.lmjx.net/2021/aicsd/images/user.png" alt=""> </div> </div> </template> <div style="height:120px;"></div> </div> <div style="position:fixed;bottom:0;width:100%;background:#fff;"> <div class="entering" v-if="isreply">客服正在输入…</div> <div class="quickoptions"> <div class="item" v-for="(item,index) in quickwords" :key="index" @click="clickToQuick(item)"> {{item}} </div> </div> <div class="formsend"> <div class="ctextarea"><textarea name="" id="" cols="30" rows="10" placeholder="请说点什么吧" v-model="content"></textarea></div> <div class="pssubmit" @click="clickToSend">发送</div> </div> </div> </div> <div class="tips" v-if="ishowerrmsg">{{errmsg}}</div> </div> <script> (function() { var hm = document.createElement("script"); hm.src = "https://u-static.lmjx.net/js/rping.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script src="https://u-static.lmjx.net/js/jquery.min.js"></script> <script src="https://u-static.lmjx.net/js/vue.js"></script> <script> function formatTNum(num) { if (num < 10) return '0' + num; return num; } function format(time, format) { if (!time) time = new Date() / 1000; if (!format) format = 'H:i:s'; time = time * 1000; let tdate = new Date(time); let y = tdate.getFullYear(); let m = formatTNum(tdate.getMonth() + 1); let d = formatTNum(tdate.getDate()); let h = formatTNum(tdate.getHours()); let i = formatTNum(tdate.getMinutes()); let s = formatTNum(tdate.getSeconds()); let w = tdate.getDay(); let ws = ['一', '二', '三', '四', '五', '六', '日']; return format.replace('Y', y).replace('m', m).replace('d', d).replace('H', h).replace('i', i).replace('s', s) .replace('w', ws[w]); } $iapi = function(apiPath, postData, handle,md) { // let apiDomain = 'https://zhaoyanlong-v5iapi-dev.lmjx.net/'; let apiDomain = 'https://v3iapi.lmjx.net/v5/'; if (!postData) postData = {}; $.ajax({ type: 'POST', url: apiDomain + apiPath, async: false, data: postData, dataType: 'json', success: function(rep) { let json = rep; if (!json) json = {}; if (handle.ever) handle.ever(json); if (!json.code || json.code != '200') { return handle.fail(json.code, json.msg ? json.msg : '网络错误，请重试！'); } if (handle.succ) handle.succ(json.data); return; }, fail: function() { if (handle.ever) handle.ever(); return handle.fail('-503', '网络错误!'); } }); } $zjiapi = function(apiPath, postData, handle) { return $iapi(apiPath, postData, handle,'zj'); } var app = new Vue({ el: '#app', data: { quickwords: [ '销售电话', '设备性能' ], messages: [], isreply: false, _dinged:false, content: '', isfirst: true, pageLoading: true, uuid: '', kfname: '路路', product_id: 44001, listmax: 50, isgetphone: false, isgetname: false, ishowerrmsg: false, errmsg: '', askp_id: 0, kficon:'https://u-static.lmjx.net/2021/aicsd/images/kficon.png', lastphoneIndex:-1, }, created() { this.$nextTick(() => { let msg = document.querySelector('.chatcon') // 获取对象 msg.scrollTop = msg.scrollHeight // 滚动高度 }) this.fetchQuickwords(); let cb = () => { this.fetchChat(); } this.fetchUuid(cb); }, methods: { clickToBack(){ window.history.go(-1); }, showErrMsg(msg) { this.errmsg = msg; this.ishowerrmsg = true; let that = this; setTimeout(function() { that.ishowerrmsg = false; }, 2000); }, clickToAskpPhone(index) { if (this.phone_xing) return; if (!this.messages[index]) return false; let msgdata = this.messages[index]; if (msgdata.issub) { this.showErrMsg('已经提交过了'); return false; } if (!msgdata.model) { this.showErrMsg('请填写手机号'); return false; } if (!/^1\d{10}$/.test(msgdata.model)) { this.showErrMsg('请填写正确的手机号'); return false; } this.askpsendaskp(msgdata); }, clickToAskpAccList(item){ if(this.xingacc) return ; if(item.ispost) return ; if(typeof(this.messages[this.lastphoneIndex]) == 'undefined') return ; this.xingacc = true; var post = {}; post.phone = this.messages[this.lastphoneIndex].model; post.name = item.name; post.uuid = this.uuid; var that = this; for (var i = 0; i < item.acclist.length; i++) { post.product_id = item.acclist[i].id; $iapi('aireply/askp', post, { succ: js => { }, fail: (code, msg) => {}, ever: js => { item.ispost = true; that.xingacc = false; }, }) } // 填写完手机号询问你怎么称呼 let data1 = {}; data1.addedtype = 'text'; data1.message = '您怎么称呼'; let cb = () => { // 填写完手机号需要填写用户信息 let data = {}; data.addedtype = 'askpname'; data.askp_id = this.askp_id; that.addedTip(data); } that.addedTip(data1,cb); return false; }, askpsendaskp(msgdata){ let post = {} post.phone = msgdata.model; post.product_id = this.product_id; post.uuid = this.uuid; this.phone_xing = true; let that = this; $iapi('aireply/askp', post, { succ: js => { this.messages[this.lastphoneIndex].issub = true; this.messages[this.lastphoneIndex].model = msgdata.model; this.isgetphone = true; this.askp_id = js.id; // 填写完手机号询问你怎么称呼 let data1 = {}; data1.addedtype = 'text'; data1.message = '您怎么称呼'; let cb = () => { // 填写完手机号需要填写用户信息 let data = {}; data.addedtype = 'askpname'; data.askp_id = js.id; that.addedTip(data); } $.post('/z5/accurate/json',{product_id:that.product_id},function(res){ var acclist = []; if(res.code == 200 && res.data.length > 0) { acclist = res.data; } if(acclist.length < 1){ that.addedTip(data1, cb); return ; } // 填写完姓名回复提示语 let data = {}; data.addedtype = 'acclist'; data.acclist = acclist; data.name = post.name; that.addedTip(data); return false; },'json'); if(this._dinged || !window.__bigPingUsubinf) return ; window.__bigPingUsubinf('kefu',this.askp_id) ; this._dinged = true ; }, fail: (code, msg) => {}, ever: js => { that.phone_xing = true; }, }) }, clickToAskpName(index) { if (this.name_xing) return false; if (!this.messages[index]) { return false; } let msgdata = this.messages[index]; if (msgdata.issub) { this.showErrMsg('已经提交过了'); return false; } if (!msgdata.model) { this.showErrMsg('请填写您的名字'); return false; } let post = {} post.name = msgdata.model; post.product_id = this.product_id; post.uuid = this.uuid; post.askp_id = msgdata.askp_id ? msgdata.askp_id : 0; this.name_xing = true; var that = this; $iapi('aireply/askp', post, { succ: js => { msgdata.issub = true; this.isgetname = true; this.name_xing = false; // 填写完姓名回复提示语 let data = {}; data.addedtype = 'text'; data.message = '好的已帮您记录,这边会安排客户经理尽快与您联系。'; that.addedTip(data); return false; }, fail: (code, msg) => { this.name_xing = false; }, ever: js => { }, }) }, fetchUuid(cb) { if(window.__bigPingDingUser && window.__bigPingDingUser.uuid){ this.uuid = window.__bigPingDingUser.uuid; return cb && cb(); } let post = {} let that = this; $iapi('aireply/uuid', post, { succ: js => { if (js.uuid) this.uuid = js.uuid; window.localStorage.uuid = js.uuid; return cb && cb(); }, fail: (code, msg) => {}, ever: js => {}, }) }, fetchQuickwords() { let post = {} post.product_id = this.product_id; let that = this; $iapi('aireply/quickwords', post, { succ: js => { if (js.list) this.quickwords = js.list; }, fail: (code, msg) => {}, ever: js => {}, }) }, fetchChat() { if (this.xing) return; let post = {} post.product_id = this.product_id; post.content = this.content; post.uuid = this.uuid; let that = this; this.xing = true; $iapi('aireply/chat', post, { succ: js => { that.content = ''; if (js.push) that.newMsg(js.push); let settime = 2; if (that.isfirst) { that.isfirst = false; settime = 0.5; } that.isreply = true; setTimeout(function() { that.isreply = false; // 已经收集到手机号 if (that.isgetphone && js.addedtype == 'askpphone') { if (!that.isgetname) { // 填写完手机号询问你怎么称呼 let data = {}; data.addedtype = 'text'; data.message = '您怎么称呼'; let cb = () => { // 填写完手机号需要填写用户信息 let data = {}; data.addedtype = 'askpname'; data.askp_id = that.askp_id; that.addedTip(data); } that.addedTip(data, cb); return; } let adata = {}; adata.addedtype = 'text'; adata.message = '好的已帮您记录,这边会安排专业销售尽快与您联系。'; return that.addedTip(adata); } // 已经收集到姓名 if(that.isgetname && js.addedtype == 'askpname'){ let adata = {}; adata.addedtype = 'text'; adata.message = '好的已帮您记录,这边会安排专业销售尽快与您联系。'; return that.addedTip(adata); } that.newMsg(js.pull); that.addedTip(js); }, settime * 1000) }, fail: (code, msg) => { this.xing = false; }, ever: js => {} }) }, // 额外的消息 addedTip(data, cb) { let that = this; if (!data || !data.addedtype) { that.xing = false; return false; } // 已经收集到手机号 if (this.isgetphone && data.addedtype == 'askpphone') { if (!this.isgetname) { let adata = {}; adata.addedtype = 'askpname'; adata.askp_id = this.askp_id; return this.addedTip(adata, cb); } let adata = {}; adata.addedtype = 'text'; adata.message = '好的已帮您记录,这边会安排专业销售尽快与您联系。'; return this.addedTip(adata, cb); } // 已经收集到姓名 if(this.isgetname && data.addedtype == 'askpname' && (!data.acclist || data.acclist.length < 1)){ let adata = {}; adata.addedtype = 'text'; adata.message = '好的已帮您记录,这边会安排专业销售尽快与您联系。'; return this.addedTip(adata, cb); } that.xing = true; let msgdata = {}; msgdata.contenttype = data.addedtype; msgdata.created = format(); msgdata.type = 'pull'; msgdata.uuid = this.uuid; msgdata.product_id = this.product_id; msgdata.model = ''; msgdata.issub = false; if (data.askp_id) msgdata.askp_id = data.askp_id; if (data.message) msgdata.message = data.message; if (data.acclist) msgdata.acclist = data.acclist; if (data.name) msgdata.name = data.name; that.isreply = true; setTimeout(function() { that.isreply = false; that.xing = false; that.newMsg(msgdata); return cb && cb(); }, 1500) }, clickToSend() { if (!this.content) return; if (/^1\d{10}$/.test(this.content)) { this.askpsendaskp({model:this.content}); this.content = ''; return ; } this.fetchChat(); }, clickToQuick(item) { if (this.xing) return; this.content = `##${item}##`; this.fetchChat(); }, newMsg(msgdata) { msgdata.created = format(); if(msgdata.message && msgdata.message.indexOf('15010387149') > 0){ var utmp = msgdata.message.split('15010387149'); msgdata.message1 = utmp[0]; msgdata.message2 = utmp[1]; msgdata.tel = '15010387149'; msgdata.contenttype = 'tel//'; } this.messages.push(msgdata); if(msgdata.contenttype == "askpphone"){ this.lastphoneIndex = this.messages.length - 1; } if (this.messages.length > this.listmax) { this.messages.shift(); } this.$nextTick(() => { let msg = document.querySelector('.chatcon') msg.scrollTop = msg.scrollHeight }) }, } }) </script> </body> </html>