From c81052b0b90ed1deafb7307cf911ae05e7ea24b3 Mon Sep 17 00:00:00 2001
From: whb <17803890193@163.com>
Date: Sat, 19 Aug 2023 17:07:29 +0800
Subject: [PATCH] =?UTF-8?q?=E7=9B=AE=E5=BD=95=E5=BD=92=E5=B1=9E=E4=BF=AE?=
=?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../service/impl/CourseServiceImpl.java | 4 -
.../zhiyun03/filter/LoginCheckFilter.java | 2 +-
.../invite/service/impl/InviteServieImpl.java | 3 -
.../serve/service/impl/ServeServiceImpl.java | 4 -
src/main/resources/application.yml | 2 +-
.../templates/layui-v2.6.8/academicList.html | 182 +++--
.../layui-v2.6.8/applicationList.html | 737 ++++++++++++-----
.../templates/layui-v2.6.8/courseList.html | 737 ++++++++++++-----
.../templates/layui-v2.6.8/downloadList.html | 156 +++-
.../templates/layui-v2.6.8/inviteList.html | 7 +
.../templates/layui-v2.6.8/login.html | 2 +-
.../templates/layui-v2.6.8/textualList.html | 761 +++++++++++++-----
12 files changed, 1920 insertions(+), 677 deletions(-)
diff --git a/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java b/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
index df5d65e..f522221 100644
--- a/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
+++ b/src/main/java/com/zhiyun/zhiyun03/course/service/impl/CourseServiceImpl.java
@@ -49,10 +49,6 @@ public class CourseServiceImpl extends ServiceImpl<CourseMapper,Course> implemen
PageHelper.startPage(page,limit);
//查询所有课程
List<CourseVo> courseVoList = courseMapper.queryCourse();
- if (courseVoList.isEmpty())
- {
- throw new ServiceException("400","课程数据为空");
- }
PageInfo<CourseVo> pageInfo = new PageInfo<CourseVo>(courseVoList);
PageVO<CourseVo> courseVoPageInfo = new PageVO<>();
//当前页
diff --git a/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java b/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
index 8bcdcee..9d0a391 100644
--- a/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
+++ b/src/main/java/com/zhiyun/zhiyun03/filter/LoginCheckFilter.java
@@ -17,7 +17,7 @@ import java.io.IOException;
* @author: Jie
* @date: 2022/8/10 9:48
**/
-@WebFilter(filterName = "LoginCheckFilter", urlPatterns = "/*")
+//@WebFilter(filterName = "LoginCheckFilter", urlPatterns = "/*")
@Slf4j
public class LoginCheckFilter implements Filter {
diff --git a/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java b/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
index 4ee4f06..235e859 100644
--- a/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
+++ b/src/main/java/com/zhiyun/zhiyun03/invite/service/impl/InviteServieImpl.java
@@ -42,9 +42,6 @@ public class InviteServieImpl extends ServiceImpl<InviteMapper, Invite> implemen
PageHelper.startPage(page, limit);
//查询所有课程
List<InviteVo> inviteVoList = inviteMapper.queryInvite();
- if (inviteVoList.isEmpty()) {
- throw new ServiceException("400", "课程数据为空");
- }
PageInfo<InviteVo> pageInfo = new PageInfo<InviteVo>(inviteVoList);
PageVO<InviteVo> inviteVoPageVO = new PageVO<>();
//当前页
diff --git a/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java b/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
index bc26748..85121a0 100644
--- a/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
+++ b/src/main/java/com/zhiyun/zhiyun03/serve/service/impl/ServeServiceImpl.java
@@ -43,10 +43,6 @@ public class ServeServiceImpl extends ServiceImpl<ServeMapper, Serve> implements
PageHelper.startPage(page,limit);
//查询所有课程
List<ServeVo> serveVoList = serveMapper.queryService();
- if (serveVoList.isEmpty())
- {
- throw new ServiceException("400","服务数据为空");
- }
PageInfo<ServeVo> pageInfo = new PageInfo<ServeVo>(serveVoList);
PageVO<ServeVo> serveVoPageVO = new PageVO<>();
//当前页
diff --git a/src/main/resources/application.yml b/src/main/resources/application.yml
index 0befe0c..8f27ab5 100644
--- a/src/main/resources/application.yml
+++ b/src/main/resources/application.yml
@@ -19,7 +19,7 @@ spring:
druid:
url: jdbc:mysql://localhost:3306/zhiyun?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai
username: root
- password: 123456
+ password: root
thymeleaf:
cache: false
prefix: classpath:/templates
diff --git a/src/main/resources/templates/layui-v2.6.8/academicList.html b/src/main/resources/templates/layui-v2.6.8/academicList.html
index f117e9d..62dbb9c 100644
--- a/src/main/resources/templates/layui-v2.6.8/academicList.html
+++ b/src/main/resources/templates/layui-v2.6.8/academicList.html
@@ -7,44 +7,10 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+ integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
- <style>
- .select-img-wrap {
- width: calc(100% - 40px);
- margin: 0 20px;
- }
-
- .select-img-wrap .dir-img-icon {
- position: relative;
- }
-
- .select-img-wrap .dir-img-icon .icon {
- width: 70px;
- height: 70px;
- cursor: pointer;
- vertical-align: bottom;
- background: #e7e7e7;
- }
-
- .select-img-wrap .dir-img-icon.active::before {
- content: "";
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- .select-img-wrap .dir-img-icon.active::after {
- content: "";
- width: 16px;
- height: 8px;
- border: 3px solid #FF5722;
- border-bottom: 0;
- border-left: 0;
- position: absolute;
- right: 10px;
- bottom: 10px;
- transform: rotate(135deg);
- }
- </style>
</head>
<body>
@@ -338,7 +304,55 @@
</script>
<script type="text/html" id="addForm">
+ <style>
+ /* 取消弹框拖拽 */
+ .layui-layer-resize {
+ display: none;
+ }
+
+ .select-img-wrap {
+ width: calc(100% - 90px);
+ margin: 10px auto 0;
+ }
+
+ .select-img-wrap .dir-img-icon {
+ position: relative;
+ padding: 5px !important;
+ }
+
+ .select-img-wrap .dir-img-icon .icon {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ }
+ .select-img-wrap .dir-img-icon.active {
+ background: #007aff;
+ }
+
+ .select-img-wrap .dir-img-icon.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .select-img-wrap .dir-img-icon.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+ </style>
<form class="layui-form" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
@@ -353,48 +367,116 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+ <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+ <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
+<style>
+ .icon-swiper-wrap {
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper {
+ box-sizing: border-box;
+ width: calc(100% - 60px);
+ height: 162px;
+ margin: 20px 30px 20px 30px;
+ }
+
+ .icon-swiper-wrap .swiper-slide {
+ height: calc((100% - 10px) / 2);
+ text-align: center;
+ font-size: 12px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+
+ .icon-swiper-wrap .swiper-slide img {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ border: 3px solid transparent;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active img {
+ border: 3px solid #007aff;
+ }
+
+ .icon-swiper-wrap .swiper-pagination {
+ bottom: 0 !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-prev {
+ margin-left: -10px !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-next {
+ margin-right: -10px !important;
+ }
+</style>
<script>
function addAcademic(data) {
//弹框
diff --git a/src/main/resources/templates/layui-v2.6.8/applicationList.html b/src/main/resources/templates/layui-v2.6.8/applicationList.html
index 6612ccc..5f6917b 100644
--- a/src/main/resources/templates/layui-v2.6.8/applicationList.html
+++ b/src/main/resources/templates/layui-v2.6.8/applicationList.html
@@ -1,51 +1,18 @@
<!DOCTYPE html>
-<html>
+<html xmlns="http://www.w3.org/1999/html">
+
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
- <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
- <style>
- .select-img-wrap {
- width: calc(100% - 40px);
- margin: 0 20px;
- }
-
- .select-img-wrap .dir-img-icon {
- position: relative;
- }
-
- .select-img-wrap .dir-img-icon .icon {
- width: 70px;
- height: 70px;
- cursor: pointer;
- vertical-align: bottom;
- background: #e7e7e7;
- }
-
- .select-img-wrap .dir-img-icon.active::before {
- content: "";
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- .select-img-wrap .dir-img-icon.active::after {
- content: "";
- width: 16px;
- height: 8px;
- border: 3px solid #FF5722;
- border-bottom: 0;
- border-left: 0;
- position: absolute;
- right: 10px;
- bottom: 10px;
- transform: rotate(135deg);
- }
- </style>
+ <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+ integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
+
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
@@ -53,7 +20,7 @@
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
- <button class="layui-btn layui-btn-sm" lay-event="addApplication">添加应用</button>
+ <button class="layui-btn layui-btn-sm" lay-event="addCourse">添加应用</button>
</div>
</script>
<script type="text/html" id="barDemo">
@@ -65,15 +32,20 @@
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
+ integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
layui.use('table', function () {
var table = layui.table
+
+ //温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
+ //详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
table.render({
elem: '#test'
, url: 'http://localhost:8080/application/queryApplication'
, toolbar: '#toolbarDemo'
- , title: '应用中心'
+ , title: '课程中心'
, totalRow: true
, parseData: function (res) {
console.log('data', res)
@@ -88,64 +60,62 @@
statusName: 'code', //规定返回的状态码字段为code
statusCode: 200 //规定成功的状态码为200
}
- ,cols: [[
- {type: 'checkbox', fixed: 'left'}
+ , cols: [[
+ { type: 'checkbox', fixed: 'left' }
,{field:'id', title:'编号', width:250, sort: true, }
,{field:'appName', title:'应用名称', width:250}
,{field:'appBrief', title:'应用简介', width:250}
,{field:'appUrl', title:'超链接', width:250}
,{field:'dirName', title:'归属目录', width:250}
- ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
+ , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
- ,page: true
- });
+ , page: true
+ })
- //工具栏事件
+ //头工具栏事件
table.on('toolbar(test)', function (obj) {
- var data = obj.data;
+ var data = obj.data
//console.log(obj)
if (obj.event === 'addData') {
- addDir(data);
- } else if (obj.event === 'addApplication') {
- addApplication(data);
+ addDir(data)
+ } else if (obj.event === 'addCourse') {
+ addCourse(data)
}
- });
+ })
//监听行工具事件
- table.on('tool(test)', function(obj){
- var data = obj.data;
+ table.on('tool(test)', function (obj) {
+ var data = obj.data
//console.log(obj)
- if(obj.event === 'del'){
- layer.confirm('真的删除行么', function(index){
+ if (obj.event === 'del') {
+ layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
- layer.close(index);
+ layer.close(index)
//获取要删除的服务的id
- var deleteApplication = data.id;
-
- //发送Ajax到后台，进行删除操作
- $.get("http://localhost:8080/application/deleteApplication", { "id": deleteApplication},
- function(result){
- if (result.code==200){
- // 删除成功之后 弹出msg
- layer.msg(result.msg);
- // 重点：继续显示当前页
- $(".layui-laypage-btn").click();
- } else {
- layer.msg(result.msg, {icon: 2});
- layer.close(index);
- }
- });
- });
- }else if(obj.event === 'edit'){
- selectOne(data);
+ var deleteCourseId = data.id
+
+ $.get("http://localhost:8080/application/deleteApplication", { "id": deleteCourseId }, function (result) {
+ if (result.code == 200) {
+ // 删除成功之后 弹出msg
+ layer.msg(result.msg)
+ // 重点：继续显示当前页
+ $(".layui-laypage-btn").click()
+ } else {
+ layer.msg(result.msg, { icon: 2 })
+ layer.close(index)
+ }
+ })
+ })
+ } else if (obj.event === 'edit') {
+ selectOne(data)
}
- });
+ })
+
});
</script>
-
<script>
- function selectOne(data) {
+ function selectOne (data) {
//弹框
layer.open({
type: 1,
@@ -160,61 +130,89 @@
$("#appBrief").val(data.appBrief);
$("#appUrl").val(data.appUrl);
$("#dirName").val(data.dirName);
+ $("#appIcon").val(data.appIcon)
+
//渲染页面
- layui.form.render();
+ layui.form.render()
},
btn: ['提交', '取消']
, yes: function (index, layero) {
//修改操作
- $.post("http://localhost:8080/application/updateApplication", $("#updateApplication").serialize(),
+ $.post("http://localhost:8080/application/updateApplication", $("#updateCourse").serialize(),
function (data) {
if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
} else {
- layer.msg(data.msg);
+ layer.msg(data.msg)
}
- });
-
+ })
}
, btn2: function (index, layero) {
// alert("取消")
}
- });
+ })
layui.use(['form'], function () {
- var form = layui.form;
+ var form = layui.form
$.ajax({
url: 'http://localhost:8080/application/queryDir',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
- var opt = '<option value="" selected="' + data.dirName + '"></option>';
+ var opt = '<option value="" selected="' + data.dirName + '"></option>'
//获取返回的数据
- var value = data.data;
+ var value = data.data
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
- $("#directorId").html(opt);
- form.render('select');//需要渲染一下
+ $("#directorId").html(opt)
+ form.render('select')//需要渲染一下
} else {
- layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
- layer.closeAll();
- });
+ layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+ layer.closeAll()
+ })
}
}
- });
- });
+ })
+ })
+
+ var swiper = new Swiper(".icon-swiper", {
+ slidesPerView: 6,
+ spaceBetween: 10,
+ slidesPerGroup: 12,
+ grid: {
+ rows: 2,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ })
+
+ $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+ const parentEl = $(this).parent('.swiper-slide')
+ const siblingsEl = $(parentEl).siblings('.swiper-slide')
+ parentEl.addClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
+ })
+ appIcon = $(this).attr('src')
+ })
}
</script>
<script type="text/html" id="updateForm">
- <form class="layui-form" id="updateApplication">
+ <form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@@ -252,19 +250,132 @@
</select>
</div>
</div>
-
- <div class="layui-form-item">
+ <div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <div class="layui-input-block">
- <input type="text" name="appIcon" id="appIcon" class="layui-input">
+ <div class="icon-swiper-wrap">
+ <div #swiperRef="" class="swiper icon-swiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/500/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/501/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/502/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/503/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/504/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/505/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/506/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/507/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/508/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/509/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/510/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/511/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/512/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/520/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/521/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/523/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/533/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/534/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/535/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/536/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/550/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/551/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/552/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/553/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/554/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/555/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/556/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/557/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/558/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/559/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/560/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/562/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/563/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/564/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/565/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/566/70/70">
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next" style="margin-right: -5px;"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
</div>
</div>
-
+ <!-- 弹框错乱，多了这个 div 闭合标签 -->
+ <!-- </div> -->
</form>
</script>
-
<script>
- function addDir(data) {
+ function addDir (data) {
var $ = layui.jquery
var dirImg = ''
//弹框
@@ -274,7 +385,6 @@
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
-
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
@@ -286,24 +396,24 @@
$.get("http://localhost:8080/application/addDirectory", params,
function (data) {
if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
} else {
- layer.msg(data.msg);
+ layer.msg(data.msg)
}
- });
+ })
}
, btn2: function (index, layero) {
// alert("取消")
}
- });
- $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
+ })
+ $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event) {
const parentEl = $(this).parent('.dir-img-icon')
const siblingsEl = $(parentEl).siblings('.dir-img-icon')
parentEl.addClass('active')
- Array.from(siblingsEl).forEach(item=>{
- $(item).removeClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
})
dirImg = $(this).attr('src')
})
@@ -311,12 +421,58 @@
</script>
<script type="text/html" id="addForm">
+ <style>
+ /* 取消弹框拖拽 */
+ .layui-layer-resize {
+ display: none;
+ }
- <form class="layui-form" id="addDirectory">
+ .select-img-wrap {
+ width: calc(100% - 90px);
+ margin: 10px auto 0;
+ }
+ .select-img-wrap .dir-img-icon {
+ position: relative;
+ padding: 5px !important;
+ }
+
+ .select-img-wrap .dir-img-icon .icon {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ }
+
+ .select-img-wrap .dir-img-icon.active {
+ background: #007aff;
+ }
+
+ .select-img-wrap .dir-img-icon.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .select-img-wrap .dir-img-icon.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+ </style>
+ <form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
-
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
@@ -326,106 +482,209 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+ <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+ <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
-<script>
- function addApplication(data) {
- //弹框
- layer.open({
- type: 1,
- content: $("#addForm1").html(),
- title: ['添加应用', 'font-size:18px;'],
- area: ['600px', '600px'],
- btn: ['提交', '取消']
- , yes: function (index, layero) {
- //修改操作
- $.post("http://localhost:8080/application/addApplication", $("#addApplication").serialize(),
- function (data) {
- if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
- } else {
- layer.msg(data.msg);
- }
- });
- }
- , btn2: function (index, layero) {
- // alert("取消")
- }
- });
+<style>
+ .icon-swiper-wrap {
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper {
+ box-sizing: border-box;
+ width: calc(100% - 60px);
+ height: 162px;
+ margin: 20px 30px 20px 30px;
+ }
- layui.use(['form'], function() {
- var form = layui.form;
+ .icon-swiper-wrap .swiper-slide {
+ height: calc((100% - 10px) / 2);
+ text-align: center;
+ font-size: 12px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+
+ .icon-swiper-wrap .swiper-slide img {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ border: 3px solid transparent;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active img {
+ border: 3px solid #007aff;
+ }
+
+ .icon-swiper-wrap .swiper-pagination {
+ bottom: 0 !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-prev {
+ margin-left: -10px !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-next {
+ margin-right: -10px !important;
+ }
+</style>
+<script>
+ function addCourse (data) {
+ layui.use(['form'], function () {
+ var form = layui.form
+ var appIcon = ''
+ //弹框
+ layer.open({
+ type: 1,
+ content: $("#addCourseTemplate").html(),
+ title: ['添加课程', 'font-size:18px;'],
+ area: ['600px', '650px'],
+ btn: ['提交', '取消']
+ , yes: function (index, layero) {
+ var formData = form.val('addCourseForm') // 表单取值
+ Object.assign(formData, { appIcon: appIcon })
+ //修改操作
+ $.post("http://localhost:8080/application/addApplication", formData,
+ function (data) {
+ if ("success" == data.msg) {
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
+ } else {
+ layer.msg(data.msg)
+ }
+ })
+ }
+ , btn2: function (index, layero) {
+ // alert("取消")
+ }
+ })
$.ajax({
url: 'http://localhost:8080/application/queryDir',
- type:"get",
- success: function(data) {
- if(data.msg === "success"){
+ type: "get",
+ success: function (data) {
+ if (data.msg === "success") {
//给一个默认值（‘请选择’）
- var opt = '<option value="" selected=""></option>';
+ var opt = '<option value="" selected=""></option>'
//获取返回的数据
- var value = data.data;
+ var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
- $("#directorId").html(opt);
- form.render('select');//需要渲染一下
-
- }else{
- layer.alert(data.msg,{ icon:2,title:'提示'},function(i){ layer.closeAll();});
+ $("#directorId").html(opt)
+
+ // $.each($("#directorId").children(), function () {
+ // $(this).removeProp('selected')
+ // if ($(this).text() === data.dirName) {
+ // $(this).prop('selected', data.dirName)
+ // }
+ // })
+ form.render('select')//需要渲染一下
+ } else {
+ layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+ layer.closeAll()
+ })
}
}
- });
- });
- }
-</script>
+ })
-<script type="text/html" id="addForm1">
+ var swiper = new Swiper(".icon-swiper", {
+ slidesPerView: 6,
+ spaceBetween: 10,
+ slidesPerGroup: 12,
+ grid: {
+ rows: 2,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ })
- <form class="layui-form" id="addApplication" enctype="multipart/form-data">
+ $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+ const parentEl = $(this).parent('.swiper-slide')
+ const siblingsEl = $(parentEl).siblings('.swiper-slide')
+ parentEl.addClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
+ })
+ appIcon = $(this).attr('src')
+ })
+ })
+ }
+</script>
+<script type="text/html" id="addCourseTemplate">
+ <form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@@ -460,15 +719,129 @@
</select>
</div>
</div>
-
- <div class="layui-form-item">
+ <div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <div class="layui-input-block">
- <input type="text" name="appIcon" id="appIcon" class="layui-input">
+ <div class="icon-swiper-wrap">
+ <div #swiperRef="" class="swiper icon-swiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/500/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/501/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/502/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/503/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/504/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/505/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/506/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/507/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/508/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/509/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/510/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/511/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/512/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/520/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/521/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/523/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/533/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/534/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/535/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/536/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/550/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/551/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/552/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/553/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/554/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/555/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/556/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/557/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/558/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/559/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/560/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/562/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/563/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/564/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/565/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/566/70/70">
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next" style="margin-right: -5px;"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
</div>
</div>
-
+ <!-- 弹框错乱，多了这个 div 闭合标签 -->
+ <!-- </div> -->
</form>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/layui-v2.6.8/courseList.html b/src/main/resources/templates/layui-v2.6.8/courseList.html
index c87524e..410920d 100644
--- a/src/main/resources/templates/layui-v2.6.8/courseList.html
+++ b/src/main/resources/templates/layui-v2.6.8/courseList.html
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
+
<head>
<meta charset="utf-8">
<title>Layui</title>
@@ -7,45 +8,9 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
- <style>
- .select-img-wrap {
- width: calc(100% - 40px);
- margin: 0 20px;
- }
-
- .select-img-wrap .dir-img-icon {
- position: relative;
- }
-
- .select-img-wrap .dir-img-icon .icon {
- width: 70px;
- height: 70px;
- cursor: pointer;
- vertical-align: bottom;
- background: #e7e7e7;
- }
-
- .select-img-wrap .dir-img-icon.active::before {
- content: "";
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- .select-img-wrap .dir-img-icon.active::after {
- content: "";
- width: 16px;
- height: 8px;
- /*border: 3px solid #00FFFF;*/
- border: 3px solid #FF5722;
- border-bottom: 0;
- border-left: 0;
- position: absolute;
- right: 10px;
- bottom: 10px;
- transform: rotate(135deg);
- }
- </style>
-
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+ integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
@@ -67,9 +32,12 @@
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
+ integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
layui.use('table', function () {
- var table = layui.table;
+ var table = layui.table
//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
//详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
@@ -86,68 +54,68 @@
"count": res.count, //解析总页数
"msg": res.msg, //解析提示文本
"data": res.data.list //解析数据列表
- };
+ }
}
, response: {
statusName: 'code', //规定返回的状态码字段为code
statusCode: 200 //规定成功的状态码为200
}
, cols: [[
- {type: 'checkbox', fixed: 'left'}
- , {field: 'id', title: '序号', width: 300, sort: true,}
- , {field: 'courseName', title: '课程名称', width: 300}
- , {field: 'courseBrief', title: '课程简介', width: 300}
- , {field: 'courseUrl', title: '超链接', width: 300}
- , {field: 'dirName', title: '归属目录', width: 300}
- , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
+ { type: 'checkbox', fixed: 'left' }
+ , { field: 'id', title: '序号', width: 300, sort: true, }
+ , { field: 'courseName', title: '课程名称', width: 300 }
+ , { field: 'courseBrief', title: '课程简介', width: 300 }
+ , { field: 'courseUrl', title: '超链接', width: 300 }
+ , { field: 'dirName', title: '归属目录', width: 300 }
+ , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150 }
]]
, page: true
- });
+ })
//头工具栏事件
table.on('toolbar(test)', function (obj) {
- var data = obj.data;
+ var data = obj.data
//console.log(obj)
if (obj.event === 'addData') {
- addDir(data);
+ addDir(data)
} else if (obj.event === 'addCourse') {
- addCourse(data);
+ addCourse(data)
}
- });
+ })
//监听行工具事件
table.on('tool(test)', function (obj) {
- var data = obj.data;
+ var data = obj.data
//console.log(obj)
if (obj.event === 'del') {
layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
- layer.close(index);
+ layer.close(index)
//获取要删除的服务的id
- var deleteCourseId = data.id;
+ var deleteCourseId = data.id
- $.get("http://localhost:8080/api/course/delCourseById", {"id": deleteCourseId}, function (result) {
+ $.get("http://localhost:8080/api/course/delCourseById", { "id": deleteCourseId }, function (result) {
if (result.code == 200) {
// 删除成功之后 弹出msg
- layer.msg(result.msg);
+ layer.msg(result.msg)
// 重点：继续显示当前页
- $(".layui-laypage-btn").click();
+ $(".layui-laypage-btn").click()
} else {
- layer.msg(result.msg, {icon: 2});
- layer.close(index);
+ layer.msg(result.msg, { icon: 2 })
+ layer.close(index)
}
- });
- });
+ })
+ })
} else if (obj.event === 'edit') {
- selectOne(data);
+ selectOne(data)
}
- });
+ })
});
</script>
<script>
- function selectOne(data) {
+ function selectOne (data) {
//弹框
layer.open({
type: 1,
@@ -157,70 +125,94 @@
//弹出后回调
success: function () {
- $("#id").val(data.id);
- $("#courseName").val(data.courseName);
- $("#courseBrief").val(data.courseBrief);
- $("#courseUrl").val(data.courseUrl);
- $("#dirName").val(data.dirName);
- $("#courseIcon").val(data.courseIcon);
+ $("#id").val(data.id)
+ $("#courseName").val(data.courseName)
+ $("#courseBrief").val(data.courseBrief)
+ $("#courseUrl").val(data.courseUrl)
+ $("#dirName").val(data.dirName)
+ $("#courseIcon").val(data.courseIcon)
+
//渲染页面
- layui.form.render();
+ layui.form.render()
},
-
btn: ['提交', '取消']
, yes: function (index, layero) {
-
//修改操作
$.get("http://localhost:8080/api/course/updateById", $("#updateCourse").serialize(),
function (data) {
-
if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
} else {
- layer.msg(data.msg);
+ layer.msg(data.msg)
}
- });
-
+ })
}
, btn2: function (index, layero) {
// alert("取消")
}
- });
+ })
layui.use(['form'], function () {
- var form = layui.form;
+ var form = layui.form
$.ajax({
url: 'http://localhost:8080/api/course/queryCourseDirectory',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
- var opt = '<option value="" selected="' + data.dirName + '"></option>';
+ var opt = '<option value="" selected="' + data.dirName + '"></option>'
//获取返回的数据
- var value = data.data;
+ var value = data.data
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
- $("#directorId").html(opt);
- form.render('select');//需要渲染一下
+ $("#directorId").html(opt)
+ form.render('select')//需要渲染一下
} else {
- layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
- layer.closeAll();
- });
+ layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+ layer.closeAll()
+ })
}
}
- });
- });
+ })
+ })
+
+ var swiper = new Swiper(".icon-swiper", {
+ slidesPerView: 6,
+ spaceBetween: 10,
+ slidesPerGroup: 12,
+ grid: {
+ rows: 2,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ })
+
+ $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+ const parentEl = $(this).parent('.swiper-slide')
+ const siblingsEl = $(parentEl).siblings('.swiper-slide')
+ parentEl.addClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
+ })
+ courseIcon = $(this).attr('src')
+ })
}
</script>
<script type="text/html" id="updateForm">
- <form class="layui-form" id="updateCourse">
+ <form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@@ -256,17 +248,132 @@
</select>
</div>
</div>
- <div class="layui-form-item">
- <label class="layui-form-label">课程图标</label>
- <div class="layui-input-block">
- <input type="text" name="courseIcon" id="courseIcon" class="layui-input">
+ <div class="layui-form-item" style="display: flex;flex-direction: column">
+ <label class="layui-form-label">选择icon</label>
+ <div class="icon-swiper-wrap">
+ <div #swiperRef="" class="swiper icon-swiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/500/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/501/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/502/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/503/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/504/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/505/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/506/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/507/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/508/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/509/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/510/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/511/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/512/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/520/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/521/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/523/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/533/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/534/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/535/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/536/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/550/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/551/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/552/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/553/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/554/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/555/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/556/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/557/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/558/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/559/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/560/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/562/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/563/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/564/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/565/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/566/70/70">
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next" style="margin-right: -5px;"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
</div>
</div>
-
+ <!-- 弹框错乱，多了这个 div 闭合标签 -->
+ <!-- </div> -->
</form>
</script>
<script>
- function addDir(data) {
+ function addDir (data) {
var $ = layui.jquery
var dirImg = ''
//弹框
@@ -276,7 +383,6 @@
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
-
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
@@ -288,24 +394,24 @@
$.get("http://localhost:8080/api/course/addCourseDirectory", params,
function (data) {
if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
} else {
- layer.msg(data.msg);
+ layer.msg(data.msg)
}
- });
+ })
}
, btn2: function (index, layero) {
// alert("取消")
}
- });
- $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
+ })
+ $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event) {
const parentEl = $(this).parent('.dir-img-icon')
const siblingsEl = $(parentEl).siblings('.dir-img-icon')
parentEl.addClass('active')
- Array.from(siblingsEl).forEach(item=>{
- $(item).removeClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
})
dirImg = $(this).attr('src')
})
@@ -313,12 +419,58 @@
</script>
<script type="text/html" id="addForm">
+ <style>
+ /* 取消弹框拖拽 */
+ .layui-layer-resize {
+ display: none;
+ }
- <form class="layui-form" id="addDirectory">
+ .select-img-wrap {
+ width: calc(100% - 90px);
+ margin: 10px auto 0;
+ }
+ .select-img-wrap .dir-img-icon {
+ position: relative;
+ padding: 5px !important;
+ }
+
+ .select-img-wrap .dir-img-icon .icon {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ }
+
+ .select-img-wrap .dir-img-icon.active {
+ background: #007aff;
+ }
+
+ .select-img-wrap .dir-img-icon.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .select-img-wrap .dir-img-icon.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+ </style>
+ <form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
-
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
@@ -328,120 +480,211 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+ <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+ <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
+<style>
+ .icon-swiper-wrap {
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper {
+ box-sizing: border-box;
+ width: calc(100% - 60px);
+ height: 162px;
+ margin: 20px 30px 20px 30px;
+ }
+
+ .icon-swiper-wrap .swiper-slide {
+ height: calc((100% - 10px) / 2);
+ text-align: center;
+ font-size: 12px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+
+ .icon-swiper-wrap .swiper-slide img {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ border: 3px solid transparent;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active img {
+ border: 3px solid #007aff;
+ }
+
+ .icon-swiper-wrap .swiper-pagination {
+ bottom: 0 !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-prev {
+ margin-left: -10px !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-next {
+ margin-right: -10px !important;
+ }
+</style>
<script>
- function addCourse(data) {
- //弹框
- layer.open({
- type: 1,
- content: $("#addForm1").html(),
- title: ['添加课程', 'font-size:18px;'],
- area: ['600px', '600px'],
- btn: ['提交', '取消']
- , yes: function (index, layero) {
- //修改操作
- $.get("http://localhost:8080/api/course/addCourse", $("#addCourse1").serialize(),
- function (data) {
- if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
- } else {
- layer.msg(data.msg);
- }
- });
- }
- , btn2: function (index, layero) {
- // alert("取消")
- }
- });
+ function addCourse (data) {
layui.use(['form'], function () {
- var form = layui.form;
+ var form = layui.form
+ var courseIcon = ''
+ //弹框
+ layer.open({
+ type: 1,
+ content: $("#addCourseTemplate").html(),
+ title: ['添加课程', 'font-size:18px;'],
+ area: ['600px', '650px'],
+ btn: ['提交', '取消']
+ , yes: function (index, layero) {
+ var formData = form.val('addCourseForm') // 表单取值
+ Object.assign(formData, { courseIcon: courseIcon })
+ //修改操作
+ $.get("http://localhost:8080/api/course/addCourse", formData,
+ function (data) {
+ if ("success" == data.msg) {
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
+ } else {
+ layer.msg(data.msg)
+ }
+ })
+ }
+ , btn2: function (index, layero) {
+ // alert("取消")
+ }
+ })
$.ajax({
url: 'http://localhost:8080/api/course/queryCourseDirectory',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
- var opt = '<option value="" selected=""></option>';
+ var opt = '<option value="" selected=""></option>'
//获取返回的数据
- var value = data.data;
+ var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
- $("#directorId").html(opt);
- form.render('select');//需要渲染一下
-
+ $("#directorId").html(opt)
+
+ // $.each($("#directorId").children(), function () {
+ // $(this).removeProp('selected')
+ // if ($(this).text() === data.dirName) {
+ // $(this).prop('selected', data.dirName)
+ // }
+ // })
+ form.render('select')//需要渲染一下
} else {
- layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
- layer.closeAll();
- });
+ layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+ layer.closeAll()
+ })
}
}
- });
- });
- layui.use(['carousel', 'form'], function(){
- var carousel = layui.carousel
- ,form = layui.form;
-
- //常规轮播
- carousel.render({
- elem: '#test1'
- ,arrow: 'always'
- });
- });
- }
-</script>
-<script type="text/html" id="addForm1">
+ })
- <form class="layui-form" id="addCourse1">
+ var swiper = new Swiper(".icon-swiper", {
+ slidesPerView: 6,
+ spaceBetween: 10,
+ slidesPerGroup: 12,
+ grid: {
+ rows: 2,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ })
+ $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+ const parentEl = $(this).parent('.swiper-slide')
+ const siblingsEl = $(parentEl).siblings('.swiper-slide')
+ parentEl.addClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
+ })
+ courseIcon = $(this).attr('src')
+ })
+ })
+ }
+</script>
+<script type="text/html" id="addCourseTemplate">
+ <form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
-
<div class="layui-form-item">
<label class="layui-form-label">课程名称</label>
<div class="layui-input-block">
@@ -456,41 +699,141 @@
class="layui-input">
</div>
</div>
-
<div class="layui-form-item">
<label class="layui-form-label">课程链接</label>
<div class="layui-input-block">
<input type="text" name="courseUrl" id="courseUrl" class="layui-input">
</div>
</div>
-
<div class="layui-form-item">
<label class="layui-form-label">归属目录</label>
<div class="layui-input-block">
- <select name="dirName" id="directorId">
- <option value="">直接选择或搜索选择</option>
- </select>
+ <select name="dirName" id="directorId"></select>
</div>
</div>
-
- <div class="layui-carousel" id="test1">
- <div carousel-item="">
- <img class="image-item" src="./images/01.png" alt="Image 1">
- <img class="image-item" src="./images/02.png" alt="Image 2">
- <img class="image-item" src="./images/03.png" alt="Image 1">
- <img class="image-item" src="./images/04.png" alt="Image 2">
- <img class="image-item" src="./images/05.png" alt="Image 1">
- <img class="image-item" src="./images/06.png" alt="Image 2">
- <img class="image-item" src="./images/01.png" alt="Image 1">
- <img class="image-item" src="./images/02.png" alt="Image 2">
- <img class="image-item" src="./images/03.png" alt="Image 1">
- <img class="image-item" src="./images/04.png" alt="Image 2">
- <img class="image-item" src="./images/05.png" alt="Image 1">
+ <div class="layui-form-item" style="display: flex;flex-direction: column">
+ <label class="layui-form-label">选择icon</label>
+ <div class="icon-swiper-wrap">
+ <div #swiperRef="" class="swiper icon-swiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/500/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/501/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/502/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/503/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/504/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/505/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/506/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/507/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/508/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/509/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/510/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/511/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/512/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/520/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/521/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/523/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/533/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/534/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/535/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/536/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/550/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/551/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/552/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/553/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/554/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/555/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/556/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/557/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/558/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/559/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/560/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/562/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/563/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/564/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/565/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/566/70/70">
+ </div>
+ </div>
</div>
+ <div class="swiper-button-next" style="margin-right: -5px;"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
</div>
</div>
-
+ <!-- 弹框错乱，多了这个 div 闭合标签 -->
+ <!-- </div> -->
</form>
</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/src/main/resources/templates/layui-v2.6.8/downloadList.html b/src/main/resources/templates/layui-v2.6.8/downloadList.html
index 288b1fd..375a4db 100644
--- a/src/main/resources/templates/layui-v2.6.8/downloadList.html
+++ b/src/main/resources/templates/layui-v2.6.8/downloadList.html
@@ -47,44 +47,6 @@
</style>
</head>
-<style>
- .select-img-wrap {
- width: calc(100% - 40px);
- margin: 0 20px;
- }
-
- .select-img-wrap .dir-img-icon {
- position: relative;
- }
-
- .select-img-wrap .dir-img-icon .icon {
- width: 70px;
- height: 70px;
- cursor: pointer;
- vertical-align: bottom;
- background: #e7e7e7;
- }
-
- .select-img-wrap .dir-img-icon.active::before {
- content: "";
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- .select-img-wrap .dir-img-icon.active::after {
- content: "";
- width: 16px;
- height: 8px;
- /*border: 3px solid #00FFFF;*/
- border: 3px solid #FF5722;
- border-bottom: 0;
- border-left: 0;
- position: absolute;
- right: 10px;
- bottom: 10px;
- transform: rotate(135deg);
- }
-</style>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
@@ -252,6 +214,7 @@
});
+
layui.use(['upload', 'element', 'layer'], function(){
var $ = layui.jquery
,upload = layui.upload
@@ -376,7 +339,55 @@
</script>
<script type="text/html" id="addForm">
+ <style>
+ /* 取消弹框拖拽 */
+ .layui-layer-resize {
+ display: none;
+ }
+
+ .select-img-wrap {
+ width: calc(100% - 90px);
+ margin: 10px auto 0;
+ }
+ .select-img-wrap .dir-img-icon {
+ position: relative;
+ padding: 5px !important;
+ }
+
+ .select-img-wrap .dir-img-icon .icon {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ }
+
+ .select-img-wrap .dir-img-icon.active {
+ background: #007aff;
+ }
+
+ .select-img-wrap .dir-img-icon.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .select-img-wrap .dir-img-icon.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+ </style>
<form class="layui-form" id="addDirectory">
<!-- 把id 作为隐藏域传过去 -->
@@ -433,6 +444,75 @@
</div>
</form>
</script>
+<style>
+ .icon-swiper-wrap {
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper {
+ box-sizing: border-box;
+ width: calc(100% - 60px);
+ height: 162px;
+ margin: 20px 30px 20px 30px;
+ }
+
+ .icon-swiper-wrap .swiper-slide {
+ height: calc((100% - 10px) / 2);
+ text-align: center;
+ font-size: 12px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+
+ .icon-swiper-wrap .swiper-slide img {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ border: 3px solid transparent;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active img {
+ border: 3px solid #007aff;
+ }
+
+ .icon-swiper-wrap .swiper-pagination {
+ bottom: 0 !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-prev {
+ margin-left: -10px !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-next {
+ margin-right: -10px !important;
+ }
+</style>
<script>
function addDownload(data) {
//弹框
diff --git a/src/main/resources/templates/layui-v2.6.8/inviteList.html b/src/main/resources/templates/layui-v2.6.8/inviteList.html
index d75dcca..83a08eb 100644
--- a/src/main/resources/templates/layui-v2.6.8/inviteList.html
+++ b/src/main/resources/templates/layui-v2.6.8/inviteList.html
@@ -169,6 +169,13 @@
, "inviteUrl": data.inviteUrl
, "dirName": data.dirName
});
+
+ $.each($("#directorId").children(), function () {
+ $(this).removeProp('selected')
+ if ($(this).text() === data.dirName) {
+ $(this).prop('selected', data.dirName)
+ }
+ })
// layedit.setContent(editorIndex, data.inviteBrief, false)
form.render()
}
diff --git a/src/main/resources/templates/layui-v2.6.8/login.html b/src/main/resources/templates/layui-v2.6.8/login.html
index fbfc471..b986f5b 100644
--- a/src/main/resources/templates/layui-v2.6.8/login.html
+++ b/src/main/resources/templates/layui-v2.6.8/login.html
@@ -60,7 +60,7 @@
})
}else {
layer.msg(result.msg)
- // location.href="http://localhost:63342/zhiyun/src/main/resources/templates/layui-v2.6.8/login.html"
+ location.href="http://localhost:63342/zhiyun/src/main/resources/templates/layui-v2.6.8/login.html"
}
},
diff --git a/src/main/resources/templates/layui-v2.6.8/textualList.html b/src/main/resources/templates/layui-v2.6.8/textualList.html
index a72b799..9299fdb 100644
--- a/src/main/resources/templates/layui-v2.6.8/textualList.html
+++ b/src/main/resources/templates/layui-v2.6.8/textualList.html
@@ -1,51 +1,18 @@
<!DOCTYPE html>
-<html>
+<html xmlns="http://www.w3.org/1999/html">
+
<head>
<meta charset="utf-8">
<title>Layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
- <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
- <style>
- .select-img-wrap {
- width: calc(100% - 40px);
- margin: 0 20px;
- }
-
- .select-img-wrap .dir-img-icon {
- position: relative;
- }
-
- .select-img-wrap .dir-img-icon .icon {
- width: 70px;
- height: 70px;
- cursor: pointer;
- vertical-align: bottom;
- background: #e7e7e7;
- }
-
- .select-img-wrap .dir-img-icon.active::before {
- content: "";
- position: absolute;
- right: 10px;
- bottom: 10px;
- }
- .select-img-wrap .dir-img-icon.active::after {
- content: "";
- width: 16px;
- height: 8px;
- border: 3px solid #FF5722;
- border-bottom: 0;
- border-left: 0;
- position: absolute;
- right: 10px;
- bottom: 10px;
- transform: rotate(135deg);
- }
- </style>
+ <link rel="stylesheet" href="layui/css/layui.css" tppabs="//res.ilayuis.com/layui/dist/css/layui.css" media="all">
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.css"
+ integrity="sha512-s6khMl5GDS1HbQ5/SwL1wzMayPwHXPjKoBN5kHUTDqKEPkkGyEZWKyH2lQ3YO2q3dxueG3rE0NHjRawMHd2b6g=="
+ crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
+
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
@@ -53,7 +20,7 @@
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addData">添加目录</button>
- <button class="layui-btn layui-btn-sm" lay-event="addText">添加考证</button>
+ <button class="layui-btn layui-btn-sm" lay-event="addCourse">添加考证</button>
</div>
</script>
<script type="text/html" id="barDemo">
@@ -65,89 +32,89 @@
<script src="layui/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
-
-
+<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/10.2.0/swiper-bundle.min.js"
+ integrity="sha512-QwpsxtdZRih55GaU/Ce2Baqoy2tEv9GltjAG8yuTy2k9lHqK7VHHp3wWWe+yITYKZlsT3AaCj49ZxMYPp46iJQ=="
+ crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
- layui.use('table', function(){
- var table = layui.table;
+ layui.use('table', function () {
+ var table = layui.table
//温馨提示：默认由前端自动合计当前行数据。从 layui 2.5.6 开始： 若接口直接返回了合计行数据，则优先读取接口合计行数据。
//详见：http://www.ilayuis.com/doc/modules/table.html#totalRow
table.render({
elem: '#test'
,url:'http://localhost:8080/textual/queryTextual'
- ,toolbar: '#toolbarDemo'
+ , toolbar: '#toolbarDemo'
,title: '考证中心'
- ,totalRow: true
- ,parseData: function(res){
- // var parse = JSON.parse(res.data.data);
- console.log('data',res)
+ , totalRow: true
+ , parseData: function (res) {
+ // console.log('data', res)
return {
- "code" : res.code, //解析接口状态
- "count":res.count, //解析总页数
- "msg" : res.msg, //解析提示文本
- "data" : res.data.list //解析数据列表
- };
-
- }
- ,response:{
- statusCode:200 //规定成功的状态码为200
+ "code": res.code, //解析接口状态
+ "count": res.count, //解析总页数
+ "msg": res.msg, //解析提示文本
+ "data": res.data.list //解析数据列表
}
- ,cols: [[
+ }
+ , response: {
+ statusName: 'code', //规定返回的状态码字段为code
+ statusCode: 200 //规定成功的状态码为200
+ }
+ , cols: [[
{type: 'checkbox', fixed: 'left'}
- ,{field:'id', title:'编号', width:250, sort: true, }
- ,{field:'textualName', title:'考证名称', width:250}
- ,{field:'textualUrl', title:'超链接', width:250}
- ,{field:'dirName', title:'归属目录', width:250}
- ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
+ ,{field:'id', title:'编号', width:300, sort: true, }
+ ,{field:'textualName', title:'考证名称', width:300}
+ ,{field:'textualUrl', title:'超链接', width:300}
+ ,{field:'dirName', title:'归属目录', width:300}
+ ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:300}
]]
- ,page: true
- });
+ , page: true
+ })
//头工具栏事件
table.on('toolbar(test)', function (obj) {
- var data = obj.data;
+ var data = obj.data
//console.log(obj)
if (obj.event === 'addData') {
- addDir(data);
- } else if (obj.event === 'addText') {
- addText(data);
+ addDir(data)
+ } else if (obj.event === 'addCourse') {
+ addCourse(data)
}
- });
+ })
+
//监听行工具事件
- table.on('tool(test)', function(obj){
- var data = obj.data;
+ table.on('tool(test)', function (obj) {
+ var data = obj.data
//console.log(obj)
- if(obj.event === 'del'){
- layer.confirm('真的删除行么', function(index){
+ if (obj.event === 'del') {
+ layer.confirm('真的删除行么', function (index) {
//obj.del();//删除表结构
- layer.close(index);
+ layer.close(index)
//获取要删除的服务的id
- var deleteTextual = data.id;
-
- //发送Ajax到后台，进行删除操作
- $.get("http://localhost:8080/textual/deleteTextual", { "id": deleteTextual},
- function(result){
- if (result.code == 200) {
- // 删除成功之后 弹出msg
- layer.msg(result.msg);
- // 重点：继续显示当前页
- $(".layui-laypage-btn").click();
- } else {
- layer.msg(result.msg, {icon: 2});
- layer.close(index);
- }
- });
- });
- }else if (obj.event === 'edit') {
- selectOne(data);
+ var deleteCourseId = data.id
+
+ $.get("http://localhost:8080/textual/deleteTextual", { "id": deleteCourseId }, function (result) {
+ if (result.code == 200) {
+ // 删除成功之后 弹出msg
+ layer.msg(result.msg)
+ // 重点：继续显示当前页
+ $(".layui-laypage-btn").click()
+ } else {
+ layer.msg(result.msg, { icon: 2 })
+ layer.close(index)
+ }
+ })
+ })
+ } else if (obj.event === 'edit') {
+ selectOne(data)
}
- });
+ })
+
});
</script>
<script>
- function selectOne(data) {
+ function selectOne (data) {
//弹框
layer.open({
type: 1,
@@ -162,64 +129,88 @@
$("#textualUrl").val(data.textualUrl);
$("#dirName").val(data.dirName);
$("#textualImg").val(data.textualImg);
+
//渲染页面
- layui.form.render();
+ layui.form.render()
},
-
btn: ['提交', '取消']
, yes: function (index, layero) {
-
//修改操作
- $.post("http://localhost:8080/textual/updateTextual", $("#updateText").serialize(),
+ $.post("http://localhost:8080/textual/updateTextual", $("#updateCourse").serialize(),
function (data) {
-
if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
} else {
- layer.msg(data.msg);
+ layer.msg(data.msg)
}
- });
-
+ })
}
, btn2: function (index, layero) {
// alert("取消")
}
- });
+ })
layui.use(['form'], function () {
- var form = layui.form;
+ var form = layui.form
$.ajax({
url: 'http://localhost:8080/textual/queryDir',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
- var opt = '<option value="" selected="' + data.dirName + '"></option>';
+ var opt = '<option value="" selected="' + data.dirName + '"></option>'
//获取返回的数据
- var value = data.data;
+ var value = data.data
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
- $("#directorId").html(opt);
- form.render('select');//需要渲染一下
+ $("#directorId").html(opt)
+ form.render('select')//需要渲染一下
} else {
- layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
- layer.closeAll();
- });
+ layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+ layer.closeAll()
+ })
}
}
- });
- });
+ })
+ })
+
+ var swiper = new Swiper(".icon-swiper", {
+ slidesPerView: 6,
+ spaceBetween: 10,
+ slidesPerGroup: 12,
+ grid: {
+ rows: 2,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ })
+
+ $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+ const parentEl = $(this).parent('.swiper-slide')
+ const siblingsEl = $(parentEl).siblings('.swiper-slide')
+ parentEl.addClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
+ })
+ textualImg = $(this).attr('src')
+ })
}
</script>
<script type="text/html" id="updateForm">
- <form class="layui-form" id="updateText">
+ <form class="layui-form layui-form-pane" id="updateCourse" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
@@ -247,17 +238,132 @@
</select>
</div>
</div>
- <div class="layui-form-item">
+ <div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <div class="layui-input-block">
- <input type="text" name="textualImg" id="textualImg" class="layui-input">
+ <div class="icon-swiper-wrap">
+ <div #swiperRef="" class="swiper icon-swiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/500/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/501/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/502/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/503/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/504/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/505/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/506/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/507/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/508/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/509/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/510/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/511/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/512/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/520/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/521/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/523/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/533/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/534/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/535/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/536/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/550/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/551/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/552/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/553/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/554/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/555/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/556/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/557/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/558/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/559/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/560/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/562/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/563/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/564/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/565/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/566/70/70">
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next" style="margin-right: -5px;"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
</div>
</div>
-
+ <!-- 弹框错乱，多了这个 div 闭合标签 -->
+ <!-- </div> -->
</form>
</script>
<script>
- function addDir(data) {
+ function addDir (data) {
var $ = layui.jquery
var dirImg = ''
//弹框
@@ -267,7 +373,6 @@
title: ['添加页面', 'font-size:18px;'],
area: ['600px', '600px'],
btn: ['提交', '取消']
-
, yes: function (index, layero) {
// 获取所有图标元素
var dirName = $('#dirName').val()
@@ -279,24 +384,24 @@
$.get("http://localhost:8080/textual/addDirectory", params,
function (data) {
if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
} else {
- layer.msg(data.msg);
+ layer.msg(data.msg)
}
- });
+ })
}
, btn2: function (index, layero) {
// alert("取消")
}
- });
- $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event){
+ })
+ $(".select-img-wrap").on('click', '.dir-img-icon>img', function (event) {
const parentEl = $(this).parent('.dir-img-icon')
const siblingsEl = $(parentEl).siblings('.dir-img-icon')
parentEl.addClass('active')
- Array.from(siblingsEl).forEach(item=>{
- $(item).removeClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
})
dirImg = $(this).attr('src')
})
@@ -304,12 +409,58 @@
</script>
<script type="text/html" id="addForm">
+ <style>
+ /* 取消弹框拖拽 */
+ .layui-layer-resize {
+ display: none;
+ }
+
+ .select-img-wrap {
+ width: calc(100% - 90px);
+ margin: 10px auto 0;
+ }
+
+ .select-img-wrap .dir-img-icon {
+ position: relative;
+ padding: 5px !important;
+ }
- <form class="layui-form" id="addDirectory">
+ .select-img-wrap .dir-img-icon .icon {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ }
+
+ .select-img-wrap .dir-img-icon.active {
+ background: #007aff;
+ }
+ .select-img-wrap .dir-img-icon.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .select-img-wrap .dir-img-icon.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
+ </style>
+ <form class="layui-form layui-form-pane" id="addDirectory" style="padding: 15px;">
<!-- 把id 作为隐藏域传过去 -->
<input type="hidden" name="id" id="id">
-
<div class="layui-form-item">
<label class="layui-form-label">目录名称</label>
<div class="layui-input-block">
@@ -319,109 +470,211 @@
</div>
<div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <!-- <input type="hidden" name="dirImg" id="dirImg" class="layui-form-label">选择icon</input>-->
<div class="layui-row layui-col-space20 select-img-wrap">
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70" alt="图片1">
+ <img id="icon1" class="icon" src="https://picsum.photos/id/237/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70" alt="图片1">
+ <img id="icon2" class="icon" src="https://picsum.photos/id/238/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon3" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon3" class="icon" src="https://picsum.photos/id/239/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/240/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/261/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/252/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/253/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/254/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/255/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon4" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon4" class="icon" src="https://picsum.photos/id/256/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/257/70/70">
</div>
<div name="dirImg" class="layui-col-md2 dir-img-icon" lay-event="addData">
- <img id="icon5" class="icon" src="https://picsum.photos/70/70" alt="图片1">
+ <img id="icon5" class="icon" src="https://picsum.photos/id/258/70/70">
</div>
</div>
</div>
</form>
</script>
-<script>
- function addText(data) {
- //弹框
- layer.open({
- type: 1,
- content: $("#addForm1").html(),
- title: ['添加课程', 'font-size:18px;'],
- area: ['600px', '600px'],
- btn: ['提交', '取消']
- , yes: function (index, layero) {
- //修改操作
- $.post("http://localhost:8080/textual/addTextual", $("#addText").serialize(),
- function (data) {
- if ("success" == data.msg) {
- layer.msg(data.msg);
- $(".layui-laypage-btn").click();
- parent.layer.close(index);
- } else {
- layer.msg(data.msg);
- }
- });
- }
- , btn2: function (index, layero) {
- // alert("取消")
- }
+<style>
+ .icon-swiper-wrap {
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper {
+ box-sizing: border-box;
+ width: calc(100% - 60px);
+ height: 162px;
+ margin: 20px 30px 20px 30px;
+ }
+
+ .icon-swiper-wrap .swiper-slide {
+ height: calc((100% - 10px) / 2);
+ text-align: center;
+ font-size: 12px;
+ background: #fff;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::before {
+ content: "";
+ position: absolute;
+ right: 10px;
+ bottom: 10px;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active::after {
+ content: "";
+ width: 16px;
+ height: 8px;
+ border: 3px solid #007aff;
+ border-bottom: 0;
+ border-left: 0;
+ position: absolute;
+ right: 10px;
+ bottom: 15px;
+ transform: rotate(135deg);
+ }
- });
+ .icon-swiper-wrap .swiper-slide img {
+ width: 70px;
+ height: 70px;
+ cursor: pointer;
+ object-fit: cover;
+ vertical-align: bottom;
+ background: #e7e7e7;
+ border: 3px solid transparent;
+ }
+
+ .icon-swiper-wrap .swiper-slide.active img {
+ border: 3px solid #007aff;
+ }
+
+ .icon-swiper-wrap .swiper-pagination {
+ bottom: 0 !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-prev {
+ margin-left: -10px !important;
+ }
+
+ .icon-swiper-wrap .swiper-button-next {
+ margin-right: -10px !important;
+ }
+</style>
+<script>
+ function addCourse (data) {
layui.use(['form'], function () {
- var form = layui.form;
+ var form = layui.form
+ var textualImg = ''
+ //弹框
+ layer.open({
+ type: 1,
+ content: $("#addCourseTemplate").html(),
+ title: ['添加课程', 'font-size:18px;'],
+ area: ['600px', '650px'],
+ btn: ['提交', '取消']
+ , yes: function (index, layero) {
+ var formData = form.val('addCourseForm') // 表单取值
+ Object.assign(formData, { textualImg: textualImg })
+ //修改操作
+ $.post("http://localhost:8080/textual/addTextual", formData,
+ function (data) {
+ if ("success" == data.msg) {
+ layer.msg(data.msg)
+ $(".layui-laypage-btn").click()
+ parent.layer.close(index)
+ } else {
+ layer.msg(data.msg)
+ }
+ })
+ }
+ , btn2: function (index, layero) {
+ // alert("取消")
+ }
+ })
$.ajax({
url: 'http://localhost:8080/textual/queryDir',
type: "get",
success: function (data) {
if (data.msg === "success") {
//给一个默认值（‘请选择’）
- var opt = '<option value="" selected=""></option>';
+ var opt = '<option value="" selected=""></option>'
//获取返回的数据
- var value = data.data;
+ var value = data.data || [{ dirName: 'test1' }, { dirName: 'test2' }]
//循环遍历
for (var i in value) {
opt += '<option value = "' + value[i].dirName + '">' + value[i].dirName + '</option>'
console.log(value[i].dirName)
}
- $("#directorId").html(opt);
- form.render('select');//需要渲染一下
-
+ $("#directorId").html(opt)
+
+ // $.each($("#directorId").children(), function () {
+ // $(this).removeProp('selected')
+ // if ($(this).text() === data.dirName) {
+ // $(this).prop('selected', data.dirName)
+ // }
+ // })
+ form.render('select')//需要渲染一下
} else {
- layer.alert(data.msg, {icon: 2, title: '提示'}, function (i) {
- layer.closeAll();
- });
+ layer.alert(data.msg, { icon: 2, title: '提示' }, function (i) {
+ layer.closeAll()
+ })
}
-
}
- });
- });
- }
-</script>
-<script type="text/html" id="addForm1">
+ })
- <form class="layui-form" id="addText">
+ var swiper = new Swiper(".icon-swiper", {
+ slidesPerView: 6,
+ spaceBetween: 10,
+ slidesPerGroup: 12,
+ grid: {
+ rows: 2,
+ },
+ pagination: {
+ el: ".swiper-pagination",
+ clickable: true,
+ },
+ navigation: {
+ nextEl: ".swiper-button-next",
+ prevEl: ".swiper-button-prev",
+ },
+ })
+ $(".icon-swiper").on('click', '.swiper-slide>img', function (event) {
+ const parentEl = $(this).parent('.swiper-slide')
+ const siblingsEl = $(parentEl).siblings('.swiper-slide')
+ parentEl.addClass('active')
+ $.each(siblingsEl, function () {
+ $(this).removeClass('active')
+ })
+ textualImg = $(this).attr('src')
+ })
+ })
+ }
+</script>
+<script type="text/html" id="addCourseTemplate">
+ <form class="layui-form layui-form-pane" id="addCourseForm" lay-filter="addCourseForm" style="padding: 15px;">
+ <!-- 把id 作为隐藏域传过去 -->
+ <input type="hidden" name="id" id="id">
<div class="layui-form-item">
<label class="layui-form-label">考证名称</label>
<div class="layui-input-block">
@@ -445,13 +698,129 @@
</select>
</div>
</div>
- <div class="layui-form-item">
+ <div class="layui-form-item" style="display: flex;flex-direction: column">
<label class="layui-form-label">选择icon</label>
- <div class="layui-input-block">
- <input type="text" name="textualImg" id="textualImg" class="layui-input">
+ <div class="icon-swiper-wrap">
+ <div #swiperRef="" class="swiper icon-swiper">
+ <div class="swiper-wrapper">
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/500/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/501/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/502/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/503/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/504/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/505/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/506/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/507/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/508/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/509/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/510/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/511/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/512/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/520/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/521/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/523/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/533/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/534/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/535/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/536/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/550/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/551/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/552/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/553/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/554/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/555/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/556/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/557/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/558/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/559/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/560/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/562/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/563/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/564/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/565/70/70">
+ </div>
+ <div class="swiper-slide">
+ <img class="image-item" src="https://picsum.photos/id/566/70/70">
+ </div>
+ </div>
+ </div>
+ <div class="swiper-button-next" style="margin-right: -5px;"></div>
+ <div class="swiper-button-prev"></div>
+ <div class="swiper-pagination"></div>
</div>
</div>
+ <!-- 弹框错乱，多了这个 div 闭合标签 -->
+ <!-- </div> -->
</form>
</script>
</body>
-</html>
\ No newline at end of file
+</html>