编辑器模板贯通,提测版
This commit is contained in:
parent
5bf065661c
commit
8cd647daca
|
@ -188,6 +188,6 @@ resize: none;
|
||||||
left: 0;
|
left: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
background-color: rgba(0,0,0,0.5);
|
background-color: rgba(0,0,0,0.5);
|
||||||
z-index: 66666;
|
z-index: 6;
|
||||||
|
|
||||||
}
|
}
|
|
@ -16,7 +16,7 @@ export default class edittemplate extends React.Component{
|
||||||
this.state={
|
this.state={
|
||||||
model:{
|
model:{
|
||||||
top_image: "",
|
top_image: "",
|
||||||
list: 1,
|
list: "2",
|
||||||
font_color:"#ffffff",
|
font_color:"#ffffff",
|
||||||
button_color: "#FACD6A",
|
button_color: "#FACD6A",
|
||||||
describe: {type : "", content : "",bg_image:''}
|
describe: {type : "", content : "",bg_image:''}
|
||||||
|
@ -215,14 +215,14 @@ export default class edittemplate extends React.Component{
|
||||||
<div style={{marginBottom:'24px'}}>
|
<div style={{marginBottom:'24px'}}>
|
||||||
<FormItem labelname="" prop="list" labelwidth="0px" required={false}>
|
<FormItem labelname="" prop="list" labelwidth="0px" required={false}>
|
||||||
<RadioGroup onChange={(e)=>{this.onListChange(e)} } value={this.state.model.list}>
|
<RadioGroup onChange={(e)=>{this.onListChange(e)} } value={this.state.model.list}>
|
||||||
<RadioButton value={"1"}>轮播</RadioButton>
|
<RadioButton value={"2"}>轮播</RadioButton>
|
||||||
<RadioButton value={"2"}>列表</RadioButton>
|
<RadioButton value={"1"}>列表</RadioButton>
|
||||||
<RadioButton value={"3"}>矩阵</RadioButton>
|
<RadioButton value={"3"}>矩阵</RadioButton>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
</div>
|
</div>
|
||||||
{
|
{
|
||||||
this.state.model.list==1?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
this.state.model.list==2?<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
||||||
<div className="colorItembg dfleac" >
|
<div className="colorItembg dfleac" >
|
||||||
<span className={this.state.model.font_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
<span className={this.state.model.font_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.bgcolor('#ffffff')}}></span>
|
||||||
<span className={this.state.model.font_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
|
<span className={this.state.model.font_color=='#000000'?"activecicle cicle cicle2":"cicle cicle2"} onClick={()=>{this.bgcolor('#000000')}}></span>
|
||||||
|
@ -232,7 +232,7 @@ export default class edittemplate extends React.Component{
|
||||||
</FormItem>:null
|
</FormItem>:null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
this.state.model.list==1?<FormItem labelname="按钮颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
this.state.model.list==2?<FormItem labelname="按钮颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
||||||
<div className="colorItemfont dfleac">
|
<div className="colorItemfont dfleac">
|
||||||
<span className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
<span className={this.state.model.button_color=='#ffffff'?"cicle activecicle":"cicle" } style={{border:'1px solid #f1f2f3'}} onClick={()=>{this.fontcolor('#ffffff')}}></span>
|
||||||
<span className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"cicle cicle6"} onClick={()=>{this.fontcolor('#04C160')}}></span>
|
<span className={this.state.model.button_color=='#04C160'?"activecicle cicle cicle6":"cicle cicle6"} onClick={()=>{this.fontcolor('#04C160')}}></span>
|
||||||
|
|
|
@ -18,10 +18,10 @@ export default class edittemplate extends React.Component{
|
||||||
!this.props.goodsdata.top_image?<img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'}/>:<img className="topbanner" src={this.props.goodsdata.top_image}/>
|
!this.props.goodsdata.top_image?<img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'}/>:<img className="topbanner" src={this.props.goodsdata.top_image}/>
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
this.props.goodsdata.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.props.goodsdata.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
|
this.props.goodsdata.list==2?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.props.goodsdata.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
this.props.goodsdata.list==1? <button className={this.props.goodsdata.describe.type==1&&this.props.goodsdata.describe.bg_image||this.props.goodsdata.describe.type==3?"exchageBtn bottomBtn":"exchageBtn"} style={{color:this.props.goodsdata.font_color,background:this.props.goodsdata.button_color}}>立即兑换</button>:null
|
this.props.goodsdata.list==2? <button className={this.props.goodsdata.describe.type==1&&this.props.goodsdata.describe.bg_image||this.props.goodsdata.describe.type==3?"exchageBtn bottomBtn":"exchageBtn"} style={{color:this.props.goodsdata.font_color,background:this.props.goodsdata.button_color}}>立即兑换</button>:null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
this.props.goodsdata.describe.type==1? <img src={this.props.goodsdata.describe.bg_image} alt="" className={this.props.goodsdata.list==1&&this.props.goodsdata.describe.bg_image?'bottomTip bottomTipview':'bottomTip'}/>:this.props.goodsdata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.goodsdata.describe.content}}></div>:null
|
this.props.goodsdata.describe.type==1? <img src={this.props.goodsdata.describe.bg_image} alt="" className={this.props.goodsdata.list==1&&this.props.goodsdata.describe.bg_image?'bottomTip bottomTipview':'bottomTip'}/>:this.props.goodsdata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.goodsdata.describe.content}}></div>:null
|
||||||
|
|
|
@ -42,10 +42,10 @@
|
||||||
}
|
}
|
||||||
.susactive_tip{
|
.susactive_tip{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 10px;
|
top: 40px;
|
||||||
right: 10px;
|
right: 0;
|
||||||
width: 50px;
|
width: 30px;
|
||||||
height: 50px;
|
// height: 70px;s
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.bottomactiveTip{
|
.bottomactiveTip{
|
||||||
|
|
|
@ -142,7 +142,12 @@ export default class edittemplate extends React.Component{
|
||||||
model.describe.bg_image= files[0].src;
|
model.describe.bg_image= files[0].src;
|
||||||
this.setState({model:model})
|
this.setState({model:model})
|
||||||
this.props.setbanner(model);
|
this.props.setbanner(model);
|
||||||
}
|
}else{
|
||||||
|
let model = this.state.model;
|
||||||
|
model.describe.bg_image= "";
|
||||||
|
this.setState({model:model})
|
||||||
|
this.props.setbanner(model);
|
||||||
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
onUploadError = (type, data) => {
|
onUploadError = (type, data) => {
|
||||||
|
|
|
@ -41,7 +41,7 @@ export default class edittemplate extends React.Component{
|
||||||
//商品列表
|
//商品列表
|
||||||
product_list:{
|
product_list:{
|
||||||
top_image: "",
|
top_image: "",
|
||||||
list: 1,
|
list:"2",
|
||||||
font_color:"#ffffff",
|
font_color:"#ffffff",
|
||||||
button_color: "#FACD6A",
|
button_color: "#FACD6A",
|
||||||
describe: {type : "", content : "",bg_image:''},
|
describe: {type : "", content : "",bg_image:''},
|
||||||
|
@ -165,7 +165,6 @@ getLandingdata(val){
|
||||||
putSystemTemplate(myInfoData.id,formdata).then((res)=>{
|
putSystemTemplate(myInfoData.id,formdata).then((res)=>{
|
||||||
handelResponse(res,(req,msg)=>{
|
handelResponse(res,(req,msg)=>{
|
||||||
Notify.success("保存成功")
|
Notify.success("保存成功")
|
||||||
|
|
||||||
this.props.history.push('/home/system/my-mould');
|
this.props.history.push('/home/system/my-mould');
|
||||||
},(err)=>{
|
},(err)=>{
|
||||||
Notify.error(err)
|
Notify.error(err)
|
||||||
|
@ -195,6 +194,7 @@ getLandingdata(val){
|
||||||
self.props.history.push('/home/myexchangetemplate');
|
self.props.history.push('/home/myexchangetemplate');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
},(err)=>{
|
},(err)=>{
|
||||||
|
self.setState({loading_visible:false});
|
||||||
Notify.error(err)
|
Notify.error(err)
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
@ -207,6 +207,7 @@ getLandingdata(val){
|
||||||
self.props.history.push('/home/myexchangetemplate');
|
self.props.history.push('/home/myexchangetemplate');
|
||||||
}, 2000);
|
}, 2000);
|
||||||
},(err)=>{
|
},(err)=>{
|
||||||
|
self.setState({loading_visible:false});
|
||||||
Notify.error(err)
|
Notify.error(err)
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
@ -214,10 +215,12 @@ getLandingdata(val){
|
||||||
}else if(mouldType==2){//落地页编辑
|
}else if(mouldType==2){//落地页编辑
|
||||||
putTheme(myInfoData.id,formdata).then((res)=>{
|
putTheme(myInfoData.id,formdata).then((res)=>{
|
||||||
handelResponse(res,(req,msg)=>{
|
handelResponse(res,(req,msg)=>{
|
||||||
|
self.setState({loading_visible:false});
|
||||||
Notify.success(msg)
|
Notify.success(msg)
|
||||||
|
|
||||||
self.props.history.push('/home/exchangepage');
|
self.props.history.push('/home/exchangepage');
|
||||||
},(err)=>{
|
},(err)=>{
|
||||||
|
self.setState({loading_visible:false});
|
||||||
Notify.error(err)
|
Notify.error(err)
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
@ -525,10 +528,10 @@ getLandingdata(val){
|
||||||
}
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
this.state.product_list.list==1?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.product_list.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
|
this.state.product_list.list==2?<img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'}/>:this.state.product_list.list==3?<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'}/>:<img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'}/>
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
this.state.product_list.list==1? <button className={this.state.product_list.describe&&this.state.product_list.describe.bg_image||this.state.product_list.describe.type==3?"exchageBtn bottom_exchageBtn":"exchageBtn"} style={{color:this.state.product_list.font_color,background:this.state.product_list.button_color}}>立即兑换</button>:null
|
this.state.product_list.list==2? <button className={this.state.product_list.describe&&this.state.product_list.describe.bg_image||this.state.product_list.describe.type==3?"exchageBtn bottom_exchageBtn":"exchageBtn"} style={{color:this.state.product_list.font_color,background:this.state.product_list.button_color}}>立即兑换</button>:null
|
||||||
}
|
}
|
||||||
{
|
{
|
||||||
this.state.product_list.describe.type==1? <img className="bottom_Img" src={this.state.product_list.describe.bg_image} alt="" />:this.state.product_list.describe.type==3?<div className="bottom_activeTip" dangerouslySetInnerHTML = {{ __html:this.state.product_list.describe.content}}></div>:null
|
this.state.product_list.describe.type==1? <img className="bottom_Img" src={this.state.product_list.describe.bg_image} alt="" />:this.state.product_list.describe.type==3?<div className="bottom_activeTip" dangerouslySetInnerHTML = {{ __html:this.state.product_list.describe.content}}></div>:null
|
||||||
|
@ -649,7 +652,7 @@ getLandingdata(val){
|
||||||
{
|
{
|
||||||
this.state.preview_visible ? (
|
this.state.preview_visible ? (
|
||||||
<div>
|
<div>
|
||||||
<div className="modal"></div>
|
<div className="modal model44"></div>
|
||||||
<div className="preview-box">
|
<div className="preview-box">
|
||||||
<div className="preview-top-bar">
|
<div className="preview-top-bar">
|
||||||
<div className="preview-top-back" ></div>
|
<div className="preview-top-back" ></div>
|
||||||
|
@ -663,7 +666,7 @@ getLandingdata(val){
|
||||||
{
|
{
|
||||||
this.state.loading_visible?(
|
this.state.loading_visible?(
|
||||||
<div className="loadingShow">
|
<div className="loadingShow">
|
||||||
<div className="modal"></div>
|
<div className="modal model44"></div>
|
||||||
<BlockLoading loading icon="circle" iconSize={64} iconText="保存中" />
|
<BlockLoading loading icon="circle" iconSize={64} iconText="保存中" />
|
||||||
</div>
|
</div>
|
||||||
):null
|
):null
|
||||||
|
|
|
@ -1194,13 +1194,13 @@
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
top:-4px;
|
top:-3px;
|
||||||
left: -4px;
|
left: -3px;
|
||||||
width: 28px;
|
width: 22px;
|
||||||
height: 28px;
|
height: 22px;
|
||||||
border-radius: 28px;
|
border-radius: 22px;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border:1px solid #fff;
|
// border:1px solid #fff;
|
||||||
|
|
||||||
}
|
}
|
||||||
.cicle{
|
.cicle{
|
||||||
|
@ -1213,6 +1213,10 @@
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
z-index: 55;
|
z-index: 55;
|
||||||
|
&.activecicle{
|
||||||
|
width:18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
&.activecicle::before{
|
&.activecicle::before{
|
||||||
border:1px solid #cbe1fd;
|
border:1px solid #cbe1fd;
|
||||||
}
|
}
|
||||||
|
@ -1497,7 +1501,7 @@
|
||||||
}
|
}
|
||||||
.editbg{
|
.editbg{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 300px;
|
min-height: 30px;
|
||||||
position: relative;
|
position: relative;
|
||||||
.bgimg{
|
.bgimg{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -1507,8 +1511,8 @@
|
||||||
}
|
}
|
||||||
div{
|
div{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding:0 24px;
|
padding:0 25px;
|
||||||
line-height: 1.35rem;
|
line-height: 1.5rem;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
top: 70px;
|
top: 70px;
|
||||||
|
@ -1625,10 +1629,10 @@ div{
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.susactive_Tip{
|
.susactive_Tip{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.3vw;
|
top: 14px;
|
||||||
right: 0.3vw;
|
right: 0;
|
||||||
width: 24px;
|
width: 14px;
|
||||||
height: 24px;
|
// height: 24px;
|
||||||
}
|
}
|
||||||
.topBanner{
|
.topBanner{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
@ -1700,10 +1704,10 @@ div{
|
||||||
}
|
}
|
||||||
.susactive_Tip{
|
.susactive_Tip{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0.2vw;
|
top:14px;
|
||||||
right: 0.2vw;
|
right: 0;
|
||||||
width: 24px;
|
width: 14px;
|
||||||
height: 24px;
|
// height: 24px;
|
||||||
}
|
}
|
||||||
.preBtn{
|
.preBtn{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
@ -1763,4 +1767,7 @@ div{
|
||||||
top: 30%;
|
top: 30%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
z-index: 99999;
|
z-index: 99999;
|
||||||
|
}
|
||||||
|
.model44{
|
||||||
|
z-index: 88888;
|
||||||
}
|
}
|
|
@ -12,9 +12,13 @@ export default class wangeditor extends React.Component{
|
||||||
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
|
let config=JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||||
let self=this;
|
let self=this;
|
||||||
const editor = new Editor('#wangeditorDom')
|
const editor = new Editor('#wangeditorDom')
|
||||||
this.setState({editor});
|
this.setState({editor});
|
||||||
let editDom=editor.$textElem.elems[0];
|
editor.config.colors = [
|
||||||
|
'#880000',
|
||||||
|
'#800080',
|
||||||
|
'#ff0000'
|
||||||
|
];
|
||||||
|
editor.config.pasteText = true;
|
||||||
// 设置编辑区域高度为 500px
|
// 设置编辑区域高度为 500px
|
||||||
editor.config.height =200
|
editor.config.height =200
|
||||||
editor.config.menus = [
|
editor.config.menus = [
|
||||||
|
@ -25,13 +29,22 @@ export default class wangeditor extends React.Component{
|
||||||
'link',
|
'link',
|
||||||
'justify',
|
'justify',
|
||||||
]
|
]
|
||||||
|
|
||||||
// 注意,先配置 height ,再执行 create()
|
// 注意,先配置 height ,再执行 create()
|
||||||
editor.config.onchange = function (newHtml) {
|
editor.config.onchange = function (newHtml) {
|
||||||
console.log(30,newHtml);
|
console.log(35,newHtml);
|
||||||
|
|
||||||
|
var text = editor.txt.text();
|
||||||
|
console.log(38,text);
|
||||||
|
// if(text.length>10){
|
||||||
|
// console.log('结束',text.length);
|
||||||
|
// return;
|
||||||
|
// }
|
||||||
self.setState({editorHtml:newHtml});
|
self.setState({editorHtml:newHtml});
|
||||||
self.props.setEdittext(newHtml);
|
self.props.setEdittext(newHtml);
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
editor.create()
|
editor.create()
|
||||||
//列表悬浮富文本
|
//列表悬浮富文本
|
||||||
let editext="";
|
let editext="";
|
||||||
|
|
|
@ -82,8 +82,8 @@
|
||||||
.textTip_land{
|
.textTip_land{
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
padding:60px 24px 24px;
|
padding:70px 25px 0;
|
||||||
line-height: 1.4rem;
|
line-height: 1.5rem;
|
||||||
font-size: 13px;
|
font-size: 13px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue