github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/message/chat_win.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-win.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"></style>
    15  	</head>
    16  	<body>
    17  		<header class="aui-bar aui-bar-nav aui-bar-primary" id="aui-header">
    18  			<a class="aui-pull-left" onclick="api.closeWin();"> <span class="aui-iconfont aui-icon-left"></span> </a>
    19  			<div class="aui-title"></div>
    20  			<a class="aui-pull-right" onclick="_openWin('chatHistory_win','chatHistory_win.html');"><span class="aui-iconfont iconfont icon-lishi"></span></a>
    21  		</header>
    22  	</body>
    23  	<!--APICloud自带前端脚本-->
    24  	<script type="text/javascript" src="../../script/api.js"></script>
    25  	<!--Zepto.js,类似Jquery-->
    26  	<script type="text/javascript" src="../../script/zepto.min.js"></script>
    27  	<!--通用脚本库-->
    28  	<script type="text/javascript" src="../../script/app.js"></script>
    29  	<script type="text/javascript">
    30  		var uiChatBox = null, uiMediaScanner = null, imageFilter = null, bMap = null;
    31  		// 重新调整frame会话区域
    32  		function setChatInit(frameName, inputAreaHeight) {
    33  			var headerOffset = $api.offset($api.byId('aui-header'));
    34  			api.setFrameAttr({
    35  				name : frameName,
    36  				rect : {
    37  					x : 0,
    38  					y : headerOffset.h,
    39  					w : api.winWidth,
    40  					h : api.winHeight - headerOffset.h - inputAreaHeight
    41  				}
    42  			});
    43  			setTimeout(function() {
    44  				// 通知会话页面滚动到底部
    45  				api.sendEvent({
    46  					name : 'scrollButton',
    47  					extra : {}
    48  				});
    49  			}, 300);
    50  		}
    51  
    52  		apiready = function() {
    53  			// 获取用户信息
    54  			var user_id = $api.getStorage("user_id");
    55  			var userJson = user_id;
    56  			
    57  			// 引入多选模块
    58  			uiMediaScanner = api.require('UIMediaScanner');
    59  			// 引入过滤压缩模块
    60  			imageFilter = api.require("imageFilter");
    61  			// 引入百度模块
    62  			//bMap = api.require('bMap');
    63  			// 初始化聊天组件
    64  			uiChatBox = api.require('UIChatBox');
    65  			uiChatBox.open({
    66  				placeholder : '',
    67  				maxRows : 4,
    68  				emotionPath : 'widget://image/chatBox/emotion',
    69  				texts : {
    70  					recordBtn : {
    71  						normalTitle : '按住 说话',
    72  						activeTitle : '松开 结束'
    73  					}
    74  				},
    75  				styles : {
    76  					inputBar : {
    77  						borderColor : '#d9d9d9',
    78  						bgColor : '#f2f2f2'
    79  					},
    80  					inputBox : {
    81  						borderColor : '#B3B3B3',
    82  						bgColor : '#FFFFFF'
    83  					},
    84  					emotionBtn : {
    85  						normalImg : 'widget://image/chatBox/chatBox_face1.png'
    86  					},
    87  					extrasBtn : {
    88  						normalImg : 'widget://image/chatBox/chatBox_add1.png'
    89  					},
    90  					keyboardBtn : {
    91  						normalImg : 'widget://image/chatBox/chatBox_key1.png'
    92  					},
    93  					speechBtn : {
    94  						normalImg : 'widget://image/chatBox/chatBox_key1.png'
    95  					},
    96  					recordBtn : {
    97  						normalBg : '#c4c4c4',
    98  						activeBg : '#999999',
    99  						color : '#000',
   100  						size : 14
   101  					},
   102  					indicator : {
   103  						target : 'both',
   104  						color : '#c4c4c4',
   105  						activeColor : '#9e9e9e'
   106  					}
   107  				},
   108  				extras : {
   109  					titleSize : 10,
   110  					titleColor : '#a3a3a3',
   111  					btns : [{
   112  						title : '图片',
   113  						normalImg : 'widget://image/chatBox/chatBox_album1.png',
   114  						activeImg : 'widget://image/chatBox/chatBox_album2.png'
   115  					}, {
   116  						title : '拍照',
   117  						normalImg : 'widget://image/chatBox/chatBox_cam1.png',
   118  						activeImg : 'widget://image/chatBox/chatBox_cam2.png'
   119  					}]
   120  				}
   121  			}, function(ret) {
   122  				//点击附加功能面板
   123  				if (ret.eventType == 'clickExtras') {
   124  					// 获取点击附件面板的索引
   125  					var btnIndex = ret.index;
   126  					switch(btnIndex) {
   127  						// 点击照片按钮
   128  						case 0:
   129  							uiMediaScanner.open({
   130  								type : 'picture',
   131  								column : 4,
   132  								classify : true,
   133  								max : 9,
   134  								sort : {
   135  									key : 'time',
   136  									order : 'desc'
   137  								},
   138  								texts : {
   139  									stateText : '已选*项',
   140  									cancelText : '取消',
   141  									finishText : '完成'
   142  								},
   143  								styles : {
   144  									bg : '#fff',
   145  									mark : {
   146  										icon : '',
   147  										position : 'bottom_left',
   148  										size : 20
   149  									},
   150  									nav : {
   151  										bg : '#b23e4b',
   152  										stateColor : '#fff',
   153  										stateSize : 18,
   154  										cancelBg : 'rgba(0,0,0,0)',
   155  										cancelColor : '#fff',
   156  										cancelSize : 18,
   157  										finishBg : 'rgba(0,0,0,0)',
   158  										finishColor : '#fff',
   159  										finishSize : 18
   160  									}
   161  								}
   162  							}, function(ret) {
   163  								if (ret) {
   164  									for (var i = 0; i < ret.list.length; i++) {
   165  										var selectImg = ret.list[i];
   166  										// 获取图片的路径
   167  										var selectimgPath = selectImg.path;
   168  										var selectimgThumbPath = selectImg.thumbPath;
   169  										// IOS需要将虚拟路径转换为本地路径才可以压缩
   170  										if (_isIOS()) {
   171  											// 转换为真实路径
   172  											uiMediaScanner.transPath({
   173  												path : selectimgPath
   174  											}, function(transObj) {
   175  												// 图片压缩
   176  												_imgCompress(imageFilter, transObj.path, 0.5, 0.5, selectImg.suffix, function(compressImg) {
   177  													// 发送图片消息
   178  													_sendEvent("sendMsgStart", {
   179  														msgType : "ImgMsg",
   180  														conversationType : api.pageParam.conversationType,
   181  														senderId : user_id,
   182  														targetId : api.pageParam.targetId,
   183  														content : compressImg,
   184  														extra : JSON.stringify(userJson)
   185  													});
   186  												});
   187  											});
   188  										} else {
   189  											// 图片压缩
   190  											_imgCompress(imageFilter, selectimgPath, 0.5, 0.5, selectImg.suffix, function(compressImg) {
   191  												// 发送图片消息
   192  												_sendEvent("sendMsgStart", {
   193  													msgType : "ImgMsg",
   194  													conversationType : api.pageParam.conversationType,
   195  													senderId : user_id,
   196  													targetId : api.pageParam.targetId,
   197  													content : compressImg,
   198  													extra : JSON.stringify(userJson)
   199  												});
   200  											});
   201  										}
   202  									}
   203  								}
   204  							});
   205  							break;
   206  						// 打开拍照
   207  						case 1:
   208  							api.getPicture({
   209  								sourceType : "camera",
   210  								encodingType : "jpg",
   211  								destinationType : "url",
   212  								mediaValue : "pic",
   213  								quality : 50,
   214  								saveToPhotoAlbum : true
   215  							}, function(ret, err) {
   216  								if (ret && ret.data) {
   217  									// 拍照返回的本地路径
   218  									var returnUrl = ret.data;
   219  									// 图片压缩
   220  									_imgCompress(imageFilter, returnUrl, 0.5, 0.5, _getExt(returnUrl), function(compressImg) {
   221  										// 发送图片消息
   222  										_sendEvent("sendMsgStart", {
   223  											msgType : "ImgMsg",
   224  											conversationType : api.pageParam.conversationType,
   225  											senderId : user_id,
   226  											targetId : api.pageParam.targetId,
   227  											content : compressImg,
   228  											extra : JSON.stringify(userJson)
   229  										});
   230  									});
   231  								} else {
   232  									_toast('没有选择，或者选择出错');
   233  								}
   234  							});
   235  							break;
   236  					}
   237  				}
   238  				//点击发送按钮文字
   239  				if (ret.eventType == 'send') {
   240  					// 广播开始发送，通知msg页面发送消息
   241  								
   242  					_sendEvent("sendMsgStart", {
   243  						msgType : "TxtMsg",
   244  						conversationType : api.pageParam.conversationType,
   245  						senderId : user_id,
   246  						senderName: "jincm1",
   247  						targetId : api.pageParam.targetId,
   248  						targetName: "jincm2",
   249  						content : ret.msg,
   250  						extra : JSON.stringify(userJson)
   251  					});
   252  				}
   253  			});
   254  			// 监听录音键是否被按下
   255  			uiChatBox.addEventListener({
   256  				target : 'recordBtn',
   257  				name : 'press'
   258  			}, function(ret, err) {
   259  				// 录用保存目录
   260  				var savePath = api.cacheDir + "/" + _getNowFormatDate() + "/";
   261  				// 录音保存文件名
   262  				var saveName = _newGuid() + ".amr";
   263  				// 开始录音
   264  				api.startRecord({
   265  					path : savePath + saveName
   266  				});
   267  			});
   268  			// 监听录音键是否松开了
   269  			uiChatBox.addEventListener({
   270  				target : 'recordBtn',
   271  				name : 'press_cancel'
   272  			}, function(ret, err) {
   273  				// 停止录音
   274  				api.stopRecord(function(ret, err) {
   275  					if (ret) {
   276  						// 广播开始发送，通知msg页面发送消息
   277  						// 设置语音时间
   278  						userJson["duration"] = ret.duration;
   279  						_sendEvent("sendMsgStart", {
   280  							msgType : "VcMsg",
   281  							conversationType : api.pageParam.conversationType,
   282  							senderId : user_id,
   283  							targetId : api.pageParam.targetId,
   284  							content : ret.path,
   285  							extra : JSON.stringify(userJson)
   286  						});
   287  					}
   288  				});
   289  			});
   290  			// 监听输入框弹动事件
   291  			uiChatBox.addEventListener({
   292  				target : 'inputBar',
   293  				name : 'move'
   294  			}, function(ret, err) {
   295  				setChatInit("chat_frm", ret.panelHeight + ret.inputBarHeight + (_isIOS() ? 0 : 10));
   296  			});
   297  			// 监听输入框改变事件
   298  			uiChatBox.addEventListener({
   299  				target : 'inputBar',
   300  				name : 'change'
   301  			}, function(ret, err) {
   302  				setChatInit("chat_frm", ret.panelHeight + ret.inputBarHeight + (_isIOS() ? 0 : 10));
   303  			});
   304  			// 打开会话
   305  			_fixStatusBar("aui-header", function(headerPos) {
   306  				_openFrame("chat_frm", "chat_frm.html", {
   307  					x : 0,
   308  					y : headerPos.h,
   309  					h : api.winHeight - headerPos.h - (_isIOS() ? 50 : 44)
   310  				});
   311  			});
   312  			// 设置会话标题
   313  			$(".aui-title").text(api.pageParam.targetName);
   314  		};
   315  	</script>
   316  </html>