jeesite/web/src/main/resources/views/modules/consult/index.html

<% layout('/layouts/default.html', {title: '咨询帮助首页', bodyClass: ''}){ %>
<div id="pageayout" class="border" style="overflow: auto; padding: 0px;">
	<div id='help' class="help" style="margin: 10px;background: #fff; ">
		<div style="width: 100%;height: 100%;display: flex;justify-content: space-around;padding-top: 20px;">
			<div style="width:98%;height: 100%;margin:1%">
				<input type="text" id="searchType" value="全部">
				<div style="width: 100%;padding: 10px 0; display: flex;align-items: center;justify-content: space-between;">
					<div style="display: flex;align-items: center;">
						<div>状态:</div>
						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
								<span class="dataLabel">所有</span>
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								<li><a href="javascript:void(0);" onclick="changeLabel(this)" data="全部">所有</a></li>

								<li><a href="javascript:void(0);" onclick="changeLabel(this)"  data="me">我的</a></li>
							</ul>
						</div>
					</div>
					<div style="display: flex;align-items: center;">
						<div>回复:</div>
						<div class="dropdown">
							<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
								所有
								<span class="caret"></span>
							</button>
							<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
								<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">所有</a></li>
								<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">已回复</a></li>
								<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">未回复</a></li>
							</ul>
						</div>
					</div>
					<div class="input-group">
						<input type="text" class="form-control" placeholder="请输入相关键词" aria-describedby="basic-addon2">
						<span class="input-group-addon" id="basic-addon2">
                        <button style="border: none;" onclick="fetchData()">搜索</button>
                    </span>
					</div>
					<div class="btn-group" role="group" aria-label="...">
						<button type="button" class="btn btn-default" onclick="toAddConsult()">我要咨询</button>
					</div>
				</div>
				<div style="width: 100%;height: 85%;overflow: auto;" class="frameBody">

					<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;">
						<div class="media">
							<div class="media-left">
								<a href="http://192.168.1.56:8081/fwzx/zxbz#">
									<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">
										<img class="media-object" src="./Document_files/wd1.png" width="40px">
									</div>
								</a>
							</div>
							<div class="media-body" style="">
								<h4 class="media-heading">${data}</h4>
								<div>怎么报英语四六级</div>
							</div>
						</div>
						<div style="width: 100%;display: flex;justify-content: flex-end;">
							<a>回复</a> <span>|</span> <a>评论(20)</a>
						</div>
						<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">
							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
									<div style="font-size: 16px;color:#2766b3;">
										教务处:
									</div>
									<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>
								</div>
								<div style="margin-top: 4px;">需要用校园网，考试成绩达标</div>
							</div>
							<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">
								<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
									<div style="font-size: 16px;color:#2766b3;">
										小王同学:
									</div>
									<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>
								</div>
								<div style="margin-top: 4px;">英语成绩要70分及以上</div>
							</div>
						</div>
						<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">
							<div style="color: #888;margin-right: 4px;">剩余3条评论</div>
							<a>点击查看</a>
							<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>
						</div>
					</div>

				</div>

				<div style="bottom: 0;width: 100%;text-align: center;">
					<nav aria-label="Page navigation">
						<ul class="pagination">
							<li>
								<a href="http://192.168.1.56:8081/fwzx/zxbz#" aria-label="Previous">
									<span aria-hidden="true">«</span>
								</a>
							</li>
							<li class="active"><a href="http://192.168.1.56:8081/fwzx/zxbz#">1</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">2</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">3</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">4</a></li>
							<li><a href="http://192.168.1.56:8081/fwzx/zxbz#">5</a></li>
							<li>
								<a href="http://192.168.1.56:8081/fwzx/zxbz#" aria-label="Next">
									<span aria-hidden="true">»</span>
								</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
	</div>
</div>
<% } %>

<style>
	html,body{
		background-color: white;
		height: auto;
	}
</style>
<script src="${ctxStatic}/schedule/fullcalendar/js/jquery-1.7.2.min.js"></script>
<script src="${ctxStatic}/schedule/jquery-ui/jquery-ui.min.js"></script>
<script type='text/javascript'>
	var tempDataList = null;
	$(document).ready(function () {

		// js.showErrorMessage('hello');
		fetchData()

	});

	//获取遍历的list数据
	function  fetchData(){

		var searchType = $("#searchType").val();
		js.ajaxSubmit("${ctx}/consult/consultHelp/allDataList?searchType="+searchType, function(data){
			tempDataList = data.list
			initDomEle(tempDataList)
		});
	}

	function initDomEle(list){
		console.log(list)

		//todo  使用freemarker遍历渲染dom
		$(".frameBody").empty();
		var domEleOld = '<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;">\n' +
				'<div class="media">\n' +
				'<div class="media-left">\n' +
				'<a href="http://192.168.1.56:8081/fwzx/zxbz#">\n' +
				'<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">\n' +
				'<img class="media-object" src="./Document_files/wd1.png" width="40px">\n' +
				'</div>\n' +
				'</a>\n' +
				'</div>\n' +
				'<div class="media-body" style="">\n' +
				'<h4 class="media-heading">${data}</h4>\n' +
				' <div>怎么报英语四六级</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'<div style="width: 100%;display: flex;justify-content: flex-end;">\n' +
				'<a>回复</a> <span>|</span> <a>评论(20)</a>\n' +
				'</div>\n' +
				'<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">\n' +
				'<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
				'<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
				'<div style="font-size: 16px;color:#2766b3;">\n' +
				'教务处:\n' +
				'</div>\n' +
				'<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
				'</div>\n' +
				'<div style="margin-top: 4px;">需要用校园网，考试成绩达标</div>\n' +
				'</div>\n' +
				'<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
				'<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
				'<div style="font-size: 16px;color:#2766b3;">\n' +
				'小王同学:\n' +
				'</div>\n' +
				'<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
				'</div>\n' +
				'<div style="margin-top: 4px;">英语成绩要70分及以上</div>\n' +
				'</div>\n' +
				'</div>\n' +
				'<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">\n' +
				'<div style="color: #888;margin-right: 4px;">剩余3条评论</div>\n' +
				'<a>点击查看</a>\n' +
				'<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>\n' +
				'</div>\n' +
				'</div>';

		var domEle = '<div style="width: 100%;height: auto;background-color: #eee;padding: 10px 20px;margin-bottom: 15px;">\n' +
				'\t\t\t\t\t\t<div class="media">\n' +
				'\t\t\t\t\t\t\t<div class="media-left">\n' +
				'\t\t\t\t\t\t\t\t<a href="http://192.168.1.56:8081/fwzx/zxbz#">\n' +
				'\t\t\t\t\t\t\t\t\t<div style="width:50px;height:50px;border-radius:50%;background-color:#fff;display: flex;justify-content: space-around;align-items: center;overflow: hidden; ">\n' +
				'\t\t\t\t\t\t\t\t\t\t<img class="media-object" src="./Document_files/wd1.png" width="40px">\n' +
				'\t\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t</a>\n' +
				'\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t<div class="media-body" style="">\n' +
				'\t\t\t\t\t\t\t\t<h4 class="media-heading">${data}</h4>\n' +
				'\t\t\t\t\t\t\t\t<div>怎么报英语四六级</div>\n' +
				'\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: flex-end;">\n' +
				'\t\t\t\t\t\t\t<a>回复</a> <span>|</span> <a>评论(20)</a>\n' +
				'\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t<div style="width:85%;margin-left: 15%;border-top: 1px solid #ccc;margin-top: 5px;">\n' +
				'\t\t\t\t\t\t\t<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
				'\t\t\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
				'\t\t\t\t\t\t\t\t\t<div style="font-size: 16px;color:#2766b3;">\n' +
				'\t\t\t\t\t\t\t\t\t\t教务处:\n' +
				'\t\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t\t<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
				'\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t<div style="margin-top: 4px;">需要用校园网，考试成绩达标</div>\n' +
				'\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t<div style="width: 100%;padding:10px 0 10px 20px;border-bottom: 1px solid #ccc;">\n' +
				'\t\t\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: space-between;align-items: center;">\n' +
				'\t\t\t\t\t\t\t\t\t<div style="font-size: 16px;color:#2766b3;">\n' +
				'\t\t\t\t\t\t\t\t\t\t小王同学:\n' +
				'\t\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t\t<div style="color: #888;">2022-3-14 13:00 <a>评论</a></div>\n' +
				'\t\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t\t\t<div style="margin-top: 4px;">英语成绩要70分及以上</div>\n' +
				'\t\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t\t<div style="width: 100%;display: flex;justify-content: flex-end;align-items: baseline;margin-top:10px;">\n' +
				'\t\t\t\t\t\t\t<div style="color: #888;margin-right: 4px;">剩余3条评论</div>\n' +
				'\t\t\t\t\t\t\t<a>点击查看</a>\n' +
				'\t\t\t\t\t\t\t<button onclick="toAddComment()" style="border-color: #ccc;color: #2766b3;background-color: #fff;margin-left: 4px;">我要评论</button>\n' +
				'\t\t\t\t\t\t</div>\n' +
				'\t\t\t\t\t</div>';

		$(".frameBody").append($(domEle))
	}

	//跳转到添加咨询页面处
	function toAddConsult(){
		js.addTabPage(null, "新增咨询帮助", "${ctx}/consult/consultHelp/form2")
	}

	//发表评论
	function toAddComment(id){
		id="1534367119269007360"
		js.addTabPage(null, "新增咨询评论", "${ctx}/consult/consultHelpSlave/form?consultId="+id)
	}

	//状态下拉修改数据
	function changeLabel(obj){
		$("#dropdownMenu1 .dataLabel").text($(obj).text());
		$("#searchType").val($(obj).attr('data'))
	}
</script>