ygtx
/
ygoa_app


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-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">
		<title>党建系统</title>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/main.css" />

		<style>
			.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>
			<div class="bnt"><span id="folderName">全部</span><img src="../../images/more1.png" width="12px" class="user-arrow"></div>
			<div class="menu">
				<ul>
					<template v-for="folder in folders">
						<li>
							<a href="javascript:;" :data-folderId="folder.id" v-on:click="chageV(folder)">{{folder.name}}</a>
						</li>
						<div class="line"></div>
					</template>
				</ul>
			</div>
		</header>

		<div class="mui-content">

			<div id="pullrefresh" class="mui-content mui-scroll-wrapper" style="">
				<div class="mui-scroll">
					<div class="mui-card" v-for="item in items">
						<a href="javascript:;" :data-articleId="item.articleId" @tap="open_detail(item)">
							<div class="mui-card-header mui-card-media">
								<div class="yuan yuan_l"></div>
								<div class="yuan yuan_r"></div>
								<div class="mui-card-media-object mui-pull-left">
									<img src="../../images/wenzhang.png" width="14px" height="14px" />
								</div>
								<span class="biaoqian mui-pull-right">{{item.publish_time}}</span>
								<div class="mui-card-media-body">
									{{item.title}}
								</div>
							</div>
							<div class="mui-card-content" v-if="item.imgUrl === ''">
								<div class="mui-card-content-inner">
									{{item.content}}
								</div>
							</div>
							<div class="mui-card-content" v-else>
								<div class="card-img mui-pull-left"><img :src="item.imgUrl"></div>
								<div class="mui-card-content-inner mui-pull-left mui-card-content-inner1">
									{{item.content}}
								</div>
								<div class="mui-clearfix"></div>
							</div>
							<!--<div class="mui-card-footer">2018/1/4</div>-->
						</a>
					</div>

				</div>
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-1.11.2.min.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/config.js"></script>
		<script src="../../js/app.js"></script>
		<script src="../../js/dj/article/list.js"></script>
		<script src="../../js/vue.min.js"></script>

		<script>
			var pageDetail = null;
			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: '正在加载...',
						auto: true, //可选,默认false.自动上拉加载一次
						callback: pullupRefresh
					}
				}
			});
			//下拉菜单
			$(".menu").hide();
			$(function() {
				var usercenter = {

					init: function() {
						this.modal();

					},
					modal: function() {
						$(".bnt").click(function() {
							if($(".user-arrow").hasClass("rotate")) { //点击箭头旋转180度
								$(".user-arrow").removeClass("rotate");
								$(".user-arrow").addClass("rotate1");
								$(".menu").slideUp(500);
							} else {
								$(".user-arrow").removeClass("rotate1"); //再次点击箭头回来
								$(".user-arrow").addClass("rotate");
								$(".menu").slideDown(500);
							}
						})
					}
				}
				usercenter.init();
			});

			var vmF = new Vue({
				el: '.menu',
				data: {
					folders: [] //列表信息流数据
				}
			});

			var vmA = new Vue({
				el: '#pullrefresh',
				data: {
					items: [] //列表信息流数据
				}
			});

			/**
			 * 下拉刷新具体业务实现
			 */
			function reloadNews() {
				pageNo = 1;
				vmA.items = [];
				//				var table = document.body.querySelector('.mui-table-view');
				//				table.innerHTML = "";
				addData();
			}

			var pageNo = 1;
			var folder_id = 272;
			var folder_id_sub;
			/**
			 * 上拉加载具体业务实现
			 */
			function pullupRefresh() {
				addData();
			}

			function addData() {
				var url = API.API_URL();
				var method = "pageArticleParent";
				var fid = "";
				if(folder_id_sub) {
					fid = folder_id_sub;
					method = "pageArticle";
				} else {
					fid = folder_id;
				}
				console.log("articleList2.html==="+fid);
				var obj = {
					method: method,
					pageNo: pageNo,
					pageSize: APP.PageSize,
					p: '{folderId:' + fid + '}'
				};
				app.ajax(obj, function(data) {
					//服务器返回响应
					console.log(JSON.stringify(data))
					var totalRow = data.totalRow;
					var totalPage = data.totalPage;
					var list = data.list;
					console.log(list.length);
					if(list.length > 0) {
						vmA.items = vmA.items.concat(convert(list));
					}

					/*var table = document.body.querySelector('.mui-table-view');
					for(var i = 0, len = list.length; i < len; i++) {
						var listTitle = list[i].title;
						var listTime = list[i].publish_time;
						var content = list[i].content
						var articleId = list[i].id;
						var imgUrl = getImgUrl(list[i]);
						var li = document.createElement('li');
						li.setAttribute("articleId", articleId);
						li.className = 'mui-table-view-cell mui-media';
						var html = '<a href = "#" class = "mui-navigate-right ' + (imgUrl == "" ? "no-picture" : '') + '">';
						if(imgUrl) {
							html += '<div class="imgbox mui-media-object mui-pull-left"><img src="' + imgUrl + '"></div>';
						}

						html += '<div class="mui-media-body">' + listTitle +
							'<p class="mui-ellipsis-2">' + listTime + '</p>' + '</div>' + '</a>';
						li.innerHTML = html;
						table.appendChild(li);
					}*/
					pageNo = endPull(totalPage, pageNo);
				});
			}

			/**
			 * 1、将服务端返回数据，转换成前端需要的格式
			 * 2、若服务端返回格式和前端所需格式相同，则不需要改功能
			 * 
			 * @param {Array} items 
			 */
			function convert(items) {
				var newItems = [];
				items.forEach(function(item) {
					newItems.push({
						articleId: item.id,
						title: item.title.substr(0, 17),
						publish_time: item.publish_time,
						imgUrl: getImgUrl(item),
						content: subContent(replaceHtml(item.content), 70)
					});
				});
				return newItems;
			}

			mui.plusReady(function() {
				var self = plus.webview.currentWebview();
				folder_id = self.folder_id;
				var title1 = mui('#title');
				title1[0].innerHTML = self.title;

				//接收上个界面传递的参数
				window.addEventListener('listEvent', function(event) {

				});

				mui(".mui-segmented-control").on('tap', 'a', function() {
					folder_id_sub = this.id;
					pageNo = 1
					document.body.querySelector('.mui-table-view').innerHTML = "";
					addData();
				});

				pageDetail = mui.preload({
					url: 'detailList.html',
					id: 'detailList.html',
				})
				//				mui('#listDetail').on('tap', 'li', function() {
				//					mui.fire(pageDetail, 'newsEvent', {
				//						'articleId': this.getAttribute('articleId')
				//					})
				//					mui.openWindow({
				//						url: 'detailList.html',
				//						id: 'detailList.html'
				//					})
				//				})

				loadFolder();
			});

			function chageV(e) {
				//				alert("chageV");
				pageNo = 1;
				folder_id_sub = e.id;
				document.body.querySelector('#folderName').innerHTML = e.name;
				//				$(".menu").hide();
				$(".user-arrow").removeClass("rotate"); //再次点击箭头回来
				$(".user-arrow").addClass("rotate1");
				$(".menu").slideUp(500);
				vmA.items = [];
				addData();
			}

			function loadFolder() {
				var url = API.API_URL();
				var obj = {
					method: "foldersByParent",
					p: '{folderId:' + folder_id + '}'
				};
				app.ajax(obj, function(data) {
					var folders = data.list;
					//					console.log(folders);
					//					var html = '<a class="mui-control-item mui-active" href="#item1">全部</a>';
					//					if(folders.length > 3) {
					//						html += fixHtml1(folders);
					//					} else {
					//						html += fixHtml2(folders);
					//					}
					//					$("#segmentedControl").html(html);
					vmF.folders = folders;
				});
			}

			/**
			 * 打开新闻详情
			 * 
			 * @param {Object} item 当前点击的新闻对象
			 */
			function open_detail(item) {
				//触发子窗口变更新闻详情
				mui.fire(pageDetail, 'newsEvent', {
					articleId: item.articleId
				});

				setTimeout(function() {
					pageDetail.show("slide-in-right", 300);
				}, 150);
			}
		</script>

	</body>

</html>