816 lines
39 KiB
HTML
816 lines
39 KiB
HTML
<!doctype html>
|
||
<html>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="renderer" content="webkit">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title></title>
|
||
<meta name="keywords" content="" />
|
||
<meta name="description" content="" />
|
||
<link rel="stylesheet" type="text/css" href="{CssPath}" />
|
||
<link rel="stylesheet" type="text/css" href="http://m.qimake.cn/css/cropper.min.css" />
|
||
<link rel="stylesheet" type="text/css" href="http://m.qimake.cn/css/ImgCropping.css" />
|
||
<base href="http://qimake.cn/" />
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/jquery-1.8.2.min.js"></script>
|
||
<script language="javascript" type="text/javascript" src="{JsDragPath}"></script>
|
||
<base href="http://qimake.cn/" />
|
||
</head>
|
||
|
||
<body>
|
||
<style>
|
||
/**净化数据布局样式**/
|
||
.optimize-form .o-product { float: left; width: 1120px;}
|
||
.optimize-form .o-product p { margin-bottom: 25px; font-size: 18px;color: #666;line-height: 35px;}
|
||
.optimize-form .o-product .pic-list { width:100%; padding-bottom: 10px;}
|
||
.optimize-form .o-product ul { display: block; min-height: 30px;}
|
||
.optimize-form .o-product li { float: left; position: relative; display: inline-block; width: 280px; height: 280px;}
|
||
.optimize-form .o-product img { width: 250px; height: 250px; background: #fbfaf8; padding:9px; border:1px solid #ddd;}
|
||
.optimize-form .o-product a { display: none; background: rgba(20,141,210,.8); bottom:20px; left:10px; width: 250px; position: absolute; z-index: 3; height: 30px;line-height: 30px;color: #fff; text-align: center; cursor: pointer;}
|
||
.optimize-form .o-product .del { left:auto; right:30px;}
|
||
.optimize-form .o-product li:hover a {display: block;}
|
||
.optimize-form .o-product .text_sku { width: 250px; height: 250px;}
|
||
.optimize-form .o-product .left { left:auto; right:188px; width: 82px;}
|
||
.optimize-form .o-product .center { left:auto; right:104px; width: 82px;}
|
||
.optimize-form .o-product .right { left:auto; right:20px; width: 82px;}
|
||
.optimize-form .o-product .left_left { left:auto; right:209px; width: 61px; bottom:20px}
|
||
.optimize-form .o-product .center_left { left:auto; right:146px; width: 61px; bottom:20px}
|
||
.optimize-form .o-product .center_right { left:auto; right:83px; width: 61px; bottom:20px}
|
||
.optimize-form .o-product .right_right { left:auto; right:20px; width: 61px; bottom:20px}
|
||
.optimize-form .o-product .sku_left_left { left:auto; right:209px; width: 61px; bottom:52px}
|
||
.optimize-form .o-product .sku_center_left { left:auto; right:146px; width: 61px; bottom:52px}
|
||
.optimize-form .o-product .sku_center_right { left:auto; right:83px; width: 61px; bottom:52px}
|
||
.optimize-form .o-product .sku_right_right { left:auto; right:20px; width: 61px; bottom:52px}
|
||
.optimize-form .o-product .right-top { left: auto; width: 18px; top: 12px; right: 22px; height: 18px; line-height: 18px;}
|
||
.optimize-form .o-product .left-top { left:12px; width: 18px; top: 12px; height:18px; line-height:18px;}
|
||
.optimize-form .o-product .left-center-top { width:18px; bottom:120px; height:18px; line-height:18px; left:32px;}
|
||
/*.optimize-form .o-product .prop_line { line-height: 18px; margin-top: 2px; margin-bottom: 10px; white-space: nowrap; overflow: hidden; margin-right: -6px; margin-left: -6px;}*/
|
||
.optimize-form .o-product .prop_line { line-height: 18px; margin-top: 2px; margin-bottom: 10px; white-space: nowrap; overflow: hidden;}
|
||
.optimize-form .o-product .prop_value { display: inline-block; width: 33.33%; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden; padding: 0 6px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
|
||
.optimize-form .o-product .content_group { display: inline-block; margin-bottom:18px;}
|
||
.page-operate-button { float:right; display:inline-block; height:24px; width:72px; padding:0px 6px; line-height:24px; text-align:center; vertical-align:central; background-color:rgba(20,141,210,.8); color: white; cursor:pointer; }
|
||
.content_select { display:inline-block; margin-right:4px; margin-bottom:10px; height:18px; padding:0px 6px; line-height:18px; text-align:center; vertical-align:central; background-color:rgba(20,141,210,.8); border:1px solid rgba(20,141,210,.8); color: white; cursor:pointer;}
|
||
.nav-fixed { position:fixed; z-index:99; top:0; width:100%; text-align:center; height:44px;}
|
||
.nav-fixed-line { position:fixed; z-index:99; top:44px; width:100%; text-align:center; height:1px;}
|
||
.nav-fixed-line2 { position:fixed; z-index:99; top:45px; width:100%; text-align:center; height:1px;}
|
||
</style>
|
||
<link href="http://m.qimake.cn/umeditor/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
|
||
<script type="text/javascript" src="http://m.qimake.cn/umeditor/third-party/jquery.min.js"></script>
|
||
<script type="text/javascript" src="http://m.qimake.cn/umeditor/third-party/template.min.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="http://m.qimake.cn/umeditor/umeditor.config.js"></script>
|
||
<script type="text/javascript" charset="utf-8" src="http://m.qimake.cn/umeditor/umeditor.min.js"></script>
|
||
<script type="text/javascript" src="http://m.qimake.cn/umeditor/lang/zh-cn/zh-cn.js"></script>
|
||
<!--<script type="text/javascript" src="http://m.qimake.cn/js/jquery.dad.min.js"></script>-->
|
||
<script type="text/javascript" src="http://m.qimake.cn/js/viewer.min.js"></script>
|
||
<style>
|
||
.tailoring-content .close-tailoring {
|
||
background-color: #8C85E6 !important;
|
||
}
|
||
</style>
|
||
|
||
<div class="nav-fixed" style="filter: alpha(Opacity=90); -moz-opacity: 0.9; opacity: 0.9; background-color: white;"></div>
|
||
<div class="nav-fixed-line" style="filter: alpha(Opacity=30); -moz-opacity: 0.3; opacity: 0.3; background-color: #ccc;"></div>
|
||
<div class="nav-fixed-line2" style="filter: alpha(Opacity=30); -moz-opacity: 0.2; opacity: 0.2; background-color: #ddd;"></div>
|
||
<div class="nav-fixed">
|
||
<div class="optimize-form">
|
||
<div style="height:10px;"></div>
|
||
<div class="o-product" style="float:none; margin:0 auto;">
|
||
<h2 style="float:left; display:inline-block; margin-left:2px;">{Title}</h2>
|
||
<span onclick="refreshhtml()" class="page-operate-button" style="margin-right: 8px;">刷新页面</span>
|
||
<span onclick="bulkPullBack()" class="page-operate-button" style="margin-right: 10px;">批量拉回修图</span>
|
||
<span onclick="ResizePic(--picCountPreLine);" class="page-operate-button" style="margin-right: 10px; cursor: pointer; width: 60px;">放大图片</span>
|
||
<span onclick="ResizePic(++picCountPreLine);" class="page-operate-button" style="margin-right: 2px; cursor: pointer; width: 60px;">缩小图片</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="container" style="overflow-y: hidden;">
|
||
<div class="head-tool">
|
||
</div>
|
||
|
||
<div style="display:none" class="tailoring-container">
|
||
<div class="black-cloth" onclick="closeTailor(this)"></div>
|
||
<div class="tailoring-content">
|
||
<div class="tailoring-content-one">
|
||
<div class="close-tailoring" onclick="closeTailor(this)">×</div>
|
||
</div>
|
||
<div class="tailoring-content-two">
|
||
<div class="tailoring-box-parcel">
|
||
<img id="tailoringImg">
|
||
</div>
|
||
<div class="preview-box-parcel">
|
||
<p>图片预览:</p>
|
||
<div class="square previewImg"></div>
|
||
<div class="circular previewImg"></div>
|
||
</div>
|
||
</div>
|
||
<div class="tailoring-content-three">
|
||
<button class="l-btn cropper-reset-btn">复位</button>
|
||
<button class="l-btn cropper-rotate-btn">旋转</button>
|
||
<button class="l-btn cropper-scaleX-btn">换向</button>
|
||
<button class="l-btn sureCut" id="sureCut">确定</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="main">
|
||
<div class="form optimize-form">
|
||
<form action="/?obj=public/fession" method="post" id="fession-form">
|
||
<div class="clearfix">
|
||
<div class="o-product">
|
||
<div style="height:30px;"></div>
|
||
<div style="height:35px; line-height:30px; color:#111">
|
||
产品主图:<font color="#079deb">(点击图片可查看大图)</font>
|
||
<span style="display:inline-block; height:26px; width:auto; margin-left:250px; color:#666;">
|
||
拖动图片以改变主图顺序
|
||
<font color="#079deb">(白底图建议拖动到第五张)</font>
|
||
</span>
|
||
<span onclick="addLocalImg()" class="page-operate-button" style="margin-right:10px;">本地上传主图</span>
|
||
</div>
|
||
<div class="pic-list">
|
||
<ul id="main_image">{MainImage}</ul>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
|
||
<div style="height:20px;"></div>
|
||
<div style="height:35px; line-height:30px; color:#111">商品属性:</div>
|
||
<div>
|
||
{ProductProp}
|
||
</div>
|
||
|
||
<div style="height:20px;"></div>
|
||
<div style="height:35px; line-height:30px; color:#111">SKU属性图:<font color="#079deb">(点击图片可查看大图)</font></div>
|
||
<div>
|
||
{SkuProps}
|
||
</div>
|
||
|
||
<div style="height:30px;"></div>
|
||
<div style="height:35px; line-height:30px; color:#111">内容图:<font color="#079deb">(点击图片可查看大图)</font></div>
|
||
<div id="content_select" style="display:none">
|
||
{ContentSelect}
|
||
</div>
|
||
<div class="pic-list">
|
||
<div id="content_image">
|
||
{ContentImage}
|
||
</div>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
<div id="content_end"></div>
|
||
|
||
<div style="height:20px;"></div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div style="position:fixed; display:none; height: 30px; top:30px; width:100%; text-align:center" id="dv_matting_status">
|
||
<span style="border-radius: 15px; border:2px solid #ffaa00; background:#ffd800; padding:40px 10px; color:red" id="spn_matting_status">matting status</span>
|
||
</div>
|
||
|
||
<script type="text/javascript">
|
||
window.alert = function(name) {
|
||
const iframe = document.createElement('IFRAME');
|
||
iframe.style.display = 'none';
|
||
iframe.setAttribute('src', 'data:text/plain,');
|
||
document.documentElement.appendChild(iframe);
|
||
window.frames[0].window.alert(name);
|
||
iframe.parentNode.removeChild(iframe);
|
||
};
|
||
|
||
document.ready = function () {
|
||
showSelect();
|
||
showContent(null, null);
|
||
}
|
||
|
||
var picCountPreLine = 3;
|
||
function ResizePic(c) {
|
||
if (c || c === 0) {
|
||
picCountPreLine = c;
|
||
if (picCountPreLine > 10) {
|
||
picCountPreLine = 10;
|
||
swal('已缩小到最小!', '', 'error');
|
||
return;
|
||
}
|
||
else if (picCountPreLine < 1) {
|
||
picCountPreLine = 1;
|
||
swal('已放大到最大!', '', 'error');
|
||
return;
|
||
}
|
||
cefBrowser.SaveFissionPicCountPreLine('' + picCountPreLine);
|
||
} else {
|
||
picCountPreLine = cefBrowser.GetFissionPicCountPreLine();
|
||
}
|
||
|
||
var list = document.getElementsByClassName('pic-list');
|
||
var liSize = 1120 / picCountPreLine;
|
||
var imgSize = liSize - 30;
|
||
|
||
var styles = document.styleSheets;
|
||
var allCss;
|
||
|
||
for (i = 0; i < styles.length; i++) {
|
||
if (styles[i].href === null && styles[i].cssRules[0].selectorText.indexOf('.optimize-form') >= 0) {
|
||
allCss = styles[i].cssRules;
|
||
break;
|
||
}
|
||
}
|
||
for (i = 0; i < allCss.length; i++) {
|
||
if (allCss[i].selectorText === ".optimize-form .o-product li") {
|
||
allCss[i].style.width = liSize + 'px';
|
||
allCss[i].style.height = liSize + 'px';
|
||
}
|
||
else if (allCss[i].selectorText === ".optimize-form .o-product img") {
|
||
allCss[i].style.width = imgSize + 'px';
|
||
allCss[i].style.height = imgSize + 'px';
|
||
}
|
||
else if (allCss[i].selectorText === ".optimize-form .o-product .text_sku") {
|
||
allCss[i].style.width = imgSize + 'px';
|
||
allCss[i].style.height = imgSize + 'px';
|
||
}
|
||
else if (allCss[i].selectorText === ".optimize-form .o-product .left") {
|
||
allCss[i].style.width = (imgSize - 4) / 3 + 'px';
|
||
allCss[i].style.right = (20 + (imgSize - 4) / 3 * 2 + 4) + 'px';
|
||
}
|
||
else if (allCss[i].selectorText === ".optimize-form .o-product .center") {
|
||
allCss[i].style.width = (imgSize - 4) / 3 + 'px';
|
||
allCss[i].style.right = (20 + (imgSize - 4) / 3 + 2) + 'px';
|
||
}
|
||
else if (allCss[i].selectorText === ".optimize-form .o-product .right") {
|
||
allCss[i].style.width = (imgSize - 4) / 3 + 'px';
|
||
allCss[i].style.right = 20 + 'px';
|
||
}
|
||
else if (allCss[i].selectorText.indexOf('left_left') >= 0) {
|
||
allCss[i].style.width = (imgSize - 6) / 4 + 'px';
|
||
allCss[i].style.right = (20 + (imgSize - 6) / 4 * 3 + 6) + 'px';
|
||
}
|
||
else if (allCss[i].selectorText.indexOf('center_left') >= 0) {
|
||
allCss[i].style.width = (imgSize - 6) / 4 + 'px';
|
||
allCss[i].style.right = (20 + (imgSize - 6) / 4 * 2 + 4) + 'px';
|
||
}
|
||
else if (allCss[i].selectorText.indexOf('center_right') >= 0) {
|
||
allCss[i].style.width = (imgSize - 6) / 4 + 'px';
|
||
allCss[i].style.right = (20 + (imgSize - 6) / 4 + 2) + 'px';
|
||
}
|
||
else if (allCss[i].selectorText.indexOf('right_right') >= 0) {
|
||
allCss[i].style.width = (imgSize - 6) / 4 + 'px';
|
||
allCss[i].style.right = 20 + 'px';
|
||
}
|
||
else if (allCss[i].selectorText === ".optimize-form .o-product a") {
|
||
allCss[i].style.width = imgSize + 'px';
|
||
}
|
||
}
|
||
|
||
initDragHtml();
|
||
}
|
||
|
||
// 美图秀秀
|
||
function OpenMeitu(imgId, mode) {
|
||
var img = document.getElementById(imgId);
|
||
img.style.backgroundColor = "#079deb";
|
||
if (mode === undefined) {
|
||
mode = true;
|
||
}
|
||
var result = cefBrowser.OpenMeitu(img.src,mode);
|
||
}
|
||
|
||
function PullImg(imgId){
|
||
var img = document.getElementById(imgId);
|
||
var result = cefBrowser.PullBackPic(img.src)
|
||
var obj = JSON.parse(result);
|
||
if (1 === obj.code) {
|
||
img.style.backgroundColor = '#fbfaf8';
|
||
img.src = obj.src;
|
||
swal('图片拉回成功!', '', 'success');
|
||
}
|
||
}
|
||
// 抠图:调用京东的接口,将图片转换为透明图 by ttzhao 2020.8.13
|
||
function TransformImg(id) {
|
||
var img = document.getElementById('img'+id);
|
||
var original = document.getElementById('original'+id);
|
||
var result = cefBrowser.TransformImg(id,img.src)
|
||
var obj = JSON.parse(result);
|
||
if (1 === obj.code) {
|
||
img.src = obj.src;
|
||
original.text = obj.msg
|
||
swal('抠图成功!', '', 'success');
|
||
}
|
||
}
|
||
//原图:切换原图与抠图 by ttzhao 2020.8.17
|
||
function OriginalImg(id){
|
||
var imgx = document.getElementById('img'+id);
|
||
var original = document.getElementById('original'+id);
|
||
var result = cefBrowser.OriginalImg(id,imgx.src,original.text)
|
||
var obj = JSON.parse(result);
|
||
if (1 === obj.code) {
|
||
imgx.src = obj.src;//要是http://开头,不然会默认添加默认的http前缀
|
||
original.text=obj.msg;
|
||
}
|
||
}
|
||
|
||
var isMove = false;
|
||
function MainImgDown()
|
||
{
|
||
isMove = false;
|
||
}
|
||
function MainImgMove()
|
||
{
|
||
isMove = true;
|
||
}
|
||
function ShowMainBigImg(id) {
|
||
if (!isMove)
|
||
ShowBigImg(id);
|
||
}
|
||
//显示详细图片信息 by wl 2020.9.23
|
||
function ShowBigImg(id) {
|
||
var imgShow = document.getElementById('img' + id);
|
||
var result = cefBrowser.ShowBigImg(imgShow.src + '|img' + id);
|
||
}
|
||
function ShowPrevImg(oldId) {
|
||
var imgs = document.getElementsByClassName('product_img');
|
||
for (var i = 0; i < imgs.length; i++) {
|
||
if (imgs[i].id === oldId) {
|
||
if (i === 0) {
|
||
var result = cefBrowser.ShowBigImg(imgs[imgs.length - 1].src + '|' + imgs[imgs.length - 1].id);
|
||
}
|
||
else {
|
||
var result = cefBrowser.ShowBigImg(imgs[i - 1].src + '|' + imgs[i - 1].id);
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
alert("no next");
|
||
}
|
||
function ShowNextImg(oldId) {
|
||
var imgs = document.getElementsByClassName('product_img');
|
||
for (var i = 0; i < imgs.length; i++) {
|
||
if (imgs[i].id === oldId) {
|
||
if (i === imgs.length - 1) {
|
||
var result = cefBrowser.ShowBigImg(imgs[0].src + '|' + imgs[0].id);
|
||
}
|
||
else {
|
||
var result = cefBrowser.ShowBigImg(imgs[i + 1].src + '|' + imgs[i + 1].id);
|
||
}
|
||
return;
|
||
}
|
||
}
|
||
alert("no next");
|
||
}
|
||
|
||
//删除
|
||
function DeleteModifyElement(id){
|
||
var imgx = document.getElementById('img'+id);
|
||
var original = document.getElementById('original'+id);
|
||
var result = cefBrowser.OriginalImg(id,imgx.src,original.text)
|
||
var obj = JSON.parse(result);
|
||
if (1 === obj.code) {
|
||
imgx.src = obj.src;//要是http://开头,不然会添加默认的http前缀
|
||
original.text=obj.msg;
|
||
}
|
||
}
|
||
|
||
function OnloadImg(id) {
|
||
var imgx = document.getElementById('img'+id);
|
||
var result = cefBrowser.OnloadImg(id,imgx.src);
|
||
var obj = JSON.parse(result);
|
||
var original = document.getElementById('original'+id);
|
||
if (1 === obj.code) {
|
||
original.text=obj.msg;
|
||
}
|
||
}
|
||
|
||
//登录京东 by ttzhao 2020.8.17
|
||
function LoginJd(){
|
||
cefBrowser.LoginJd();
|
||
}
|
||
function bulkPullBack() {
|
||
var n = 0;
|
||
var images = document.getElementsByTagName("img");
|
||
for (var i = 0; i < images.length; i++) {
|
||
if (images[i].style.backgroundColor === "rgb(7, 157, 235)") {
|
||
var result = cefBrowser.PullBackPic(images[i].src)
|
||
var obj = JSON.parse(result);
|
||
if (1 === obj.code) {
|
||
images[i].style.backgroundColor = '#fbfaf8';
|
||
images[i].src = obj.src;
|
||
n++;
|
||
}
|
||
}
|
||
}
|
||
swal('图片拉回成功![共'+n+'张]', '', 'success');
|
||
}
|
||
|
||
function addLocalImg(){
|
||
var resultArr = cefBrowser.addLocalPic().split('|');
|
||
|
||
for (j = 0; j < resultArr.length; j++) {
|
||
var result = resultArr[j];
|
||
var obj = JSON.parse(result);
|
||
if (1 === obj.code) {
|
||
var added_pic_src = obj.src;
|
||
var id = 0;
|
||
var imgReg = /id=\"img[0-9]\d*\"/gi;
|
||
var arr = document.getElementsByTagName("html")[0].innerHTML.match(imgReg);
|
||
var arrIndex = new Array();
|
||
var idReg = /[0-9]\d*/gi;
|
||
arr.forEach(element => { arrIndex.push(parseInt(element.match(idReg).toString())); });
|
||
id = Math.max(...arrIndex) + 1;
|
||
var html = $('#main_image').html() + '<div class="item" id="image' + id + '" index="' + id + '"><ul><li>' +
|
||
'<img id="img' + id + '" src="' + added_pic_src + '" onclick="ShowBigImg(' + newId + ');"/>' +
|
||
'<a class="center" href="javascript:OpenMeitu(\'img' + id + '\');">修图</a><a class="right" href="javascript:PullImg(\'img' + id + '\');">拉回</a>' +
|
||
'<a href="javascript:;" class="left" target="_blank" onclick="OpenEditTool(\'img' + id + '\')">编辑</a><a class="right-top" href="javascript:DImage(' + id + ',\'' + added_pic_src + '\');">删</a></li></ul></div>'
|
||
$('#main_image').html(html);
|
||
var images = $('#images').val();
|
||
images = images + ";" + added_pic_src;
|
||
$('#images').val(images);
|
||
|
||
var leftDistance = 0;
|
||
|
||
var mainImage = document.getElementById("main_image");
|
||
for (var i = 0; i < mainImage.childElementCount; i++) {
|
||
if (mainImage.childNodes[i].className === "item" && mainImage.childNodes[i].id != null && mainImage.childNodes[i].id != '') {
|
||
if ($("#" + mainImage.childNodes[i].id).offset().left > leftDistance) {
|
||
leftDistance = $("#" + mainImage.childNodes[i].id).offset().left;
|
||
}
|
||
if (mainImage.childNodes[i].id === "image" + id) {
|
||
$("#" + mainImage.childNodes[i].id).css({
|
||
position: "absolute",
|
||
left: leftDistance + 170,
|
||
top: 80
|
||
});
|
||
}
|
||
}
|
||
}
|
||
initDragHtml();
|
||
//alert(id);
|
||
}
|
||
else {
|
||
alert("图片上传失败");
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
//实例化编辑器
|
||
var um = UM.getEditor('container');
|
||
function DImage(id, image)
|
||
{
|
||
var idObject = document.getElementById('image'+id);
|
||
idObject.parentNode.removeChild(idObject);
|
||
initDragHtml();
|
||
}
|
||
|
||
function AddImage(id) {
|
||
var picSrcSource = document.getElementById("img" + id).src;
|
||
//$('#image' + id).hide();
|
||
AddImageUrl(picSrcSource);
|
||
}
|
||
|
||
function AddImageUrl(picSrc) {
|
||
var picSrcSource = picSrc;
|
||
var newId = 0;
|
||
var imgReg = /id=\"img[0-9]\d*\"/gi;
|
||
var arr = document.getElementsByTagName("html")[0].innerHTML.match(imgReg);
|
||
var arrIndex = new Array();
|
||
var idReg = /[0-9]\d*/gi;
|
||
arr.forEach(element => { arrIndex.push(parseInt(element.match(idReg).toString())); });
|
||
newId = Math.max(...arrIndex) + 1;
|
||
var html = $('#main_image').html() + '<div class="item" id="image' + newId + '" index="' + newId + '"><ul><li>' +
|
||
'<img id="img' + newId + '" src="' + picSrcSource + '" onclick="ShowBigImg(' + newId + ');"/>' +
|
||
'<a class="center" href="javascript:OpenMeitu(\'img' + newId + '\');">修图</a><a class="right" href="javascript:PullImg(\'img' + newId + '\');">拉回</a>' +
|
||
'<a href="javascript:;" class="left" target="_blank" onclick="OpenEditTool(\'img' + newId + '\')">编辑</a><a class="right-top" href="javascript:DImage(' + newId + ',\'' + picSrcSource + '\');">删</a></li></ul></div>'
|
||
|
||
$('#main_image').html(html);
|
||
var images = $('#images').val();
|
||
images = images + ';' + picSrcSource;
|
||
$('#images').val(images);
|
||
|
||
var leftDistance = 0;
|
||
|
||
var mainImage = document.getElementById('main_image');
|
||
for (var i = 0; i < mainImage.childElementCount; i++) {
|
||
if (mainImage.childNodes[i].className === 'item' &&
|
||
mainImage.childNodes[i].id != null && mainImage.childNodes[i].id != '') {
|
||
if ($('#' + mainImage.childNodes[i].id).offset().left > leftDistance) {
|
||
leftDistance = $('#' + mainImage.childNodes[i].id).offset().left;
|
||
}
|
||
if (mainImage.childNodes[i].id === 'image' + newId) {
|
||
$('#' + mainImage.childNodes[i].id).css({
|
||
position: 'absolute',
|
||
left: leftDistance + 170,
|
||
top: 80
|
||
});
|
||
}
|
||
}
|
||
var propImage = document.getElementById('property_image');
|
||
//for (var j = 0; j < propImage.childElementCount; j++) {
|
||
// if (propImage.childNodes[j].id === 'image' + id) {
|
||
// propImage.removeChild(propImage.childNodes[j]);
|
||
// }
|
||
//}
|
||
}
|
||
initDragHtml();
|
||
}
|
||
|
||
function AddContent(url, contentSelectId, contentGroupId) {
|
||
var newId = 0;
|
||
var imgReg = /id=\"img[0-9]\d*\"/gi;
|
||
var arr = document.getElementsByTagName("html")[0].innerHTML.match(imgReg);
|
||
if (arr.length <= 0)
|
||
newId = 1;
|
||
else {
|
||
var arrIndex = new Array();
|
||
var idReg = /[0-9]\d*/gi;
|
||
arr.forEach(element => { arrIndex.push(parseInt(element.match(idReg).toString())); });
|
||
newId = Math.max(...arrIndex) + 1;
|
||
}
|
||
|
||
var groupElement = document.getElementById(contentGroupId);
|
||
if (groupElement === null) {
|
||
groupElement = document.createElement("ul");
|
||
groupElement.id = contentGroupId;
|
||
groupElement.className = 'content_group';
|
||
document.getElementById('content_image').appendChild(groupElement);
|
||
|
||
|
||
var selectNewNum = 0;
|
||
var selectReg = />详情[0-9]\d*</gi;
|
||
var selectArr = document.getElementsByTagName("html")[0].innerHTML.match(selectReg);
|
||
var selectArrIndex = new Array();
|
||
var selectIdReg = /[0-9]\d*/gi;
|
||
selectArr.forEach(element => { selectArrIndex.push(parseInt(element.match(selectIdReg).toString())); });
|
||
selectNewNum = Math.max(...selectArrIndex) + 1;
|
||
var selectElement = document.getElementById('content_select');
|
||
selectElement.innerHTML = selectElement.innerHTML + "<span id =\"" + contentSelectId + "\" class=\"content_select\" onclick=\"showContent('" +
|
||
contentSelectId + "', '" + contentGroupId + "');\">详情" + selectNewNum + "</span>";
|
||
|
||
showSelect();
|
||
}
|
||
|
||
var html = groupElement.innerHTML + "<li id=\"image" + newId + "\">" +
|
||
"<img class=\"product_img\" id=\"img" + newId + "\" src=\"" + url + "\" onclick=\"ShowBigImg('" + newId + "');\" />" +
|
||
"<a href=\"javascript:;\" class=\"left_left\" onclick=\"OpenEditTool('img" +
|
||
newId + "',true)\" target=\"_blank\">编辑</a>" +
|
||
"<a class=\"center_left\" href=\"javascript:OpenMeitu('img" + newId +
|
||
"');\" target=\"_blank\">修图</a>" +
|
||
"<a class=\"center_right\" href=\"javascript:PullImg('img" + newId +
|
||
"');\" target=\"_blank\">拉回</a>" +
|
||
"<a class=\"right_right\" href=\"javascript:AddImage(" + newId +
|
||
");\">转主</a>" +
|
||
"<a class=\"right-top\" href=\"javascript:DImage('" + newId + "','" +
|
||
url + "');\");>删</a>";
|
||
|
||
//groupElement.appendChild
|
||
groupElement.innerHTML = html;
|
||
|
||
showContent(contentSelectId, contentGroupId);
|
||
}
|
||
|
||
var imgPositonId;
|
||
|
||
function OpenEditTool(imgId, bContent)
|
||
{
|
||
var src = document.getElementById(imgId).src;
|
||
if (src.indexOf('img.qixiaoke') != -1 || src.indexOf('img1.deifei.com') != -1){
|
||
$(".tailoring-container").toggle();
|
||
imgPositonId = imgId;
|
||
var base64 = cefBrowser.getHttpPicBase64(src);
|
||
$('#tailoringImg').cropper('replace', base64, false);//默认false,适应高度,不失真
|
||
if(bContent===true)
|
||
{
|
||
document.getElementById("tailoringImg").alt="desc";
|
||
}
|
||
else{
|
||
document.getElementById("tailoringImg").removeAttribute("alt");
|
||
}
|
||
console.log(base64);
|
||
return;
|
||
}
|
||
|
||
|
||
$(".tailoring-container").toggle();
|
||
imgPositonId = imgId;
|
||
var img = document.getElementById(imgId).src;
|
||
var image = new Image();
|
||
image.crossOrigin = '';
|
||
image.src = img;
|
||
|
||
image.onload = function(){
|
||
var base64 = getBase64Image(image);
|
||
$('#tailoringImg').cropper('replace', base64,false);//默认false,适应高度,不失真
|
||
if(bContent===true)
|
||
{
|
||
document.getElementById("tailoringImg").alt="desc";
|
||
}
|
||
else{
|
||
document.getElementById("tailoringImg").removeAttribute("alt");
|
||
}
|
||
|
||
console.log(base64);
|
||
}
|
||
}
|
||
|
||
function getBase64Image(img) {
|
||
var canvas = document.createElement("canvas");
|
||
canvas.width = img.width;
|
||
canvas.height = img.height;
|
||
|
||
var ctx = canvas.getContext("2d");
|
||
ctx.drawImage(img, 0, 0, img.width, img.height);
|
||
var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
|
||
var dataURL = canvas.toDataURL("image/"+ext);
|
||
return dataURL;
|
||
}
|
||
|
||
$(document).ready(function(){
|
||
initDragHtml();
|
||
ResizePic();
|
||
});
|
||
|
||
//提交图片区域的表单
|
||
function submitPicForm(){
|
||
document.getElementById('fession-form').submit();
|
||
}
|
||
|
||
/*AJAX更新*/
|
||
function GetTitlesss() {
|
||
var title = $('#title').val();
|
||
var keyword = $('#main_keyword').val();
|
||
var count = $('#add_count').val();
|
||
var aj = $.ajax({
|
||
url: '?obj=task/add',
|
||
data: {
|
||
act: 'segment',
|
||
keyword: keyword,
|
||
title: title,
|
||
add_count: count
|
||
},
|
||
type: 'post',
|
||
cache: false,
|
||
success: function (data) {
|
||
$('#titles').val(data);
|
||
},
|
||
error: function () {
|
||
alert("异常!");
|
||
}
|
||
});
|
||
}
|
||
function GetTitlesx(tt) {
|
||
var title = $('#title').val();
|
||
var keyword = $('#main_keyword').val();
|
||
var count = $('#add_count').val();
|
||
var aj = $.ajax({
|
||
url: '?obj=task/add',
|
||
data: {
|
||
act: 'getHot',
|
||
main_keyword: keyword,
|
||
title: title,
|
||
type: tt,
|
||
add_count: count
|
||
},
|
||
type: 'post',
|
||
cache: false,
|
||
success: function (data) {
|
||
$('#titles').val(data);
|
||
},
|
||
error: function () {
|
||
alert("异常!");
|
||
}
|
||
});
|
||
}
|
||
|
||
/*AJAX更新*/
|
||
function AddNoWord() {
|
||
var noword = $('#noword').val();
|
||
var aj = $.ajax({
|
||
url: '?obj=task/add',
|
||
data: {
|
||
act: 'add_no_word',
|
||
noword: noword
|
||
},
|
||
type: 'post',
|
||
cache: false,
|
||
success: function (data) {
|
||
alert(data);
|
||
},
|
||
error: function () {
|
||
alert("异常!");
|
||
}
|
||
});
|
||
}
|
||
|
||
//保存入库和上传上货
|
||
function send_html_data_local(formdata, mode) {
|
||
var img_data = new Object();
|
||
if (document.getElementById("main_image") != null) {
|
||
var items = document.getElementById("main_image").getElementsByClassName("item");
|
||
img_data.main_pic = new Array();
|
||
for (var n = 0; n < items.length; n++) {
|
||
var m = items[n].getAttribute("index");
|
||
img_data.main_pic[m] = items[n].getElementsByTagName("img")[0].src;
|
||
}
|
||
img_data.main_pic = img_data.main_pic.filter(d => d);
|
||
}
|
||
if (document.getElementById("property_image") != null) {
|
||
var images = document.getElementById("property_image").getElementsByTagName("img");
|
||
img_data.prop_pic = new Array();
|
||
for (var i = 0; i < images.length; i++) {
|
||
if (images[i].id != "over_img") {
|
||
img_data.prop_pic[i] = images[i].src;
|
||
}
|
||
}
|
||
}
|
||
var contentElements = document.getElementsByClassName("content_group");
|
||
if (contentElements != null && contentElements.length > 0) {
|
||
img_data.content_pic = new Array();
|
||
for (i = 0; i < contentElements.length; i++) {
|
||
var images = contentElements[i].getElementsByTagName("img");
|
||
if (images.length > 0 && i > 0)
|
||
img_data.content_pic.push("new_group");
|
||
for (var j = 0; j < images.length; j++) {
|
||
if (images[j].id != "over_img") {
|
||
img_data.content_pic.push(images[j].src);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
if (document.getElementById("container") != null) {
|
||
img_data.container_info = document.getElementById("container").innerHTML;
|
||
}
|
||
|
||
var resultJsonObject = {};
|
||
for (var attr in formdata) {
|
||
resultJsonObject[attr] = formdata[attr];
|
||
}
|
||
for (var attr in img_data) {
|
||
resultJsonObject[attr] = img_data[attr];
|
||
}
|
||
|
||
var json_data = JSON.stringify(resultJsonObject);
|
||
var result;
|
||
if (mode === "deliver") {
|
||
result = cefBrowser.deliverFessionData(json_data);
|
||
if (result) {
|
||
swal('添加成功!', '', 'success');
|
||
} else {
|
||
swal('添加失败!', '', 'error');
|
||
}
|
||
return result;
|
||
} else if (mode === "update") {
|
||
result = cefBrowser.updateFessionDate(json_data);
|
||
var obj = JSON.parse(result); //json字符串转json对象
|
||
if (0 === obj.code) {
|
||
//code === 0 上传成功
|
||
swal('入库成功!', '', 'success');
|
||
return true;
|
||
} else {
|
||
swal('入库失败!', '', 'error');
|
||
return false;
|
||
}
|
||
}
|
||
}
|
||
|
||
function showSelect() {
|
||
if (document.getElementById("content_image").getElementsByClassName('content_group').length > 1)
|
||
document.getElementById('content_select').style.display = 'inline-block';
|
||
}
|
||
|
||
function showContent(selectId, contentId) {
|
||
contentList = document.getElementsByClassName('content_group');
|
||
contentSelectList = document.getElementsByClassName('content_select');
|
||
if (contentList.length < 1)
|
||
return;
|
||
|
||
for (var i = 0; i < contentList.length; i++) {
|
||
contentList[i].style.display = 'none'
|
||
}
|
||
for (var i = 0; i < contentSelectList.length; i++) {
|
||
contentSelectList[i].style.backgroundColor = 'rgba(20, 141, 210, .8)';
|
||
contentSelectList[i].style.color = 'white';
|
||
}
|
||
if (contentId === null) {
|
||
contentList[0].style.display = 'inline-block';
|
||
contentSelectList[0].style.backgroundColor = 'white';
|
||
contentSelectList[0].style.color = 'rgba(20, 141, 210, .8)';
|
||
}
|
||
else {
|
||
document.getElementById(contentId).style.display = 'inline-block';
|
||
document.getElementById(selectId).style.backgroundColor = 'white';
|
||
document.getElementById(selectId).style.color = 'rgba(20, 141, 210, .8)';
|
||
}
|
||
}
|
||
</script>
|
||
<!--<div id="loading"></div>-->
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/layer/layer.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/jquery-validate.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/validform.min.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/common.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/adddate.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/public.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/cropper.min.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/screenshot.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/cefcontrol.js"></script>
|
||
<script language="javascript" type="text/javascript" src="http://m.qimake.cn/js/sweetalert.js"></script>
|
||
</body>
|
||
</html> |