ygtx
/
ygoa_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
							<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>意见箱</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/common.css">
		<style type="text/css">
			.cleafix{ clear:both;}
			.pull_l{ float:left;}
			.pull_r{ float:right;}
			.revert{  font-size:12px; color:#333; padding:0 30px; line-height:18px; margin-bottom:10px;}
			.revert span{ font-size:10px; color:#444;}
			.column{padding:0 15px;  padding-top:21px; padding-bottom:10px; margin-bottom:10px; }
			.column h1{margin:0 auto;line-height:18px; margin-bottom:5px; padding:0 15px; font-size:12px; color:#333;}
			.column h1 a{font-size:12px; color:#333; padding-left:6px;}
			.column ul a{ font-size:10px; color:#999; padding-left:3px;}
			.column ul {line-height:15px;} 
			.user{   margin-left:15px; margin-right:15px; width: 60px;}
			.user img{ width:12px; display:block;} 
			.time img{ width:12px; display:block;}
			.mui-bar.mui-bar-nav .mui-title {
				color: #ca0002;
			}
			
			.mui-action-back {
				color: #ca0002;
			}
		</style>
</head>

<body>
	
	<header class="mui-bar mui-bar-nav ">
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<h1 id="title" class="mui-title">意见箱</h1>
	</header>
	<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
		<div class="mui-scroll" style="margin-top: 5px;">
        	<ul class="mui-table-view mui-table-view-chevron" id="listDetail">
	        	<li class="mui-table-view-cell mui-media">
	        	<!--<div class="column">
	            	<div class="new"><img src="new.png"></div>
	                <h1>【办公环境】关于办公环境问题，希望大家多多参与反馈，提出意见提出意见提出意见提出意见提出意见提出意见提出意见提出意见</h1>
	                <div class="revert">管理员回复：<span>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</span></div>
	                <ul>
	                	<li class="pull_r user"><img src="User.png" class="pull_l">姓名</li>
	                    <li class="pull_r time"><img src="Clock.png" class="pull_l">0分钟前</li>
	                    <li class="cleafix"></li>
	                </ul>
	            </div>-->
            	</li>
            </ul>
        </div>
    </div>
    <script src="../../js/mui.min.js"></script>
	<script src="../../js/config.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/jquery.min.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					down: {
						style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
						color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
						height: '50px', //可选,默认50px.下拉刷新控件的高度,
						range: '100px', //可选 默认100px,控件可下拉拖拽的范围
						offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
						auto: true, //可选,默认false.首次加载自动上拉刷新一次
						callback: reloadNews //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
					},
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh
					}
				}
			});
			/**
			 * 下拉刷新具体业务实现
			 */
			function reloadNews() {
				pageNo = 1;
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = "";
				addData();
			}
			
			var pageNo = 1;
			var folder_id = 0;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				addData();
			}
			
			function addData() {
				var url = API.API_URL();
				var obj = {
					method: "adviceList",
					pageNo: pageNo,
					pageSize: APP.PageSize,
					p: '{user_id:'+app.getState().user.id+'}'
				};
				app.ajax(obj, function(data) {
					//服务器返回响应
					console.log(JSON.stringify(data))
					var totalRow = data.totalRow;
					var totalPage = data.totalPage;
					var list = data.list;
					var table = document.body.querySelector('.mui-table-view');
					for(var i = 0, len = list.length; i < len; i++) {
						var username = list[i].username;
						var create_time = list[i].create_time;
						var content = list[i].content
						var replay_content = "";
						var replay_name = "";
						var replay_time = "";
						if(list[i].replay_time){
							replay_time = list[i].replay_time;
						}
						if(list[i].replay_name){
							replay_name = list[i].replay_name;
						}
						if(list[i].replay_content){
							replay_content = list[i].replay_content;
						}
						var li = document.createElement('li');
						li.className = 'mui-table-view-cell mui-media';			
						var html = '<div class="column">'
				                +' <h1>'+content+'</h1>'
				                +' <div class="revert">管理员回复：<span>'+replay_content+'</span></div>'
				                +' <ul>'
				                +' 	<li class="pull_r user"><img src="../../images/User.png" class="pull_l"><a href="" class="pull_l">'+username+'</a></li>'
				                +'     <li class="pull_r time"><img src="../../images/Clock.png" class="pull_l"><a href="" class="pull_l">'+create_time+'</a></li>'
				                +'     <li class="cleafix"></li>'
				                +' </ul>'
				            	+' </div>';           
						li.innerHTML = html;
						table.appendChild(li);
					}
					if(totalPage == 0 || totalPage == 1) {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh(totalPage == pageNo); //参数为true代表没有更多数据了。
					}
			
					if(pageNo == 1) {
						mui('#pullrefresh').pullRefresh().endPulldown();
					}
					pageNo = pageNo + 1;
					if(totalPage == 0) {
						$(".mui-scroll").html("<div style='text-align:center;padding-top:10px;'>暂无数据</div>")
					}
				});
			}
			
			mui.plusReady(function() {
				
			});
			
		</script>
		

	</body>

</html>