904 lines
30 KiB
JavaScript
904 lines
30 KiB
JavaScript
/**
|
||
* [魔方]属性组件
|
||
* 修改时间：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(/"/g,'"');
|
||
// console.log(this.html);
|
||
},
|
||
data : function(){
|
||
|
||
return {
|
||
html : ""
|
||
};
|
||
},
|
||
watch : {
|
||
diyHtml : function(v){
|
||
this.html = v.toString().replace(/"/g,'"');
|
||
// console.log(this.html);
|
||
}
|
||
},
|
||
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 += '</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) => {
|
||
var ratio = item.imgHeight / item.imgWidth; // 获取原图比例
|
||
if (isNaN(ratio)) ratio = 0;
|
||
|
||
item.previewWidth = this.windowWidth / params.ratio;
|
||
|
||
item.previewWidth -= this.data.margin.both * 2;
|
||
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, """).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++) {
|
||
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();
|
||
}
|
||
}
|
||
|
||
}); |