【vue】仿微信对话

已于 2023-09-25 15:05:33 修改
阅读量931 收藏
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
于 2023-09-08 15:33:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qxn530/article/details/132761311
版权

第一部分：下拉刷新

我这里就把主要的下拉刷新的写一下，上拉是一样的道理，就不写了

       <div class="talk_top" ref="listWrapper" id="listWrapper">
            <div class="loadingpic" v-loading="loading"></div>
            <div v-for="message in messages" :key="message.id" class="message">
                <div class="minetext" v-html="message.text"></div>
            </div>
          </div>
<script>
export default {
     data() {
        return {
              loading: false, // 加载中
              messages:[],
        }
     },
     mounted() {
       this.$nextTick(() => {
           this.getAiLogsByTopicId(); // 初始化数据
           this.re();
        });
      },
      methods: {
//这是放在mounted中获取初始数据
   getAiLogsByTopicId() {
      this.$axios
        .get("/userApp/ai/getAiLogsByTopicId", {
          params: {
            TopicId: this.topic.topicId,
            pageNum: 1,
            pageSize: this.page.pageSize
          }
        })
        .then(res => {
          if (res.code === 200) {
            this.messages = res.rows.reverse();
            // console.log(res.rows);
            this.total = Number(res.total);
          }
        });
    },
   //放在re()里面的数据接口
   getlist() {
     if (this.total >= this.messages.length) {
        this.page.pageNum++;
        this.loading = true;
        this.$axios
          .get("/userApp/ai/getAiLogsByTopicId", {
            params: {
              TopicId: this.topic.topicId,
              pageNum: this.page.pageNum,
              pageSize: this.page.pageSize
            }
          })
          .then(res => {
            if (res.code === 200) {
              if (this.page.pageNum >= Number(res.allPage)) {
                this.$message.success("数据到底啦");
                this.loading = false;
                return;
              } else {
                this.messages = [...res.rows.reverse(), ...this.messages];
                this.total = Number(res.total);
                // console.log(this.messages);
                this.loading = false;
              }
            }
          })
          .catch(error => {
            this.$message.error(error.msg);
            this.loading = false;
          });
      } else {
        this.$message.success("数据到底啦");
        // this.showdown = true;
        this.loading = false;
      }
    },
           // 下拉、上拉刷新
    re() {
      var flag = false;
      var PstartX;
      var PstartY;
      var PMoveX;
      var PMoveY;
      var PendX;
      var PendY;
      let that = this;
      document.onmousedown = function(ev) {
        flag = true;
        PstartX = ev.pageX;
        PstartY = ev.pageY;
        // console.log("start:" + PstartX, PstartY);
        document.onmousemove = function(ev) {
          PMoveX = ev.pageX;
          PMoveY = ev.pageY;
          if (flag) {
            // console.log("move:" + PMoveX, PMoveY);
            var resutl = getpostion(PMoveY, PstartY);
            switch (resutl) {
              case 0:
                // console.log("无操作");
                break;
              case 1:
                // console.log("向上");
                break;
              case 2:
                // console.log("向下");
                if (PMoveY - PstartY > 0) {
                  if (PMoveY - PstartY >= 50) {
                    document.getElementById("listWrapper").style.marginTop =
                      PMoveY - PstartY + "px";
                  }
                  that.loading = true;
                  // document.getElementById("loadingpic").style.display = "block";
                }
                break;
            }
          }
        };
        document.onmouseup = function(ev) {
          flag = false;
          PendX = ev.pageX;
          PendY = ev.pageY;
          // console.log("end:" + PendX, PendY);
          var resutl = getpostion(PMoveY, PstartY);
          switch (resutl) {
            case 0:
              // console.log("无操作");
              break;
            case 1:
              // console.log("向上");
              break;
            case 2:
              // console.log("向下");
              // location.reload();
              setTimeout(() => {
                that.getlist(); //调用接口
                //回弹到初始位置
                document.getElementById("listWrapper").style.marginTop = "0px";
              }, 500);
              break;
          }
        };
        // 判断是上拉还是下拉
        function getpostion(PMoveY, PstartY) {
          if (PMoveY - PstartY == 0) {
            return 0; //无操作
          }
          if (PMoveY - PstartY < 0) {
            return 1; //向上
          }
          if (PMoveY - PstartY > 0) {
            return 2; //向下
          }
        }
      };
    },
      }
}
</script>

在他的基础上修改了一下，他的上面有点小问题https://www.cnblogs.com/zmcxsf/p/10443189.html

第二部分：滚动条到底部

1、调用接口数据，然后调用re（）方法，如果不调用re方法，页面没反应

2、在 mounted中获取滚动区域的document，然后让调用方法，让盒子滚动到底部，这样页面一打开，滚动条就在底部了

3、监听滚动事件，判断用户滚动状态

<template>
  <div class="chat">
    <div class="center">
      <div v-if="pasId === 0">
        <div class="talk_history" id="chat">
          <div class="talk_top" ref="listWrapper" id="listWrapper">
            <div class="loadingpic" v-loading="loading"></div>
            <div v-for="message in messages" :key="message.id" class="message">
             。。。。内容
            </div>
          </div>
        </div>
        <div class="talk_huifu">
          <div style="border-bottom:1px solid #f8f8f8;display:flex">
            <el-upload
              ref="upload"
              class="upload-demo"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :file-list="fileList"
              accept=".pdf"
              :on-change="talkchange"
              :http-request="http"
            >
              <img
                style="margin:0 15px 0 10px"
                src="../../assets/img/wenjianjia.png"
                title="发送文件"
              />
            </el-upload>
          </div>
          <div align="right">
            <el-input
              type="textarea"
              v-model="talk"
              :maxlength="4000"
              :rows="3"
              resize="none"
              placeholder="有什么我可以帮您？"
            ></el-input>
            <el-button size="medium" :disabled="disabled" @click="sub(0)"
              >发送</el-button
            >
          </div>
        </div>
      </div>
  </div>
</template>

<script>
let source = null;
var AIurl = "http://192.168.4.172:8081/userApp/ai/sse";
var resultUrl = "http://192.168.4.172:8081/userApp/ai/aiHelp";

import { EventSourcePolyfill } from "event-source-polyfill";
export default {
  layout: "AI2",
  name: "",
  data() {
    return {
      disabled: false, //ai回答结束，按钮取消禁用
      showdown: false, //数据到底啦
      chatContent: null,
      isScrolling: true,
      loading: false, // 加载中
      page: 1,
      total: 0, //总条数
      
      talk: "", //发送的聊天信息
      len: true, //发送信息的次数
      fileList: [], //发送文件
      topic: {}, //新建对话的信息
      word: {}, //文件的信息
      messages: [], //聊天历史
      page: {
        pageNum: 0,
        pageSize: 10
      },
      total: 0,

      pasId: 0, //上一页的id
    };
  },
  mounted() {
      this.getAiLogsByTopicId(); // 初始化数据
      this.re();
      setTimeout(() => {
        this.chatContent = document.getElementsByClassName("talk_top")[0];
        this.scrollToBottom();
        // 监听滚动事件，判断用户滚动状态
        this.chatContent.addEventListener("scroll", this.handleScroll);
      }, 1000);
  },
  watch: {
    disabled: {
      handler(newval, oldval) {
        this.disabled = newval;
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    // 定义将滚动条定位在底部的方法
    scrollToBottom() {
      var that = this;
      this.$nextTick(() => {
        if (that.isScrolling) {
          that.chatContent.scrollTop =
            that.chatContent.scrollHeight - that.chatContent.offsetHeight;
          // console.log(that.chatContent.scrollTop);
        }
      });
    },
    handleScroll() {
      const scrollContainer = this.chatContent;
      const scrollTop = scrollContainer.scrollTop;
      const scrollHeight = scrollContainer.scrollHeight;
      const offsetHeight = scrollContainer.offsetHeight;

      if (scrollTop + offsetHeight < scrollHeight) {
        // 用户开始滚动并在最底部之上，取消保持在最底部的效果
        this.isScrolling = true;
      } else {
        // 用户停止滚动并滚动到最底部，开启保持到最底部的效果
        this.isScrolling = false;
      }
    },
    
    // 发送对话---------------------------------------------------
    // 加载数据对话
    getAiLogsByTopicId() {
      this.$axios
        .get("/userApp/ai/getAiLogsByTopicId", {
          params: {
            TopicId: this.topic.topicId,
            pageNum: 1,
            pageSize: this.page.pageSize
          }
        })
        .then(res => {
          if (res.code === 200) {
            this.messages = res.rows.reverse();
            // console.log(res.rows);
            this.total = Number(res.total);
          }
        });
    },
    getlist() {
      if (this.total >= this.messages.length) {
        this.page.pageNum++;
        this.loading = true;
        this.$axios
          .get("/userApp/ai/getAiLogsByTopicId", {
            params: {
              TopicId: this.topic.topicId,
              pageNum: this.page.pageNum,
              pageSize: this.page.pageSize
            }
          })
          .then(res => {
            if (res.code === 200) {
              if (this.page.pageNum >= Number(res.allPage)) {
                this.$message.success("数据到底啦");
                this.loading = false;
                return;
              } else {
                this.messages = [...res.rows.reverse(), ...this.messages];
                this.total = Number(res.total);
                // console.log(this.messages);
                this.loading = false;
              }
            }
          })
          .catch(error => {
            this.$message.error(error.msg);
            this.loading = false;
          });
      } else {
        this.$message.success("数据到底啦");
        // this.showdown = true;
        this.loading = false;
      }
    },
    // 下拉、上拉刷新
    re() {
      var flag = false;
      var PstartX;
      var PstartY;
      var PMoveX;
      var PMoveY;
      var PendX;
      var PendY;
      let that = this;
      document.onmousedown = function(ev) {
        flag = true;
        PstartX = ev.pageX;
        PstartY = ev.pageY;
        // console.log("start:" + PstartX, PstartY);
        document.onmousemove = function(ev) {
          PMoveX = ev.pageX;
          PMoveY = ev.pageY;
          if (flag) {
            // console.log("move:" + PMoveX, PMoveY);
            var resutl = getpostion(PMoveY, PstartY);
            switch (resutl) {
              case 0:
                // console.log("无操作");
                break;
              case 1:
                // console.log("向上");
                break;
              case 2:
                // console.log("向下");
                if (PMoveY - PstartY > 0) {
                  if (PMoveY - PstartY >= 50) {
                    document.getElementById("listWrapper").style.marginTop =
                      PMoveY - PstartY + "px";
                  }
                  that.loading = true;
                  // document.getElementById("loadingpic").style.display = "block";
                }
                break;
            }
          }
        };
        document.onmouseup = function(ev) {
          flag = false;
          PendX = ev.pageX;
          PendY = ev.pageY;
          // console.log("end:" + PendX, PendY);
          var resutl = getpostion(PMoveY, PstartY);
          switch (resutl) {
            case 0:
              // console.log("无操作");
              break;
            case 1:
              // console.log("向上");
              break;
            case 2:
              // console.log("向下");
              // location.reload();
              setTimeout(() => {
                that.getlist(); //调用接口
                //回弹到初始位置
                document.getElementById("listWrapper").style.marginTop = "0px";
              }, 500);
              break;
          }
        };
        // 判断是上拉还是下拉
        function getpostion(PMoveY, PstartY) {
          if (PMoveY - PstartY == 0) {
            return 0; //无操作
          }
          if (PMoveY - PstartY < 0) {
            return 1; //向上
          }
          if (PMoveY - PstartY > 0) {
            return 2; //向下
          }
        }
      };
    },
    
    sub(type) {
      let that = this;
      // 判断次数，在发送
      if (type === 1) {
        this.messages.push({
          aiId: "", //编号
          userId: "", //用户id
          userAsk: "", //用户询问
          aiReply: "", //ai回复
          askTime: "", //询问时间
          isPdf: true, //是否是pdf
          fileName: this.word.fileName, //文件名称
          fileSize: this.word.fileSize, //文件大小
          aiTopicId: this.topic.topicId //话题编号
        });
        this.$message.success("请稍等，正在响应中");
        this.load(this.messages[this.messages.length - 1], 1, that.chatContent);//调用接口
         setTimeout(() => {
            that.chatContent.scrollTop = that.chatContent.scrollHeight + 150;
          }, 500);
        this.word = {};
      } else {
        if (this.talk === "") {
          this.$message.error("请填写内容");
        } else {
          this.messages.push({
            aiId: "", //编号
            userId: "", //用户id
            userAsk: this.talk, //用户询问
            aiReply: "", //ai回复
            askTime: "", //询问时间
            isPdf: false, //是否是pdf
            fileName: null, //文件名称
            fileSize: null, //文件大小
            aiTopicId: this.topic.topicId //话题编号
          });
          this.$message.success("请稍等，正在响应中");
          this.load(
            this.messages[this.messages.length - 1],
            0,
            that.chatContent
          );
           setTimeout(() => {
            that.chatContent.scrollTop = that.chatContent.scrollHeight + 150;
          }, 500);
        }
        this.talk = "";
      }
    },
    // 获取ai结果
    load(item, type, chatContent) {
      this.disabled = true;
      if (type === 1) {
        source = new EventSourcePolyfill(
          Url +
            "userApp/ai/sse?question=" +
            this.word.fileDownloadPath +
            "&fileName=" +
            this.word.fileName +
            "&fileSize=" +
            this.word.fileSize +
            "&isPdf=true&aiTopicId=" +
            this.topic.topicId,
          {
            headers: {
              token: this.$cookies.get("userToken")
            }
          }
        );
      } else {
        source = new EventSourcePolyfill(
          Url +
            "userApp/ai/sse?question=" +
            this.talk +
            "&isPdf=false&aiTopicId=" +
            this.topic.topicId,
          {
            headers: {
              token: this.$cookies.get("userToken")
            }
          }
        );
      }
      // open：订阅成功（和后端连接成功）
      source.addEventListener("open", function(e) {});
      source.onmessage = e => {
        // console.log(JSON.parse(e.data));
        if (JSON.parse(e.data).end) {
          // 结束了
          item.aiId = JSON.parse(e.data).end;
          this.disabled = false;
          return;
        } else if (JSON.parse(e.data).error) {
          this.$message.error(JSON.parse(e.data).error);
          this.disabled = false;
          return;
        } else {
          item.aiReply += JSON.parse(e.data).content.replace(/\\n/g, "\n");
          if (this.isScrolling) {
            chatContent.scrollTop = chatContent.scrollHeight;
          }
        }
      };
      source.onerror = event => {
        if (event.error !== undefined) {
          this.$message.error("出错了，请联系客服人员");
        }
        this.disabled = false;
        event.target.close();
      };
    },
    // 上传文件
    talkchange(file, fileList) {
      this.$refs.upload.uploadFiles = [];
      this.fileList = [];
      this.fileList = fileList;
    },
    async http(file, fileList) {
      var formData = new FormData();
      formData.append("files", file.file);
      this.$axios.post("/dev/file/uploadFile", formData).then(res => {
        if (res.code === 200) {
          this.word = {
            fileName: res.data[0].fileName,
            fileSize: res.data[0].fileSize,
            fileDownloadPath: res.data[0].fileDownloadPath
          };
          // this.$message.success("上传成功");
          this.sub(1);
        }
      });
    },
  }
};
</script>

哇哦Q
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
基于Vue20模仿微信APP
08-12
基于Vue Vuex Vue-router Webpack 2.0 打造微信界面，实现了微信聊天、搜索、点赞、通讯录（快速导航）、个人中心、模拟对话、朋友圈、设置等功能。
ChatGPT聊天微信小程序源码适配H5和WEB端.zip
09-01
没测试，有兴趣的下载研究 记得好评！ ChatGPT-MP(基于ChatGPT实现的微信小程序，适配H5和WEB端) 可二开包含前后台，支持打字效果输出流式输出，支持AI聊天次数限制，支持分享增加次数等功能。开源版禁止商用，仅供学习交流，禁止倒卖。 技术栈：JDK8 + SpringBoot + Vue2 + uniapp + Mysql 包含功能 ChatGPT聊天 用户聊天次数限制 分享得聊天次数 每日领取免费次数 查看及清除聊天历史 显示连接情况 清除聊天历史 开通会员 购买次数包 联系客服领取次数 看广告得次数 后台管理系统，暂时为升级版功能，之后会择机开源 敏感词检测及设置 适配H5和WEB端 登录方式支持：小程序登录/微信公众号登录/手机号注册登录/邮箱注册登录 提示词功能(角色扮演)，内置近300种提示词，包含小红书文案书写、周报生成、异性对话生成器等 AI生成图片、语音转换等功能开发中......
vue3+pinia，我用两天时间写了一个微信聊天模拟页面
weixin_48072277的博客
01-28 2744
1.起因: 年后在为找工作发愁，偶然间在b站刷到几个离谱的微信聊天视频，虽然都是段子，但是当时就在想自己能不能做一个这样的聊天记录界面。 2.想法: 用微信备忘了一下页面该实现的功能。 3.成品及功能实现: 因为主学前端，技术栈主要使用vue3和pinia，没有使用布局ui，纯手写页面布局。初始页面如下: 主要功能按钮有4个，如下: ①为输入框，点击可修改对象名字 ②为头像，点击可选择头像并进行替换，右下按钮可点击进行刷新，选择更多头像 ③为输入
vue + element UI 模拟制作微信页面对话机器人
m0_63006013的博客
03-11 1173
vue + element UI 模拟制作微信页面对话机器人
Vue记住滚动条和实现下拉加载的完美方法
11-19
滚动条 常见于移动端 App 在滚动点击进入的时候 问题描述 当我们在开发 web app 的时候，经常会遇到一个问题，就是当从一个可滚动的列表页进入到下一个详情页面，然后返回列表页面的时候，很难去还原滚动条的状态，无法记住进来时候的位置。 以前我尝试过很多方法： 有 vue-router 自带的 scrollBehavior，需要记住 scrollTop，然后还原，但是管理这个 scrollTop 显得很麻烦，有的时候还不容易取值还有使用纯 CSS 的方式，在列表页面放置一个 router-view,详情页面利用 position 和 z-index 覆盖列表页面，返回后直接显示的就是原
用vue项目 模拟一个微信聊天的 demo页面
xu_duo_i的博客
05-31 3130
用vue项目 模拟一个微信聊天的 demo页面 --纯代码复制就能用
vue项目仿企业微信移动端(带聊天界面)
qq_34761385的博客
06-05 1586
网上比较知名的网站或者软件，开源代码中都有仿其前端的。比如小米商城，京东商城，仿微信聊天页面诸如此类的。所以我潜意识觉得像那种知名公司或者软件。想找它的仿前端静态代码应该很好找。结果，当我想找仿企业微信移动端的前端静态代码时，竟发现没有。所以，这个短板这个空缺。我得弥补。
vue+element+electron仿微信实现
lucky_fang的博客
12-07 3223
当然这里不会详细真的手把手教你创建项目，因为官方文档都很详细，不做多余的工作哈~直接看官方文档，收益更大：electron官方文档electron主脚本与vue不一样，electron的是background.js，vue的是main.js，两者不冲突，可以理解为两个不同的框架 3.登录完成创建主窗口，不如说是变化窗口大小，跳转到主页面： 4.首页tabs，覆盖element默认样式： 5.增加头像点击出卡片效果： 更新已读未读消息数量
vue仿微信聊天框(vue组件)
m0_68094390的博客
05-25 1066
文章目录1，效果截图2，源码3，代码 1，效果截图 2，源码 链接：https://pan.baidu.com/s/1KxNDBiPdifv20nnenMclHA?pwd=oix1 提取码：oix1 –来自百度网盘超级会员V4的分享 3，代码 messageBox.vue <template> <div class="wrapper" :style="{'--width':width,'--oneheight':oneheight,'--twoheight':twoheight,'--
uniapp 聊天界面-仿微信聊天界面设计
Andy的博客
11-14 2146
简介： 本篇文章带来的是一格仿照微信设计的聊天界面，主要涉及到三个文件；下方已有介绍，代码块中也有相关说明，直接复制然后就可使用；注意获取消息的websoket和拉去历史消息的接口还是需要自己去写，下方只做大致参考；具体消息格式下方代码块中已列出 一、聊天主界面chatIndex.vue <template> <view class="chat"> <scroll-view class="scroll-view" :style="{height: `${win
golang + vue 低仿微信
04-15
使用go语言作为服务器端语言，前端使用jquery vue等实现，目前只实现了好友添加，聊天功能
h5+js+vue 模仿微信网页聊天界面
03-18
基于html5+js+vue 的模仿微信pc端的聊天窗口界面，可以回车发送消息等
逐个微信：WechatAPP
02-05
Vue.js 2.0实战项目基于Vue + Vuex + Vue-路由器+ Webpack 2.0打造微信界面，实现了微信聊天，搜索，点赞，通讯录（快速导航），个人中心，模拟对话，朋友圈，设置等功能。技术栈 MVVM框架：Vue.js 2.0状态管理：...
ChatGPT聊天微信小程序源码/适配H5和WEB端
03-05
技术栈：JDK8 + SpringBoot + Vue2 + uniapp + Mysql 包含功能 ChatGPT聊天 用户聊天次数限制 分享得聊天次数 每日领取免费次数 查看及清除聊天历史 显示连接情况 清除聊天历史 开通会员 购买次数...
基于ChatGPT实现的微信小程序，适配H5和WEB端
11-16
技术栈：JDK8 + SpringBoot + Vue2 + Uniapp + Mysql 包含功能 ChatGPT聊天 用户聊天次数限制 分享得聊天次数 每日领取免费次数 查看及清除聊天历史 显示连接情况 清除聊天历史 开通会员 购买次数包 联系...
三、VUE数据代理
D_A_I_H_A_O的博客
04-29 559
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
前端Vue 后端FastApi 跨域 CORS
weixin_44656422的博客
05-06 124
前端是localhost:3000,后端是localhost:8000 ，就是跨域了。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 794
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue中的async
最新发布
三三木木七的博客
05-06 171
在使用 async 关键字声明的函数内部，可以使用 await 关键字来等待一个 Promise 对象解析。这样可以使代码更加清晰和易于理解，因为它们使异步代码看起来更像同步代码，避免了回调地狱。
centos7进入单用户模式
08-18
要进入CentOS 7的单用户模式，您可以按照以下步骤操作： 1. 在启动时选择CentOS 7的引导菜单，然后按下键盘上的“e”键来编辑引导选项。 2. 在编辑模式下，找到以 "linux16" 开头的行。在该行的末尾添加 "single" 或 "1"（不包含引号），表示进入单用户模式。 3. 按下键盘上的 "Ctrl + x" 或者 "F10" 来继续引导。 4. 系统将进入单用户模式，并且您将看到一个命令行提示符。 请注意，进入单用户模式后，您将以 root 用户身份登录系统，但网络可能会被禁用。如果您需要网络连接，请手动启用网络。 希望这可以帮助到您！如果有任何其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值