初始上传

public/static/ext/diyview/css/bottom_nav_design.css

@@ -0,0 +1,270 @@
+.layui-layout-admin .layui-body .body-content{padding: 15px;margin: 15px;}
+#bottomNav{position: relative;overflow: hidden}
+#bottomNav .preview{width: 320px;background-repeat: no-repeat;background-size: 100%;float: left;}
+#bottomNav .preview .preview-head{background: url("../img/preview_head_old.png") no-repeat;position: relative;}
+#bottomNav .preview .preview-head>span{color: #ffffff;font-size: 16px;display: block;text-align: center;margin-left: 50px;height: 64px;line-height: 82px;margin-right: 40px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;}
+#bottomNav .preview .preview-block{border-left: 1px solid #e5e5e5;border-right: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;min-height: 100px;position: relative;}
+.preview-block ul{overflow: hidden;display: flex;position: absolute;bottom: 0;width: 100%;border-top:1px solid #e5e5e5;}
+.preview-block ul li{text-align: center;flex: 1;margin: 5px 0;}
+.preview-block ul li>div{height: 30px;line-height: 30px;width: 30px;    display: flex;align-items: center;justify-content: center;margin: 0 auto;}
+.preview-block ul li>div>div{height: 20px;width: 20px;}
+.preview-block ul li>div.js-icon{font-size: 20px}
+.preview-block ul li img{width: 20px;max-height: 100%;}
+.preview-block ul li span{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;display: block;}
+.preview-block ul li .icon-wrap{font-size: 20px}
+#bottomNav .edit-attribute{position: relative;border: 1px solid #e5e5e5;width:400px;float: left;margin-left: 20px;overflow-y: scroll;overflow-x: auto;display: block;}
+
+.edit-attribute .img-block{width: 50px;height: 48px;display: inline-block;padding: 8px;margin-right: 10px;cursor: pointer;vertical-align: top; line-height: 1;background-color: #EEEEEE;text-align: center;font-size: 12px;}
+.edit-attribute .img-block i.add{display:block;font-style: normal;text-align: center;font-size:30px;line-height: 48px;}
+.edit-attribute .img-block i.del{display: block;}
+.edit-attribute .img-block.has-choose-image{width: 66px;height: 64px;margin-right:0;background-color: #EEEEEE;display: inline-block;vertical-align: top;position: relative;line-height: 64px;text-align: center;padding: 0;}
+.edit-attribute .img-block:last-child{margin-top:15px;}
+.edit-attribute .img-block.has-choose-image>div{width: 66px;height: 48px;line-height: 48px;}
+.edit-attribute .img-block.has-choose-image img{width: 30px;height: auto;max-width: 100%;max-height: 100%;}
+.edit-attribute .img-block.has-choose-image span{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size:12px;background: rgba(0,0,0,.6);color:#ffffff;line-height: initial;cursor:pointer;}
+
+.edit-attribute .bottom-menu-config ul>li{display: flex; padding: 10px;background: #ffffff; border: 1px dashed #e5e5e5;position: relative;margin-top: 16px;justify-content: space-between;flex-direction: column;}
+.edit-attribute .bottom-menu-config ul>li:first-child{margin-top:0;}
+.edit-attribute .bottom-menu-config ul>li .image-block{display: flex;flex-direction: row;margin-right:20px;cursor:pointer;vertical-align: top;line-height: 1;text-align: center;margin-top: 15px;}
+.edit-attribute .bottom-menu-config ul>li .content-block{display:inline-block;width:100%;}
+.edit-attribute .bottom-menu-config ul>li .content-block .layui-form-label{width:70px;color: #909399 !important;font-size: 14px;}
+.edit-attribute .bottom-menu-config ul>li .content-block .layui-input-block{margin-left:80px;}
+.edit-attribute .bottom-menu-config ul>li:hover .del{display:block;}
+.edit-attribute .bottom-menu-config ul>li .img-hover-block{clear: both;}
+.edit-attribute .bottom-menu-config ul>li .img-hover-block .img-block{margin-top: 10px;}
+.edit-attribute .bottom-menu-config ul.icon-wrap>li {margin-top: 0px;justify-content: center;align-items: center;}
+.edit-attribute .bottom-menu-config .add-item{text-align:center;padding: 10px;border: 1px dashed #e5e5e5;margin: 10px 0;cursor: pointer;}
+.edit-attribute .bottom-menu-config .add-item i{font-size: 18px;vertical-align: middle;margin-right: 10px;font-style: normal;}
+.edit-attribute .bottom-menu-config .add-item span{vertical-align: middle;}
+.edit-attribute .bottom-menu-config p.hint{font-size: 12px;color: #999;margin: 10px;}
+.edit-attribute .bottom-menu-config .error-msg{margin-top: 5px;color: #f44;display: none;}
+.edit-attribute .bottom-menu-config .layui-form-checkbox span{height: initial;}
+.custom-save{margin-top: 20px;padding: 0;}
+
+.layui-form-item .layui-form-checkbox{margin-top: 8px !important;padding-left: 0 !important;}
+.bottom-menu-config .layui-form-label.sm{color: #909399 !important;font-size: 14px;}
+.edit-attribute .bottom-menu-set li .del{left:unset;right: -10px;top: -10px;}
+
+.edit-attribute .icon-block{display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top; line-height: 1;text-align: center;font-size: 12px;position: relative;}
+.edit-attribute .icon-block i.add{display:block;font-style: normal;text-align: center;font-size:30px;line-height: 48px;}
+
+.edit-attribute .icon-block>div{display: flex;flex-direction: row;height: 60px;align-items: center;padding: 0px;}
+.edit-attribute .icon-block>div img{width: 100%;max-height: 100%}
+
+.edit-attribute .icon-block>div .edit-icon{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 12px;background: rgba(0,0,0,.6);color: #ffffff;line-height: initial;cursor: pointer;}
+.edit-attribute .icon-block i.del{display: block;}
+.edit-attribute .icon-block.has-choose-image{width: 66px;height: 64px;margin-right:0;background-color: #EEEEEE;display: inline-block;vertical-align: top;position: relative;line-height: 64px;text-align: center;padding: 0;}
+.edit-attribute .icon-block:last-child{margin-top:0px;}
+.edit-attribute .icon-block.has-choose-image>div{width: 66px;height: 48px;line-height: 48px;}
+.edit-attribute .icon-block.has-choose-image img{width: 30px;height: auto;max-width: 100%;max-height: 100%;}
+.edit-attribute .icon-block.has-choose-image span{position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size:12px;background: rgba(0,0,0,.6);color:#ffffff;line-height: initial;cursor:pointer;}
+.edit-attribute .icon-block>div .operation {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,.6);
+    flex-direction: column;
+    display: none;
+}
+.edit-attribute .icon-block>div .icon-box:hover .operation, .edit-attribute .icon-block>div .upload-box:hover .operation {
+    display: flex;
+}
+.edit-attribute .icon-block>div .operation-warp {
+    flex: 1;
+    height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+.edit-attribute .icon-block>div .iconfont {
+    margin: 0 3px;
+}
+.edit-attribute .icon-block>div .operation .js-replace{
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    background: rgba(0,0,0,.7);
+    font-size: 12px;
+}
+
+.icon-box,.upload-box{
+    width: 60px;
+    height: 60px;
+    font-size: 60px;
+    border: 1px dashed #ddd;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0!important;
+    cursor: pointer;
+    position: relative;
+}
+.icon-box .select-icon, .upload-box .select-icon {
+    width: inherit;
+    height: inherit;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+}
+.icon-box .select-icon .add, .upload-box .select-icon .add {
+    font-size: 26px;
+    color: var(--base-color);
+}
+.icon-box .operation, .upload-box .operation {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background: rgba(0,0,0,.6);
+    flex-direction: column;
+    display: none;
+}
+.icon-box:hover .operation {
+    /*display: flex;*/
+}
+.upload-box:hover .operation{
+    display: flex;
+}
+.upload-box:hover {
+}
+.icon-box .operation-warp,.upload-box .operation-warp {
+    flex: 1;
+    height: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+}
+.icon-box .iconfont, .upload-box .iconfont {
+    margin: 0 3px;
+    font-size: 16px!important;
+}
+.icon-box .operation .js-replace, .upload-box .operation .js-replace{
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    padding: 5px 0;
+    background: rgba(0,0,0,.7);
+    font-size: 12px;
+}
+
+.edit-attribute .image-block .action-box {
+    display: flex;
+    flex-direction: column;
+}
+.edit-attribute .image-block .action {
+    margin-left: 6px;
+    width: 42px;
+    height: 28px;
+    line-height: 28px;
+    text-align: center;
+    border: 1px solid #EEEEEE;
+    cursor: pointer;
+}
+.edit-attribute .image-block .action:last-child {
+    margin-top: 2px;
+}
+.edit-attribute .image-block .iconfont {
+    font-size: 20px;
+}
+.edit-attribute .image-block .action:hover {
+    border-color: var(--base-color);
+    color: var(--base-color);
+}
+.select-icon-style {
+    position: fixed;
+    width: 100vw;
+    height: 100vh;
+    left: 0;
+    top: 0;
+    z-index: 9999;
+}
+.select-icon-style .icon-style-wrap {
+    position: absolute;
+    background: #fff;
+    border: 1px solid #ddd;
+    right: 40px;
+    margin-top: 15px;
+}
+.select-icon-style .icon-style-wrap iframe {
+    width: 100%;
+    height: 100%;
+}
+
+.img-upload, .upload-img-block {
+    width: 60px;
+    height: 60px;
+    padding: 0;
+}
+.upload-img-block .upload-img-box .add {
+    font-size: 26px;
+    color: var(--base-color);
+}
+.upload-img-block .operation i {
+    font-size: 16px!important;
+    margin: 0 2px!important;
+    line-height: 1;
+}
+.upload-img-block .operation > div:first-child {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: calc(100% - 20px);
+}
+
+.select-url {
+    background: #fff;
+    height: 32px;
+    cursor: pointer;
+    display: flex;
+    align-items: end;
+    color: #666;
+}
+.select-url .text {
+    flex: 1;
+    width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow:ellipsis;
+    text-align: right;
+    color: #000;
+}
+.select-url .layui-icon {
+    font-size: 12px;
+    margin-top: 1px;
+}
+.icon-text {
+    height: 30px!important;
+    text-align: center;
+    width: 64px;
+    line-height: 30px;
+    padding: 0 13px!important;
+}
+.edit-attribute .bottom-menu-set li{
+    padding-left: 25px!important;
+}
+.edit-attribute .bottom-menu-set li .icontuodong{
+    position: absolute;
+    top: calc(50% - 10px);
+    left: 10px;
+    cursor: pointer;
+    font-size: 20px;
+}
+
+/*滚动条样式*/
+.edit-attribute::-webkit-scrollbar {
+    width: 4px;
+}
+.edit-attribute::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    background: rgba(0,0,0,0.2);
+}
+.edit-attribute::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
+    border-radius: 0;
+    background: rgba(0,0,0,0.1);
+}

public/static/ext/diyview/css/diyview.css

@@ -0,0 +1,263 @@
+#diyView .layui-form-label.sm{width: 90px;font-size: 13px;}
+#diyView .layui-form-label.sm + .layui-input-block{margin-left: 100px;}
+.layui-form-select dl {z-index: 9999;}
+.layui-btn:hover {opacity: 1;}
+.footer{display:none;}
+.top-full-screen .layui-layout-admin .layui-body{top: 0;left: 0;}
+.layui-layout-admin .layui-body .body-content {min-height: initial;margin: 0;padding-top: 0;padding-bottom: 0; background: #fff;}
+.position-page-btn {position: absolute;left: 50%;margin-left: 140px;border-color: #f7f8fa;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);z-index: 9;}
+
+/*快捷操作*/
+.quick-action{position: absolute;width: 42px;background: #fff;left: 50%;top: 20%;margin-left: 140px;border-radius: 4px;text-align: center;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);z-index: 9;}
+.quick-action li{position: relative;}
+.quick-action li i {display: block;text-align: center;font-size: 20px;line-height: 40px;cursor: pointer;}
+.quick-action li.disabled i{color: #CECECE;/*cursor: not-allowed;*/}
+.quick-action li span {position: absolute;top: 5px;right: -60px;font-size: 14px;height: 30px;line-height: 30px;padding: 0 10px;background: #fff;border-radius: 4px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);display: none;}
+.quick-action li:not(.disabled):hover span {display: block;}
+.quick-action li span:after {content: "";position: absolute;left: -3px;top: 50%;margin-top: -3px;background: #fff;width: 6px;height: 6px;transform: rotate(45deg);}
+
+@keyframes spin {
+	from {
+		transform: rotate(0deg);
+	}
+
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+.loading-layer {width: 400px;height: 525px;position: absolute;z-index: 997;background: #f8f8f8;left: 50%;top: 84px;margin-left: -270px;}
+.loading-anim {position: absolute;left: 50%;top: 40%;transform: translate(-50%, -50%);width: 35px;height: 35px;perspective: 800px;transform-style: preserve-3d;transition: all 0.2s ease-out;}
+.loading-anim > .item {position: relative;width: 35px;height: 35px;perspective: 800px;transform-style: preserve-3d;transition: all 0.2s ease-out;}
+.loading-anim .out {position: absolute;border-radius: 50%;
+	border: 3px solid;top: 15%;left: 15%;width: 70%;height: 70%;
+	border-left-color: var(--base-color);
+	border-right-color: #C5C5C5;
+	border-top-color: var(--base-color);
+	border-bottom-color: #C5C5C5;
+	animation: spin 0.6s linear normal infinite;
+	perspective: 800px;
+	transform-style: preserve-3d;
+	transition: all 0.2s ease-out;}
+
+
+/* 顶部风格 */
+.nav-style {display: flex;flex-wrap: wrap;}
+.nav-style .text-title {margin-right: 2%;margin-bottom: 15px;width: 32%;height: 100px;line-height: 100px;border: 1px solid #cccc;background-color: #eee;display: inline-block;box-sizing: border-box;}
+.nav-style .text-title:nth-child(3n+3) {margin-right: 0;}
+.nav-style .text-title img {width: 100%}
+
+.template-edit-title {border-bottom: 5px solid #f6f7f9;}
+.template-edit-title:last-of-type{border-bottom: none;}
+.template-edit-title h3 {font-size: 14px;padding: 10px;color: #303133;}
+
+/*颜色选择器*/
+.colorSelector {display: inline-block;vertical-align: middle;cursor: pointer;border-radius: 2px;width: 38px;}
+.colorSelector:nth-of-type(2){margin-left: 5px;}
+.colorSelector div{border-radius: 2px;width: 34px;margin-left: -17px;background-position: initial;}
+.color-selector-reset {display: inline-block;line-height: 34px;cursor: pointer;margin-left: 10px;}
+.flexbox-fix-btn {justify-content: center;}
+.flexbox-fix-btn .btn {width: 40px;line-height: 22px;font-size: 12px;margin: 0;box-sizing: border-box;border-radius: 3px;}
+.flex {justify-content: space-between;display: flex;align-items: center;}
+.flex .flex_fill {flex: 1;text-align: right;margin-left: 5px;}
+.flex .flex_left {display: flex;align-items: center;}
+.flex .flex_left .curr-color {color: #303133;margin-left: 7px;}
+.flex .flex_left .curr-color span:first-child{margin-right: 10px;}
+
+.selected-style {cursor: pointer;float: right;color: #909399;}
+.selected-style i {font-size: 12px;line-height: 34px;color: #818181;margin-left: 5px;}
+
+/* 链接地址 */
+.layui-input-block span.sm {display: flex;line-height: 34px;cursor: pointer;}
+.layui-input-block span.sm span {display: inline-block;max-width: 130px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+.layui-input-block span.sm i {margin-left: 5px;font-size: 12px;color: #818181;}
+.component-links .layui-input-block .sm {float: right;}
+
+/* 选择icon */
+.component-icon .layui-input-block .sm {width: 50px;height: 50px;justify-content: space-around;align-items: center;border: 1px solid #CCC;}
+.component-icon .layui-input-block .sm i{margin: 0;font-size: 16px;}
+.component-icon .layui-input-block .sm i.js-icon{font-size: 20px;}
+
+/* 进度条样式 */
+.layui-input-block {line-height: 34px;min-height: 34px;}
+.side-process {display: inline-block;margin-right: 15px;margin-left: 5px;width: 260px;vertical-align: middle;}
+.slide-prompt-text {color: #909399;}
+.layui-slider-wrap {top: -17px;}
+.layui-slider {height: 3px;}
+
+#diyView {position: relative;background: #f7f8fa;padding: 20px 0 0;visibility: hidden;/*min-width: 1300px;*/}
+
+.custom-save {text-align: center;background: #fff;padding: 15px 400px 15px 290px;}
+
+.preview-wrap {overflow: hidden;margin-left: 255px;margin-right: 392px;}
+.preview-wrap .preview-restore-wrap { /*width: 102%;*/margin-right: -12px;visibility: hidden;}
+.preview-wrap .preview-restore-wrap .div-wrap {overflow: auto;height: 525px;}
+
+
+.preview-wrap .preview-restore-wrap .diy-view-wrap {width: 375px;background-repeat: no-repeat;background-position-y: 128px;background-size: 100%;margin: 0 auto 20px;border:2px solid #f0f1f3;padding-top: 64px;margin-top: -64px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head {height: 64px;width: 375px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head > span {background: #fff url(../img/preview_head.png) no-repeat 50%/cover;font-size: 14px;display: block;text-align: center;height: 64px;line-height: 82px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;cursor: pointer;margin: 0 auto;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-block {min-height: 400px;}
+
+/*组件列表*/
+.component-list {width: 235px;padding: 0 10px;background: #ffffff;float: left;position: absolute;top: 0;overflow: hidden;user-select: none;z-index: 9999;}
+.component-list .tab{display: flex;margin: 10px 0 5px -10px;}
+.component-list .tab span{font-weight: normal;font-size: 14px;cursor: pointer;line-height: 40px;flex: 1;text-align: center;position: relative;background: #fff;border-top: 1px solid #f1f1f1;border-bottom: 1px solid #f1f1f1;border-left: 1px solid #f1f1f1;}
+.component-list .tab span:last-child{border-right: 1px solid #f1f1f1;}
+.component-list .tab span.selected{background-color: #f1f1f1;}
+/*.component-list .tab span.selected:after{content: '';border-bottom: 2px solid;position: absolute;left: 50%;bottom: 0;width: 65%;transform: translate(-50%, -50%);}*/
+.component-list nav {height: 610px;overflow-y: auto;width: 257px;}
+.component-list h3 {font-size: 14px;/*margin-top: 10px;*/cursor: pointer;line-height: 40px;}
+.component-list h3 img {width: 16px;margin-right: 5px;}
+.component-list ul {overflow: hidden;margin: 0;padding: 0;transition: all .3s;opacity: 1;}
+.component-list ul li {float: left;font-size: 12px;width: 78px;height: 75px;text-align: center;cursor: pointer;position: relative;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+.component-list ul li.hot:after {content: '';background: url(../img/hot_component.png) no-repeat center/100%;position: absolute;width: 16px;height: 20px;right: 20%;top: 0;}
+.component-list ul li.disabled { /*cursor: not-allowed;*/color: #bbb;}
+.component-list ul li img {width: 42px;margin-top: 11px;}
+.component-list ul li span:last-child {font-size: 12px;/*color: #909399;*/display: block;margin-top: 5px;}
+.component-list ul li i{font-size: 23px;margin-bottom: 4px;/*color: #909399;*/margin-top: 14px;display: inline-block;}
+
+/*预览*/
+.draggable-element {outline: 2px dotted transparent; /*background: #ffffff;position: relative;*/}
+.draggable-element .preview-draggable { cursor: move;position: relative;}
+.draggable-element .preview-draggable .preview-box {padding: 0;}
+.draggable-element.selected {outline: 2px solid;}
+.del {background: #999;color: #FFFFFF;position: absolute;border-radius: 50%;width: 20px;height: 20px;font-size: 12px;font-style: normal;line-height: 18px;text-align: center;right: -10px;top: -10px;cursor: pointer;z-index: 1;display: none;}
+/*ul li .content-block + .del {right: unset;left: 68px;top: 0;}*/
+.draggable-element .preview-draggable:hover .del {display: block;}
+.draggable-element .comp-title{position: absolute;left: -90px;min-width: 70px;min-height: 20px;padding: 4px 7px;box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);box-sizing: border-box;text-align: center;line-height: 20px;font-size: 12px;background: #fff;border-radius: 2px;top:0;/*top: 50%;margin-top: -14px;*/}
+
+/*右侧编辑栏*/
+.edit-attribute {position: absolute;top: 0;right: 0;background: #ffffff;border-top: 1px solid #f7f8fa;width: 370px;padding: 10px;z-index: 1;overflow: hidden;display: none;}
+.draggable-element.selected .edit-attribute{display: block;}
+
+/* 选中页面设置 */
+.page-set-wrap.selected .edit-attribute{display: block;}
+
+/* 选中弹窗广告组件 */
+.pop-window-wrap.selected .edit-attribute{display: block;}
+
+.edit-attribute .attr-wrap {width: 392px;overflow-x: hidden;overflow-y: auto;height: 600px;}
+.edit-attribute .attr-wrap .restore-wrap {width: 360px;}
+.edit-attribute .attr-wrap .restore-wrap .layui-form-label {color: #666 !important;}
+.edit-attribute .attr-wrap .restore-wrap .attr-title {padding: 10px 0 15px 10px;border-bottom: 2px solid #f2f4f6;margin-bottom: 10px;color: #303133;display: flex;justify-content: space-between;align-items: center;}
+.edit-attribute .attr-wrap .restore-wrap .attr-title .title{font-size: 18px;}
+.edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap{background-color: #f5f5f5;border-radius: 50px;font-size: 14px;display: flex;}
+.edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span{cursor: pointer;padding: 5px 15px;border-radius: 50px;}
+.edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span.active{color: #fff;}
+
+.edit-attribute .attr-wrap .restore-wrap .layui-form input[type=radio] {display: inline-block;opacity: 0;position: absolute;top: 10px;width: 60px;height: 20px;cursor: pointer;}
+.edit-attribute .attr-wrap .restore-wrap .img-block {display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top;text-align: center;border: 1px solid #CCCCCC;width: 66px;height: 66px;line-height: 66px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block > div {position: relative}
+.edit-attribute .attr-wrap .restore-wrap .img-block > div.del {display: inline-block;margin-right: 10px;cursor: pointer;vertical-align: top;text-align: center;border: 1px solid #CCCCCC;width: 66px;height: 66px;line-height: 66px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block {display: inline-block;width: calc(100% - 78px);font-size: 14px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-form-label.sm {width: 68px !important;}
+.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-input-block {margin-left: 78px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block + .content-block .layui-input-block span.sm {float: right;}
+.edit-attribute .attr-wrap .restore-wrap .img-block i.add {display: block;font-style: normal;text-align: center;font-size: 26px;min-width: 26px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block i.del {display: none;}
+.edit-attribute .attr-wrap .restore-wrap .img-block:hover i.del {display: block;}
+.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image {width: 66px;height: 64px;border: 1px dashed #e5e5e5;display: inline-block;vertical-align: top;position: relative;line-height: 64px;margin-right: 10px;text-align: center;padding: 0;overflow: hidden}
+.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div {width: 66px;height: 64px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
+.edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image span {position: absolute;bottom: 0;left: 0;width: 100%;text-align: center;font-size: 12px;background: rgba(0, 0, 0, .6);color: #ffffff;line-height: initial;cursor: pointer;}
+.edit-attribute .attr-wrap .restore-wrap .img-block span {font-size: 12px;line-height: 23px;}
+.layui-btn.layui-btn-primary.sm {margin-top: 5px;padding: 5px 10px !important;height: auto;font-size: 12px;border-radius: 0;vertical-align: baseline;line-height: 1}
+/*.edit-attribute .attr-wrap .restore-wrap .layui-form-radio {margin-top: 0;line-height: 34px;}*/
+/*.edit-attribute .attr-wrap .restore-wrap .layui-form-radio:last-child{margin-right: 0;}*/
+
+/* 单选 */
+.icon-radio .icon-wrap {float: right;}
+.icon-radio .icon-wrap li {display: inline-block;width: 50px;height: 32px;line-height: 30px;text-align: center;border: 1px solid #EEEEEE;border-right: 1px solid transparent;cursor: pointer;float: left;box-sizing: border-box;color: #909399;}
+.icon-radio .icon-wrap li .iconfont.angle{font-size: 14px;}
+.icon-radio .icon-wrap li:last-child {border-right: 1px solid #EEEEEE;}
+
+/* 复选 */
+.checkbox-wrap .layui-form-checkbox, .checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox {float: right;}
+.checkbox-wrap .layui-form-checkbox[lay-skin=primary] {margin-top: 4px;padding-left: 20px;}
+.checkbox-wrap .layui-input-inline-checkbox span {color: #666;}
+.checkbox-wrap .layui-input-block {margin-left: 35px;}
+.checkbox-wrap .layui-input-inline-checkbox .layui-form-checkbox[lay-skin=primary] {margin-top: 8px;}
+
+/* 图片上传 */
+.edit-attribute .attr-wrap .restore-wrap .img-upload .img-block {padding: 4px;margin-right: 0;float: right;}
+.edit-attribute .attr-wrap .restore-wrap  .img-block .operation{position: absolute;width: 100%;height: 100%;background: rgba(0,0,0,.6);flex-direction: column;display: none;top:0;}
+.edit-attribute .attr-wrap .restore-wrap  .img-block:hover .operation {display: flex;}
+.edit-attribute .attr-wrap .restore-wrap  .img-block .operation-warp {flex: 1;height: 0;display: flex;align-items: center;justify-content: center;color: #fff;}
+.edit-attribute .attr-wrap .restore-wrap  .img-block .iconfont {margin: 0 3px;font-size: 16px!important;}
+.edit-attribute .attr-wrap .restore-wrap  .img-block .operation .js-replace{line-height: 1;color: #fff;text-align: center;padding: 5px 0;background: rgba(0,0,0,.7);font-size: 12px;}
+.edit-attribute .attr-wrap .restore-wrap .img-block .icon-wrap:hover .operation{display: block;}
+.edit-attribute .attr-wrap .restore-wrap  .img-block .upload-img-box:hover .operation{display: block;}
+.img-upload + .diy-word-aux {margin-left: 15px;}
+
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1{}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;font-size: 16px;height: 64px;line-height: 90px;cursor: pointer;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1 .preview-head-div span {display: inline-block;padding: 0 15px 0 15px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-1.center .preview-head-div span{padding-right:20px;width: 160px;margin: 0 auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2{}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 .preview-head-div span{font-size: 16px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-2 img{margin-right: 15px;max-width:150px;height: 28px;}
+
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3{}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search{padding-right: 100px;display: flex;align-items: center;padding-top: 28px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search img {margin-right: 10px;height: 30px;max-width: 85px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search .top-search-box {flex:1;width: 80%;height: 30px;display: flex;align-items:center;border-radius:30px;background: rgb(255, 255, 255);color:#909399;line-height: 2.1;border:1px solid #E6E6E6;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-3 .preview-head-div .img-text-search .top-search-box i {margin-right: 5px;margin-left: 10px;}
+
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4{}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .preview-head-div {background: url(../img/preview_head.png) no-repeat 50%/cover;height: 64px;cursor: pointer;padding: 0 15px;line-height: 90px;display: flex;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 span.store-name{margin: 0 5px;font-size: 16px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .nearby-store-name{display: inline-block;margin: -1px 5px 0;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 .nearby-store-name span{background: rgba(0,0,0,.3);font-size: 12px;border-radius: 20px;padding: 5px 10px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 i:first-child{font-size: 18px;}
+.preview-wrap .preview-restore-wrap .diy-view-wrap .preview-head .nav-tabbar.style-4 i:last-child{font-size: 14px;}
+
+.diy-word-aux {margin-left: 95px;display: block;margin-top: 5px;color: #B2B2B2;font-size: 12px;line-height: 1.6;}
+
+.layui-layer-page .layui-layer-content {overflow: auto !important;}
+.top-full-screen .layui-layout-admin .layui-body{padding-right: 0 !important;width: 100%  !important;margin-left: 0 !important;}
+.top-full-screen .layui-layout-admin .layui-body .body-wrap{margin-top: 0 !important;}
+.top-full-screen .custom-save{display: flex;justify-content: space-between;align-items: center;padding: 10px 0;border-bottom: 1px solid #ececec;}
+/*.top-full-screen .custom-save .layui-btn{background-color: #fff;}*/
+/*.top-full-screen .cancel-btn{border-color: #ececec;color: #333;}*/
+/*.top-full-screen .cancel-btn:hover{color: #333;}*/
+
+.bg-select .bg-select-ul{text-align:right}
+.bg-select .bg-select-ul li{display:inline-block;width:20px;height:20px;border-radius:3px;border:1px solid #d7d7d7;vertical-align:middle;cursor:pointer;padding:2px;box-sizing:border-box;margin-left:5px}
+.bg-select .bg-select-ul li div{width:100%;height:100%;border-radius:3px}
+
+/* 超出单行影藏 */
+.using-hidden {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+/* 超出两行影藏 */
+.multi-hidden {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+
+/* 商品来源选择 */
+.source-selected {display: flex;flex-wrap: wrap;}
+.source-selected .source {flex: 1;}
+.source-selected .source-item,.template-selected .source-item {width: 46px;height: 32px;text-align: center;border: 1px solid #e5e5e5;padding: 5px;cursor: pointer;background: #ffffff;box-sizing: border-box;border-right: 1px transparent solid;display: flex;align-items: center;justify-content: center;color: #909399;}
+.source-selected .source-item:last-child,.template-selected .source-item:last-child{border-right: 1px solid #e5e5e5;}
+
+/* 列表样式 */
+.list-style .layui-input-block{margin-left: 40px !important;}
+.template-selected {display: flex;flex-wrap: wrap;margin-left: 50px;}
+.style-selected{display: flex;flex-wrap: wrap;margin-top: 10px;margin-left: 50px;}
+.style-selected .layui-form-radio:nth-child(3n){margin-right: 0;}
+
+/* 图片和图标选择 */
+.icon-img-upload {width: 66px;height: 66px;font-size: 66px;display: flex;align-items: center;justify-items: center;border: 1px solid #CCCCCC;text-align: center;margin-right: 10px;position: relative;}
+.icon-img-upload .add {color: var(--base-color);font-size: 26px;margin: 0 auto;width: 66px;height: 66px;line-height: 66px;text-align: center;cursor: pointer;}
+.icon-img-upload img {max-width: 100%;max-height: 100%;width: 100%;}
+.icon-img-upload .operation {position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5);color: #fff;display: none;flex-direction: column;z-index: 5;}
+.icon-img-upload:hover .operation {display: flex;}
+.icon-img-upload .operation .operation-warp {flex: 1;height: 0;display: flex;align-items: center;justify-content: center;}
+.icon-img-upload .operation-warp i {margin: 0 2px;cursor: pointer;}
+.icon-img-upload .operation .js-replace {height: 24px;color: #fff;background: rgba(0, 0, 0, 0.5);font-size: 12px;line-height: 24px;cursor: pointer;}
+.common-set .word-aux{margin: 0 0 0 100px;padding: 0;}
+
+/* 选择图标风格 */
+.select-icon-style {position: fixed;width: 100vw;height: 100vh;left: 0;top: 0;z-index: 9999;}
+.select-icon-style .icon-style-wrap {position: absolute;background: #fff;border: 1px solid #ddd;right: 40px;margin-top: 15px;}
+.select-icon-style .icon-style-wrap iframe {width: 100%;height: 100%;}

public/static/ext/diyview/css/member_icon/iconfont.css

@@ -0,0 +1,33 @@
+@font-face {font-family: "iconfont";
+  src: url('iconfont.eot?t=1603697914102'); /* IE9 */
+  src: url('iconfont.eot?t=1603697914102#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAWwAAsAAAAAC0gAAAViAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqJZIddATYCJAMUCwwABCAFhG0HShtrCSMRtntxApL9RYJ5yHh5RiMEi+kx+Qyk2+kMZFNWMFKkKxI8kw99Z77BaiIdpBJBQfh3r6ISADz0O//VvUBDSTSJo4jCCUxpOhPnemCjItRIvkWPvtuubTZO8/i/c9lunGzc8oiFvhlxgGpEbhJT21j4x2DvTSim/zlmunw+sPw2G9DUsoIqAEd7A5zNOi6L7E7lHM/9Fti5rTqYhOuBAIQoGcjwVa8PFccLCWbtLp3aQHWo8AgcoUrlgJ0JciFRyxSqA5il/Tz5kRcqQEkV/MraHb3tUf551PN1bHRwNJorCLCLMwC47QMYIAPAgZxAU3cwQ5ChiUTQeK48AEFF0aKGFX9e+vm6YBAWr0MSIfzDAxiKI0AaeJGRsOWFfODYEgUYPC9OAQrPS7OixeuQMy0iSdkhADYgD0A+8JIEbTXBKaTesZ7RGCeE0YR/i01wVtdiAB2S2p5o1zPq7g5LN6i+r+twFq8jdPMzk0ioibSCAoi5VU28JZVfnHXkaiiERNaGlF3887lNayrp2NOpFsb3//PJpJbMLeMwBkxX+Wti7d0DNariIOYZg8WNwq8X04Y5mZhMGyEhtL+/kJPTQT8xhFyF/VS++9MEQgHGVJKRrv7AeylGnJimStTf3yBJK4yrQUzh33/7q3Ku4jCAyMr//5Sg2ynH2iiKYWMkM/z8xGrPKItRo/XFv2Fd6Y+CgeuvqO5qU5adZjLlwCBtSKjLWRJI/aSLNBYHay25e0sG0HHO50vBIcYIx8MUHLFBudrBmCvkTqdbfblEiS1e6wTYJpw/HePwPuTWfM32ys4+UHWdE8UT8gR3pI3ewGm5LFFWV4ZEU+uGGvyeKccRW4Vx/8UIvuJSEcuhK9FszNaf3UBmmaOta7xrfUJ6XzqtVM49qTDpbYs6xFqAshGV0MXGawcCCp2Ofhv/sKFeui5s6aCTxy5fPlpIo0zz6KBK9E9NMJ26/FXqWDr5KtSoXKNCBvzojUY2anQDU3je8SWXLi06PqVzONAME3HunsRWI2sJ41Y/ad0aVTwbEpxpcQMrKsLXqFoJh4N5SaPiBnlY5bg0J7kRCn/rtn5id9dML5te001/ONf6ZGT/8cNrlitIqF66sa1feWUwaIrvZ4sc7hrppdOPPbvJiV+gKwy5xBqXVrtqQFECgd69AxodT0PB8nqVSq0vt66keHOWOLMdS53TGcNWR4hkz57uXIof4FzSG17nlpjLMVuc3rXTPJo+++VsXfOszWw5+q7zrtZS47aeuyh0zafpTl34hL5QcJVszKhHIeMVYZPncGV7xqlT77o1Dn4+DT+198H0ypbKuqTwesV7Fi/h8zUPXu150TFZYom548MdDxua55kbWk6LT5NKcu+OykalY29txWozwWAAQDDIqMBAwlb2jjUkrGUDWHZEZ5dYwd4/CzUvvP3eylL6m2q4IHruHF/xi5zBtRzZWLuwGInZ+zo7YQv/cnm1lO9yifVOl1yCAvsNZ7cu2cNtdveL0boUGSFULgsoRSQwqgQkx2aAxKAAZKpyIKTz7zdw6AuGpAYgzQQAwmoXUGangLEqRHLsPZC4vQOZNRgIDYnjRIOkWM67g8AoSsp/xEXfWVGrOz37CvdqjNi5Gv4JCeylNErc0Qs6SBFrwttlqpas9C2d4WZomp4G6SsUGnnVYR/HNuiLoqJvJzscBEZRUv4jLvrOKt115/n+K9yrMRJR8UP9hAQenNIoSYC8iLpEFZtSGN4uUwpYsrfMvqUzGdAIoZ6G4GkVCo18hsCwj6mTTSqKqpe085h9oVXlP08ilDDCiURkLPuy87oKHn/PqxINFKucTVfxZAIAAA==') format('woff2'),
+  url('iconfont.woff?t=1603697914102') format('woff'),
+  url('iconfont.ttf?t=1603697914102') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
+  url('iconfont.svg?t=1603697914102#iconfont') format('svg'); /* iOS 4.1- */
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-right:before {
+  content: "\e6a3";
+}
+
+.icon-shezhi:before {
+  content: "\e638";
+}
+
+.icon-delete:before {
+  content: "\e61e";
+}
+
+.icon-bianji:before {
+  content: "\e63c";
+}
+

public/static/ext/diyview/css/member_icon/iconfont.json

@@ -0,0 +1,37 @@
+{
+  "id": "",
+  "name": "",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "56027336",
+      "name": "right",
+      "font_class": "right",
+      "unicode": "e6a3",
+      "unicode_decimal": 59043
+    },
+    {
+      "icon_id": "56027364",
+      "name": "设置",
+      "font_class": "shezhi",
+      "unicode": "e638",
+      "unicode_decimal": 58936
+    },
+    {
+      "icon_id": "376362",
+      "name": "删除",
+      "font_class": "delete",
+      "unicode": "e61e",
+      "unicode_decimal": 58910
+    },
+    {
+      "icon_id": "1472556",
+      "name": "编辑",
+      "font_class": "bianji",
+      "unicode": "e63c",
+      "unicode_decimal": 58940
+    }
+  ]
+}

public/static/ext/diyview/css/member_icon/iconfont.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="right" unicode="&#59043;" d="M761.056 363.872c0.512 0.992 1.344 1.824 1.792 2.848 8.8 18.304 5.92 40.704-9.664 55.424L399.936 756.256c-19.264 18.208-49.632 17.344-67.872-1.888-18.208-19.264-17.376-49.632 1.888-67.872l316.96-299.84-315.712-304.288c-19.072-18.4-19.648-48.768-1.248-67.872 9.408-9.792 21.984-14.688 34.56-14.688 12 0 24 4.48 33.312 13.44l350.048 337.376c0.672 0.672 0.928 1.6 1.6 2.304 0.512 0.48 1.056 0.832 1.568 1.344C757.76 357.12 759.2 360.608 761.056 363.872z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="shezhi" unicode="&#58936;" d="M992 285.866667c-4.266667-27.733333-21.333333-46.933333-42.666667-46.933334h-4.266666c-70.4 0-128-57.6-128-130.133333 0-23.466667 10.666667-49.066667 10.666666-49.066667 10.666667-25.6 2.133333-55.466667-19.2-70.4h-2.133333L682.666667-81.066667h-2.133334c-6.4-2.133333-14.933333-4.266667-23.466666-4.266666-17.066667 0-36.266667 8.533333-46.933334 19.2-14.933333 17.066667-64 61.866667-102.4 61.866666-38.4 0-87.466667-44.8-102.4-59.733333-10.666667-12.8-27.733333-19.2-46.933333-19.2-8.533333 0-17.066667 2.133333-23.466667 4.266667h-2.133333L213.333333-10.666667h-2.133333c-21.333333 14.933333-29.866667 46.933333-19.2 70.4 0 0 10.666667 25.6 10.666667 49.066667 0 70.4-57.6 130.133333-128 130.133333-19.2 0-36.266667 17.066667-42.666667 46.933334 0 2.133333-10.666667 55.466667-10.666667 98.133333 0 42.666667 10.666667 96 10.666667 98.133333 4.266667 27.733333 21.333333 46.933333 42.666667 46.933334h4.266666c70.4 0 128 57.6 128 130.133333 0 23.466667-10.666667 49.066667-10.666666 49.066667-12.8 21.333333-4.266667 53.333333 19.2 68.266666h2.133333l128 70.4h2.133333c4.266667 4.266667 10.666667 6.4 19.2 6.4 17.066667 0 34.133333-6.4 46.933334-19.2 14.933333-14.933333 61.866667-57.6 100.266666-57.6 38.4 0 85.333333 40.533333 100.266667 55.466667 10.666667 12.8 27.733333 19.2 44.8 19.2 8.533333 0 17.066667-2.133333 23.466667-4.266667h2.133333l123.733333-68.266666h2.133334c21.333333-14.933333 29.866667-46.933333 19.2-70.4 0 0-10.666667-25.6-10.666667-49.066667 0-70.4 57.6-130.133333 128-130.133333h4.266667c19.2 0 36.266667-17.066667 42.666666-46.933334 0-2.133333 10.666667-55.466667 10.666667-98.133333-2.133333-42.666667-12.8-96-12.8-98.133333z m-40.533333 187.733333c-2.133333 6.4-2.133333 8.533333-4.266667 10.666667-93.866667 0-170.666667 76.8-170.666667 172.8 0 29.866667 10.666667 59.733333 14.933334 66.133333 2.133333 6.4 0 14.933333-4.266667 19.2l-119.466667 66.133333H661.333333c-6.4 0-12.8-2.133333-14.933333-6.4-6.4-6.4-68.266667-70.4-132.266667-70.4s-125.866667 64-132.266666 70.4c-2.133333 6.4-8.533333 8.533333-14.933334 8.533334h-6.4l-123.733333-68.266667c-4.266667-4.266667-6.4-12.8-4.266667-19.2 0 0 14.933333-34.133333 14.933334-66.133333 0-93.866667-76.8-172.8-170.666667-172.8-2.133333-2.133333-2.133333-6.4-4.266667-10.666667 0 0-8.533333-51.2-8.533333-89.6 0-38.4 8.533333-89.6 8.533333-89.6 2.133333-6.4 2.133333-8.533333 4.266667-10.666667 93.866667 0 170.666667-76.8 170.666667-172.8 0-27.733333-10.666667-55.466667-14.933334-66.133333-2.133333-6.4 0-14.933333 4.266667-19.2l117.333333-66.133333h6.4c6.4 0 12.8 2.133333 14.933334 6.4 2.133333 2.133333 68.266667 74.666667 134.4 74.666666 66.133333 0 128-68.266667 134.4-74.666666 2.133333-2.133333 8.533333-6.4 14.933333-6.4h6.4l121.6 68.266666c4.266667 4.266667 6.4 12.8 4.266667 19.2-2.133333 4.266667-14.933333 34.133333-14.933334 66.133334 0 93.866667 76.8 172.8 170.666667 172.8 2.133333 2.133333 2.133333 6.4 4.266667 10.666666 0 0 8.533333 51.2 8.533333 89.6 0 36.266667-8.533333 87.466667-8.533333 87.466667zM512 213.333333c-93.866667 0-170.666667 76.8-170.666667 170.666667s76.8 170.666667 170.666667 170.666667 170.666667-76.8 170.666667-170.666667-76.8-170.666667-170.666667-170.666667z m0 300.8c-70.4 0-130.133333-57.6-130.133333-130.133333 0-72.533333 57.6-130.133333 130.133333-130.133333s130.133333 57.6 130.133333 130.133333c0 72.533333-59.733333 130.133333-130.133333 130.133333z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="delete" unicode="&#58910;" d="M837.818 581.455l0-581.818c0-51.433-41.705-93.091-93.091-93.091l-465.455 0c-51.433 0-93.091 41.705-93.091 93.091l0 581.818c-25.693 0-46.545 20.852-46.545 46.545l0 46.545c0 25.693 20.852 46.545 46.545 46.545l139.636 0 0 46.545c0 25.74 20.852 46.545 46.545 46.545l279.273 0c25.693 0 46.545-20.852 46.545-46.545l0-46.545 139.636 0c25.693 0 46.545-20.852 46.545-46.545l0-46.545c0-25.74-20.852-46.545-46.545-46.545zM232.727 581.455l0-581.818c0-25.693 20.852-46.545 46.545-46.545l465.455 0c25.693 0 46.545 20.852 46.545 46.545l0 581.818c-26.159 0-526.569 0-558.545 0zM372.364 721.091l0 23.273c0 12.847 10.426 23.273 23.273 23.273l232.727 0c12.847 0 23.273-10.426 23.273-23.273l0-23.273c-22.528 0-279.273 0-279.273 0M814.545 674.545l-605.091 0c-12.847 0-23.273-10.426-23.273-23.273 0-12.847 10.426-23.273 23.273-23.273l605.091 0c12.847 0 23.273 10.426 23.273 23.273 0 12.847-10.426 23.273-23.273 23.273zM372.364 465.091c12.847 0 23.273-10.426 23.273-23.273l0-325.818c0-12.847-10.426-23.273-23.273-23.273-12.847 0-23.273 10.426-23.273 23.273l0 325.818c0 12.847 10.426 23.273 23.273 23.273zM512 465.091c12.847 0 23.273-10.426 23.273-23.273l0-325.818c0-12.847-10.426-23.273-23.273-23.273s-23.273 10.426-23.273 23.273l0 325.818c0 12.847 10.426 23.273 23.273 23.273zM651.636 465.091c12.847 0 23.273-10.426 23.273-23.273l0-325.818c0-12.847-10.426-23.273-23.273-23.273s-23.273 10.426-23.273 23.273l0 325.818c0 12.847 10.426 23.273 23.273 23.273z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="bianji" unicode="&#58940;" d="M300.8 172.8c0-12.8 0-19.2 6.4-25.6 6.4-6.4 12.8-6.4 19.2-6.4h6.4l172.8 44.8 448 448c19.2 19.2 32 51.2 0 83.2l-64 64c-32 32-64 32-96-6.4l-448-435.2-44.8-166.4zM825.6 736c6.4 6.4 19.2 6.4 25.6 0l44.8-44.8c6.4-6.4 6.4-19.2 0-25.6l-44.8-44.8-70.4 70.4 44.8 44.8zM736 646.4l70.4-70.4-313.6-313.6-70.4 70.4L736 646.4zM384 288l64-64-83.2-19.2L384 288z m544 204.8c-25.6 0-38.4-12.8-38.4-25.6v-409.6c0-19.2-19.2-38.4-38.4-38.4H166.4c-19.2 0-38.4 19.2-38.4 38.4V716.8c0 19.2 19.2 38.4 38.4 38.4h448c12.8 0 25.6 12.8 25.6 32s-12.8 32-32 32H160c-51.2 0-96-44.8-96-96v-678.4c0-51.2 44.8-96 96-96h704c51.2 0 96 44.8 96 96v416c0 19.2-12.8 32-32 32z"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

public/static/ext/diyview/css/member_index.css

@@ -0,0 +1,79 @@
+.preview-wrap{overflow: hidden;margin-left: 290px;margin-right: 400px;}
+
+/* 新的样式 */
+.preview-block{background-color: #fff;}
+
+.color-list>.colorSelector{margin-right: 20px;}
+.color-list>.colorSelector:nth-last-child(2){margin-right: 16px;}
+.color-list>.colorSelector.selected,.color-list .layui-form-item.selected .colorSelector{border: 1px solid #FF6A00;}
+.color-list .layui-form-item{display: inline-block;margin-bottom: 0;}
+.color-list .layui-form-label{display: none;}
+.color-list .layui-form-label.sm + .layui-input-block{margin-left: 0;line-height: initial;min-height: initial;}
+.color-list .diy-color-wrap{width: 85px; display: inline-block;padding: 0 5px;height: 28px;line-height: 26px;}
+.color-list .diy-color-wrap .flex_left{margin-left: 50px;}
+.color-list .diy-color-wrap input{width: 55px;border: none;font-size: 12px;}
+.color-list .diy-color-wrap .color-selector-reset{line-height: initial;font-size: 12px;display: none;}
+/*.color-list .diy-color-wrap .colorSelector{margin-right: 0;}*/
+.color-list .diy-color-wrap .flex_fill{position: absolute;top: 68px;left: 34px;}
+.diy-text-color .flex{display: flex;}
+.diy-text-color .flex .flex_left{display: flex; align-items: center;}
+.diy-text-color .flex .flex_left .curr_color{display: none;}
+
+/* 会员中心 */
+.member-info .preview-draggable{background-color: #ff454f;background-size: 100% auto;background-position: left top;}
+.member-info .preview-draggable .info{position: relative;display: flex;align-items: center;padding: 15px;color: #fff;}
+.member-info .preview-draggable .info .info-img{width: 50px;height: 50px;border: 3px solid #fff;margin-right: 8px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
+.member-info .preview-draggable .info .info-img img{max-width: 100%;max-height: 100%;}
+.member-info .preview-draggable .info .info-set{position: absolute;width: 20px;height: 20px;right: 15px;top: 15px;}
+.member-info .preview-draggable .info .info-set i {font-size: 18px;color: #fff;line-height: 1;}
+.member-info .preview-draggable .info .info-content .info-name{font-size: 16px;font-weight: bold;}
+.member-info .preview-draggable .info .info-content .info-grad{text-align: center;display: block;color: #e7e525;background: rgba(0, 0, 0, 0.5);-webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px;font-size: 12px;margin-top: 5px;padding: 5px 8px;line-height: 1;}
+.member-info .preview-draggable .wallet{margin-top: 10px;display: flex;justify-content: space-around;align-items: center;color: #fff;padding-bottom: 10px;}
+.member-info .preview-draggable .wallet .wallet-item{padding: 0 30px;}
+.member-info .preview-draggable .wallet .wallet-item-border{height: 30px;width: 1px;background-color: rgba(255,255,255,.5);}
+.member-info .preview-draggable .wallet span{display: flex;justify-content: center;}
+
+/* 订单信息 */
+.order-info .preview-draggable{background-color: #fff;padding: 0 15px;}
+.order-info .preview-draggable .order-info-title{display: flex;align-items: center;height: 50px;justify-content: space-between;border-bottom: 1px solid #e7e7e7;}
+.order-info .preview-draggable .order-info-title .all-order{font-size: 16px;font-weight: bold;}
+.order-info .preview-draggable .order-info-title .check-order,.order-info .preview-draggable .order-info-title .check-order i{color: #a3a3a3;font-size: 12px;}
+
+.order-info .preview-draggable .order-info-content{display: flex;justify-content: space-between;padding: 10px 0;text-align: center;}
+.order-info .preview-draggable .order-info-content .content-item-icon{width: 25px;height: 25px;margin: 0 auto 5px;}
+.order-info .preview-draggable .order-info-content .content-item-icon img{max-width: 100%;max-height: 100%;}
+
+/* 会员等级 */
+.member-grade .preview-draggable{display: flex;justify-content: space-between;align-items: center;height: 44px;margin: 20px 10px;color: #e5ce75;border-radius: 6px;background: #1D1D1D;padding: 0 10px;background: -webkit-linear-gradient(left, #683f00, #1D1D1D);background: linear-gradient(to right, #683f00, #1D1D1D);}
+
+/* 常用工具 */
+.common-tools .preview-draggable{padding: 10px 0;}
+.common-tools .preview-draggable .tools-title{padding: 0 10px;height: 40px;line-height: 40px;}
+.common-tools .preview-draggable .tools-title span{font-size: 16px;font-weight: bold;}
+.common-tools .preview-draggable .tools-list{padding: 0;display: flex;flex-wrap: wrap;}
+.common-tools .preview-draggable .tools-list .tools-item{display: flex;flex-direction: column;justify-content: center;align-items: center;width: 92px;height: 48px;padding: 10px 0;}
+.common-tools .preview-draggable .tools-list .tools-item .tools-item-icon{display: flex;align-items: center;justify-content: center;width: 22px;height: 22px;margin-bottom: 5px;}
+.common-tools .preview-draggable .tools-list .tools-item img{max-width: 100%;max-height: 100%;}
+.common-tools .preview-draggable .tools-list.list{display: block;}
+.common-tools .preview-draggable .tools-list.list .tools-item{display: block;width: initial;height: initial;padding: 12px 10px;margin: 0 10px;border-bottom: 1px solid #e5e5e5;}
+.common-tools .preview-draggable .tools-list.list .tools-item:first-child{border-bottom: 1px solid #e5e5e5;}
+.common-tools .preview-draggable .tools-list.list .tools-item:last-child{border-bottom: none;}
+.common-tools .preview-draggable .tools-list.list .tools-item .tools-item-icon{display: inline-block;width: 22px;height: 22px;margin-right: 5px;}
+.common-tools .preview-draggable .tools-list.list .tools-item i{float: right;color: #a3a3a3;}
+.common-tools .preview-draggable .tools-list.list.insert-gap{background: #F7F8FA;}
+.common-tools .preview-draggable .tools-list.list.insert-gap li{background: #fff;margin-bottom: 10px;border-bottom: 0 !important;}
+.common-tools .preview-draggable .tools-list.list.insert-gap li:last-child{margin-bottom: 0;}
+
+.menu-list{margin-left:10px;}
+/*#f2f4f6*/
+.menu-list>ul{margin-bottom: 10px;}
+.menu-list>ul>li{background: #ffffff;border:1px solid #e5e5e5;position:relative;border-top: none;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;height: 50px;line-height: 50px;}
+.menu-list>ul>li:first-child{border-top:1px solid #e5e5e5;}
+.menu-list>ul>li .layui-form-checkbox{display: inline-block;margin-left: 10px;}
+.menu-list>ul>li .info-wrap{display: inline-block;width: 65%;padding-right:10px;}
+.menu-list>ul>li .info-wrap .tips{color:#a3a3a3;}
+.menu-list>ul>li .info-wrap span{cursor: pointer;}
+.menu-list>ul>li i{color: #B2B2B2;font-size: 18px;vertical-align: middle;float: right;cursor: pointer;margin-right: 10px;}
+.img-upload .upload-img-block{width: 120px;height: 50px;}
+.upload-img-block .del{width: 15px;height: 15px;line-height: 14px;}
+.js-select-link-text{margin-right: 10px; font-size: 12px; display: inline-block; height: 36px; line-height: 36px; vertical-align: top; white-space: nowrap; overflow: hidden; max-width: 80%; text-overflow: ellipsis;}

public/static/ext/diyview/js/async_load_css.js

@@ -0,0 +1,81 @@
+/**
+ * 异步加载外部CSS文件，并且回调
+ */
+function styleOnload(node, callback) {
+	// for IE6-9 and Opera
+	if (node.attachEvent) {
+		node.attachEvent('onload', callback);
+		// NOTICE:
+		// 1. "onload" will be fired in IE6-9 when the file is 404, but in
+		// this situation, Opera does nothing, so fallback to timeout.
+		// 2. "onerror" doesn't fire in any browsers!
+	}
+	// polling for Firefox, Chrome, Safari
+	else {
+		setTimeout(function () {
+			poll(node, callback);
+		}, 0); // for cache
+	}
+}
+
+function poll(node, callback) {
+	if (callback.isCalled) {
+		return;
+	}
+	var isLoaded = false;
+	if (/webkit/i.test(navigator.userAgent)) {// webkit
+		if (node['sheet']) {
+			isLoaded = true;
+		}
+	}
+	// for Firefox
+	else if (node['sheet']) {
+		try {
+			if (node['sheet'].cssRules) {
+				isLoaded = true;
+			}
+		} catch (ex) {
+			// NS_ERROR_DOM_SECURITY_ERR
+			if (ex.code === 1000) {
+				isLoaded = true;
+			}
+		}
+	}
+	if (isLoaded) {
+		// give time to render.
+		setTimeout(function () {
+			callback();
+		}, 1);
+	} else {
+		setTimeout(function () {
+			poll(node, callback);
+		}, 1);
+	}
+}
+
+// 我的动态创建LINK函数
+function createLink(cssURL, lnkId, charset, media) {
+	var head = document.getElementsByTagName('head')[0], linkTag = null;
+	if (!cssURL) {
+		return false;
+	}
+	linkTag = document.createElement('link');
+	linkTag.setAttribute('id', (lnkId || 'dynamic-style'));
+	linkTag.setAttribute('rel', 'stylesheet');
+	linkTag.setAttribute('charset', (charset || 'utf-8'));
+	linkTag.setAttribute('media', (media || 'all'));
+	linkTag.setAttribute('type', 'text/css');
+	linkTag.href = cssURL;
+	head.appendChild(linkTag);
+	return linkTag;
+}
+
+/**
+ * demo
+ */
+//function loadcss() {
+//	var styleNode = createLink("http://localhost/niucloud/addon/system/DiyView/component/view/rubik_cube/css/rubik_cube.css");
+//	styleOnload(styleNode, function() {
+//		alert("loaded");
+//	});
+//}

public/static/ext/diyview/js/custom_template.js

@@ -0,0 +1,866 @@
+//最外层组件
+var ncComponentHtml = '<div v-show="data.lazyLoadCss && data.lazyLoad" :key="data.id">';
+		ncComponentHtml += '<div class="preview-draggable" ' +
+			':style="{ ' +
+			'backgroundColor : data.pageBgColor, ' +
+			'paddingTop : data.margin.top + \'px\', ' +
+			'paddingBottom : data.margin.bottom + \'px\', ' +
+			'paddingLeft : data.margin.both + \'px\', ' +
+			'paddingRight : data.margin.both + \'px\'  }" @click="$parent.changeCurrentIndex(data.index)">'; // 拖拽区域
+			ncComponentHtml += '<slot name="preview"></slot>';
+			ncComponentHtml += '<i class="del" v-show="data.isDelete !== 1" @click.stop="$parent.delComponent(data.index)" data-disabled="1">x</i>';
+			ncComponentHtml += '<div class="comp-title">{{ data.componentTitle }}</div>';
+		ncComponentHtml += '</div>';
+
+		ncComponentHtml += '<div class="edit-attribute" :data-have-edit="1">';
+			ncComponentHtml += '<div class="attr-wrap">';
+				ncComponentHtml += '<div class="restore-wrap">';
+
+					ncComponentHtml += '<div class="attr-title">';
+						ncComponentHtml += '<span class="title">{{data.componentTitle}}</span>';
+						ncComponentHtml += '<div class="tab-wrap">';
+							ncComponentHtml += '<span class="active bg-color" data-type="content">内容</span>';
+							ncComponentHtml += '<span data-type="style">样式</span>';
+						ncComponentHtml += '</div>';
+					ncComponentHtml += '</div>';
+
+					// 内容
+					ncComponentHtml += '<div class="edit-content-wrap">';
+						ncComponentHtml += '<slot name="edit-content"></slot>';
+					ncComponentHtml += '</div>';
+
+					// 样式
+					ncComponentHtml += '<div class="edit-style-wrap" style="display: none;">';
+						ncComponentHtml += '<slot name="edit-style"></slot>';
+						ncComponentHtml += '<common-set v-if="data.ignoreLoad" :ignore="data.ignore"></common-set>';
+					ncComponentHtml += '</div>';
+				ncComponentHtml += '</div>';
+
+			ncComponentHtml += '</div>';
+		ncComponentHtml += '</div>';
+
+		ncComponentHtml += '<div style="display:none;">';
+			ncComponentHtml += '<slot name="resource"></slot>';
+		ncComponentHtml += '</div>';
+
+	ncComponentHtml += '</div>';
+
+var ncComponent = {
+	props: ["data"],
+	template: ncComponentHtml,
+	created: function () {
+		//如果当前添加的组件没有添加过资源
+		if (!this.$slots.resource) {
+			this.data.lazyLoadCss = true;
+			this.data.lazyLoad = true;
+		} else {
+			//检测是否只添加了JS或者CSS，没有添加默认为true
+			var countCss = 0, countJs = 0, outerCountJs = 0;
+			for (var i = 0; i < this.$slots.resource.length; i++) {
+				if (this.$slots.resource[i].componentOptions) {
+					if (this.$slots.resource[i].componentOptions.tag === "css") {
+						countCss++;
+					} else if (this.$slots.resource[i].componentOptions.tag === "js") {
+						countJs++;
+						//统计外部JS数量
+						if (!$.isEmptyObject(this.$slots.resource[i].componentOptions.propsData)) outerCountJs++;
+					}
+				}
+			}
+
+			if (countCss === 0) this.data.lazyLoadCss = true;
+			if (countJs === 0) this.data.lazyLoad = true;
+
+			this.data.outerCountJs = outerCountJs;
+
+		}
+	}
+};
+
+/**
+ * 手机端自定义模板Vue对象
+ */
+var vue = new Vue({
+	el: "#diyView",
+	data: {
+		//当前编辑的组件位置
+		currentIndex: -99,
+		globalLazyLoad: false,
+
+		//全局属性
+		global: {
+			name:$('#name').val(),
+			title: "页面" + $('#name').val().replace('DIY_VIEW_RANDOM_', ''),
+			pageBgColor: "#ffffff", // 页面背景颜色
+			topNavColor: "#ffffff",
+			topNavBg: false,
+			navBarSwitch: true, // 导航栏是否显示
+			navStyle: 1, // 导航栏风格
+			textNavColor: "#333333",
+			topNavImg: "",
+			moreLink: {
+				name: ""
+			},
+			//是否显示底部导航标识
+			openBottomNav: true,
+			textImgPosLink: 'center',
+			mpCollect: false,
+			// 弹框形式，不弹出 -1，首次弹出 1，每次弹出 0
+			popWindow: {
+				imageUrl: "",
+				count: -1,
+				show: 0,
+				link: {
+					name: ""
+				},
+				imgWidth: '',
+				imgHeight: ''
+			},
+			bgUrl: '',
+			imgWidth: '',
+			imgHeight: '',
+
+			// 公共模板属性，所有组件都继承，不需要重复定义，组件内部根据业务自行调用
+			template: {
+				pageBgColor: '', // 底部背景颜色
+				textColor: "#303133", // 文字颜色
+
+				componentBgColor: '', // 组件背景颜色
+				componentAngle: 'round', // 组件角标（round：圆角，right：直角）
+				topAroundRadius: 0, // 组件上圆角，命名缩减
+				bottomAroundRadius: 0, // 组件下圆角，命名缩减
+
+				elementBgColor: '', // 元素背景颜色
+				elementAngle: 'round', // 元素角标（round：圆角，right：直角）
+				topElementAroundRadius: 0, // 元素上圆角，命名缩减
+				bottomElementAroundRadius: 0, // 元素下圆角，命名缩减
+
+				margin: {
+					top: 0, // 上边距
+					bottom: 0, // 下边距
+					both: 0, // 左右边距
+				}
+			},
+			//公众号分享
+			wechatShareTitle:'',
+			wechatShareDesc:'',
+			wechatShareImage:'',
+			//小程序分享
+			weappShareTitle:'',
+			weappShareImage:'',
+		},
+		//自定义组件集合
+		data: [],
+	},
+	components: {
+		'nc-component': ncComponent,//最外层组件
+	},
+	created: function () {
+		if ($("#info").length) {
+			setTimeout(function () {
+				$('#diyView').css('visibility', 'visible');
+			}, 50);
+		} else {
+			$('#diyView').css('visibility', 'visible');
+			$('.loading-layer').hide();
+			$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
+		}
+	},
+	mounted: function () {
+		this.refresh();
+	},
+	methods: {
+		addComponent: function (obj, other) {
+			//附加公共字段
+			obj.index = 0;
+			obj.sort = 0;
+			obj.lazyLoadCss = false; // 资源懒加载，防止看到界面缓慢加载
+			obj.lazyLoad = false; // 资源懒加载，防止看到界面缓慢加载
+			obj.outerCountJs = 0;
+			obj.ignore = []; // 忽略模板属性
+			obj.ignoreLoad = false; // 等待忽略数组赋值后加载
+			// obj.hidden = []; // 隐藏公共属性
+			obj.tempData = {}; // 临时数据
+			obj.id = ns.gen_non_duplicate(5);
+
+			//第一次添加组件时，添加以下字段
+			if (other) {
+				// 第一次添加组件时，添加以下字段
+				obj.addonName = other.addon_name; // 如果插件不存在，后台则会清除组件
+				obj.componentName = other.name;
+				obj.componentTitle = other.title;
+				obj.isDelete = parseInt(other.is_delete);
+
+				for (var key in this.global.template) {
+					obj[key] = typeof this.global.template[key] == 'object' ? JSON.parse(JSON.stringify(this.global.template[key])) : this.global.template[key];
+				}
+				if (!this.checkComponentIsAdd(obj.componentName)) {
+					this.autoSelected(obj.componentName);
+					return;
+				}
+			}
+
+			if (this.currentIndex === -99 || this.currentIndex === -98) {
+				this.data.push(obj);
+				// 添加组件后（不是编辑调用的），选择最后一个
+				if (other) this.currentIndex = this.data.length - 1;
+			}else {
+				// 查询当前选中索引，插入到指定位置
+				if (other && other.index) {
+					this.data.splice(other.index, 0, obj);// 指定下标
+				} else {
+					this.data.splice(++this.currentIndex, 0, obj);
+				}
+			}
+
+			$('.loading-layer').hide();
+			$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
+
+			this.refresh();
+
+			var self = this;
+
+			setTimeout(function () {
+				if (obj.componentName !== "FloatBtn" && obj.componentName !== "FollowOfficialAccount") {
+					// 如果在末尾添加组件，则定位到最后的位置
+					if (self.currentIndex === -99 || ((self.currentIndex + 1) === self.data.length)) {
+						$(".preview-wrap .preview-restore-wrap .div-wrap").scrollTop($(".diy-view-wrap").height());
+					} else {
+						// 如果在其他位置添加组件，则定位到组件位置
+						var element = $(".draggable-element[data-index=" + self.currentIndex + "]");
+						var warp = $(".preview-wrap .preview-restore-wrap .div-wrap");
+						var height = 0;
+						$(".draggable-element:lt(" + (element.index() + 1) + ")").each(function (i) {
+							height += $(this).outerHeight();
+						});
+						height -= element.outerHeight() + 30;
+						warp.animate({scrollTop: height}, 300);
+					}
+				}
+
+			}, 50);
+		},
+
+		//检测组件是否允许添加，true：允许 false：不允许
+		checkComponentIsAdd: function (componentName) {
+
+			var component = $('.component-list ul li[data-name="' + componentName + '"]');
+			var maxCount = parseInt(component.attr('data-max-count'));
+
+			//maxCount为0时不处理
+			if (maxCount === 0) return true;
+
+			var count = 0;
+
+			//遍历已添加的自定义组件，检测是否超出数量
+			for (var i in this.data) if (this.data[i].componentName === componentName) count++;
+
+			if (count >= maxCount) return false;
+			else return true;
+		},
+
+		// 获取组件添加数量
+		getComponentAddCount: function (componentName) {
+			var count = 0;
+			//遍历已添加的自定义组件，检测是否超出数量
+			for (var i in this.data) if (this.data[i].componentName === componentName) count++;
+			return count;
+		},
+
+		//改变当前编辑的组件选中
+		changeCurrentIndex: function (sort) {
+			this.currentIndex = parseInt(sort);
+			this.refresh();
+		},
+
+		//改变当前的删除弹出框的显示状态
+		delComponent: function (i) {
+			if (i < -1) return; // 从0开始
+			var self = this;
+
+			layer.confirm('确定要删除吗?', {title: '操作提示'}, function (index) {
+				self.data.splice(i, 1);
+
+				// 如果组件全部删除，则选中页面设置
+				if(self.data.length === 0){
+					self.currentIndex = -99;
+				}
+
+				// 如果当前选中的组件不存在，则选择上一个
+				if(self.currentIndex === self.data.length){
+					self.currentIndex--;
+				}
+
+				self.refresh();
+				self.refreshQuick(true);
+				layer.close(index);
+			});
+		},
+
+		// 重置当前组件数据
+		resetComponent: function () {
+			if (this.currentIndex < 0) return; // 从0开始
+			// if (self.data.length < 1) return; // 重置全部用
+
+			var self = this;
+			layer.confirm('确认要重置组件默认数据吗?', {title: '操作提示'}, function (index) {
+
+				// 重置当前选中的组件数据
+				var current = $(".draggable-element[data-index=" + self.currentIndex + "]");
+				var id = current.attr('data-id');
+				var temp = {};
+				if ($("#info").length) {
+					var info = JSON.parse($("#info").val().toString());
+					if (Object.keys(info).length) {
+						for (var i = 0; i < info.value.length; i++) {
+							if (info.value[i].id === id) {
+								info.value[i].index = self.currentIndex;
+								info.value[i].sort = self.data[self.currentIndex].sort;
+								info.value[i].lazyLoadCss = true; // 资源懒加载，防止看到界面缓慢加载
+								info.value[i].lazyLoad = true; // 资源懒加载，防止看到界面缓慢加载
+								info.value[i].outerCountJs = self.data[self.currentIndex].outerCountJs;
+								info.value[i].ignore = self.data[self.currentIndex].ignore; // 忽略模板属性
+								info.value[i].tempData = self.data[self.currentIndex].tempData; // 临时数据
+								info.value[i].id = ns.gen_non_duplicate(5);
+								temp = info.value[i];
+								break;
+							}
+						}
+						$("#info").val(JSON.stringify(info));
+					}
+				}
+
+				// 如果是新添加的组件，要重置数据
+				if (Object.keys(temp).length === 0) {
+					var component = $('.component-list ul li[data-name="' + self.data[self.currentIndex].componentName + '"]');
+					var value = JSON.parse(component.attr('data-value'));
+					var index = self.currentIndex;
+
+					self.data.splice(index, 1);
+					self.addComponent(value, {
+						index: index, // 指定下标
+						name: component.attr('data-name'),
+						title: component.attr('title'),
+						addon_name: component.attr('data-addon-name'),
+						max_count: component.attr('data-max-count'),
+						is_delete: component.attr('data-is-delete')
+					});
+
+				} else {
+					self.data.splice(self.currentIndex, 1, temp);
+				}
+
+				setTimeout(function () {
+					fullScreenSize();
+					self.refreshQuick(true);
+				}, 10);
+
+				// 以下是重置全部数据，需要时放开，勿删！
+				// self.data = [];
+				// self.currentIndex = -99;
+				// setTimeout(function () {
+				// 	self.refreshComponent();
+				// }, 10 * 2);
+
+				layer.close(index);
+			});
+		},
+
+		// 上移组件
+		moveUpComponent: function () {
+			if ((this.currentIndex - 1) < 0) return; // 从0开始
+
+			var element = $(".draggable-element[data-index=" + this.currentIndex + "]");
+			var prev = element.prev('.draggable-element'); // 上一个组件
+
+			if(prev.length === 0) return;
+
+			var prevIndex = parseInt(prev.attr('data-index'));
+
+			var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
+			temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			var temp2 = this.deepClone(this.data[prevIndex]); // 上个组件
+			temp2.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			this.data[this.currentIndex] = temp2;
+			this.data[prevIndex] = temp;
+
+			this.changeCurrentIndex(prevIndex);
+
+			this.refreshQuick();
+
+			var self = this;
+			setTimeout(function () {
+				self.$forceUpdate();
+			},10);
+		},
+
+		// 下移组件
+		moveDownComponent: function () {
+			var element = $(".draggable-element[data-index=" + this.currentIndex + "]");
+			var next = element.next('.draggable-element'); // 上一个组件
+
+			if(next.length === 0) return; // 最后一个不能下移
+
+			var nextIndex = parseInt(next.attr('data-index'));
+
+			var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
+			temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			var temp2 = this.deepClone(this.data[nextIndex]); // 下个组件
+			temp2.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+
+			this.data[this.currentIndex] = temp2;
+			this.data[nextIndex] = temp;
+
+			this.changeCurrentIndex(nextIndex);
+
+			this.refreshQuick();
+
+			var self = this;
+			setTimeout(function () {
+				self.$forceUpdate();
+			},10);
+		},
+
+		// 复制组件
+		copyComponent: function () {
+			if (this.currentIndex < 0) return; // 从0开始
+
+			var temp = this.deepClone(this.data[this.currentIndex]); // 当前选中组件
+			temp.index++;
+			temp.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+			var component = $('.component-list ul li[data-name="' + temp.componentName + '"]');
+			var maxCount = parseInt(component.attr('data-max-count'));
+
+			if (!this.checkComponentIsAdd(temp.componentName)) {
+				layer.msg(`无法复制，${temp.componentTitle}组件只能添加${maxCount}个`);
+				return;
+			}
+
+			var index = this.currentIndex + 1;
+			this.data.splice(index, 0, temp);
+
+			this.changeCurrentIndex(index);
+
+			this.refreshQuick(true);
+
+		},
+
+		// 深度拷贝对象
+		deepClone(source) {
+			if (typeof source !== 'object' || source == null) {
+				return source;
+			}
+			var target = Array.isArray(source) ? [] : {};
+			for (var key in source) {
+				if (Object.prototype.hasOwnProperty.call(source, key)) {
+					if (typeof source[key] === 'object' && source[key] !== null) {
+						target[key] = this.deepClone(source[key]);
+					} else {
+						target[key] = source[key];
+					}
+				}
+			}
+			return target;
+		},
+
+		//刷新数据排序
+		refresh: function () {
+			var self = this;
+			//vue框架执行，异步操作组件列表的排序
+			setTimeout(function () {
+
+				$(".draggable-element").each(function (i) {
+					$(this).attr("data-sort", i);
+				});
+
+				for (var i = 0; i < self.data.length; i++) {
+					self.data[i].index = $(".draggable-element[data-index=" + i + "]").attr("data-index");
+					self.data[i].sort = $(".draggable-element[data-index=" + i + "]").attr("data-sort");
+				}
+
+				// 如果当前编辑的组件不存在了，则选中最后一个
+				if (parseInt(self.currentIndex) >= self.data.length) self.currentIndex--;
+
+				$(".draggable-element[data-index=" + self.currentIndex + "] .edit-attribute .attr-wrap").css("height", ($(window).height() - 135) + "px");
+
+			}, 50);
+
+		},
+
+		//转换图片路径
+		changeImgUrl: function (url) {
+			if (url == null || url === "") return '';
+			if (url.indexOf("static/img/") > -1) return ns.img(ns_url.staticImg + "/" + url.replace("public/static/img/", ""));
+			else return ns.img(url);
+		},
+
+		//设置全局对象属性
+		setGlobal: function (obj) {
+			for (var k in obj) {
+				if (k) this.$set(this.global, k, obj[k]);
+			}
+			this.globalLazyLoad = true;
+		},
+
+		verify: function () {
+
+			if (this.global.title === "") {
+				layer.msg('请输入页面名称');
+				this.currentIndex = -99;
+				this.refresh();
+				return false;
+			} else if (this.global.title.length > 15) {
+				layer.msg('页面名称最多15个字符');
+				this.currentIndex = -99;
+				this.refresh();
+				return false;
+			}
+
+			if (this.global.popWindow.count !== -1 && this.global.popWindow.imageUrl === '') {
+				layer.msg('请上传弹框广告');
+				this.currentIndex = -99;
+				this.refresh();
+				return false;
+			}
+
+			for (var i = 0; i < this.data.length; i++) {
+
+				try {
+					if (this.data[i].verify) {
+						for (var j = 0; j < this.data[i].verify.length; j++) {
+							var res = this.data[i].verify[j](i);
+							if (!res.code) {
+								this.currentIndex = i;
+								this.refresh();
+								layer.msg(res.message);
+								return false;
+							}
+						}
+					}
+				} catch (e) {
+					console.log("verify Error:", e, i, this.data[i]);
+				}
+			}
+			return true;
+		},
+
+		// 定位组件位置
+		autoSelected(componentName) {
+			for (var i in this.data) {
+				if (this.data[i].componentName === componentName) {
+					this.changeCurrentIndex(this.data[i].index);
+					var element = $('.preview-wrap .preview-restore-wrap [data-index="' + this.data[i].index + '"]'),
+						warp = $(".preview-wrap .preview-restore-wrap .div-wrap"),
+						warpTop = warp.offset().top,
+						warpBottom = warpTop + warp.height(),
+						elementTop = element.offset().top,
+						elementBottom = elementTop + element.height(),
+						scrollTop = warp.scrollTop();
+
+					if (elementBottom > warpBottom) {
+						scrollTop += (elementBottom - warpBottom) + 2;
+					} else if (warpTop > elementTop) {
+						scrollTop -= (warpTop - elementTop);
+					}
+					warp.animate({scrollTop: scrollTop}, 300);
+					return;
+				}
+			}
+		},
+
+		// 刷新组件数据
+		refreshComponent: function () {
+			if ($("#info").length === 0) return;
+
+			var info = JSON.parse($("#info").val().toString());// .replace(/\@/g, "'"));
+			if (Object.keys(info).length) {
+				for (var i = 0; i < info.value.length; i++) {
+					info.value[i].index = 0;
+					info.value[i].sort = 0;
+					info.value[i].lazyLoadCss = false; // 资源懒加载，防止看到界面缓慢加载
+					info.value[i].lazyLoad = false; // 资源懒加载，防止看到界面缓慢加载
+					info.value[i].outerCountJs = 0;
+					info.value[i].ignore = []; // 忽略模板属性
+					info.value[i].tempData = {}; // 临时数据
+					// info.value[i].id = ns.gen_non_duplicate(5);
+				}
+			}
+
+			this.setGlobal(info.global);
+
+			if(info.value.length) {
+				this.data = info.value;
+				this.changeCurrentIndex(0); // 选择第一个
+				this.refresh();
+			}
+
+			fullScreenSize();
+			$('.loading-layer').hide();
+			$('.preview-wrap .preview-restore-wrap').css('visibility', 'visible');
+
+		},
+
+		/**
+		 * 刷新快捷操作后的展示
+		 * @param isScroll false：滚动，true：不滚动
+		 */
+		refreshQuick: function (isScroll) {
+			var self = this;
+			vue.$nextTick(function () {
+				if (!isScroll) {
+					var element = $(".draggable-element[data-index=" + self.currentIndex + "]");
+					var warp = $(".preview-wrap .preview-restore-wrap .div-wrap");
+					var height = 0;
+					$(".draggable-element:lt(" + (element.index() + 1) + ")").each(function (i) {
+						height += $(this).outerHeight();
+					});
+					height -= element.outerHeight() + 30;
+					warp.animate({scrollTop: height}, 300);
+				}
+
+			});
+		}
+
+	}
+});
+
+// 自适应全屏宽高
+function fullScreenSize(isFull) {
+	var size = 139; // 公式：二级面包屑layui-header-crumbs-second （55px）+ 自定义模板区域上内边距diyview（20px） + 底部保存按钮（90px）
+
+	if (isFull) size = 75; // 顶部面包屑（55px） + 自定义模板区域上内边距diyview（20px）
+	var commonHeight = $(window).height() - size;
+	['.preview-wrap .preview-restore-wrap .div-wrap'].forEach(function (obj) {
+		$(obj).css("height", (commonHeight) + "px");
+	});
+	$('.loading-layer').css('height', (commonHeight - 70) + "px"); // 70px是头部高度
+	$(".component-list nav").css("height", (commonHeight + 20 - 55) + "px");// 20px是自定义模板区域上内边距，55px是标准/第三方组件tab切换高度
+	$(".edit-attribute .attr-wrap").css("height", (commonHeight - 1) + "px");// 1px是上边框
+	$(".preview-block").css("min-height", (commonHeight - 104) + "px"); // 公式：高度 - 自定义模板区域上内边距（20px） - 自定义模板区域下外编辑（20px）- 自定义模板头部（64px）
+}
+
+var form, repeat_flag = false;//防重复标识
+layui.use(['form'], function () {
+	form = layui.form;
+	form.render();
+
+	fullScreenSize();
+
+	if ($("#info").val()) {
+		vue.refreshComponent();
+	} else {
+		if($("#title").val()) vue.global.title = $("#title").val();
+		vue.globalLazyLoad = true;
+	}
+
+	// 标准/第三方组件切换
+	$("body").off("click", ".component-list .tab span").on("click", ".component-list .tab span", function () {
+		var type = $(this).attr("data-type");
+		$('.component-list h3').hide();
+		$('.component-list ul').hide();
+		if(type === 'EXTEND'){
+			$('.component-list h3[data-type="EXTEND"]').show();
+			$('.component-list ul[data-type="EXTEND"]').show();
+		}else{
+			$('.component-list h3[data-type!="EXTEND"]').show();
+			$('.component-list ul[data-type!="EXTEND"]').show();
+		}
+		$(this).addClass('selected').siblings().removeClass('selected');
+	});
+
+	// 组件列表
+	$("body").off("click", ".component-list h3").on("click", ".component-list h3", function () {
+		var index = $(this).attr("data-index");
+		var ul = $(".component-list ul[data-index='" + index + "']");
+		if (ul.height()) {
+			$(this).find("img").attr("src", ns_url.staticExt + "/diyview/img/component_right.png");
+			if (!ul.attr("data-height")) ul.attr("data-height", ul.height());
+			ul.animate({opacity: 0, height: 0}, 100);
+		} else {
+			$(this).find("img").attr("src", ns_url.staticExt + "/diyview/img/component_down.png");
+			ul.animate({opacity: 1, height: ul.attr("data-height") + "px"}, 100);
+		}
+	});
+
+	$("body").off("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span").on("click", ".edit-attribute .attr-wrap .restore-wrap .attr-title .tab-wrap span", function () {
+		$(this).addClass('active bg-color').siblings().removeClass('active bg-color');
+		var type = $(this).attr('data-type');
+		$(this).parent().parent().parent().find('.edit-content-wrap').hide();
+		$(this).parent().parent().parent().find('.edit-style-wrap').hide();
+		$(this).parent().parent().parent().find(`.edit-${type}-wrap`).show();
+	});
+
+	// 处理全屏切换事件
+	// 事件开始，通过添加顶级样式控制按钮相关展示
+
+	// 底部全屏按钮，隐藏菜单，添加顶级样式，top-full-screen
+	$('body').off('click', '.full-screen-btn').on('click', '.full-screen-btn', function () {
+		$('body').find('.layui-header').hide(); //顶部菜单
+		$('body').find('.layui-side').hide(); //侧边菜单
+		$('body').find('.layui-layout-admin .crumbs').hide(); //面包屑
+
+		$('body').addClass('top-full-screen'); //添加顶级样式，处理大板块结构
+
+		// 隐藏底部按钮，放开头部按钮
+		$('body').find('.js-bottom-custom-save').hide(); //底部按钮隐藏
+		$('body').find('.js-top-custom-save').removeClass('layui-hide'); //顶部按钮放开
+
+		$('body').find('.main-contact').hide(); //全屏右侧帮助不展示
+
+		// 全屏需处理适应大小
+		fullScreenSize(true);
+	});
+
+	// 顶部恢复按钮，与底部按钮完全相反
+	$('body').off('click', '.cancel-btn').on('click', '.cancel-btn', function () {
+		$('body').find('.layui-header').show(); //顶部菜单
+		$('body').find('.layui-side').show(); //侧边菜单
+		$('body').find('.layui-layout-admin .crumbs').show(); //面包屑
+
+		$('body').removeClass('top-full-screen'); //添加顶级样式，处理大板块结构
+
+		// 隐藏底部按钮，放开头部按钮
+		$('body').find('.js-bottom-custom-save').show(); //底部按钮隐藏
+		$('body').find('.js-top-custom-save').addClass('layui-hide'); //顶部按钮放开
+
+		// 全屏需处理适应大小
+		fullScreenSize();
+	});
+
+	/**
+	 * 绑定拖拽事件
+	 */
+	$('.preview-block').DDSort({
+
+		//拖拽数据源
+		target: '.draggable-element',
+
+		//拖拽时显示的样式
+		floatStyle: {
+			'border': '1px solid',
+			'background-color': '#ffffff'
+		},
+
+		//设置可拖拽区域
+		draggableArea: "preview-draggable",
+
+		//拖拽中，隐藏右侧编辑属性栏
+		move: function (index) {
+			var curr = $(".draggable-element[data-index='" + index + "'] .edit-attribute");
+			if (curr.attr("data-have-edit") == 1) curr.hide();
+		},
+
+		//拖拽结束后，选择当前拖拽，并且显示右侧编辑属性栏，刷新数据
+		up: function (beforeIndex,afterIndex) {
+			var temp = [];
+			$('.draggable-element').each(function (index) {
+				var dIndex = $(this).attr('data-index');
+				temp[index] = vue.deepClone(vue.data[dIndex]);
+			});
+
+			temp.forEach(function (item, index) {
+				item.index = index;
+				item.id = ns.gen_non_duplicate(5); // 更新id，刷新组件数据
+				vue.$set(vue.data, index, item)
+			});
+
+			vue.currentIndex = afterIndex;
+			$(".draggable-element.selected .edit-attribute").show();
+
+		}
+	});
+
+	// 保存
+	$("button.save").click(function () {
+
+		// 刷新排序
+		vue.refresh();
+		setTimeout(function () {
+
+			if (vue.verify()) {
+
+				//全局属性
+				var global = JSON.stringify(vue.global);
+
+				global = eval("(" + global + ")");
+
+				//组件属性
+				var value = JSON.stringify(vue.data); // .replace(/\@/g, "");
+
+				value = JSON.parse(value);
+
+				//重新排序
+				value.sort(function (a, b) {
+					return a.sort - b.sort;
+				});
+
+				for (var k in value) {
+					value[k].ignore.forEach((item, index) => {
+						if (item.indexOf('margin') !== -1) delete value[k].margin[item.split('margin')[1].toLowerCase()];
+						else delete value[k][item];
+					});
+					delete value[k].ignore;
+					// delete value[k].hidden;
+					delete value[k].ignoreLoad;
+					delete value[k].verify;
+					delete value[k].lazyLoad;
+					delete value[k].lazyLoadCss;
+					delete value[k].index;
+					delete value[k].sort;
+					delete value[k].outerCountJs;
+					delete value[k].tempData; // 临时数据
+				}
+
+				var v = {
+					global: global,
+					value: value
+				};
+
+				// console.log(v);
+				// console.log(JSON.stringify(v));
+				// return false;
+
+				if (repeat_flag) return;
+				repeat_flag = true;
+
+				$.ajax({
+					type: "post",
+					url: ns.url(requestUrl),
+					data: {
+						id: $("#id").val(),
+						name: $("#name").val(),
+						template_id: $("#template_id").val(),
+						page_type: $("#page_type").val(), // 页面类型
+						title: vue.global.title,
+						value: JSON.stringify(v), // .replace(/\'/g, "@")
+						site_id: ns_url.siteId,
+						app_module: ns_url.appModule
+					},
+					dataType: "JSON",
+					success: function (res) {
+						layer.msg(res.message);
+						if (res.code == 0) {
+
+							if ($("#id").val() || $("#name").val().indexOf('DIY_VIEW_RANDOM_') == -1) {
+								repeat_flag = false;
+							} else {
+								location.hash = ns.hash("shop/diy/lists");
+							}
+						} else {
+							repeat_flag = false;
+						}
+					}
+				});
+			}
+		}, 100);
+	});
+
+});
+
+// 预览
+function preview() {
+	window.open(ns.url('index/index/h5preview', {id: $('#id').val(), type: 'page'}));
+}

public/static/ext/diyview/js/ddsort.js

@@ -0,0 +1,247 @@
+;(function ($) {
+	/**
+	 * Author: https://github.com/Barrior
+	 *
+	 * DDSort: drag and drop sorting.
+	 * @param {Object} options
+	 *        target[string]:        可选，jQuery事件委托选择器字符串，默认'li'
+	 *        cloneStyle[object]:    可选，设置占位符元素的样式
+	 *        floatStyle[object]:    可选，设置拖动元素的样式
+	 *        down[function]:        可选，鼠标按下时执行的函数
+	 *        move[function]:        可选，鼠标移动时执行的函数
+	 *        up[function]:        可选，鼠标抬起时执行的函数
+	 *        draggableArea[string]:可选，设置可拖拽的区域
+	 */
+	$.fn.DDSort = function (options) {
+		var $doc = $(document),
+			fnEmpty = function () {
+			},
+
+			settings = $.extend(true, {
+
+				down: fnEmpty,
+				move: fnEmpty,
+				up: fnEmpty,
+
+				target: 'li',
+				cloneStyle: {
+					'background-color': '#f7f8fa'
+				},
+				floatStyle: {
+					//用固定定位可以防止定位父级不是Body的情况的兼容处理，表示不兼容IE6，无妨
+					'position': 'fixed',
+					'box-shadow': '10px 10px 20px 0 #eee',
+					/*'webkitTransform': 'rotate(4deg)',
+					'mozTransform': 'rotate(4deg)',
+					'msTransform': 'rotate(4deg)',
+					'transform': 'rotate(4deg)'*/
+				},
+				draggableArea: ''
+
+			}, options);
+
+		return this.each(function () {
+
+			var that = $(this),
+				height = 'height',
+				width = 'width';
+
+			if (that.css('box-sizing') == 'border-box') {
+				height = 'outerHeight';
+				width = 'outerWidth';
+			}
+
+			var time; // 监听长按时间
+			var progress = 0; // 记录长按时长
+			that.on('mousedown.DDSort', settings.target, function (e) {
+				//只允许鼠标左键拖动
+				if (e.which != 1) {
+					return;
+				}
+				//防止表单元素失效
+				var tagName = e.target.tagName.toLowerCase();
+				if (tagName == 'input' || tagName == 'textarea' || tagName == 'select' || $(e.target).attr('stop-ddsort')) {
+					return;
+				}
+
+				// 记录长按时长
+				time = setInterval(() => {
+					progress++
+				}, 125);
+
+				var THIS = this,
+					$this = $(THIS),
+					offset = $this.offset(),
+					disX = e.pageX - offset.left,
+					disY = e.pageY - offset.top,
+
+					clone = $this.clone()
+						.css(settings.cloneStyle)
+						.css('height', $this[height]())
+						.empty(),
+
+					hasClone = 1,
+
+					//缓存计算
+					thisOuterHeight = $this.outerHeight(),
+					thatOuterHeight = that.outerHeight(),
+
+					//滚动速度
+					upSpeed = thisOuterHeight,
+					downSpeed = thisOuterHeight,
+					maxSpeed = thisOuterHeight * 3;
+
+				if (settings.draggableArea != "") {
+					//判断当前点击的DOM是否允许拖拽
+					var isDraggable = recursiveQuery($(e.target), settings.draggableArea);
+					// 特殊处理：带有该属性的禁用
+					if ($(e.target).parent().attr("data-disabled") || $(e.target).attr("data-disabled")) {
+						return;
+					}
+					if (!isDraggable) {
+						return;
+					}
+				}
+
+				var downIndex = $(THIS).index();
+				settings.down.call(THIS, downIndex);
+
+				$doc.on('mousemove.DDSort', function (e) {
+					if (progress === 0) return; // 如果没有长按则不能拖拽
+					if (hasClone) {
+						$this.before(clone)
+							.css('width', $this[width]())
+							.css(settings.floatStyle)
+							.appendTo($this.parent());
+
+						hasClone = 0;
+					}
+
+					var left = e.pageX - disX,
+						top = e.pageY - disY,
+
+						prev = clone.prev(),
+						next = clone.next().not($this);
+
+					var gap = $(window).scrollTop();
+					var calculate = top - gap;
+
+					//检测是否滚动了
+					top = ((top - $(window).scrollTop()) != top) ? calculate : top;
+
+					$this.css({
+						left: left,
+						top: top,
+						zIndex: 999
+					});
+
+					//向上排序
+					if (prev.length && top < (prev.offset().top - gap) + prev.outerHeight() / 2) {
+
+						clone.after(prev);
+
+						//向下排序
+					} else if (next.length && top + thisOuterHeight > (next.offset().top - gap) + next.outerHeight() / 2) {
+
+						clone.before(next);
+
+					}
+
+					/**
+					 * 处理滚动条
+					 * that是带着滚动条的元素，这里默认以为that元素是这样的元素（正常情况就是这样），如果使用者事件委托的元素不是这样的元素，那么需要提供接口出来
+					 */
+					var thatScrollTop = that.scrollTop(),
+						thatOffsetTop = that.offset().top,
+						scrollVal;
+
+					//向上滚动
+					if (top < thatOffsetTop) {
+
+						downSpeed = thisOuterHeight;
+						upSpeed = ++upSpeed > maxSpeed ? maxSpeed : upSpeed;
+						scrollVal = thatScrollTop - upSpeed;
+
+						//向下滚动
+					} else if (top + thisOuterHeight - thatOffsetTop > thatOuterHeight) {
+
+						upSpeed = thisOuterHeight;
+						downSpeed = ++downSpeed > maxSpeed ? maxSpeed : downSpeed;
+						scrollVal = thatScrollTop + downSpeed;
+					}
+
+					that.scrollTop(scrollVal);
+
+					var index = recursiveQueryIndex($(THIS));
+					settings.beforeIndex = index; // 当前拖拽元素
+					settings.move.call(THIS, index);
+
+				})
+					.on('mouseup.DDSort', function () {
+						clearInterval(time);
+						progress = 0;
+						$doc.off('mousemove.DDSort mouseup.DDSort');
+
+						//click的时候也会触发mouseup事件，加上判断阻止这种情况
+						if (!hasClone) {
+							clone.before($this.removeAttr('style')).remove();
+							settings.afterIndex = $this.index();
+							settings.up.call(THIS, settings.beforeIndex, settings.afterIndex);
+						}
+					});
+
+				return false;
+			});
+		});
+	};
+
+	//当前递归次数
+	var currentRecursiveCount = 0;
+
+	//最大递归次数
+	var recursiveMaxCount = 20;
+
+	/**
+	 * 递归查询当前区域是否允许拖拽
+	 */
+	function recursiveQuery(o, draggableArea) {
+		if (o.hasClass(draggableArea)) {
+			//允许拖拽，清空递归次数
+			currentRecursiveCount = 0;
+			// console.log($(o));
+			return true;
+		} else {
+			if (currentRecursiveCount <= recursiveMaxCount) {
+				currentRecursiveCount++;
+				return recursiveQuery(o.parent(), draggableArea);
+			} else {
+				//清空递归次数
+//				console.log("清空递归次数");
+				currentRecursiveCount = 0;
+				return false;
+			}
+		}
+	}
+
+	/**
+	 * 递归查询当前拖拽的下标
+	 */
+	function recursiveQueryIndex(o) {
+		if (o.hasClass("draggable-element")) {
+			//允许拖拽，清空递归次数
+			currentRecursiveCount = 0;
+			return $(o).attr("data-index");
+		} else {
+			if (currentRecursiveCount <= recursiveMaxCount) {
+				currentRecursiveCount++;
+				return recursiveQueryIndex(o.parent());
+			} else {
+				//清空递归次数
+				// console.log("清空递归次数");
+				currentRecursiveCount = 0;
+				return -1;
+			}
+		}
+	}
+
+})(jQuery);

public/static/ext/diyview/js/link.js

@@ -0,0 +1,796 @@
+var form, laytpl;
+var goodsLink = ['ALL_GOODS', 'PINTUAN_GOODS', 'PINFAN_GOODS', 'GROUPBUY_GOODS', 'DISTRIBUTION_GOODS', 'BARGAIN_GOODS', 'PRESALE_GOODS','BUNDING_GOODS'];
+layui.use(['form', 'laytpl'], function () {
+	form = layui.form;
+	laytpl = layui.laytpl;
+	setTimeout(function () {
+		if (selectLink.name) {
+			// 编辑赋值
+			$('.link-box .link-left dd.text-color').click();
+		} else if (selectLink.parent && goodsLink.indexOf(selectLink.parent) !== -1) {
+			// 如果选择了商品
+			$('.link-box .link-left dd[data-name="' + selectLink.parent + '"]').click();
+		} else {
+			// 默认选中第一个
+			$('.link-box .link-left dd:eq(0)').click();
+		}
+	}, 100);
+});
+
+/**
+ * 查询子级链接
+ * @param name
+ */
+function getLinkInfo(name) {
+	try {
+		$('.link-box .link-right.js-system dl').hide();
+		var linkList = $('.link-box .link-right.js-system dl[data-parent="' + name + '"]');
+		linkList.show();
+		if (linkList.length === 0) childLinkCallback(name); // 触发选择子级链接回调
+	} catch (e) {
+		console.log('childLinkCallback error', e);
+	}
+}
+
+// 展开收缩自定义链接
+$(".link-box .link-left dt").click(function () {
+	if ($(this).hasClass("active")) {
+		$(this).removeClass("active");
+		$(this).parent("dl").find("dd").removeClass("layui-hide");
+	} else {
+		$(this).addClass("active");
+		$(this).parent("dl").find("dd").addClass("layui-hide");
+	}
+
+	if ($(this).parent("dl").find("dd").length === 0) {
+		$(".link-box .link-left dd,.link-box .link-left dt").removeClass("text-color");
+		$(this).addClass("text-color");
+	}
+});
+
+// 选择左侧父级链接
+$('.link-box .link-left dd').click(function () {
+	$('.link-box .link-left dd').removeClass("text-color");
+	$(this).addClass("text-color");
+	var name = $(this).attr('data-name');
+	switch (name) {
+		case 'CUSTOM_LINK':
+			// 自定义链接，支持外链
+			var data = JSON.parse(JSON.stringify(selectLink));
+			if(data.parent !=='CUSTOM_LINK') {
+				data.title = '';
+				data.wap_url = '';
+			}
+			laytpl($('#customHtml').html()).render(data, function (html) {
+				$(".link-right.js-system").hide();
+				$(".link-right.js-extend").html(html).show();
+			});
+			break;
+		case 'OTHER_APPLET':
+			// 跳转小程序
+			laytpl($('#appletHtml').html()).render(selectLink, function (html) {
+				$(".link-right.js-system").hide();
+				$(".link-right.js-extend").html(html).show();
+			});
+			break;
+		case 'MOBILE':
+			// 拨打手机号
+			laytpl($('#mobileHtml').html()).render(selectLink, function (html) {
+				$(".link-right.js-system").hide();
+				$(".link-right.js-extend").html(html).show();
+			});
+			break;
+		default:
+			$(".link-right.js-extend").hide();
+			$(".link-right.js-system").show();
+			getLinkInfo(name);
+			break;
+	}
+
+});
+
+$("body").off("click", ".link-box .link-right dd").on("click", ".link-box .link-right dd", function () {
+	$(".link-box .link-right dd").removeClass("border-color text-color");
+	$(this).addClass("border-color text-color");
+});
+
+//清空
+$(".link-btn .link-eliminate").click(function () {
+	window.linkData = {name:'',title:'',wap_url:'',parent:''};
+	layer.close(window.linkIndex);
+});
+
+// 取消
+$(".link-btn .link-cancel").click(function () {
+	layer.close(window.linkIndex);
+});
+
+// 保存
+$(".link-box .link-save").click(function () {
+	var value = {};
+	var dd = $(".link-box .link-right dd.border-color"); // 子级链接
+	var parentLink = $('.link-box .link-left dd.text-color'); // 父级链接
+
+	// 标准链接
+	if (dd.length) {
+		value = {
+			name: dd.attr('data-name'),
+			title: dd.text(),
+			wap_url: dd.attr('data-wap-url')
+		};
+	}
+
+	// 自定义链接
+	if (parentLink.attr('data-name') === 'CUSTOM_LINK') {
+		var title = $(".custom-link input[name='title']").val();
+		var wap_url = $(".custom-link input[name='wap_url']").val();
+		if (!title) {
+			layer.msg("链接名称不能为空");
+			return;
+		}
+
+		if (!wap_url) {
+			layer.msg("跳转路径不能为空");
+			return;
+		}
+
+		value = {
+			name: parentLink.attr('data-name'),
+			title: title,
+			wap_url: wap_url
+		};
+	}
+
+	// 跳转小程序
+	if (parentLink.attr('data-name') === 'OTHER_APPLET') {
+		var appid = $(".other-applet input[name='appid']").val();
+		var page = $(".other-applet input[name='page']").val();
+		if (!appid) {
+			layer.msg("跳转微信小程序的appid不能为空");
+			return;
+		}
+		if (!page) {
+			layer.msg("微信小程序路径不能为空");
+			return;
+		}
+		value = {
+			name: parentLink.attr('data-name'),
+			title: '微信小程序-' + appid,
+			appid: appid,
+			page: page
+		};
+	}
+
+	if (parentLink.attr('data-name') === 'MOBILE') {
+		var mobile = $(".call-mobile input[name='mobile']").val();
+		if (!mobile) {
+			layer.msg("电话号码不能为空");
+			return;
+		}
+		value = {
+			name: parentLink.attr('data-name'),
+			title: '拨打电话：' + mobile,
+			mobile: mobile
+		};
+	}
+
+	try {
+		value = beforeSaveCallback(value); // 保存前处理数据的回调
+	} catch (e) {
+		console.log('saveCallback error', e);
+	}
+	if (Object.keys(value).length) {
+		value.parent = parentLink.attr('data-name');
+		window.linkData = value;
+	}
+	layer.close(window.linkIndex);
+});
+
+/**
+ * 触发选择子级链接回调
+ * @param name
+ */
+function childLinkCallback(name) {
+	if (name === 'GOODS_CATEGORY') {
+		// 商品分类
+		var html = `<div id="goods_category_list"></div>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGoodsCategory();
+	} else if (goodsLink.indexOf(name) !== -1) {
+		if(name == "BUNDING_GOODS"){
+			var placeholder = "请输入套餐名称"
+		}else{
+			var placeholder = "请输入商品名称"
+		}
+		var html = "<div class='search'>";
+		html += `<input name='search_text' class='layui-input search-input layui-input-inline len-mid' placeholder='`+placeholder+`' onkeyup="if(event.keyCode === 13) getGoodsList('${name}') " />`;
+		html += `<button onclick="getGoodsList('${name}')" class='layui-btn'>搜索</button>`;
+		html += "</div>";
+		html += `<table id="goods_list" lay-filter="goods_list"></table>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGoodsList(name);
+	} else if (['CARDS_GAME', 'TURNTABLE_GAME', 'EGG_GAME'].indexOf(name) !== -1) {
+		var html = `<table id="game_list" lay-filter="game_list"></table>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGameList(name);
+	} else if (['DIY_FORM'].indexOf(name) !== -1) {
+		var html = `<table id="diy_form_list" lay-filter="diy_form_list"></table>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getDiyFormList(name);
+	} else if (name == 'CARDS_SERVICE_CATEGORY_LINK') {
+		var html = `<div id="service_category_list"></div>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getServiceCategoryList();
+	}else if(name == 'GOODS_CATEGORY_PAGE'){
+		var html = `<div id="goods_category_list"></div>`;
+		$(".link-right.js-extend").html(html).show();
+		$(".link-right.js-system").hide();
+		getGoodsCategoryPage()
+	}
+}
+
+/**
+ * 获取商品分类数据
+ */
+function getGoodsCategory() {
+	laytpl($("#goodsCategoryHtml").html()).render([], function (html) {
+		$("#goods_category_list").html(html);
+
+		//展开收齐点击事件
+		$(".js-switch").click(function () {
+			var category_id = $(this).attr("data-category-id");
+			var operation = $(this).attr("data-operation");
+			if (operation === 'off') {
+				$(".goods-category-list .layui-table tr[data-pid='" + category_id + "']").show();
+				$(this).text("-").attr("data-operation", 'on');
+			} else {
+				$(".goods-category-list .layui-table tr[data-pid='" + category_id + "']").hide();
+				$(this).text("+").attr("data-operation", 'off');
+			}
+		});
+
+		var category = $("input[name='category_id']:checked");
+		if (category.length) {
+			var pid = category.parent().parent().attr('data-pid');
+			if (pid) $(".js-switch[data-category-id='" + pid + "']").click();
+		}
+
+		// 勾选分类
+		form.on('checkbox(category_id)', function (data) {
+			if (data.elem.checked) {
+				$("input[name='category_id']:checked").prop("checked", false);
+				$(data.elem).prop("checked", true);
+				form.render();
+			}
+		});
+
+		form.render();
+	});
+
+}
+
+
+function getGoodsCategoryPage() {
+	laytpl($("#goodsCategoryPageHtml").html()).render([], function (html) {
+		$("#goods_category_list").html(html);
+		// 勾选分类
+		form.on('checkbox(category_id)', function (data) {
+			if (data.elem.checked) {
+				$("input[name='category_id']:checked").prop("checked", false);
+				$(data.elem).prop("checked", true);
+				form.render();
+			}
+		});
+		form.render();
+	});
+}
+
+
+/**
+ * 获取项目分类
+ * @param name
+ */
+function getServiceCategoryList() {
+	laytpl($("#serviceCategoryHtml").html()).render([], function (html) {
+		$("#service_category_list").html(html);
+
+		var category = $("input[name='service_category_id']:checked");
+
+		if (category.length) {
+			var pid = category.parent().parent().attr('data-pid');
+			if (pid) $(".js-switch[data-category-id='" + pid + "']").click();
+		}
+
+		// 勾选分类
+		form.on('checkbox(service_category_id)', function (data) {
+			if (data.elem.checked) {
+				$("input[name='service_category_id']:checked").prop("checked", false);
+				$(data.elem).prop("checked", true);
+				form.render();
+			}
+		});
+
+		form.render();
+	});
+
+}
+
+/**
+ * 获取商品列表
+ * @param name
+ */
+function getGoodsList(name) {
+	var promotion = '', goodsCols = [];
+	if (name === 'ALL_GOODS') {
+		promotion = 'all';
+		goodsCols = [
+			[
+				{
+					width: '8%',
+					templet: function (data) {
+						return `<input type="checkbox" name="goods_checkbox" value="${data.goods_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.goods_id == selectLink.goods_id ? 'checked' : ''} />`;
+					}
+				},
+				{
+					title: '商品',
+					width: '52%',
+					templet: '#goods_info'
+				},
+				{
+					field: 'price',
+					title: '价格',
+					width: '15%'
+				},
+				{
+					field: 'goods_stock',
+					title: '库存',
+					width: '15%'
+				}
+			]
+		];
+	} else if (name === "PINTUAN_GOODS") {
+		promotion = 'pintuan';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.pintuan_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.pintuan_id == selectLink.pintuan_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '拼团商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'pintuan_price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		];
+	} else if (name === "PINFAN_GOODS") {
+		promotion = 'pinfan';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.pintuan_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.pintuan_id == selectLink.pinfan_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '拼团返利',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'pintuan_price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		];
+	} else if (name === "GROUPBUY_GOODS") {
+		promotion = 'groupbuy';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.groupbuy_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.groupbuy_id == selectLink.groupbuy_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '团购商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'groupbuy_price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		];
+	} else if (name === "DISTRIBUTION_GOODS") {
+		promotion = 'fenxiao';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.goods_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.goods_id == selectLink.goods_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '分销商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	} else if (name === "BARGAIN_GOODS") {
+		promotion = 'bargain';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.bargain_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.bargain_id == selectLink.bargain_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '砍价商品',
+				unresize: 'false',
+				width: '52%',
+				templet: '#goods_info'
+			}, {
+				field: 'price',
+				title: '价格',
+				unresize: 'false',
+				width: '15%'
+			}, {
+				field: 'goods_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	} else if (name === "PRESALE_GOODS") {
+		promotion = 'presale';
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.presale_id}" data-goods-name="${data.goods_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.presale_id == selectLink.presale_id ? 'checked' : ''} />`;
+				}
+			}, {
+				title: '预售商品',
+				unresize: 'false',
+				width: '45%',
+				templet: '#goods_info'
+			}, {
+				field: 'presale_name',
+				title: '活动名称',
+				unresize: 'false',
+				width: '30%'
+			}, {
+				field: 'presale_stock',
+				title: '库存',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	}else if (name === "BUNDING_GOODS") {
+		promotion = 'bundling';
+		console.log(selectLink)
+		goodsCols = [
+			[{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="goods_checkbox" value="${data.bl_id}" data-goods-name="${data.bl_name}" lay-skin="primary" lay-filter="goods_checkbox" ${data.bl_id == selectLink.presale_id ? 'checked' : ''} />`;
+				}
+			}, {
+				field: 'bl_name',
+				title: '套餐名称',
+				unresize: 'false',
+				width: '45%',
+			}, {
+				field: 'bl_price',
+				title: '套餐价',
+				unresize: 'false',
+				width: '30%'
+			}, {
+				field: 'goods_money',
+				title: '商品总价',
+				unresize: 'false',
+				width: '15%'
+			}]
+		]
+	}
+
+	new Table({
+		elem: '#goods_list',
+		url: ns.url('shop/goods/goodsselect'),
+		where: {
+			site_id: ns_url.siteId,
+			app_module: ns_url.appModule,
+			promotion: promotion,
+			search_text: $("input[name='search_text']").val()
+		},
+		cols: goodsCols
+	});
+
+	// 选择商品
+	form.on('checkbox(goods_checkbox)', function (data) {
+		if (data.elem.checked) {
+			$("input[name='goods_checkbox']:checked").prop("checked", false);
+			$(data.elem).prop("checked", true);
+			form.render();
+		}
+	});
+}
+
+/**
+ * 获取小游戏
+ * @param name
+ */
+function getGameList(name) {
+	var addon_url = '';
+	if (name === 'CARDS_GAME') {
+		addon_url = ns.url('cards://shop/cards/lists', {
+			status: 1,
+			app_module: ns_url.appModule,
+			site_id: ns_url.siteId
+		});
+	} else if (name === 'TURNTABLE_GAME') {
+		addon_url = ns.url('turntable://shop/turntable/lists', {
+			status: 1,
+			app_module: ns_url.appModule,
+			site_id: ns_url.siteId
+		});
+	} else if (name === 'EGG_GAME') {
+		addon_url = ns.url('egg://shop/egg/lists', {status: 1, app_module: ns_url.appModule, site_id: ns_url.siteId});
+	}
+	var gameCols = [
+		[
+			{
+				unresize: 'false',
+				width: '8%',
+				templet: function (data) {
+					return `<input type="checkbox" name="game_checkbox" value="${data.game_id}" data-game-name="${data.game_name}" lay-skin="primary" lay-filter="game_checkbox" ${data.game_id == selectLink.game_id ? 'checked' : ''} />`;
+				}
+			},
+			{
+				field: 'game_name',
+				title: '游戏名称',
+				unresize: 'false',
+				width: '60%',
+			},
+			{
+				field: 'status',
+				title: '游戏状态',
+				unresize: 'false',
+				width: '30%',
+				templet: function (d) {
+					var status = '';
+					if (d.status == 0) {
+						status = '未开始';
+					} else if (d.status == 1) {
+						status = '进行中';
+					} else if (d.status == 2) {
+						status = '已结束';
+					} else if (d.status == 3) {
+						status = '已关闭';
+					}
+					return status;
+				}
+			}
+		]
+	];
+	new Table({
+		elem: '#game_list',
+		url: addon_url,
+		cols: gameCols
+	});
+
+	// 勾选小游戏
+	form.on('checkbox(game_checkbox)', function (data) {
+		if (data.elem.checked) {
+			$("input[name='game_checkbox']:checked").prop("checked", false);
+			$(data.elem).prop("checked", true);
+			form.render();
+		}
+	});
+
+}
+
+/**
+ * 获取小游戏
+ * @param name
+ */
+function getDiyFormList(name) {
+	var addon_url = ns.url('form://shop/form/lists', {
+		form_type: 'custom',
+		is_use: 1,
+		app_module: ns_url.appModule,
+		site_id: ns_url.siteId
+	});
+	var diyFormCols = [
+		[
+			{
+				unresize: 'false',
+				width: '10%',
+				templet: function (data) {
+					return `<input type="checkbox" name="diy_form_checkbox" value="${data.id}" data-form-name="${data.form_name}" lay-skin="primary" lay-filter="diy_form_checkbox" ${data.id == selectLink.form_id ? 'checked' : ''} />`;
+				}
+			},
+			{
+				field: 'form_name',
+				title: '表单名称',
+				unresize: 'false',
+				width: '80%',
+			}
+		]
+	];
+	new Table({
+		elem: '#diy_form_list',
+		url: addon_url,
+		cols: diyFormCols
+	});
+
+	// 勾选自定义表单
+	form.on('checkbox(diy_form_checkbox)', function (data) {
+		if (data.elem.checked) {
+			$("input[name='diy_form_checkbox']:checked").prop("checked", false);
+			$(data.elem).prop("checked", true);
+			form.render();
+		}
+	});
+
+}
+
+/**
+ * 保存前处理数据的回调
+ * @param oV 原链接
+ */
+function beforeSaveCallback(oV) {
+	var name = $('.link-box .link-left dd.text-color').attr('data-name');
+	var value = {};
+
+	// 选择商品分类
+	var category = $("input[name='category_id']:checked");
+	if (category.length) {
+		value.name = name;
+		if(name === "GOODS_CATEGORY_PAGE"){
+			value.wap_url = '/pages/goods/category?category_id=' + category.val();
+		}else{
+			value.wap_url = '/pages/goods/list?category_id=' + category.val();
+		}
+		value.title = category.attr('data-category-name');
+		value.category_id = category.val();
+	}
+
+	// 选择商品分类
+	var service_category = $("input[name='service_category_id']:checked");
+	if (service_category.length) {
+		value.name = name;
+		value.wap_url = '/pages_promotion/cardservice/service_goods/service_list?category_id=' + service_category.val();
+		value.title = service_category.attr('data-category-name');
+		value.service_category_id = service_category.val();
+	}
+
+	// 选择商品
+	var goods = $("input[name='goods_checkbox']:checked");
+	if (goods.length) {
+		value.name = name;
+		value.title = goods.attr('data-goods-name');
+		console.log(name)
+		console.log(goods.val())
+		switch (name) {
+			case 'BARGAIN_GOODS':
+				// 砍价商品
+				value.bargain_id = goods.val();
+				value.wap_url = '/pages_promotion/bargain/detail?b_id=';
+				break;
+			case 'GROUPBUY_GOODS':
+				// 团购商品
+				value.groupbuy_id = goods.val();
+				value.wap_url = '/pages_promotion/groupbuy/detail?groupbuy_id=';
+				break;
+			case 'PINTUAN_GOODS':
+				// 拼团商品
+				value.pintuan_id = goods.val();
+				value.wap_url = '/pages_promotion/pintuan/detail?pintuan_id=';
+				break;
+			case 'PINFAN_GOODS':
+				// 拼团返利商品
+				value.pinfan_id = goods.val();
+				value.wap_url = '/pages_promotion/pinfan/detail?pinfan_id=';
+				break;
+			case 'PRESALE_GOODS':
+				// 预售商品
+				value.presale_id = goods.val();
+				value.wap_url = '/pages_promotion/presale/detail?id=';
+				break;
+			case 'BUNDING_GOODS':
+				// 预售商品
+				value.presale_id = goods.val();
+				value.wap_url = '/pages_promotion/bundling/detail?bl_id=';
+				break;
+			default:
+				// 全部商品、分销商品
+				value.goods_id = goods.val();
+				value.wap_url = '/pages/goods/detail?goods_id=';
+				break;
+		}
+		value.wap_url += goods.val();
+	}
+
+	// 选择小游戏
+	var game = $("input[name='game_checkbox']:checked");
+	if(game.length) {
+		value.name = name;
+		value.wap_url = '';
+		value.title = game.attr('data-game-name');
+		value.game_id = game.val();
+
+		switch (name) {
+			case 'CARDS_GAME':
+				value.wap_url = '/pages_promotion/game/cards?id=';
+				break;
+			case 'TURNTABLE_GAME':
+				value.wap_url = '/pages_promotion/game/turntable?id=';
+				break;
+			case 'EGG_GAME':
+				value.wap_url = '/pages_promotion/game/smash_eggs?id=';
+				break;
+		}
+		value.wap_url += game.val();
+
+	}
+
+	// 选择自定义表单
+	var diyForm = $("input[name='diy_form_checkbox']:checked");
+	if(diyForm.length) {
+		value.name = name;
+		value.wap_url = '/pages_tool/form/form?id=';
+		value.title = diyForm.attr('data-form-name');
+		value.form_id = diyForm.val();
+		value.wap_url += diyForm.val();
+	}
+
+	// 如果没有选择以上链接，则还原最初链接
+	if (Object.keys(value).length === 0) value = oV;
+
+	return value;
+}

public/static/ext/diyview/js/shop_bottom_nav.js

@@ -0,0 +1,581 @@
+/**
+ * 底部导航·组件
+ */
+var bottomMenuHtml = '<div class="bottom-menu-config">';
+		bottomMenuHtml += '<div class="template-edit-title">';
+			bottomMenuHtml += '<h3>导航样式设置</h3>';
+			bottomMenuHtml += '<div class="layui-form-item icon-radio">';
+				bottomMenuHtml += '<label class="layui-form-label sm">导航类型</label>';
+				bottomMenuHtml += '<div class="layui-input-block">';
+					bottomMenuHtml += '<template v-for="(item, index) in typeList">';
+						bottomMenuHtml += '<span :class="[item.value == data.type ? \'\' : \'layui-hide\']">{{item.label}}</span>';
+					bottomMenuHtml += '</template>';
+					bottomMenuHtml += '<ul class="icon-wrap">';
+						bottomMenuHtml += '<li v-for="(item, index) in typeList" :class="{\'text-color border-color\':data.type==item.value}" @click="data.type=item.value">';
+							bottomMenuHtml += '<i :class="[\'iconfont\',item.src,{\'text-color\':data.type==item.value}]"></i>';
+						bottomMenuHtml += '</li>';
+					bottomMenuHtml += '</ul>';
+				bottomMenuHtml += '</div>';
+			bottomMenuHtml += '</div>';
+
+			bottomMenuHtml += '<div class="layui-form-item">';
+				bottomMenuHtml += '<label class="layui-form-label sm">色调</label>';
+				bottomMenuHtml += '<div class="layui-input-block">';
+					bottomMenuHtml += '<div @click="switchTheme(\'default\')" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : ($parent.data.theme == \'default\') }">';
+						bottomMenuHtml += '<i class="layui-anim layui-icon">{{ $parent.data.theme == \'default\' ? \'&#xe643;\' : \'&#xe63f;\' }}</i>';
+						bottomMenuHtml += '<div>跟随主题风格</div>';
+					bottomMenuHtml += '</div>';
+					bottomMenuHtml += '<div @click="switchTheme(\'diy\')" :class="{ \'layui-unselect layui-form-radio\' : true,\'layui-form-radioed\' : ($parent.data.theme == \'diy\') }">';
+						bottomMenuHtml += '<i class="layui-anim layui-icon">{{ $parent.data.theme == \'diy\' ? \'&#xe643;\' : \'&#xe63f;\' }}</i>';
+						bottomMenuHtml += '<div>自定义</div>';
+					bottomMenuHtml += '</div>';
+				bottomMenuHtml += '</div>';
+			bottomMenuHtml += '</div>';
+
+			bottomMenuHtml += '<div v-show="$parent.data.theme==\'diy\'">';
+				bottomMenuHtml += '<color :data="{ field: \'backgroundColor\', label: \'背景颜色\' }"></color>';
+				bottomMenuHtml += '<color v-show="$parent.data.type == 1 || $parent.data.type == 3"></color>';
+				bottomMenuHtml += '<color :data="{ field: \'textHoverColor\', label: \'文字选中\' }" v-show="$parent.data.type == 1 || $parent.data.type == 3"></color>';
+			bottomMenuHtml += '</div>';
+		bottomMenuHtml += '</div>';
+
+		bottomMenuHtml += '<div class="template-edit-title">';
+			bottomMenuHtml += '<h3>导航内容设置</h3>';
+		bottomMenuHtml += '</div>';
+
+		bottomMenuHtml += '<ul class="bottom-menu-set">';
+			bottomMenuHtml += '<li v-for="(item,index) in menuList" :key="item.id">';
+
+				bottomMenuHtml += '<div class="content-block">';
+
+					bottomMenuHtml += '<div class="layui-form-item" v-show="$parent.data.type != 3">';
+						bottomMenuHtml += '<label class="layui-form-label sm">图标</label>';
+						bottomMenuHtml += '<div class="layui-input-block">';
+							bottomMenuHtml += '<div class="image-block">';
+								bottomMenuHtml += '<icon-upload :data="{ data : item, field : \'iconPath\'}" ></icon-upload>';
+								bottomMenuHtml += '<icon-upload :data="{ data : item, field : \'selectedIconPath\'}" ></icon-upload>';
+							bottomMenuHtml += '</div>';
+						bottomMenuHtml += '</div>';
+					bottomMenuHtml += '</div>';
+
+					bottomMenuHtml += '<div class="layui-form-item" v-show="$parent.data.type == 1 || $parent.data.type == 3">';
+						bottomMenuHtml += '<label class="layui-form-label sm">标题</label>';
+						bottomMenuHtml += '<div class="layui-input-block">';
+							bottomMenuHtml += '<input type="text" name=\'text\' v-model="item.text" maxlength="5" @keyup="listenText(index,item.text)" class="layui-input" />';
+						bottomMenuHtml += '</div>';
+					bottomMenuHtml += '</div>';
+
+					bottomMenuHtml += '<nc-link :data="{ field : $parent.data.list[index].link, label:\'链接\' }"></nc-link>';
+				bottomMenuHtml += '</div>';
+
+				bottomMenuHtml += '<i class="del" @click="menuList.splice(index,1)" data-disabled="1">x</i>';
+
+				bottomMenuHtml += '<div class="error-msg"></div>';
+				bottomMenuHtml += '<div class="iconfont icontuodong"></div>';
+			bottomMenuHtml += '</li>';
+
+		bottomMenuHtml += '</ul>';
+
+		bottomMenuHtml += '<div class="add-item text-color" v-if="showAddItem" @click="addMemu">';
+			bottomMenuHtml += '<i>+</i>';
+			bottomMenuHtml += '<span>添加一个图文导航</span>';
+		bottomMenuHtml += '</div>';
+
+		bottomMenuHtml += '<p class="hint">建议上传比例相同的图片，最多添加 {{maxTip}} 个底部导航</p>';
+
+	bottomMenuHtml += '</div>';
+
+Vue.component("bottom-menu", {
+	
+	template: bottomMenuHtml,
+	data: function () {
+		
+		return {
+			data: this.$parent.data,
+			typeList: [
+				{
+					label: "图文",
+					value: 1,
+					src: "icontuwendaohang1",
+				},
+				{
+					label: "图片",
+					value: 2,
+					src: "icontuwendaohang",
+				},
+				{
+					label: "文字",
+					value: 3,
+					src: "iconchunwenzidaohang",
+				},
+			],
+			menuList: this.$parent.data.list,
+			showAddItem: true,
+			maxTip: 5,
+		};
+		
+	},
+	created: function () {
+		this.changeShowAddItem();
+
+		this.menuList.forEach(function(e, i){
+			if(!e.id ) e.id = ns.gen_non_duplicate(6);
+		});
+		this.$parent.data.list = this.menuList;
+
+		var moveBeforeIndex = 0;
+		var _this = this;
+
+		setTimeout(function(){
+			$( '.edit-attribute .bottom-menu-set' ).DDSort({
+			    // target: 'li',
+			    floatStyle: {
+			        'border': '1px solid #ccc',
+			        'background-color': '#fff'
+			    },
+			    down: function(index){
+			    	moveBeforeIndex = index;
+			    },
+				move: function (){
+				},
+			    up: function(){
+					var index = $(this).index();
+			    	var temp = _this.menuList[moveBeforeIndex];
+			    	_this.menuList.splice(moveBeforeIndex, 1);
+			    	_this.menuList.splice(index, 0, temp);
+		    		_this.$parent.data.list = _this.menuList;
+					_this.$forceUpdate();
+			    }
+			});
+		}, 500)
+	},
+	
+	methods: {
+		switchTheme: function (theme) {
+			this.$parent.data.theme = theme;
+			this.$parent.data.backgroundColor = "#ffffff";
+			this.$parent.data.textColor = "#333333";
+			this.$forceUpdate();
+		},
+		listenText: function (index, text) {
+			if (text.length > 6) {
+				this.data.list[index].text = this.data.list[index].text.substr(0, 5);
+				layer.msg("字数不能超出5位");
+			}
+		},
+		
+		//改变图文导航按钮的显示隐藏
+		changeShowAddItem: function () {
+			if (this.menuList.length >= this.maxTip) this.showAddItem = false;
+			else this.showAddItem = true;
+		},
+		addMemu(){
+			this.menuList.push({
+				iconPath: '',
+				selectedIconPath: '',
+				text: '菜单',
+				link: {},
+				iconClass : '',
+				style: null,
+				selected_style: null,
+				id: ns.gen_non_duplicate(6)
+			})
+		}
+	},
+	
+	watch: {
+		menuList: function () {
+			this.changeShowAddItem();
+		}
+	}
+});
+
+var iconHtml = '<div class="icon-block layui-form" :id="id">';
+
+	iconHtml += '<div v-if="data.field == \'iconPath\'">';
+		iconHtml += '<template v-if="!myData.data[data.field]">';
+			iconHtml += '<div class="icon-box">';
+				iconHtml += '<div class="select-icon" v-if="myData.data[data.field] == \'\'" @click="uploadImg(\'icon_type\')">';
+				iconHtml += '<span class="add">+</span>';
+				iconHtml += '</div>';
+			iconHtml += '</div>';
+		iconHtml += '</template>';
+		iconHtml += '<template v-else>';
+			iconHtml += '<template v-if="myData.data.icon_type == \'icon\'">';
+				iconHtml += '<div class="icon-box">';
+					iconHtml += '<iconfont :icon="myData.data[data.field]" :value="myData.data.style ? myData.data.style : null"></iconfont>';
+					iconHtml += '<div class="operation">';
+						iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview"></i>';
+							iconHtml += '<i title="删除图标" class="layui-icon layui-icon-delete" @click="deleteIcon()"></i>';
+						iconHtml += '</div>';
+						iconHtml += '<div @click="uploadImg(\'icon_type\')" class="js-replace">点击替换</div>';
+					iconHtml += '</div>';
+				iconHtml += '</div>';
+				iconHtml += '<div class="action-box">';
+					iconHtml += '<div class="action" @click="iconStyle($event, \'style\')"><i class="iconfont iconpifu"></i></div>';
+					iconHtml += '<div class="action" @click="selectColor(\'color-\' + data.field+id, \'style\')" :id="\'color-\' + data.field+id"><i class="iconfont iconyanse"></i></div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+
+			iconHtml += '<template v-if="myData.data.icon_type == \'img\'">';
+				iconHtml += '<div class="upload-box">';
+					iconHtml += '<img :layer-src="img(myData.data[data.field])" :src="img(myData.data[data.field])" class="img_prev"/>';
+					iconHtml += '<div class="operation">';
+						iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg()"></i>';
+							iconHtml += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg()"></i>';
+						iconHtml += '</div>';
+						iconHtml += '<div @click="uploadImg(\'icon_type\')" class="js-replace">点击替换</div>';
+					iconHtml += '</div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+		iconHtml += '</template>';
+	iconHtml += '</div>';
+
+	iconHtml += '<div v-if="data.field == \'selectedIconPath\'">';
+		iconHtml += '<template v-if="!myData.data[data.field]">';
+			iconHtml += '<div class="icon-box">';
+				iconHtml += '<div class="select-icon" v-if="myData.data[data.field] == \'\'" @click="uploadImg(\'selected_icon_type\')">';
+				iconHtml += '<span class="add">+</span>';
+				iconHtml += '</div>';
+			iconHtml += '</div>';
+		iconHtml += '</template>';
+		iconHtml += '<template v-else>';
+			iconHtml += '<template v-if="myData.data.selected_icon_type == \'icon\'">';
+				iconHtml += '<div class="icon-box">';
+					iconHtml += '<template>';
+						iconHtml += '<iconfont :icon="myData.data[data.field]" :value="myData.data.selected_style ? myData.data.selected_style : null"></iconfont>';
+						iconHtml += '<div class="operation">';
+							iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview"></i>';
+							iconHtml += '<i title="删除图标" class="layui-icon layui-icon-delete" @click="deleteIcon()"></i>';
+							iconHtml += '</div>';
+							iconHtml += '<div @click="uploadImg(\'selected_icon_type\',\'img,icon\')" class="js-replace">点击替换</div>';
+						iconHtml += '</div>';
+					iconHtml += '</template>';
+				iconHtml += '</div>';
+				iconHtml += '<div class="action-box">';
+					iconHtml += '<div class="action" @click="iconStyle($event, \'selected_style\')"><i class="iconfont iconpifu"></i></div>';
+					iconHtml += '<div class="action" @click="selectColor(\'color-\' + data.field+id, \'selected_style\')" :id="\'color-\' + data.field+id"><i class="iconfont iconyanse"></i></div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+
+			iconHtml += '<template v-if="myData.data.selected_icon_type == \'img\'">';
+				iconHtml += '<div class="upload-box">';
+					iconHtml += '<img :layer-src="img(myData.data[data.field])" :src="img(myData.data[data.field])" class="img_prev"/>';
+					iconHtml += '<div class="operation">';
+						iconHtml += '<div class="operation-warp">';
+							iconHtml += '<i title="图片预览" class="iconfont iconreview js-preview" @click="previewImg()"></i>';
+							iconHtml += '<i title="删除图片" class="layui-icon layui-icon-delete js-delete" @click="deleteImg()"></i>';
+						iconHtml += '</div>';
+						iconHtml += '<div @click="uploadImg(\'selected_icon_type\',\'img,icon\')" class="js-replace">点击替换</div>';
+					iconHtml += '</div>';
+				iconHtml += '</div>';
+			iconHtml += '</template>';
+		iconHtml += '</template>';
+	iconHtml += '</div>';
+
+	iconHtml += '<div class="icon-text" v-if="data.field == \'iconPath\'">未选中</div>';
+	iconHtml += '<div class="icon-text" v-if="data.field == \'selectedIconPath\'">已选中</div>';
+iconHtml += '</div>';
+
+/**
+ * 选择Icon组件：
+ * 参数说明：data：链接对象，callback：回调
+ */
+Vue.component("icon-upload", {
+	props: {
+		data: {
+			type: Object,
+			default: function () {
+				return {
+					field: null,// icon对象
+					label: "图标",// 文本
+				};
+			}
+		}
+	},
+	template: iconHtml,
+	data: function () {
+		return {
+			id: ns.gen_non_duplicate(10),
+			myData: this.data, // 此处用数组的目的是触发变异方法，进行视图更新
+			parent: (Object.keys(this.$parent.data).length) ? this.$parent.data : this.$parent.global
+		};
+	},
+	created: function () {
+		this.myData.label = this.myData.label || "图标";
+		// 找寻父级
+		if (this.myData.parent !== undefined) this.parent = this.$parent.data[this.myData.parent];
+
+		this.id = ns.gen_non_duplicate(10);
+
+	},
+	methods: {
+		selectedIcon: function () {
+			iconSelect((data) => {
+				this.myData.data[this.data.field] = data;
+			})
+		},
+		uploadImg(field, display_type) {
+			display_type = display_type || 'img,icon';
+			var self = this;
+			openAlbum(function (obj) {
+				if (typeof obj == 'object') {
+					self.myData.data[self.data.field] = obj[0].pic_path;
+					self.myData.data[field] = 'img';
+				} else {
+					self.myData.data[self.data.field] = obj;
+					self.myData.data[field] = 'icon';
+					var defaultStyle = {
+						fontSize: 100,
+						iconBgColor: [],
+						iconBgColorDeg: 0,
+						iconBgImg: '',
+						bgRadius: 0,
+						iconColor: ['#000'],
+						iconColorDeg: 0,
+					};
+					if (!self.myData.data.selected_style) self.$set(self.myData.data, 'selected_style', JSON.parse(JSON.stringify(defaultStyle)))
+					if (!self.myData.data.style) self.$set(self.myData.data, 'style', JSON.parse(JSON.stringify(defaultStyle)))
+				}
+				self.$forceUpdate();
+			}, 1, 0, 'img', display_type);
+		},
+		previewImg() {
+			$('#' + this.id).find('.upload-box>img').click();
+		},
+		deleteImg() {
+			this.myData.data[this.data.field] = '';
+			this.$forceUpdate();
+		},
+		deleteIcon(index) {
+			this.myData.data[this.data.field] = '';
+			this.$forceUpdate();
+		},
+		img(path) {
+			return ns.img(path)
+		},
+		selectColor(id, style_field) {
+			var self = this;
+			colorRender(id, '', function (elem, color) {
+				if (self.myData.data[style_field].iconBgImg || self.myData.data[style_field]['iconBgColor'].length) {
+					self.myData.data[style_field]['iconBgColor'] = [color];
+				} else {
+					self.myData.data[style_field]['iconColor'] = [color];
+				}
+				self.$forceUpdate();
+			})
+		},
+		/**
+		 * 选择图标风格
+		 * @param event
+		 * @param style_field
+		 */
+		iconStyle(event, style_field) {
+			var self = this;
+			selectIconStyle({
+				elem: event,
+				icon: self.myData.data[self.data.field],
+				callback: function (data) {
+					if (data) {
+						self.myData.data[style_field] = data;
+						self.$forceUpdate();
+					} else {
+						iconStyleSet({
+							query: {
+								icon: self.myData.data[self.data.field]
+							},
+						}, function (style) {
+							self.myData.data[style_field] = style;
+							self.$forceUpdate();
+						})
+					}
+				}
+			})
+		},
+
+	}
+});
+
+/**
+ * 渲染颜色组件
+ * @param id
+ * @param color
+ * @param callback
+ */
+var _colorPicker = {};
+function colorRender(id, color, callback){
+	if (_colorPicker[id]) return;
+	setTimeout(function () {
+		_colorPicker[id] = Colorpicker.create({
+			el: id,
+			color: color,
+			change: function (elem, hex) {
+				callback(elem, hex)
+			}
+		});
+		$('#'+id).click();
+	},10)
+}
+
+function selectIconStyle(option) {
+	var _w = option.width ? option.width : 340,
+		_h = option.height ? option.height : 200,
+		_x = option.elem.x - _w,
+		_y = option.elem.y;
+
+	option.pagex -= _w;
+
+	window.onmessage = function(e) {
+		if (e.data.event && e.data.event == 'selectIconStyle') {
+			$('.select-icon-style').remove();
+			typeof option.callback == 'function' && option.callback(e.data.data);
+		}
+	};
+
+	var h = `
+            <div class="select-icon-style">
+                <div class="icon-style-wrap" style="width: `+ _w +`px;height: `+ _h +`px;left:`+ _x +`px;top:`+ _y +`px">
+                    <iframe src="`+ ns.url('shop/diy/selecticonstyle', {request_mode: 'iframe',icon: option.icon}) +`" frameborder="0"></iframe>
+                </div>
+            </div>
+        `;
+	$('body').append(h);
+	// 点击任意位置关闭弹窗
+	$('.select-icon-style').click(function () {
+		$(this).remove();
+	})
+}
+
+/**
+ * 底部导航Vue对象
+ */
+var vue = new Vue({
+	
+	el: "#bottomNav",
+	
+	data: {
+		
+		data: {
+			type: 1,
+			theme:'default',
+			// fontSize: 14,
+			textColor: "#333333",
+			textHoverColor: "#ff0036",
+			iconColor: "#333333",
+			iconHoverColor: "#ff0036",
+			backgroundColor: "#ffffff",
+			bulge : true,
+			list: [
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+				{iconPath: '', selectedIconPath: '', text: '菜单', link: {}, icon_type:'icon', selected_icon_type:'icon', style:'', selected_style:''},
+			],
+		},
+		selected: -1,
+	},
+	created: function () {
+		if (bottomNavInfo) this.data = bottomNavInfo;
+	},
+	methods: {
+		
+		mouseOver: function (index) {
+			this.selected = index;
+		},
+		mouseOut: function () {
+			this.selected = -1;
+		},
+		
+		//转换图片路径
+		changeImgUrl: function (url) {
+			if (url == null || url === "") return '';
+			if (url.indexOf("static/img/") > -1) return ns.img(ns_url.staticImg + "/" + url.replace("public/static/img/", ""));
+			else return ns.img(url);
+		},
+		
+	}
+});
+
+$('.edit-attribute').height($(window).height()-150+'px');
+
+var repeat_flag = false;//防重复标识
+$("button.save").click(function () {
+	
+	// 验证
+	var verify = {
+		flag : false,
+		message : ""
+	};
+	for (var i=0;i<vue.data.list.length;i++) {
+		var item = vue.data.list[i];
+		if (vue.data.type == 1) {
+			// 图文
+			if (item.text == '') {
+				verify.flag = true;
+				verify.message = "请输入第[" + (i + 1) + "]个标题";
+				break;
+			}
+			if (item.iconPath == '' ) {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个图标";
+				break;
+			}
+			if (item.selectedIconPath == '') {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个选中图标";
+				break;
+			}
+
+		} else if (vue.data.type == 2) {
+			// 图片
+			if (item.iconPath == '') {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个图片";
+				break;
+			}
+			if (item.selectedIconPath == '') {
+				verify.flag = true;
+				verify.message = "请上传第[" + (i + 1) + "]个选中图片";
+				break;
+			}
+
+		} else if (vue.data.type == 3) {
+			// 文字
+			if (item.text == '') {
+				verify.flag = true;
+				verify.message = "请输入第[" + (i + 1) + "]个标题";
+				break;
+			}
+		}
+		if ($.isEmptyObject(item.link)) {
+			verify.flag = true;
+			verify.message = "请选择链接地址";
+			break;
+		}
+	}
+	
+	if(verify.flag){
+		layer.msg(verify.message);
+		return;
+	}
+	
+	if (repeat_flag) return;
+	repeat_flag = true;
+
+	$.ajax({
+		type: "post",
+		url: ns.url("shop/diy/bottomNavDesign"),
+		data: {value: JSON.stringify(vue.data)},
+		dataType: "JSON",
+		success: function (res) {
+			layer.msg(res.message);
+			repeat_flag = false;
+			if (res.code == 0) {
+				listenerHash(); // 刷新页面
+			}
+		}
+	});
+});