From 2f88d2d1a7bc663ba0650af2a0b3a3f5242e1728 Mon Sep 17 00:00:00 2001 From: Apple <> Date: Wed, 21 Sep 2022 15:48:38 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E5=85=91=E6=8D=A2=E7=A0=81/=E7=99=BD=E5=90=8D=E5=8D=95/?= =?UTF-8?q?=E4=BC=98=E6=83=A0=E5=88=B8=E8=90=BD=E5=9C=B0=E9=A1=B5=E4=BB=A3?= =?UTF-8?q?=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../edittemplate/couponCard/landPage.js | 125 ++++--------- .../edittemplate/exchange/landingPage.js | 116 +++++------- src/pages/exchangepage/edittemplate/main.js | 27 +-- .../edittemplate/whiteList/whiteLand.js | 167 ++++-------------- src/pages/exchangepage/template/preview.js | 4 +- 5 files changed, 119 insertions(+), 320 deletions(-) diff --git a/src/pages/exchangepage/edittemplate/couponCard/landPage.js b/src/pages/exchangepage/edittemplate/couponCard/landPage.js index 12f3aa6e..9db4d395 100644 --- a/src/pages/exchangepage/edittemplate/couponCard/landPage.js +++ b/src/pages/exchangepage/edittemplate/couponCard/landPage.js @@ -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; + model.describe.bg_image = files[0].src; + } this.setState({ model: model }) this.props.setbanner(model); - } else { - let model = this.state.model; - model.describe.bg_image = ""; - this.setState({ model: model }) - this.props.setbanner(model); - } }; onUploadError = (type, data) => { @@ -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 (
@@ -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 { }
样式
- +
- { this.bgcolor('#ffffff') }}> - { this.bgcolor('#EEEEEE') }}> - { this.bgcolor('#000000') }}> + { this.controlColor('bg_color','#ffffff') }}> + { this.controlColor('bg_color','#EEEEEE') }}> + { this.controlColor('bg_color','#000000') }}>
- + this.controlColor('bg_color',c)} />
- +
- { this.fontcolor('#ffffff') }}> - { this.fontcolor('#04C160') }}> - { this.fontcolor('#AE99D3') }}> - { this.fontcolor('#FACD6A') }}> - { this.fontcolor('#FE7962') }}> + { this.controlColor('font_color','#ffffff') }}> + { this.controlColor('font_color','#04C160') }}> + { this.controlColor('font_color','#AE99D3') }}> + { this.controlColor('font_color','#FACD6A') }}> + { this.controlColor('font_color','#FE7962') }}>
- + this.controlColor('font_color',c)} />
基础图层
- + { 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} /> } - + { this.onactivityChange(e) }} value={this.state.model.describe.type}> this.hasItemFn(1)}>图片 this.hasItemFn(2)}>富文本 { - this.state.model.describe.type == 1 ? + this.state.model.describe.type == 1 ? : null } { - this.state.model.describe.type == 2 ? + this.state.model.describe.type == 2 ? { + 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); - } + model.top_image = files[0].src; + } + 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 {
基础设置
- + { 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 { { this.state.isSystemModel ? ( - + this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} /> ) : null } { this.state.isSystemModel ? ( - +