From ea9800ddbfb0147158d183c6e942b3774966836b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Mon, 5 Sep 2022 17:44:41 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E5=AE=8C=E6=88=90=E8=90=BD=E5=9C=B0?= =?UTF-8?q?=E9=A1=B5=E7=BC=96=E8=BE=91=E5=99=A8=E6=A0=87=E9=A2=98=E9=85=8D?= =?UTF-8?q?=E7=BD=AE=E4=B8=8E=E9=A2=84=E8=A7=88=E8=81=94=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/comm.css | 135 +++++-- .../couponTemplate/goodsPage/config/title.js | 207 ++-------- .../edittemplate/goodstemplate.js | 17 +- .../edittemplate/goodstemplate.less | 8 + src/pages/exchangepage/edittemplate/main.js | 356 ++++++++++-------- src/pages/exchangepage/edittemplate/main.less | 9 + 6 files changed, 349 insertions(+), 383 deletions(-) diff --git a/src/assets/comm.css b/src/assets/comm.css index 639200ce..d1e42580 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -1,147 +1,200 @@ /* flex布局 */ -.dflexaj{ +.dflexaj { display: flex; align-items: center; justify-content: space-between; } -.dflexj{ + +.dflexj { display: flex; justify-content: space-between; } -.dflexajc{ + +.dflexajc { display: flex; align-items: center; justify-content: space-between; flex-direction: column; } -.dflexajcs{ + +.dflexajcs { display: flex; - justify-content:flex-start; + justify-content: flex-start; } -.dflexajce{ + +.dflexajce { display: flex; - justify-content:flex-end; + justify-content: flex-end; } -.dflexac{ + +.dflexac { display: flex; align-items: center; justify-content: center; flex-direction: column; } -.dflexacs{ + +.dflexacs { display: flex; justify-content: flex-start; flex-direction: column; } -.dflexacsa{ + +.dflexacsa { display: flex; justify-content: flex-start; align-items: center; } -.dflexa{ + +.dflexa { display: flex; align-items: center; } -.dfleac{ + +.dfleac { display: flex; justify-content: flex-start; align-items: center; } -.dflexs{ + +.dflexs { display: flex; justify-content: flex-start; flex-direction: column; } + /* 怪异盒子 */ -.boxs{ +.boxs { box-sizing: border-box; } /* 边距 */ -.ml15{ +.ml15 { margin-left: 15px; } -.mr15{ + +.mr15 { margin-right: 15px; } -.mt15{ + +.mt15 { margin-top: 15px; } -.pd24{ + +.pd24 { padding: 24px; } -.pd15{ + +.pd15 { padding: 15px; } -.pdr200{ + +.pdr200 { padding: 200px; } -.pdtrl15{ +.pdtrl15 { padding: 15px 15px 9px; } -.pdtrl20{ + +.pdtrl20 { padding: 20px 20px 14px; } -.mt5{ + +.mt5 { margin-top: 5px; } -.mt24{ - margin-top:24px; + +.mt24 { + margin-top: 24px; } -html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{ +html, +body, +h1, +h2, +h3, +h4, +h5, +h6, +p, +ul, +li, +dl, +dd, +dt, +ol, +input { padding: 0; margin: 0; } /* 颜色 */ -.col31{ +.col31 { color: #313233; } -.maincenter{ +.maincenter { width: 98%; margin: 0 auto; - min-height:560px; + min-height: 560px; } -@media screen and (min-width:1700px ){ - .maincenter{ + +@media screen and (min-width:1700px) { + .maincenter { min-height: 800px; } } /* 表格状态的图标 */ -.icon{ +.icon { display: inline-block; width: 6px; height: 6px; background: #f00; - border-radius:3px; + border-radius: 3px; vertical-align: middle; /* border: 2px solid rgb(159, 222, 252); */ margin-right: 5px; } -.delfilebtn{ +.delfilebtn { color: #296bef; cursor: pointer; } -.fz16{ + +.fz16 { font-size: 16px; } -.fz12{ - font-size: 12px!important; + +.fz12 { + font-size: 12px !important; } -.center{ + +.center { text-align: center; } -.left{ + +.left { text-align: left; } -.right{ + +.right { text-align: right; } -.square{ + +.square { border-radius: 0px !important; +} + +.mini { + font-size: 12px; +} + +.standard { + font-size: 14px; +} + +.big { + font-size: 16px; } \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js index 019897ff..6e3c52fe 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js @@ -12,7 +12,7 @@ export default class Title extends React.Component { super(props) this.state = { switch:false, - text: 'circular', + text: '', textAlign: 'left', fontColor: '#333', fontSize: 1 @@ -25,162 +25,32 @@ export default class Title extends React.Component { this.setState({ text, textAlign, fontColor, fontSize }); } } - onListChange(e) { - let model = this.state.model; - model.list = e.target.value; - this.setState({ model: model }) - this.props.setarrayType(e.target.value); + + + //文字格式 + textAlignChange(e) { + this.setState({ textAlign: e.target.value }) + Bus.emit('titleAlign',e.target.value) } - //活动说明 - onactivityChange(e) { - let model1 = this.state.model; - model1.describe.type = e.target.value; - this.setState({ model: model1 }) - this.props.setactiveType(e.target.value); - } - hasItemFn(c) { - let model1 = this.state.model; - if (c == model1.describe.type) { - model1.describe.type = ''; - this.setState({ model: model1 }); - this.props.setactiveType(''); - } - } - - //顶部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(files[0].src); - } else { - let model = this.state.model; - model.top_image = ''; - this.setState({ model: model }) - this.props.setbanner(""); - } - }; - - //悬浮富文本 - getsusEditext(c) { - let model1 = this.state.model; - model1.describe.content = c; - this.setState({ model: model1 }); - this.props.seteditorHtml(c); - } - //富文本 - getEditext(c) { - let model1 = this.state.model; - model1.describe.content = c; - this.setState({ model: model1 }); - this.props.seteditorHtml(c); - } - - //底部描述图 - onUploadChange2(files) { - if (files.length > 0 && files[0].status == "success") { - let model1 = this.state.model; - model1.describe.bg_image = files[0].src; - this.setState({ model: model1 }) - this.props.setbottomImg(files[0].src); - } else { - let model1 = this.state.model; - model1.describe.bg_image = ''; - this.setState({ model: model1 }) - this.props.setbottomImg(""); - } - }; - - - - onUploadError = (type, data) => { - if (type === 'overMaxAmount') { - Notify.error(`最多可上传 ${data.maxAmount} 张图片`); - } else if (type === 'overMaxSize') { - Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); - } - }; - handleChange = (color) => { - let model1 = this.state.model; - model1.font_color = color; - this.setState({ - model: model1 - }); - this.props.setButtonbgcolor(color); - - } handleChange1 = (color) => { - let model1 = this.state.model; - model1.button_color = color; this.setState({ - model: model1 + fontColor: color }); - this.props.setButtoncolor(color); + Bus.emit('fontColor',color) } // 字体颜色 fontcolor(cor) { - let models = this.state.model; - models.button_color = cor; - this.setState({ model: models }); - this.props.setButtoncolor(cor); + this.setState({ fontColor: cor }); + Bus.emit('fontColor', cor) } - // 背景颜色 - bgcolor(cor) { - let models = this.state.model; - models.font_color = cor; - this.setState({ model: models }); - this.props.setButtonbgcolor(cor); + fontSizeChange(e) { + this.setState({ fontSize: e.target.value }) + Bus.emit('fontSize', e.target.value) } - onUpload = (file, report) => { - let self = this; - console.log('上传头像', file); - return new Promise((resolve, reject) => { - let path = "" - let formdata = new FormData(); - formdata.append("file", file) - formdata.append("path", "common_image") - uploadImg(formdata).then((res) => { - handelResponse(res, (req, msg) => { - path = req.path; - - }, (err) => { - reject(); - }) - }); - - let count = 0; - const update = () => { - if (path) { - - resolve( - path - ); - - } - else { - - if (count < 100) { - count += 2; - report(count); - setTimeout(update, 500); - console.log("上传中") - } - else { - - reject(); - } - } - - - }; - setTimeout(update, 500); - }); - - }; + componentWillUnmount() { let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); let couponList = oldobj.couponList; @@ -197,42 +67,41 @@ export default class Title extends React.Component {