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

首先来看一下我已经实现的效果图:

消费者页面:(本篇随笔)

(1)会显示店主的头像

(2)当前用户发送信息显示在右侧,接受的信息,显示在左侧

店主或客服页面:(下一篇随笔)

(1)在左侧有一个列表 ,会显示所有与店主对话的顾客;该列表可以移动;有新消息时会提示;也可以清空该聊天记录

(2)点击列表里的顾客进入右边的对话框界面,显示与该顾客的聊天信息

在实现功能之前,来说一下我用到的两张表:

解释一下:bkid在此处没有用到;isok列是用来判断消息是否已读,未读为0;

现在,来说一下步骤:(分前台和后台两部分)

在这篇随笔中我们首先来说一下前台页面是如何实现的:(李四登录)

用session存取一下lisi;便于后面从user表中取数据

1、布局页面代码以及读取数据代码:

<!--中间内容-->
	<div id="zhongjian">
	  	<div id="kuangjia" style="height: 550px;width: 620px; margin: 0px auto;border: 1px solid gainsboro;background-color: white;">
			<div id="neirong" style="height: 400px;width: 600px;">
				<div style="height: 100px;width: 620px;background-image: url(../img/bj4.jpg);">
		//取店主用户名,显示店主的头像和姓名        <?php
        	$uid = $_SESSION["uid"];
        	$sql = "select * from users where uid=‘zhangsan‘";
        	$arr = $db->query($sql);
        	foreach($arr as $v)
        	{
        	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=‘{$v[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‘>
        			亲爱的店主
        		</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 ;">                                 //获取session里存取的uid;
        		<?php
					$uid = $_SESSION["uid"];
					$sql3 = "select * from users where uid=‘{$uid}‘";
        	                        $arr3 = $db->query($sql3);                    //从对话表里读取店主张三和李四所有的对话信息,并按对话时间顺序排序
					$sql2="select * from duihua where uid=‘{$uid}‘ or jsid=‘{$uid}‘ order by dhtime";
					$arr2= $db->query($sql2);
					foreach($arr2 as $n)
					{                                //如果是店主,则信息要显示在左侧
					if($n[2]==‘zhangsan‘)
					{
					echo "<div style=‘height:100px;width:600px;‘>
					<div style=‘height:100px;width:250px;float:left‘>
						<div style=‘height:20px;width:250px;font-size:13px;padding-left:20px‘>
								{$n[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=‘{$v[6]}‘ height=‘50px‘ width=‘50px‘/>
							</div>
						</div>
						<div style=‘min-height:40px;width:200px;float:left;background-color:cornflowerblue; 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‘>
								{$n[4]}</p>
						</div>
					</div></div>";
					}	//如果是李四,则显示在右侧
				  if($n[2]==$uid)
					{
					echo "<div style=‘height:100px;width:600px;margin-right:20px‘>
					<div style=‘height:100px;width:250px; float:right‘>
						<div style=‘height:20px;width:250px;font-size:13px;padding-right:20px‘>
								{$n[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=‘{$arr3[0][6]}‘ height=‘50px‘ width=‘50px‘/>
							</div>
						</div>
						<div style=‘min-height:40px;width:200px;float:right;background-color:pink; 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‘>
								{$n[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 fasong">发送</button>     //点击按钮发送
		</div>
		</div>
		</div> <!--id=zhongjian-->

  

实现效果:

2、点击发送时的ajax代码:

<script>
	$(".tc").click(function(){
		$("#kuangjia").show();
	})

		$(".fasong").click(function(){
		var nr=$("#words").val();
		$.ajax({
			url:"qt-speak-cl.php",
			data:{words:nr},
			type:"POST",
			dataType:"TEXT",
			success: function(data){
				if(data==1)
				{
				window.location.href="qt-dh.php";
				}
				else{
					alert("发送内容不能为空!");
				}

				}
		})
	})	

		$("#dh").click(function(){
		$.ajax({
			url:"qt-yidu-cl.php",
			dataType:"TEXT",
			success: function(data){
//				alert(data);
				window.location.href="qt-dh.php";
			}
		})
	})

</script>

  

 3、qt-speak-cl.php页面:

<?php
session_start();
require "DBDA.class.php";

$db = new DBDA();
$uid = $_SESSION["uid"];

$words =$_POST["words"];
$chtime=date("Y-m-d H:i:s",time());

$jieshou = "zhangsan";
if(!empty($words))
{
$sql="insert into duihua values (‘‘,‘{$jieshou}‘,‘{$uid}‘,‘‘,‘{$words}‘,0,‘{$chtime}‘)";
echo $db->query($sql,0);
}
else
{
	echo "发送内容不能为空!";
}
?>

 如果发送内容为空,则会提示“发送内容不能为空!”

 

前台页面会随不同用户登录显示不同的信息;让王五登录看看:

未完待续,后台页面的实现看下一篇随笔中~~~

时间: 2024-10-12 13:42:40

用php+mysql+ajax实现淘宝客服或阿里旺旺聊天功能 之 前台页面的相关文章

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

在上一篇随笔中,我们已经看了如何实现前台的对话功能:前台我限定了店主只有一人,店铺只有一个,所有比较单一,但后台就不一样了,而后台更像是我们常见的聊天软件:当然,前台也应该实现这种效果,但原理懂了,可以自己以后再扩展: 首先看一下要实现的效果: 实现的功能: (1)右边的联系人列表: 未联系过的不显示:只显示联系过的:可以清空消息记录:有新消息时会有提醒,当点击后,提醒消失,清空按钮出现: (2)左边的对话框 点击右边的联系人,显示该联系人的头像和他的对话消息(和前台页面一样)  第一步:店主登

那些必须掌握的淘宝客服技巧

当我们把星货源店铺做好优化之后,有流量进来了,但是却促进不了成交,这该怎么办?其实成交的问题原因不仅仅是在装修上,而且出现在客服身上.现在很多小卖家都是自己一个人在运营店铺,同时兼顾客服的工作,所以说掌握一些淘宝客服技巧也是非常有必要的. 接下来简单得从四个小技巧进行剖析: 一.缩短时间 在回答买家问题的时候,并不是简单的表面回答,要深入到买家心里,换个角度,你作为买家问这个问题的意思,顾虑疑问是什么,特别是当多位买家发出相同疑问的时候,应该找出问题的背后原因,以免一而再再而三遇到相似的问题浪费

淘宝客服外包 | 天猫客服托管

深圳淘宝外包深圳头狼淘宝运营外包淘宝外包托管深圳专业运营团队深圳淘宝网店外包托管15323787597  QQ2131015970深圳专业运营团队为每个商家打造零风险托管运营外包概念,整合线上与线下资源为客户提供专业.高质量的电子商务运营外包服务 这个世界通过某些法则运算是公正的. 商人付出了努力,为客户提供了便利,便应当获得合理的报酬. 商人是一个处理器,他们将无序的市场变得有序,以满足客户的需求. 他们更像一个设计师和建筑师——市场是商人设计和创建的. 店铺定位:店铺只能有一个定位,不能风格

腾讯从社群端整治淘宝客,90%的淘客群被封

近日不断有淘宝客反映,自己的社交账号被冻结,原因如下:该微信账号被用户投诉,并确认有大量发布垃圾信息等骚扰行为,被临时限制登录. 除此以外大量的淘客群也被封禁. 之前5月份淘宝客官方公众号发布了一条通知: "目前接到用户反馈:在微信/QQ等渠道的正常推广链接遭遇屏蔽,无法打开.如您碰到类似情况,建议可以在微信/QQ等网页上申诉.另外,分享出去的推广内容,先把链接去掉,引导买家通过淘口令购买!" 阿里随后也疑似反击:寄出快递中抽检小卡片,禁止卖家引导买家添加微信号.一旦被查出有可能删宝贝

链云淘宝客优惠券网站免费源码下载 自动采集

链云淘宝客优惠券导购CMS 自动采集 PC端+手机端 微商淘客必备 链云优惠券CMS采用独立的程序+数据库,安全稳定性能优越,全自动操作,可自主设置自动或者手动采集,无需后期维护,一次建成,永久使用.自动采集优惠券和下单链接,自动转换成自己的PID,全部自动完成. 演示地址:http://5395.lianyunshop.com/ 手机浏览器直接访问进入手机端 开发环境:PHP语言和MySQL数据库. 服务器要求:支持PHP语言,支持MySQL数据库,支持Zend组件,支持Windows系统或L

淘宝客知道这几个ID,收入将会提高50%

基础问题天天说,天天有人问.这篇文章写点基础的.特别对新手的帮助会很大哦. 1,PID,做淘宝客不知道PID,赚到钱也会被冻结. 如何手动获取PID 2,单品ID,淘宝商品的唯一识别编号,和身份证一样,每个商品都有个唯一的编号 天猫的 https://detail.tmall.com/item.htm?id=520105375809&ali_refid=a3_430583_1006:1103424533:N:%E4%B8%93%E4%B8%9A%E6%B3%B3%E8%A1%A3%E5%A5%B

.net淘宝客基础api 分页查询

1 using System; 2 using System.Collections.Generic; 3 using System.Configuration; 4 using System.Linq; 5 using System.Web; 6 using Top.Api; 7 using Top.Api.Request; 8 using Top.Api.Response; 9 10 namespace MvcWebApp.DataBase 11 { 12 public class TaoD

我刚刚建立个淘宝客网站,主要销售丰胸产品减肥药

我刚刚建立个淘宝客网站,主要销售丰胸产品减肥药,www.yazimeirongmeiti.com欢迎大家赏光!

查询类网站或成站长淘宝客新金矿

流量是玩转互联网的基础,传说的中的大牛一般都是倒腾流量的高手.在大牛眼中抓取流量是一门艺术,背后玩的是五花八门的思路. 这篇文章斗胆跟大家分享一个好玩的思路.文章将以剥洋葱的方式展开,希望剥完这颗洋葱会让你有相见恨晚之感. 在切入正题之前,先分析一下搜索需求这个概念.人们借助搜索引擎大抵有以下几个诉求:第一,了解是什么,寻找是什么类别的信息,这一块占据搜索流量的绝大部分.第二,想知道为什么,很多时候会用提问关键词去索引,譬如"怎么获取流量".第三类,单纯地想去某个网站,敲入关键词通过搜