home.vue

<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">
      <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;
      padding-bottom: 120px;
      .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;
          word-break: break-all;
        }
        .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>