上一篇隨筆是客服的前台,顧客只能與店主聊天,這一篇則是后台,是店主登錄而且可以與每一位顧客聊天:
實現的功能:
(1)右邊的聯系人列表:
未聯系過的不顯示;只顯示聯系過的;可以清空消息記錄;有新消息時會有提醒,當點擊后,提醒消失,清空按鈕出現;
(2)左邊的對話框
點擊右邊的聯系人,顯示該聯系人的頭像和他的對話消息(和前台頁面一樣)
第一步還是登錄:
顯示列表的實現:
<div class="ff" style="background-color: ghostwhite;"> <div style="height: 100px; width: 300px;background-image: url(../img/1.jpg);">//讀取所有給店主發過信息的聯系人界面,包括頭像和姓名 <?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); // var_dump($arr2); foreach($arr2 as $n) { $sql3 = "select * from users where uid='{$n[2]}' ";//從users表中讀取中文姓名 $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' 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>"; if($shumu>0){ echo"<div class='dh' yh='{$n[2]}' style='height:70px; width: 200px;float:left;line-height:80px'> {$arr3[0][2]} <span style='font-size:12px;color:red'>小主,有{$shumu}新消息哦!</span> </div> </div>"; } else { echo"<div class='dh' yh='{$n[2]}' style='height:70px; width: 200px;float:left;line-height:80px'> {$arr3[0][2]} </div> </div>"; } } } ?> </div> </div>
實現效果:
第三步:點擊該列表可以移動,實現移動:
$(".ff").mousedown(function(e){ //設置移動后的默認位置 var endx=0; var endy=0; //獲取div的初始位置,要注意的是需要轉整型,因為獲取到值帶px var left= parseInt($(".ff").css("left")); var top = parseInt($(".ff").css("top")); //獲取鼠標按下時的坐標,區別於下面的es.pageX,es.pageY var 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,注意一點,這是前半部分代碼;后半部分代碼在最后邊;不然會報錯的!!!!--> <?php if(!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-->