编辑器模板贯通,提测版
This commit is contained in:
parent
5bf065661c
commit
8cd647daca
|
@ -188,6 +188,6 @@ resize: none;
|
|||
left: 0;
|
||||
top: 0;
|
||||
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={
|
||||
model:{
|
||||
top_image: "",
|
||||
list: 1,
|
||||
list: "2",
|
||||
font_color:"#ffffff",
|
||||
button_color: "#FACD6A",
|
||||
describe: {type : "", content : "",bg_image:''}
|
||||
|
@ -215,14 +215,14 @@ export default class edittemplate extends React.Component{
|
|||
<div style={{marginBottom:'24px'}}>
|
||||
<FormItem labelname="" prop="list" labelwidth="0px" required={false}>
|
||||
<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>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</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" >
|
||||
<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>
|
||||
|
@ -232,7 +232,7 @@ export default class edittemplate extends React.Component{
|
|||
</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">
|
||||
<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>
|
||||
|
|
|
@ -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.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
|
||||
|
|
|
@ -42,10 +42,10 @@
|
|||
}
|
||||
.susactive_tip{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 40px;
|
||||
right: 0;
|
||||
width: 30px;
|
||||
// height: 70px;s
|
||||
cursor: pointer;
|
||||
}
|
||||
.bottomactiveTip{
|
||||
|
|
|
@ -142,7 +142,12 @@ export default class edittemplate extends React.Component{
|
|||
model.describe.bg_image= files[0].src;
|
||||
this.setState({model: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) => {
|
||||
|
|
|
@ -41,7 +41,7 @@ export default class edittemplate extends React.Component{
|
|||
//商品列表
|
||||
product_list:{
|
||||
top_image: "",
|
||||
list: 1,
|
||||
list:"2",
|
||||
font_color:"#ffffff",
|
||||
button_color: "#FACD6A",
|
||||
describe: {type : "", content : "",bg_image:''},
|
||||
|
@ -165,7 +165,6 @@ getLandingdata(val){
|
|||
putSystemTemplate(myInfoData.id,formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
Notify.success("保存成功")
|
||||
|
||||
this.props.history.push('/home/system/my-mould');
|
||||
},(err)=>{
|
||||
Notify.error(err)
|
||||
|
@ -195,6 +194,7 @@ getLandingdata(val){
|
|||
self.props.history.push('/home/myexchangetemplate');
|
||||
}, 2000);
|
||||
},(err)=>{
|
||||
self.setState({loading_visible:false});
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
|
@ -207,6 +207,7 @@ getLandingdata(val){
|
|||
self.props.history.push('/home/myexchangetemplate');
|
||||
}, 2000);
|
||||
},(err)=>{
|
||||
self.setState({loading_visible:false});
|
||||
Notify.error(err)
|
||||
})
|
||||
});
|
||||
|
@ -214,10 +215,12 @@ getLandingdata(val){
|
|||
}else if(mouldType==2){//落地页编辑
|
||||
putTheme(myInfoData.id,formdata).then((res)=>{
|
||||
handelResponse(res,(req,msg)=>{
|
||||
self.setState({loading_visible:false});
|
||||
Notify.success(msg)
|
||||
|
||||
self.props.history.push('/home/exchangepage');
|
||||
},(err)=>{
|
||||
self.setState({loading_visible:false});
|
||||
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
|
||||
|
@ -649,7 +652,7 @@ getLandingdata(val){
|
|||
{
|
||||
this.state.preview_visible ? (
|
||||
<div>
|
||||
<div className="modal"></div>
|
||||
<div className="modal model44"></div>
|
||||
<div className="preview-box">
|
||||
<div className="preview-top-bar">
|
||||
<div className="preview-top-back" ></div>
|
||||
|
@ -663,7 +666,7 @@ getLandingdata(val){
|
|||
{
|
||||
this.state.loading_visible?(
|
||||
<div className="loadingShow">
|
||||
<div className="modal"></div>
|
||||
<div className="modal model44"></div>
|
||||
<BlockLoading loading icon="circle" iconSize={64} iconText="保存中" />
|
||||
</div>
|
||||
):null
|
||||
|
|
|
@ -1194,13 +1194,13 @@
|
|||
content: '';
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top:-4px;
|
||||
left: -4px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 28px;
|
||||
top:-3px;
|
||||
left: -3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 22px;
|
||||
background: transparent;
|
||||
border:1px solid #fff;
|
||||
// border:1px solid #fff;
|
||||
|
||||
}
|
||||
.cicle{
|
||||
|
@ -1213,6 +1213,10 @@
|
|||
margin-left: 8px;
|
||||
cursor: pointer;
|
||||
z-index: 55;
|
||||
&.activecicle{
|
||||
width:18px;
|
||||
height: 18px;
|
||||
}
|
||||
&.activecicle::before{
|
||||
border:1px solid #cbe1fd;
|
||||
}
|
||||
|
@ -1497,7 +1501,7 @@
|
|||
}
|
||||
.editbg{
|
||||
width: 100%;
|
||||
min-height: 300px;
|
||||
min-height: 30px;
|
||||
position: relative;
|
||||
.bgimg{
|
||||
position: absolute;
|
||||
|
@ -1507,8 +1511,8 @@
|
|||
}
|
||||
div{
|
||||
width: 100%;
|
||||
padding:0 24px;
|
||||
line-height: 1.35rem;
|
||||
padding:0 25px;
|
||||
line-height: 1.5rem;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
top: 70px;
|
||||
|
@ -1625,10 +1629,10 @@ div{
|
|||
height: 100%;
|
||||
.susactive_Tip{
|
||||
position: absolute;
|
||||
top: 0.3vw;
|
||||
right: 0.3vw;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 14px;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
// height: 24px;
|
||||
}
|
||||
.topBanner{
|
||||
width: 100%;
|
||||
|
@ -1700,10 +1704,10 @@ div{
|
|||
}
|
||||
.susactive_Tip{
|
||||
position: absolute;
|
||||
top: 0.2vw;
|
||||
right: 0.2vw;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top:14px;
|
||||
right: 0;
|
||||
width: 14px;
|
||||
// height: 24px;
|
||||
}
|
||||
.preBtn{
|
||||
position: absolute;
|
||||
|
@ -1763,4 +1767,7 @@ div{
|
|||
top: 30%;
|
||||
left: 50%;
|
||||
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 self=this;
|
||||
const editor = new Editor('#wangeditorDom')
|
||||
this.setState({editor});
|
||||
let editDom=editor.$textElem.elems[0];
|
||||
|
||||
this.setState({editor});
|
||||
editor.config.colors = [
|
||||
'#880000',
|
||||
'#800080',
|
||||
'#ff0000'
|
||||
];
|
||||
editor.config.pasteText = true;
|
||||
// 设置编辑区域高度为 500px
|
||||
editor.config.height =200
|
||||
editor.config.menus = [
|
||||
|
@ -25,13 +29,22 @@ export default class wangeditor extends React.Component{
|
|||
'link',
|
||||
'justify',
|
||||
]
|
||||
|
||||
// 注意,先配置 height ,再执行 create()
|
||||
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.props.setEdittext(newHtml);
|
||||
|
||||
|
||||
};
|
||||
|
||||
editor.create()
|
||||
//列表悬浮富文本
|
||||
let editext="";
|
||||
|
|
|
@ -82,8 +82,8 @@
|
|||
.textTip_land{
|
||||
position: absolute;
|
||||
top: 0;
|
||||
padding:60px 24px 24px;
|
||||
line-height: 1.4rem;
|
||||
padding:70px 25px 0;
|
||||
line-height: 1.5rem;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue