console
<!DOCTYPE html>
<html>
<head>
<title>分类nk代码转换</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="pragma" content="no-cache" />
<script src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/3.5.0/jquery.min.js"></script>
<script>
var w = document.documentElement.clientWidth;
if (w <= 640) {
document.documentElement.style.fontSize = Math.floor(w * 100 / 640) + "px";
}
else {
document.documentElement.style.fontSize = 640 * 100 / 640 + "px";
}
</script>
<style>
#from {
position: absolute;
width: 800px;
height: 300px
}
#from .area {
transform: translateX(25px);
text-align: left;
width: 750px;
height: 250px;
display: block;
}
#from h6 {
position: relative;
display: block;
height: 50px;
line-height: 50px;
font-size: 26px;
margin: 0;
padding: auto;
}
.el-button {
position: absolute;
right: 50px;
display: line-block;
line-height: 1;
white-space: nowrap;
cursor: pointer;
background: #fff;
border: 1px solid #dcdfe6;
color: #606266;
-webkit-appearance: none;
text-align: center;
box-sizing: border-box;
outline: none;
transition: .1s;
font-weight: 500;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
padding: 12px 20px;
font-size: 14px;
border-radius: 4px;
}
.el-button--primary {
color: #fff;
background-color: #409eff;
border-color: #409eff;
}
</style>
</head>
<body>
<div id="from">
<h6>原代码：<button id="changebtn" class="el-button el-button--primary">转换</button></h6>
<textarea id="zhq" class="area" value=""></textarea>
<h6>输出结果</h6>
<textarea id="zhh" class="area" value=""></textarea>
</div>
</body>
<script>
let defutRes = {
"moduleType": "lyntwokpclassnk",
"show": true,
"tab1": {
"pop_wh": "200|120",
"pop_mbr": "0",
"pop_tl": "0",
"tit_tl": "300|200",
"classImage": "https://img.alicdn.com/imgextra/i3/907349826/O1CN01JZRYKT2MSMF5HTkfo_!!907349826.jpg",
"classActiveImage": "https://img.alicdn.com/imgextra/i2/907349826/O1CN01E8izwp2MSMF5Zenyf_!!907349826.jpg",
"act_fc": "30|#000",
"mr_fx": "30|#999"
},
"tab2": {
"banner": []
},
"tab3": {
"list": []
},
"tab5": {
"xfshow": "2",
"xfshow1": {}
}
}
let picdiy = {
"width": 750,
"height": 300,
"bC": "",
"name": "自定义模块",
"moduleType": "diyModule",
"components": [
{
"type": "img",
"name": "图片1",
"width": 750,
"height": 300,
"left": 0,
"top": 0,
"src": "https://img.alicdn.com/imgextra/i1/1734086020/O1CN01WLEJwz1uLCxPZJ0Cm_!!1734086020.png"
}
],
"uiSize": "750",
"islive": "true",
"id": "74aea266-9f66-49c3-9e30-fcf194bde2c6",
"ruler": []
}
$("#changebtn").click(() => {
let mock = $("#zhq").val();
try {
mock = JSON.parse(mock);
} catch (err) {
mock = {};
}
if (mock.module) {
mock = mock.module;
let moduleList = mock.moduleList || [];
mock = moduleList.filter(item => {
return item.moduleInstantsName == "分类nk" && item.moduleData && item.moduleData.jsonarray
})[0]
}
if (!mock.moduleData) {
mock = { err: "参数错误" };
mock = JSON.stringify(mock)
$("#zhh").val(mock)
return;
}
mock = mock.moduleData;
let res = JSON.parse(JSON.stringify(defutRes));
mock.tab1 = mock.tab1 || {};
mock.tab1.oneWH = mock.tab1.oneWH || "";
mock.tab1.oneWH = mock.tab1.oneWH.split("|");
mock.tab1.twoWH = mock.tab1.twoWH || "";
mock.tab1.twoWH = mock.tab1.twoWH.split("|");
mock.tab1.moveWH = mock.tab1.moveWH || "";
mock.tab1.moveWH = mock.tab1.moveWH.split("|");
mock.tab1.topH = Number(mock.tab1.topH) || 300;
let banner = mock.jsonarray.map((item, index) => {
let toppic = item.toppic;
if (toppic && (checkBg(toppic) == "pic")) {
picdiy.height = mock.tab1.topH;
picdiy.components[0].height = mock.tab1.topH;
picdiy.components[0].src = item.toppic;
toppic = JSON.stringify(picdiy);
}
let itemres = {
name: `name_${index + 1}`,
pop1: {
width: Number(mock.tab1.oneWH[0] || item.width || item.image_width) || 0,
height: Number(mock.tab1.oneWH[1] || item.height || item.image_height) || 0,
pop1: item.popImg
},
pop2: {
width: Number(mock.tab1.oneWH[0] || item.width || item.image_width) || 0,
height: Number(mock.tab1.oneWH[1] || item.height || item.image_height) || 0,
pop2: item.popImg
},
toppic
}
return itemres;
});
res.tab2.banner = banner;
res.tab2.firstpopbox_wh = `750|${mock.tab1.topH}`;
if (mock.tab1.moveImg) res.tab2.first_movepic = {
width: Number(mock.tab1.moveWH[0] || mock.tab1.oneWH[0] || item.width || item.image_width) || 0,
height: Number(mock.tab1.moveWH[1] || mock.tab1.oneWH[1] || item.height || item.image_height) || 0,
"first_movepic": mock.tab1.moveImg
};
mock.contentList = mock.contentList || []
res.tab3.list = mock.contentList.map(item => {
let res = {
title: item.title,
content: item.content,
};
if (item.index) res.belong = `name_${item.index}`
if (item.pop) res.classImage = item.pop;
if (item.act) res.classActiveImage = item.act;
if (item.popurl) res.popurl = item.popurl || item.url;
if (item.it_h) res.it_h = item.it_h;
return res;
});
res.tab2.forst_op = mock.topOpc || mock.tab1.topOpc;
res.tab2.first_moleft = mock.moveLeft || mock.tab1.moveLeft;
res.tab2.forst_top = mock.oneTop || mock.tab1.oneTop;
res.tab2.firstpop_mbr = mock.oneMarg || mock.tab1.oneMarg;
res.tab2.firstpop_tl = `0|${mock.tab1.oneLeft || 0}`;
res.tab1.mr_fc = mock.size_color || res.tab1.mr_fc;
res.tab1.act_fc = mock.a_size_color || res.tab1.act_fc;
res.tab1.classImage = mock.classImage || mock.bg_all;
res.tab1.classActiveImage = mock.classActiveImage || mock.bg_all_active;
res.tab1.pop_wh = `${mock.tab1.twoWH[0] || 200}|${mock.tab1.twoWH[1] || 120}`;
res.tab1.popanisel = mock.leftani;
if (res.tab1.popanisel == "2") res.tab1.popanisel = "3"
else if (res.tab1.popanisel == "3") res.tab1.popanisel = "4"
else res.tab1.popanisel = "0"
res = JSON.stringify(res)
$("#zhh").val(res)
});
function checkBg(bg) {
let type = ""
if (bg) {
if (typeof (bg) == "string") {
if (bg.indexOf("diyM") > -1) {
type = "diy"
} else if (bg.indexOf("//") > -1) {
type = "pic"
} else { type = "color" }
} else { type = "diy" }
}
return type
}
</script>
</html>