vue和轮训写一个简单的客服咨询功能
分类： Java vue 专栏： java vue 标签： 聊天
2025-01-09 03:49:49 368浏览
vue和轮训写一个简单的客服咨询功能，还可以优化
用户咨询客服页面
<template>
<div>
<br>
<br>
<div class="container">
<div class="row">
<div class="col-sm-2 bkk" >
<div class="kfdiv">
<table v-for="(t,i) in kfli" :class="'bgg ' +(t.id==kfid?'selxian':'')">
<tr @click="choosekf(t,i)">
<td class="kfw" valign="top"><img class="kffaceimg" :src="FILE_URL+t.faceimg"></td>
<td class="dibuxian"> <span class="kfname">{{t.nickname}}</span><el-tag v-if="t.role=='qt'" size="mini">客服</el-tag></td>
</tr>
</table>
</div>
</div>
<div class="col-sm-10 bkk">
<div class="chatdiv" id="chatgf">
<div v-for="(t,i) in cli">
<table v-if="chatuid!=t.uid" class="bgg">
<tr>
<td class="ltr" valign="top"><img :src="FILE_URL+t.faceimg" class="faceimg"></td>
<td class="lnr">
<span class="huizi">{{t.nickname}} {{t.cts}}</span><br>
<p class="lcnr">{{t.cont}}</p>
</td>
</tr>
</table>
<table v-if="chatuid==t.uid" class="bgg">
<tr>
<td class="rnr">
<span class="huizi">{{t.nickname}} {{t.cts}}</span><br>
<p class="rcnr">{{t.cont}}</p>
</td>
<td class="rtr" valign="top"><img :src="FILE_URL+t.faceimg" class="faceimg"></td>
</tr>
</table>
</div>
</div>
<div class="chatnr row">
<div class="col-sm-10">
<el-input v-model="context" placeholder="请输入您的内容"></el-input>
</div>
<div class="col-sm-2">
<el-button :disabled="kfid?false:true" @click="saveC" type="success">提交</el-button>
</div>
</div>
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</template>
<script>
import {chat_save,users_list,chat_list } from '../../api';
export default {
name: "NoticeDetail",
components: {
},
data() {
return {
FILE_URL:'',
context:'',
chatuid:'',
kfid:'',
chatno:'',
lander:{},
islogin:'',
kfli:[],
cli:[],
seti:null,
isfirst:true,
}
},
methods:{
saveC() {
if ( this.context.trim().length==0) {
this.$message.error('请输入内容');
return ;
}
chat_save({uid:this.chatuid, cont: this.context ,cno:this.chatno}).then((res) => {
if(res.data.status==1){
this.context='';
this. getcli();
this.gobottom();
}else{
this.$message.info(res.data.msg);
}
})
},
getcli(){
chat_list({cno: this.chatno}).then((res) => {
if(res.data.status==1){
this.cli=res.data.obj;
if(this.isfirst){
this.gobottom();
this.isfirst=false;
}
}else{
this.$message.info(res.data.msg);
}
})
},
gobottom(){
setTimeout(()=>{
let scrollTarget = document.getElementById("chatgf");
scrollTarget.scrollTop=scrollTarget.scrollHeight;
},500)
},
getKfli(){
users_list({role:'qt',state:1}).then((res) => {
if(res.data.status==1){
this.kfli=res.data.obj;
}else{
this.$message.info(res.data.msg);
}
})
},
choosekf(t,i){
if(t.id==this.chatuid){
this.$message.error("自己不能和自己咨询");
return;
}
this.kfid=t.id;
this.chatno=this.chatuid+"_"+this.kfid;
if(parseInt(this.kfid)<parseInt(this.chatuid))this.chatno=this.kfid+"_"+this.chatuid;
if(this.seti==null){
this.seti=setInterval(()=>{
this.getcli();
},2000)
}
}
},mounted() {
this.FILE_URL=process.env.VUE_APP_API_ROOT;
try{
this.lander=JSON.parse(localStorage.loginUser);
this.islogin=1;
localStorage.chatuid=this.lander.id;
this.chatuid=this.lander.id;
}catch (e) {
this.islogin=0;
if(localStorage.chatuid)this.chatuid=localStorage.chatuid;
else {
localStorage.chatuid=parseInt(new Date().getTime()/1000/1000);
this.chatuid=localStorage.chatuid;
}
}
this.getKfli();
},deactivated() {
if(this.seti!=null)clearInterval(this.seti)
},destroyed() {
if(this.seti!=null)clearInterval(this.seti)
}
}
</script>
<style scoped>
.bgg{width: 100%;}
.bkk{border: 1px solid #ddd;border-radius:10px;height:500px;}
.chatdiv{height: 450px; overflow-y: auto;padding: 10px;}
.chatnr{height: 50px;}
.faceimg{width: 50px;height: 50px;border-radius: 50%; }
.lnr{ text-align: left; }
.huizi{color: #666;font-size: 13px;}
.lcnr{background-color: #f3f3f3;padding: 10px;max-width: 80%;display: inline-block;border-radius: 10px;}
.ltr{width: 60px}
.rtr{width: 60px;text-align: right;}
.rnr{text-align: right;}
.rcnr{background-color: #2f7bbf;padding: 10px;max-width: 80%;color: #fff;display: inline-block;text-align: left;border-radius: 10px;}
.kfdiv{overflow-y: auto;padding: 10px 0px;height: 100%;}
.kffaceimg{width: 40px;height: 40px;border-radius: 50%; }
.kfw{width: 50px;}
.kfname{font-size: 13px;color:#333;}
.dibuxian{border-bottom: 1px solid #f3f3f3;}
.selxian{border : 1px solid #f3f3f3;}
</style>
客服回答用户页面
<template>
<div class="about">
<v-header />
<v-sidebar />
<div class="content-box" >
<br>
<div style="width: 95%">
<el-row >
<el-col :span="4" class=" bkk" >
<div class="kfdiv">
<table v-for="(t,i) in uli" :class="'bgg ' +(t.uid==chatuid?'selxian':'')">
<tr @click="chooseuser(t,i)">
<td class="kfw" valign="top"><img class="kffaceimg" :src="FILE_URL+t.faceimg"></td>
<td class="dibuxian"> <span class="kfname">{{t.nickname}}</span><el-tag v-if="t.role=='qt'" size="mini">客服</el-tag></td>
</tr>
</table>
</div>
</el-col>
<el-col :span="20" class=" bkk">
<div class="chatdiv" id="chatgf">
<div v-for="(t,i) in cli">
<table v-if="kfid!=t.uid" class="bgg">
<tr>
<td class="ltr" valign="top"><img :src="FILE_URL+t.faceimg" class="faceimg"></td>
<td class="lnr">
<span class="huizi">{{t.nickname}} {{t.cts}}</span><br>
<p class="lcnr">{{t.cont}}</p>
</td>
</tr>
</table>
<table v-if="kfid==t.uid" class="bgg">
<tr>
<td class="rnr">
<span class="huizi">{{t.nickname}} {{t.cts}}</span><br>
<p class="rcnr">{{t.cont}}</p>
</td>
<td class="rtr" valign="top"><img :src="FILE_URL+t.faceimg" class="faceimg"></td>
</tr>
</table>
</div>
</div>
<el-row class="chatnr ">
<el-col :span="22" >
<el-input v-model="context" placeholder="请输入您的内容"></el-input>
</el-col>
<el-col :span="2" >
<el-button :disabled="chatuid?false:true" @click="saveC" type="success">提交</el-button>
</el-col>
</el-row>
</el-col>
</el-row>
</div>
</div>
</div>
</template>
<script>
import vHeader from "./Header.vue";
import vSidebar from "./Sidebar.vue";
import { chat_save, chat_list, chat_getChatRooms } from '../../api';
export default {
name: "NoticeDetail",
components: {
vHeader,vSidebar
},
data() {
return {
FILE_URL:'',
context:'',
chatuid:'',
kfid:'',
chatno:'',
lander:{},
islogin:'',
uli:[],
cli:[],
seti:null,
isfirst:true,
}
},
methods:{
saveC() {
if ( this.context.trim().length==0) {
this.$message.error('请输入内容');
return ;
}
chat_save({uid:this.kfid, cont: this.context ,cno:this.chatno}).then((res) => {
if(res.data.status==1){
this.context='';
this. getcli();
this.gobottom();
}else{
this.$message.info(res.data.msg);
}
})
},
gobottom(){
setTimeout(()=>{
let scrollTarget = document.getElementById("chatgf");
scrollTarget.scrollTop=scrollTarget.scrollHeight;
},500)
},
getcli(){
chat_list({cno: this.chatno}).then((res) => {
if(res.data.status==1){
this.cli=res.data.obj;
if(this.isfirst){
this.gobottom();
this.isfirst=false;
}
}else{
this.$message.info(res.data.msg);
}
})
},
getuli(){
chat_getChatRooms({ id:this.kfid}).then((res) => {
if(res.data.status==1){
this.uli=res.data.obj;
}else{
this.$message.info(res.data.msg);
}
})
},
chooseuser(t,i){
if(t.uid==this.kfid){
this.$message.error("自己不能和自己咨询");
return;
}
this.chatuid=t.uid;
this.chatno=this.chatuid+"_"+this.kfid;
if(parseInt(this.kfid)<parseInt(this.chatuid))this.chatno=this.kfid+"_"+this.chatuid;
if(this.seti==null){
this.seti=setInterval(()=>{
this.getcli();
},2000)
}
}
},mounted() {
this.FILE_URL=process.env.VUE_APP_API_ROOT;
this.lander=JSON.parse(localStorage.loginUser);
this.kfid=this.lander.id;
this.getuli();
},deactivated() {
if(this.seti!=null)clearInterval(this.seti)
},destroyed() {
if(this.seti!=null)clearInterval(this.seti)
}
}
</script>
<style scoped>
.bgg{width: 100%;margin-bottom: 10px;}
.bkk{border: 1px solid #888;border-radius:10px;height:500px;}
.chatdiv{height: 440px; overflow-y: auto;padding: 10px;}
.chatnr{height: 50px;}
.faceimg{width: 50px;height: 50px;border-radius: 50%; }
.lnr{ text-align: left; }
.huizi{color: #666;font-size: 13px;}
.lcnr{background-color: #dddddd;padding: 10px;max-width: 80%;display: inline-block;border-radius: 10px;}
.ltr{width: 60px}
.rtr{width: 60px;text-align: right;}
.rnr{text-align: right;}
.rcnr{background-color: #2f7bbf;padding: 10px;max-width: 80%;color: #fff;display: inline-block;text-align: left;border-radius: 10px;}
.kfdiv{overflow-y: auto;padding: 10px 0px;height: 100%;}
.kffaceimg{width: 40px;height: 40px;border-radius: 50%; }
.kfw{width: 50px;}
.kfname{font-size: 13px;color:#333;}
.dibuxian{border-bottom: 1px solid #8888;}
.selxian{background-color:#ddd;}
</style>
后台：
package com.jf.s.control;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.jf.s.bean.JdChat;
import com.jf.s.bean.JdUsers;
import com.jf.s.service.JdChatService;
import com.jf.s.util.DateUtil;
import com.jf.s.util.MessUtil;
import com.jf.s.util.Sys;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.annotation.Resource;
import java.util.List;
@CrossOrigin
@RestController
@RequestMapping("/chat")
public class JdChatController {
@Resource
JdChatService chatService;
@RequestMapping("/getChatRooms")
public MessUtil getChatRooms( Integer id) {
MessUtil mess=new MessUtil();
List<JdChat> li=chatService.getChatRooms(id);
for(JdChat c:li){
if(c.getNickname()==null)c.setNickname("游客"+c.getUid());
if(c.getFaceimg()==null)c.setFaceimg(Sys.Upimg.youkefaceimg);
}
return mess.succ(li);
}
@RequestMapping("/list")
public MessUtil list( JdChat o) {
MessUtil mess=new MessUtil();
List<JdChat> li=chatService.getlistByJoin(o);
for(JdChat c:li){
if(c.getNickname()==null)c.setNickname("游客"+c.getUid());
if(c.getFaceimg()==null)c.setFaceimg(Sys.Upimg.youkefaceimg);
}
return mess.succ(li);
}
@RequestMapping("/save")
public MessUtil save(JdChat o ) {
MessUtil mess=new MessUtil();
if(o.getId()==null){
o.setCts(DateUtil.getNowTime());
chatService.save(o);
}else{
chatService.updateById(o);
}
return mess.succ();
}
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.jf.s.dao.JdChatMapper">
<select id="getlistByJoin" resultType="com.jf.s.bean.JdChat" parameterType="com.jf.s.bean.JdChat">
select
c.*,u.nickname,u.faceimg
from jd_chat c
left join jd_users u on u.id=c.uid
where 1=1
<if test="cno != null and cno!='' ">
and c.cno=#{cno}
</if>
</select>
<select id="getByIdJoin" resultType="com.jf.s.bean.JdChat"
parameterType="java.lang.Integer">
select
c.*,u.nickname,u.faceimg
from jd_chat c
left join jd_users u on u.id=c.uid
where c.id=#{0}
</select>
<select id="getChatRooms" resultType="com.jf.s.bean.JdChat"
parameterType="java.lang.Integer">
select
DISTINCT cno,u.nickname,u.faceimg,uid
from jd_chat c
left join jd_users u on u.id=c.uid
where (cno like concat('%_',#{0},'') or cno like concat('',#{0},'_%'))
and uid!=#{0}
</select>
</mapper>
数据库
image.png
image.png
好博客就要一起分享哦！分享海报
此处可发布评论
评论（0）展开评论
暂无评论，快来写一下吧
展开评论
他的专栏
java 
vue 
springboot 
Mysql 
ssm 
小程序 
uniapp 
js和jquery 他感兴趣的技术
