WebContent/WEB-INF/jsp/pc/banner/bannerList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>首页banner设置</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">
		<style>
			.bannerShow .item {
				width: 300px;
				height: 150px;
				position: relative;
				display: inline-block;
				margin-right: 16px;
				margin-bottom: 16px;
			}
			
			.bannerShow .item img {
				width: 100%;
				height: 100%;
			}
			
			.bannerShow .item:hover #deleteBtn {
				display: inline-block;
			}
			
			.bannerShow .item #deleteBtn {
				position: absolute;
				right: -20px;
				top: -20px;
				font-size: 50px;
				color: red;
				display: none;
			}
		</style>
	</head>

	<body class="wrap">
		<blockquote class="layui-elem-quote">说明：banner尺寸建议为：750*350</blockquote>
		<button class="layui-btn uploadImg"><i class="layui-icon">&#xe61f;</i> 上传banner图</button>
		<fieldset class="layui-elem-field layui-field-title">
			<legend>banner图片展示</legend>
		</fieldset>
		<div class="bannerShow">

		</div>
		<div class="nodata">暂无banner图，请上传banner图片。</div>
	</body>
	<script src='/zzhnc/res/js/jquery.min.js'></script>
	<script src="/zzhnc/res/plugins/layui/layui.js"></script>
	<script src="/zzhnc/res/js/me.js"></script>
	<script>
		layui.use(['table', 'upload', 'layer'], function() {
			var table = layui.table,
				upload = layui.upload,
				layer = layui.layer;

			//初始化数据
			function initData() {
				$.get("/zzhnc/banner/list", {
					url: "1"
				}, function(res) {
					console.log(res)
					if(res.code == 0) {
						if(res.data.length > 0) {
							$(".nodata").hide()
							$(".bannerShow").html("");
							var str = "";
							for(var i = 0; i < res.data.length; i++) {
								str += '<div class="item" >' +
									'<img src="' + res.data[i].imageUrl + '" />' +
									'<i class="layui-icon" data-id="' + res.data[i].id + '" id="deleteBtn">&#x1007;</i>' +
									'</div>';
							}
							$(".bannerShow").html(str);
						} else {
							$(".nodata").show()
						}

					}
				})
			}

			initData();

			//上传图片
			upload.render({
				url: '/zzhnc/upload/UploadImg',
				elem: '.uploadImg',
				method: 'post',
				done: function(res) {
					console.log(res)
					if(res.code == 0) {
						$.post("/zzhnc/banner/add", {
							url: res.data.imgurl
						}, function(res) {
							console.log(res)
							if(res.code == 0) {
								layer.msg("添加成功")
								initData()
							}else{
								layer.msg("添加失败")
							}
						})
					}
				}
			});

			//删除banner图
			$(document).on("click", "#deleteBtn", function() {
				var id = $(this).data("id");
				$.get("/zzhnc/banner/" + id + "/delete", "", function(res) {
					console.log(res)
					if(res.code == 0) {
						layer.msg('删除成功！');
						initData()
					} else {
						layer.msg('删除失败！');
					}
				})
			})

		})
	</script>

</html>