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

1.咨询列表下拉刷新
2.更改客服电话

dell 8 years ago
parent
d85cfda15e
commit
26be39c167
5 changed files with 1212 additions and 333 deletions
Split View Show Diff Stats
  1. 210 35
      app/html/consultlist.html
  2. 1 1
      app/html/contactservice.html
  3. 242 297
      app/js/consult.js
  4. 407 0
      app/js/mui.pullToRefresh.js
  5. 352 0
      app/js/mui.pullToRefresh.material.js

+ 210 - 35
app/html/consultlist.html
View File 

@ -15,12 +15,25 @@
15 15 
    	* {
16 16 
	    	font-family: "微软雅黑";
17 17 
	    }
18 
	    /*#table {
19 
	    	margin-top: 44px;
20 
	    }*/
18 21
19 22 
    	/*筛选div*/
20 
    	.filterdiv {
21
23 
    	.filterbox2.filterdiv {
24 
    		z-index: 9;
22 25 
    	}
23 26
27 
    	/*写有下拉刷新,正在刷新的div*/
28 
    	/*#zixunpullrefresh .mui-pull-top-pocket {
29 
    		top: 90px;
30 
    	}*/
31 
    	.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
32 
		  top: 90px !important;
33 
		}
34
35
36
24 37 
    	/*图片div*/
25 38 
    	.imgdiv {
26 39 
    		width: 140px;
 
@ -61,6 +74,82 @@
61 74 
    	.frmbox .logBtn {
62 75 
    		color: #FF9900;
63 76 
    	}
77
78
79 
    	html,
80 
			body {
81 
				background-color: #efeff4;
82 
			}
83 
			.mui-bar~.mui-content .mui-fullscreen {
84 
				top: 44px;
85 
				height: auto;
86 
			}
87 
			.mui-pull-top-tips {
88 
				position: absolute;
89 
				top: -20px;
90 
				left: 50%;
91 
				margin-left: -25px;
92 
				width: 40px;
93 
				height: 40px;
94 
				border-radius: 100%;
95 
				z-index: 1;
96 
			}
97 
			.mui-bar~.mui-pull-top-tips {
98 
				top: 24px;
99 
			}
100 
			.mui-pull-top-wrapper {
101 
				width: 42px;
102 
				height: 42px;
103 
				display: block;
104 
				text-align: center;
105 
				background-color: #efeff4;
106 
				border: 1px solid #ddd;
107 
				border-radius: 25px;
108 
				background-clip: padding-box;
109 
				box-shadow: 0 4px 10px #bbb;
110 
				overflow: hidden;
111 
			}
112 
			.mui-pull-top-tips.mui-transitioning {
113 
				-webkit-transition-duration: 200ms;
114 
				transition-duration: 200ms;
115 
			}
116 
			.mui-pull-top-tips .mui-pull-loading {
117 
				/*-webkit-backface-visibility: hidden;
118 
				-webkit-transition-duration: 400ms;
119 
				transition-duration: 400ms;*/
120
121 
				margin: 0;
122 
			}
123 
			.mui-pull-top-wrapper .mui-icon,
124 
			.mui-pull-top-wrapper .mui-spinner {
125 
				margin-top: 7px;
126 
			}
127 
			.mui-pull-top-wrapper .mui-icon.mui-reverse {
128 
				/*-webkit-transform: rotate(180deg) translateZ(0);*/
129 
			}
130 
			.mui-pull-bottom-tips {
131 
				text-align: center;
132 
				background-color: #efeff4;
133 
				font-size: 15px;
134 
				line-height: 40px;
135 
				color: #777;
136 
			}
137 
			.mui-pull-top-canvas {
138 
				overflow: hidden;
139 
				background-color: #fafafa;
140 
				border-radius: 40px;
141 
				box-shadow: 0 4px 10px #bbb;
142 
				width: 40px;
143 
				height: 40px;
144 
				margin: 0 auto;
145 
			}
146 
			.mui-pull-top-canvas canvas {
147 
				width: 40px;
148 
			}
149 
			.mui-slider-indicator.mui-segmented-control {
150 
				background-color: #efeff4;
151 
			}
152
64 153 
    </style>
65 154 
    <link href="../css/mui.min.css" rel="stylesheet"/>
66 155 
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css"/>
 
@ -70,7 +159,7 @@
70 159 
<body>
71 160
72 161 
	<!-- 主页面标题 -->
73 
	<header class="mui-bar mui-bar-nav toptitbox">
162 
	<header class="mui-bar mui-bar-nav toptitbox" style="position: fixed;top: 0;">
74 163 
	    <h1 class="mui-title toptit">咨询</h1>
75 164 
	</header>
76 165 
	<div class="displayNone">
 
@ -86,22 +175,48 @@
86 175 
    <!-- 主页面内容容器 -->
87 176 
    <div class="mui-content" id="logined">
88 177 
    	<!-- 主界面具体展示内容 -->
89 
    	<div class="filterbox2 filterdiv" style="top:44px ;left: 0;">
90 
			<ul class="filterblock2">
91 
				<li style="width:22%;">
92 
					<a href="#middlePopover1"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span id="headck1" headck='0'>咨询/需求</span><em class="mui-icon mui-icon-arrowdown"></em></a>
93 
				</li>
94 
				<li style="width:22%;">
95 
					<a href="#middlePopover2"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span id="headck2" headck='0'>咨询类型</span><em class="mui-icon mui-icon-arrowdown"></em></a>
96 
				</li>
97 
				<li style="width:22%;">
98 
					<a href="#middlePopover3"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span id="headck3" headck='0'>咨询状态</span><em class="mui-icon mui-icon-arrowdown"></em></a>
99 
				</li>
100 
				<li style="width:34%;">
101 
					<a href="#middlePopover4"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2" ><span id="headck4" headck='1'>按最后回复排序</span><em class="mui-icon mui-icon-arrowdown"></em></a>
102 
				</li>
103 
			</ul>
178
179 
		<div id="slider" class="mui-slider mui-fullscreen">
180 
			<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
181 
				<div class="mui-scroll">
182 
					<a  href="#middlePopover1"  class="mui-control-item">
183 
						<span id="headck1" headck='0'>咨询/需求</span>
184 
					</a>
185 
					<a  href="#middlePopover2"  class="mui-control-item">
186 
						<span id="headck2" headck='0'>咨询类型</span>
187 
					</a>
188 
					<a  href="#middlePopover3"  class="mui-control-item">
189 
						<span id="headck3" headck='0'>咨询状态</span>
190 
					</a>
191 
					<a href="#middlePopover4"  class="mui-control-item" >
192 
						<span id="headck4" headck='1'>按最后回复排序</span>
193 
					</a>
194
195 
				</div>
196 
			</div>
197
198 
			<div class="mui-slider-group">
199 
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
200 
					<div id="zixunpullrefresh" class="mui-scroll-wrapper">
201 
						<div class="mui-scroll">
202 
							<ul class="mui-table-view" id="table">
203
204
205 
							</ul>
206 
						</div>
207 
					</div>
208 
				</div>
209 
			</div>
210
104 211 
		</div>
212
213
214
215
216
217
218
219
105 220
106 221 
       	<div id="middlePopover1" class="mui-popover popoverbox mui-popover1" style="height: 110px;">
107 222 
			<div class="mui-popover-arrow"></div>
 
@ -155,12 +270,70 @@
155 270 
			</div>
156 271 
		</div>
157 272
158 
       	<div id="zixunpullrefresh" class="mui-card-content"  style="margin-top:40px; ">
159 
	      <ul class="mui-table-view protable" id="table">
273 
       	<!--<div id="zixunpullrefresh" class="mui-card-content"  >
274 
	      	<ul class="mui-table-view protable" id="table">
160 275
161 276 
	        </ul>
162 
        </div>
163
277 
        </div>-->
278 
        <!--下拉刷新容器-->
279 
       	<!-- 在谷歌浏览器中OK，在模拟器和手机端不OK-->
280
281 
       	<!--<div class="filterbox2 filterdiv" style="top:44px ;left: 0;">
282 
			<ul class="filterblock2">
283 
				<li style="width:22%;">
284 
					<a href="#middlePopover1"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span id="headck1" headck='0'>咨询/需求</span><em class="mui-icon mui-icon-arrowdown"></em></a>
285 
				</li>
286 
				<li style="width:22%;">
287 
					<a href="#middlePopover2"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span id="headck2" headck='0'>咨询类型</span><em class="mui-icon mui-icon-arrowdown"></em></a>
288 
				</li>
289 
				<li style="width:22%;">
290 
					<a href="#middlePopover3"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2"><span id="headck3" headck='0'>咨询状态</span><em class="mui-icon mui-icon-arrowdown"></em></a>
291 
				</li>
292 
				<li style="width:34%;">
293 
					<a href="#middlePopover4"  class="mui-btn mui-btn-block mui-btn-outlined filterlist2" ><span id="headck4" headck='1'>按最后回复排序</span><em class="mui-icon mui-icon-arrowdown"></em></a>
294 
				</li>
295 
			</ul>
296 
		</div>
297
298
299
300 
		<div id="zixunpullrefresh" class="mui-content mui-scroll-wrapper">
301
302 
		  	<div class="mui-scroll">
303
304 
		    <ul class="mui-table-view protable" id="table">
305
306 
		    <li class="mui-table-view-cell mui-media">
307
308 
				<div class="coutopicbox"><span class="coutheme mui-ellipsis mui-pull-left">'+title+'</span>
309 
					<div class="coustatus mui-pull-right"><span class="aimlabel">'+consultType+'</span>
310 
						<span class="'+statusStyle+' status" consultId="'+item[" consultId "]+'">'+status+'</span></div>
311 
				</div>
312 
				<a class="proinfor itemBtn" consultId="'+item[" consultId "]+'" consultantId="'+item[" consultantId "]+'">
313 
					<span class="mui-badge mui-badge-danger readstate '+unreadStyle+'" consultId="'+item[" consultId "]+'">'+unreadCount+'</span>
314 
					<img class="mui-media-object mui-pull-left headimg headRadius" src="'+photoUrl+'">
315 
					<div class="mui-media-body">
316 
						<span class="listtit">'+item["professor"]["name"]+'<em class="mui-icon iconfont icon-vip '+proModify+'"></em><span class="thistime">'+lastReplyTime+'</span></span>
317 
						<p class="listtit2">
318 
							<span>'+item["professor"]["title"]+'</span>
319 
							<span>'+item["professor"]["office"]+'</span>
320 
							<span>'+item["professor"]["orgName"]+'</span>
321 
							<span>  | '+item["professor"]["address"]+'</span>
322
323 
						</p>
324 
						<p class="listtit3 onlyone">'+lastReplyCon+'</p>
325 
					</div>
326 
				</a>
327
328 
			</li>
329
330
331
332
333
334 
		    </ul>
335 
		  </div>
336 
		</div>-->
164 337
165 338 
    </div>
166 339 
	
@ -181,21 +354,23 @@
181 354
182 355
183 356 
	<script src="../js/public/mui.min.js"></script>
357 
	<script src="../js/mui.pullToRefresh.js"></script>
358 
	<script src="../js/mui.pullToRefresh.material.js"></script>
184 359 
	<script src="../js/public/base.js"></script>
185 360 
	<script src="../js/consult.js"></script>
186 
   	<script type="text/javascript" charset="utf-8">
187 
   	mui.plusReady(function() {
188 
   		var  content1 = document.getElementById('logined');
189 
      	var  content2 = document.getElementById('unlogin');
190 
   		var userid = plus.storage.getItem('userid');
191 
   		if(userid == null || userid == 'null'){
192 
   			content1.style.display = 'none';
193 
   		}else {
194 
   			content2.style.display = 'none';
195 
   		}
196
197
198 
   	});
361 
   	<script type="text/javascript">
362 
	   	mui.plusReady(function() {
363 
	   		var  content1 = document.getElementById('logined');
364 
	      	var  content2 = document.getElementById('unlogin');
365 
	   		var userid = plus.storage.getItem('userid');
366 
	   		if(userid == null || userid == 'null'){
367 
	   			content1.style.display = 'none';
368 
	   		}else {
369 
	   			content2.style.display = 'none';
370 
	   		}
371
372
373 
	   	});
199 374 
    </script>
200 375 
</body>
201 376 
</html>

+ 1 - 1
app/html/contactservice.html
View File 

@ -24,7 +24,7 @@
24 24 
				    <li class="mui-table-view-divider mui-indexed-list-group"> 客服电话：</li>
25 25 
				    <li class="mui-table-view-cell mui-indexed-list-item" id="service_phone">
26 26 
				    	<span class="mui-icon mui-icon-phone"></span>
27 
				    	<span id="phone_num">10086</span>
27 
				    	<span id="phone_num">010-62343359</span>
28 28 
				    </li>
29 29 
				</ul>
30 30 
		    </div>

+ 242 - 297
app/js/consult.js
View File 

@ -12,15 +12,49 @@ var ostateval = document.getElementById("stateval");//咨询状态
12 12 
var osortval = document.getElementById("sortval");//时间排序
13 13
14 14
15
16
17 
//判断是否登录,点击咨询,显示数据或登录，
18 
//点击咨询还要刷新数据
19 
//ohasconsult.addEventListener('tap',function(){
20 
/*mui('#hasconsult').on('tap','.mui-icon',function(){
21 
	console.log('点击咨询')
22 
	islogin();
23 
	//初始化数据
24 
	pulldownRefresh();
25 
});*/
26
27 
//显示数据还是登录
28 
function islogin() {
29 
	mui.plusReady(function(){
30 
		var userid = plus.storage.getItem('userid');
31 
		console.log('点击咨询,判断是否登录id=='+ userid);
32 
		if(userid == null || userid == 'null'){
33 
   			content1.style.display = 'none';
34 
   		}else {
35 
   			content2.style.display = 'none';
36 
   		}
37
38 
   		if(plus.nativeUI.showWaiting()){
39 
			plus.nativeUI.closeWaiting();//关闭等待框
40 
		}
41
42 
	})
43 
}
44
45
15 46 
/*登陆*/
16 47 
window.addEventListener('logined', function(event) {
17 48 
	var userId = event.detail.id;
18 49 
	content1.style.display = 'block';
19 50 
	content2.style.display = 'none';
20 
	initdata();
51 
//	initdata();
52 
	pulldownRefresh();
53
21 54 
	if(plus.nativeUI.showWaiting()){
22 
		console.log("showWaiting")
55
23 56 
		plus.nativeUI.closeWaiting();//关闭等待框
57 
		mui('#zixunpullrefresh').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
24 58 
	}
25 59 
});
26 60 
@ -30,6 +64,8 @@ window.addEventListener('exited', function(event) {
30 64 
	content1.style.display = 'none';
31 65 
	content2.style.display = 'block';
32 66 
});
67
68 
//显示登录,登陆或者注册
33 69 
mui.plusReady(function() {
34 70 
	var regBtn = document.getElementById("regBtn");
35 71 
	var logBtn = document.getElementById("logBtn");
 
@ -60,235 +96,105 @@ mui.plusReady(function() {
60 96 
});
61 97
62 98
99 
//接收咨询btn
100 
window.addEventListener('clickconbtn', function(event) {
101 
	var consultBtn = event.detail.btn;
102 
	console.log(consultBtn);
103 
	console.log('点击咨询');
104 
	islogin();
105 
	pulldownRefresh();
106 
});
63 107
64 108
65 109
66 110
67 111
112 
/*初始化数据*/
113 
pulldownRefresh();
68 114
115 
//数据滚动
116 
mui('.mui-scroll-wrapper').scroll({
117 
	scrollY: true, //是否竖向滚动
118 
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
119 
});
69 120
70 121
122 
//筛选条件不动，下拉刷新
123 
mui.ready(function(){
124 
	mui.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
125
126 
		mui(pullRefreshEl).pullToRefresh({
127 
			down: {
128 
				callback: function() {
129 
					var self = this;
130 
					setTimeout(function() {
131
132 
						pulldownRefresh();//下拉刷新
133
134 
						self.endPullDownToRefresh();
135 
					}, 1000);
136 
				}
137 
			}
138 
		});
139 
	});
140
141 
});
71 142
72 143
73 144
74 145
75
76
77
78
79
80 
mui.plusReady(function() {
81 
	var self = plus.webview.currentWebview();
82 
	console.log('当前咨询列表页id==='+self.id);
83 
})
84
85 
mui.init({
86 
    pullRefresh: {
87 
    	container: '#zixunpullrefresh',
88 
    	down: {
89 
        	auto: true,
90 
		    contentdown : "下拉可以刷新",
91 
		    contentover : "释放立即刷新",
92 
		    contentrefresh : "正在刷新...",
93 
            callback: pulldownRefresh
94 
       },
95 
        up: {
96 
            contentrefresh: '正在加载...',
97 
            callback: pullupRefresh
98 
        }
99 
    }
100 
});
101 
 /**
102 
 * 下拉刷新具体业务实现
103 
 */
104 
function pulldownRefresh() {
105 
    pageIndex = 1;
106 
    console.log('下拉刷新');
107 
    /*document.querySelector('header.mui-bar').style.display='none';
108 
    document.querySelector('.filterdiv').style.display='none';*/
109 
    //table.innerHTML = '';
110 
    setTimeout(function() {
111 
        getaData();
112 
        mui('#zixunpullrefresh').pullRefresh().endPulldownToRefresh();
113 
        mui('#zixunpullrefresh').pullRefresh().refresh(true);
114 
    }, 1000);
115 
}
116
117 
//上拉加载具体业务实现
118 
function pullupRefresh() {
119 
    pageIndex = ++pageIndex;
120 
    console.log('第'+pageIndex+'页');
121 
    console.log('上拉加载更多');
122
123 
    setTimeout(function() {
124 
        getaData();
125 
    }, 1000);
126 
};
127 
if(mui.os.plus) {
128 
	mui.plusReady(function() {
129 
		setTimeout(function() {
130 
			mui('#zixunpullrefresh').pullRefresh().pulldownLoading();
131 
		}, 500);
132 
	});
133 
} else {
134 
	mui.ready(function() {
135 
		mui('#zixunpullrefresh').pullRefresh().pulldownLoading();
136 
	});
137 
};
138
139 
//点击选择
140 
function checkedFun(i){
141 
	mui("#middlePopover"+i).on('tap','.mui-navigate-right',function(e){
142 
		allPages = 1;
143 
		pageIndex = 1;
144 
		plus.nativeUI.showWaiting(); //显示等待框
145 
		document.getElementById("headck"+i).innerHTML = this.innerHTML;
146 
		var value = this.getAttribute("ck"+i);
147 
		document.getElementById("headck"+i).setAttribute('headck',value);
148 
		document.querySelector('.mui-backdrop').style.display = 'none';
149 
		document.getElementById("middlePopover"+i).style.display = 'none';
150
151 
		//去掉样式类mui-active,要不然会多点击一次
152 
		document.getElementById("middlePopover"+i).classList.remove('mui-active');
146 
/*下拉刷新*/
147 
function pulldownRefresh(){
148 
	console.log('下拉刷新');
149 
	mui.plusReady(function() {
150 
		var userid = plus.storage.getItem('userid');
151 
//		var waitingDialog = plus.nativeUI.showWaiting("加载中");
153 152
154 
		//咨询类型传值不同，传""(空)，技术咨询、资源咨询、其他事务
155 
		otypeval.value = document.getElementById("headck2").getAttribute('headck');
156 
		if(otypeval.value == 0) {
157 
			otypeval.value = '';
158 
		}else {
159 
			otypeval.value = document.getElementById("headck2").innerHTML;
160 
		}
161 
		oneedval.value = document.getElementById("headck1").getAttribute('headck');
162 
		ostateval.value = document.getElementById("headck3").getAttribute('headck');
163 
		osortval.value = document.getElementById("headck4").getAttribute('headck');
153 
		plus.nativeUI.showWaiting();
164 154
165 
		initdata();
166 
		plus.nativeUI.closeWaiting();//关闭等待框
155 
		pageIndex = 1;
156 
		mui.ajax(baseUrl + '/ajax/consult/pq',{
157 
			data:{
158 
				"professorId":userid,
159 
			    "consultOrNeed":oneedval.value ,
160 
			    "consultType":otypeval.value,
161 
			    "status":ostateval.value,
162 
			    "timeType":osortval.value,
163 
			    "pageSize":200,
164 
			    "pageNo":1
165 
			},
166 
			dataType:'json',//服务器返回json格式数据
167 
			type:'get',//HTTP请求类型
168 
			timeout:10000,//超时时间设置为10秒；
169 
			success:function(data){
170 
				if (data.success) {
171
172 
					if(pageIndex == 1){
173 
                    	table.innerHTML = '';//下拉刷新，清空数据
174 
                    	var datalist = data.data.data;
175 
						eachData(userid,datalist);
176 
//              		waitingDialog.close();
177 
                		plus.nativeUI.closeWaiting();
178 
                    }
179
180 
				};
181
182 
			},
183 
			error:function(xhr,type,errorThrown){
184 
				mui.toast('网络异常,请稍候再试');
185 
//      		waitingDialog.close();
186 
				plus.nativeUI.closeWaiting();
187 
			}
188 
		});
167 189 
	});
168
169 
};
170 
checkedFun(1);
171 
checkedFun(2);
172 
checkedFun(3);
173 
checkedFun(4);
174
190 
}
175 191
176 
function getaData() {
177 
    mui.plusReady(function() {
178 
    	var userid = plus.storage.getItem('userid');
179 
    	/*console.log("刷新传参"+oneedval.value+otypeval.value+ostateval.value+osortval.value);
180 
    	console.log('加载页'+pageIndex)*/
181 
        mui.ajax(baseUrl+'/ajax/consult/pq', {
182 
            data: {
183 
                "professorId":userid, //专家ID
184 
			    "consultOrNeed":oneedval.value , //接受咨询或咨询别人的状态值，0-全部，1-别人咨询我的，2-我咨询别人的 默认为0
185 
			    "consultType":otypeval.value, //咨询类型(技术咨询、资源咨询、其他事务)
186 
			    "status":ostateval.value, //查询状态 0-全部，1-进行中，2-未感谢，3-未评价，4-已完成， 可以不传，默认为0
187 
			    "timeType":osortval.value, //排序类型 0-按发起时间正序，1-按最后回复时间倒序，2-按完成时间倒序 默认为1
188 
			    "pageSize":10,
189 
			    "pageNo":pageIndex //当前页码 默认为1
190 
            },
191 
            dataType: 'json',
192 
            type: 'get',
193 
            timeout: 10000,
194
195 
            success: function(data) {
196
197 
                if (data.success) {
198 
                    var datalist = data.data.data;
199 
                    var total = data.data.total;
200 
                    var pageSize = data.data.pageSize;
201
202 
                    var result = '';
203 
                    allPages = Math.ceil(total / pageSize);/*获取总的分页数*/
204
205 
                    if (allPages == 1) { //下拉刷新需要先清空数据
206 
                        table.innerHTML = '';// 在这里清空可以防止刷新时白屏
207 
                    }
208 
                    if(pageIndex == 1){
209 
                    	table.innerHTML = '';
210 
                    	/*document.querySelector('header.mui-bar').style.display='block';
211 
    					document.querySelector('.filterdiv').style.display='block';*/
212 
                    }
213
214 
                    eachData(userid,datalist);
215
216 
                    if(pageIndex < allPages){
217 
                        mui('#zixunpullrefresh').pullRefresh().endPullupToRefresh(false);    /*能上拉*/
218 
                    }else{
219 
                        mui('#zixunpullrefresh').pullRefresh().endPullupToRefresh(true);/*不能上拉*/
220 
                    }
221 
                }
222 
            },
223 
            error: function(xhr, type, errerThrown) {
224 
                mui.toast('网络异常,请稍候再试');
225 
                plus.nativeUI.closeWaiting();
226 
                mui('#zixunpullrefresh').pullRefresh().endPullupToRefresh(true);
227 
            }
228 
        });
229 
    });
230 
};
231 192
232 
/*重新登陆，咨询列表数据刷新*/
233 
/*window.addEventListener('relogin', function(event) {
234 
//	alert('重新登陆')
235 
	userId = event.detail.id;
236 
	console.log(userId);
237 
	initdata();
238 
	if(plus.nativeUI.showWaiting()){
239 
		console.log("showWaiting")
240 
		plus.nativeUI.closeWaiting();//关闭等待框
241 
	}
242 
});*/
193
194
243 195
244 196
245 
initdata();
246 
/*第一次加载数据*/
247 
function initdata() {
248
249 
    mui.plusReady(function() {
250 
    	/*plus.nativeUI.showWaiting()//显示等待框*/
251 
    	var userid = plus.storage.getItem('userid');
252 
    	if(otypeval.value == 0){
253 
    		otypeval.value ='';
254 
    	}
255 
//  	console.log('初始化传参一：'+oneedval.value+'二'+otypeval.value+'三'+ostateval.value+'四'+osortval.value);
256 
    	console.log()
257 
    	plus.nativeUI.showWaiting();
258 
        mui.ajax(baseUrl+'/ajax/consult/pq', {
259 
            data: {
260 
                "professorId":userid, //专家ID
261 
			    "consultOrNeed":oneedval.value , //接受咨询或咨询别人的状态值，0-全部，1-别人咨询我的，2-我咨询别人的 默认为0
262 
			    "consultType":otypeval.value, //咨询类型(技术咨询、资源咨询、其他事务)
263 
			    "status":ostateval.value, //查询状态 0-全部，1-进行中，2-未感谢，3-未评价，4-已完成， 可以不传，默认为0
264 
			    "timeType":osortval.value, //排序类型 0-按发起时间正序，1-按最后回复时间倒序，2-按完成时间倒序 默认为1
265 
			    "pageSize":10, //每页记录数 默认为5
266 
			    "pageNo":1 //当前页码 默认为1
267 
            },
268 
            dataType: 'json',
269 
            type: 'get',
270 
            timeout: 10000,
271 
            success: function(data) {
272 
            	table.innerHTML = '';//清空容器
273 
                if (data.success && data.data.data != '') {
274 
                    var datalist = data.data.data;
275 
                    eachData(userid,datalist);
276 
                    mui('#zixunpullrefresh').pullRefresh().refresh(true);//重置下拉加载
277 
                    plus.nativeUI.closeWaiting();//关闭等待框
278 
                }else {
279 
                	plus.nativeUI.closeWaiting();//关闭等待框
280 
                	/*plus.nativeUI.toast("您目前没有咨询");*/
281 
					mui('#zixunpullrefresh').pullRefresh().disablePullupToRefresh();
282 
                }
283 
            },
284 
            error: function(xhr, type, errerThrown) {
285 
                mui.toast('网络异常,请稍候再试');
286 
            	plus.nativeUI.closeWaiting();
287 
            }
288 
        });
289 
    });
290 197
291 
};
292 198
293 199 
//判断对方是否有聊天内容,加回复：。。。
294 200 
function isChat(consultId,userid) {
 
@ -337,9 +243,9 @@ function setReadState(consultId) {
337 243 
//打开子页面
338 244 
mui(".mui-table-view").on('tap','.itemBtn',function(){
339 245 
	var o_this = this;
340 
//	console.log(this.getAttribute('consultId'));
246
341 247 
	mui.plusReady(function() {
342 
//		console.log(o_this.getAttribute("consultId"));
248
343 249 
		var nwaiting = plus.nativeUI.showWaiting();//显示原生等待框
344 250 
		//更新读取状态
345 251 
		setReadState(o_this.getAttribute("consultId"));
 
@ -410,92 +316,92 @@ function eachData(userid,datalist) {
410 316
411 317 
		//过滤professor为空
412 318 
		if(item["professor"]){
413
414 
		chatlength = isChat(item['consultId'],userid);//判断对方是否有发出消息
415 
		if(chatlength == 0){
416 
			title =  item["consultTitle"];
417 
		}else{
418 
			title = "回复:" + item["consultTitle"];
419 
		}
420 
//		console.log(title)
421 
    	//咨询类型和状态
422 
		if(item['consultantId'] != userid){//收到咨询
423 
			if(item["consultStatus"] == 0){
424 
				status = "进行中";
425 
				statusStyle = 'status-1';
426 
			}else if(item["consultStatus"] == 1){
427 
				status = "已完成";
428 
				statusStyle = 'status-3';
319
320 
			chatlength = isChat(item['consultId'],userid);//判断对方是否有发出消息
321 
			if(chatlength == 0){
322 
				title =  item["consultTitle"];
323 
			}else{
324 
				title = "回复:" + item["consultTitle"];
429 325 
			}
430 
		}else if(item['consultantId'] == userid){//我的需求
431 
			if(item["consultStatus"] == 0){
432 
				status = "进行中";
433 
				statusStyle = 'status-1';
434 
			}else if(item["consultStatus"] == 1){
435 
				if(item["assessStatus"] == 0){
436 
					status = '待评价';
437 
					statusStyle = 'status-2';
438 
				}else {
439 
					status = '已完成';
440 
					statusStyle = 'status-3';
326 
	//		console.log(title)
327 
	    	//咨询类型和状态
328 
			if(item['consultantId'] != userid){//收到咨询
329 
				if(item["consultStatus"] == 0){
330 
					status = "进行中";
331 
					statusStyle = 'status-1';
332 
				}else if(item["consultStatus"] == 1){
333 
					status = "已完成";
334 
					statusStyle = 'statu s-3';
441 335 
				}
336 
			}else if(item['consultantId'] == userid){//我的需求
337 
				if(item["consultStatus"] == 0){
338 
					status = "进行中";
339 
					statusStyle = 'status-1';
340 
				}else if(item["consultStatus"] == 1){
341 
					if(item["assessStatus"] == 0){
342 
						status = '待评价';
343 
						statusStyle = 'status-2';
344 
					}else {
345 
						status = '已完成';
346 
						statusStyle = 'status-3';
347 
					}
348 
				}
349 
			};
350
351
352 
			(item["professor"]["authentication"] == true)? proModify = 'authicon' : proModify = 'unauthicon';
353 
			(item["professor"]["hasHeadImage"] == 0) ? photoUrl = "../images/default-photo.jpg":photoUrl = baseUrl + "/images/head/" + item["professor"].id + "_m.jpg";
354
355 
			//咨询类型，只取两个字
356 
			if(item["consultType"]) {
357 
				consultType = item["consultType"].substr(0,2);
442 358 
			}
443 
		};
444
445
446 
		(item["professor"]["authentication"] == true)? proModify = 'authicon' : proModify = 'unauthicon';
447 
		(item["professor"]["hasHeadImage"] == 0) ? photoUrl = "../images/default-photo.jpg":photoUrl = baseUrl + "/images/head/" + item["professor"].id + "_m.jpg";
448
449 
		//咨询类型，只取两个字
450 
		if(item["consultType"]) {
451 
			consultType = item["consultType"].substr(0,2);
452 
		}
453
454 
		//最后回复
455 
		lastReplyTime = lastReplyFn(userid,item["consultId"]).lastReplyTime;
456 
		lastReplyCon = lastReplyFn(userid,item["consultId"]).lastReplyCon;
457
458 
		if(lastReplyCon == undefined){
459 
			lastReplyCon = '';
460 
		}
461 
		if(lastReplyTime == undefined){
462 
			lastReplyTime = '';
463 
		}
464 
		//未读消息
465 
		unreadCount = unreadConsultFn(userid,item["consultId"],index).unreadCount;
466 
		unreadStyle = unreadConsultFn(userid,item["consultId"],index).style;
467
468 
        var li = document.createElement('li');
469 
        li.className = 'mui-table-view-cell mui-media';
470
471 
        var str = '';
472 
       	str += '<div class="coutopicbox"><span class="coutheme mui-ellipsis mui-pull-left">'+title+'</span>'
473 
       				+ '<div class="coustatus mui-pull-right"><span class="aimlabel">'+consultType+'</span>'
474 
            		+ '<span class="'+statusStyle+' status" consultId="'+item["consultId"]+'">'+status+'</span></div></div>'
475 
            		+ '<a class="proinfor itemBtn" consultId="'+item["consultId"]+'" consultantId="'+item["consultantId"]+'" >'
476 
					+ '<span class="mui-badge mui-badge-danger readstate '+unreadStyle+'" consultId="'+item["consultId"]+'">'+unreadCount+'</span>'
477 
	        		+ '<img class="mui-media-object mui-pull-left headimg headRadius" src="'+photoUrl+'">'
478 
            		+ '<div class="mui-media-body">'
479 
            		+ '<span class="listtit">'+item["professor"]["name"]+'<em class="mui-icon iconfont icon-vip '+proModify+'"></em><span class="thistime">'+lastReplyTime+'</span></span>';
480 
        str += '<p class="listtit2">';
481 
        if(item["professor"]["title"]){
482 
        	str += '<span>'+item["professor"]["title"]+'</span>, ';
483 
        };
484 
        if(item["professor"]["office"]){
485 
        	str += '<span>'+item["professor"]["office"]+'</span>, ';
486 
        };
487 
        if(item["professor"]["orgName"]){
488 
        	str += '<span>'+item["professor"]["orgName"]+'</span>';
489 
        };
490 
        if(item["professor"]["address"]){
491 
        	str += '<span>  | '+item["professor"]["address"]+'</span>';
492 
        };
493
494 
        str +='</p><p class="listtit3 onlyone">'+lastReplyCon+'</p></div></a>';
495
496 
		li.innerHTML = str;
497 
        table.appendChild(li,table.firstChild);
498 
       }
359
360 
			//最后回复
361 
			lastReplyTime = lastReplyFn(userid,item["consultId"]).lastReplyTime;
362 
			lastReplyCon = lastReplyFn(userid,item["consultId"]).lastReplyCon;
363
364 
			if(lastReplyCon == undefined){
365 
				lastReplyCon = '';
366 
			}
367 
			if(lastReplyTime == undefined){
368 
				lastReplyTime = '';
369 
			}
370 
			//未读消息
371 
			unreadCount = unreadConsultFn(userid,item["consultId"],index).unreadCount;
372 
			unreadStyle = unreadConsultFn(userid,item["consultId"],index).style;
373
374 
	        var li = document.createElement('li');
375 
	        li.className = 'mui-table-view-cell mui-media';
376
377 
	        var str = '';
378 
	       	str += '<div class="coutopicbox"><span class="coutheme mui-ellipsis mui-pull-left">'+title+'</span>'
379 
	       				+ '<div class="coustatus mui-pull-right"><span class="aimlabel">'+consultType+'</span>'
380 
	            		+ '<span class="'+statusStyle+' status" consultId="'+item["consultId"]+'">'+status+'</span></div></div>'
381 
	            		+ '<a class="proinfor itemBtn" consultId="'+item["consultId"]+'" consultantId="'+item["consultantId"]+'" >'
382 
						+ '<span class="mui-badge mui-badge-danger readstate '+unreadStyle+'" consultId="'+item["consultId"]+'">'+unreadCount+'</span>'
383 
		        		+ '<img class="mui-media-object mui-pull-left headimg headRadius" src="'+photoUrl+'">'
384 
	            		+ '<div class="mui-media-body">'
385 
	            		+ '<span class="listtit">'+item["professor"]["name"]+'<em class="mui-icon iconfont icon-vip '+proModify+'"></em><span class="thistime">'+lastReplyTime+'</span></span>';
386 
	        str += '<p class="listtit2">';
387 
	        if(item["professor"]["title"]){
388 
	        	str += '<span>'+item["professor"]["title"]+'</span>, ';
389 
	        };
390 
	        if(item["professor"]["office"]){
391 
	        	str += '<span>'+item["professor"]["office"]+'</span>, ';
392 
	        };
393 
	        if(item["professor"]["orgName"]){
394 
	        	str += '<span>'+item["professor"]["orgName"]+'</span>';
395 
	        };
396 
	        if(item["professor"]["address"]){
397 
	        	str += '<span>  | '+item["professor"]["address"]+'</span>';
398 
	        };
399
400 
	        str +='</p><p class="listtit3 onlyone">'+lastReplyCon+'</p></div></a>';
401
402 
			li.innerHTML = str;
403 
	        table.appendChild(li,table.firstChild);
404 
	    }
499 405 
    });
500 406
501 407 
};
 
@ -564,4 +470,43 @@ function unreadConsultFn (senderId,consultId,i){
564 470 
	return {"unreadCount":unreadCount,
565 471 
			"style":style
566 472 
	}
567 
};
473 
};
474
475 
//点击选择
476 
function checkedFun(i){
477 
	mui("#middlePopover"+i).on('tap','.mui-navigate-right',function(e){
478 
		allPages = 1;
479 
		pageIndex = 1;
480 
		plus.nativeUI.showWaiting(); //显示等待框
481 
		document.getElementById("headck"+i).innerHTML = this.innerHTML;
482 
		var value = this.getAttribute("ck"+i);
483 
		document.getElementById("headck"+i).setAttribute('headck',value);
484 
		document.querySelector('.mui-backdrop').style.display = 'none';
485 
		document.getElementById("middlePopover"+i).style.display = 'none';
486
487 
		//去掉样式类mui-active,要不然会多点击一次
488 
		document.getElementById("middlePopover"+i).classList.remove('mui-active');
489
490 
		//咨询类型传值不同，传""(空)，技术咨询、资源咨询、其他事务
491 
		otypeval.value = document.getElementById("headck2").getAttribute('headck');
492 
		if(otypeval.value == 0) {
493 
			otypeval.value = '';
494 
		}else {
495 
			otypeval.value = document.getElementById("headck2").innerHTML;
496 
		}
497 
		oneedval.value = document.getElementById("headck1").getAttribute('headck');
498 
		ostateval.value = document.getElementById("headck3").getAttribute('headck');
499 
		osortval.value = document.getElementById("headck4").getAttribute('headck');
500
501 
//		initdata();
502 
		pulldownRefresh();
503
504 
		mui('#zixunpullrefresh').scroll().scrollTo(0,0,100);//100毫秒滚动到顶
505 
		plus.nativeUI.closeWaiting();//关闭等待框
506 
	});
507
508 
};
509 
checkedFun(1);
510 
checkedFun(2);
511 
checkedFun(3);
512 
checkedFun(4);

+ 407 - 0
app/js/mui.pullToRefresh.js
View File 

@ -0,0 +1,407 @@
1 
(function($, window, document) {
2 
	var STATE_BEFORECHANGEOFFSET = 'beforeChangeOffset';
3 
	var STATE_AFTERCHANGEOFFSET = 'afterChangeOffset';
4
5 
	var EVENT_PULLSTART = 'pullstart';
6 
	var EVENT_PULLING = 'pulling';
7 
	var EVENT_BEFORECHANGEOFFSET = STATE_BEFORECHANGEOFFSET;
8 
	var EVENT_AFTERCHANGEOFFSET = STATE_AFTERCHANGEOFFSET;
9 
	var EVENT_DRAGENDAFTERCHANGEOFFSET = 'dragEndAfterChangeOffset';
10
11 
	var CLASS_TRANSITIONING = $.className('transitioning');
12 
	var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
13 
	var CLASS_PULL_BOTTOM_TIPS = $.className('pull-bottom-tips');
14 
	var CLASS_PULL_LOADING = $.className('pull-loading');
15 
	var CLASS_SCROLL = $.className('scroll');
16
17 
	var CLASS_PULL_TOP_ARROW = $.className('pull-loading') + ' ' + $.className('icon') + ' ' + $.className('icon-pulldown');
18 
	var CLASS_PULL_TOP_ARROW_REVERSE = CLASS_PULL_TOP_ARROW + ' ' + $.className('reverse');
19 
	var CLASS_PULL_TOP_SPINNER = $.className('pull-loading') + ' ' + $.className('spinner');
20 
	var CLASS_HIDDEN = $.className('hidden');
21
22 
	var SELECTOR_PULL_LOADING = '.' + CLASS_PULL_LOADING;
23 
	$.PullToRefresh = $.Class.extend({
24 
		init: function(element, options) {
25 
			this.element = element;
26 
			this.options = $.extend(true, {
27 
				down: {
28 
					height: 75,
29 
					callback: false,
30 
				},
31 
				up: {
32 
					auto: false,
33 
					offset: 100, //距离底部高度(到达该高度即触发)
34 
					show: true,
35 
					contentinit: '上拉显示更多',
36 
					contentdown: '上拉显示更多',
37 
					contentrefresh: '正在加载...',
38 
					contentnomore: '没有更多数据了',
39 
					callback: false
40 
				},
41 
				preventDefaultException: {
42 
					tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/
43 
				}
44 
			}, options);
45 
			this.stopped = this.isNeedRefresh = this.isDragging = false;
46 
			this.state = STATE_BEFORECHANGEOFFSET;
47 
			this.isInScroll = this.element.classList.contains(CLASS_SCROLL);
48 
			this.initPullUpTips();
49
50 
			this.initEvent();
51 
		},
52 
		_preventDefaultException: function(el, exceptions) {
53 
			for (var i in exceptions) {
54 
				if (exceptions[i].test(el[i])) {
55 
					return true;
56 
				}
57 
			}
58 
			return false;
59 
		},
60 
		initEvent: function() {
61 
			if ($.isFunction(this.options.down.callback)) {
62 
				this.element.addEventListener($.EVENT_START, this);
63 
				this.element.addEventListener('drag', this);
64 
				this.element.addEventListener('dragend', this);
65 
			}
66 
			if (this.pullUpTips) {
67 
				this.element.addEventListener('dragup', this);
68 
				if (this.isInScroll) {
69 
					this.element.addEventListener('scrollbottom', this);
70 
				} else {
71 
					window.addEventListener('scroll', this);
72 
				}
73 
			}
74 
		},
75 
		handleEvent: function(e) {
76 
			switch (e.type) {
77 
				case $.EVENT_START:
78 
					this.isInScroll && this._canPullDown() && e.target && !this._preventDefaultException(e.target, this.options.preventDefaultException) && e.preventDefault();
79 
					break;
80 
				case 'drag':
81 
					this._drag(e);
82 
					break;
83 
				case 'dragend':
84 
					this._dragend(e);
85 
					break;
86 
				case 'webkitTransitionEnd':
87 
					this._transitionEnd(e);
88 
					break;
89 
				case 'dragup':
90 
				case 'scroll':
91 
					this._dragup(e);
92 
					break;
93 
				case 'scrollbottom':
94 
					if (e.target === this.element) {
95 
						this.pullUpLoading(e);
96 
					}
97 
					break;
98 
			}
99 
		},
100 
		initPullDownTips: function() {
101 
			var self = this;
102 
			if ($.isFunction(self.options.down.callback)) {
103 
				self.pullDownTips = (function() {
104 
					var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
105 
					if (element) {
106 
						element.parentNode.removeChild(element);
107 
					}
108 
					if (!element) {
109 
						element = document.createElement('div');
110 
						element.classList.add(CLASS_PULL_TOP_TIPS);
111 
						element.innerHTML = '<div class="mui-pull-top-wrapper"><span class="mui-pull-loading mui-icon mui-icon-pulldown"></span></div>';
112 
						element.addEventListener('webkitTransitionEnd', self);
113 
					}
114 
					self.pullDownTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
115 
					document.body.appendChild(element);
116 
					return element;
117 
				}());
118 
			}
119 
		},
120 
		initPullUpTips: function() {
121 
			var self = this;
122 
			if ($.isFunction(self.options.up.callback)) {
123 
				self.pullUpTips = (function() {
124 
					var element = self.element.querySelector('.' + CLASS_PULL_BOTTOM_TIPS);
125 
					if (!element) {
126 
						element = document.createElement('div');
127 
						element.classList.add(CLASS_PULL_BOTTOM_TIPS);
128 
						if (!self.options.up.show) {
129 
							element.classList.add(CLASS_HIDDEN);
130 
						}
131 
						element.innerHTML = '<div class="mui-pull-bottom-wrapper"><span class="mui-pull-loading">' + self.options.up.contentinit + '</span></div>';
132 
						self.element.appendChild(element);
133 
					}
134 
					self.pullUpTipsIcon = element.querySelector(SELECTOR_PULL_LOADING);
135 
					return element;
136 
				}());
137 
			}
138 
		},
139 
		_transitionEnd: function(e) {
140 
			if (e.target === this.pullDownTips && this.removing) {
141 
				this.removePullDownTips();
142 
			}
143 
		},
144 
		_dragup: function(e) {
145 
			var self = this;
146 
			if (self.loading) {
147 
				return;
148 
			}
149 
			if (e && e.detail && $.gestures.session.drag) {
150 
				self.isDraggingUp = true;
151 
			} else {
152 
				if (!self.isDraggingUp) { //scroll event
153 
					return;
154 
				}
155 
			}
156 
			if (!self.isDragging) {
157 
				if (self._canPullUp()) {
158 
					self.pullUpLoading(e);
159 
				}
160 
			}
161 
		},
162 
		_canPullUp: function() {
163 
			if (this.removing) {
164 
				return false;
165 
			}
166 
			if (this.isInScroll) {
167 
				var scrollId = this.element.parentNode.getAttribute('data-scroll');
168 
				if (scrollId) {
169 
					var scrollApi = $.data[scrollId];
170 
					return scrollApi.y === scrollApi.maxScrollY;
171 
				}
172 
			}
173 
			return window.pageYOffset + window.innerHeight + this.options.up.offset >= document.documentElement.scrollHeight;
174 
		},
175 
		_canPullDown: function() {
176 
			if (this.removing) {
177 
				return false;
178 
			}
179 
			if (this.isInScroll) {
180 
				var scrollId = this.element.parentNode.getAttribute('data-scroll');
181 
				if (scrollId) {
182 
					var scrollApi = $.data[scrollId];
183 
					return scrollApi.y === 0;
184 
				}
185 
			}
186 
			return document.body.scrollTop === 0;
187 
		},
188 
		_drag: function(e) {
189 
			if (this.loading || this.stopped) {
190 
				e.stopPropagation();
191 
				e.detail.gesture.preventDefault();
192 
				return;
193 
			}
194 
			var detail = e.detail;
195 
			if (!this.isDragging) {
196 
				if (detail.direction === 'down' && this._canPullDown()) {
197 
					if (document.querySelector('.' + CLASS_PULL_TOP_TIPS)) {
198 
						e.stopPropagation();
199 
						e.detail.gesture.preventDefault();
200 
						return;
201 
					}
202 
					this.isDragging = true;
203 
					this.removing = false;
204 
					this.startDeltaY = detail.deltaY;
205 
					$.gestures.session.lockDirection = true; //锁定方向
206 
					$.gestures.session.startDirection = detail.direction;
207 
					this._pullStart(this.startDeltaY);
208 
				}
209 
			}
210 
			if (this.isDragging) {
211 
				e.stopPropagation();
212 
				e.detail.gesture.preventDefault();
213 
				var deltaY = detail.deltaY - this.startDeltaY;
214 
				deltaY = Math.min(deltaY, 1.5 * this.options.down.height);
215 
				this.deltaY = deltaY;
216 
				this._pulling(deltaY);
217 
				var state = deltaY > this.options.down.height ? STATE_AFTERCHANGEOFFSET : STATE_BEFORECHANGEOFFSET;
218 
				if (this.state !== state) {
219 
					this.state = state;
220 
					if (this.state === STATE_AFTERCHANGEOFFSET) {
221 
						this.removing = false;
222 
						this.isNeedRefresh = true;
223 
					} else {
224 
						this.removing = true;
225 
						this.isNeedRefresh = false;
226 
					}
227 
					this['_' + state](deltaY);
228 
				}
229 
				if ($.os.ios && parseFloat($.os.version) >= 8) {
230 
					var clientY = detail.gesture.touches[0].clientY;
231 
					if ((clientY + 10) > window.innerHeight || clientY < 10) {
232 
						this._dragend(e);
233 
						return;
234 
					}
235 
				}
236 
			}
237 
		},
238 
		_dragend: function(e) {
239 
			var self = this;
240 
			if (self.isDragging) {
241 
				self.isDragging = false;
242 
				self._dragEndAfterChangeOffset(self.isNeedRefresh);
243 
			}
244 
			if (self.isPullingUp) {
245 
				if (self.pullingUpTimeout) {
246 
					clearTimeout(self.pullingUpTimeout);
247 
				}
248 
				self.pullingUpTimeout = setTimeout(function() {
249 
					self.isPullingUp = false;
250 
				}, 1000);
251 
			}
252 
		},
253 
		_pullStart: function(startDeltaY) {
254 
			this.pullStart(startDeltaY);
255 
			$.trigger(this.element, EVENT_PULLSTART, {
256 
				api: this,
257 
				startDeltaY: startDeltaY
258 
			});
259 
		},
260 
		_pulling: function(deltaY) {
261 
			this.pulling(deltaY);
262 
			$.trigger(this.element, EVENT_PULLING, {
263 
				api: this,
264 
				deltaY: deltaY
265 
			});
266 
		},
267 
		_beforeChangeOffset: function(deltaY) {
268 
			this.beforeChangeOffset(deltaY);
269 
			$.trigger(this.element, EVENT_BEFORECHANGEOFFSET, {
270 
				api: this,
271 
				deltaY: deltaY
272 
			});
273 
		},
274 
		_afterChangeOffset: function(deltaY) {
275 
			this.afterChangeOffset(deltaY);
276 
			$.trigger(this.element, EVENT_AFTERCHANGEOFFSET, {
277 
				api: this,
278 
				deltaY: deltaY
279 
			});
280 
		},
281 
		_dragEndAfterChangeOffset: function(isNeedRefresh) {
282 
			this.dragEndAfterChangeOffset(isNeedRefresh);
283 
			$.trigger(this.element, EVENT_DRAGENDAFTERCHANGEOFFSET, {
284 
				api: this,
285 
				isNeedRefresh: isNeedRefresh
286 
			});
287 
		},
288 
		removePullDownTips: function() {
289 
			if (this.pullDownTips) {
290 
				try {
291 
					this.pullDownTips.parentNode && this.pullDownTips.parentNode.removeChild(this.pullDownTips);
292 
					this.pullDownTips = null;
293 
					this.removing = false;
294 
				} catch (e) {}
295 
			}
296 
		},
297 
		pullStart: function(startDeltaY) {
298 
			this.initPullDownTips(startDeltaY);
299 
		},
300 
		pulling: function(deltaY) {
301 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + deltaY + 'px,0)';
302 
		},
303 
		beforeChangeOffset: function(deltaY) {
304 
			this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
305 
		},
306 
		afterChangeOffset: function(deltaY) {
307 
			this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW_REVERSE;
308 
		},
309 
		dragEndAfterChangeOffset: function(isNeedRefresh) {
310 
			if (isNeedRefresh) {
311 
				this.pullDownTipsIcon.className = CLASS_PULL_TOP_SPINNER;
312 
				this.pullDownLoading();
313 
			} else {
314 
				this.pullDownTipsIcon.className = CLASS_PULL_TOP_ARROW;
315 
				this.endPullDownToRefresh();
316 
			}
317 
		},
318 
		pullDownLoading: function() {
319 
			if (this.loading) {
320 
				return;
321 
			}
322 
			if (!this.pullDownTips) {
323 
				this.initPullDownTips();
324 
				this.dragEndAfterChangeOffset(true);
325 
				return;
326 
			}
327 
			this.loading = true;
328 
			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
329 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + this.options.down.height + 'px,0)';
330 
			this.options.down.callback.apply(this);
331 
		},
332 
		pullUpLoading: function(e) {
333 
			if (this.loading || this.finished) {
334 
				return;
335 
			}
336 
			this.loading = true;
337 
			this.isDraggingUp = false;
338 
			this.pullUpTips.classList.remove(CLASS_HIDDEN);
339 
			e && e.detail && e.detail.gesture && e.detail.gesture.preventDefault();
340 
			this.pullUpTipsIcon.innerHTML = this.options.up.contentrefresh;
341 
			this.options.up.callback.apply(this);
342 
		},
343 
		endPullDownToRefresh: function() {
344 
			this.loading = false;
345 
			this.pullUpTips && this.pullUpTips.classList.remove(CLASS_HIDDEN);
346 
			this.pullDownTips.classList.add(CLASS_TRANSITIONING);
347 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,0,0)';
348 
			if (this.deltaY <= 0) {
349 
				this.removePullDownTips();
350 
			} else {
351 
				this.removing = true;
352 
			}
353 
			if (this.isInScroll) {
354 
				$(this.element.parentNode).scroll().refresh();
355 
			}
356 
		},
357 
		endPullUpToRefresh: function(finished) {
358 
			if (finished) {
359 
				this.finished = true;
360 
				this.pullUpTipsIcon.innerHTML = this.options.up.contentnomore;
361 
				this.element.removeEventListener('dragup', this);
362 
				window.removeEventListener('scroll', this);
363 
			} else {
364 
				this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
365 
			}
366 
			this.loading = false;
367 
			if (this.isInScroll) {
368 
				$(this.element.parentNode).scroll().refresh();
369 
			}
370 
		},
371 
		setStopped: function(stopped) {
372 
			if (stopped != this.stopped) {
373 
				this.stopped = stopped;
374 
				this.pullUpTips && this.pullUpTips.classList[stopped ? 'add' : 'remove'](CLASS_HIDDEN);
375 
			}
376 
		},
377 
		refresh: function(isReset) {
378 
			if (isReset && this.finished && this.pullUpTipsIcon) {
379 
				this.pullUpTipsIcon.innerHTML = this.options.up.contentdown;
380 
				this.element.addEventListener('dragup', this);
381 
				window.addEventListener('scroll', this);
382 
				this.finished = false;
383 
			}
384 
		}
385 
	});
386 
	$.fn.pullToRefresh = function(options) {
387 
		var pullRefreshApis = [];
388 
		options = options || {};
389 
		this.each(function() {
390 
			var self = this;
391 
			var pullRefreshApi = null;
392 
			var id = self.getAttribute('data-pullToRefresh');
393 
			if (!id) {
394 
				id = ++$.uuid;
395 
				$.data[id] = pullRefreshApi = new $.PullToRefresh(self, options);
396 
				self.setAttribute('data-pullToRefresh', id);
397 
			} else {
398 
				pullRefreshApi = $.data[id];
399 
			}
400 
			if (options.up && options.up.auto) { //如果设置了auto，则自动上拉一次
401 
				pullRefreshApi.pullUpLoading();
402 
			}
403 
			pullRefreshApis.push(pullRefreshApi);
404 
		});
405 
		return pullRefreshApis.length === 1 ? pullRefreshApis[0] : pullRefreshApis;
406 
	}
407 
})(mui, window, document);

+ 352 - 0
app/js/mui.pullToRefresh.material.js
View File 

@ -0,0 +1,352 @@
1 
(function($) {
2 
	var CLASS_PULL_TOP_TIPS = $.className('pull-top-tips');
3
4 
	$.PullToRefresh = $.PullToRefresh.extend({
5 
		init: function(element, options) {
6 
			this._super(element, options);
7 
			this.options = $.extend(true, {
8 
				down: {
9 
					tips: {
10 
						colors: ['008000', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
11 
						size: 200, //width=height=size;x=y=size/2;radius=size/4
12 
						lineWidth: 15,
13 
						duration: 1000,
14 
						tail_duration: 1000 * 2.5
15 
					}
16 
				}
17 
			}, this.options);
18 
			this.options.down.tips.color = this.options.down.tips.colors[0];
19 
			this.options.down.tips.colors = this.options.down.tips.colors.map(function(color) {
20 
				return {
21 
					r: parseInt(color.substring(0, 2), 16),
22 
					g: parseInt(color.substring(2, 4), 16),
23 
					b: parseInt(color.substring(4, 6), 16)
24 
				};
25 
			});
26 
		},
27 
		initPullDownTips: function() {
28 
			var self = this;
29 
			if ($.isFunction(self.options.down.callback)) {
30 
				self.pullDownTips = (function() {
31 
					var element = document.querySelector('.' + CLASS_PULL_TOP_TIPS);
32 
					if (element) {
33 
						element.parentNode.removeChild(element);
34 
					}
35 
					if (!element) {
36 
						element = document.createElement('div');
37 
						element.classList.add(CLASS_PULL_TOP_TIPS);
38 
						element.innerHTML = '<div class="mui-pull-top-wrapper"><div class="mui-pull-top-canvas"><canvas id="pullDownTips" width="' + self.options.down.tips.size + '" height="' + self.options.down.tips.size + '"></canvas></div></div>';
39 
						element.addEventListener('webkitTransitionEnd', self);
40 
						document.body.appendChild(element);
41 
					}
42 
					self.pullDownCanvas = document.getElementById("pullDownTips");
43 
					self.pullDownCanvasCtx = self.pullDownCanvas.getContext('2d');
44 
					self.canvasUtils.init(self.pullDownCanvas, self.options.down.tips);
45 
					return element;
46 
				}());
47 
			}
48 
		},
49 
		removePullDownTips: function() {
50 
			this._super();
51 
			this.canvasUtils.stopSpin();
52 
		},
53 
		pulling: function(deltaY) {
54 
			var ratio = Math.min(deltaY / (this.options.down.height * 1.5), 1);
55 
			var ratioPI = Math.min(1, ratio * 2);
56 
			this.pullDownTips.style.webkitTransform = 'translate3d(0,' + (deltaY < 0 ? 0 : deltaY) + 'px,0)';
57 
			this.pullDownCanvas.style.opacity = ratioPI;
58 
			this.pullDownCanvas.style.webkitTransform = 'rotate(' + 300 * ratio + 'deg)';
59 
			var canvas = this.pullDownCanvas;
60 
			var ctx = this.pullDownCanvasCtx;
61 
			var size = this.options.down.tips.size;
62 
			ctx.lineWidth = this.options.down.tips.lineWidth;
63 
			ctx.fillStyle = '#' + this.options.down.tips.color;
64 
			ctx.strokeStyle = '#' + this.options.down.tips.color;
65 
			ctx.stroke();
66 
			ctx.clearRect(0, 0, size, size);
67 
			//fixed android 4.1.x
68 
			canvas.style.display = 'none'; // Detach from DOM
69 
			canvas.offsetHeight; // Force the detach
70 
			canvas.style.display = 'inherit'; // Reattach to DOM
71 
			this.canvasUtils.drawArcedArrow(ctx, size / 2 + 0.5, size / 2, size / 4, 0 * Math.PI, 5 / 3 * Math.PI * ratioPI, false, 1, 2, 0.7853981633974483, 25, this.options.down.tips.lineWidth, this.options.down.tips.lineWidth);
72 
		},
73
74 
		beforeChangeOffset: function(deltaY) {},
75 
		afterChangeOffset: function(deltaY) {},
76 
		dragEndAfterChangeOffset: function(isNeedRefresh) {
77 
			if (isNeedRefresh) {
78 
				this.canvasUtils.startSpin();
79 
				this.pullDownLoading();
80 
			} else {
81 
				this.canvasUtils.stopSpin();
82 
				this.endPullDownToRefresh();
83 
			}
84 
		},
85 
		canvasUtils: (function() {
86 
			var canvasObj = null,
87 
				ctx = null,
88 
				size = 200,
89 
				lineWidth = 15,
90 
				tick = 0,
91 
				startTime = 0,
92 
				frameTime = 0,
93 
				timeLast = 0,
94 
				oldStep = 0,
95 
				acc = 0,
96 
				head = 0,
97 
				tail = 180,
98 
				rad = Math.PI / 180,
99 
				duration = 1000,
100 
				tail_duration = 1000 * 2.5,
101 
				colors = ['35ad0e', 'd8ad44', 'd00324', 'dc00b8', '017efc'],
102 
				rAF = null;
103
104 
			function easeLinear(currentIteration, startValue, changeInValue, totalIterations) {
105 
				return changeInValue * currentIteration / totalIterations + startValue;
106 
			}
107
108 
			function easeInOutQuad(currentIteration, startValue, changeInValue, totalIterations) {
109 
				if ((currentIteration /= totalIterations / 2) < 1) {
110 
					return changeInValue / 2 * currentIteration * currentIteration + startValue;
111 
				}
112 
				return -changeInValue / 2 * ((--currentIteration) * (currentIteration - 2) - 1) + startValue;
113 
			}
114
115 
			function minmax(value, v0, v1) {
116 
				var min = Math.min(v0, v1);
117 
				var max = Math.max(v0, v1);
118 
				if (value < min)
119 
					return min;
120 
				if (value > max)
121 
					return min;
122 
				return value;
123 
			}
124 
			var drawHead = function(ctx, x0, y0, x1, y1, x2, y2, style) {
125 
				'use strict';
126 
				if (typeof(x0) == 'string') x0 = parseInt(x0);
127 
				if (typeof(y0) == 'string') y0 = parseInt(y0);
128 
				if (typeof(x1) == 'string') x1 = parseInt(x1);
129 
				if (typeof(y1) == 'string') y1 = parseInt(y1);
130 
				if (typeof(x2) == 'string') x2 = parseInt(x2);
131 
				if (typeof(y2) == 'string') y2 = parseInt(y2);
132 
				var radius = 3;
133 
				var twoPI = 2 * Math.PI;
134 
				ctx.save();
135 
				ctx.beginPath();
136 
				ctx.moveTo(x0, y0);
137 
				ctx.lineTo(x1, y1);
138 
				ctx.lineTo(x2, y2);
139 
				switch (style) {
140 
					case 0:
141 
						var backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
142 
						ctx.arcTo(x1, y1, x0, y0, .55 * backdist);
143 
						ctx.fill();
144 
						break;
145 
					case 1:
146 
						ctx.beginPath();
147 
						ctx.moveTo(x0, y0);
148 
						ctx.lineTo(x1, y1);
149 
						ctx.lineTo(x2, y2);
150 
						ctx.lineTo(x0, y0);
151 
						ctx.fill();
152 
						break;
153 
					case 2:
154 
						ctx.stroke();
155 
						break;
156 
					case 3:
157 
						var cpx = (x0 + x1 + x2) / 3;
158 
						var cpy = (y0 + y1 + y2) / 3;
159 
						ctx.quadraticCurveTo(cpx, cpy, x0, y0);
160 
						ctx.fill();
161 
						break;
162 
					case 4:
163 
						var cp1x, cp1y, cp2x, cp2y, backdist;
164 
						var shiftamt = 5;
165 
						if (x2 == x0) {
166 
							backdist = y2 - y0;
167 
							cp1x = (x1 + x0) / 2;
168 
							cp2x = (x1 + x0) / 2;
169 
							cp1y = y1 + backdist / shiftamt;
170 
							cp2y = y1 - backdist / shiftamt;
171 
						} else {
172 
							backdist = Math.sqrt(((x2 - x0) * (x2 - x0)) + ((y2 - y0) * (y2 - y0)));
173 
							var xback = (x0 + x2) / 2;
174 
							var yback = (y0 + y2) / 2;
175 
							var xmid = (xback + x1) / 2;
176 
							var ymid = (yback + y1) / 2;
177 
							var m = (y2 - y0) / (x2 - x0);
178 
							var dx = (backdist / (2 * Math.sqrt(m * m + 1))) / shiftamt;
179 
							var dy = m * dx;
180 
							cp1x = xmid - dx;
181 
							cp1y = ymid - dy;
182 
							cp2x = xmid + dx;
183 
							cp2y = ymid + dy;
184 
						}
185 
						ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x0, y0);
186 
						ctx.fill();
187 
						break;
188 
				}
189 
				ctx.restore();
190 
			};
191 
			var drawArcedArrow = function(ctx, x, y, r, startangle, endangle, anticlockwise, style, which, angle, d, lineWidth, lineRatio) {
192 
				'use strict';
193 
				style = typeof(style) != 'undefined' ? style : 3;
194 
				which = typeof(which) != 'undefined' ? which : 1;
195 
				angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
196 
				lineWidth = lineWidth || 1;
197 
				lineRatio = lineRatio || 10;
198 
				d = typeof(d) != 'undefined' ? d : 10;
199 
				ctx.save();
200 
				ctx.lineWidth = lineWidth;
201 
				ctx.beginPath();
202 
				ctx.arc(x, y, r, startangle, endangle, anticlockwise);
203 
				ctx.stroke();
204 
				var sx, sy, lineangle, destx, desty;
205 
				if (which & 1) {
206 
					sx = Math.cos(startangle) * r + x;
207 
					sy = Math.sin(startangle) * r + y;
208 
					lineangle = Math.atan2(x - sx, sy - y);
209 
					if (anticlockwise) {
210 
						destx = sx + 10 * Math.cos(lineangle);
211 
						desty = sy + 10 * Math.sin(lineangle);
212 
					} else {
213 
						destx = sx - 10 * Math.cos(lineangle);
214 
						desty = sy - 10 * Math.sin(lineangle);
215 
					}
216 
					drawArrow(ctx, sx, sy, destx, desty, style, 2, angle, d);
217 
				}
218 
				if (which & 2) {
219 
					sx = Math.cos(endangle) * r + x;
220 
					sy = Math.sin(endangle) * r + y;
221 
					lineangle = Math.atan2(x - sx, sy - y);
222 
					if (anticlockwise) {
223 
						destx = sx - 10 * Math.cos(lineangle);
224 
						desty = sy - 10 * Math.sin(lineangle);
225 
					} else {
226 
						destx = sx + 10 * Math.cos(lineangle);
227 
						desty = sy + 10 * Math.sin(lineangle);
228 
					}
229 
					drawArrow(ctx, sx - lineRatio * Math.sin(endangle), sy + lineRatio * Math.cos(endangle), destx - lineRatio * Math.sin(endangle), desty + lineRatio * Math.cos(endangle), style, 2, angle, d)
230 
				}
231 
				ctx.restore();
232 
			}
233 
			var drawArrow = function(ctx, x1, y1, x2, y2, style, which, angle, d) {
234 
				'use strict';
235 
				if (typeof(x1) == 'string') x1 = parseInt(x1);
236 
				if (typeof(y1) == 'string') y1 = parseInt(y1);
237 
				if (typeof(x2) == 'string') x2 = parseInt(x2);
238 
				if (typeof(y2) == 'string') y2 = parseInt(y2);
239 
				style = typeof(style) != 'undefined' ? style : 3;
240 
				which = typeof(which) != 'undefined' ? which : 1;
241 
				angle = typeof(angle) != 'undefined' ? angle : Math.PI / 8;
242 
				d = typeof(d) != 'undefined' ? d : 10;
243 
				var toDrawHead = typeof(style) != 'function' ? drawHead : style;
244 
				var dist = Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1));
245 
				var ratio = (dist - d / 3) / dist;
246 
				var tox, toy, fromx, fromy;
247 
				if (which & 1) {
248 
					tox = Math.round(x1 + (x2 - x1) * ratio);
249 
					toy = Math.round(y1 + (y2 - y1) * ratio);
250 
				} else {
251 
					tox = x2;
252 
					toy = y2;
253 
				}
254 
				if (which & 2) {
255 
					fromx = x1 + (x2 - x1) * (1 - ratio);
256 
					fromy = y1 + (y2 - y1) * (1 - ratio);
257 
				} else {
258 
					fromx = x1;
259 
					fromy = y1;
260 
				}
261 
				ctx.beginPath();
262 
				ctx.moveTo(fromx, fromy);
263 
				ctx.lineTo(tox, toy);
264 
				ctx.stroke();
265 
				var lineangle = Math.atan2(y2 - y1, x2 - x1);
266 
				var h = Math.abs(d / Math.cos(angle));
267 
				if (which & 1) {
268 
					var angle1 = lineangle + Math.PI + angle;
269 
					var topx = x2 + Math.cos(angle1) * h;
270 
					var topy = y2 + Math.sin(angle1) * h;
271 
					var angle2 = lineangle + Math.PI - angle;
272 
					var botx = x2 + Math.cos(angle2) * h;
273 
					var boty = y2 + Math.sin(angle2) * h;
274 
					toDrawHead(ctx, topx, topy, x2, y2, botx, boty, style);
275 
				}
276 
				if (which & 2) {
277 
					var angle1 = lineangle + angle;
278 
					var topx = x1 + Math.cos(angle1) * h;
279 
					var topy = y1 + Math.sin(angle1) * h;
280 
					var angle2 = lineangle - angle;
281 
					var botx = x1 + Math.cos(angle2) * h;
282 
					var boty = y1 + Math.sin(angle2) * h;
283 
					toDrawHead(ctx, topx, topy, x1, y1, botx, boty, style);
284 
				}
285 
			};
286
287 
			var spinColors = function(currentIteration, totalIterations) {
288 
				var step = currentIteration % totalIterations;
289 
				if (step < oldStep)
290 
					colors.push(colors.shift());
291 
				var c0 = colors[0],
292 
					c1 = colors[1],
293 
					r = minmax(easeLinear(step, c0.r, c1.r - c0.r, totalIterations), c0.r, c1.r),
294 
					g = minmax(easeLinear(step, c0.g, c1.g - c0.g, totalIterations), c0.g, c1.g),
295 
					b = minmax(easeLinear(step, c0.b, c1.b - c0.b, totalIterations), c0.b, c1.b);
296
297 
				oldStep = step;
298 
				return "rgb(" + parseInt(r) + "," + parseInt(g) + "," + parseInt(b) + ")";
299 
			}
300
301 
			var spin = function(t) {
302 
				var timeCurrent = t || (new Date).getTime();
303 
				if (!startTime) {
304 
					startTime = timeCurrent;
305 
				}
306 
				tick = timeCurrent - startTime;
307 
				acc = easeInOutQuad((tick + tail_duration / 2) % tail_duration, 0, duration, tail_duration);
308 
				head = easeLinear((tick + acc) % duration, 0, 360, duration);
309 
				tail = 20 + Math.abs(easeLinear((tick + tail_duration / 2) % tail_duration, -300, 600, tail_duration));
310
311 
				ctx.lineWidth = lineWidth;
312 
				ctx.lineCap = "round";
313
314 
				ctx.strokeStyle = spinColors(tick, duration);
315 
				ctx.clearRect(0, 0, size, size);
316 
				//fixed android 4.1.x
317 
				canvasObj.style.display = 'none'; // Detach from DOM
318 
				canvasObj.offsetHeight; // Force the detach
319 
				canvasObj.style.display = 'inherit'; // Reattach to DOM
320 
				ctx.beginPath();
321 
				ctx.arc(size / 2, size / 2, size / 4, parseInt(head - tail) % 360 * rad, parseInt(head) % 360 * rad, false);
322 
				ctx.stroke();
323
324 
				rAF = requestAnimationFrame(spin);
325 
			};
326 
			var startSpin = function() {
327 
				startTime = 0;
328 
				oldStep = 0;
329 
				rAF = requestAnimationFrame(spin);
330 
			};
331 
			var stopSpin = function() {
332 
				rAF && cancelAnimationFrame(rAF);
333 
			}
334 
			var init = function(canvas, options) {
335 
				canvasObj = canvas;
336 
				ctx = canvasObj.getContext('2d');
337 
				var options = $.extend(true, {}, options);
338 
				colors = options.colors;
339 
				duration = options.duration;
340 
				tail_duration = options.tail_duration;
341 
				size = options.size;
342 
				lineWidth = options.lineWidth;
343 
			};
344 
			return {
345 
				init: init,
346 
				drawArcedArrow: drawArcedArrow,
347 
				startSpin: startSpin,
348 
				stopSpin: stopSpin
349 
			};
350 
		})()
351 
	});
352 
})(mui);