在线客服聊天系统 - 用户对话记录

<template>
  <div>
    <!-- 表单组件 -->
    <el-form
      class="detail-form-content"
      ref="ruleForm" <!-- 表单的引用 -->
      :model="ruleForm" <!-- 表单数据的绑定 -->
      :rules="rules" <!-- 表单验证规则的绑定 -->
      label-width="80px"
    >
      <!-- 聊天记录展示区域 -->
      <div class="chat-content">
        <div v-bind:key="item.id" v-for="item in dataList">
          <!-- 左侧展示用户的提问 -->
          <div v-if="item.ask" class="left-content">
            <el-alert class="text-content" :title="item.ask" :closable="false" type="success"></el-alert>
          </div>
          <!-- 右侧展示客服的回答 -->
          <div v-else class="right-content">
            <el-alert class="text-content" :title="item.reply" :closable="false" type="warning"></el-alert>
          </div>
          <div class="clear-float"></div>
        </div>
      </div>
      <div class="clear-float"></div>
      <!-- 回复表单项 -->
      <el-form-item label="回复" prop="reply">
        <el-input v-model="ruleForm.reply" placeholder="回复" clearable></el-input>
      </el-form-item>
      <!-- 操作按钮 -->
      <el-form-item>
        <el-button type="primary" @click="onSubmit">回复</el-button>
        <el-button @click="back()">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        id: "",
        ruleForm: {}, // 表单数据
        dataList: [], // 聊天记录数据
        rules: {
          reply: [
            { required: true, message: "回复内容不能为空", trigger: "blur" } // 回复内容不能为空
          ]
        },
        inter:null // 定时器对象
      };
    },
    props: ["parent"],
    methods: {
      // 初始化
      init(id) {
        this.id = id;
        var that = this;
        // 每隔3秒刷新聊天记录
        var inter= setInterval(function(){
          that.getList();
        },3000)
        this.inter = inter;
      },
<pre><code>  // 获取聊天记录
  getList() {
    let params = {
      sort: 'addtime',
      order: 'asc',
      limit: 1000
    }
    this.$http({
      url: this.$api.chatbyuseridpage + this.id,
      method: &quot;get&quot;,
      params: params
    }).then(({ data }) =&gt; {
      if (data &amp;&amp; data.code === 0) {
        console.log(data);
        this.ruleForm.userid = this.id;
        this.dataList = data.data.list;
      } else {
        this.$message.error(data.msg);
      }
    });
  },

  // 提交回复
  onSubmit() {
    this.$refs[&quot;ruleForm&quot;].validate(valid =&gt; {
      if (valid) {
        this.$http({
          url: this.$api.chatsave,
          method: &quot;post&quot;,
          data: this.ruleForm
        }).then(({ data }) =&gt; {
          if (data &amp;&amp; data.code === 0) {
            this.$message({
              message: &quot;操作成功&quot;,
              type: &quot;success&quot;,
              duration: 1500,
              onClose: () =&gt; {
                this.getList();
                this.ruleForm.reply = &quot;&quot;;
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    });
  },

  // 返回上一页
  back() {
    this.parent.showFlag = false;
    this.parent.getDataList();
    if(this.inter){
      clearInterval(this.inter);
    }
  }
}
</code></pre>
<p>};
</script></p>
<style lang="scss" scoped>
.chat-content {
  margin-left: 80px;
  padding-bottom: 60px;
  width: 500px;
  margin-bottom: 30px;
  max-height: 300px;
  height: 300px;
  overflow-y: scroll;
  border: 1px solid #eeeeee;
  .left-content {
    float: left;
    margin-bottom: 10px;
    padding: 10px;
  }
  .right-content {
    float: right;
    margin-bottom: 10px;
    padding: 10px;
  }
}
.clear-float {
  clear: both;
}
.detail-form-content {
	background-color: transparent;
}
</style>