Browse Source

1.评价内容字数限制
2.点击已评价跳转评价详情页

xiaoai_123 8 years ago
parent
commit
8c7bdde4a6
6 changed files with 196 additions and 12 deletions
  1. 103 0
      app/html/chat-assess-detail.html
  2. 19 2
      app/html/chat-assess.html
  3. 14 4
      app/html/chats.html
  4. 12 0
      app/js/chat-assess-detail.js
  5. 26 2
      app/js/chat-assess.js
  6. 22 4
      app/js/chats.js

+ 103 - 0
app/html/chat-assess-detail.html

@ -0,0 +1,103 @@
1
<!doctype html>
2
<html lang="en" class="feedback">
3
	<head>
4
		<meta charset="UTF-8" />
5
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
6
		<title></title>
7
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
8
		<link href="../css/iconfont.css" rel="stylesheet" />
9
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
10
		<style>
11
			#textbox {
12
				position: relative; 
13
			}
14
			.text_count {
15
				position: absolute;
16
				right: 0;
17
				bottom: 0;
18
				font-size: 12px;
19
			}
20
			
21
			
22
		</style>
23
	</head>
24

25
	<body>
26
	    <header class="mui-bar mui-bar-nav toptitbox">
27
	    	<!--mui-action-back-->
28
			<span class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></span>
29
			<h1 class="mui-title toptit">评价</h1>
30
		</header>
31
		<div class="mui-content">
32
			<div class="assessbox">
33
				<div class="mui-content-padded ">
34
					
35
					<div class="icons mui-inline levelbox" style="margin-left: 6px;" id="starContainer">
36
						<span data-index="1" class="mui-icon iconfont icon-favor"></span>
37
						<span data-index="2" class="mui-icon iconfont icon-favor"></span>
38
						<span data-index="3" class="mui-icon iconfont icon-favor"></span>
39
						<span data-index="4" class="mui-icon iconfont icon-favor"></span>
40
						<span data-index="5" class="mui-icon iconfont icon-favor"></span>
41
					</div>
42
				</div>
43
				<div class="mui-content-padded">
44
					<div id='assesscon'></div>
45
				</div>
46
				
47
				
48
			</div>
49
		</div>
50
		<script src="../js/public/mui.min.js"></script>
51
		<script src="../js/public/base.js"></script>
52
 		<script src="../js/chat-assess-detail.js"></script>
53
		<script type="text/javascript">
54
			/*mui.init();
55
			mui('.mui-scroll-wrapper').scroll();
56
			(function() {
57
				var index = 1;
58
				var size = null;
59
				var imageIndexIdNum = 0;
60
				var starIndex = 0;
61
				var feedback = {
62
					question: document.getElementById('question'), 
63
					submitBtn: document.getElementById('submit')
64
				};
65
				
66
				feedback.clearForm = function() {
67
					feedback.question.value = '';
68
			
69
					index = 0;
70
					size = 0;
71
					imageIndexIdNum = 0;
72
					starIndex = 0;
73
					//清除所有星标
74
					mui('.icons span').each(function (index,element) {
75
						if (element.classList.contains('icon-favorfill')) {
76
							element.classList.add('icon-favor')
77
				  			element.classList.remove('icon-favorfill')
78
						}
79
					})
80
				};
81
				//应用评分
82
				 mui('.icons').on('tap','span',function(){
83
				  	var index = parseInt(this.getAttribute("data-index"));
84
				  	var parent = this.parentNode;
85
				  	var children = parent.children;
86
				  	if(this.classList.contains("icon-favor")){
87
				  		for(var i=0;i<index;i++){
88
			  				children[i].classList.remove('icon-favor');
89
			  				children[i].classList.add('icon-favorfill');
90
				  		}
91
				  	}else{
92
				  		for (var i = index; i < 5; i++) {
93
				  			children[i].classList.add('icon-favor')
94
				  			children[i].classList.remove('icon-favorfill')
95
				  		}
96
				  	}
97
				  	starIndex = index;
98
			  });
99
			 })();*/
100
		</script>
101
	</body>
102

103
</html>

+ 19 - 2
app/html/chat-assess.html

@ -7,6 +7,19 @@
7 7
		<link rel="stylesheet" type="text/css" href="../css/mui.min.css" />
8 8
		<link href="../css/iconfont.css" rel="stylesheet" />
9 9
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
10
		<style>
11
			#textbox {
12
				position: relative; 
13
			}
14
			.text_count {
15
				position: absolute;
16
				right: 0;
17
				bottom: 0;
18
				font-size: 12px;
19
			}
20
			
21
			
22
		</style>
10 23
	</head>
11 24

12 25
	<body>
@ -32,8 +45,12 @@
32 45
				<div class="mui-content-padded">
33 46
					<div class="mui-inline">评价留言</div>
34 47
				</div>
35
				<div class="row mui-input-row">
36
					<div id='question' class="mui-input-clear question textareabox" contenteditable="true">好评!</div>
48
				<div class="row mui-input-row" id="textbox">
49
					<div id='question' class="mui-input-clear question textareabox" contenteditable="true">
50
						
51
					</div>
52
					<div class="text_count"><span><span id="text-count">0</span>/300字</span></div>
53
					<input type="text" value="0" style="display: none;" id="inp"/>
37 54
				</div>
38 55
				
39 56
			</div>

+ 14 - 4
app/html/chats.html

@ -323,7 +323,17 @@
323 323
 			.showCon {
324 324
 				padding: 10px 20px;
325 325
 			}
326
 			 
326
 			/*待评价开始*/
327
 			.frmbtn1 {
328
 				border:1px solid red;
329
 				border-radius:6px;
330
 				color:red;
331
 			}
332
 			.frmbtn1.mui-btn:enabled:active{
333
 				background: red;
334
 				color: #fff;
335
 			}
336
 			/*待评价结束*/
327 337
 		</style>
328 338
 	</head>
329 339
  	<body contextmenu="return false;">
@ -365,7 +375,7 @@
365 375
 		<div class="mui-content">
366 376
 			<div class="displayNone" id="status"></div>
367 377
 			<!--评价内容-->
368
 			<div id="middlePopover" class="mui-popover">
378
 			<!--<div id="middlePopover" class="mui-popover">
369 379
				<div class="mui-popover-arrow" id="arrow"></div>
370 380
				<div class="mui-scroll-wrapper">
371 381
					<div class="mui-scroll">
@ -384,7 +394,7 @@
384 394
					</div>
385 395
				</div>
386 396
	
387
			</div><!--评价内容-->
397
			</div>--><!--评价内容-->
388 398
 			
389 399
 			
390 400
 			
@ -401,7 +411,7 @@
401 411
				</div>
402 412
				<!--我的需求,未评价-->
403 413
				<div class="operatebtnbox mui-pull-right displayNone" id="assessBtn">
404
					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn operatebtn"  style="width:80px;">去评价</button>
414
					<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn1 operatebtn"  style="width:80px;">去评价</button>
405 415
				</div>
406 416
				<!--我的需求,已评价-->
407 417
				<div class="operatebtnbox mui-pull-right operated displayNone" id="assessed">

+ 12 - 0
app/js/chat-assess-detail.js

@ -0,0 +1,12 @@
1
mui.ready(function(){
2
	var ostarContainer =document.getElementById("starContainer");//星星容器
3
	var oassesscon =document.getElementById("assesscon");//评价内容
4
	
5
	mui.plusReady(function(){
6
		var self = plus.webview.currentWebview();
7
		var consultId = self.consultId;
8
		console.log(consultId);
9
		
10
	});
11
	
12
})

+ 26 - 2
app/js/chat-assess.js

@ -1,6 +1,11 @@
1 1
mui.ready(function(){
2 2
	
3 3
	var osendBtn = document.getElementById("submit");//发送按扭;
4
	
5
	var oplaceholder =document.getElementById("placeholder");//
6
	var otextNum = document.getElementById("text-count");//字数
7
	var oinp = document.getElementById("inp");//用来放评价字数的隐藏于
8
	
4 9
	var oassesscontent = document.getElementById("question");//评价内容
5 10
	var ostarContainer = document.getElementById("starContainer");//星星容器
6 11
	
@ -32,8 +37,27 @@ mui.ready(function(){
32 37
			}
33 38
		});
34 39
	};
35
	
36
	
40
	//点击评价区域,placeholder效果,字数限制效果、
41
	console.log(oassesscontent.innerHTML)
42
	oassesscontent.addEventListener('keyup',function(){
43
		/*alert(oassesscontent.innerHTML)*/
44
		limitTextCountFn();
45
	});
46
	//评价字数限制
47
	//字数限制函数
48
	function limitTextCountFn(){
49
		/*alert(oassesscontent.innerHTML)*/
50
		var curLength = oassesscontent.innerHTML.length;
51
		
52
		if(curLength > 300){
53
			var num= oassesscontent.innerHTML.substr(0,300); 
54
		} 
55
		else {
56
			otextNum.innerHTML = parseInt(curLength); 
57
			
58
		} 
59
	};
60

37 61
	mui.plusReady(function(){
38 62
		var userid = plus.storage.getItem('userid');
39 63
		var self = plus.webview.currentWebview();

+ 22 - 4
app/js/chats.js

@ -88,10 +88,12 @@ mui.ready(function() {
88 88
				  				starlist[i].classList.add('icon-favorfill');
89 89
							};
90 90
							/*===========评价内容没做=========*/
91
							oassessText.innerHTML = myData["assessContant"];//评价内容
91
							
92
//							oassessText.innerHTML = myData["assessContant"];//评价内容
92 93
							
93 94
							oassessed.addEventListener('tap',function() {
94
								showAssessText(omy_starContainer);
95
//								showAssessText(omy_starContainer);
96
								clickGodetail(omy_starContainer,consultId)
95 97
							});
96 98
							
97 99
							
@ -139,9 +141,10 @@ mui.ready(function() {
139 141
				  				starlist[i].classList.add('icon-favorfill');
140 142
							}
141 143
							
144
							
142 145
							othat_assessed.addEventListener('tap',function() {
143
								
144
								showAssessText(ozixunstarContainer);
146
								clickGodetail(ozixunstarContainer,consultId)
147
//								showAssessText(ozixunstarContainer);
145 148
							});
146 149
147 150
						}
@ -177,6 +180,21 @@ mui.ready(function() {
177 180
		});
178 181
	};
179 182
	
183
	/*打开评价详情函数*/
184
	function goassessDetail(consultId) {
185
		mui.openWindow({
186
			id:'chat-assess-detail.html',
187
		    url:'chat-assess-detail.html',
188
		    extras:{'consultId':consultId}//向评价页面传值;咨询id
189
		});
190
	}
191
	/*点击已评价,进入评价详情*/
192
	function clickGodetail(btn,consultId) {
193
		btn.addEventListener('tap',function(){
194
			goassessDetail(consultId);
195
		});
196
	}
197
	
180 198
	/*点击未评价,进入评价页面*/
181 199
	function clickweiassess(consultId){
182 200
		oassessBtn.addEventListener('tap',function(){