From d425d4d115f908f67574c63ba7dd71767f3ceda3 Mon Sep 17 00:00:00 2001
From: Jmysy <854085467@qq.com>
Date: Tue, 23 Jun 2020 23:16:34 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=A1=E7=89=87=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
admin/data/card.json | 27 ++++
admin/data/menu.json | 8 ++
admin/data/user.json | 19 ---
component/layui/lay/extends/pearCard.js | 116 ++++++++++++++++
component/layui/layui.js | 1 +
view/common/senior/card.html | 171 ++++++++++++++++++++++++
view/console/console1.html | 12 +-
7 files changed, 329 insertions(+), 25 deletions(-)
create mode 100644 admin/data/card.json
create mode 100644 component/layui/lay/extends/pearCard.js
create mode 100644 view/common/senior/card.html
diff --git a/admin/data/card.json b/admin/data/card.json
new file mode 100644
index 0000000..49e521b
--- /dev/null
+++ b/admin/data/card.json
@@ -0,0 +1,27 @@
+{
+ "code": 0,
+ "msg": "...",
+ "count": 3,
+ "data": [{
+ "id": "1",
+ "image": "https://gw.alipayobjects.com/zos/rmsportal/gLaIAoVWTtLbBWZNYEMg.png",
+ "title": "Alipay",
+ "remark": "那是一种内在的东西， 他们到达不了，也无法触及的"
+ },{
+ "id": "2",
+ "image": "https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png",
+ "title": "Layui",
+ "remark": "生命就像一盒巧克力，结果往往出人意料"
+ },{
+ "id": "1",
+ "image": "https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png",
+ "title": "Angular",
+ "remark": "希望是一个好东西，也许是最好的，好东西是不会消亡的"
+ },
+ {
+ "id": "1",
+ "image": "https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png",
+ "title": "React",
+ "remark": "那是一种内在的东西， 他们到达不了，也无法触及的"
+ }]
+}
diff --git a/admin/data/menu.json b/admin/data/menu.json
index 92fa7a1..04f38f0 100644
--- a/admin/data/menu.json
+++ b/admin/data/menu.json
@@ -151,6 +151,14 @@
"openType": "_iframe",
"href": "view/common/senior/table.html"
},
+ {
+ "id": 225,
+ "title": "卡片列表",
+ "icon": "layui-icon layui-icon-face-smile",
+ "type": 1,
+ "openType": "_iframe",
+ "href": "view/common/senior/card.html"
+ },
{
"id": 222,
"title": "树型表格",
diff --git a/admin/data/user.json b/admin/data/user.json
index 195e315..a5b0de4 100644
--- a/admin/data/user.json
+++ b/admin/data/user.json
@@ -159,24 +159,5 @@
"enable": "1",
"login": "1",
"roleIds": null
- }, {
- "createTime": null,
- "createBy": null,
- "updateTime": null,
- "updateBy": null,
- "remark": null,
- "userId": "442492965651353600",
- "username": "970796069",
- "password": null,
- "salt": null,
- "status": null,
- "realName": "王二麻子",
- "email": null,
- "avatar": null,
- "sex": "1",
- "phone": "1555324324234",
- "enable": "1",
- "login": "1",
- "roleIds": null
}]
}
diff --git a/component/layui/lay/extends/pearCard.js b/component/layui/lay/extends/pearCard.js
new file mode 100644
index 0000000..b9108c4
--- /dev/null
+++ b/component/layui/lay/extends/pearCard.js
@@ -0,0 +1,116 @@
+layui.define(['table', 'laypage','jquery', 'element'], function(exports) {
+ "use strict";
+
+ var MOD_NAME = 'pearCard',
+ $ = layui.jquery,
+ element = layui.element,
+ laypage = layui.laypage;
+
+ var pearCard = function(opt) {
+ this.option = opt;
+ };
+
+ pearCard.prototype.render = function(opt) {
+ var option = {
+ // 构建的模型
+ elem: opt.elem,
+ // 数据 url 连接
+ url: opt.url,
+ // lineSize 每行的个数
+ lineSize: opt.lineSize ? opt.lineSize : 4,
+ // 共多少个
+ pageSize: opt.pageSize ? opt.pageSize : 12,
+ // 当前页
+ currentPage: opt.currentSize ? opt.currentSize : 0,
+ // 完 成 函 数
+ done: opt.done ? opt.done : function() {
+ alert("跳转页面");
+ }
+ }
+
+ // 根 据 请 求 方 式 获 取 数 据
+ if (option.url != null) {
+ // 复制数据
+ option.data = getData(option.url).data;
+ }
+
+ // 根据结果进行相应结构的创建
+
+ var html = createComponent(option.data);
+
+ $(option.elem).html(html);
+
+ // 初始化分页组件
+ laypage.render({
+ elem: 'cardpage'
+ ,count: 100
+ ,layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip']
+ ,jump: function(obj){
+ console.log(obj)
+ }
+ });
+
+ return new pearCard(option);
+ }
+
+ function createComponent(data) {
+
+
+ var html = ""
+
+ var content = createCards(data);
+
+ var page = "
"
+
+ content = content + page;
+
+ html += content + "
";
+
+ $.each(data, function(i, item) {
+
+ content += createCard(item);
+
+ })
+
+ content += "
"
+
+ return content;
+
+ }
+
+
+ /** 创建一个卡片 */
+ function createCard(item) {
+
+ var card =
+ ' 
'+item.title+'
'+item.remark+'
'
+
+ return card;
+ }
+
+ /** 同 步 请 求 获 取 数 据 */
+ function getData(url) {
+
+ $.ajaxSettings.async = false;
+ var data = null;
+
+ $.get(url, function(result) {
+ data = result;
+ });
+
+ $.ajaxSettings.async = true;
+ return data;
+ }
+
+ exports(MOD_NAME, new pearCard());
+})
diff --git a/component/layui/layui.js b/component/layui/layui.js
index c748230..fb56afd 100644
--- a/component/layui/layui.js
+++ b/component/layui/layui.js
@@ -48,6 +48,7 @@
jquery: "modules/jquery",
mobile: "modules/mobile",
dtree:"extends/dtree",
+ pearCard:"extends/pearCard",
pearTab:"extends/pearTab",
pearMenu:"extends/pearMenu",
pearOper:"extends/pearOper",
diff --git a/view/common/senior/card.html b/view/common/senior/card.html
new file mode 100644
index 0000000..6cfee80
--- /dev/null
+++ b/view/common/senior/card.html
@@ -0,0 +1,171 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/view/console/console1.html b/view/console/console1.html
index 2f8ac70..71cb306 100644
--- a/view/console/console1.html
+++ b/view/console/console1.html
@@ -88,42 +88,42 @@
