Yuan/ZangShiQi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

初始上传

Browse Source
This commit is contained in:
Mr. Hu
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

180
app/component/view/rubik_cube/css/design.css Executable file
View File

@@ -0,0 +1,180 @@
@CHARSET "UTF-8";
/*魔方*/
.draggable-element .rubik-cube .preview-draggable .preview-box {padding: 0;margin: 0;}
.rubik-cube .preview-draggable div.tip {text-align: center;height: 136px;line-height: 136px;background-size: cover;background-repeat: no-repeat;}
.rubik-cube .preview-draggable ul {overflow: hidden;display: flex;flex-wrap: wrap;justify-content: space-between;}
.rubik-cube .preview-draggable ul li {text-align: center;}
.rubik-cube .preview-draggable ul li div{background-position: center center;background-size: cover;background-repeat: no-repeat;}
.rubik-cube .preview-draggable ul li img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
/*编辑值*/
.rubik-cube .selected-template-list {padding-left: 15px;margin-bottom: 20px;}
.rubik-cube .selected-template-list ul {overflow: hidden;display: flex;flex-wrap: wrap;}
.rubik-cube .selected-template-list ul li {color:#909399;width: 46px;height: 32px;text-align: center;line-height: 29px;border: 1px solid #e5e5e5;cursor: pointer;background: #ffffff;box-sizing: border-box;border-right: 1px transparent solid;}
.rubik-cube .selected-template-list ul li:last-child {border-right: 1px solid #e5e5e5;}
.rubik-cube .selected-template-list ul li img {display: inline-block;}
.rubik-cube .selected-template-list ul li div {font-size: 12px;}
.rubik-cube .selected-template-layout .layui-input-block {margin-left: 15px;}
.rubik-cube .layout { /*clear:both;*/position: relative;}
.rubik-cube .layout ul {overflow: hidden;}
.rubik-cube .layout li {float: left;color: #909399;border: 1px solid #e5e5e5;cursor: pointer;font-size: 12px;position: relative;}
.rubik-cube .layout li div.empty {left: 0;text-align: center;width: 100%;position: absolute;top: 50%;margin-top: -26px;}
.rubik-cube .layout li div.empty p {margin: 0;line-height: 26px;}
/*.rubik-cube .layui-form-item p {margin: 10px 0 10px 94px;color: #909399;font-size: 12px;}*/
.rubik-cube .image-ad-list { /* margin-left: 10px;margin-bottom: 20px; */margin-top: 15px;}
.rubik-cube .image-ad-list > ul > li {width: 100%;padding: 10px;background: #ffffff;border: 1px dashed #CCCCCC;position: relative;margin-top: 15px;box-sizing: border-box;}
.rubik-cube .image-ad-list > ul > li:first-child {margin-top: 0;}
.rubik-cube .image-ad-list > ul > li .content-block {display: inline-block;width: calc(100% - 78px);font-size: 14px;}
.rubik-cube .image-ad-list > ul > li .content-block.textNavigation {width: 100%;}
.rubik-cube .image-ad-list > ul > li .content-block .layui-form-item {margin: 0;}
.rubik-cube .image-ad-list > ul > li .content-block .layui-form-label {text-align: left;}
.rubik-cube .image-ad-list > ul > li .content-block div {margin-top: 10px;}
.rubik-cube .image-ad-list > ul > li .content-block div:last-child {margin-top: 0;}
.rubik-cube .layout li div.have-preview-image {box-sizing: border-box;}
.rubik-cube .layout li div.have-preview-image img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
/*1行2个*/
/*预览*/
.rubik-cube .preview-draggable ul li.row1-of2 {width: 50%;}
.rubik-cube .preview-draggable ul li.row1-of2 div{margin-top: 0 !important;margin-bottom: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-of2:nth-child(1) div {margin-left: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-of2:nth-child(2) div {margin-right: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of2:nth-child(1) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of2:nth-child(2) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row1-of2 {width: 49.2%;height: 160px;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-of2:last-child {border-right: 1px solid #e5e5e5;}
.rubik-cube .layout li.row1-of2 div.empty {}
.rubik-cube .layout li.row1-of2 div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
/*1行3个*/
/*预览*/
.rubik-cube .preview-draggable ul li.row1-of3 {width: 33.33%;}
.rubik-cube .preview-draggable ul li.row1-of3 div{margin-top: 0 !important;margin-bottom: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-of3:nth-child(1) div {margin-left: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-of3:nth-child(3) div {margin-right: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of3:nth-child(1) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of3:nth-child(2) div {border-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of3:nth-child(3) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row1-of3 {width: 32.5%;height: 100px;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-of3:last-child {border-right: 1px solid #bdf;}
.rubik-cube .layout li.row1-of3 div.empty {}
.rubik-cube .layout li.row1-of3 div.have-preview-image {text-align: center;height: 100%;line-height: 100px;background: #ffffff;}
/*1行4个*/
/*预览*/
.rubik-cube .preview-draggable ul li.row1-of4 {width: 25%;}
.rubik-cube .preview-draggable ul li.row1-of4 div{margin-top: 0 !important;margin-bottom: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-of4:nth-child(1) div {margin-left: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-of4:nth-child(4) div {margin-right: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(1) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(2) div, .rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(3) div {border-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-of4:nth-child(4) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row1-of4 {width: 24.2%;height: 80px;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-of4:last-child {border-right: 1px solid #bdf;}
.rubik-cube .layout li.row1-of4 div.empty {}
.rubik-cube .layout li.row1-of4 div.have-preview-image {text-align: center;height: 100%;line-height: 80px;background: #ffffff;}
/*2左2右*/
/*预览*/
.rubik-cube .preview-draggable ul li.row2-lt-of2-rt {width: 50%;display: inline-block;}
.rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(1) div {margin-top: 0 !important;margin-left: 0 !important;}
.rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(2) div {margin-top: 0 !important;margin-right: 0 !important;}
.rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(3) div {margin-bottom: 0 !important;margin-left: 0 !important;}
.rubik-cube .preview-draggable ul li.row2-lt-of2-rt:nth-child(4) div {margin-bottom: 0 !important;margin-right: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(1) div{border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-bottom-left-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(3) div {border-top-right-radius: 10px;border-bottom-right-radius: 10px;border-top-left-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(2) div{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row2-lt-of2-rt:nth-child(4) div{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row2-lt-of2-rt {width: 49.2%;height: 160px;}
.rubik-cube .layout li.row2-lt-of2-rt:nth-child(1) {border-right: 1px transparent solid;border-bottom: 1px transparent solid;}
.rubik-cube .layout li.row2-lt-of2-rt:nth-child(2) {border-bottom: 1px transparent solid;}
.rubik-cube .layout li.row2-lt-of2-rt:nth-child(3) {border-right: 1px transparent solid;clear: both;}
.rubik-cube .layout li.row2-lt-of2-rt div.empty {}
.rubik-cube .layout li.row2-lt-of2-rt div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
/*1左2右*/
/*预览*/
.rubik-cube .preview-draggable ul .template-left, .rubik-cube .preview-draggable ul .template-right {width: 50%;box-sizing: border-box;}
.rubik-cube .preview-draggable ul .template-left li div {margin-left: 0 !important;margin-top: 0 !important;margin-bottom: 0 !important;}
.rubik-cube .preview-draggable ul .template-right li.row1-lt-of2-rt:nth-child(1) div {margin-top: 0 !important;margin-right: 0 !important;}
.rubik-cube .preview-draggable ul .template-right li.row1-lt-of2-rt:nth-child(2) div {margin-right: 0 !important;margin-bottom: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul .template-left li.row1-lt-of2-rt:nth-child(1) div{border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul .template-right li.row1-lt-of2-rt:nth-child(1) div {border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-lt-of2-rt:nth-child(2) div{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-top-right-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row1-lt-of2-rt {width: 49.2%;font-size: 12px;}
.rubik-cube .layout li.row1-lt-of2-rt:nth-child(1) {height: 322px;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-lt-of2-rt:nth-child(2) {height: 160px;border-bottom: 1px transparent solid;}
.rubik-cube .layout li.row1-lt-of2-rt:nth-child(3) {height: 160px;}
.rubik-cube .layout li.row1-lt-of2-rt div.empty {}
.rubik-cube .layout li.row1-lt-of2-rt:nth-child(1) div.have-preview-image {text-align: center;height: 100%;line-height: 322px;background: #ffffff;}
.rubik-cube .layout li.row1-lt-of2-rt:nth-child(2) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
.rubik-cube .layout li.row1-lt-of2-rt:nth-child(3) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
/*1上2下*/
/*预览*/
/*.rubik-cube .preview-draggable ul li.row1-tp-of2-bm{height:130px;line-height: 130px;}*/
.rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(1) {width: 100%;}
.rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(2), .rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(3) {width: 50%;}
.rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(1) div {margin-top: 0 !important;margin-left: 0 !important;margin-right: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(2) div {margin-left: 0 !important;margin-bottom: 0 !important;}
.rubik-cube .preview-draggable ul li.row1-tp-of2-bm:nth-child(3) div {margin-right: 0 !important;margin-bottom: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul li.row1-tp-of2-bm:nth-child(1) div{border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul li.row1-tp-of2-bm:nth-child(2) div, .rubik-cube .preview-draggable .border-radius ul li.row1-tp-of2-bm:nth-child(3) div {border-top-left-radius: 10px;border-top-right-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row1-tp-of2-bm {height: 160px;}
.rubik-cube .layout li.row1-tp-of2-bm:nth-child(1) {width: 99.4%;border-bottom: 1px transparent solid;}
.rubik-cube .layout li.row1-tp-of2-bm:nth-child(2) {width: 49.2%;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-tp-of2-bm:nth-child(3) {width: 49.2%;}
.rubik-cube .layout li.row1-tp-of2-bm div.empty {}
.rubik-cube .layout li.row1-tp-of2-bm div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
/*1左3右*/
/*预览*/
.rubik-cube .preview-draggable ul .template-left li.row1-lt-of1-tp-of2-bm {width: 100%;}
.rubik-cube .preview-draggable ul .template-bottom {display: flex;justify-content: space-between;align-items: center;}
.rubik-cube .preview-draggable ul .template-bottom li {width: 50%;box-sizing: border-box;}
.rubik-cube .preview-draggable ul .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(1) {margin-left: 0 !important;}
.rubik-cube .preview-draggable ul .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(2) {margin-right: 0 !important;}
/*.rubik-cube .preview-draggable .border-radius ul .template-left li.row1-lt-of1-tp-of2-bm:nth-child(1) div{border-top-right-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul .template-right .template-top li.row1-lt-of1-tp-of2-bm:nth-child(1) div{border-top-left-radius: 10px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul .template-right .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(1) div{border-radius: 10px;}*/
/*.rubik-cube .preview-draggable .border-radius ul .template-right .template-bottom li.row1-lt-of1-tp-of2-bm:nth-child(2) div{border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-left-radius: 10px;}*/
/*编辑*/
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(1) {height: 320px;width: 49.2%;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(2) {height: 160px;width: 49.2%;border-bottom: 1px transparent solid;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(3) {height: 160px;width: 24.2%;border-right: 1px transparent solid;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(4) {height: 160px;width: 24.2%;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm div.empty {}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(1) div.have-preview-image {text-align: center;height: 100%;line-height: 320px;background: #ffffff;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(2) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(3) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
.rubik-cube .layout li.row1-lt-of1-tp-of2-bm:nth-child(4) div.have-preview-image {text-align: center;height: 100%;line-height: 160px;background: #ffffff;}
/*自定义魔方*/
.rubik-cube .layout li.custom-rubik-cube {width: 25%;height: 70px;border: 1px solid #e5e5e5;border-left: 1px transparent solid;border-bottom: 1px transparent solid;background: #f8f8f8;box-sizing: border-box;}
.rubik-cube .layout li.custom-rubik-cube.border-left {border-left: 1px solid #e5e5e5;}
.rubik-cube .layout li.custom-rubik-cube.border-bottom {border-bottom: 1px solid #e5e5e5;}
.rubik-cube .layout ul.custom-rubik-cube:last-child li {border-bottom: 1px solid #e5e5e5;}
.rubik-cube .layout li.custom-rubik-cube > div {font-size: 20px;color: #bbb;text-align: center;}
.rubik-cube .layout div.selected-rubik-cube {position: absolute;border: 1px solid #bdf;background: #e8f7fd;text-align: center;color: #88c4dc;font-size: 12px;cursor: pointer;box-sizing: border-box;}
.rubik-cube .layout div.selected-rubik-cube .image-url {width: 100%;height: 100%;overflow: hidden;}
.rubik-cube .layout div.selected-rubik-cube .image-url img {width: auto;height: auto;max-width: 100%;max-height: 100%;}
.rubik-cube .layout div.selected-rubik-cube.selected:hover i {display: block;}
.rubik-cube .layout div.selected-rubik-cube.have-image {background: #ffffff;}
.rubik-cube .layout div.selected-rubik-cube span {display: block;line-height: 20px;position: absolute;top: 50%;width: 100%;left: 0;margin-top: -10px;}

161
app/component/view/rubik_cube/design.html Executable file
View File

@@ -0,0 +1,161 @@
<nc-component :data="data[index]" :class="['rubik-cube']">
<template slot="preview">
<div class="preview-box" :class="{'border-radius': nc.elementAngle == 'round'}">
<template v-if="nc.list.length>0 && !nc.list[0].imageUrl">
<div class="tip" :style="{ background : nc.componentBgColor,
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
backgroundImage: 'url(' + changeImgUrl('public/static/img/default_img/figure.png') + ')'
}"></div>
</template>
<template v-if="(nc.mode != 'custom-rubik-cube')">
<ul :style="{ background : nc.componentBgColor,
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0)
}">
<template v-if="nc.mode == 'row1-lt-of2-rt'">
<div class="template-left">
<li :class="nc.mode">
<template v-if="nc.list[0].imageUrl!=''">
<div :style="{margin: nc.imageGap/2 + 'px', height : nc.list[0].previewHeight,
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
overflow: 'hidden'}">
<nc-image :src="changeImgUrl(nc.list[0].imageUrl)" :mode="nc.list[0].imageMode"></nc-image>
</div>
</template>
</li>
</div>
<div class="template-right">
<template v-for="(item, index) in nc.list">
<template v-if="index > 0">
<li :class="nc.mode">
<template v-if="item.imageUrl!=''">
<div :style="{margin: nc.imageGap + 'px ' + nc.imageGap/2 + 'px', height : item.previewHeight,
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
overflow: 'hidden'}">
<nc-image :src="changeImgUrl(item.imageUrl)" :mode="item.imageMode"></nc-image>
</div>
</template>
</li>
</template>
</template>
</div>
</template>
<template v-else-if="nc.mode == 'row1-lt-of1-tp-of2-bm'">
<div class="template-left">
<li :class="nc.mode">
<template v-if="nc.list[0].imageUrl!=''">
<div :style="{marginRight: nc.imageGap/2 + 'px', height : nc.list[0].previewHeight,
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
overflow: 'hidden'}">
<nc-image :src="changeImgUrl(nc.list[0].imageUrl)" :mode="nc.list[0].imageMode"></nc-image>
</div>
</template>
</li>
</div>
<div class="template-right">
<div class="template-top" :style="{marginBottom: nc.imageGap + 'px'}">
<li :class="nc.mode">
<template v-if="nc.list[1].imageUrl!=''">
<div :style="{marginLeft: nc.imageGap/2 + 'px', height : nc.list[1].previewHeight,
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
overflow: 'hidden'}">
<nc-image :src="changeImgUrl(nc.list[1].imageUrl)" :mode="nc.list[1].imageMode"></nc-image>
</div>
</template>
</li>
</div>
<div class="template-bottom" :style="{marginLeft: nc.imageGap/2 + 'px',marginTop: nc.imageGap + 'px'}">
<template v-for="(item, index) in nc.list">
<template v-if="index > 1">
<li :class="nc.mode" :style="{margin: '0 ' + nc.imageGap/2 + 'px'}">
<template v-if="item.imageUrl!=''">
<div :style="{height : item.previewHeight,
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
overflow: 'hidden'}">
<nc-image :src="changeImgUrl(item.imageUrl)" :mode="item.imageMode"></nc-image>
</div>
</template>
</li>
</template>
</template>
</div>
</div>
</template>
<template v-else>
<li v-for="(item,rubikIndex) in nc.list" :key="rubikIndex" :class="nc.mode">
<div v-if="item.imageUrl!=''" :style="{margin: nc.imageGap/2 + 'px', height : item.previewHeight,
borderTopLeftRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.elementAngle == 'round' ? nc.topElementAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.elementAngle == 'round' ? nc.bottomElementAroundRadius + 'px' : 0),
overflow: 'hidden'}">
<nc-image :src="changeImgUrl(item.imageUrl)" :mode="item.imageMode"></nc-image>
</div>
</li>
</template>
</ul>
</template>
<template v-else>
<template v-if="nc.lazyLoad">
<rubik-cube-diy-html :diy-html="nc.diyHtml"></rubik-cube-diy-html>
</template>
</template>
</div>
</template>
<!-- 内容编辑 -->
<template slot="edit-content">
<template v-if="nc.lazyLoad">
<rubik-cube></rubik-cube>
</template>
</template>
<!-- 样式编辑 -->
<template slot="edit-style">
<template v-if="nc.lazyLoad">
<div class="template-edit-title">
<h3>魔方样式</h3>
<slide :data="{ field : 'imageGap', label : '图片间隙', max: 30 }"></slide>
<slide :data="{ field : 'topElementAroundRadius', label : '上圆角', max : 50 }"></slide>
<slide :data="{ field : 'bottomElementAroundRadius', label : '下圆角', max : 50 }"></slide>
</div>
</template>
</template>
<!-- 资源 -->
<template slot="resource">
<js>
var rubikCubeResourcePath = "{$resource_path}"; // http路径
var rubikCubeRelativePath = "{$relative_path}"; // 相对路径
</js>
<css src="{$resource_path}/css/design.css"></css>
<js src="{$resource_path}/js/design.js"></js>
</template>
</nc-component>

BIN
app/component/view/rubik_cube/img/rubik_cube_diy.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

906
app/component/view/rubik_cube/js/design.js Executable file
View File

@@ -0,0 +1,906 @@
/**
* [魔方]属性组件
* 修改时间：2018年9月13日19:08:50
*/
//预览自定义魔方组件
var diyHtml = "<div v-html='html' style='position:relative;padding:1px;background:#ffffff;'></div>";//1px用于解决定位偏差问题
Vue.component("rubik-cube-diy-html",{
props : ["diyHtml"],
template : diyHtml,
created : function(){
if(!this.$parent.data.verify) this.$parent.data.verify = [];
this.$parent.data.verify.push(this.verify);//加载验证方法
this.html = this.diyHtml.replace(/&quot;/g,'"');
},
data : function(){
return {
html : ""
};
},
watch : {
diyHtml : function(v){
this.html = v.toString().replace(/&quot;/g,'"');
}
},
methods: {
verify : function (index) {
var res = { code : true, message : "" };
return res;
},
},
});
//编辑属性组件
var rubikCubeHtml = '<div class="layui-form-item">';
rubikCubeHtml += '<div class="template-edit-title">';
rubikCubeHtml += '<h3>选择风格</h3>';
rubikCubeHtml += '<div class="selected-template-intro layui-form-item">';
rubikCubeHtml += '<label class="layui-form-label sm">模板</label>';
rubikCubeHtml += '<div class="layui-input-block">';
rubikCubeHtml += '<template v-for="(item,i) in templateList" :keys="i">';
rubikCubeHtml += '<span v-if="item.className == $parent.data.mode">{{item.name}}</span>';
rubikCubeHtml += '</template>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '<div class="selected-template-list layui-form-item">';
rubikCubeHtml += '<ul>';
rubikCubeHtml += '<li v-for="(item,i) in templateList" :class="[(item.className == $parent.data.mode) ? \'text-color border-color\' : \'\' ]" @click="changeTemplateList(i)">';
rubikCubeHtml += '<i class="iconfont" :class="[{\'text-color\': item.className == $parent.data.mode}, item.src]"></i>';
rubikCubeHtml += '</li>';
rubikCubeHtml += '</ul>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '<div v-if="isShowCustomRubikCube" class="layui-form-item">';
rubikCubeHtml += '<label class="layui-form-label sm">魔方密度</label>';
rubikCubeHtml += '<div class="layui-input-block">';
rubikCubeHtml += '<div :class="{ \'layui-unselect layui-form-select\' : true, \'layui-form-selected\' : isShowRubikCubeDensity }" @click="isShowRubikCubeDensity=!isShowRubikCubeDensity;">';
rubikCubeHtml += '<div class="layui-select-title">';
rubikCubeHtml += '<input type="text" placeholder="请选择" :value="customRubikCubeList[selectIndex].text" readonly="readonly" class="layui-input layui-unselect">';
rubikCubeHtml += '<i class="layui-edge"></i>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '<dl class="layui-anim layui-anim-upbit">';
rubikCubeHtml += '<dd v-for="(item,index) in customRubikCubeList" :class="{ \'layui-this\' : (customRubikCube==item.value) }" @click.stop="customRubikCubeFn(item,index)" >{{item.text}}</dd>';
rubikCubeHtml += '</dl>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
// rubikCubeHtml += '<div class="template-edit-title">';
// rubikCubeHtml += '<h3>间隙设置</h3>';
// rubikCubeHtml += '<slide :data="{ field : \'imageGap\', label : \'图片间隙\', max: 30, callback : calcRatio }"></slide>';
// rubikCubeHtml += '</div>';
rubikCubeHtml += '<div class="template-edit-title">';
rubikCubeHtml += '<h3>魔方布局</h3>';
// rubikCubeHtml += '<p class="word-aux">选定布局区域，在下方添加图片，建议添加比例一致的图片</p>';
rubikCubeHtml += '<div class="layui-form-item selected-template-layout">';
rubikCubeHtml += '<div class="layui-input-block layout" v-for="item in templateList" v-if="(item.className == $parent.data.mode) && !isShowCustomRubikCube">';
rubikCubeHtml += '<ul>';
// rubikCubeHtml += '<li v-for="(li,i) in item.dimensionScale" :class="[item.className,(currentIndex==i) ? \'border-color\' : \'\']" @click="changeCurrentIndex(i)">';
// rubikCubeHtml += '<div class="empty" :class="[item.className,(currentIndex==i) ? \'text-color\' : \'\']" v-show="currentList.length>0 && !currentList[i].imageUrl" v-html="li"></div>';
rubikCubeHtml += '<li v-for="(li,i) in item.dimensionScale" :class="[item.className]">';
rubikCubeHtml += '<div class="empty" :class="[item.className]" v-show="currentList.length>0 && !currentList[i].imageUrl">';
rubikCubeHtml += '<p>{{li.name}}</p>';
rubikCubeHtml += '<p>{{li.desc}}</p>';
// rubikCubeHtml += '<p>{{li.size}}</p>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '<div class="have-preview-image" v-show="currentList.length>0 && currentList[i].imageUrl">';
rubikCubeHtml += '<img :src="$parent.$parent.changeImgUrl(currentList[i].imageUrl)"/>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</li>';
rubikCubeHtml += '</ul>';
rubikCubeHtml += '<div class="image-ad-list" v-if="currentList.length>0 && currentIndex<currentList.length">';
rubikCubeHtml += '<ul>';
rubikCubeHtml += '<li v-for="(li,i) in item.dimensionScale">';
rubikCubeHtml += '<img-upload :data="{ data : currentList[i], callback : refreshDiyHtml, isShow:true }"></img-upload>';
rubikCubeHtml += '<div class="content-block">';
rubikCubeHtml += '<span style="padding-left: 2px;">{{li.name}}</span>';
rubikCubeHtml += '<nc-link :data="{ field : $parent.data.list[i].link }" :callback="linkCallBack"></nc-link>';
rubikCubeHtml += '<nc-image-mode :data="$parent.data.list[i]"></nc-image-mode>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</li>';
rubikCubeHtml += '</ul>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
// rubikCubeHtml += '<p class="word-aux">选定布局区域，在下方添加图片，建议添加比例一致的图片</p>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
rubikCubeHtml += '</div>';
Vue.component("rubik-cube", {
props: {},
data: function () {
return {
windowWidth: 375,
//是否显示魔方密度
isShowCustomRubikCube: false,
//布局密度
customRubikCube: this.$parent.data.customRubikCube,
//自定义区域集合
customRubikCubeArray: [],
//已设定好的自定义区域集合
selectedRubikCubeArray: this.$parent.data.selectedRubikCubeArray,
//当前选中的布局下标
selectIndex: 0,
//控制魔方密度下拉框的显示隐藏
isShowRubikCubeDensity: false,
//可选择的魔方模板
templateList: [],
customRubikCubeList: [
{value: 4, text: "4x4"},
{value: 5, text: "5x5"},
{value: 6, text: "6x6"},
{value: 7, text: "7x7"}
],
//当前编辑图片的链接地址
currentIndex: 0,
data: this.$parent.data,
currentList: this.$parent.data.list,
}
},
template: rubikCubeHtml,
created: function () {
this.initCustomRubikCubeArray();
this.initTemplateList();
this.calcRatio();
if (!this.$parent.data.verify) this.$parent.data.verify = [];
this.$parent.data.verify.push(this.verify);//加载验证方法
this.$parent.data.ignore = ['textColor', 'elementBgColor'];//加载忽略内容 -- 其他设置中的属性设置
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
},
methods: {
//初始化自定义区域集合
initCustomRubikCubeArray: function () {
for (var i = 0; i < this.customRubikCube; i++) {
for (var j = 0; j < this.customRubikCube; j++) {
var obj = {
coordinates: (i + 1) + ":" + (j + 1),
row: (i + 1), //行
column: (j + 1), //列
selected: false, //是否已选择
start: false, //开始
finish: false, //是否已设定
ranksNumber: "", //行列数量
selectedCoordinates: [] //已选择的行列
};
this.customRubikCubeArray.push(obj);
}
}
// console.log(JSON.stringify(this.customRubikCubeArray));
},
//初始化可选择的模板集合
initTemplateList: function () {
this.templateList.push({
name: "1行2个",
src: 'iconyihangliangge',
className: "row1-of2",
dimensionScale: [{desc: "宽度50%", size: "200px * 200px", name: "图一"}, {
desc: "宽度50%",
size: "200px * 200px",
name: "图二"
}],
descAux: "选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：200px"
});
this.templateList.push({
name: "1行3个",
src: 'iconyihangsange',
className: "row1-of3",
dimensionScale: [{desc: "宽度33.33%", size: "200px * 200px", name: "图一"}, {
desc: "宽度33.33%",
size: "200px * 200px",
name: "图二"
}, {desc: "宽度33.33%", size: "200px * 200px", name: "图三"}],
descAux: "选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：130px"
});
this.templateList.push({
name: "1行4个",
src: 'iconyihangsige',
className: "row1-of4",
dimensionScale: [{desc: "宽度25%", size: "200px * 200px", name: "图一"}, {
desc: "宽度25%",
size: "200px * 200px",
name: "图二"
}, {desc: "宽度25%", size: "200px * 200px", name: "图三"}, {
desc: "宽度25%",
size: "200px * 200px",
name: "图四"
},],
descAux: "选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：100px"
});
this.templateList.push({
name: "2左2右",
src: 'iconmofang-liangzuoliangyou',
className: "row2-lt-of2-rt",
dimensionScale: [{desc: "宽度50%", size: "200px * 200px", name: "图一"}, {
desc: "宽度50%",
size: "200px * 200px",
name: "图二"
}, {desc: "宽度50%", size: "200px * 200px", name: "图三"}, {
desc: "宽度50%",
size: "200px * 200px",
name: "图四"
}],
descAux: "选定布局区域，在下方添加图片，建议添加尺寸一致的图片，宽度最小建议为：200px"
});
this.templateList.push({
name: "1左2右",
src: 'iconmofang-yizuoliangyou',
className: "row1-lt-of2-rt",
dimensionScale: [{desc: "宽度50% * 高度100%", size: "200px * 400px", name: "图一"}, {
desc: "宽度50% * 高度50%",
size: "200px * 200px",
name: "图二"
}, {desc: "宽度50% * 高度50%", size: "200px * 200px", name: "图三"}],
descAux: "选定布局区域，在下方添加图片，宽度最小建议为：200px，右侧两张图片高度一致，左侧图片高度为右侧两张图片高度之和（例：左侧图片尺寸：200px * 300px，右侧两张图片尺寸：200px * 150px）"
});
this.templateList.push({
name: "1上2下",
src: 'iconmofang-yishangliangxia',
className: "row1-tp-of2-bm",
dimensionScale: [{desc: "宽度100% * 高度50%", size: "400px * 200px", name: "图一"}, {
desc: "宽度50% * 高度50%",
size: "200px * 200px",
name: "图二"
}, {desc: "宽度50% * 高度50%", size: "200px * 200px", name: "图三"}],
descAux: "选定布局区域，在下方添加图片，上方一张图片的宽度为下方两张图片宽度之和，下放两张图片尺寸一致，高度可根据实际需求自行确定（例：上方图片尺寸：400px * 150px，下方两张图片尺寸：200px * 150px）"
});
this.templateList.push({
name: "1左3右",
src: 'iconxuanzemoban-yizuosanyou',
className: "row1-lt-of1-tp-of2-bm",
dimensionScale: [{desc: "宽度50% * 高度100%", size: "200px * 400px", name: "图一"}, {
desc: "宽度50% * 高度50%",
size: "200px * 200px",
name: "图二"
}, {desc: "宽度25% * 高度50%", size: "100px * 200px", name: "图三"}, {
desc: "宽度25% * 高度50%",
size: "100px * 200px",
name: "图四"
}],
descAux: "选定布局区域，在下方添加图片，左右两侧内容宽高相同，右侧上下区域高度各占50%，右侧内容下半部分两张图片的宽度相同，各占右侧内容宽度的50%（例：左侧图片尺寸：200px * 400px，右侧上半部分图片尺寸：200px * 200px，右侧下半部分两张图片尺寸：100px * 200px）"
});
// this.templateList.push({ name : "自定义", src : prefix + "/rubik_cube_diy.png", className : "custom-rubik-cube", dimensionScale : [] });
//初始化加载时
for (var i = 0; i < this.templateList.length; i++) {
if (this.templateList[i].className == this.$parent.data.mode) {
//判断当前选中模板是否为自定义区域，然后进行特殊处理
if (this.templateList[i].dimensionScale.length == 0) {
this.isShowCustomRubikCube = true;//显示自定义
}
}
}
},
//切换选中模板
changeTemplateList: function (v) {
this.isShowCustomRubikCube = false;
for (var i = 0; i < this.templateList.length; i++) {
if (i == v) {
this.$parent.data.mode = this.templateList[i].className;
//自定义区域特殊处理
if (this.templateList[i].dimensionScale.length == 0) {
this.isShowCustomRubikCube = true;
//清空链接地址的数据
this.currentList.length = 0;
this.selectedRubikCubeArray.length = 0;
} else {
var count = this.templateList[i].dimensionScale.length;
//重置当前编辑的图片集合
//数量不够，进行添加
if (count > this.currentList.length) {
for (var j = 0; j < count; j++) {
if ((j + 1) > this.currentList.length) this.currentList.push({
imageUrl: "",
imgWidth: 0,
imgHeight: 0,
previewWidth: 0,
previewHeight: 0,
link: {name: ""}
});
}
} else {
//数量不相同时，并且数量超出，减去
if (count != this.currentList.length) {
for (var j = 0; j < this.currentList.length; j++) {
if ((j + 1) > count) {
this.currentList.splice(j, 1);
j = 0;
}
}
//设置当前选中为最后一个
this.currentIndex = this.currentList.length - 1;
}
}
}
}
}
this.templateList.push({});
this.templateList.pop();
this.calcRatio();
},
//选中当前编辑的布局
changeCurrentIndex: function (index) {
this.currentIndex = index;
},
calcRatio: function () {
var singleRow = {
'row1-of2': {
ratio: 2,
width: '50%'
},
'row1-of3': {
ratio: 3,
width: '33.33%'
},
'row1-of4': {
ratio: 4,
width: '25%'
}
};
if (singleRow[this.data.mode]) {
this.calcSingleRow(singleRow[this.data.mode]);
} else if (this.data.mode == 'row2-lt-of2-rt') {
this.calcFourSquare();
} else if (this.data.mode == 'row1-lt-of2-rt') {
this.calcRowOneLeftOfTwoRight();
} else if (this.data.mode == 'row1-tp-of2-bm') {
this.calcRowOneTopOfTwoBottom();
} else if (this.data.mode == 'row1-lt-of1-tp-of2-bm') {
this.calcRowOneLeftOfOneTopOfTwoBottom();
}
},
/**
* 魔方：单行多个，平分宽度
* 公式：
* 宽度：屏幕宽度/2，示例：375/2=187.5
* 比例：原图高/原图宽，示例：322/690=0.46
* 高度：宽度*比例，示例：187.5*0.46=86.25
*/
calcSingleRow: function (params) {
let maxHeight = 0;
this.currentList.forEach((item, index) => {
let ratio = item.imgHeight / item.imgWidth; // 获取原图比例
if (isNaN(ratio)) ratio = 0;
let width = this.windowWidth - (this.data.margin.both * 2); // 减去左右间距
if (this.data.imageGap > 0) {
width -= params.ratio * this.data.imageGap ; // 减去间隙
}
item.previewWidth = width / params.ratio;
item.previewHeight = item.previewWidth * ratio;
// 获取最大高度
if (maxHeight == 0 || maxHeight < item.previewHeight) maxHeight = item.previewHeight;
});
this.currentList.forEach((item, index) => {
item.previewHeight = item.previewHeight.toFixed(2);
item.previewHeight = maxHeight + 'px';
});
},
/**
* 魔方：四方型，各占50%
*/
calcFourSquare: function () {
let maxHeightFirst = 0;
let maxHeightTwo = 0;
this.currentList.forEach((item, index) => {
var ratio = item.imgHeight / item.imgWidth; // 获取原图比例
if (isNaN(ratio)) ratio = 0;
item.previewWidth = this.windowWidth / 2;
item.previewWidth -= this.data.margin.both * 2;
item.previewHeight = item.previewWidth * ratio;
// 获取每行最大高度
if (index <= 1) {
if (maxHeightFirst == 0 || maxHeightFirst < item.previewHeight) {
maxHeightFirst = item.previewHeight;
}
} else if (index > 1) {
if (maxHeightTwo == 0 || maxHeightTwo < item.previewHeight) {
maxHeightTwo = item.previewHeight;
}
}
});
this.currentList.forEach((item, index) => {
item.previewHeight = item.previewHeight.toFixed(2);
if (index <= 1) {
item.previewHeight = maxHeightFirst + 'px';
} else if (index > 1) {
item.previewHeight = maxHeightTwo + 'px';
}
});
},
/**
* 魔方：1左2右
* 如果右侧2图宽度一致，则
*/
calcRowOneLeftOfTwoRight: function () {
let rightHeight = 0; // 右侧两图平分高度
let divide = 'left'; // 划分规则，left：左，right：右
if (this.currentList[1].imgWidth === this.currentList[2].imgWidth) divide = 'right';
this.currentList.forEach((item, index) => {
if (index === 0) {
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
if (isNaN(ratio)) ratio = 0;
item.previewWidth = this.windowWidth / 2;
item.previewWidth -= this.data.margin.both * 2;
item.previewHeight = item.previewWidth * ratio;
rightHeight = item.previewHeight / 2;
} else {
item.previewWidth = this.currentList[0].previewWidth;
item.previewHeight = rightHeight;
}
});
this.currentList.forEach((item, index) => {
if (index == 0) {
item.previewHeight += (this.data.imageGap);
}
item.previewHeight = item.previewHeight.toFixed(2);
item.previewHeight += 'px';
});
},
/**
* 魔方：1上2下
*/
calcRowOneTopOfTwoBottom: function () {
var maxHeight = 0;
this.currentList.forEach((item, index) => {
var ratio = item.imgHeight / item.imgWidth; // 获取左图的尺寸比例
if (isNaN(ratio)) ratio = 0;
if (index == 0) item.previewWidth = this.windowWidth;
else if (index > 0) item.previewWidth = this.windowWidth / 2;
item.previewWidth -= this.data.margin.both * 2;
item.previewHeight = item.previewWidth * ratio;
// 获取最大高度
if (index > 0 && (maxHeight == 0 || maxHeight < item.previewHeight)) maxHeight = item.previewHeight.toFixed(2);
});
this.currentList.forEach((item, index) => {
item.previewWidth += 'px';
if (index > 0) {
item.previewHeight = maxHeight + 'px';
} else {
item.previewHeight = item.previewHeight.toFixed(2);
item.previewHeight += 'px';
}
});
},
/**
* 魔方：1左3右
*/
calcRowOneLeftOfOneTopOfTwoBottom: function () {
this.currentList.forEach((item, index) => {
// 左图
if (index == 0) {
var ratio = item.imgHeight / item.imgWidth; // 获取原图比例
if (isNaN(ratio)) ratio = 0;
item.previewWidth = this.windowWidth / 2;
item.previewWidth -= this.data.margin.both;
item.previewHeight = item.previewWidth * ratio;
} else if (index == 1) {
item.previewWidth = this.windowWidth / 2;
item.previewWidth -= this.data.margin.both;
item.previewHeight = this.currentList[0].previewHeight / 2;
} else if (index > 1) {
item.previewWidth = this.currentList[0].previewWidth / 2;
item.previewHeight = this.currentList[0].previewHeight / 2;
}
});
this.currentList.forEach((item, index) => {
if (index == 0) {
item.previewHeight += (this.data.imageGap);
}
item.previewHeight = item.previewHeight.toFixed(2);
item.previewHeight += 'px';
});
},
//自定义魔方区域点击事件
customRubikCubeClick: function (position) {
if (this.customRubikCubeArray[position].start && !this.customRubikCubeArray[position].selected) {
// console.log("当前操作还没有结束，不能继续操作哦");
return;
}
//再次点击确定
if (this.customRubikCubeArray[position].selected) {
var ranksNumber = "";
var selectedCoordinates = "";
var positionXY = "";
for (var i = 0; i < this.customRubikCubeArray.length; i++) {
if (this.customRubikCubeArray[i].selected && this.customRubikCubeArray[i].start) {
ranksNumber = this.customRubikCubeArray[i].ranksNumber;//行列数量
selectedCoordinates = this.customRubikCubeArray[i].selectedCoordinates;//已选中的坐标集合
}
if (this.customRubikCubeArray[i].selected && !this.customRubikCubeArray[i].finish) {
if (positionXY == "") positionXY = $(this.$refs.rubikCube[i]).position();
}
}
var rowCount = ranksNumber.split(":")[0];//选中的总行数
var columnCount = ranksNumber.split(":")[1];//选中的总列数
//按照百分比计算宽高
var width = (100 / this.customRubikCube) * columnCount;
var height = (100 / this.customRubikCube) * rowCount;
//left值采用百分比计算，公式：(同一行中当前魔方位置之前的宽度总和)
//公式：(当前列-1) * (100/魔方密度)
var left = (selectedCoordinates[0].split(":")[1] - 1) * (100 / this.customRubikCube);
//1:4 2:4 第四列 left = (4-1)*25 = 75
//3:3 4:3 第三列 left = (3-1)*25 = 50
//3:2 3:3 4:2 4:3 第二列、第三列
//2:3 2:4 3:3 3:4 第三列、第四列
//1:3 1:4 2:3 2:4 3:3 3:4 4:3 4:4 第三列、第四列
var selectedRubikCube = {
proportion: rowCount + "：" + columnCount,
selected: true,
top: positionXY.top + "px",
left: left + "%",
width: (width + 0.0) + "%",
height: (height + 0.0) + "%",
lineHeight: 0 + "px",
selectedCoordinates: selectedCoordinates
};
for (var i = 0; i < this.selectedRubikCubeArray.length; i++) {
this.selectedRubikCubeArray[i].selected = false;
}
this.selectedRubikCubeArray.push(selectedRubikCube);
for (var i = 0; i < this.customRubikCubeArray.length; i++) {
//将当前选中的设置为已完成（表示不可操作了）
if (this.customRubikCubeArray[i].selected) {
this.customRubikCubeArray[i].finish = true;
}
//删除开始位置
if (this.customRubikCubeArray[i].selected && this.customRubikCubeArray[i].start) {
this.customRubikCubeArray[i].start = false;
}
}
this.currentList.push({imageUrl: "", link: {name: ""}});
//默认选择当前添加的下标
this.changeCurrentIndex(this.currentList.length - 1);
// console.log(JSON.stringify(this.currentList));
// console.log(JSON.stringify(this.selectedRubikCubeArray));
//计算当前添加的自定义魔方区域的行高，用于将图片进行垂直居中
setTimeout(function () {
selectedRubikCube.lineHeight = $(".draggable-element.selected .rubik-cube .layout div.selected-rubik-cube.selected").outerHeight() + "px";
}, 100);
} else {
//设置当前自定义模块的开始位置，并且设定好它可以如何选中
for (var i = 0; i < this.customRubikCubeArray.length; i++) {
if (i == position) {
this.customRubikCubeArray[i].start = true;
this.customRubikCubeArray[i].selected = true;
} else {
this.customRubikCubeArray[i].start = false;
}
}
}
},
//自定义魔方区域
customRubikCubeMouseMove: function (position) {
//当前坐标
var currentMoveCoordinates = this.customRubikCubeArray[position].coordinates;
var coordinates = "";
for (var i = 0; i < this.customRubikCubeArray.length; i++) {
//找到开始位置
if (this.customRubikCubeArray[i].selected && this.customRubikCubeArray[i].start) {
coordinates = this.customRubikCubeArray[i].coordinates;
break;
}
}
//清空
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].coordinates != coordinates && !this.customRubikCubeArray[j].finish) {
this.customRubikCubeArray[j].selected = false;
}
}
if (coordinates != "") {
//开始行列
var rowStart = coordinates.split(":")[0];
var columnStart = coordinates.split(":")[1];
//结束行列
var rowEnd = parseInt(currentMoveCoordinates.split(":")[0]);
var columnEnd = parseInt(currentMoveCoordinates.split(":")[1]);
var tempRow = rowStart;
//如果开始行大于结束行，则开始行用结束行，结束行用开始行
if (rowStart > rowEnd) {
rowStart = rowEnd;
rowEnd = tempRow;
}
var tempColumn = columnStart;
//如果开始列大于结束列，则开始列用结束列，结束列用开始列
if (columnStart > columnEnd) {
columnStart = columnEnd;
columnEnd = tempColumn;
}
var rowCount = 0; //总行数
var columnCount = new Array(); //总列数
var isAdd = true;
var selectedCoordinates = new Array();
//遍历行
for (rowStart; rowStart <= rowEnd; rowStart++) {
rowCount++;
//遍历列
for (var i = columnStart; i <= columnEnd; i++) {
//当前行列坐标
var currentCoordinates = rowStart + ":" + i;
//检测当前的模块是否被占用，如果被占用，那么整个都不能选择
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].coordinates == currentCoordinates && this.customRubikCubeArray[j].finish) {
isAdd = false;
break;
}
}
if ($.inArray(i, columnCount) == -1) columnCount.push(i);
selectedCoordinates.push(currentCoordinates);
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].coordinates == currentCoordinates) {
this.customRubikCubeArray[j].selected = true;
}
}
}
}
if (!isAdd) {
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].selected && !this.customRubikCubeArray[j].finish) {
this.customRubikCubeArray[j].selected = false;
}
}
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].start) {
this.customRubikCubeArray[j].selected = true;
}
}
}
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].selected && this.customRubikCubeArray[j].start) {
this.customRubikCubeArray[j].ranksNumber = rowCount + ":" + columnCount.length;
this.customRubikCubeArray[j].selectedCoordinates = selectedCoordinates;
}
}
this.customRubikCubeArray.push({});
this.customRubikCubeArray.pop();
}
},
//点击已设定好的自定义区域
selectedRubikCubeClick: function (position) {
for (var i = 0; i < this.selectedRubikCubeArray.length; i++) {
if (i == position) {
this.selectedRubikCubeArray[i].selected = true;
} else {
this.selectedRubikCubeArray[i].selected = false;
}
}
this.changeCurrentIndex(position);
},
//删除已设定好的自定义区域
deleteSelectedRubikCubeClick: function (position) {
var selectedCoordinates = this.selectedRubikCubeArray[position].selectedCoordinates;
for (var i = 0; i < selectedCoordinates.length; i++) {
for (var j = 0; j < this.customRubikCubeArray.length; j++) {
if (this.customRubikCubeArray[j].coordinates == selectedCoordinates[i]) {
this.customRubikCubeArray[j].selected = false;
this.customRubikCubeArray[j].finish = false;
this.customRubikCubeArray[j].ranksNumber = "";
}
}
}
this.currentList.splice(position, 1);
//删除后应该选择最后一个
this.changeCurrentIndex(this.currentList.length - 1);
for (var i = 0; i < this.selectedRubikCubeArray.length; i++) {
if (this.currentIndex == i) {
this.selectedRubikCubeArray[i].selected = true;
break;
}
}
this.customRubikCubeArray.push({});
this.customRubikCubeArray.pop();
this.selectedRubikCubeArray.splice(position, 1);
},
//刷新自定义区域Html代码
refreshDiyHtml: function () {
this.calcRatio();
if (this.isShowCustomRubikCube) {
var self = this;
setTimeout(function () {
var height = $(".draggable-element.selected .rubik-cube .layout div.selected-rubik-cube.have-image").parent().outerHeight() + "px";
var diy = $(".draggable-element.selected .rubik-cube .layout div.selected-rubik-cube.have-image").clone();
var diyHtml = '<div style="background:#ffffff;height:' + height + ';">';
diy.each(function () {
$(this).find(".del").remove();
$(this).find("span").remove();
diyHtml += $(this).prop("outerHTML");
});
diyHtml += "</div>";
self.$parent.data.diyHtml = diyHtml.replace(/"/g, "&quot;").replace(/z-index: 1/g, "");
}, 100);
}
},
//监听链接地址回调，更新diyHtml
linkCallBack: function (index) {
this.refreshDiyHtml();
},
verify: function (index) {
var res = {code: true, message: ""};
if (vue.data[index].mode === "custom-rubik-cube") {
//自定义魔方，不能有空缺
var customRubikCubeArray = new Array();
var selectedCount = 0;//选择数量
for (var i = 0; i < this.customRubikCube; i++) {
for (var j = 0; j < this.customRubikCube; j++) {
customRubikCubeArray.push((i + 1) + ":" + (j + 1));
}
}
for (var i = 0; i < this.customRubikCube; i++) {
for (var j = 0; j < this.customRubikCube; j++) {
customRubikCubeArray.push((i + 1) + ":" + (j + 1));
}
}
for (var i = 0; i < customRubikCubeArray.length; i++) {
for (var j = 0; j < this.selectedRubikCubeArray.length; j++) {
var selectedCoordinates = this.selectedRubikCubeArray[j].selectedCoordinates;
for (var k = 0; k < selectedCoordinates.length; k++) {
if (customRubikCubeArray[i] == selectedCoordinates[k]) {
selectedCount++;
}
}
}
}
if (selectedCount != customRubikCubeArray.length) {
res.code = false;
res.message = "自定义魔方必须填满，不能有空缺哦";
}
}
for (var i = 0; i < this.currentList.length; i++) {
console.log(this.currentList[i])
var item = this.currentList[i];
if (!item.imageUrl) {
res.code = false;
res.message = "请上传图片";
break;
}
}
return res;
},
customRubikCubeFn(item,index){
this.customRubikCube=item.value;
this.isShowRubikCubeDensity=false;
this.selectIndex=index;
//自定义区域集合
this.customRubikCubeArray.splice(0, this.customRubikCubeArray.length);
this.selectedRubikCubeArray.splice(0, this.selectedRubikCubeArray.length);
this.initCustomRubikCubeArray();
}
},
watch: {
/**
* 监听集合，更新自定义区域Html代码
*/
currentList: function () {
this.refreshDiyHtml();
}
}
});