Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.app
Watch 2
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Commits 22 Releases 0 Wiki
Browse Source

1.聊天页，头部信息，聊天内容，保存消息功能实现
2.咨询列表的数据渲染

xiaoai_123 8 years ago
parent
b79ede1034
commit
10043bedd8
4 changed files with 927 additions and 24 deletions
Unified View Show Diff Stats
  1. 68 15
      app/html/chats.html
  2. 10 9
      app/html/consultlist.html
  3. 535 0
      app/js/chats.js
  4. 314 0
      app/js/consultlist.js

+ 68 - 15
app/html/chats.html
View File

292 
 			.cancel {
292 
 			.cancel {
293 
 				background-color: darkred;
293 
 				background-color: darkred;
294 
 			}
294 
 			}
295 
 			.displayNone {
296 
 				display: none;
297 
 			}
298
299
295 
 		</style>
300 
 		</style>
296 
 	</head>
301 
 	</head>
297 
  	<body contextmenu="return false;">
302 
  	<body contextmenu="return false;">
298 
 		<header class="mui-bar mui-bar-nav toptitbox">
303 
 		<header class="mui-bar mui-bar-nav toptitbox">
299 
 			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
304 
 			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
300 
 			<h1 class="mui-title toptit">对方姓名</h1>
305 
 			<h1 class="mui-title toptit" id="chatName"></h1>
301 
 			<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>
306 
 			<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>
302 
 		</header>
307 
 		</header>
303 
 		<pre id='h'></pre>
308 
 		<pre id='h'></pre>
304 
 		<script id='msg-template' type="text/template">
309 
 		<script id='msg-template' type="text/template">
305 
 			<% for(var i in record){ var item=record[i]; %>
310 
 			<% for(var i in record){ var item=record[i]; %>
306 
 				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
311 
 				<div class="msg-item <%= (item.sender=='self'?' msg-item-self':'') %>" msg-type='<%=(item.type)%>' msg-content='<%=(item.content)%>'>
312 
 					<!--对话内容渲染-->
307 
 					<% if(item.sender=='self' ) { %>
313 
 					<% if(item.sender=='self' ) { %>
308 
 						<i class="msg-user mui-icon mui-icon-person"></i>
314 
 						<!--<i class="msg-user mui-icon mui-icon-person"></i>-->
315 
 						<img class="msg-user msg-user-img" src="../images/dialogue.png" alt="" />
309 
 					<% } else { %>
316 
 					<% } else { %>
310 
 						<img class="msg-user-img" src="../images/logo.png" alt="" />
317 
 						<img class="msg-user msg-user-img" src="../images/logo.png" alt="" />
311 
 					<% } %>
318 
 					<% } %>
312 
 					<div class="msg-content">
319 
 					<div class="msg-content">
313 
 						<div class="msg-content-inner">
320 
 						<div class="msg-content-inner">
329 
 		<div class="mui-content">
336 
 		<div class="mui-content">
330 
 			<div class="operatebox">
337 
 			<div class="operatebox">
331 
 				<div class="themespan mui-pull-left">
338 
 				<div class="themespan mui-pull-left">
332 
 					<span class="">关于XXXXXX的咨询关于XXXXXX的咨询</span>
339 
 					<span class="" id="consultTitle"></span>
333 
 				</div>
340 
 				</div>
334 
 				<div class="operatebtnbox mui-pull-right">
335 
 					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn">点击确认完成咨询</button>
341 
 				<!--我的需求，进行中-->
342 
 				<div class="operatebtnbox mui-pull-right displayNone" id="confirmBtn">
343 
 					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn" >点击确认完成咨询</button>
336 
 				</div>
344 
 				</div>
345 
 				<!--我的需求，未评价-->
346 
 				<div class="operatebtnbox mui-pull-right displayNone" id="assessBtn">
347 
 					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn"  style="width:80px;">去评价</button>
348 
 				</div>
349 
 				<!--我的需求，已评价-->
350 
 				<div class="operatebtnbox mui-pull-right operated displayNone" id="assessed">
351 
 					<div class="evabox" >
352 
 						<span>对方已评价</span>
353 
 						<div class="levelbox" id="my_starContainer">
354 
				        	<span class="mui-icon iconfont icon-favorfill star"></span> <!--无色星星icon-favor  黄色星icon-favorfill-->
355 
			        		<span class="mui-icon iconfont icon-favorfill star"></span>
356 
			        		<span class="mui-icon iconfont icon-favorfill star"></span>
357 
			        		<span class="mui-icon iconfont icon-favor star"></span>
358 
			        		<span class="mui-icon iconfont icon-favor star"></span>
359 
			        	</div>
360 
 					</div>
361 
 				</div>
362
363 
 				<!--收到咨询，对方未评价-->
364 
 				<div class="operatebtnbox mui-pull-right displayNone" style="width:30%;" id="that_weiassess">
365 
 					<div class="evabox"><span>对方还未评价</span></div>
366 
 				</div>
367 
 				<!--收到咨询，进行中-->
368 
 				<div class="operatebtnbox mui-pull-right displayNone" id="waying" style="width:30%;">
369 
 					<div class="evabox"><span>进行中</span></div>
370 
 				</div>
371 
 				<!--收到咨询，对方已评价-->
372 
 				<div class="operatebtnbox mui-pull-right operated displayNone" id="that_assessed">
373 
 					<div class="evabox" >
374 
 						<span>对方已评价</span>
375 
 						<div class="levelbox" id="consult_starContainer">
376 
				        	<span class="mui-icon iconfont icon-favor star"></span> <!--无色星星icon-favor  黄色星icon-favorfill-->
377 
			        		<span class="mui-icon iconfont icon-favor star"></span>
378 
			        		<span class="mui-icon iconfont icon-favor star"></span>
379 
			        		<span class="mui-icon iconfont icon-favor star"></span>
380 
			        		<span class="mui-icon iconfont icon-favor star"></span>
381 
			        	</div>
382 
 					</div>
383 
 				</div>
384
385
337 
 			</div>
386 
 			</div>
338 
 			<div id='msg-list'>
387 
 			<div id='msg-list'>
388
339 
 			</div>
389 
 			</div>
340 
 		</div>
390 
 		</div>
341 
 		<footer>
391 
 		<footer class="" id="chatFooter">
342 
 			<div class="footer-left">
392 
 			<div class="footer-left">
343 
 				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
393 
 				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
344 
 			</div>
394 
 			</div>
356 
 			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
406 
 			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
357 
 		</div>
407 
 		</div>
358 
 		<script src="../js/public/mui.min.js"></script>
408 
 		<script src="../js/public/mui.min.js"></script>
409 
 		<script src="../js/public/base.js"></script>
359 
 		<script src="../js/public/mui.imageViewer.js"></script>
410 
 		<script src="../js/public/mui.imageViewer.js"></script>
360 
 		<script src="../js/public/arttmpl.js"></script>
411 
 		<script src="../js/public/arttmpl.js"></script>
412 
 		<script type="text/javascript" src="../js/chats.js"></script>
361 
 		<script type="text/javascript" charset="utf-8">
413 
 		<script type="text/javascript" charset="utf-8">
362 
 			(function($, doc) {
414 
 			/*(function($, doc) {
363 
 				var MIN_SOUND_TIME = 800;
415 
 				var MIN_SOUND_TIME = 800;
364 
 				$.init({
416 
 				$.init({
365 
 					gestureConfig: {
417 
 					gestureConfig: {
436 
 					});
488 
 					});
437 
 					var bindMsgList = function() {
489 
 					var bindMsgList = function() {
438 
 						//绑定数据:
490 
 						//绑定数据:
439 
 						/*tp.bind({
440 
 							template: 'msg-template',
441 
 							element: 'msg-list',
442 
 							model: record
443 
 						});*/
491 
// 						tp.bind({
492 
// 							template: 'msg-template',
493 
// 							element: 'msg-list',
494 
// 							model: record
495 
// 						});
444 
 						ui.areaMsgList.innerHTML = template('msg-template', {
496 
 						ui.areaMsgList.innerHTML = template('msg-template', {
445 
 							"record": record
497 
 							"record": record
446 
 						});
498 
 						});
463 
 						toRobot(msg.content);
515 
 						toRobot(msg.content);
464 
 					};
516 
 					};
465 
 					var toRobot = function(info) {
517 
 					var toRobot = function(info) {
466 
 						var apiUrl = 'http://www.tuling123.com/openapi/api';
518 
   						var apiUrl = 'http://www.tuling123.com/openapi/api';
519 
//						var apiUrl = baseUrl+'/ajax/tidings/qacon';
467 
 						$.getJSON(apiUrl, {
520 
 						$.getJSON(apiUrl, {
468 
 							"key": 'acfbca724ea1b5db96d2eef88ce677dc',
521 
 							"key": 'acfbca724ea1b5db96d2eef88ce677dc',
469 
 							"info": info,
522 
 							"info": info,
683 
						}, 0);
736 
						}, 0);
684 
					}, false);
737 
					}, false);
685 
				});
738 
				});
686 
			}(mui, document));
739 
			}(mui, document));*/
687 
		</script>
740 
		</script>
688 
	</body>
741 
	</body>
689 
</html>
 742 
</html>

+ 10 - 9
app/html/consultlist.html
View File

5 
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
5 
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6 
    <title></title>
6 
    <title></title>
7 
    <link href="../css/mui.min.css" rel="stylesheet"/>
7 
    <link href="../css/mui.min.css" rel="stylesheet"/>
8 
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
8 
    <link href="../css/app.css" rel="stylesheet"/>
9 
    <link href="../css/app.css" rel="stylesheet"/>
9
10
10 
</head>
11 
</head>
36 
        <!--图文列表-->
37 
        <!--图文列表-->
37 
        <div class="mui-card-content conblock" style="margin-top:0 ;">
38 
        <div class="mui-card-content conblock" style="margin-top:0 ;">
38
39
39 
	        <ul class="mui-table-view protable">
40 
	            <li class="mui-table-view-cell mui-media">
40 
	        <ul class="mui-table-view protable" id="listContainer">
41 
	            <!--<li class="mui-table-view-cell mui-media">
41 
	            	<div class="coutopicbox">
42 
	            	<div class="coutopicbox">
42 
	            		<span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
43 
	            		<span class="coutheme mui-ellipsis mui-pull-left">关于某某技术的咨询某某技术的咨询某某技术的咨询某某技术的咨询</span>
43 
	            		<div class="coustatus mui-pull-right">
44 
	            		<div class="coustatus mui-pull-right">
44 
	            			<span class="aimlabel">技术</span>
45 
	            			<span class="aimlabel">技术</span>
45 
	            			<span class="status-1">进行中</span>
46 
	            			<span class="status-1">进行中</span>-->
46 
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
47 
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
47 
	            		</div>
48 
	            		<!--</div>
48
49
49 
	            	</div>
 50 
	            	</div>
50 
	                <a class="proinfor" href="chats.html">
51 
	                <a class="proinfor" href="chats.html">
63 
	            		<div class="coustatus mui-pull-right">
64 
	            		<div class="coustatus mui-pull-right">
64 
	            			<span class="aimlabel">其它</span>
65 
	            			<span class="aimlabel">其它</span>
65 
	            			<span class="status-2">待评价</span>
66 
	            			<span class="status-2">待评价</span>
66 
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
67 
	            		</div>
67 
	            		</div>
68
68
69 
	            	</div>
69 
	            	</div>
83 
	            		<div class="coustatus mui-pull-right">
83 
	            		<div class="coustatus mui-pull-right">
84 
	            			<span class="aimlabel">资源</span>
84 
	            			<span class="aimlabel">资源</span>
85 
	            			<span class="status-3">已完成</span>
85 
	            			<span class="status-3">已完成</span>
86 
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
87 
	            		</div>
86 
	            		</div>
88
87
89 
	            	</div>
88 
	            	</div>
102 
	            		<div class="coustatus mui-pull-right">
101 
	            		<div class="coustatus mui-pull-right">
103 
	            			<span class="aimlabel">资源</span>
102 
	            			<span class="aimlabel">资源</span>
104 
	            			<span class="status-3">已完成</span>
103 
	            			<span class="status-3">已完成</span>
105 
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
106 
	            		</div>
104 
	            		</div>
107
105
108 
	            	</div>
106 
	            	</div>
121 
	            		<div class="coustatus mui-pull-right">
119 
	            		<div class="coustatus mui-pull-right">
122 
	            			<span class="aimlabel">资源</span>
120 
	            			<span class="aimlabel">资源</span>
123 
	            			<span class="status-3">已完成</span>
121 
	            			<span class="status-3">已完成</span>
124 
	            			<!--进行中"status-1"  待评价"status-2"  已完成"status-3"-->
125 
	            		</div>
122 
	            		</div>
126
123
127 
	            	</div>
124 
	            	</div>
133 
	                    	<p class="listtit3">专家姓名专姓名专家姓名专家姓名专姓名专家姓名专家姓名</p>
130 
	                    	<p class="listtit3">专家姓名专姓名专家姓名专家姓名专姓名专家姓名专家姓名</p>
134 
	                    </div>
131 
	                    </div>
135 
	                </a>
132 
	                </a>
136 
	            </li>
133 
	            </li>-->
137
134
138 
	        </ul>
135 
	        </ul>
139 
		</div>
136 
		</div>
191
188
192
189
193 
	<script src="../js/public/mui.min.js"></script>
190 
	<script src="../js/public/mui.min.js"></script>
191 
	<script src="../js/public/base.js"></script>
192 
	<script src="../js/consultlist.js">
193
194 
	</script>
194 
    <script type="text/javascript" charset="utf-8">
195 
    <script type="text/javascript" charset="utf-8">
195 
      	mui.init({
196 
      	mui.init({
196 
				swipeBack: true //启用右滑关闭功能
197 
				swipeBack: true //启用右滑关闭功能

+ 535 - 0
app/js/chats.js
View File

1 
mui.ready(function() {
2
3 
	var oconsultTitle = document.getElementById("consultTitle");//咨询标题
4 
	var ochatName = document.getElementById("chatName");//与。。聊天
5
6 
	var oconfirmBtn = document.getElementById("confirmBtn");//我的需求，确认完成按钮
7 
	var oassessBtn = document.getElementById("assessBtn");//我的需求，去评价按钮
8 
	var oassessed = document.getElementById("assessed");//我的需求，已评价(评价星级和评价内容)
9 
	var omy_starContainer = document.getElementById("my_starContainer");//我的需求，星级容器
10
11 
	var othat_weiassess = document.getElementById("that_weiassess");//收到咨询，未评价状态
12 
	var owaying = document.getElementById("waying");//收到咨询，进行中状态
13 
	var othat_assessed = document.getElementById("that_assessed");//收到咨询，对方已评价
14 
	var oconstarContainer = document.getElementById("consult_starContainer");//收到咨询星级容器
15
16
17 
	var omsg_list = document.getElementById("msg-list");
18 
	var omsg_text = document.getElementById("msg-text");
19 
	var omsg_type = document.getElementById("msg-type");
20 
	var ochatFooter = document.getElementById("chatFooter");
21
22 
	function getHeadInfo(manFlag,consultId){
23 
		var myData;
24 
		if(manFlag == 'myNeed'){//我的需求
25 
			//我的需求
26 
			mui.ajax(baseUrl+'/ajax/consult/qacon',{
27 
				data:{"consultId":consultId,"readStatus":"1"},
28 
				dataType:'json',//服务器返回json格式数据
29 
				type:'get',//HTTP请求类型
30 
				success:function(data){
31 
					myData = data.data;
32 
					ochatName.innerHTML = myData["professor"]["name"];
33 
					var consultTitle = '关于'+myData["consultTitle"]+"的咨询";
34 
					oconsultTitle.innerHTML = consultTitle;
35 
					//我的需求进行中
36 
					if(myData["consultStatus"] == 0){
37 
						oconfirmBtn.style.display = 'block';//我的需求，进行中
38 
						ochatFooter.style.display = 'block';
39 
					}else {
40 
						if(myData["assessStatus"] == 0){
41 
							oassessBtn.style.display = 'block';//我的需求，未评价
42 
						}else {
43 
							oassessed.style.display = 'block';//我的需求，已评价
44 
							//评价星级
45 
							console.log("我的需求已评价")
46 
							var starCount = myData["assessStar"];
47 
							for(var i=0;i<starCount;i++){
48 
								if(i < starCount){
49 
									nth(omy_starContainer,'.star',i+1)
50 
									.removeClass('icon-favor')
51 
									.addClass("icon-favorfill");
52 
								}
53 
							}
54
55 
						}
56 
					}
57
58 
				},
59 
				error:function(xhr,type,errorThrown){
60
61 
				}
62 
			});
63
64 
		}else if(manFlag == 'consult'){
65 
			mui.ajax(baseUrl+'/ajax/consult/qapro',{
66 
				data:{"consultId":consultId,"readStatus":"1"},
67 
				dataType:'json',//服务器返回json格式数据
68 
				type:'get',//HTTP请求类型
69 
				success:function(data){
70 
					myData = data.data;
71 
					ochatName.innerHTML = myData["professor"]["name"];
72 
					var consultTitle = '回复：关于'+myData["consultTitle"]+"的咨询";
73 
					oconsultTitle.innerHTML = consultTitle;
74 
					//收到咨询进行中
75 
					if(myData["consultStatus"] == 0){
76 
						owaying.style.display = 'block';
77 
						ochatFooter.style.display = 'block';
78 
					}else {//收到咨询已完成
79 
						if(myData["assessStatus"] == 0){//收到咨询未评价
80 
							othat_weiassess.style.display = 'block';
81 
						}else{//收到咨询已评价(评价星级和评价内容)
82 
							othat_assessed.style.display = 'block';
83 
							//评价星级
84 
							var starItem = [];
85 
							var starCount = myData["assessStar"];
86 
							for(var i = 0;i < starCount;i++){
87 
								if(i < starCount){
88 
//									console.log("收到咨询已评价");
89 
									/*starItem[i] = oconstarContainer.childNodes[i];
90 
									starItem[i].setAttribute('class','icon-favorfill');
91 
									oconstarContainer.childNodes[i].className = 'icon-favorfill';
92 
									oconstarContainer.childNodes[i].removeClassName = 'mui-icon iconfont icon-favor star';
93 
									console.log(oconstarContainer.childNodes[i].className)*/
94
95
96 
								}
97 
							}
98 
						}
99 
					}
100
101 
				},
102 
				error:function(xhr,type,errorThrown){
103
104 
				}
105 
			});
106
107 
		};
108 
	};
109
110 
	//对话内容保存
111 
	function saveChatFun(consultId,userid){
112 
		var tidingsContant = omsg_text.innerHTML
113 
		console.log(tidingsContant);
114 
		mui.ajax(baseUrl +'/ajax/tidings',{
115 
			data:{
116 
				"consultId":consultId,
117 
				"sendId":userid,
118 
				"tidingsContant":tidingsContant
119 
			},
120 
			dataType:'json',//服务器返回json格式数据
121 
			type:'post',//HTTP请求类型
122 
			success:function(data){
123 
				console.log(data);
124 
			},
125 
			error:function(xhr,type,errorThrown){
126
127 
			}
128 
		});
129 
	}
130
131
132
133 
	var MIN_SOUND_TIME = 800;
134 
	mui.init({
135 
		gestureConfig: {
136 
			tap: true, //默认为true
137 
			doubletap: true, //默认为false
138 
			longtap: true, //默认为false
139 
			swipe: true, //默认为true
140 
			drag: true, //默认为true
141 
			hold: true, //默认为false，不监听
142 
			release: true //默认为false，不监听
143 
		}
144 
	});
145 
	template.config('escape', false);
146 
	//mui.plusReady=function(fn){fn();};
147 
	mui.plusReady(function() {
148
149 
		var userid = plus.storage.getItem('userid');
150 
		var self = plus.webview.currentWebview();
151 
		var consultId = self.consultId;
152 
//		var manFlag = self.manFlag;
153 
		var consultantId = self.consultantId;
154 
		console.log(consultId);
155 
//		console.log(manFlag);
156 
		console.log('userid'+userid);
157 
		console.log('consultantId'+consultantId);
158 
		if(userid == consultantId){//我的需求
159 
			//头部信息
160 
			var manFlag = 'myNeed';
161 
			getHeadInfo(manFlag,consultId);
162 
		}else {//收到咨询
163 
			//头部信息
164 
			var manFlag = 'consult';
165 
			getHeadInfo(manFlag,consultId);
166 
		}
167
168
169 
		plus.webview.currentWebview().setStyle({
170 
			softinputMode: "adjustResize"
171 
		});
172 
		var showKeyboard = function() {
173 
			if (mui.os.ios) {
174 
				var webView = plus.webview.currentWebview().nativeInstanceObject();
175 
				webView.plusCallMethod({
176 
					"setKeyboardDisplayRequiresUserAction": false
177 
				});
178 
			} else {
179 
				var Context = plus.android.importClass("android.content.Context");
180 
				var InputMethodManager = plus.android.importClass("android.view.inputmethod.InputMethodManager");
181 
				var main = plus.android.runtimeMainActivity();
182 
				var imm = main.getSystemService(Context.INPUT_METHOD_SERVICE);
183 
				imm.toggleSoftInput(0, InputMethodManager.SHOW_FORCED);
184 
				//var view = ((ViewGroup)main.findViewById(android.R.id.content)).getChildAt(0);
185 
				imm.showSoftInput(main.getWindow().getDecorView(), InputMethodManager.SHOW_IMPLICIT);
186 
				//alert("ll");
187 
			}
188 
		};
189
190 
		var record = [{
191 
			sender: 'zs',
192 
			type: 'text',
193 
			content: 'Hi，我是 科袖 小管家！'
194 
		}];
195 
		//根据咨询id查询消息
196 
		mui.ajax(baseUrl+'/ajax/tidings/qacon',{
197 
			data:{
198 
				"consultId":consultId
199 
			},
200 
			dataType:'json',//服务器返回json格式数据
201 
			type:'get',//HTTP请求类型
202 
			success:function(data){
203 
				var myData = data.data;
204 
				for(var i = 0; i < myData.length; i++ ){
205 
					if(data.data[i]['professor']['id'] == userid){
206 
						record.push({
207 
							sender: 'self',
208 
							type: 'text',
209 
							content: data.data[i]["tidingsContant"]
210 
						});
211 
					}else{
212 
						record.push({
213 
							sender: 'zs',
214 
							type: 'text',
215 
							content: data.data[i]["tidingsContant"]
216 
						});
217 
					}
218 
				}
219 
				bindMsgList();
220 
			},
221 
			error:function(xhr,type,errorThrown){
222 
				//根据消息id查询消息失败
223 
			}
224 
		});
225
226
227
228 
		var ui = {
229 
			body: document.querySelector('body'),
230 
			footer: document.querySelector('footer'),
231 
			footerRight: document.querySelector('.footer-right'),
232 
			footerLeft: document.querySelector('.footer-left'),
233 
			btnMsgType: document.querySelector('#msg-type'),
234 
			boxMsgText: document.querySelector('#msg-text'),
235 
			boxMsgSound: document.querySelector('#msg-sound'),
236 
			btnMsgImage: document.querySelector('#msg-image'),
237 
			areaMsgList: document.querySelector('#msg-list'),
238 
			boxSoundAlert: document.querySelector('#sound-alert'),
239 
			h: document.querySelector('#h'),
240 
			content: document.querySelector('.mui-content')
241 
		};
242 
		ui.h.style.width = ui.boxMsgText.offsetWidth+'px';
243 
		//alert(ui.boxMsgText.offsetWidth );
244 
		var footerPadding = ui.footer.offsetHeight - ui.boxMsgText.offsetHeight;
245 
		var msgItemTap = function(msgItem, event) {
246 
			var msgType = msgItem.getAttribute('msg-type');
247 
			var msgContent = msgItem.getAttribute('msg-content')
248 
			if (msgType == 'sound') {
249 
				player = plus.audio.createPlayer(msgContent);
250 
				var playState = msgItem.querySelector('.play-state');
251 
				playState.innerText = '正在播放...';
252 
				player.play(function() {
253 
					playState.innerText = '点击播放';
254 
				}, function(e) {
255 
					playState.innerText = '点击播放';
256 
				});
257 
			}
258 
		};
259 
		var imageViewer = new mui.ImageViewer('.msg-content-image', {
260 
			dbl: false
261 
		});
262 
		var bindMsgList = function() {
263 
			//绑定数据:
264 
			/*tp.bind({
265 
				template: 'msg-template',
266 
				element: 'msg-list',
267 
				model: record
268 
			});*/
269 
			ui.areaMsgList.innerHTML = template('msg-template', {
270 
				"record": record
271 
			});
272 
			var msgItems = ui.areaMsgList.querySelectorAll('.msg-item');
273 
			[].forEach.call(msgItems, function(item, index) {
274 
				item.addEventListener('tap', function(event) {
275 
					msgItemTap(item, event);
276 
				}, false);
277 
			});
278 
			imageViewer.findAllImage();
279 
			ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight +  ui.areaMsgList.offsetHeight;
280 
		};
281 
		bindMsgList();
282 
		window.addEventListener('resize', function() {
283 
			ui.areaMsgList.scrollTop = ui.areaMsgList.scrollHeight +  ui.areaMsgList.offsetHeight;
284 
		}, false);
285 
		var send = function(msg) {
286 
			record.push(msg);
287 
			bindMsgList();
288 
			toRobot(msg.content);
289 
		};
290 
		var toRobot = function(info) {
291 
// 						var apiUrl = 'http://www.tuling123.com/openapi/api';
292 
//			var apiUrl = baseUrl+'/ajax/tidings/qacon';//根据咨询id查询对话消息
293 
			var apiUrl = baseUrl+"/ajax/tidings";//保存消息接口
294
295 
			mui.ajax(apiUrl,{
296 
				data:{
297 
					"tidingsContant":ui.boxMsgText.value, //消息内容
298 
				    "senderId":userid, //发送者ID
299 
				    "consultId":consultId //咨询ID
300 
				},
301 
				dataType:'json',//服务器返回json格式数据
302 
				type:'post',//HTTP请求类型
303 
				success:function(data){
304 
					console.log('消息成功'+data.data);
305 
					//alert(JSON.stringify(data));
306 
				},
307 
				error:function(xhr,type,errorThrown){
308 
					//保存消息失败
309 
				}
310 
			});
311
312 
		};
313 
		function msgTextFocus() {
314 
				ui.boxMsgText.focus();
315 
				setTimeout(function() {
316 
					ui.boxMsgText.focus();
317 
				}, 150);
318 
			}
319 
			//解决长按“发送”按钮，导致键盘关闭的问题；
320 
		ui.footerRight.addEventListener('touchstart', function(event) {
321 
			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
322 
				msgTextFocus();
323 
				event.preventDefault();
324 
			}
325 
		});
326 
		//解决长按“发送”按钮，导致键盘关闭的问题；
327 
		ui.footerRight.addEventListener('touchmove', function(event) {
328 
			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
329 
				msgTextFocus();
330 
				event.preventDefault();
331 
			}
332 
		});
333 
		//					ui.footerRight.addEventListener('touchcancel', function(event) {
334 
		//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
335 
		//							msgTextFocus();
336 
		//							event.preventDefault();
337 
		//						}
338 
		//					});
339 
		//					ui.footerRight.addEventListener('touchend', function(event) {
340 
		//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
341 
		//							msgTextFocus();
342 
		//							event.preventDefault();
343 
		//						}
344 
		//					});
345 
		ui.footerRight.addEventListener('release', function(event) {
346 
			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {//发送
347 
				//showKeyboard();
348 
				ui.boxMsgText.focus();
349 
				setTimeout(function() {
350 
					ui.boxMsgText.focus();//获取焦点
351 
				}, 150);
352 
				//							event.detail.gesture.preventDefault();
353 
				send({
354 
					sender: 'self',
355 
					type: 'text',
356 
					content: ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '<br/>')
357 
				});
358 
				ui.boxMsgText.value = '';
359 
				mui.trigger(ui.boxMsgText, 'input', null); //发送消息向后台传数据
360 
			} else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {//说话
361 
				ui.btnMsgType.classList.add('mui-icon-compose');
362 
				ui.btnMsgType.classList.remove('mui-icon-mic');
363 
				ui.boxMsgText.style.display = 'none';
364 
				ui.boxMsgSound.style.display = 'block';
365 
				ui.boxMsgText.blur();
366 
				document.body.focus();
367 
			} else if (ui.btnMsgType.classList.contains('mui-icon-compose')) {//编辑
368 
				ui.btnMsgType.classList.add('mui-icon-mic');
369 
				ui.btnMsgType.classList.remove('mui-icon-compose');
370 
				ui.boxMsgSound.style.display = 'none';
371 
				ui.boxMsgText.style.display = 'block';
372 
				//--
373 
				//showKeyboard();
374 
				ui.boxMsgText.focus();
375 
				setTimeout(function() {
376 
					ui.boxMsgText.focus();
377 
				}, 150);
378 
			}
379 
		}, false);
380 
		ui.footerLeft.addEventListener('tap', function(event) {
381 
			var btnArray = [{
382 
				title: "拍照"
383 
			}, {
384 
				title: "从相册选择"
385 
			}];
386 
			plus.nativeUI.actionSheet({
387 
				title: "选择照片",
388 
				cancel: "取消",
389 
				buttons: btnArray
390 
			}, function(e) {
391 
				var index = e.index;
392 
				switch (index) {
393 
					case 0:
394 
						break;
395 
					case 1:
396 
						var cmr = plus.camera.getCamera();
397 
						cmr.captureImage(function(path) {
398 
							send({
399 
								sender: 'self',
400 
								type: 'image',
401 
								content: "file://" +  plus.io.convertLocalFileSystemURL(path)
402 
							});
403 
						}, function(err) {});
404 
						break;
405 
					case 2:
406 
						plus.gallery.pick(function(path) {
407 
							send({
408 
								sender: 'self',
409 
								type: 'image',
410 
								content: path
411 
							});
412 
						}, function(err) {}, null);
413 
						break;
414 
				}
415 
			});
416 
		}, false);
417 
		var setSoundAlertVisable=function(show){
418 
			if(show){
419 
				ui.boxSoundAlert.style.display = 'block';
420 
				ui.boxSoundAlert.style.opacity = 1;
421 
			}else{
422 
				ui.boxSoundAlert.style.opacity = 0;
423 
				//fadeOut完成再真正隐藏
424 
				setTimeout(function(){
425 
					ui.boxSoundAlert.style.display = 'none';
426 
				},200);
427 
			}
428 
		};
429 
		var recordCancel = false;
430 
		var recorder = null;
431 
		var audio_tips = document.getElementById("audio_tips");
432 
		var startTimestamp = null;
433 
		var stopTimestamp = null;
434 
		var stopTimer = null;
435 
		ui.boxMsgSound.addEventListener('hold', function(event) {
436 
			recordCancel = false;
437 
			if(stopTimer)clearTimeout(stopTimer);
438 
			audio_tips.innerHTML = "手指上划，取消发送";
439 
			ui.boxSoundAlert.classList.remove('rprogress-sigh');
440 
			setSoundAlertVisable(true);
441 
			recorder = plus.audio.getRecorder();
442 
			if (recorder == null) {
443 
				plus.nativeUI.toast("不能获取录音对象");
444 
				return;
445 
			}
446 
			startTimestamp = (new Date()).getTime();
447 
			recorder.record({
448 
				filename: "_doc/audio/"
449 
			}, function(path) {
450 
				if (recordCancel) return;
451 
				send({
452 
					sender: 'self',
453 
					type: 'sound',
454 
					content: path
455 
				});
456 
			}, function(e) {
457 
				plus.nativeUI.toast("录音时出现异常: " +  e.message);
458 
			});
459 
		}, false);
460 
		ui.body.addEventListener('drag', function(event) {
461 
			//console.log('drag');
462 
			if (Math.abs(event.detail.deltaY) > 50) {
463 
				if (!recordCancel) {
464 
					recordCancel = true;
465 
					if (!audio_tips.classList.contains("cancel")) {
466 
						audio_tips.classList.add("cancel");
467 
					}
468 
					audio_tips.innerHTML = "松开手指，取消发送";
469 
				}
470 
			} else {
471 
				if (recordCancel) {
472 
					recordCancel = false;
473 
					if (audio_tips.classList.contains("cancel")) {
474 
						audio_tips.classList.remove("cancel");
475 
					}
476 
					audio_tips.innerHTML = "手指上划，取消发送";
477 
				}
478 
			}
479 
		}, false);
480 
		ui.boxMsgSound.addEventListener('release', function(event) {
481 
			//console.log('release');
482 
			if (audio_tips.classList.contains("cancel")) {
483 
				audio_tips.classList.remove("cancel");
484 
				audio_tips.innerHTML = "手指上划，取消发送";
485 
			}
486 
			//
487 
			stopTimestamp = (new Date()).getTime();
488 
			if (stopTimestamp - startTimestamp < MIN_SOUND_TIME) {
489 
				audio_tips.innerHTML = "录音时间太短";
490 
				ui.boxSoundAlert.classList.add('rprogress-sigh');
491 
				recordCancel = true;
492 
				stopTimer=setTimeout(function(){
493 
					setSoundAlertVisable(false);
494 
				},800);
495 
			}else{
496 
				setSoundAlertVisable(false);
497 
			}
498 
			recorder.stop();
499 
		}, false);
500 
		ui.boxMsgSound.addEventListener("touchstart", function(e) {
501 
			//console.log("start....");
502 
			e.preventDefault();
503 
		});
504 
		ui.boxMsgText.addEventListener('input', function(event) {
505 
			ui.btnMsgType.classList[ui.boxMsgText.value == '' ? 'remove' : 'add']('mui-icon-paperplane');
506 
						ui.btnMsgType.setAttribute("for", ui.boxMsgText.value == '' ? '' : 'msg-text');
507 
						ui.h.innerText = ui.boxMsgText.value.replace(new RegExp('\n', 'gm'), '\n-') || '-';
508 
						ui.footer.style.height = (ui.h.offsetHeight +  footerPadding) +  'px';
509 
						ui.content.style.paddingBottom = ui.footer.style.height;
510
511 
		});
512 
		ui.boxMsgText.addEventListener('tap', function(event) {
513 
			ui.boxMsgText.focus();
514 
			setTimeout(function() {
515 
				ui.boxMsgText.focus();
516 
			}, 0);
517 
		}, false);
518 
	});
519 
//			}(mui, document));
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535 
})

+ 314 - 0
app/js/consultlist.js
View File

1 
//咨询
2 
mui.ready(function() {
3
4
5 
	mui.plusReady(function(){
6 
		var userid = plus.storage.getItem('userid');
7 
		var listContainer = document.getElementById("listContainer");//
8
9 
		var consultStr = getConsultData(userid,0,0,0);
10 
		var myNeedStr = getMyNeedData(userid,0,0,0);
11 
		var allStr = allData(userid,0,0,1);
12 
		listContainer.innerHTML = consultStr + myNeedStr;
13 
//		listContainer.innerHTML = allStr;
14
15 
		/*收到咨询*/
16 
		function getConsultData(userid,status,timeType,sortType){
17 
			var consultStr;
18 
			var params = {
19 
			    "professorId":userid, //专家ID
20 
			    "status":status, //查询状态 0-全部，1-进行中，2-未感谢，3-未评价，4-已完成， 可以不传，默认为0
21 
			    "timeType":timeType, //排序类型 0-按发起时间，1-按最后回复时间，2-按完成时间 默认为0
22 
			    "sortType":sortType
23 
			};
24 
			mui.ajax(baseUrl +"/ajax/consult/pqPro",{
25 
				data:params,
26 
				dataType:'json',//服务器返回json格式数据
27 
				async:false,
28 
				type:'get',//HTTP请求类型
29 
				success:function(data){
30
31 
					if(!data.data.data){
32 
						return false;
33 
					}else{
34 
						var myData = data.data.data;
35 
						consultStr = handleData(userid,myData,'consult');
36 
					}
37
38 
				},
39 
				error:function(xhr,type,errorThrown){
40
41 
				}
42 
			});
43 
			return consultStr;
44
45 
		};
46
47 
		/*我的需求*/
48 
		function getMyNeedData(userid,status,timeType,sortType){
49 
			var myNeedStr;
50 
			var params = {
51 
			    "consultantId":userid, //专家ID
52 
			    "status":status, //查询状态 0-全部，1-进行中，2-未感谢，3-未评价，4-已完成， 可以不传，默认为0
53 
			    "timeType":timeType, //排序类型 0-按发起时间，1-按最后回复时间，2-按完成时间 默认为0
54 
			    "sortType":sortType
55 
			};
56 
			mui.ajax(baseUrl +"/ajax/consult/pqCon",{
57 
				data:params,
58 
				dataType:'json',//服务器返回json格式数据
59 
				async:false,
60 
				type:'get',//HTTP请求类型
61 
				success:function(data){
62 
//					console.log(data);
63 
					if(!data.data){
64 
						return false;
65 
					}else{
66 
						var myData = data.data.data;
67 
						myNeedStr = handleData(userid,myData,'myNeed');
68
69 
					}
70
71 
				},
72 
				error:function(xhr,type,errorThrown){
73
74 
				}
75 
			});
76
77 
			return myNeedStr;
78 
		};
79
80 
		//全部
81 
		function allData(userid,consultOrNeed,status,timeType) {
82 
			var allStr;
83 
			var params = {
84 
					"professorId":userid, //专家ID
85 
				    "consultOrNeed":consultOrNeed, //接受咨询或咨询别人的状态值，0-全部，1-别人咨询我的，2-我咨询别人的 默认为0
86 
				    "status":status, //查询状态 0-全部，1-进行中，2-未感谢，3-未评价，4-已完成， 可以不传，默认为0
87 
				    "timeType":timeType, //排序类型 0-按发起时间正序，1-按最后回复时间倒序，2-按完成时间倒序 默认为1
88 
				    "pageSize":"", //每页记录数 默认为5
89 
				    "pageNo":"" //当前页码 默认为1
90 
			    };
91 
			mui.ajax(baseUrl +'/ajax/consult/pq',{
92 
				data:params,
93 
				dataType:'json',//服务器返回json格式数据
94 
				type:'get',//HTTP请求类型
95 
				async:false,
96 
				success:function(data){
97 
					if(!data.data){
98 
						return false;
99 
					}else{
100 
						var myData = data.data.data;
101 
						allStr = handleData(userid,myData,'all');
102 
					}
103 
				},
104 
				error:function(xhr,type,errorThrown){
105
106 
				}
107 
			});
108
109 
			return allStr;
110 
		}
111
112
113 
		/*咨询数据处理*/
114 
		function handleData(userid,data,manFlag) {
115 
			var htmlStr = '';
116 
			for(var i = 0; i < data.length;i++){
117 
				var title,
118 
					zhicehng,
119 
					zhiwei,
120 
					address,
121 
					lastReply,
122 
					status,
123 
					lastReplyTime,
124 
					lastReplyCon,
125 
					unreadCount,
126 
					unreadStyle,
127 
					proModify;
128 
				//咨询类型和状态
129 
				if(manFlag == "consult") {
130 
					title = "回复:关于" + data[i]["consultTitle"] + "的咨询";
131 
					if(data[i]["consultStatus"] == 0){
132 
						status = "进行中";
133 
					}else if(data[i]["consultStatus"] == 1){
134 
						status = "已完成";
135 
					}
136 
				}else if(manFlag == "myNeed"){
137 
					title = "关于" + data[i]["consultTitle"] + "的咨询";
138 
					if(data[i]["consultStatus"] == 0){
139 
						status = "进行中";
140 
					}else if(data[i]["consultStatus"] == 1){
141 
						if(data[i]["assessStatus"] == 0){
142 
							status = '待评价';
143 
						}
144 
					}
145 
				}else if(manFlag == "all"){
146
147 
					if(data[i]['professorId'] == userid){//收到咨询
148 
						title = "回复:关于" + data[i]["consultTitle"] + "的咨询";
149 
						if(data[i]["consultStatus"] == 0){
150 
							status = "进行中";
151 
						}else if(data[i]["consultStatus"] == 1){
152 
							status = "已完成";
153 
						}
154 
					}else if(data[i]['consultantId'] == userid){//我的需求
155 
						title = "关于" + data[i]["consultTitle"] + "的咨询";
156 
						if(data[i]["consultStatus"] == 0){
157 
							status = "进行中";
158 
						}else if(data[i]["consultStatus"] == 1){
159 
							if(data[i]["assessStatus"] == 0){
160 
								status = '待评价';
161 
							}
162 
						}
163 
					}
164 
				}
165
166
167
168 
				//专家职称
169 
				if(!data[i]["professor"]["title"]){
170 
					zhicehng = '';
171 
				}else {
172 
					zhicehng = data[i]["professor"]["title"]+'，';
173 
				}
174 
				//专家职位
175 
				if(!data[i]["professor"]["office"]){
176 
					zhiwei = '';
177 
				}else {
178 
					zhiwei = data[i]["professor"]["office"] + '，';
179 
				}
180 
				//专家所在地
181 
				if(!data[i]["professor"]["address"]){
182 
					address = '';
183 
				}else {
184 
					address = '|'+ data[i]["professor"]["address"];
185 
				}
186 
				//专家认证
187 
				if(data[i]["professor"]["authentication" == true]){
188 
					proModify = 'authicon';
189 
				}else {
190 
					proModify = 'unauthicon';
191 
				}
192
193
194 
				//最后回复
195 
				lastReplyTime = lastReplyFn(userid,data[i]["consultId"]).lastReplyTime;
196 
				lastReplyCon = lastReplyFn(userid,data[i]["consultId"]).lastReplyCon;
197
198 
				if(lastReplyCon == undefined){
199 
					lastReplyCon = '';
200 
				}
201 
				if(lastReplyTime == undefined){
202 
					lastReplyTime = '';
203 
				}
204 
				//未读消息
205 
				unreadCount = unreadConsultFn(userid,data[i]["consultId"],i).unreadCount;
206 
				unreadStyle = unreadConsultFn(userid,data[i]["consultId"],i).style;
207
208
209 
				htmlStr += '<li class="mui-table-view-cell mui-media"><div class="coutopicbox">';
210 
	            htmlStr += '<span class="coutheme mui-ellipsis mui-pull-left">'+title+'</span>';
211 
	            htmlStr += '<div class="coustatus mui-pull-right"><span class="aimlabel">'+data[i]["consultType"]+'</span>';
212 
	            htmlStr += '<span class="status-1">'+status+'</span></div></div>';
213 
	            htmlStr += '<a class="proinfor itemBtn" consultId="'+data[i]["consultId"]+'" consultantId="'+data[i]["consultantId"]+'"  manFlag="'+manFlag+'">';
214 
				htmlStr += '<span class="mui-badge mui-badge-danger" style="'+unreadStyle+'">'+unreadCount+'</span>';
215 
		        htmlStr += '<img class="mui-media-object mui-pull-left headimg" src="../images/default-photo.jpg">';
216 
	            htmlStr += '<div class="mui-media-body">';
217 
	            htmlStr += '<span class="listtit">'+data[i]["professor"]["name"]+'<em class="mui-icon iconfont icon-vip '+proModify+'"></em><span class="thistime">'+lastReplyTime+'</span></span>';
218 
	            htmlStr += '<p class="listtit2"><span>'+zhicehng+'</span><span>'+zhiwei+'</span><span>'+data[i]["professor"]["orgName"]+'</span><span>'+address+'</span></p>';
219 
	            htmlStr += '<p class="listtit3">'+lastReplyCon+'</p>';
220 
	            htmlStr += '</div></a></li>';
221
222 
	            mui("#listContainer").on('tap','.itemBtn',function(){
223 
//					console.log(this.getAttribute("consultId"));
224 
					 mui.openWindow({
225 
						id:'chats',
226 
					    url:'chats.html',
227 
					    extras:{
228 
					    	'manFlag':this.getAttribute("manFlag"),
229 
					    	'consultId':this.getAttribute("consultId"),//自定义扩展参数，可以用来处理页面间传值
230 
					    	'consultantId':this.getAttribute("consultantId")//咨询者id
231 
					    }
232 
					});
233 
				});
234
235
236 
			};
237
238 
			return htmlStr;
239 
		};
240
241 
		/*最后回复*/
242 
		function lastReplyFn(sendId,consultId){
243 
			var lastReplyTimeData,lastReplyTime,lastReplyCon;
244 
			mui.ajax(baseUrl + '/ajax/tidings/qaLastRevovery',{
245 
				data:{
246 
					"consultId":consultId, //咨询ID
247 
				    "senderId":sendId //登录者ID
248 
				},
249 
				dataType:'json',//服务器返回json格式数据
250 
				type:'get',//HTTP请求类型
251 
				async:false,
252 
				success:function(data){
253 
					/*console.log(data);*/
254 
					if(data["data"] == null || data["data"] == "" || data["data"] == undefined){
255 
						lastReplyTimeData = '';
256 
						lastReplyTime = '';
257 
						lastReplyCon = '';
258 
					}
259 
					else{
260 
						lastReplyTimeData = data["data"]["createTime"];
261 
						lastReplyTime =lastReplyTimeData.substr(0,4) + "-" + lastReplyTimeData.substr(4,2) + "-" + lastReplyTimeData.substr(6,2) + " " + lastReplyTimeData.substr(8,2)+ ":" +lastReplyTimeData.substr(10,2);
262 
						lastReplyCon = data["data"]["tidingsContant"];
263 
						/*console.log(lastReplyTime);*/
264 
					}
265 
				},
266 
				error:function(xhr,type,errorThrown){
267
268 
				}
269 
			});
270 
			return  {
271 
				"lastReplyTime":lastReplyTime,
272 
				"lastReplyCon":lastReplyCon
273 
			};
274 
		};
275 
		/*未读消息*/
276 
		function unreadConsultFn (senderId,consultId,i){
277 
			var unreadCount,style;
278 
			mui.ajax(baseUrl +'/ajax/tidings/qaNotReadTidings',{
279 
				data:{
280 
					"senderId":senderId, //发送者ID
281 
					"consultId":consultId //咨询ID
282 
				},
283 
				dataType:'json',//服务器返回json格式数据
284 
				type:'get',//HTTP请求类型
285 
				async:false,
286 
				success:function(data){
287 
					unreadCount = data["data"];
288 
					if(unreadCount == 0){
289 
						style = "display:none;"
290 
					}else{
291 
						style = "display:block;"
292
293 
					}
294 
				},
295 
				error:function(xhr,type,errorThrown){
296
297 
				}
298 
			});
299
300 
			return {"unreadCount":unreadCount,
301 
					"style":style
302 
			}
303 
		};
304
305
306
307
308
309
310
311
312
313 
	});
314 
});