Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5
This commit is contained in:
zhangds
commit
bdac625ed5
|
|
@ -34,7 +34,7 @@ export default class componentLib extends React.Component {
|
|||
propcomponentName(item){
|
||||
this.props.componentName(item.name);
|
||||
if(item.name){
|
||||
Bus.emit('componentLib',item)
|
||||
Bus.emit('componentLib', {attr:item.name,value:1})
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,23 +26,17 @@ export default class backPicture extends React.Component {
|
|||
this.setState({
|
||||
bgColor: color
|
||||
});
|
||||
Bus.emit('globalColor',color)
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
this.setState({
|
||||
bgColor: color
|
||||
});
|
||||
Bus.emit('globalColor',color)
|
||||
Bus.emit('bgImgConfig',{attr:'bgColor',value:color})
|
||||
|
||||
}
|
||||
//顶部banner
|
||||
onUploadChange(files) {
|
||||
let bgImage='';
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
this.setState({ bgimg: files[0].src })
|
||||
Bus.emit('bgImg', files[0].src)
|
||||
} else {
|
||||
this.setState({ bgimg: '' })
|
||||
Bus.emit('bgImg', '')
|
||||
bgImage=files[0].src;
|
||||
}
|
||||
this.setState({ bgimg: bgImage })
|
||||
Bus.emit('bgImgConfig',{attr:'bgImg',value:bgImage})
|
||||
};
|
||||
|
||||
onUploadError = (type, data) => {
|
||||
|
|
@ -136,7 +130,7 @@ export default class backPicture extends React.Component {
|
|||
<span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
|
||||
<span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.bgColor} onChange={this.handleChange1} />
|
||||
<ColorPicker className="setbgColor" color={this.state.bgColor} onChange={(c) => { this.bgColorFn(c)}} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
|
|
|
|||
|
|
@ -65,9 +65,9 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
}
|
||||
componentWillMount(e) {
|
||||
Bus.addListener('componentLibClose', (prop) => {
|
||||
if (prop == 'bottomBar') {
|
||||
this.setState({ iswitch: false })
|
||||
Bus.addListener('componentLib', (prop) => {
|
||||
if (prop.attr == 'bottomBar') {
|
||||
this.setState({ iswitch: prop.value })
|
||||
}
|
||||
})
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
|
|
|
|||
|
|
@ -18,9 +18,9 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
}
|
||||
componentWillMount(e) {
|
||||
Bus.addListener('componentLibClose', (prop) => {
|
||||
if(prop=='picture'){
|
||||
this.setState({iswitch:false})
|
||||
Bus.addListener('componentLib', (prop) => {
|
||||
if (prop.attr == 'picture') {
|
||||
this.setState({ iswitch: prop.value })
|
||||
}
|
||||
})
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ export default class Searchbar extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
iswitch:true,
|
||||
iswitch:1,
|
||||
shape: 'circular',
|
||||
textAlign: 'center',
|
||||
borderColor: '#FFFAF5',
|
||||
|
|
@ -21,9 +21,10 @@ export default class Searchbar extends React.Component {
|
|||
}
|
||||
componentWillMount(e) {
|
||||
//关闭
|
||||
Bus.addListener('componentLibClose', (prop) => {
|
||||
if(prop=='search'){
|
||||
this.setState({iswitch:false})
|
||||
Bus.addListener('componentLib', (prop) => {
|
||||
console.log(25,prop);
|
||||
if (prop.attr == 'search') {
|
||||
this.setState({ iswitch: prop.value })
|
||||
}
|
||||
})
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
|
|
@ -31,46 +32,13 @@ export default class Searchbar extends React.Component {
|
|||
this.setState({...config.coupon.product_list.search});
|
||||
}
|
||||
}
|
||||
//形状
|
||||
shapeChange(e) {
|
||||
this.setState({ shape: e.target.value })
|
||||
Bus.emit('shape', e.target.value)
|
||||
}
|
||||
//文字
|
||||
textChange(e) {
|
||||
this.setState({ textAlign: e.target.value })
|
||||
Bus.emit('textAlign', e.target.value)
|
||||
}
|
||||
changeBorder = (color) => {
|
||||
this.setState({
|
||||
borderColor: color
|
||||
});
|
||||
Bus.emit('borderColor', color)
|
||||
}
|
||||
changebgColor = (color) => {
|
||||
this.setState({
|
||||
bgColor: color
|
||||
});
|
||||
Bus.emit('searchbgColor', color)
|
||||
}
|
||||
changefontColor = (color) => {
|
||||
this.setState({
|
||||
fontColor: color
|
||||
});
|
||||
Bus.emit('searchfontColor', color)
|
||||
}
|
||||
borderColorFn(cor) {
|
||||
this.setState({ borderColor: cor });
|
||||
Bus.emit('borderColor', cor)
|
||||
}
|
||||
bgColorFn(cor) {
|
||||
this.setState({ bgColor: cor });
|
||||
Bus.emit('searchbgColor', cor)
|
||||
}
|
||||
fontColorFn(cor) {
|
||||
this.setState({ fontColor: cor });
|
||||
Bus.emit('searchfontColor', cor)
|
||||
//形状+颜色+框体颜色+背景颜色+文字颜色
|
||||
changeConfig(attr,value){
|
||||
console.log(36,attr,value);
|
||||
this.setState({ [attr]: value })
|
||||
Bus.emit('searchBarConfig', {attr,value})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
let coupon = oldobj.coupon;
|
||||
|
|
@ -79,6 +47,7 @@ export default class Searchbar extends React.Component {
|
|||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||
}
|
||||
render() {
|
||||
console.log(83,this.state);
|
||||
let { shape, textAlign, borderColor, placeholder,bgColor,fontColor } = this.state;
|
||||
return (
|
||||
<div className="assembly">
|
||||
|
|
@ -89,14 +58,14 @@ export default class Searchbar extends React.Component {
|
|||
<Form ref="form1">
|
||||
<div className="activeTip">
|
||||
<FormItem required={false} labelname="框体样式:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.shapeChange(e) }} value={shape}>
|
||||
<RadioGroup onChange={(e) => { this.changeConfig('shape',e.target.value) }} value={shape}>
|
||||
<RadioButton value={"circular"}>圆形</RadioButton>
|
||||
<RadioButton value={"square"}>方形</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</div>
|
||||
<FormItem required={false} labelname="文字格式:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.textChange(e) }} value={textAlign}>
|
||||
<RadioGroup onChange={(e) => { this.changeConfig('textAlign',e.target.value) }} value={textAlign}>
|
||||
<RadioButton value={"left"}>居左</RadioButton>
|
||||
<RadioButton value={"center"}>居中</RadioButton>
|
||||
<RadioButton value={"right"}>居右</RadioButton>
|
||||
|
|
@ -104,48 +73,46 @@ export default class Searchbar extends React.Component {
|
|||
</FormItem>
|
||||
<FormItem required={false} labelname="框体颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#fff') }}></span>
|
||||
<span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.borderColorFn('#04C160') }}></span>
|
||||
<span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.borderColorFn('#AE99D3') }}></span>
|
||||
<span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.borderColorFn('#FACD6A') }}></span>
|
||||
<span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.borderColorFn('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.changeConfig('borderColor','#ffffff')}}></span>
|
||||
<span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.changeConfig('borderColor','#04C160') }}></span>
|
||||
<span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.changeConfig('borderColor','#AE99D3') }}></span>
|
||||
<span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.changeConfig('borderColor','#FACD6A') }}></span>
|
||||
<span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.changeConfig('borderColor','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={borderColor} onChange={this.changeBorder} />
|
||||
<ColorPicker className="setbgColor" color={borderColor} onChange={c=>{this.changeConfig('borderColor',c)}} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname="背景颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
|
||||
<span className={bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
|
||||
<span className={bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
|
||||
<span className={bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
|
||||
<span className={bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.changeConfig('bgColor','#fff') }}></span>
|
||||
<span className={bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.changeConfig('bgColor','#04C160') }}></span>
|
||||
<span className={bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.changeConfig('bgColor','#AE99D3') }}></span>
|
||||
<span className={bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.changeConfig('bgColor','#FACD6A') }}></span>
|
||||
<span className={bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.changeConfig('bgColor','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={bgColor} onChange={this.changebgColor} />
|
||||
<ColorPicker className="setbgColor" color={bgColor} onChange={c=>{this.changeConfig('bgColor',c)}} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname="文字颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={fontColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontColorFn('#fff') }}></span>
|
||||
<span className={fontColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontColorFn('#04C160') }}></span>
|
||||
<span className={fontColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontColorFn('#AE99D3') }}></span>
|
||||
<span className={fontColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontColorFn('#FACD6A') }}></span>
|
||||
<span className={fontColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontColorFn('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={fontColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.changeConfig('fontColor','#fff') }}></span>
|
||||
<span className={fontColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.changeConfig('fontColor','#04C160') }}></span>
|
||||
<span className={fontColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.changeConfig('fontColor','#AE99D3') }}></span>
|
||||
<span className={fontColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.changeConfig('fontColor','#FACD6A') }}></span>
|
||||
<span className={fontColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.changeConfig('fontColor','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={fontColor} onChange={this.changefontColor} />
|
||||
<ColorPicker className="setbgColor" color={fontColor} onChange={c=>{this.changeConfig('fontColor',c)}} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname="提示文字:" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
this.setState({ placeholder: e })
|
||||
Bus.emit('placeholder', e)
|
||||
this.changeConfig('placeholder', e)
|
||||
}}
|
||||
onClearItem={(e) => {
|
||||
this.setState({ placeholder: '' })
|
||||
Bus.emit('placeholder', '')
|
||||
this.changeConfig('placeholder','')
|
||||
}}
|
||||
value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={9} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ export default class Title extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
switch:true,
|
||||
switch:1,
|
||||
text: '商品列表',
|
||||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
|
|
@ -21,54 +21,28 @@ export default class Title extends React.Component {
|
|||
}
|
||||
}
|
||||
componentWillMount(e) {
|
||||
Bus.addListener('componentLibClose', (prop) => {
|
||||
if(prop=='title'){
|
||||
this.setState({iswitch:false})
|
||||
Bus.addListener('componentLib', (prop) => {
|
||||
if (prop.attr == 'title') {
|
||||
this.setState({ iswitch: prop.value })
|
||||
}
|
||||
})
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if (config && config.coupon && config.coupon.product_list) {
|
||||
let { text, textAlign, fontColor, fontSize } = config.coupon.product_list.title;
|
||||
this.setState({ text, textAlign, fontColor, fontSize });
|
||||
this.setState({...config.coupon.product_list.title});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
//文字格式
|
||||
textAlignChange(e) {
|
||||
this.setState({ textAlign: e.target.value })
|
||||
Bus.emit('titleAlign',e.target.value)
|
||||
}
|
||||
|
||||
|
||||
handleChange1 = (color) => {
|
||||
this.setState({
|
||||
fontColor: color
|
||||
});
|
||||
Bus.emit('fontColor',color)
|
||||
}
|
||||
|
||||
// 字体颜色
|
||||
fontcolor(cor) {
|
||||
this.setState({ fontColor: cor });
|
||||
Bus.emit('fontColor', cor)
|
||||
}
|
||||
fontSizeChange(e) {
|
||||
this.setState({ fontSize: e.target.value })
|
||||
Bus.emit('fontSize', e.target.value)
|
||||
}
|
||||
styleChange(e){
|
||||
this.setState({ comstyle: e.target.value })
|
||||
Bus.emit('comstyle', e.target.value)
|
||||
changeConfig(attr,value){
|
||||
console.log(36,attr,value);
|
||||
this.setState({ [attr]: value })
|
||||
Bus.emit('titleBarConfig', {attr,value})
|
||||
}
|
||||
onUploadChange(files) {
|
||||
let image=''
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
this.setState({ pic: files[0].src })
|
||||
Bus.emit('titlePic', files[0].src)
|
||||
} else {
|
||||
this.setState({ pic: ''})
|
||||
Bus.emit('titlePic','')
|
||||
image=files[0].src;
|
||||
}
|
||||
this.setState({ pic:image})
|
||||
Bus.emit('titleBarConfig', {attr:'pic',value:image})
|
||||
};
|
||||
|
||||
onUploadError = (type, data) => {
|
||||
|
|
@ -80,7 +54,6 @@ export default class Title extends React.Component {
|
|||
};
|
||||
onUpload = (file, report) => {
|
||||
let self = this;
|
||||
console.log('上传头像', file);
|
||||
return new Promise((resolve, reject) => {
|
||||
let path = ""
|
||||
let formdata = new FormData();
|
||||
|
|
@ -141,7 +114,7 @@ export default class Title extends React.Component {
|
|||
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem required={false} labelname="组件样式:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.styleChange(e) }} value={this.state.comstyle}>
|
||||
<RadioGroup onChange={(e) => { this.changeConfig('comstyle',e.target.value) }} value={this.state.comstyle}>
|
||||
<RadioButton value={1}>文字</RadioButton>
|
||||
<RadioButton value={2}>图片</RadioButton>
|
||||
</RadioGroup>
|
||||
|
|
@ -150,17 +123,15 @@ export default class Title extends React.Component {
|
|||
this.state.comstyle==1?<div>
|
||||
<FormItem labelname="标题文字:" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
this.setState({ text: e })
|
||||
Bus.emit('title', e)
|
||||
this.changeConfig('text',e)
|
||||
}}
|
||||
onClearItem={(e) => {
|
||||
this.setState({ text: '' })
|
||||
Bus.emit('title', '')
|
||||
this.changeConfig('text','')
|
||||
}}
|
||||
value={this.state.text} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname="文字格式:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.textAlignChange(e) }} value={this.state.textAlign}>
|
||||
<RadioGroup onChange={(e) => { this.changeConfig('textAlign',e.target.value)}} value={this.state.textAlign}>
|
||||
<RadioButton value={"left"}>居左</RadioButton>
|
||||
<RadioButton value={"center"}>居中</RadioButton>
|
||||
<RadioButton value={"right"}>居右</RadioButton>
|
||||
|
|
@ -168,18 +139,18 @@ export default class Title extends React.Component {
|
|||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.fontColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#fff') }}></span>
|
||||
<span className={this.state.fontColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
||||
<span className={this.state.fontColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
||||
<span className={this.state.fontColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
||||
<span className={this.state.fontColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.fontColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.changeConfig('fontColor','#fff') }}></span>
|
||||
<span className={this.state.fontColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.changeConfig('fontColor','#04C160') }}></span>
|
||||
<span className={this.state.fontColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.changeConfig('fontColor','#AE99D3') }}></span>
|
||||
<span className={this.state.fontColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.changeConfig('fontColor','#FACD6A') }}></span>
|
||||
<span className={this.state.fontColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.changeConfig('fontColor','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.fontColor} onChange={this.handleChange1} />
|
||||
<ColorPicker className="setbgColor" color={this.state.fontColor} onChange={c=>{this.changeConfig('fontColor',c)}} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem required={false} labelname="文字大小:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.fontSizeChange(e) }} value={this.state.fontSize}>
|
||||
<RadioGroup onChange={(e) => { this.changeConfig('fontSize',e.target.value) }} value={this.state.fontSize}>
|
||||
<RadioButton value={"mini"}>A-</RadioButton>
|
||||
<RadioButton value={"standard"}>A</RadioButton>
|
||||
<RadioButton value={"big"}>A+</RadioButton>
|
||||
|
|
|
|||
|
|
@ -30,140 +30,80 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
|
||||
deleteFn() {
|
||||
|
||||
let selectDom = this.state.selectDom;//需删除组件名称
|
||||
|
||||
Sweetalert.confirm({
|
||||
|
||||
title: '确认信息',
|
||||
|
||||
content: <p>确认删除该模块？</p>,
|
||||
|
||||
onConfirm: () => {
|
||||
|
||||
this.setState({ selectDom: '' });
|
||||
|
||||
Bus.emit('componentLibClose', selectDom)
|
||||
|
||||
Bus.emit('componentLib', {attr:selectDom,value:0})
|
||||
},
|
||||
|
||||
onCancel: () => {
|
||||
|
||||
|
||||
|
||||
},
|
||||
|
||||
parentComponent: this
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
let goodsConfig = this.props.goodsdata;
|
||||
console.log(48, goodsConfig);
|
||||
let naVisual = []
|
||||
if (goodsConfig.bottomBar) {
|
||||
naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<div className="goodstemplate_Xcenter" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8' }}>
|
||||
<div className="goodstemplate">
|
||||
<div className="goodstemplate_Xcenter" >
|
||||
<div className="goodstemplate" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8' }}>
|
||||
{
|
||||
|
||||
goodsConfig.search && goodsConfig.search.iswitch ?
|
||||
|
||||
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-', '搜索栏')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div> : null
|
||||
|
||||
}
|
||||
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
|
||||
|
||||
{
|
||||
|
||||
!goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.picture && goodsConfig.picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian', '图片')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={goodsConfig.picture.img} alt="" className="picture" /></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}><div className={goodsConfig.title.textAlign + ' content-title ' + goodsConfig.title.fontSize} style={{ color: goodsConfig.title.fontColor, fontWeight: 'bold' }}>{goodsConfig.title.text}</div></div> : null
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
|
||||
<img src={goodsConfig.title.pic} alt="" className="title-pic" />
|
||||
</div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.title && goodsConfig.title.iswitch && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch && goodsConfig.picture.img ? <div className="parting-line"></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.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'} />
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
|
||||
|
||||
}
|
||||
|
||||
{
|
||||
|
||||
goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
|
||||
|
||||
}
|
||||
{
|
||||
|
||||
goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>
|
||||
{goodsConfig.search ? '立即购买' : '立即兑换'}
|
||||
</button> : null
|
||||
|
||||
}
|
||||
{
|
||||
goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch && naVisual.length > 1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar} /></div> : null
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
|
||||
this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
|
||||
|
||||
<span>{this.state.comName}</span>
|
||||
|
||||
<b className="split">|</b>
|
||||
|
||||
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
|
||||
|
||||
</div> : null
|
||||
|
||||
}
|
||||
</div>
|
||||
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -5,25 +5,25 @@ import React from 'react'
|
|||
import { BlockLoading, Button, Notify, RadioButton, RadioGroup } from 'zent'
|
||||
import { addSystemTemplate, addTheme, handelResponse, putMyTheme, putSystemTemplate, putTheme, uploadImg } from '../../../assets/api.js'
|
||||
import '../../../assets/comm.css'
|
||||
import PreviewEffect from '../previewEffect/main'
|
||||
import CouponGoodsDetailForm from './couponCard/couponDetailconfig'; //优惠券商品详情页
|
||||
import CouponReduceDetailForm from './couponCard/couponReduceDetail'; //优惠券立减金详情页
|
||||
// 优惠券
|
||||
import CouponLandingForm from './couponCard/landPage'; //优惠券落地页表单
|
||||
import CouponComLib from './couponCard/goodsPage/componentLib/main'; //优惠券组件库
|
||||
import CouponGoodsListForm from './couponCard/goodsPage/config/main'; //优惠券商品列表页
|
||||
import DetailsPage from './exchange/detailsPage'; //商品详情form页面
|
||||
import Detailstemplate from './detailstemplate'
|
||||
import Descteplate from './goodsdesc'
|
||||
import GoodsForm from './exchange/goodsPage'; //商品页表单
|
||||
import Goodstemplate from './goodstemplate'
|
||||
import LandingForm from './exchange/landingPage'; //落地页表单
|
||||
import './main.less'
|
||||
import PreviewEffect from '../previewEffect/main'
|
||||
import Detailstemplate from './detailstemplate'
|
||||
import DetailsPage from './exchange/detailsPage'; //商品详情form页面
|
||||
import GoodsForm from './exchange/goodsPage'; //商品页表单
|
||||
import LandingForm from './exchange/landingPage'; //落地页表单
|
||||
import Descteplate from './goodsdesc'
|
||||
import Goodstemplate from './goodstemplate'
|
||||
import Reduce from './reduce'; //商品详情页立减金
|
||||
import ReduceConfig from './reduceConfig'; //商品详情立减金页面
|
||||
import Whitedetails from './whiteList/whitedetails'; //白名单详情页
|
||||
import Whitegoods from './whiteList/whitegoods'; //白名单商品页面
|
||||
import WhiteLand from './whiteList/whiteLand'; //白名单落地页
|
||||
// 优惠券
|
||||
import CouponLandingForm from './couponCard/landPage'; //优惠券落地页表单
|
||||
import CouponGoodsDetailForm from './couponCard/couponDetailconfig'; //优惠券商品详情页
|
||||
import CouponReduceDetailForm from './couponCard/couponReduceDetail'; //优惠券立减金详情页
|
||||
import CouponComLib from './couponCard/goodsPage/componentLib/main'; //优惠券组件库
|
||||
import CouponGoodsListForm from './couponCard/goodsPage/config/main'; //优惠券商品列表页
|
||||
//落地页
|
||||
let model = {
|
||||
title: '落地页标题',
|
||||
|
|
@ -64,18 +64,18 @@ let couponProduct_list = {
|
|||
button_color: '#FACD6A',
|
||||
describe: { type: '', content: '', bg_image: '' },
|
||||
picture: {
|
||||
iswitch: false,
|
||||
iswitch: 0, //0 不显示 1显示
|
||||
img: '',
|
||||
jumpType: '0',//0不跳转 1跳转
|
||||
jumpUrl: ''
|
||||
},
|
||||
backgroundImg: {
|
||||
iswitch: false,
|
||||
iswitch: 0,
|
||||
bgImg: '',
|
||||
bgColor: '#f2f3f4'
|
||||
},
|
||||
search: {
|
||||
iswitch: false,
|
||||
iswitch: 0,
|
||||
shape: 'circular',
|
||||
textAlign: 'center',
|
||||
borderColor: '#FFFAF5',
|
||||
|
|
@ -84,7 +84,7 @@ let couponProduct_list = {
|
|||
placeholder: '请输入商品名称'
|
||||
},
|
||||
title: {
|
||||
iswitch: false,
|
||||
iswitch: 0,
|
||||
text: '商品列表',
|
||||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
|
|
@ -93,11 +93,11 @@ let couponProduct_list = {
|
|||
pic: ''
|
||||
},
|
||||
bottomBar: {
|
||||
iswitch: false,
|
||||
iswitch: 0,
|
||||
navlist: [
|
||||
{
|
||||
id: 1,
|
||||
iswitch: true,
|
||||
iswitch: 1,
|
||||
name: 'index',
|
||||
pic: {
|
||||
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png',
|
||||
|
|
@ -107,7 +107,7 @@ let couponProduct_list = {
|
|||
},
|
||||
{
|
||||
id: 2,
|
||||
iswitch: true,
|
||||
iswitch: 1,
|
||||
name: 'order',
|
||||
pic: {
|
||||
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png',
|
||||
|
|
@ -117,7 +117,7 @@ let couponProduct_list = {
|
|||
},
|
||||
{
|
||||
id: 3,
|
||||
iswitch: true,
|
||||
iswitch: 1,
|
||||
name: 'coupon',
|
||||
pic: {
|
||||
show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png',
|
||||
|
|
@ -139,10 +139,10 @@ export default class edittemplate extends React.Component {
|
|||
systemTitle: '',//控制系统模版标题回显
|
||||
activeshow: true, //控制商品列表页活动说明显示与否
|
||||
loading_visible: false,//保存加载效果
|
||||
componentOfconfig: '',//选择组件库
|
||||
componentOfconfig: '',//自定义基础组件库
|
||||
detailactiveshow: true,
|
||||
pagedisable: false,
|
||||
showType: 3, //兑换码/白名单/立减金
|
||||
showType: 3, //兑换码3/白名单1/优惠券4 优惠券白名单8
|
||||
//落地页
|
||||
model,
|
||||
//商品列表
|
||||
|
|
@ -156,105 +156,41 @@ export default class edittemplate extends React.Component {
|
|||
pageStep: 1,
|
||||
showPage: 1,
|
||||
setStyle: { width: '375px', height: '667px', transform: 'scale(0.75)' },
|
||||
detailType: 1 //详情页1 权益 2-立减金
|
||||
detailType: 1 //详情页1 权益 2立减金
|
||||
}
|
||||
this.canvasImgDom = this.canvasImgDom.bind(this)
|
||||
this.canvasImgDomScr = this.canvasImgDomScr.bind(this)
|
||||
}
|
||||
//获取落地页表单数据
|
||||
getLandingdata(val) {
|
||||
this.setState({ model: val })
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
//开启
|
||||
//开启/关闭自定义组件
|
||||
Bus.addListener('componentLib', (prop) => {
|
||||
let coupongoodsConfig = this.state.product_list
|
||||
coupongoodsConfig[prop.name].iswitch = true
|
||||
console.log(169,prop);
|
||||
coupongoodsConfig[prop.attr].iswitch = prop.value
|
||||
this.setState({ product_list: coupongoodsConfig })
|
||||
})
|
||||
//关闭
|
||||
Bus.addListener('componentLibClose', (prop) => {
|
||||
let coupongoodsConfig = this.state.product_list
|
||||
coupongoodsConfig[prop].iswitch = false
|
||||
this.setState({ product_list: coupongoodsConfig, componentOfconfig: '' })
|
||||
})
|
||||
Bus.addListener('picture', (prop) => {
|
||||
let coupongoodsConfig = this.state.product_list
|
||||
coupongoodsConfig.picture.img = prop
|
||||
this.setState({ product_list: coupongoodsConfig })
|
||||
})
|
||||
//背景图
|
||||
Bus.addListener('bgImg', (prop) => {
|
||||
Bus.addListener('bgImgConfig', (prop) => {
|
||||
let bgImgConfig = this.state.product_list
|
||||
bgImgConfig.backgroundImg.bgImg = prop
|
||||
bgImgConfig.backgroundImg[prop.attr] = prop.value;
|
||||
this.setState({ product_list: bgImgConfig })
|
||||
})
|
||||
Bus.addListener('globalColor', (prop) => {
|
||||
let bgImgConfig = this.state.product_list
|
||||
bgImgConfig.backgroundImg.bgColor = prop
|
||||
this.setState({ product_list: bgImgConfig })
|
||||
})
|
||||
|
||||
Bus.addListener('shape', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.shape = prop
|
||||
//搜索栏
|
||||
Bus.addListener('searchBarConfig', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search[prop.attr] = prop.value
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
Bus.addListener('textAlign', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.textAlign = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
Bus.addListener('placeholder', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.placeholder = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
Bus.addListener('borderColor', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.borderColor = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
Bus.addListener('searchbgColor', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.bgColor = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
Bus.addListener('searchfontColor', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.fontColor = prop
|
||||
this.setState({ product_list: searchConfig })
|
||||
})
|
||||
})
|
||||
//标题设置
|
||||
Bus.addListener('comstyle', (prop) => {
|
||||
Bus.addListener('titleBarConfig', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.comstyle = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
Bus.addListener('titlePic', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.pic = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
|
||||
Bus.addListener('title', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.text = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
Bus.addListener('titleAlign', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.textAlign = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
Bus.addListener('fontColor', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.fontColor = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
Bus.addListener('fontSize', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.fontSize = prop
|
||||
titleConfig.title[prop.attr] = prop.value
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
//底部栏
|
||||
|
|
@ -585,6 +521,10 @@ export default class edittemplate extends React.Component {
|
|||
})
|
||||
}
|
||||
}
|
||||
//获取落地页表单数据
|
||||
getLandingdata(val) {
|
||||
this.setState({ model: val })
|
||||
}
|
||||
//获取落地页数据
|
||||
getlandConfig(c) {
|
||||
console.log(578);
|
||||
|
|
|
|||
Loading…
Reference in New Issue