Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5
This commit is contained in:
zhangds
commit
d33c244727
|
|
@ -28,21 +28,13 @@ export default class couponLandpage extends React.Component {
|
|||
let data = config.coupon.land;
|
||||
this.setState({ model: data ,mouldType});
|
||||
}
|
||||
handleChange = (color) => {
|
||||
controlColor = (attr,color) => {
|
||||
let model1 = this.state.model;
|
||||
model1.bg_color = color;
|
||||
model1[attr] = color;
|
||||
this.setState({
|
||||
model: model1
|
||||
});
|
||||
this.props.landbgcolor(color);
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
let model1 = this.state.model;
|
||||
model1.font_color = color;
|
||||
this.setState({
|
||||
model: model1
|
||||
});
|
||||
this.props.landftcolor(color);
|
||||
this.props.landConfig({attr,value:color});
|
||||
}
|
||||
onactivityChange(e) {
|
||||
let active = this.state.model;
|
||||
|
|
@ -51,7 +43,6 @@ export default class couponLandpage extends React.Component {
|
|||
active.describe.bg_image = "";
|
||||
}
|
||||
this.setState({ model: active })
|
||||
|
||||
this.props.setbanner(this.state.model);
|
||||
}
|
||||
hasItemFn(c) {
|
||||
|
|
@ -63,49 +54,27 @@ export default class couponLandpage extends React.Component {
|
|||
this.props.setbanner(this.state.model);
|
||||
}
|
||||
}
|
||||
//上传顶部banner
|
||||
onUploadChange(files) {
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
model.top_image = files[0].src;
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
} else {
|
||||
let model = this.state.model;
|
||||
model.top_image = '';
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
}
|
||||
};
|
||||
|
||||
//上传输入框
|
||||
onUploadChange1(files,type) {
|
||||
//上传输入框/输入框
|
||||
onUploadChange(files,type) {
|
||||
let model = this.state.model;
|
||||
model[type] = '';
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
model[type] = files[0].src;
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
} else {
|
||||
let model = this.state.model;
|
||||
model[type] = '';
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
}
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
};
|
||||
|
||||
//上传使用说明
|
||||
onUploadChange2(files) {
|
||||
let model = this.state.model;
|
||||
model.describe.bg_image = "";
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
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);
|
||||
}
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
|
||||
};
|
||||
onUploadError = (type, data) => {
|
||||
|
|
@ -115,12 +84,6 @@ export default class couponLandpage extends React.Component {
|
|||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
sortFn(c) {
|
||||
let model1 = this.state.model;
|
||||
model1.sort = c;
|
||||
this.setState({ model: model1 });
|
||||
this.props.setbanner(model1);
|
||||
}
|
||||
getEditext(c) {
|
||||
let model1 = this.state.model;
|
||||
model1.describe.content = c;
|
||||
|
|
@ -128,21 +91,6 @@ export default class couponLandpage extends React.Component {
|
|||
this.props.setbanner(model1);
|
||||
}
|
||||
|
||||
|
||||
// 字体颜色
|
||||
fontcolor(cor) {
|
||||
let model1 = this.state.model;
|
||||
model1.font_color = cor;
|
||||
this.setState({ model: model1 });
|
||||
this.props.landftcolor(cor);
|
||||
}
|
||||
// 背景颜色
|
||||
bgcolor(cor) {
|
||||
let model1 = this.state.model;
|
||||
model1.bg_color = cor;
|
||||
this.setState({ model: model1 });
|
||||
this.props.landbgcolor(cor);
|
||||
}
|
||||
onUpload = (file, report) => {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -191,18 +139,13 @@ export default class couponLandpage extends React.Component {
|
|||
|
||||
//组件将要销毁阶段
|
||||
componentWillUnmount() {
|
||||
console.log(2,'jieshu');
|
||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
let coupon= oldobj.coupon
|
||||
coupon.land = this.state.model;
|
||||
oldobj.coupon = coupon;
|
||||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
console.log(203,this.props);
|
||||
return (
|
||||
<div>
|
||||
<div className='control page-title-control'>
|
||||
|
|
@ -220,7 +163,7 @@ export default class couponLandpage extends React.Component {
|
|||
let model2 = this.state.model;
|
||||
model2.title = e;
|
||||
this.setState({ model: model2 })
|
||||
this.props.settitle(e)
|
||||
this.props.landConfig({attr:'title',value:e});
|
||||
}}
|
||||
onClearItem={(_e) => {
|
||||
let model2 = this.state.model;
|
||||
|
|
@ -232,30 +175,30 @@ export default class couponLandpage extends React.Component {
|
|||
}
|
||||
|
||||
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
|
||||
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
|
||||
<FormItem labelname="背景颜色:" labelwidth="80px">
|
||||
<div className="colorItembg dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.bgcolor('#EEEEEE') }}></span>
|
||||
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('bg_color','#ffffff') }}></span>
|
||||
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.controlColor('bg_color','#EEEEEE') }}></span>
|
||||
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('bg_color','#000000') }}></span>
|
||||
<div className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={c=>this.controlColor('bg_color',c)} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<FormItem labelname="字体颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('font_color','#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.controlColor('font_color','#04C160') }}></span>
|
||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.controlColor('font_color','#AE99D3') }}></span>
|
||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.controlColor('font_color','#FACD6A') }}></span>
|
||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('font_color','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={c=>this.controlColor('font_color',c)} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
|
||||
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
|
||||
<FormItem labelname="顶部banner:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -263,7 +206,7 @@ export default class couponLandpage extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onChange={(e) => { this.this.onUploadChange(e,'top_image') }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
|
|
@ -278,7 +221,7 @@ export default class couponLandpage extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange1(e,'middle_image') }}
|
||||
onChange={(e) => { this.onUploadChange(e,'middle_image') }}
|
||||
defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
|
|
@ -292,21 +235,21 @@ export default class couponLandpage extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange1(e,'white_image') }}
|
||||
onChange={(e) => { this.onUploadChange(e,'white_image') }}
|
||||
defaultFileList={this.state.model.white_image ? [{ 'src': this.state.model.white_image }] : null}
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</FormItem>
|
||||
}
|
||||
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
|
||||
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
|
||||
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
{
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -322,7 +265,7 @@ export default class couponLandpage extends React.Component {
|
|||
</FormItem> : null
|
||||
}
|
||||
{
|
||||
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import { Button, Select, ImageUpload, ColorPicker, NumberInput } from 'zent';
|
||||
import { Select, ImageUpload, ColorPicker, NumberInput } from 'zent';
|
||||
import "../main.less"
|
||||
import "@/assets/comm.css"
|
||||
import "../goodstemplate.less"
|
||||
|
|
@ -34,41 +34,29 @@ export default class edittemplate extends React.Component {
|
|||
let moudTyle = sessionStorage.getItem('mouldType');
|
||||
if (moudTyle && moudTyle == 0) {
|
||||
this.setState({ isSystemModel: true });
|
||||
getThemeType().then(res => {
|
||||
handelResponse(res, (req, msg) => {
|
||||
let typeListSource = res.data.map(it => {
|
||||
return { key: it.id, text: it.name }
|
||||
});
|
||||
self.setState({ mouldWay: typeListSource });
|
||||
}, (err) => {
|
||||
})
|
||||
}).catch(err => {
|
||||
});
|
||||
}
|
||||
if (config && config.exchangeList && config.exchangeList.land) {
|
||||
let data = config.exchangeList.land;
|
||||
this.setState({ model: data });
|
||||
} else {
|
||||
|
||||
}
|
||||
getThemeType().then(res => {
|
||||
handelResponse(res, (req, msg) => {
|
||||
let typeListSource = res.data.map(it => {
|
||||
return { key: it.id, text: it.name }
|
||||
});
|
||||
self.setState({ mouldWay: typeListSource });
|
||||
}, (err) => {
|
||||
|
||||
})
|
||||
}).catch(err => {
|
||||
});
|
||||
}
|
||||
handleChange = (color) => {
|
||||
controlColor = (attr,color) => {
|
||||
let model1 = this.state.model;
|
||||
model1.bg_color = color;
|
||||
model1[attr] = color;
|
||||
this.setState({
|
||||
model: model1
|
||||
});
|
||||
this.props.landbgcolor(color);
|
||||
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
let model1 = this.state.model;
|
||||
model1.font_color = color;
|
||||
this.setState({
|
||||
model: model1
|
||||
});
|
||||
this.props.landftcolor(color);
|
||||
this.props.landConfig({attr,value:color});
|
||||
}
|
||||
onactivityChange(e) {
|
||||
let active = this.state.model;
|
||||
|
|
@ -77,7 +65,6 @@ export default class edittemplate extends React.Component {
|
|||
active.describe.bg_image = "";
|
||||
}
|
||||
this.setState({ model: active })
|
||||
|
||||
this.props.setbanner(this.state.model);
|
||||
}
|
||||
hasItemFn(c) {
|
||||
|
|
@ -90,7 +77,6 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
}
|
||||
onmouldChange(c) {
|
||||
|
||||
let model1 = this.state.model;
|
||||
model1.type_id = c;
|
||||
this.setState({ model: model1 });
|
||||
|
|
@ -98,17 +84,13 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
//上传顶部banner
|
||||
onUploadChange(files) {
|
||||
let model = this.state.model;
|
||||
model.top_image = '';
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
model.top_image = files[0].src;
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
} else {
|
||||
let model = this.state.model;
|
||||
model.top_image = '';
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
}
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
};
|
||||
|
||||
//上传输入框
|
||||
|
|
@ -160,22 +142,6 @@ export default class edittemplate extends React.Component {
|
|||
this.setState({ model: model1 });
|
||||
this.props.setbanner(model1);
|
||||
}
|
||||
|
||||
|
||||
// 字体颜色
|
||||
fontcolor(cor) {
|
||||
let model1 = this.state.model;
|
||||
model1.font_color = cor;
|
||||
this.setState({ model: model1 });
|
||||
this.props.landftcolor(cor);
|
||||
}
|
||||
// 背景颜色
|
||||
bgcolor(cor) {
|
||||
let model1 = this.state.model;
|
||||
model1.bg_color = cor;
|
||||
this.setState({ model: model1 });
|
||||
this.props.landbgcolor(cor);
|
||||
}
|
||||
onUpload = (file, report) => {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -246,12 +212,12 @@ export default class edittemplate extends React.Component {
|
|||
<div style={{ fontWeight: 'bold',marginTop:'16px' }}>基础设置</div>
|
||||
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
|
||||
<FormItem labelname="落地页标题:" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = e;
|
||||
this.setState({ model: model2 })
|
||||
this.props.settitle(e)
|
||||
this.props.landConfig({attr:'title',value:e});
|
||||
}}
|
||||
onClearItem={(e) => {
|
||||
let model2 = this.state.model;
|
||||
|
|
@ -262,42 +228,42 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem>
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<FormItem labelname="权重" required={false} prop="sort" id="sort" labelwidth="100px">
|
||||
<FormItem labelname="权重" required={false} labelwidth="100px">
|
||||
<NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} />
|
||||
</FormItem>) : null
|
||||
}
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<FormItem labelname="模板分类" labelwidth="100px" prop="scope" id="scope">
|
||||
<FormItem labelname="模板分类" labelwidth="100px" >
|
||||
<Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} />
|
||||
</FormItem>
|
||||
) : null
|
||||
}
|
||||
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
|
||||
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
|
||||
<FormItem labelname="背景颜色:" labelwidth="80px">
|
||||
<div className="colorItembg dfleac">
|
||||
<span className="cicle" style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.bgcolor('#EEEEEE') }}></span>
|
||||
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('bg_color','#ffffff') }}></span>
|
||||
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.controlColor('bg_color','#EEEEEE') }}></span>
|
||||
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('bg_color','#000000') }}></span>
|
||||
<div className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={c=>this.controlColor('bg_color',c)} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<FormItem labelname="字体颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('font_color','#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.controlColor('font_color','#04C160') }}></span>
|
||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.controlColor('font_color','#AE99D3') }}></span>
|
||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.controlColor('font_color','#FACD6A') }}></span>
|
||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('font_color','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={c=>this.controlColor('font_color',c)} />
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
|
||||
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
|
||||
<FormItem labelname="顶部banner:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -311,7 +277,7 @@ export default class edittemplate extends React.Component {
|
|||
onError={this.onUploadError}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
|
||||
<FormItem labelname="输入框:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -325,14 +291,14 @@ export default class edittemplate extends React.Component {
|
|||
onError={this.onUploadError}
|
||||
/>
|
||||
</FormItem>
|
||||
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
|
||||
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
|
||||
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
{
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -348,7 +314,7 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem> : null
|
||||
}
|
||||
{
|
||||
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
|
|||
|
|
@ -583,22 +583,13 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
}
|
||||
//获取落地页数据
|
||||
getlandbgcolor(c) {
|
||||
getlandConfig(c) {
|
||||
console.log(578);
|
||||
let landConfig = this.state.model
|
||||
landConfig.bg_color = c
|
||||
this.setState({ model: landConfig })
|
||||
}
|
||||
getlandftcolor(c) {
|
||||
let landConfig = this.state.model
|
||||
landConfig.font_color = c
|
||||
landConfig[c.attr]=c.value;
|
||||
this.setState({ model: landConfig })
|
||||
}
|
||||
|
||||
getTitle(c) {
|
||||
let landConfig = this.state.model
|
||||
landConfig.title = c
|
||||
this.setState({ model: landConfig })
|
||||
}
|
||||
//获取商品列表页数据
|
||||
getGoodsbanner(c) {
|
||||
let goodsConfig = this.state.product_list
|
||||
|
|
@ -1174,9 +1165,7 @@ export default class edittemplate extends React.Component {
|
|||
{this.state.showType == 3 ? (
|
||||
this.state.activeNavStatus == 1 ? (
|
||||
<LandingForm
|
||||
settitle={(c) => this.getTitle(c)}
|
||||
landbgcolor={(c) => this.getlandbgcolor(c)}
|
||||
landftcolor={(c) => this.getlandftcolor(c)}
|
||||
landConfig={(c) => this.getlandConfig(c)}
|
||||
setbanner={(e) => this.getLandingdata(e)}
|
||||
/>
|
||||
) : this.state.activeNavStatus == 2 ? (
|
||||
|
|
@ -1207,10 +1196,8 @@ export default class edittemplate extends React.Component {
|
|||
) : this.state.showType == 1 ? this.state.activeNavStatus == 1 ? (
|
||||
<WhiteLand
|
||||
landTitle={this.state.model.title}
|
||||
settitle={(c) => this.getTitle(c)}
|
||||
mouldType={this.state.mouldType}
|
||||
landbgcolor={(c) => this.getlandbgcolor(c)}
|
||||
landftcolor={(c) => this.getlandftcolor(c)}
|
||||
landConfig={(c) => this.getlandConfig(c)}
|
||||
setbanner={(e) => this.getLandingdata(e)}
|
||||
/>
|
||||
) : this.state.activeNavStatus == 2 ? (
|
||||
|
|
@ -1239,9 +1226,7 @@ export default class edittemplate extends React.Component {
|
|||
/>
|
||||
) : <ReduceConfig /> : this.state.activeNavStatus == 1 ? (//优惠券
|
||||
<CouponLandingForm
|
||||
settitle={(c) => this.getTitle(c)}
|
||||
landbgcolor={(c) => this.getlandbgcolor(c)}
|
||||
landftcolor={(c) => this.getlandftcolor(c)}
|
||||
landConfig={(c) => this.getlandConfig(c)}
|
||||
setbanner={(e) => this.getLandingdata(e)}
|
||||
couponType={this.state.showType}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -12,10 +12,6 @@ export default class edittemplate extends React.Component {
|
|||
constructor(props) {
|
||||
super(props)
|
||||
this.state = {
|
||||
isSystemModel: false,
|
||||
mouldWay: [{ key: 0, text: '节日' }, { key: 1, text: '通用' }, { key: 2, text: '银行' }
|
||||
, { key: 3, text: '运动' }, { key: 4, text: '汽车' }
|
||||
],
|
||||
model: {
|
||||
title: "白名单标题",
|
||||
top_image: "",
|
||||
|
|
@ -23,56 +19,23 @@ export default class edittemplate extends React.Component {
|
|||
describe: { type: "", content: "", bg_image: '' },
|
||||
bg_color: "#EEEEEE",
|
||||
font_color: "#000000",
|
||||
sort: 1,
|
||||
type_id: { key: 1, text: '通用' }
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
componentWillMount(e) {
|
||||
let self = this;
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
let moudTyle = sessionStorage.getItem('mouldType');
|
||||
|
||||
if (config && config.whiteList && config.whiteList.land) {
|
||||
let data = config.whiteList.land;
|
||||
this.setState({ model: data });
|
||||
}
|
||||
if (moudTyle && moudTyle == 0) {
|
||||
this.setState({ isSystemModel: true });
|
||||
let data = config.whiteList.land;
|
||||
data.title = this.props.landTitle;
|
||||
this.setState({ model: data });
|
||||
}
|
||||
|
||||
getThemeType().then(res => {
|
||||
handelResponse(res, (req, msg) => {
|
||||
let typeListSource = res.data.map(it => {
|
||||
return { key: it.id, text: it.name }
|
||||
});
|
||||
self.setState({ mouldWay: typeListSource });
|
||||
}, (err) => {
|
||||
|
||||
})
|
||||
}).catch(err => {
|
||||
});
|
||||
}
|
||||
handleChange = (color) => {
|
||||
controlColor = (attr,color) => {
|
||||
let model1 = this.state.model;
|
||||
model1.bg_color = color;
|
||||
model1[attr] = color;
|
||||
this.setState({
|
||||
model: model1
|
||||
});
|
||||
this.props.landbgcolor(color);
|
||||
|
||||
}
|
||||
handleChange1 = (color) => {
|
||||
let model1 = this.state.model;
|
||||
model1.font_color = color;
|
||||
this.setState({
|
||||
model: model1
|
||||
});
|
||||
this.props.landftcolor(color);
|
||||
this.props.landConfig({attr,value:color});
|
||||
}
|
||||
onactivityChange(e) {
|
||||
let active = this.state.model;
|
||||
|
|
@ -81,7 +44,6 @@ export default class edittemplate extends React.Component {
|
|||
active.describe.bg_image = "";
|
||||
}
|
||||
this.setState({ model: active })
|
||||
|
||||
this.props.setbanner(this.state.model);
|
||||
}
|
||||
hasItemFn(c) {
|
||||
|
|
@ -93,56 +55,25 @@ export default class edittemplate extends React.Component {
|
|||
this.props.setbanner(this.state.model);
|
||||
}
|
||||
}
|
||||
onmouldChange(c) {
|
||||
|
||||
let model1 = this.state.model;
|
||||
model1.type_id = c;
|
||||
this.setState({ model: model1 });
|
||||
this.props.setbanner(model1);
|
||||
}
|
||||
//上传顶部banner
|
||||
onUploadChange(files) {
|
||||
//上传顶部banner+输入框
|
||||
onUploadChange(files,type) {
|
||||
let model = this.state.model;
|
||||
model[type] = '';
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
model.top_image = files[0].src;
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
} else {
|
||||
let model = this.state.model;
|
||||
model.top_image = '';
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
model[type] = files[0].src;
|
||||
}
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
};
|
||||
|
||||
//上传输入框
|
||||
onUploadChange1(files) {
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
model.middle_image = files[0].src;
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
} else {
|
||||
let model = this.state.model;
|
||||
model.middle_image = '';
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
}
|
||||
};
|
||||
|
||||
//上传使用说明
|
||||
onUploadChange2(files) {
|
||||
let model = this.state.model;
|
||||
model.describe.bg_image = "";
|
||||
if (files.length > 0 && files[0].status == "success") {
|
||||
let model = this.state.model;
|
||||
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);
|
||||
}
|
||||
this.setState({ model: model })
|
||||
this.props.setbanner(model);
|
||||
|
||||
};
|
||||
onUploadError = (type, data) => {
|
||||
|
|
@ -152,34 +83,12 @@ export default class edittemplate extends React.Component {
|
|||
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
|
||||
}
|
||||
};
|
||||
sortFn(c) {
|
||||
let model1 = this.state.model;
|
||||
model1.sort = c;
|
||||
this.setState({ model: model1 });
|
||||
this.props.setbanner(model1);
|
||||
}
|
||||
getEditext(c) {
|
||||
let model1 = this.state.model;
|
||||
model1.describe.content = c;
|
||||
this.setState({ model: model1 });
|
||||
this.props.setbanner(model1);
|
||||
}
|
||||
|
||||
|
||||
// 字体颜色
|
||||
fontcolor(cor) {
|
||||
let model1 = this.state.model;
|
||||
model1.font_color = cor;
|
||||
this.setState({ model: model1 });
|
||||
this.props.landftcolor(cor);
|
||||
}
|
||||
// 背景颜色
|
||||
bgcolor(cor) {
|
||||
let model1 = this.state.model;
|
||||
model1.bg_color = cor;
|
||||
this.setState({ model: model1 });
|
||||
this.props.landbgcolor(cor);
|
||||
}
|
||||
onUpload = (file, report) => {
|
||||
let self = this;
|
||||
return new Promise((resolve, reject) => {
|
||||
|
|
@ -232,23 +141,19 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||
}
|
||||
|
||||
|
||||
|
||||
render() {
|
||||
console.log('白名单', this.state);
|
||||
return (
|
||||
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<div style={{ fontWeight: 'bold',marginTop:'16px' }}>基础设置</div>
|
||||
|
||||
<Form model={this.state.model} ref="form1">
|
||||
{
|
||||
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
|
||||
<FormItem labelname="落地页标题:" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = e;
|
||||
this.setState({ model: model2 })
|
||||
this.props.settitle(e)
|
||||
this.props.landConfig({attr:'title',value:e});
|
||||
}}
|
||||
disabled={this.props.mouldType == 0}
|
||||
onClearItem={(e) => {
|
||||
|
|
@ -260,25 +165,25 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem>
|
||||
}
|
||||
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
|
||||
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
|
||||
<FormItem labelname="背景颜色:" labelwidth="80px">
|
||||
<div className="colorItembg dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.bgcolor('#EEEEEE') }}></span>
|
||||
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('bg_color','#ffffff') }}></span>
|
||||
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.controlColor('bg_color','#EEEEEE') }}></span>
|
||||
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('bg_color','#000000') }}></span>
|
||||
<div className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
|
||||
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={c=>this.controlColor('bg_color',c)}/>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<FormItem labelname="字体颜色:" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.controlColor('font_color','#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.controlColor('font_color','#04C160') }}></span>
|
||||
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.controlColor('font_color','#AE99D3') }}></span>
|
||||
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.controlColor('font_color','#FACD6A') }}></span>
|
||||
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('font_color','#FE7962') }}></span>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={c=>this.controlColor('font_color',c)} />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
|
@ -286,7 +191,7 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem>
|
||||
|
||||
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
|
||||
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
|
||||
<FormItem labelname="顶部banner:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -294,7 +199,7 @@ export default class edittemplate extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onChange={(e) => { this.onUploadChange(e,'top_image') }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
|
|
@ -303,7 +208,7 @@ export default class edittemplate extends React.Component {
|
|||
|
||||
</FormItem>
|
||||
|
||||
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
|
||||
<FormItem labelname="输入框:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -312,7 +217,7 @@ export default class edittemplate extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange1(e) }}
|
||||
onChange={(e) => { this.onUploadChange(e,'middle_image') }}
|
||||
defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
|
|
@ -320,14 +225,14 @@ export default class edittemplate extends React.Component {
|
|||
/>
|
||||
|
||||
</FormItem>
|
||||
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" labelwidth="100px">
|
||||
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
|
||||
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
|
||||
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
{
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -344,7 +249,7 @@ export default class edittemplate extends React.Component {
|
|||
</FormItem> : null
|
||||
}
|
||||
{
|
||||
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import React from "react";
|
||||
import "../../../assets/comm.css";
|
||||
import BottomBarView from "../edittemplate/couponCard/couponViewConfig/searchBar"; //底部栏
|
||||
import BottomBarView from "../edittemplate/couponCard/couponViewConfig/bottomBar"; //底部栏
|
||||
import SearchBarView from "../edittemplate/couponCard/couponViewConfig/searchBar"; //商品详情搜索栏
|
||||
import Descteplate from "../edittemplate/goodsdesc.js";
|
||||
import "../edittemplate/goodstemplate";
|
||||
|
|
@ -39,7 +39,7 @@ export default class preview extends React.Component {
|
|||
let propsData = this.props.data;
|
||||
let goodsConfig = propsData.product_list;
|
||||
let naVisual = [];
|
||||
if (goodsConfig && goodsConfig.bottomBar) {
|
||||
if (goodsConfig&&goodsConfig.bottomBar) {
|
||||
naVisual = goodsConfig.bottomBar.navlist.filter((item) => item.iswitch);
|
||||
}
|
||||
return (
|
||||
|
|
|
|||
Loading…
Reference in New Issue