简单html代码,没有样式,用的时候根据自己写的习惯写样式,js部分可以互通
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="/views/mobile/skin/css/style.css" />
<link rel="stylesheet" type="text/css" href="/views/mobile/skin/css/index.css" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="blank">
<meta name="format-detection" content="telephone=no, email=no">
<meta name="msapplication-tap-highlight" content="no">
<title><{config_item('website_title')}></title>
<script type="text/javascript" src="/views/mobile/skin/js/public.js"></script>
<style>
.back{color: #fff !important;}
.header{position: fixed; background: #082d47; z-index: 10;}
.customer{color: #fff;position: absolute; right: 5%;}
.teamsbox{padding-top: 0.8rem; width: 100%; min-height: 100vh; background: url('/views/mobile/skin/pageImg/payforreturnbg.png') no-repeat;background-size: 100% 100%; box-sizing: border-box; margin-top: 0 !important;}
.head-cont-arrow,.bottom-arrow{z-index: 1 !important; margin-bottom: 0 !important;}
</style>
</head>
<body>
<div class="wrap">
<section class="header">
<a href="<{site_url("/<{get_web_type()}>/member")}>" class="iconfont icon-back back"></a>
<span>客服中心</span>
<a href="<{site_url("/<{get_web_type()}>/member/balance/gonggao")}>" class="customer">
通知消息
</a>
</section>
<div class="teamsbox distance">
<div class="head-cont-arrow contentbox">
<div class="leftArrow">
<img src="/views/mobile/skin/pageImg/lefttoparrow.png" alt="">
</div>
<div class="rightArrow">
<img src="/views/mobile/skin/pageImg/righttoparrow.png" alt="">
</div>
</div>
<div class="extendCont">
<div class="newsListCont">
<div class="converCont">
<!-- <div class="custItem contentbox">
<img src="/views/mobile/skin/pageImg/serverRobot.png" alt="">
<div class="Conversation">
您好,我是您的智能助理哈哈。
您是否要咨询以下几个问题?
</div>
</div>
<div class="custItem contentbox customerBox">
<div class="Conversation">
你好,请问…
</div>
<img src="/views/mobile/skin/pageImg/customer.png" alt="">
</div> -->
</div>
<div class="converBtn contentbox">
<input type="text" id="converInp" >
<span style="display: inline-block;width: 0.02rem; height: 100%; background: #DADADA;"></span>
<button class="sendMsg">发送</button>
</div>
</div>
</div>
<div class="bottom-arrow contentbox">
<div class="leftArrow">
<img src="/views/mobile/skin/pageImg/lefttoparrow.png" alt="">
</div>
<div class="rightArrow">
<img src="/views/mobile/skin/pageImg/righttoparrow.png" alt="">
</div>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript" src="/views/mobile/skin/js/jquery-2.1.1.min.js"></script>
<script>
$(function(){
// 点击发送事件
$('.sendMsg').click(function(){
// 获取输入框的内容
var val = $('#converInp').val()
console.log(val)
// 用户信息添加
if(val == ''){return false}
var listItem = `
<div class="custItem contentbox customerBox">
<div class="Conversation">
`+val+`
</div>
<img src="/views/mobile/skin/pageImg/customer.png" alt="">
</div>
`
$('.converCont').append(listItem);
$('#converInp').val('');
$('.converCont').scrollTop($('.converCont')[0].scrollHeight)
// 将数据传入后台存储,后台并返回相应回答信息
$.ajax({
type:'POST',
url:"", //后台接受数据地址
data:{cusInpTxt:val},
dataType:"json",
success:function(res){
// 返回的数据,也就是客服机器人的回答
var msg = JSON.parse(data);
var serverMsg = `
<div class="custItem contentbox">
<img src="/views/mobile/skin/pageImg/serverRobot.png" alt="">
<div class="Conversation">
`+msg+`
</div>
</div>
`
$('.converCont').append(serverMsg);
$('.converCont').scrollTop($('.converCont')[0].scrollHeight)
},
error:function(){
alert('网络忙请重试!')
}
})
})
// 客服机器人事件 msg是后台传入客服机器人说话的内容
// var msg = '您好,我是您的智能助理小T,请问有什么可以帮助你的么?';
// var serverMsg = `
// <div class="custItem contentbox">
// <img src="/views/mobile/skin/pageImg/serverRobot.png" alt="">
// <div class="Conversation">
// `+msg+`
// </div>
// </div>
// `
// $('.converCont').append(serverMsg);
})
</script>