<template> <h-view id="home" class="public-style"> <h-header :has-border="false" class="bar-custom"> <div slot="left" class="h-header-btn" @click="$hlsExit()"> <i class="ion-ios-arrow-back"/> </div> <div slot="center">小易</div> </h-header> <h-content id="home-content" class="has-header has-footer"> <div v-for="item in message" class="message"> <p v-show="false" class="message-time" v-text="item.time"/> <div v-show="!item.isFromeMe" class="message-wrap"> <img src="../assets/image/robot/robot.png" class="head-pic"> <span class="triangle-left"/> <p class="message" @click="showImg($event)" v-html="item.content"/> </div> <div v-show="item.isFromeMe" class="message-wrap"> <img v-show="userImg" :src="userImg" class="head-pic-right"> <img v-show="!userImg" src="../assets/image/robot/user7.png" class="head-pic-right"> <span class="triangle-right"/> <p class="message-right" v-text="item.content"/> </div> </div> </h-content> <bottom-tab class="bar bar-footer bar-light"> <label class="item item-input footer-input"> <textarea v-auto-size ref="textarea" v-model="robot_message.question" placeholder="请输入" rows="1"/> </label> <div class="footer-btn-wrap" @click="sendMsg()"> <div class="send-button"> <p>发送</p> </div> </div> </bottom-tab> </h-view> </template> <script> export default { data () { return { userImg: window.localStorage.userImg || '', message: [{ 'isFromeMe': false, 'content': '小易7*24小时为您服务!', }], robot_message: { question: null, }, autosize: true, height: '', } }, watch: {}, created: function () { }, mounted () { this.height = this.$refs.textarea.clientHeight }, methods: { scrollBottom () { let div = document.getElementById('home-content') div.scrollTop = div.scrollHeight }, sendMsg () { let vm = this let RobotMessage = {} if (this.robot_message.question) { let object = { 'isFromeMe': true, 'content': this.robot_message.question, } this.message.push(object) let url = process.env.rootPath + '?sysName=HLS_ROBOT&apiName=query_answer' let question = encodeURIComponent(this.robot_message.question) let params = { 'channel': 'app', 'userId': window.localStorage.user_id, 'sessionId': window.localStorage.user_id, 'question': question, } vm.hlsHttp.post(url, params).then(function (res) { vm.resetHeight() // 机器人聊天数据存表 RobotMessage.question = vm.robot_message.question RobotMessage.chatId = res.chatId vm.robot_message.question = null if (res.answers) { let answer = res.answers[0] let reponse = { 'isFromeMe': false, 'content': answer.answer, } // 界面显示聊天 vm.message.push(reponse) // 答案 RobotMessage.answer = answer.answer // 历史记录表 vm.addRobotMessage(RobotMessage) } }) } else { vm.hlsPopup.showLongCenter('内容不能为空') } }, addRobotMessage (robotMessage) { let vm = this let url = process.env.rootPath + '/app/addRobotMessage' let params = { 'channel': 'app', 'userId': window.localStorage.user_id, 'sessionId': window.localStorage.user_id, 'question': robotMessage.question, 'chatId': robotMessage.chatId, 'answer': robotMessage.answer, 'respond': robotMessage.answer, } vm.hlsHttp.post(url, params).then(function (res) { vm.scrollBottom() }) }, showImg ($event) { let vm = this if ($event.target.tagName.toLowerCase() === 'img') { let src = $event.target.src vm.hlsPopup.showBigPicture({ imgUrl: src, }) } else if ($event.target.tagName.toLowerCase() === 'a') { let href = $event.target.href cordova.InAppBrowser.open(href, '_system', 'location=yes') } }, resetHeight () { // this.$refs.textarea.clientHeight = this.height; this.$refs.textarea.style.height = this.height + 'px' }, }, } </script> <style lang="less" type="text/less"> #home { background-color: #eeeeee; .h-bottom-tab{ box-shadow: none; } .content { background-color: #eeeeee; //border: 1px solid red; .message { position: relative; } .message-wrap { padding: 7px; overflow: auto; position: relative; .message { float: left; margin-left: 16px; background-color: #fff; padding: 10px 8px; line-height: 18px; max-width: 270px; border-radius: 5px; font-size: 16px; letter-spacing: 1px; /*no*/ text-align: left; img{ width: 100%; } } .head-pic-right { float: right; max-height: 40px; height: 40px; max-width: 40px; width: 40px; border-radius: 20px; margin-left: 10px; } .head-pic { float: left; max-height: 40px; height: 40px; max-width: 40px; width: 40px; border-radius: 20px; } .message-right { float: right; margin-right: 8px; background-color: #97d55b; padding: 10px 8px; line-height: 18px; max-width: 225px; border-radius: 5px; font-size: 16px; letter-spacing: 1px; /*no*/ text-align: left; } .triangle-left { left: 45px; border-color: transparent #FFF transparent transparent; display: inline-block; width: 0; height: 0; position: absolute; border-width: 8px 10px; border-style: solid; top: 17px; } .triangle-right { right: 47px; border-color: transparent transparent transparent #97d55b; display: inline-block; width: 0; height: 0; position: absolute; border-width: 8px 10px; border-style: solid; top: 17px; } } } .bar-footer { height: auto !important; min-height: 44px; // padding: 0; margin-top: 0; background-color: #fafafa; bottom: 0; background-image: none; .item-input { border: none !important; padding: 3px 0 3px 5px; width: 85%; background: #fff; margin: 5px 0; } .footer-btn-wrap { height: 100%; font-size: 16px; width: 15%; display: flex; align-items: center; justify-content: center; .send-button { height: 30px; width: 100%; //border: 1px solid red; display: flex; align-items: center; justify-content: center; p { margin: 0 auto; } } } textarea { line-height: 20px; font-size: 16px; width: 100%; resize: none; padding: 2px; border: none; } } } .platform-ios{ #home { } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { //.h-ios { #home { } } } </style>