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

Merge branch 'couponV1.5' of https://codeup.aliyun.com/5f9118049cffa29cfdd3be1c/marketing/frontend into couponV1.5

This commit is contained in:
zhangds 2022-09-21 16:04:01 +08:00
parent 992f82c540 d3078b55dd
commit d33c244727
5 changed files with 119 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/pages/exchangepage/edittemplate/couponCard/landPage.js
View File

@ -28,21 +28,13 @@ export default class couponLandpage extends React.Component {
let data = config.coupon.land; let data = config.coupon.land;
this.setState({ model: data ,mouldType}); this.setState({ model: data ,mouldType});
} }
handleChange = (color) => { controlColor = (attr,color) => {
let model1 = this.state.model; let model1 = this.state.model;
model1.bg_color = color; model1[attr] = color;
this.setState({ this.setState({
model: model1 model: model1
}); });
this.props.landbgcolor(color); this.props.landConfig({attr,value:color});
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
this.props.landftcolor(color);
} }
onactivityChange(e) { onactivityChange(e) {
let active = this.state.model; let active = this.state.model;
@ -51,7 +43,6 @@ export default class couponLandpage extends React.Component {
active.describe.bg_image = ""; active.describe.bg_image = "";
} }
this.setState({ model: active }) this.setState({ model: active })
this.props.setbanner(this.state.model); this.props.setbanner(this.state.model);
} }
hasItemFn(c) { hasItemFn(c) {
@ -63,49 +54,27 @@ export default class couponLandpage extends React.Component {
this.props.setbanner(this.state.model); 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") { if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model[type] = files[0].src; 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) { onUploadChange2(files) {
let model = this.state.model;
model.describe.bg_image = "";
if (files.length > 0 && files[0].status == "success") { if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.describe.bg_image = files[0].src; 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) => { onUploadError = (type, data) => {
@ -115,12 +84,6 @@ export default class couponLandpage extends React.Component {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
} }
}; };
sortFn(c) {
let model1 = this.state.model;
model1.sort = c;
this.setState({ model: model1 });
this.props.setbanner(model1);
}
getEditext(c) { getEditext(c) {
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.content = c; model1.describe.content = c;
@ -128,21 +91,6 @@ export default class couponLandpage extends React.Component {
this.props.setbanner(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) => { onUpload = (file, report) => {
let self = this; let self = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -191,18 +139,13 @@ export default class couponLandpage extends React.Component {
//组件将要销毁阶段 //组件将要销毁阶段
componentWillUnmount() { componentWillUnmount() {
console.log(2,'jieshu');
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
let coupon= oldobj.coupon let coupon= oldobj.coupon
coupon.land = this.state.model; coupon.land = this.state.model;
oldobj.coupon = coupon; oldobj.coupon = coupon;
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
} }
render() { render() {
console.log(203,this.props);
return ( return (
<div> <div>
<div className='control page-title-control'> <div className='control page-title-control'>
@ -220,7 +163,7 @@ export default class couponLandpage extends React.Component {
let model2 = this.state.model; let model2 = this.state.model;
model2.title = e; model2.title = e;
this.setState({ model: model2 }) this.setState({ model: model2 })
this.props.settitle(e) this.props.landConfig({attr:'title',value:e});
}} }}
onClearItem={(_e) => { onClearItem={(_e) => {
let model2 = this.state.model; 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> <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"> <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 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.bgcolor('#EEEEEE') }}></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.bgcolor('#000000') }}></span> <span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('bg_color','#000000') }}></span>
<div className="selfset" > <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>
</div> </div>
</FormItem> </FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItemfont dfleac"> <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 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.fontcolor('#04C160') }}></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.fontcolor('#AE99D3') }}></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.fontcolor('#FACD6A') }}></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.fontcolor('#FE7962') }}></span> <span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('font_color','#FE7962') }}></span>
<div className="selfset"> <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>
</div> </div>
</FormItem> </FormItem>
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="顶部banner:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -263,7 +206,7 @@ export default class couponLandpage extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }} onChange={(e) => { this.this.onUploadChange(e,'top_image') }}
onUpload={this.onUpload} onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError} onError={this.onUploadError}
@ -278,7 +221,7 @@ export default class couponLandpage extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" 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} defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
onUpload={this.onUpload} onUpload={this.onUpload}
onError={this.onUploadError} onError={this.onUploadError}
@ -292,21 +235,21 @@ export default class couponLandpage extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" 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} defaultFileList={this.state.model.white_image ? [{ 'src': this.state.model.white_image }] : null}
onUpload={this.onUpload} onUpload={this.onUpload}
onError={this.onUploadError} onError={this.onUploadError}
/> />
</FormItem> </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}> <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton> <RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton> <RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -322,7 +265,7 @@ export default class couponLandpage extends React.Component {
</FormItem> : null </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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}

112
src/pages/exchangepage/edittemplate/exchange/landingPage.js
View File

@ -1,5 +1,5 @@
import React from 'react'; import React from 'react';
import { Button, Select, ImageUpload, ColorPicker, NumberInput } from 'zent'; import { Select, ImageUpload, ColorPicker, NumberInput } from 'zent';
import "../main.less" import "../main.less"
import "@/assets/comm.css" import "@/assets/comm.css"
import "../goodstemplate.less" import "../goodstemplate.less"
@ -34,41 +34,29 @@ export default class edittemplate extends React.Component {
let moudTyle = sessionStorage.getItem('mouldType'); let moudTyle = sessionStorage.getItem('mouldType');
if (moudTyle && moudTyle == 0) { if (moudTyle && moudTyle == 0) {
this.setState({ isSystemModel: true }); 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) { if (config && config.exchangeList && config.exchangeList.land) {
let data = config.exchangeList.land; let data = config.exchangeList.land;
this.setState({ model: data }); 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; let model1 = this.state.model;
model1.bg_color = color; model1[attr] = color;
this.setState({ this.setState({
model: model1 model: model1
}); });
this.props.landbgcolor(color); this.props.landConfig({attr,value:color});
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
this.props.landftcolor(color);
} }
onactivityChange(e) { onactivityChange(e) {
let active = this.state.model; let active = this.state.model;
@ -77,7 +65,6 @@ export default class edittemplate extends React.Component {
active.describe.bg_image = ""; active.describe.bg_image = "";
} }
this.setState({ model: active }) this.setState({ model: active })
this.props.setbanner(this.state.model); this.props.setbanner(this.state.model);
} }
hasItemFn(c) { hasItemFn(c) {
@ -90,7 +77,6 @@ export default class edittemplate extends React.Component {
} }
} }
onmouldChange(c) { onmouldChange(c) {
let model1 = this.state.model; let model1 = this.state.model;
model1.type_id = c; model1.type_id = c;
this.setState({ model: model1 }); this.setState({ model: model1 });
@ -98,17 +84,13 @@ export default class edittemplate extends React.Component {
} }
//上传顶部banner //上传顶部banner
onUploadChange(files) { onUploadChange(files) {
let model = this.state.model;
model.top_image = '';
if (files.length > 0 && files[0].status == "success") { if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.top_image = files[0].src; 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.setState({ model: model1 });
this.props.setbanner(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) => { onUpload = (file, report) => {
let self = this; let self = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -246,12 +212,12 @@ export default class edittemplate extends React.Component {
<div style={{ fontWeight: 'bold',marginTop:'16px' }}>基础设置</div> <div style={{ fontWeight: 'bold',marginTop:'16px' }}>基础设置</div>
<Form model={this.state.model} ref="form1"> <Form model={this.state.model} ref="form1">
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px"> <FormItem labelname="落地页标题:" labelwidth="100px">
<Ipt onChange={(e) => { <Ipt onChange={(e) => {
let model2 = this.state.model; let model2 = this.state.model;
model2.title = e; model2.title = e;
this.setState({ model: model2 }) this.setState({ model: model2 })
this.props.settitle(e) this.props.landConfig({attr:'title',value:e});
}} }}
onClearItem={(e) => { onClearItem={(e) => {
let model2 = this.state.model; let model2 = this.state.model;
@ -262,42 +228,42 @@ export default class edittemplate extends React.Component {
</FormItem> </FormItem>
{ {
this.state.isSystemModel ? ( 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} /> <NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} />
</FormItem>) : null </FormItem>) : null
} }
{ {
this.state.isSystemModel ? ( 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} /> <Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} />
</FormItem> </FormItem>
) : null ) : null
} }
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div> <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"> <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 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.bgcolor('#EEEEEE') }}></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.bgcolor('#000000') }}></span> <span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('bg_color','#000000') }}></span>
<div className="selfset" > <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>
</div> </div>
</FormItem> </FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItemfont dfleac"> <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 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.fontcolor('#04C160') }}></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.fontcolor('#AE99D3') }}></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.fontcolor('#FACD6A') }}></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.fontcolor('#FE7962') }}></span> <span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('font_color','#FE7962') }}></span>
<div className="selfset"> <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>
</div> </div>
</FormItem> </FormItem>
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="顶部banner:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -311,7 +277,7 @@ export default class edittemplate extends React.Component {
onError={this.onUploadError} onError={this.onUploadError}
/> />
</FormItem> </FormItem>
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px"> <FormItem labelname="输入框:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -325,14 +291,14 @@ export default class edittemplate extends React.Component {
onError={this.onUploadError} onError={this.onUploadError}
/> />
</FormItem> </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}> <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton> <RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton> <RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -348,7 +314,7 @@ export default class edittemplate extends React.Component {
</FormItem> : null </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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}

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

@ -583,22 +583,13 @@ export default class edittemplate extends React.Component {
} }
} }
//获取落地页数据 //获取落地页数据
getlandbgcolor(c) { getlandConfig(c) {
console.log(578);
let landConfig = this.state.model let landConfig = this.state.model
landConfig.bg_color = c landConfig[c.attr]=c.value;
this.setState({ model: landConfig })
}
getlandftcolor(c) {
let landConfig = this.state.model
landConfig.font_color = c
this.setState({ model: landConfig }) this.setState({ model: landConfig })
} }
getTitle(c) {
let landConfig = this.state.model
landConfig.title = c
this.setState({ model: landConfig })
}
//获取商品列表页数据 //获取商品列表页数据
getGoodsbanner(c) { getGoodsbanner(c) {
let goodsConfig = this.state.product_list let goodsConfig = this.state.product_list
@ -1174,9 +1165,7 @@ export default class edittemplate extends React.Component {
{this.state.showType == 3 ? ( {this.state.showType == 3 ? (
this.state.activeNavStatus == 1 ? ( this.state.activeNavStatus == 1 ? (
<LandingForm <LandingForm
settitle={(c) => this.getTitle(c)} landConfig={(c) => this.getlandConfig(c)}
landbgcolor={(c) => this.getlandbgcolor(c)}
landftcolor={(c) => this.getlandftcolor(c)}
setbanner={(e) => this.getLandingdata(e)} setbanner={(e) => this.getLandingdata(e)}
/> />
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
@ -1207,10 +1196,8 @@ export default class edittemplate extends React.Component {
) : this.state.showType == 1 ? this.state.activeNavStatus == 1 ? ( ) : this.state.showType == 1 ? this.state.activeNavStatus == 1 ? (
<WhiteLand <WhiteLand
landTitle={this.state.model.title} landTitle={this.state.model.title}
settitle={(c) => this.getTitle(c)}
mouldType={this.state.mouldType} mouldType={this.state.mouldType}
landbgcolor={(c) => this.getlandbgcolor(c)} landConfig={(c) => this.getlandConfig(c)}
landftcolor={(c) => this.getlandftcolor(c)}
setbanner={(e) => this.getLandingdata(e)} setbanner={(e) => this.getLandingdata(e)}
/> />
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
@ -1239,9 +1226,7 @@ export default class edittemplate extends React.Component {
/> />
) : <ReduceConfig /> : this.state.activeNavStatus == 1 ? (//优惠券 ) : <ReduceConfig /> : this.state.activeNavStatus == 1 ? (//优惠券
<CouponLandingForm <CouponLandingForm
settitle={(c) => this.getTitle(c)} landConfig={(c) => this.getlandConfig(c)}
landbgcolor={(c) => this.getlandbgcolor(c)}
landftcolor={(c) => this.getlandftcolor(c)}
setbanner={(e) => this.getLandingdata(e)} setbanner={(e) => this.getLandingdata(e)}
couponType={this.state.showType} couponType={this.state.showType}
/> />

165
src/pages/exchangepage/edittemplate/whiteList/whiteLand.js
View File

@ -12,10 +12,6 @@ export default class edittemplate extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
isSystemModel: false,
mouldWay: [{ key: 0, text: '节日' }, { key: 1, text: '通用' }, { key: 2, text: '银行' }
, { key: 3, text: '运动' }, { key: 4, text: '汽车' }
],
model: { model: {
title: "白名单标题", title: "白名单标题",
top_image: "", top_image: "",
@ -23,56 +19,23 @@ export default class edittemplate extends React.Component {
describe: { type: "", content: "", bg_image: '' }, describe: { type: "", content: "", bg_image: '' },
bg_color: "#EEEEEE", bg_color: "#EEEEEE",
font_color: "#000000", font_color: "#000000",
sort: 1,
type_id: { key: 1, text: '通用' }
}, },
} }
} }
componentWillMount(e) { componentWillMount(e) {
let self = this;
let config = JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
let moudTyle = sessionStorage.getItem('mouldType');
if (config && config.whiteList && config.whiteList.land) { if (config && config.whiteList && config.whiteList.land) {
let data = config.whiteList.land; let data = config.whiteList.land;
this.setState({ model: data }); 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; let model1 = this.state.model;
model1.bg_color = color; model1[attr] = color;
this.setState({ this.setState({
model: model1 model: model1
}); });
this.props.landbgcolor(color); this.props.landConfig({attr,value:color});
}
handleChange1 = (color) => {
let model1 = this.state.model;
model1.font_color = color;
this.setState({
model: model1
});
this.props.landftcolor(color);
} }
onactivityChange(e) { onactivityChange(e) {
let active = this.state.model; let active = this.state.model;
@ -81,7 +44,6 @@ export default class edittemplate extends React.Component {
active.describe.bg_image = ""; active.describe.bg_image = "";
} }
this.setState({ model: active }) this.setState({ model: active })
this.props.setbanner(this.state.model); this.props.setbanner(this.state.model);
} }
hasItemFn(c) { hasItemFn(c) {
@ -93,56 +55,25 @@ export default class edittemplate extends React.Component {
this.props.setbanner(this.state.model); this.props.setbanner(this.state.model);
} }
} }
onmouldChange(c) { //上传顶部banner+输入框
onUploadChange(files,type) {
let model1 = this.state.model; let model = this.state.model;
model1.type_id = c; model[type] = '';
this.setState({ model: model1 });
this.props.setbanner(model1);
}
//上传顶部banner
onUploadChange(files) {
if (files.length > 0 && files[0].status == "success") { if (files.length > 0 && files[0].status == "success") {
let model = this.state.model; model[type] = files[0].src;
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);
}; };
//上传输入框
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) { onUploadChange2(files) {
let model = this.state.model;
model.describe.bg_image = "";
if (files.length > 0 && files[0].status == "success") { if (files.length > 0 && files[0].status == "success") {
let model = this.state.model;
model.describe.bg_image = files[0].src; 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) => { onUploadError = (type, data) => {
@ -152,34 +83,12 @@ export default class edittemplate extends React.Component {
Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
} }
}; };
sortFn(c) {
let model1 = this.state.model;
model1.sort = c;
this.setState({ model: model1 });
this.props.setbanner(model1);
}
getEditext(c) { getEditext(c) {
let model1 = this.state.model; let model1 = this.state.model;
model1.describe.content = c; model1.describe.content = c;
this.setState({ model: model1 }); this.setState({ model: model1 });
this.props.setbanner(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) => { onUpload = (file, report) => {
let self = this; let self = this;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
@ -232,23 +141,19 @@ export default class edittemplate extends React.Component {
} }
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
} }
render() { render() {
console.log('白名单', this.state);
return ( return (
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}> <div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
<div style={{ fontWeight: 'bold',marginTop:'16px' }}>基础设置</div> <div style={{ fontWeight: 'bold',marginTop:'16px' }}>基础设置</div>
<Form model={this.state.model} ref="form1"> <Form model={this.state.model} ref="form1">
{ {
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px"> <FormItem labelname="落地页标题:" labelwidth="100px">
<Ipt onChange={(e) => { <Ipt onChange={(e) => {
let model2 = this.state.model; let model2 = this.state.model;
model2.title = e; model2.title = e;
this.setState({ model: model2 }) this.setState({ model: model2 })
this.props.settitle(e) this.props.landConfig({attr:'title',value:e});
}} }}
disabled={this.props.mouldType == 0} disabled={this.props.mouldType == 0}
onClearItem={(e) => { onClearItem={(e) => {
@ -260,25 +165,25 @@ export default class edittemplate extends React.Component {
</FormItem> </FormItem>
} }
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div> <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"> <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 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.bgcolor('#EEEEEE') }}></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.bgcolor('#000000') }}></span> <span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.controlColor('bg_color','#000000') }}></span>
<div className="selfset" > <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>
</div> </div>
</FormItem> </FormItem>
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <FormItem labelname="字体颜色:" labelwidth="80px">
<div className="colorItemfont dfleac"> <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 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.fontcolor('#04C160') }}></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.fontcolor('#AE99D3') }}></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.fontcolor('#FACD6A') }}></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.fontcolor('#FE7962') }}></span> <span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.controlColor('font_color','#FE7962') }}></span>
<div className="selfset"> <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>
</div> </div>
@ -286,7 +191,7 @@ export default class edittemplate extends React.Component {
</FormItem> </FormItem>
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px"> <FormItem labelname="顶部banner:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -294,7 +199,7 @@ export default class edittemplate extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }} onChange={(e) => { this.onUploadChange(e,'top_image') }}
onUpload={this.onUpload} onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError} onError={this.onUploadError}
@ -303,7 +208,7 @@ export default class edittemplate extends React.Component {
</FormItem> </FormItem>
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px"> <FormItem labelname="输入框:" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -312,7 +217,7 @@ export default class edittemplate extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" 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} defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
onUpload={this.onUpload} onUpload={this.onUpload}
onError={this.onUploadError} onError={this.onUploadError}
@ -320,14 +225,14 @@ export default class edittemplate extends React.Component {
/> />
</FormItem> </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}> <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton> <RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton> <RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup> </RadioGroup>
</FormItem> </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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -344,7 +249,7 @@ export default class edittemplate extends React.Component {
</FormItem> : null </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 <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}

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

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import "../../../assets/comm.css"; 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 SearchBarView from "../edittemplate/couponCard/couponViewConfig/searchBar"; //商品详情搜索栏
import Descteplate from "../edittemplate/goodsdesc.js"; import Descteplate from "../edittemplate/goodsdesc.js";
import "../edittemplate/goodstemplate"; import "../edittemplate/goodstemplate";
@ -39,7 +39,7 @@ export default class preview extends React.Component {
let propsData = this.props.data; let propsData = this.props.data;
let goodsConfig = propsData.product_list; let goodsConfig = propsData.product_list;
let naVisual = []; let naVisual = [];
if (goodsConfig && goodsConfig.bottomBar) { if (goodsConfig&&goodsConfig.bottomBar) {
naVisual = goodsConfig.bottomBar.navlist.filter((item) => item.iswitch); naVisual = goodsConfig.bottomBar.navlist.filter((item) => item.iswitch);
} }
return ( return (