在上一篇随笔中,我们已经看了如何实现前台的对话功能;前台我限定了店主只有一人,店铺只有一个,所有比较单一,但后台就不一样了,而后台更像是我们常见的聊天软件;当然,前台也应该实现这种效果,但原理懂了,可以自己以后再扩展:

首先看一下要实现的效果:

实现的功能:

(1)右边的联系人列表:

    未联系过的不显示;只显示联系过的;可以清空消息记录;有新消息时会有提醒,当点击后,提醒消失,清空按钮出现;

(2)左边的对话框

    点击右边的联系人,显示该联系人的头像和他的对话消息(和前台页面一样)

 第一步:店主登录查看信息页面:

第二步:实现显示列表

<div class="ff" style="background-color: ghostwhite;"><div style="height: 100px; width: 300px;background-image: url(../img/1.jpg);"><br>//(1)读取所有给店主发过信息的联系人界面,包括头像和姓名<?php$uid = $_SESSION["uid"];       $sql = "select * from users where uid='{$uid}'";$arr = $db->query($sql);foreach($arr as $v){              echo "<div style='height:100px;width:100px;float:left;text-align:center;line-height:100px'><img src='{$v[6]}' height='80px' width='80px'/></div><div style='height:100px;width:200px;float:left;'><div style='height:40px;width:200px;text-align:left;line-height:40px'>{$v[2]}</div><div style='height:60px;width:200px;'>个性签名:<input type='text' placeholder='不读书怎么对得起今天!' style='width:180px'></div>   </div>"; }          ?></div><div style="height: 30px; width: 300px;text-align:center;line-height:30px;border-bottom:2px solid grey;background-color: ghostwhite;">我的联系人</div><div style="height: 470px; width: 300px;"><?php$uid = $_SESSION["uid"];if($uid=="zhangsan"){   //读取所有给张三发过信息的联系人,并按发送时间的降序排序                  $sql2="select * from duihua where jsid='{$uid}' group by uid order by dhtime desc";            $arr2= $db->query($sql2);   foreach($arr2 as $n){<br>                                 //从users表中读取中文姓名$sql3 = "select * from users where uid='{$n[2]}' ";$arr3=$db->query($sql3);    //从对话表中读取不同联系人未读信息的条数,$sql4 = "select count(*) from duihua where uid='{$n[2]}' and isok='0'";$shumu =$db->strquery($sql4);                                                                           echo "<div style='height:70px; width: 300px;border-bottom:2px solid grey;background-color:ghostwhite' class='guke dh' aaa='{$n[2]}'><div  style='height:70px; width: 100px; float:left;'><div style='height:50px;width:50px;margin:10px auto; border-radius:10px;overflow:hidden'><img src='{$arr3[0][6]}' height='50px' width='50px'/></div></div>";      <br>//如果有未读消息,则显示“XXX,有。。。条未读,红字”              if($shumu>0){                   echo"<div  style='height:70px; width: 100px;float:left;line-height:80px'>{$arr3[0][2]} <span style='font-size:12px;color:red'>有{$shumu}新消息!</span></div></div>";                         }<br>//否则,则只显示XXX,和“清空”按钮else{echo"<div style='height:70px; width: 100px;float:left;line-height:80px'>{$arr3[0][2]} </div><div class='qk' ccc='{$n[2]}' style='height:70px; width:50px;line-height:80px;float:right'><button type='button' class='btn btn-danger' style='height:30px;width:50px' οnclick=\"return confirm('确认清空该聊天记录吗?')\">清空</button></div></div>";  }}}      ?></div>       </div>

 实现效果:

第三步:点击该列表可以移动,实现移动:

  $(".ff").mousedown(function(e){//设置移动后的默认位置var endx=0;var endy=0;//获取div的初始位置,要注意的是需要转整型,因为获取到值带pxvar left= parseInt($(".ff").css("left"));var top = parseInt($(".ff").css("top"));//获取鼠标按下时的坐标,区别于下面的es.pageX,es.pageYvar downx=e.pageX;var downy=e.pageY;     //pageY的y要大写,必须大写!!//    鼠标按下时给div挂事件$(".ff").bind("mousemove",function(es){//es.pageX,es.pageY:获取鼠标移动后的坐标var endx= es.pageX-downx+left;     //计算div的最终位置var endy=es.pageY-downy+top;//带上单位$(".ff").css("left",endx+"px").css("top",endy+"px")   });
})$(".ff").mouseup(function(){//鼠标弹起时给div取消事件$(".ff").unbind("mousemove")})

第四步:点击不同的用户进入不同用户的界面(以头像作为区别);用session来做(核心)  

<script>$(".guke").dblclick(function(){var aaa=$(this).attr("aaa");   $.ajax({url:"yidu-cl.php",data:{yh:aaa},type:"POST",dataType:"TEXT",success: function(data){                   window.location.href="ht-dh.php";              }          });})</script>

yidu-cl.php页面

<?php
session_start();
require "DBDA.class.php";
$db = new DBDA();
$uid=$_SESSION["uid"];$yh=$_POST["yh"];<br>//存一下
$_SESSION["cuid"]=$yh;
$sql = "update duihua set isok='1' where uid='{$yh}' and jsid='{$uid}'";
echo $sql;
$db->query($sql,0);
?>

 

第四步:点击陈三,进入与陈三的对话界面:

当我点击陈三后,“有。。新消息”消失;出现清空按钮;左侧相应的变为与张三的对话界面

实现代码:

<div id="zhongjian"><!--对话--><div id="mid">
<!--判断是否已经存了cuid,注意一点,这是前半部分代码;后半部分代码在最后边;不然会报错的!!!!--><?phpif(!empty($_SESSION["cuid"])){?><div id="kuangjia" style="background-color: whitesmoke;height: 550px;width: 620px;margin: 0px auto;border: 1px solid gainsboro; "><div id="neirong" style="height: 400px;width: 620px;"><div style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);">
<!--取存的cuid,显示该联系人的头像姓名等信息--><?php$cuid = $_SESSION["cuid"];$sql3 = "select * from users where uid='{$cuid}'";$arr3 = $db->query($sql3);foreach($arr3 as $c){              echo "<div style='height:100px;float:left;width:100px;float:left;'><div style='border:2px solid grey;height:84px;width:84px;margin:7px auto; border-radius:10px;overflow:hidden'><img src='{$c[6]}' height='80px' width='80px'/></div></div><div style='height:100px;width:500px;float:left;'><div style='height:50px;width:500px;text-align:left;line-height:50px'>{$arr3[0][2]}</div>           <div style='height:50px;width:500px;text-align:left;'>个性签名:<input type='text' placeholder='店主,便宜点!' style='width:280px'>                                </div></div>"; }          ?></div>       <!--读取聊天内容--><div style="height: 300px;width: 620px;overflow: auto;overflow-x:hidden ;"><?php$cuid = $_SESSION["cuid"];$sql4 = "select * from users where uid='{$cuid}'";$arr4 = $db->query($sql4);$sql5="select * from duihua where uid='{$cuid}' or jsid='{$cuid}' order by dhtime";                $arr5= $db->query($sql5);foreach($arr5 as $f){//该联系人的信息显示在左侧,和前台相反if($f[2]==$cuid){echo "<div style='height:100px;width:600px;'><div style='height:100px;width:300px;float:left'><div style='height:20px;width:300px;font-size:13px;padding-left:20px'>{$f[6]}</div><div style='height:80px;width:50px;float:left'><div style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'><img src='{$arr4[0][6]}' height='50px' width='50px'/></div></div><div style='min-height:40px;width:250px;float:left;background-color:pink; border-bottom-right-radius: 10px;border-top-right-radius: 10px;border-top-left-radius: 40px;border-bottom-left-radius: 40px;'><p style='padding-left:20px; line-height:40px'>{$f[4]}</p>                              </div>                   </div></div>";}      //如果是店主,则显示在右侧         if($f[2]=='zhangsan'){                                              echo "<div style='height:100px;width:600px;margin-right:20px'><div style='height:100px;width:300px; float:right'><div style='height:20px;width:300px;font-size:13px;padding-right:20px'>{$f[6]}</div><div style='height:80px;width:50px;float:right'><div style='height:50px;width:50px;margin:0px auto; border-radius:90px;overflow:hidden;'><img src='{$v[6]}' height='50px' width='50px'/></div></div><div style='min-height:40px;width:250px;float:right;background-color:cornflowerblue; border-bottom-left-radius: 10px;border-top-left-radius: 10px;border-top-right-radius: 40px;border-bottom-right-radius: 40px;'><p style='padding-left:20px; line-height:40px'>{$f[4]}</p>                              </div>                   </div></div>"; }                  }      ?>                      </div>       </div> <!--id="neirong"--><form role="form"><div class="form-group"><textarea class="form-control" rows="3" id="words"></textarea></div></form><div id="fs" style="height: 50px; width: 600px;text-align: right; padding-right: 50px;"><button type="button" class="btn btn-success guanbi"  bbb="<?php  echo $cuid;  ?>" >关闭</button><button type="button" class="btn btn-success fasong">发送</button></div></div>
<!--是最开始判断是否为空的结尾--> <?php}?></div>    <!--id=mid-->
</div> <!--id=zhongjian-->

 第五步:点击清空

$(".qk").click(function(){var ccc=$(this).attr("ccc");$.ajax({url:"qk-cl.php",data:{yh:ccc},type:"POST",dataType:"TEXT",success: function(data){   alert("删除成功!");            window.location.href="ht-dh.php";              }          });})

 qk-cl.php页面:

<?php
session_start();
require "DBDA.class.php";
$db = new DBDA();
$uid=$_POST["yh"];
$sql = "delete from duihua where uid='{$uid}'";
$db->query($sql,0);

 

现在我们来全部看一遍:以陈三为例

1、先清空陈三的聊天记录(只有王五一人)

2、登录陈三的账号,发布一个信息

    

3、登录张三的账号,会发现多了陈三的对话列表

4、点击陈三;出现与陈三的对话列表,同时提示消失,出现清除按钮

5、点击清空按钮:

这样就实现了全部效果了~~~如果把前台也做成后台这种效果,那就和qq、阿里旺旺等聊天工具一样啦~~

难点是:

    点击不同用户出现与不同用户的对话框,触发点击事件时存一下session;

    发送内容时,点击发送,刷新读取内容时存的cuid是否依旧存在?(加判断);

    逻辑要清晰,因为要不断用用户名从users表读取头像和姓名;所以sql语句有点多,也有点绕。慢慢来

 

 

 

 

  

 

转载于:https://www.cnblogs.com/douchenchen/p/7088370.html

用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 后台页面相关推荐

  1. 用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面

    首先来看一下我已经实现的效果图: 消费者页面:(本篇随笔) (1)会显示店主的头像 (2)当前用户发送信息显示在右侧,接受的信息,显示在左侧 店主或客服页面:(下一篇随笔) (1)在左侧有一个列表 , ...

  2. python实现千牛客服自动回复语_淘宝客服自动回复语录(客服自动回复大全)

    淘宝客服自动回复语录(客服自动回复大全) 2020-12-05 09:42:32 共7个回答 谁能帮我弄下淘宝的自动回复.就是第一次收到买家信息自动回复什么语句比较好.我离开时回复什么语句比较好 鼠标 ...

  3. 淘宝客服的逆袭之路:拼搏六个月,从6K到12K,我哭了......

    个人基本介绍 我之前的行业是淘宝客服,薪资不高6000左右,没有五险一金的那种,不包吃,不包住,一个月下来去掉吃住,基本上不剩什么钱,考虑转行主要是看python行业薪资高. 我与python之缘 决 ...

  4. 淘宝客服的逆袭之路:拼搏6个月,从6K到12K,我哭了……

    个人基本介绍 我之前的行业是淘宝客服,薪资不高6000左右,没有五险一金的那种,不包吃,不包住,一个月下来去掉吃住,基本上不剩什么钱,考虑转行主要是看python行业薪资高. 我与python之缘 决 ...

  5. 淘宝客服的逆袭之路:拼搏6个月,从6K到12K,我哭了......

    个人基本介绍 我之前的行业是淘宝客服,薪资不高6000左右,没有五险一金的那种,不包吃,不包住,一个月下来去掉吃住,基本上不剩什么钱,考虑转行主要是看python行业薪资高. 我与python之缘 决 ...

  6. 淘宝客服如何判定骂人?骂人怎么投诉?

    淘宝客服是淘宝店铺的重要工作人员之一,想要做好淘宝客服并不是容易的事情,医院每天都需要接待很多的客户,且每个客户的性格也是不一样的,那么淘宝客服骂人是怎么评判的呢? 如果淘宝客服有骂人的言论,那么基本 ...

  7. Python 模拟淘宝客服小蜜自动回复

    首先,新建一个文本文件做准备: 订单|如果您有任何订单问题,可以登录淘宝账号,点击"我的订单",查看订单详情. 物流|如果您有任何订单问题,可以登录淘宝账号,点击"我的订 ...

  8. 淘宝客服快捷回复技巧

    快捷回复对于淘宝客服来说非常重要,对于店铺的成交和转化率有着直接影响,淘宝客服要掌握一定的快捷回复技巧. ​ 前言 快捷回复对于淘宝客服来说非常重要,对于店铺的成交和转化率有着直接影响.现在是快节奏时 ...

  9. 【淘宝客服的制胜法宝:投诉处理篇】

    [淘宝客服的制胜法宝:投诉处理篇] 投诉处理中常见的几种问题: 1.虚假发货, 2.延迟发货, 3.违背承诺, 4.未收到货, 5.七天无理由退货. 投诉处理中常见的几种客户: 1.古怪的客户, 2. ...

最新文章

  1. 网络安全技术分析:DDoS的攻与防
  2. 哈佛大学校长: 教育是培养你辨别有人在胡说八道的能力
  3. 开源一个友盟 for android 操作的封装包
  4. getBoundingClientRect的用法
  5. cocos2d实现语音_Cocos2d-x 3.2 Lua示例CocosDenshionTest(音频测试)
  6. C语言递归算法将十进制转换为二进制(附完整源码)
  7. oracle 无法弹出图形界面,Xshell 5 不能弹出GUI 图形界面问题
  8. CodeForces - 1486E Paired Payment(分层图最短路)
  9. 五种方法提高你的智力
  10. junit注释_JUnit注释
  11. MariaDB修改端口号
  12. 【VC ++6.0】VC++6.0的安装
  13. 微信公众号开发基本流程
  14. JavaScript实例 幻灯片(自动播放 且 能点击)
  15. ug12.0安装教程(超级详细安装步骤)
  16. 西门子atch指令详解_西门子PLC指令集.PDF
  17. 网站打不开数据库错误等常见问题解决方法
  18. java el if_EL 表达式中条件运算符用于执行某种条件判断,它类似于 Java 语言中的 if-else 语句 。 ( )_学小易找答案...
  19. 今日新闻早报 精选简报12条 每天一分钟 知晓天下事 2月3日
  20. java达内项目_达内IT学院举办Java互联网架构师项目峰会

热门文章

  1. Centos 服务器禁止 IP访问/ IP黑名单
  2. java3d书_一些java3d比较精彩的资源(转自 中国VR技术社区)
  3. 大规模视频内容理解:淘宝视频内容标签的结构化分析和管理
  4. 康复治疗多少钱一天?成都顾连可以报销医保吗?
  5. linux系统取消虚拟键盘,关闭iOS虚拟键盘的六种方法
  6. 零基础学习JavaScript
  7. 小程序个人开放的服务范围类目表
  8. 联想网盘、钉钉、销售易:企业减负增效的SaaS解决方案
  9. 启动mysql报错:ERROR! The server quit without updating PID file
  10. python快速下载_Python:快速下载多个文件