Skip to content

孙龙 / note-library

Go to a project
Commit db8fd7d3 by 肖康
Options

x

parent b9615eeb
Inline Side-by-side
Showing with 138 additions and 243 deletions
public/js/web/design.js
......@@ -13,6 +13,7 @@ var tag={
tag.editUi();
}
tag.handle();
},
getInfo:function(){
......@@ -27,6 +28,7 @@ var tag={
$(".tag-bgm").val(abobj.lableBg);
$(".tag-size").val(abobj.lableSize);
$(".edit-box").html(resp.data.template_extend.html);
$("textarea").attr("readonly",false)
tag.editUi();
}else{
......@@ -518,6 +520,7 @@ var tag={
if(!$(".tag-border").val()){
$(".edit-con").css({"border":"0px"})
}
$("textarea").attr("readonly",true);
obj.htmlp=String($(".edit-box").html());
obj.designName=$(".designName").val();
if($("#templateid").val()){
......
resources/views/web/offline_design.blade.php
<input type="hidden" id="templateid" value='{{Request::input("t_id")}}'/>
<div class="tag-content">
<div class="tag-tools">
<div class="tips">请拖动此处标签制作工具到下方编辑区域编辑！</div>
<div class="items yuan" name="round"><div class="round zctem" type="1" w="45" h="45" name="round" xtys="#333"></div><span>圆形</span></div>
<div class="items fang" name="rectangle"><div class="rectangle zctem" type="2" w="70" h="45" name="rectangle" xtys="#333"></div><span>矩形</span></div>
<div class="items text" name="textarea"><textarea class="textarea zctem" zhg="26" zh="14" wenben="测试文本" zt="Microsoft YaHei" type="3" w="200" h="26" ztys="#000000" name="textarea" placeholder="请输入文案">测试文本</textarea>A<span>文本</span></div>
<div class="items line" name="lineit"><div class="lineit zctem" type="4" w="70" h="1" name="lineit" xtys="#333"></div><span>线</span></div>
<div class="items erweima" name="erweimait" style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"><div class="zctem erweimait" type="5" w="45" h="45" name="erweimait"style="background: url(http://img.ichunt.com/images/cms/201905/05/0998e54c5120aec61e6868943a67916e.png) no-repeat;background-size: 100% 100%;"></div><span>二维码</span></div>
<div class="items yiweima" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"><div class="zctem yiweimait" type="5" w="87" h="35" name="yiweimait" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/yiweima.png) no-repeat;background-size: 100% 100%;"></div><span>一维码</span></div>
<div class="items tupian" name="imageit" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png) no-repeat;background-size: 100% 100%;"> <div class="zctem imageit" type="6" w="60" h="45" name="imageit" style="background: url(http://sz.ichunt.com/v3/dist/res/home/images/about/charutupian.png) no-repeat;background-size: 100% 100%;"></div><span>插入图片</span></div>
<div class="items logo1" name="logo1it" style="background: url(http://img.ichunt.com/images/ichunt/label/new_logo.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo1it logobase64" type="7" w="91" h="45" name="logo1it" style="background: url(http://img.ichunt.com/images/ichunt/label/new_logo.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div>
<div class="items logo2" name="logo2it" style="background: url(http://img.ichunt.com/images/ichunt/label/new_logo.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo2it logobase64" type="7" w="64" h="25" name="logo2it" style="background: url(http://img.ichunt.com/images/ichunt/label/new_logo.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div>
<div class="items logo3" name="logo3it" style="background: url(http://img.ichunt.com/images/ichunt/label/new_logo.png) no-repeat;background-size: 100% 100%;"><div class="zctem logo3it logobase64" type="7" w="88" h="34" name="logo3it" style="background: url(http://img.ichunt.com/images/ichunt/label/new_logo.png) no-repeat;background-size: 100% 100%;"></div><span>logo1</span></div>
</div>
<div class="tag-edit clr">
<h3>标签编辑区域</h3>
<div class="edit-seclect clr">
<div class="seclect-group fl">
<span>标签大小：</span>
<select class="tag-size">
<option value="440*280">90*60</option>
</select>
</div>
<div class="seclect-group fl">
<span>标签底色：</span>
<input type="text" class="tag-bgm" value="#ffffff"/>
</div>
<div class="seclect-group fl">
<span>边框：</span>
<select class="tag-border">
<option value="">无</option>
<option value="1px solid #333">边框一</option>
<option value="2px solid #333">边框二</option>
</select>
</div>
<div class="seclect-group fl">
<span>辅助线：</span>
<select class="tag-fz">
<option value="">开</option>
<option value="1">关</option>
</select>
</div>
<div class="seclect-group fl">
<span>模板名称：</span>
<input type="text" placeholder="输入模板名称" style="width:120px;" class="designName"/>
</div>
</div>
<div class="fztip">格子区域为画图区域,每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴,标尺每个刻度10px</div>
<div class="fztip" ><b style="color:red;">双击删除</b> 编辑区域内标签工具,鼠标停留在画图区域,可按住<b style="color:red;">键盘上下左右键移动当前标签工具</b></div>
<div class="fztip" ><span style="color:red;">颜色选择器,复制此处颜色可用 </span><input type="text" id="colorpicker" /></div>
<div class="edit-box fl">
<div class="edit-con init-border" ></div>
<div class="editgo fl">
</div>
<div class="edit-value fr" >
<div class="tools tool1" >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div>
<div class="group-value clr">
<span class="fl">线色浓度</span><input type="number" class="xsnd fl" placeholder="输入数值"/>
<span class="fl">线样式</span>
<select class="xys">
<option value="solid">实线</option>
<option value="dashed">虚线</option>
</select>
</div>
<div class="group-value clr">
<span class="fl">填充颜色</span><input type="text" class="tcys fl" />
<span class="fl">线条颜色</span><input type="text" class="xtys fl" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
</div>
<div class="tools tool2" >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div>
<div class="group-value clr">
<span class="fl">线色浓度</span><input type="number" class="xsnd fl" placeholder="输入数值"/>
<span class="fl">线样式</span>
<select class="xys">
<option value="solid">实线</option>
<option value="dashed">虚线</option>
</select>
</div>
<div class="group-value clr">
<span class="fl">填充颜色</span><input type="text" class="tcys fl" />
<span class="fl">线条颜色</span><input type="text" class="xtys fl" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
</div>
<div class="edit-value fr" style="position: initial;margin-top:0px;">
<div class="tools tool3" >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div>
<div class="group-value clr">
<span class="fl">文本类容</span><input type="text" class="wenben fl" style="width:350px;margin-top: 10px;"/>
</div>
<div class="group-value clr">
<span class="fl">字体</span>
<select class="zt fl">
<option value="Microsoft YaHei">微软雅黑</option>
<option value="SimSun">宋体</option>
<option value="KaiTi">楷体</option>
<option value="LiSu">隶书</option>
</select>
<span class="fl">字号</span>
<select class="zh fl">
<option value="12">12</option>
<option value="14">14</option>
<option value="18">18</option>
<option value="20">20</option>
<option value="22">22</option>
<option value="24">24</option>
</select>
</div>
<div class="group-value clr">
<span class="fl">字色浓度</span>
<select class="zsnd fl">
<option value="100">1</option>
<option value="200">2</option>
<option value="300">3</option>
<option value="400">4</option>
<option value="500">5</option>
<option value="600">6</option>
<option value="700">7</option>
<option value="800">8</option>
<option value="900">9</option>
</select>
<span class="fl">字间距</span><input type="number" class="zjj fl" placeholder="输入数值"/>
</div>
<div class="group-value clr">
<span class="fl">字体颜色</span><input type="text" class="ztys fl" placeholder=""/>
<span class="fl">字行高</span><input type="number" class="zhg fl" placeholder="输入数值"/>
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
<div class="group-value clr">
<div class="sjglgroup clr">
<span class="fl">数据关联</span>
<div class="sjglbox fl">
......@@ -189,52 +29,8 @@
</div>
</div>
<div class="tools tool4" >
<div class="group-value clr">
<span class="fl">方向</span>
<select class="fx fl">
<option value="">横向</option>
<option value="1">纵向</option>
</select>
</div>
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">长度W</span><input type="number" class="kdw fl" />
<span class="fl">线色浓度</span><input type="number" class="xsnd fl" placeholder="输入数值"/>
</div>
<div class="group-value clr">
<span class="fl">线样式</span>
<select class="xys fl">
<option value="solid">实线</option>
<option value="dashed">虚线</option>
</select>
<span class="fl">线条颜色</span><input type="text" class="xtys fl" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
</div>
<div class="tools tool5" >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
<div class="group-value clr">
<div class="sjglgroup clr">
<span class="fl">数据关联</span>
......@@ -346,43 +142,139 @@
</div>
</div>
<div class="tools tool6 " >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div>
<div class="group-value clr">
<span class="fl">上传图片</span>
<input type="file" class="imagesurl fl" style="border:0px;padding:0px;width:200px;" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
</div>
<div class="tools tool7 " >
<div class="group-value clr">
<span class="fl">坐标X</span><input type="number" class="zbx fl" />
<span class="fl">坐标Y</span><input type="number" class="zby fl" />
</div>
<div class="group-value clr">
<span class="fl">宽度W</span><input type="number" class="kdw fl" />
<span class="fl">高度H</span><input type="number" class="gdh fl" />
</div>
<div class="group-value clr">
<span class="fl">图层层级</span><input type="number" class="tccj fl" placeholder="输入数值,越大越高"/>
</div>
</div>
</div>
</div>
<br/><br/>
<button class="submitx layui-btn">提交</button>
</div>
<script src="../../../js/colorselect.js"></script>
</div>
<script>
var offine={
init:function(){
offine.getInfo();
offine.handle();
},
itemedit:function(){
var ele=$(".huabuitem.act");
$(".tools.act").removeClass("act");
$(".tool"+ele.attr("type")).addClass("act");
for(var i=0;i<$(".tools.act .sjglgroup").length;i++){
var current_=(i+1);
if(typeof(ele.attr("sjgl"+current_))=="undefined"){
$(".tools.act .sjgl").val("");
$(".tools.act .sjgl").next().val("").show();
$(".tools.act .sjgl").parents(".sjglgroup").find("span").find("select").val("/");
break;
}
if(ele.attr("sjgl"+current_)){
if(ele.attr("sjgl"+current_).indexOf("||zdyxkpoiop")!=-1){
//非自定义
if(current_==1){
$(".tools.act .sjgl"+current_).val(ele.attr("sjgl"+current_).split("||zdyxkpoiop")[0]);
}else{
$(".tools.act .sjgl"+current_).val(ele.attr("sjgl"+current_).slice(1).split("||zdyxkpoiop")[0]);
$(".tools.act .sjgl"+current_).parents(".sjglgroup").find("span").find("select").val(ele.attr("sjgl"+current_)[0])
}
$(".tools.act .sjgl"+current_).next().val("").hide();
}else{
//自定义
$(".tools.act .sjgl"+current_).val("");
if(current_==1){
$(".tools.act .sjgl"+current_).next().val(ele.attr("sjgl"+current_));
}else{
$(".tools.act .sjgl"+current_).next().val(ele.attr("sjgl"+current_).slice(1));
$(".tools.act .sjgl"+current_).parents(".sjglgroup").find("span").find("select").val(ele.attr("sjgl"+current_)[0])
}
$(".tools.act .sjgl"+current_).next().show();
}
}else{
$(".tools.act .sjgl"+current_).val("");
$(".tools.act .sjgl"+current_).next().val("").show();
$(".tools.act .sjgl"+current_).parents(".sjglgroup").find("span").find("select").val("/")
}
}
},
getInfo:function(){
$.ajax({
url : '/ajax/getTemplateDetail?t_id='+$("#templateid").val(),
type: 'get',
success: function(resp) {
if (resp.err_code == 0) {
$(".editgo").html(resp.data.template_extend.html);
$("textarea").attr("readonly",true);
}else{
layer.msg(resp.err_msg,{time:2000});
}
},
error: function(err) {
console.log(err)
}
})
},
handle:function(){
//监听画布已有工具
$(document).on("click",".huabuitem[type='5'],.huabuitem[type='3']",function(e){
var self=$(this);
if(!$(this).hasClass("act")){
$(".huabuitem").removeClass("act");
self.addClass("act");
}
offine.itemedit();
})
//监听属性赋值
$(document).on("input propertychange",".tools.act select,.tools.act input",function(){
var ele=$(".huabuitem.act");
var name_=$(this).attr("class").split(" ")[0];
var self=$(this);
var val_=self.val();
switch(name_) {
case "sjgl":
//ele.attr("sjgl1",val_);
var parent_=self.parents(".group-value");
var datatypes="";
for(var i=0;i<parent_.find(".sjglgroup").length;i++){
var elp=parent_.find(".sjgl"+(i+1));
var qz_="";
if(i>0){
qz_=elp.parents(".sjglgroup").find("span select").val();
}
if(elp.val()){
ele.attr("sjgl"+(i+1),qz_+elp.val()+"||zdyxkpoiop");
datatypes+=qz_+"<<<"+elp.val()+">>>";
}else{
var nextval_=elp.next().val();
if(nextval_){
ele.attr("sjgl"+(i+1),qz_+nextval_);
datatypes+=qz_+nextval_;
}else{
ele.attr("sjgl"+(i+1),elp.next().val());
}
}
ele.attr("datatypes",datatypes)
}
break;
default:
break;
}
});
//数据关联联动
$(".sjglbox select").bind('input propertychange', function() {
var val_=$(this).val();
if(!val_){
$(this).next().show()
}else{
$(this).next().hide()
}
})
}
}
$(function(){
offine.init()
})
</script>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment