HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

编辑器模板贯通，提测版

This commit is contained in:
red-deng-deng 2022-01-13 10:51:08 +08:00
parent 5bf065661c
commit 8cd647daca
9 changed files with 71 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.css
View File

@ -188,6 +188,6 @@ resize: none;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.5);
z-index: 66666;
z-index: 6;
}

10
src/pages/exchangepage/edittemplate/goodsPage.js
View File

@ -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>

4
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -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

8
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

@ -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{

7
src/pages/exchangepage/edittemplate/landingPage.js
View File

@ -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) => {

15
src/pages/exchangepage/edittemplate/main.js
View File

@ -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

41
src/pages/exchangepage/edittemplate/main.less
View File

@ -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;
}

23
src/pages/exchangepage/edittemplate/wangeditorCom.js
View File

@ -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="";

4
src/pages/exchangepage/template/preview.less
View File

@ -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;
}