github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/message/chat_frm.html (about)

     1  <!doctype html>
     2  <html>
     3  	<head>
     4  		<meta charset="utf-8">
     5  		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
     6  		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
     7  		<title></title>
     8  		<!--AUI样式框架-->
     9  		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.min.css" />
    10  		<!--拓展AUI字体图标-->
    11  		<link rel="stylesheet" type="text/css" href="../../css/iconfont/iconfont.css" />
    12  		<!--通用样式-->
    13  		<link rel="stylesheet" type="text/css" href="../../css/winu-ui.css" />
    14  		<style type="text/css">
    15  			html, body {
    16  				background: #ade7ef;
    17  			}
    18  			.chat-sender-info {
    19  				font-size: 10px;
    20  				color: #999;
    21  			}
    22  			.nick {
    23  				font-size: 10px;
    24  				color: #666;
    25  			}
    26  			.history-date {
    27  				padding: 5px 0;
    28  			}
    29  			.icon-yuyin {
    30  				font-size: 20px !important;
    31  			}
    32  			.yuyin .icon-yuyin.red {
    33  				color: #f00;
    34  			}
    35  		</style>
    36  		<!--发送模板===============================-->
    37  		<script id="senderTpl" type="text/x-dot-template">
    38  			<div class="chat-sender-info winu-text-align-right winu-clear-both">
    39  			{{=_formatDate(it.sentTime)}}<label class="nick">&nbsp;&nbsp;&nbsp;{{=it.senderName}}</label>
    40  			</div>
    41  			<div class="aui-chat-sender msgcontent" data-msgid="{{=it.msgId}}">
    42  			<div class="aui-chat-sender-avatar"><img src="widget://image/chatBox/chatBox_face1.png">
    43  			</div>
    44  			<div class="aui-chat-sender-cont">
    45  			<div class="aui-chat-right-triangle"></div>
    46  			<div class="aui-chat-status winu-display-none"><i class="aui-iconfont aui-icon-loading aui-chat-progress"></i></div>
    47  			<span>{{=it.content}}</span>
    48  			</div>
    49  			</div>
    50  		</script>
    51  		<!--接收模板===============================-->
    52  		<script id="receiverTpl" type="text/x-dot-template">
    53  			<div class="chat-sender-info winu-text-align-left winu-clear-both">
    54  			<label class="nick">{{=it.senderName}}</label>&nbsp;&nbsp;&nbsp;{{=it.senderUserId}}
    55  			</div>
    56  			<div class="aui-chat-receiver msgcontent" data-msgid="{{=it.msgId}}">
    57  			<div class="aui-chat-receiver-avatar"><img src="{{=(window.uploadUrl+it.text)}}">
    58  			</div>
    59  			<div class="aui-chat-receiver-cont">
    60  			<div class="aui-chat-left-triangle"></div>
    61  			<span>{{=it.content}}</span>
    62  			</div>
    63  			</div>
    64  		</script>
    65  	</head>
    66  	<body>
    67  		<div class="aui-content aui-content-padded" id="message-content">
    68  			<p class="aui-text-center history-date">
    69  				2015-11-21 20:30:20
    70  			</p>
    71  		</div>
    72  	</body>
    73  	<!--APICloud自带前端脚本-->
    74  	<script type="text/javascript" src="../../script/api.js"></script>
    75  	<!--Zepto.js,类似Jquery-->
    76  	<script type="text/javascript" src="../../script/zepto.min.js"></script>
    77  	<!--doT.js模板引擎-->
    78  	<script type="text/javascript" src="../../script/doT.min.js"></script>
    79  	<!--通用脚本库-->
    80  	<script type="text/javascript" src="../../script/app.js"></script>
    81  	<!--转换表情-->
    82  	<script type="text/javascript" src="../../script/emo.js"></script>
    83  	<script type="text/javascript">
    84  		// 图片预览模块
    85  		var imageBrowser = null;
    86  		// 设置语音空格长度
    87  		function setVoiceLength(duration) {
    88  			var beisu = Math.ceil(parseInt(duration) / 4.0);
    89  			var html = "";
    90  			for (var i = 0; i < beisu; i++) {
    91  				html += "&nbsp;&nbsp;&nbsp;";
    92  			}
    93  			return html;
    94  		}
    95  
    96  		// 生成发送消息样式
    97  		function writeSendMsg(msgObj) {
    98  			// 获取消息类型
    99  			var objectName = msgObj.objectName;
   100  			switch(objectName) {
   101  				// 文本类型
   102  				case "TxtMsg":
   103  					msgObj.content.text = _transEmo(msgObj.content.text);
   104  					break;
   105  				// 语音类型
   106  				case "VcMsg":
   107  					msgObj.content.text = "<label class='winu-display-block yuyin' data-voicepath='" + msgObj.content.voicePath + "'>" + msgObj.content.extra.duration + "s" + setVoiceLength(msgObj.content.extra.duration) + "<i class='iconfont icon-yuyin'></i>" + "</label>";
   108  					break;
   109  				// 图片消息
   110  				case "ImgMsg":
   111  					msgObj.content.text = "<img src='" + msgObj.content.imageUrl + "' style='width:100%;' class='imagemsg' />";
   112  					break;
   113  			}
   114  			var interText = doT.template($("#senderTpl").text());
   115  			$("#message-content").append(interText(msgObj));
   116  			setTimeout(function() {
   117  				_scrollToEnd();
   118  			}, 300);
   119  		}
   120  
   121  		// 生成接受信息样式
   122  		function receiverSendMsg(msgObj) {
   123  			// 获取接收类型
   124  			console.log("msg3 is :" + JSON.stringify(msgObj));
   125  			console.log("msg4 is :" + msgObj.objectName);
   126  			
   127  			var objectName = msgObj.objectName;
   128  			switch(objectName) {
   129  				// 文本类型
   130  				case "TxtMsg":
   131  					msgObj.content.text = _transEmo(msgObj.content.text);
   132  					msgObj.sentTime = msgObj.receivedTime;
   133  					break;
   134  				// 语音类型
   135  				case "VcMsg":
   136  					msgObj.content.text = "<label class='winu-display-block yuyin' data-voicepath='" + msgObj.content.voicePath + "'>" + "<i class='iconfont icon-yuyin'></i>" + setVoiceLength(msgObj.content.extra.duration) + msgObj.content.extra.duration + "s"; +"</label>";
   137  					msgObj.sentTime = msgObj.receivedTime;
   138  					break;
   139  				// 图片消息
   140  				case "ImgMsg":
   141  					msgObj.content.text = "<img src='" + msgObj.content.imageUrl + "' style='width:100%;' class='imagemsg' />";
   142  					msgObj.sentTime = msgObj.receivedTime;
   143  					break;
   144  			}
   145  			// 开始渲染
   146  			var interText = doT.template($("#receiverTpl").text());
   147  			$("#message-content").append(interText(msgObj));
   148  			setTimeout(function() {
   149  				_scrollToEnd();
   150  			}, 300);
   151  		}
   152  
   153  		// 打开图片浏览
   154  		// imgs：需要预览的图片集合
   155  		function openImageBrowser(imgs, index) {
   156  			imageBrowser.openImages({
   157  				imageUrls : imgs,
   158  				showList : false,
   159  				activeIndex : index
   160  			});
   161  		}
   162  
   163  		Zepto(function($) {
   164  			// 点击显示图片预览
   165  			$("#message-content").on("tap", ".imagemsg", function() {
   166  				var showImgsArr = [];
   167  				$("#message-content .imagemsg").each(function() {
   168  					var srcPath = $(this).attr("src");
   169  					showImgsArr.push(srcPath);
   170  				});
   171  				var index = showImgsArr.indexOf($(this).attr("src"));
   172  				openImageBrowser(showImgsArr, index);
   173  			});
   174  			// 点击语音播放
   175  			$("#message-content").on("tap", ".yuyin", function() {
   176  				// 先停止所有播放
   177  				api.stopPlay();
   178  				$(".yuyin").each(function() {
   179  					$(this).find(".icon-yuyin").removeClass("red");
   180  				});
   181  				var $that = $(this);
   182  				$that.find(".icon-yuyin").addClass("red");
   183  				var voicepath = $(this).attr("data-voicepath");
   184  				// 开始播放
   185  				api.startPlay({
   186  					path : voicepath
   187  				}, function() {
   188  					$that.find(".icon-yuyin").removeClass("red");
   189  				});
   190  			});
   191  		});
   192  		apiready = function() {
   193  			// 引入图片浏览模块
   194  			imageBrowser = api.require('imageBrowser');
   195  			// 监听是否需要滚动到底部
   196  			_addEventListener("scrollButton", function() {
   197  				setTimeout(function() {
   198  					_scrollToEnd();
   199  				}, 30);
   200  			});
   201  			// 0.0  请求获取历史消息
   202  			_sendEvent("getNewMsgStart", {
   203  				conversationType : api.pageParam.conversationType,
   204  				targetId : api.pageParam.targetId,
   205  				oldestMessageId : -1
   206  			});
   207  			// 广播事件，通知成功获取到历史数据
   208  			_addEventListener("getNewMsgEnd", function(ret) {
   209  				if (ret && ret.value) {
   210  					var result = ret.value;
   211  					var msglist = typeof result == "object" ? result : $api.strToJson(result);
   212  					// 渲染消息
   213  					if (msglist && msglist.length > 0) {
   214  						for (var i = msglist.length - 1; i >= 0; i--) {
   215  							var msgObj = msglist[i];
   216  							msgObj.extra = $api.strToJson(msgObj.extra);
   217  							// 发送方
   218  							if (msgObj.messageDirection == "SEND") {
   219  								writeSendMsg(msgObj);
   220  							}
   221  							// 接收方
   222  							else {
   223  								receiverSendMsg(msgObj);
   224  							}
   225  						}
   226  						setTimeout(function() {
   227  							_scrollToEnd();
   228  						}, 300);
   229  					}
   230  				}
   231  			});
   232  			// 1.0 监听发送准备事件
   233  			_addEventListener("sendMsgPrepare", function(ret) {
   234  				if (ret && ret.value) {
   235  					var msg = ret.value;
   236  					
   237  					console.log("msg2 is :" + ret);
   238  					console.log("msg21 is :" + ret.value);
   239  					console.log("msg3 is :" + msg.content);
   240  					console.log("msg4 is :" + msg.extra);
   241  					
   242  					msg.extra = $api.strToJson(msg.extra);
   243  					// 渲染模板引擎
   244  					writeSendMsg(msg);
   245  					$(".aui-chat-sender[data-msgid='" + msg.messageId + "']").find(".aui-chat-status").removeClass("winu-display-none");
   246  				}
   247  			});
   248  			// 2.0 监听是否发送成功
   249  			_addEventListener("sendMsgSuccess", function(msg) {
   250  				if (msg.content) {
   251  					//var msg = msg.content;
   252  					//隐藏加载图标
   253  					$(".aui-chat-sender[data-msgid='" + msg.msgId + "']").find(".aui-chat-status").addClass("winu-display-none");
   254  				}
   255  			});
   256  			// 3.0 监听是否发送失败
   257  			_addEventListener("sendMsgError", function(ret) {
   258  				if (ret && ret.value) {
   259  					var msg = ret.value;
   260  					//隐藏加载图标
   261  					$(".aui-chat-sender[data-msgid='" + msg.messageId + "']").find(".aui-chat-status i").attr("class", "aui-iconfont  iconfont icon-jinggao").css("color", "#f00");
   262  				}
   263  			});
   264  			// 4.0 监听是否有消息进来
   265  			_addEventListener("receivedMsg", function(ret) {
   266  				if (ret && ret.value) {
   267  					// 清除会话
   268  					_sendEvent("clearMessages", {
   269  						conversationType : api.pageParam.conversationType,
   270  						targetId : api.pageParam.targetId
   271  					});
   272  					console.log("receivedMsg msg is :" + JSON.stringify(ret));
   273  					
   274  					// 判断是否是自己
   275  					var msg = ret.value;
   276  					user_id = $api.getStorage("user_id");
   277  					if (msg.targetId == user_id) {
   278  						msg.extra = $api.strToJson(msg.extra);
   279  						msg.sentTime = msg.receivedTime;
   280  						// 渲染模板引擎
   281  						receiverSendMsg(msg);
   282  					}
   283  				}
   284  			});
   285  			// 清除会话
   286  			_sendEvent("clearMessages", {
   287  				conversationType : api.pageParam.conversationType,
   288  				targetId : api.pageParam.targetId
   289  			});
   290  			// 下拉刷新
   291  			_setRefreshHeaderInfo(function() {
   292  				api.refreshHeaderLoadDone();
   293  			});
   294  		};
   295  	</script>
   296  </html>