h5高仿微信web网页版|仿微信聊天项目

/* --- 用户设置.Start ---*/
// 联系人/群聊切换
$("body").on("click", ".wc__addChat-tab li", function () {
	var idx = $(this).index();
	$(this).addClass("on").siblings().removeClass("on");

	$(this).parents(".wc__popupTmpl").find(".J__swtChatUser").hide();
	$(this).parents(".wc__popupTmpl").find(".J__swtChatUser").eq(idx).show();
	// 清除筛选
	$(".wc__addChatMixList .item").removeClass("selected");
});

// 1、新建聊天
$("body").on("click", ".J__addChat", function(){
	$(".wc__addChat-tab").show();

	var chatidx = wcPop({
		skin: 'ios',
		title: '<h2 style="font-size:18px; font-weight:700;">新建聊天</h2>',
		content: $("#J__popupTmpl-addChat").html(),
		style: 'background-color: #f3f3f3; max-width: 640px; width:auto;',
		
		btns: [
			{
				text: '确定',
				style: 'background:#12b7f5;color:#fff;font-size:14px;',
				onTap() {
					wcPop.close(chatidx);
				}
			}
		]
	});
});
// 勾选联系人选项
$("body").on("click", ".wc__addChatMixList .item", function () {
	if($(this).hasClass("qun")){
		$(this).addClass("selected").siblings().removeClass("selected");
	}else{
		$(this).toggleClass("selected");
	}
});

// 2、设置聊天
$("body").on("click", ".J__setChat", function(e){
	var that = $(this), contextTpl, menuNode = $("<div class='wc__contextmenu animated anim-fadeIn'></div>");
	contextTpl = "<div class='wc__contextmenuSetChat menu'><a class='status online' href='#'>在线</a><a class='status offline' href='#'>离开</a><a class='status busy' href='#'>忙碌</a><a class='status invisible' href='#'>隐身</a><a class='deliver'></a><a href='#'>关闭桌面通知</a><a href='#'>关闭提醒声音</a><a href='#'>退出</a></div>";

	if (!$(".wc__contextmenu").length) {
		$("body").append(menuNode.html(contextTpl));
		posFix();
	} else {
		$(".wc__contextmenu").hide().html(contextTpl).fadeIn(250);
		posFix();
	}

	function posFix() {
		$(".wc__contextmenu").css({
			position: "absolute",
			left: e.pageX,
			top: e.pageY
		});
	}
});

// 群公告
$("#J__groupAnnouncement").on("click", function(){
	var announcementIdx = wcPop({
		skin: 'android',
		title: '群公告',
		content: '<p style="font-size:12px;font-family:arial;">jcFlow 更新于 08-10 10:26</p><p style="color:#333;margin-top:10px;">进群的小伙伴注意啦，修改群名，格式统一为部门加英文名（技术部-Jackson），部门有英文简称的用英名，无则用中文拼音首字母，如JS-Henory……注意大小写！</p>',
		btns: [
			{
				text: '关闭',
				style: 'color: #12b7f9;',
				onTap() {
					wcPop.close(announcementIdx);
				}
			}
		]
	});
});

// 屏蔽消息
$("#J__shieldMsg").on("click", function () {
	var shieldIdx = wcPop({
		skin: 'android',
		title: '提示',
		content: '确定要屏蔽该群聊消息嚒，您将收不到群聊发来的消息！',
		btns: [
			{
				text: '取消',
				onTap() {
					wcPop.close(shieldIdx);
				}
			},
			{
				text: '确定',
				style: 'color: #12b7f9;',
				onTap() {
					wcPop({ content: '消息屏蔽成功！', time: 2 });
				}
			}
		]
	});
});

// 解除屏蔽
$(".J__unlockerMsg").on("click", function(){
	var unshieldIdx = wcPop({
		skin: 'ios',
		content: '<div><p style="color:green;font-size:16px;">已解除屏蔽！</p><p style="margin-top:10px;">您现在可以接收到对方发来的消息。</p></div>',
		time: 2,
		btns: [
			{
				text: '知道了',
				style: 'color: #12b7f9;',
				onTap() {
					wcPop.close(unshieldIdx);
				}
			}
		]
	});
});

// 群聊信息
$("#J__groupMemberInfo").on("click", function(){
	var chatMemidx = wcPop({
		skin: 'ios',
		title: '<h2 style="font-size:18px; font-weight:700;">群聊信息(124)</h2>',
		content: $("#J__popupTmpl-groupMemInfo").html(),
		style: 'background-color: #f3f3f3; max-width: 640px; width:auto;'
	});
});

// 删除退群
$("body").on("click", "#J__leaveOutQun", function () {
	var leaveOut = wcPop({
		id: 'wc__LeaveOutQun',
		skin: 'android',
		content: '删除并退出群聊后，将不再接收此群聊的信息？',

		btns: [
			{
				text: '取消',
				onTap() {
					wcPop.close(leaveOut);
				}
			},
			{
				text: '确定',
				style: 'color:#e64240',
				onTap() {
					wcPop.closeAll();
					wcPop({id: 'wcTips', content: '已退出该群聊！', time: 2 });
				}
			}
		]
	});
});
/* --- 用户设置.End ---*/