Просмотр исходного кода

1.iOS聊天标题信息显示bug
2.咨询下拉刷新,过渡卡住bug

wangaidan лет назад: 8
Родитель
Сommit
941ef969fb
4 измененных файлов с 251 добавлено и 31 удалено
  1. 185 9
      app/html/chats.html
  2. 40 4
      app/html/consultlist.html
  3. 21 15
      app/js/chats.js
  4. 5 3
      app/js/consult.js

+ 185 - 9
app/html/chats.html

@ -29,6 +29,7 @@
29 29
				overflow: hidden;
30 30
				padding: 0px 50px;
31 31
				background-color: #fafafa;
32
				padding-left: 5px;
32 33
			}
33 34
			.footer-left {
34 35
				position: absolute;
@ -81,10 +82,15 @@
81 82
 				background-color: #eaeaea;
82 83
 			}
83 84
 			#msg-list {
84
 				height: 83%;
85
 				height: 80%;
85 86
 				overflow: auto;
86 87
 				-webkit-overflow-scrolling: touch;
87 88
 			}
89
 			/*设置聊天框离顶部距离*/
90
 			#msg-list >:first-child {
91
 				padding-top: 15px;
92
 			}
93
 			
88 94
 			.msg-item {
89 95
 				padding: 8px;
90 96
 				clear: both;
@ -316,14 +322,23 @@
316 322
 				color: #fff;
317 323
 			}
318 324
 			/*待评价结束*/
325
 			/*折叠的咨询内容样式*/
326
 			.collapseCon#mui-active {
327
 				padding: 10px 2px; 
328
 				background-color:#fff;
329
 				border-top:1px solid #f0f0f0;
330
 				border-top:1px solid #f0f0f0;
331
 			}
319 332
 		</style>
320 333
 	</head>
321 334
  	<body contextmenu="return false;">
322
 		<header class="mui-bar mui-bar-nav toptitbox">
335
 		<header class="mui-bar mui-bar-nav toptitbox" style="z-index: 999;">
323 336
 			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback" id="backBtn">
324 337
 				<a href="consultlist.html"></a>
325 338
 			</span>
326
 			<h1 class="mui-title toptit" id="chatName"></h1>
339
 			<h1 class="mui-title toptit" id="chatName">
340
 				
341
 			</h1>
327 342
 			<!--<span class="mui-icon mui-icon-contact mui-pull-right personhead"></span>-->
328 343
 		</header>
329 344
 		<pre id='h'></pre>
@ -391,7 +406,7 @@
391 406
				</div>
392 407
				<!--收到咨询,进行中-->
393 408
				<div class="operatebtnbox mui-pull-right displayNone" id="waying" style="width:30%;">
394
					<!--<div class="evabox"><span>进行中</span></div>-->
409
					<div class="evabox"><span>进行中</span></div>
395 410
				</div>
396 411
				<!--收到咨询,对方已评价-->
397 412
				<div class="operatebtnbox mui-pull-right operated displayNone" id="that_assessed" style="cursor: pointer;">
@ -412,11 +427,9 @@
412 427
 			
413 428
 			<div class="consult_content">
414 429
 				<ul class="mui-table-view" >
415
	 				<li class="mui-table-view-cell mui-collapse" id="mui-active" style="background-color:#fff;border-top:1px solid #f0f0f0;border-top:1px solid #f0f0f0;">
430
	 				<li class="mui-table-view-cell mui-collapse collapseCon" id="mui-active" style="">
416 431
	 					<div class="mui-collapse-content" id="consultCon">
417
							可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,
418
							只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可;mui官网中的方法说明,
419
							使用的就是折叠面板控件。
432
							
420 433
						</div>
421 434
						<a class="mui-navigate-right" href="#" id="lookConBtn">查看咨询内容</a>
422 435
					</li>
@ -427,10 +440,173 @@
427 440
 			
428 441
 			<div id='msg-list'> 
429 442
 				
443
 				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
444
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
445
					<div class="msg-content">
446
						<div class="msg-content-inner">
447
							niahidhfd
448
						</div>
449
						<div class="msg-content-arrow"></div>
450
					</div>
451
					<div class="mui-item-clear"></div>
452
					
453
				</div>
454
				
455
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
456
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
457
					<div class="msg-content">
458
						<div class="msg-content-inner">
459
							niahidhfd
460
						</div>
461
						<div class="msg-content-arrow"></div>
462
					</div>
463
					<div class="mui-item-clear"></div>
464
					
465
				</div>
466
				
467
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
468
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
469
					<div class="msg-content">
470
						<div class="msg-content-inner">
471
							niahidhfd
472
						</div>
473
						<div class="msg-content-arrow"></div>
474
					</div>
475
					<div class="mui-item-clear"></div>
476
					
477
				</div>
478
				
479
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
480
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
481
					<div class="msg-content">
482
						<div class="msg-content-inner">
483
							niahidhfd
484
						</div>
485
						<div class="msg-content-arrow"></div>
486
					</div>
487
					<div class="mui-item-clear"></div>
488
					
489
				</div>
490
				
491
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
492
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
493
					<div class="msg-content">
494
						<div class="msg-content-inner">
495
							niahidhfd
496
						</div>
497
						<div class="msg-content-arrow"></div>
498
					</div>
499
					<div class="mui-item-clear"></div>
500
					
501
				</div>
502
				
503
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
504
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
505
					<div class="msg-content">
506
						<div class="msg-content-inner">
507
							niahidhfd
508
						</div>
509
						<div class="msg-content-arrow"></div>
510
					</div>
511
					<div class="mui-item-clear"></div>
512
					
513
				</div>
514
				
515
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
516
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
517
					<div class="msg-content">
518
						<div class="msg-content-inner">
519
							niahidhfd
520
						</div>
521
						<div class="msg-content-arrow"></div>
522
					</div>
523
					<div class="mui-item-clear"></div>
524
					
525
				</div>
526
				
527
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
528
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
529
					<div class="msg-content">
530
						<div class="msg-content-inner">
531
							niahidhfd
532
						</div>
533
						<div class="msg-content-arrow"></div>
534
					</div>
535
					<div class="mui-item-clear"></div>
536
					
537
				</div>
538
				
539
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
540
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
541
					<div class="msg-content">
542
						<div class="msg-content-inner">
543
							niahidhfd
544
						</div>
545
						<div class="msg-content-arrow"></div>
546
					</div>
547
					<div class="mui-item-clear"></div>
548
					
549
				</div>
550
				
551
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
552
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
553
					<div class="msg-content">
554
						<div class="msg-content-inner">
555
							niahidhfd
556
						</div>
557
						<div class="msg-content-arrow"></div>
558
					</div>
559
					<div class="mui-item-clear"></div>
560
					
561
				</div>
562
				
563
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
564
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
565
					<div class="msg-content">
566
						<div class="msg-content-inner">
567
							niahidhfd
568
						</div>
569
						<div class="msg-content-arrow"></div>
570
					</div>
571
					<div class="mui-item-clear"></div>
572
					
573
				</div>
574
				
575
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
576
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
577
					<div class="msg-content">
578
						<div class="msg-content-inner">
579
							niahidhfd
580
						</div>
581
						<div class="msg-content-arrow"></div>
582
					</div>
583
					<div class="mui-item-clear"></div>
584
					
585
				</div>
586
				
587
				<div class="msg-item msg-item-self" msg-type = 'text' msg-content = '安徽'>
588
					<img class="msg-user msg-user-img" src="../images/default-photo.jpg" alt="" id="selfImg"/>
589
					<div class="msg-content">
590
						<div class="msg-content-inner">
591
							niahidhfd
592
						</div>
593
						<div class="msg-content-arrow"></div>
594
					</div>
595
					<div class="mui-item-clear"></div>
596
					
597
				</div>
598
 				
599
 				
600
 				
601
 				
602
 				
603
 				
604
 				
605
 				
430 606
 			</div>
431 607
 		</div>
432 608
 		
433
 		<footer class="" id="chatFooter">
609
 		<footer class="displayNone" id="chatFooter">
434 610
 			<!--<div class="footer-left">
435 611
 				<i id='msg-image' class="mui-icon mui-icon-camera" style="font-size: 28px;"></i>
436 612
 			</div>-->

+ 40 - 4
app/html/consultlist.html

@ -115,8 +115,8 @@
115 115
				overflow: hidden;
116 116
			}
117 117
			.mui-pull-top-tips.mui-transitioning {
118
				-webkit-transition-duration: 200ms;
119
				transition-duration: 200ms;
118
				-webkit-transition-duration: 500ms;
119
				transition-duration: 500ms;
120 120
			}
121 121
			.mui-pull-top-tips .mui-pull-loading {
122 122
				/*-webkit-backface-visibility: hidden;
@ -162,7 +162,7 @@
162 162
 
163 163
</head>
164 164
<body>
165
165
	
166 166
	<!-- 主页面标题 -->
167 167
	<header class="mui-bar mui-bar-nav toptitbox" style="position: fixed;top: 0;">
168 168
	    <h1 class="mui-title toptit">咨询</h1>
@ -210,7 +210,43 @@
210 210
						<div class="mui-scroll">
211 211
							<ul class="mui-table-view" id="table">
212 212
								
213
								
213
								<!--<li class="mui-table-view-cell mui-media">
214

215
									<div class="coutopicbox"><span class="coutheme mui-ellipsis mui-pull-left">'+title+'</span>
216
										<div class="coustatus mui-pull-right"><span class="aimlabel">'+consultType+'</span>
217
											<span class="'+statusStyle+' status" consultId="'+item[" consultId "]+'">'+status+'</span></div>
218
									</div>
219
									<a class="proinfor itemBtn" consultId="'+item[" consultId "]+'" consultantId="'+item[" consultantId "]+'">
220
										<span class="mui-badge mui-badge-danger readstate displayNone" consultId="'+item[" consultId "]+'">'+unreadCount+'</span>
221
										<img class="mui-media-object mui-pull-left headimg headRadius" src="'+photoUrl+'">
222
										<div class="mui-media-body">
223
											<span class="listtit">高兴
224
									            <em  class="mui-icon iconfont icon-vip authicon-cu"></em>
225
									            <span class="thistime">样式1</span>
226
								
227
												<em  class="mui-icon iconfont icon-renzheng authicon-mana"><span>科研</span></em>
228
												<span class="thistime">样式2</span>
229
									
230
												<em  class="mui-icon iconfont icon-renzheng authicon-staff"><span>企业</span></em>
231
												<span class="thistime">样式3'</span>
232
									
233
												<em  class="mui-icon iconfont icon-renzheng authicon-stu"><span>学生</span></em>
234
												<span class="thistime">样式4</span>
235
								
236
											</span>
237
											<p class="listtit2">
238
												<span>'+item["professor"]["title"]+'</span>
239
								
240
												<span>'+item["professor"]["office"]+'</span>
241
												<span>'+item["professor"]["orgName"]+'</span>
242
												<span>  | '+item["professor"]["address"]+'</span>
243
											</p>
244
											<p class="listtit3 onlyone">'+lastReplyCon+'</p>
245
										</div>
246
									</a>
247
								
248
								</li>-->
249
				
214 250
								
215 251
							</ul>
216 252
						</div>

+ 21 - 15
app/js/chats.js

@ -1,4 +1,4 @@
1
mui.ready(function() {
1
//mui.ready(function() {
2 2
	var obackBtn = document.getElementById("backBtn");//返回按钮
3 3
	
4 4
	var oconsultTitle = document.getElementById("consultTitle");//咨询标题
@ -60,12 +60,15 @@ mui.ready(function() {
60 60
					oconsultCon.innerHTML = myData['consultContant'];
61 61
					//我的需求进行中
62 62
					if(myData["consultStatus"] == 0){
63
						ochatFooter.classList.remove('displayNone');
63 64
						oconfirm.classList.remove('displayNone');//我的需求,进行中
64 65
						ostatus.setAttribute('status','consultStatus='+myData["consultStatus"]);					
65 66
						clickConfirm(consultId);
66 67
67 68
					}else {
68
						ochatFooter.style.display = 'none';//对话底部隐藏
69
//						ochatFooter.style.display = 'none';;//对话底部隐藏
70
						
71
						
69 72
						if(myData["assessStatus"] == 0){
70 73
							oassessBtn.classList.remove('displayNone');//我的需求,未评价
71 74
							ostatus.setAttribute('status','');
@ -111,10 +114,12 @@ mui.ready(function() {
111 114
					//收到咨询进行中
112 115
					if(myData["consultStatus"] == 0){
113 116
						owaying.classList.remove('displayNone');
114
//						ochatFooter.classList.remove('displayNone');
117
						ochatFooter.classList.remove('displayNone');
115 118
					}else {//收到咨询已完成
116
						ochatFooter.style.display = 'none';//对话底部隐藏
117
						if(myData["assessStatus"] == 0){//收到咨询未评价
119
						
120
//						ochatFooter.style.display = 'none';//对话底部隐藏
121
						
122
						if(myData["assessStatus"] == 0){//收到咨询未评价 
118 123
							othat_weiassess.classList.remove('displayNone');
119 124
						}else{//收到咨询已评价(评价星级和评价内容)
120 125
							othat_assessed.classList.remove('displayNone');
@ -486,17 +491,17 @@ mui.ready(function() {
486 491
			}
487 492
			//解决长按“发送”按钮,导致键盘关闭的问题;
488 493
		ui.footerRight.addEventListener('touchstart', function(event) {
489
//			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
494
			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
490 495
				msgTextFocus();
491
//				event.preventDefault();
492
//			}
496
				event.preventDefault();
497
			}
493 498
		});
494 499
		//解决长按“发送”按钮,导致键盘关闭的问题;
495 500
		ui.footerRight.addEventListener('touchmove', function(event) {
496
//			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
501
			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
497 502
				msgTextFocus();
498
//				event.preventDefault();
499
//			}
503
				event.preventDefault();
504
			}
500 505
		});
501 506
		//					ui.footerRight.addEventListener('touchcancel', function(event) {
502 507
		//						if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {
@ -511,7 +516,7 @@ mui.ready(function() {
511 516
		//						}
512 517
		//					});
513 518
		ui.footerRight.addEventListener('release', function(event) {
514
//			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {//发送
519
			if (ui.btnMsgType.classList.contains('mui-icon-paperplane')) {//发送
515 520
				//showKeyboard();
516 521
				ui.boxMsgText.focus();
517 522
				setTimeout(function() {
@ -519,7 +524,7 @@ mui.ready(function() {
519 524
				}, 150);
520 525
				//							event.detail.gesture.preventDefault();
521 526
				//执行是否有头像
522
				console.log(getSelfImg(consultId,userid));
527
//				console.log(getSelfImg(consultId,userid));
523 528
				send({
524 529
					sender: 'self',
525 530
					type: 'text',
@ -528,7 +533,8 @@ mui.ready(function() {
528 533
				});
529 534
				ui.boxMsgText.value = '';
530 535
				mui.trigger(ui.boxMsgText, 'input', null); //发送消息向后台传数据
531
			/*} else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {//说话功能
536
			} 
537
			 /* else if (ui.btnMsgType.classList.contains('mui-icon-mic')) {//说话功能
532 538
				ui.btnMsgType.classList.add('mui-icon-compose');
533 539
				ui.btnMsgType.classList.remove('mui-icon-mic');
534 540
				ui.boxMsgText.style.display = 'none';
@ -689,4 +695,4 @@ mui.ready(function() {
689 695
	});
690 696
691 697
	
692
})
698
//})

+ 5 - 3
app/js/consult.js

@ -186,7 +186,7 @@ function pulldownRefresh(){
186 186
	
187 187
	mui.plusReady(function() { 
188 188
		var userid = plus.storage.getItem('userid');
189
		
189
//		plus.nativeUI.showWaiting();//显示原生等待框
190 190
		pageIndex = 1;
191 191
		mui.ajax(baseUrl + '/ajax/consult/pq',{
192 192
			data:{
@ -198,7 +198,7 @@ function pulldownRefresh(){
198 198
			    "pageSize":200, 
199 199
			    "pageNo":1 
200 200
			},
201
			async:false,
201
//			async:false,
202 202
			dataType:'json',//服务器返回json格式数据
203 203
			type:'get',//HTTP请求类型
204 204
			timeout:10000,//超时时间设置为10秒;
@ -209,7 +209,9 @@ function pulldownRefresh(){
209 209
                    	table.innerHTML = '';//下拉刷新,清空数据
210 210
                    	var datalist = data.data.data;
211 211
						eachData(userid,datalist);
212
						
212
//						plus.nativeUI.closeWaiting();//显示原生等待框
213
//					var self = document.querySelectorAll('.mui-slider-group .mui-scroll');
214
//						self.endPullDownToRefresh();
213 215
                    }
214 216
					
215 217
				};