console
<!DOCTYPE html>
<html>
<head>
<title>卡盘分类重组代码转换</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;
}
#twocodelist h6 {
position: relative;
display: block;
height: 30px;
line-height: 30px;
font-size: 16px;
margin: 0;
padding: auto;
}
#twocodelist .area {
transform: translateX(25px);
text-align: left;
width: 750px;
height: 100px;
display: block;
}
.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;
user-select: none;
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>卡盘分类重组代码转换</h6>
<h6>分类名代码：<button id="load" class="el-button el-button--primary">加载</button></h6>
<textarea id="zhq" class="area" value=""></textarea>
<h6>分类重组代码列表：</h6>
<div id="twocodelist">
</div>
<h6>输出结果: <button id="changebtn" class="el-button el-button--primary">转换</button></h6>
<textarea id="zhh" class="area" value=""></textarea>
</div>
</body>
<script>
let defutRes = {
"moduleType": "lyntwokpclassification",
"show": true,
"tab1": {
"firstpop_mbr": "10",
"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 res = defutRes;
$("#load").click(() => {
let mock = $("#zhq").val();
try {
mock = JSON.parse(mock);
} catch (err) {
mock = {};
}
if (!mock.moduleData) {
mock = { err: "参数错误" };
mock = JSON.stringify(mock)
$("#zhh").val(mock)
return;
}
mock = mock.moduleData;
mock.jsonarray = mock.jsonarray || [];
let bannergtml = ''
let banner = mock.jsonarray.map((item, index) => {
bannergtml += `<h6>${item.fl_name || '卡盘' + (index + 1)}代码：</h6>
<textarea class="codelist${index} area" value=""></textarea>`
return {
name: item.fl_name,
pop1: {
width: item.image_width,
height: item.image_height,
pop1: item.pic
},
pop2: {
width: item.image_width,
height: item.image_height,
pop2: item.actpic
},
}
});
res = JSON.parse(JSON.stringify(defutRes))
res.tab2.banner = banner;
res.tab2.firstpop_mbr = mock.marx || "0";
res.tab3.list = [];
$("#twocodelist").html(bannergtml)
$("#zhh").val("加载卡盘列表成功，请继续输入对应代码。")
});
$("#changebtn").click(() => {
let changesucced = true;
res.tab2.banner.map((item, index) => {
let code = $(`.codelist${index}`).val()
try {
code = JSON.parse(code);
} catch (err) {
code = {};
}
if (!code.moduleData) {
code = { err: "参数错误" };
changesucced = false;
return;
}
code = code.moduleData;
code.jsonarray = code.jsonarray || [];
code.jsonarray_all = code.jsonarray_all || [];
let isall = false;
if (code.bg_all_active && code.bg_all && code.jsonarray.length < code.jsonarray_all.length) {
isall = true
}
if (isall) {
code.jsonarray = code.jsonarray_all;
code.size_color = code.size_color || `${code.size||30}|${code.color|| '#999'}`;
code.act_fc = code.a_size_color || `${code.activeSize||30}|${code.activeColor|| '#000'}`;
code.classImage = code.classImage || code.bg_all;
code.classActiveImage = code.classActiveImage || code.bg_all_active;
}
code.jsonarray = code.jsonarray || [];
code.jsonarray = code.jsonarray.map(codeitem => {
codeitem = codeitem || {};
let res = {
belong: item.name,
title: codeitem.title,
content: codeitem.content
};
if (codeitem.classImage) res.classImage = codeitem.classImage;
if (codeitem.classActiveImage) res.classActiveImage = codeitem.classActiveImage;
if (codeitem.popurl || codeitem.url) res.popurl = codeitem.popurl || codeitem.url;
if (codeitem.it_h) res.it_h = codeitem.it_h;
return res;
});
res.tab3.list = [...res.tab3.list, ...code.jsonarray]
if (index > 0) {
let mr_fc = code.size_color || res.tab1.mr_fc;
if (mr_fc !== res.tab1.mr_fc) item.mr_fc = mr_fc;
let act_fc = code.a_size_color || res.tab1.act_fc;
if (act_fc !== res.tab1.act_fc) item.act_fc = act_fc;
let classImage = code.classImage;
if (classImage !== res.tab1.classImage) item.classImage = classImage;
let classActiveImage = code.classActiveImage;
if (classActiveImage !== res.tab1.classActiveImage) item.classActiveImage = classActiveImage;
let pop_wh = `${code.class_width || 200}|${code.class_height || 120}`;
if (pop_wh !== res.tab1.pop_wh) item.pop_wh = pop_wh;
let popanisel = code.leftani;
if (popanisel == "2") popanisel = "3"
else if (popanisel == "3") popanisel = "4"
else popanisel = "0"
if (popanisel !== res.tab1.popanisel) item.popanisel = popanisel;
} else {
res.tab1.mr_fc = code.size_color || res.tab1.mr_fc;
res.tab1.act_fc = code.a_size_color || res.tab1.act_fc;
res.tab1.classImage = code.classImage;
res.tab1.classActiveImage = code.classActiveImage;
res.tab1.pop_wh = `${code.class_width || 200}|${code.class_height || 120}`;
res.tab1.popanisel = code.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"
}
item.topcontent = code.topcontent;
if (index + 1 >= res.tab2.banner.length) {
if (changesucced) {
res = JSON.stringify(res)
$("#zhh").val(res)
} else {
res = { err: "参数错误" };
res = JSON.stringify(res)
$("#zhh").val(res)
}
}
});
});
</script>
</html>