From 3063dc19987d1e592544e801c57ecb089c502d76 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Thu, 8 Sep 2022 18:09:00 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=BE=91=E5=99=A8?= =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=8F=E6=96=B0=E5=A2=9E=E8=83=8C=E6=99=AF?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=EF=BC=8C=E8=BE=93=E5=85=A5=E6=96=87=E5=AD=97?= =?UTF-8?q?=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/comm.css | 6 +-- .../goodsPage/componentLib/main.js | 5 +- .../goodsPage/config/searchBar.js | 52 +++++++++++++++++-- .../edittemplate/couponConfig/comm.less | 10 ++-- .../edittemplate/couponConfig/searchBar.js | 7 +-- .../edittemplate/goodstemplate.less | 6 +-- src/pages/exchangepage/edittemplate/main.js | 12 +++++ src/pages/exchangepage/edittemplate/main.less | 2 +- 8 files changed, 82 insertions(+), 18 deletions(-) diff --git a/src/assets/comm.css b/src/assets/comm.css index c40edada..bbbeae09 100644 --- a/src/assets/comm.css +++ b/src/assets/comm.css @@ -172,15 +172,15 @@ input { } .center { - text-align: center; + justify-content: center!important;; } .left { - text-align: left; + justify-content: flex-start!important;; } .right { - text-align: right; + justify-content: flex-end!important;; } .square { diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js index 1a7c6a56..76103274 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js @@ -37,7 +37,10 @@ export default class componentLib extends React.Component { componentWillUnmount() {} propcomponentName(item){ this.props.componentName(item.name); - Bus.emit('componentLib',item) + if(item.name){ + Bus.emit('componentLib',item) + } + } render() { return ( diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js index c77686c4..b8ced255 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js @@ -15,6 +15,8 @@ export default class Searchbar extends React.Component { shape: 'circular', textAlign: 'left', borderColor: '#333', + bgColor:'#a00', + fontColor:'#333', placeholder: '请输入关键字搜索' } } @@ -43,11 +45,31 @@ export default class Searchbar extends React.Component { }); Bus.emit('borderColor', color) } + changebgColor = (color) => { + this.setState({ + bgColor: color + }); + Bus.emit('searchbgColor', color) + } + changefontColor = (color) => { + this.setState({ + fontColor: color + }); + Bus.emit('searchfontColor', color) + } borderColorFn(cor) { this.setState({ borderColor: cor }); Bus.emit('borderColor', cor) } + bgColorFn(cor) { + this.setState({ bgColor: cor }); + Bus.emit('searchbgColor', cor) + } + fontColorFn(cor) { + this.setState({ fontColor: cor }); + Bus.emit('searchfontColor', cor) + } componentWillUnmount() { let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); let couponList = oldobj.couponList; @@ -56,7 +78,7 @@ export default class Searchbar extends React.Component { sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); } render() { - let { shape, textAlign, borderColor, placeholder } = this.state; + let { shape, textAlign, borderColor, placeholder,bgColor,fontColor } = this.state; return (
@@ -80,7 +102,7 @@ export default class Searchbar extends React.Component { 居右 - +
{ this.borderColorFn('#fff') }}> { this.borderColorFn('#04C160') }}> @@ -92,7 +114,31 @@ export default class Searchbar extends React.Component {
- + +
+ { this.bgColorFn('#fff') }}> + { this.bgColorFn('#04C160') }}> + { this.bgColorFn('#AE99D3') }}> + { this.bgColorFn('#FACD6A') }}> + { this.bgColorFn('#FE7962') }}> +
+ +
+
+ + +
+ { this.fontColorFn('#fff') }}> + { this.fontColorFn('#04C160') }}> + { this.fontColorFn('#AE99D3') }}> + { this.fontColorFn('#FACD6A') }}> + { this.fontColorFn('#FE7962') }}> +
+ +
+
+ + { this.setState({ placeholder: e }) Bus.emit('placeholder', e) diff --git a/src/pages/exchangepage/edittemplate/couponConfig/comm.less b/src/pages/exchangepage/edittemplate/couponConfig/comm.less index 8188ee93..b03c6194 100644 --- a/src/pages/exchangepage/edittemplate/couponConfig/comm.less +++ b/src/pages/exchangepage/edittemplate/couponConfig/comm.less @@ -1,14 +1,16 @@ +.searchBar-container{ + padding: 4px 0; + box-sizing: border-box; +} .searchBar{ display: flex; - justify-content: flex-end; - justify-content: space-between; - padding:0 15px; + justify-content: center; + padding:0 10px; box-sizing: border-box; i{ width: 16px; } .placeholder{ - flex: 1; white-space:nowrap; /* 不换行 */ overflow:hidden; /* 内容超出宽度时隐藏超出部分的内容 */ diff --git a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js index 342c1761..1e779896 100644 --- a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js +++ b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js @@ -7,15 +7,16 @@ export default class searchBar extends React.Component { } render() { let searchConfig=this.props.searchConfig; - console.log(10,searchConfig); return ( -
+
+
-
+
{searchConfig.placeholder}
+
) } } \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less index d745fb74..814628d7 100644 --- a/src/pages/exchangepage/edittemplate/goodstemplate.less +++ b/src/pages/exchangepage/edittemplate/goodstemplate.less @@ -118,7 +118,7 @@ } .goodstemplate { - overflow-y: auto; + // overflow-y: auto; .selectBorder { z-index: 2; -webkit-box-sizing: border-box; @@ -153,12 +153,12 @@ .searchBar { width: 80%; - margin: 2% 10%; + margin: 2% 15%; height: 40px; line-height: 40px; padding-left: 15px; box-sizing: border-box; - border: 1px solid #333; + border:0; border-radius: 20px; } } diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index b02791b6..04bf0d15 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -87,6 +87,8 @@ let couponProduct_list = { shape: 'circular', textAlign: 'left', borderColor: '#333', + bgColor:'#a00', + fontColor:'#333', placeholder: '请输入关键字搜索' }, title: { @@ -212,6 +214,16 @@ export default class edittemplate extends React.Component { searchConfig.search.borderColor = prop this.setState({ product_list: searchConfig }) }) + Bus.addListener('searchbgColor', (prop) => { + let searchConfig = this.state.product_list + searchConfig.search.bgColor = prop + this.setState({ product_list: searchConfig }) + }) + Bus.addListener('searchfontColor', (prop) => { + let searchConfig = this.state.product_list + searchConfig.search.fontColor = prop + this.setState({ product_list: searchConfig }) + }) //标题设置 Bus.addListener('title', (prop) => { let titleConfig = this.state.product_list diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index 5c031010..9effa13c 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/src/pages/exchangepage/edittemplate/main.less @@ -8,7 +8,7 @@ // background-color: #f5f7f8; height: 100%; left: 0; - margin: 0 485px 0 250px; + margin: 0 430px 0 325px; overflow-y: scroll; position: absolute; right: 0;