完成编辑器搜索栏新增背景颜色，输入文字颜色配置

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 {

src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js

@@ -37,8 +37,11 @@ export default class componentLib extends React.Component {
   componentWillUnmount() {}
   propcomponentName(item){
     this.props.componentName(item.name);
+    if(item.name){
       Bus.emit('componentLib',item)
     }
+   
+  }
   render() {
     return (
       <div className="componentLib">

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 (
       <div className="assembly">
         <div className='control page-title-control'>
@@ -80,7 +102,7 @@ export default class Searchbar extends React.Component {
                 <RadioButton value={"right"}>居右</RadioButton>
               </RadioGroup>
             </FormItem>
-            <FormItem labelname="框体颜色:" labelwidth="80px">
+            <FormItem required={false} labelname="框体颜色:" labelwidth="80px">
               <div className="colorItemfont dfleac">
                 <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#fff') }}></span>
                 <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.borderColorFn('#04C160') }}></span>
@@ -92,7 +114,31 @@ export default class Searchbar extends React.Component {
                 </div>
               </div>
             </FormItem>
-            <FormItem labelname="提示文字:" prop="title" id="title" labelwidth="100px">
+            <FormItem required={false} labelname="背景颜色:" labelwidth="80px">
+              <div className="colorItemfont dfleac">
+                <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
+                <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
+                <span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
+                <span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
+                <span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
+                <div className="selfset">
+                  <ColorPicker className="setbgColor" color={bgColor} onChange={this.changebgColor} />
+                </div>
+              </div>
+            </FormItem>
+            <FormItem required={false} labelname="文字颜色:" labelwidth="80px">
+              <div className="colorItemfont dfleac">
+                <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontColorFn('#fff') }}></span>
+                <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontColorFn('#04C160') }}></span>
+                <span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontColorFn('#AE99D3') }}></span>
+                <span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontColorFn('#FACD6A') }}></span>
+                <span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontColorFn('#FE7962') }}></span>
+                <div className="selfset">
+                  <ColorPicker className="setbgColor" color={fontColor} onChange={this.changefontColor} />
+                </div>
+              </div>
+            </FormItem>
+            <FormItem required={false} labelname="提示文字:"  labelwidth="100px">
               <Ipt onChange={(e) => {
                 this.setState({ placeholder: e })
                 Bus.emit('placeholder', e)

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: center;
-    justify-content: space-between;
+    padding:0 10px;
-    padding:0 15px;
     box-sizing: border-box;
     i{
         width: 16px;
     }
     .placeholder{
-        flex: 1;
         white-space:nowrap;       /* 不换行 */
         overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
 

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 (
-            <div className={searchConfig.shape +' searchBar'} style={{border:'1px solid '+searchConfig.borderColor}}>
+            <div className="searchBar-container" style={{background:searchConfig.bgColor}}>
+            <div className={searchConfig.shape +' searchBar  '+searchConfig.textAlign} style={{background:searchConfig.borderColor,color:searchConfig.fontColor}}>
                 <i className='marketing marketing-sousuo' />
-                <div className={searchConfig.textAlign +'  placeholder'}>
+                <div className='placeholder'>
                     {searchConfig.placeholder}
                 </div>
 
             </div>
+            </div>
         )
     }
 }

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;
   }
 }

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

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;