|
|
@@ -1,50 +1,152 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
- <head>
|
|
|
- <meta charset="utf-8">
|
|
|
- <title>重庆市南岸区人民政府网--智能问答</title>
|
|
|
- <link rel="stylesheet" href="css/mobile_intelligence.css">
|
|
|
- </head>
|
|
|
- <body>
|
|
|
- <main>
|
|
|
- <div class="head_tab">
|
|
|
- <a><img src="img/back.png" alt=""></a>
|
|
|
- <p>智能问答</p>
|
|
|
- <a><img src="img/three_point.png" alt=""></a>
|
|
|
- </div>
|
|
|
- <div class="wrap_hot_QA">
|
|
|
- <div class="hot_QA">
|
|
|
- <img src="img/hot_QA.png" alt="">
|
|
|
- <p>热门问题</p>
|
|
|
- </div>
|
|
|
- <ul class="hot_text">
|
|
|
- <li><div></div><p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
|
|
|
- <li><div></div><p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
|
|
|
- <li><div></div><p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="chat_box">
|
|
|
- <div class="person left_person">
|
|
|
- <img src="img/left_head.png" alt="">
|
|
|
- <div class="left_talk">HI~很高兴为您服务！请问您想咨询什么问题呢？</div>
|
|
|
- </div>
|
|
|
- <div class="person right_person">
|
|
|
- <div class="left_talk">创业申请所需材料</div>
|
|
|
- <img src="img/right_head.png" alt="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="btn_send">
|
|
|
- <div><img src="img/yy.png" alt=""></div>
|
|
|
- <input type="text" enterkeyhint="send" placeholder="请输入您的问题..." />
|
|
|
- <div><img src="img/up.png" alt=""></div>
|
|
|
- </div>
|
|
|
- </main>
|
|
|
- <script src="js/jquery-3.5.1.min.js"></script>
|
|
|
- <script>
|
|
|
- // 聊天消息固定在底部
|
|
|
- var otherHeight = $('.head_tab').outerHeight()+$('.wrap_hot_QA').outerHeight()+$('.btn_send').outerHeight()
|
|
|
- var listHeight = window.outerHeight-otherHeight-18
|
|
|
- $('.chat_box').css({ 'height': listHeight+'vw' })
|
|
|
- </script>
|
|
|
- </body>
|
|
|
+<head>
|
|
|
+ <meta charset="utf-8">
|
|
|
+ <title>重庆市南岸区人民政府网--智能问答</title>
|
|
|
+ <link rel="stylesheet" href="css/mobile_intelligence.css">
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+<main>
|
|
|
+ <div class="head_tab">
|
|
|
+ <a><img src="img/back.png" alt=""></a>
|
|
|
+ <p>智能问答</p>
|
|
|
+ <a><img src="img/three_point.png" alt=""></a>
|
|
|
+ </div>
|
|
|
+ <div class="wrap_hot_QA">
|
|
|
+ <div class="hot_QA">
|
|
|
+ <img src="img/hot_QA.png" alt="">
|
|
|
+ <p>热门问题</p>
|
|
|
+ </div>
|
|
|
+ <ul class="hot_text">
|
|
|
+ <li>
|
|
|
+ <div></div>
|
|
|
+ <p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
|
|
|
+ <li>
|
|
|
+ <div></div>
|
|
|
+ <p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
|
|
|
+ <li>
|
|
|
+ <div></div>
|
|
|
+ <p>疫情防控具体安排控具体安排控具体安排控具体安排</p></li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ <div id="chat_box" class="chat_box">
|
|
|
+ <div class="person left_person">
|
|
|
+ <img src="img/left_head.png" alt="">
|
|
|
+ <div class="left_talk">HI~很高兴为您服务！请问您想咨询什么问题呢？</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="btn_send">
|
|
|
+ <div><img src="img/yy.png" alt=""></div>
|
|
|
+ <input type="text" enterkeyhint="send" placeholder="请输入您的问题..."/>
|
|
|
+ <div><img src="img/up.png" alt=""></div>
|
|
|
+ </div>
|
|
|
+</main>
|
|
|
+<script src="js/jquery-3.5.1.min.js"></script>
|
|
|
+<script src="../zdjc/js/constans.js"></script>
|
|
|
+<script>
|
|
|
+ // 聊天消息固定在底部
|
|
|
+ var otherHeight = $('.head_tab').outerHeight() + $('.wrap_hot_QA').outerHeight() + $('.btn_send').outerHeight()
|
|
|
+ var listHeight = window.outerHeight - otherHeight - 18
|
|
|
+ $('.chat_box').css({'height': listHeight + 'vw'})
|
|
|
+
|
|
|
+ $(function () {
|
|
|
+ loadTime();
|
|
|
+ })
|
|
|
+
|
|
|
+ //手指从屏幕上拿起的时候触发
|
|
|
+ function touchendFunc(){
|
|
|
+ console.log("1");
|
|
|
+ }
|
|
|
+
|
|
|
+ //将填写的问题提交到后台
|
|
|
+ $(".btn_send").click(function () {
|
|
|
+ let inputVal = $(".btn_send").children("input").val();
|
|
|
+ if (!inputVal) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ $(".btn_send").children("input").val('');
|
|
|
+ selectAnswer(inputVal);
|
|
|
+ });
|
|
|
+
|
|
|
+ //点击发送,以及点击猜你想问回调方法
|
|
|
+ function selectAnswer(obj) {
|
|
|
+ let rightHtml = '<div class="person right_person">' +
|
|
|
+ '<div class="left_talk">' + obj + '</div>' +
|
|
|
+ '<img src="img/right_head.png" alt="">' +
|
|
|
+ '</div>';
|
|
|
+ $(".chat_box").append(rightHtml);
|
|
|
+
|
|
|
+ scrollToButtom();
|
|
|
+ $.ajax({
|
|
|
+ url: PATH + '/intelligenceAnswer/selectAnswer?question=' + obj,
|
|
|
+ type: "post",
|
|
|
+ success: function (data) {
|
|
|
+ let middleData = JSON.parse(data.data);
|
|
|
+ if (data.result) {
|
|
|
+ var leftHtml = '<div id="' + middleData.request_id + '" class="person left_person" style="display: none;">';
|
|
|
+ var leftInnerHtml = '<img src="img/left_head.png" alt="">' +
|
|
|
+ '<div class="left_talk">';
|
|
|
+ if (middleData.reply_type == 0) {
|
|
|
+ let answersList = middleData.qabot_answers.answers;
|
|
|
+ if (answersList.length > 0) {
|
|
|
+ for (let i = 0; i < answersList.length; i++) {
|
|
|
+ leftInnerHtml += answersList[i].answer;
|
|
|
+ leftInnerHtml += '<br/>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ let recommendAnswersList = middleData.qabot_answers.recommend_answers;
|
|
|
+ if (recommendAnswersList.length > 0) {
|
|
|
+ leftInnerHtml += '猜你想问:<br/>';
|
|
|
+ for (let i = 0; i < recommendAnswersList.length; i++) {
|
|
|
+ let stQuestion = recommendAnswersList[i].st_question;
|
|
|
+ // leftInnerHtml += middleData.qabot_answers.recommend_answers[i].domain;
|
|
|
+ leftInnerHtml += '<span style="color: #0a84ff;text-decoration: underline;" onclick="selectAnswer(\'' + stQuestion + '\')">';
|
|
|
+ leftInnerHtml += stQuestion;
|
|
|
+ leftInnerHtml += '</span>';
|
|
|
+ // leftInnerHtml += middleData.qabot_answers.recommend_answers[i].top_score_question;
|
|
|
+ leftInnerHtml += '<br/>';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (middleData.reply_type == 2) {
|
|
|
+ leftInnerHtml += middleData.chat_answers.answer;
|
|
|
+ }
|
|
|
+ leftInnerHtml += '</div>';
|
|
|
+ leftHtml += '</div>';
|
|
|
+ $(".chat_box").append(leftHtml);
|
|
|
+ $("#" + middleData.request_id).html(leftInnerHtml);
|
|
|
+ $("#" + middleData.request_id).fadeIn(1000);
|
|
|
+
|
|
|
+ scrollToButtom();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ //点击回车键实现发送
|
|
|
+ document.onkeydown = function (e) {
|
|
|
+ var theEvent = window.event || e;
|
|
|
+ var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
|
|
|
+ if (code == 13) {
|
|
|
+ $("#btn_send").click();
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ //将提问的滚动条拖至底部
|
|
|
+ function scrollToButtom() {
|
|
|
+ var div = document.getElementById('chat_box');
|
|
|
+ div.scrollTop = div.scrollHeight;
|
|
|
+ }
|
|
|
+
|
|
|
+ //赋值初始化时间
|
|
|
+ function loadTime() {
|
|
|
+ var nowDate = new Date();
|
|
|
+ var time = nowDate.getHours() + ':';
|
|
|
+ if (nowDate.getMinutes() < 10) {
|
|
|
+ time += '0';
|
|
|
+ }
|
|
|
+ time += nowDate.getMinutes();
|
|
|
+ $(".center_time").append(time);
|
|
|
+ }
|
|
|
+</script>
|
|
|
+</body>
|
|
|
</html>
|
