完成营销系统编辑器搜索栏框体颜色及文本对齐配置

src/assets/comm.css

@@ -142,3 +142,6 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
 .right{
   text-align: right;
 }
+.square{
+  border-radius: 0px !important;
+}

src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js

@@ -7,7 +7,7 @@ import { uploadImg, handelResponse } from "@/assets/api.js"
 import Ipt from "@/components/input/main"
 import Bus from '@/assets/eventBus.js'
 import _ from 'lodash'
-export default class edittemplate extends React.Component {
+export default class Searchbar extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
@@ -44,7 +44,6 @@ export default class edittemplate extends React.Component {
     Bus.emit('borderColor', color)
   }
 
-  // 字体颜色
   borderColorFn(cor) {
     this.setState({ borderColor: cor });
     Bus.emit('borderColor', cor)
@@ -83,7 +82,7 @@ export default class edittemplate extends React.Component {
             </FormItem>
             <FormItem labelname="框体颜色:" labelwidth="80px">
               <div className="colorItemfont dfleac">
-                <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#f0f') }}></span>
+                <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>
                 <span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.borderColorFn('#AE99D3') }}></span>
                 <span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.borderColorFn('#FACD6A') }}></span>
@@ -102,7 +101,7 @@ export default class edittemplate extends React.Component {
                   this.setState({ placeholder: '' })
                   Bus.emit('placeholder', '')
                 }}
-                value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={18} height={'36px'} width={'300px'} alignment={'left'} />
+                value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={10} height={'36px'} width={'300px'} alignment={'left'} />
             </FormItem>
           </Form>
         </div>

src/pages/exchangepage/couponTemplate/goodsPage/config/title.js

@@ -5,23 +5,24 @@ import Form from "@/components/form/main"
 import FormItem from "@/components/form-item/main"
 import { uploadImg, handelResponse } from "@/assets/api.js"
 import Ipt from "@/components/input/main"
-export default class edittemplate extends React.Component {
+import Bus from '@/assets/eventBus.js'
+import _ from 'lodash'
+export default class Title extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      model: {
+      switch:false,
-        top_image: "",
+      text: 'circular',
-        list: "2",
+      textAlign: 'left',
-        font_color: "#f1f2f3",
+      fontColor: '#333',
-        button_color: "#FACD6A",
+      fontSize: 1
-        describe: { type: "", content: "", bg_image: '' }
-      }
     }
   }
   componentWillMount(e) {
     let config = JSON.parse(sessionStorage.getItem('editorConfig'));
     if (config && config.couponList && config.couponList.product_list) {
-      this.setState({ model: config.couponList.product_list });
+      let { text, textAlign, fontColor, fontSize } = config.couponList.product_list.title;
+      this.setState({ text, textAlign, fontColor, fontSize });
     }
   }
   onListChange(e) {
@@ -182,16 +183,9 @@ export default class edittemplate extends React.Component {
   };
   componentWillUnmount() {
     let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
-    if (oldobj && oldobj.couponList) {
+    let couponList = oldobj.couponList;
-      let couponList = oldobj.couponList
+    couponList.product_list.title = _.cloneDeep(this.state);
-      couponList.product_list = this.state.model;
     oldobj.couponList = couponList;
-    } else {
-      oldobj = {}
-      let couponList = {}
-      couponList.product_list = this.state.model;
-      oldobj.couponList = couponList;
-    }
     sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
   }
   render() {
@@ -205,8 +199,6 @@ export default class edittemplate extends React.Component {
           <Form model={this.state.model} ref="form1">
             <FormItem labelname="标题文字:" prop="title" id="title" labelwidth="100px">
               <Ipt onChange={(e) => {
-                let model2 = this.state.model;
-                model2.title = e;
                 this.setState({ model: model2 })
                 this.props.settitle(e)
               }}

src/pages/exchangepage/edittemplate/couponConfig/comm.less

@@ -9,5 +9,9 @@
     }
     .placeholder{
         flex: 1;
+        white-space:nowrap;       /* 不换行 */
+        overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
+
+        text-overflow:ellipsis;
     }
 }

src/pages/exchangepage/edittemplate/couponConfig/searchBar.js

@@ -9,7 +9,7 @@ export default class searchBar extends React.Component {
         let searchConfig=this.props.searchConfig;
         console.log(10,searchConfig);
         return (
-            <div className="searchBar">
+            <div className={searchConfig.shape +' searchBar'} style={{border:'1px solid '+searchConfig.borderColor}}>
                 <i className='marketing marketing-sousuo' />
                 <div className={searchConfig.textAlign +'  placeholder'}>
                     {searchConfig.placeholder}

src/pages/exchangepage/edittemplate/main.js

@@ -31,6 +31,7 @@ import Whitegoods from './whitegoods' //白名单商品页面
 import Whitedetails from './whitedetails' //白名单详情页
 import Reduce from './reduce' //商品详情页立减金
 import ReduceConfig from './reduceConfig' //商品详情立减金页面
+import SearchBarView from './couponConfig/searchBar' //商品详情立减金页面
 // 优惠券
 import CouponLandingForm from '../couponTemplate/landingPage/config/main' //优惠券落地页表单
 import CouponGoodsListForm from '../couponTemplate/goodsPage/config/main' //优惠券商品列表页
@@ -84,6 +85,13 @@ let couponProduct_list = {
     textAlign:'left',
     borderColor:'#333',
     placeholder:'请输入关键字搜索'
+  },
+  title:{
+    switch:false,
+    text: 'circular',
+    textAlign: 'left',
+    fontColor: '#333',
+    fontSize: 1
   }
 }
 export default class edittemplate extends React.Component {
@@ -146,6 +154,11 @@ export default class edittemplate extends React.Component {
       searchConfig.search.placeholder = prop
       this.setState({ product_list: searchConfig })
     })
+    Bus.addListener('borderColor', (prop) => {
+      let searchConfig = this.state.product_list
+      searchConfig.search.borderColor = prop
+      this.setState({ product_list: searchConfig })
+    })
     setTimeout(() => {
       let img = document.getElementById('center-img')
       let center = document.getElementById('center')
@@ -766,6 +779,9 @@ export default class edittemplate extends React.Component {
                     : 'thumbheader'
                 }>
                 <div className='goodsList-item'  style={{ background:this.state.product_list.backgroundImg&&this.state.product_list.backgroundImg.bgImg? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
+                {
+                 this.state.product_list.search?<SearchBarView searchConfig={this.state.product_list.search}/>:null
+                }
                   <img
                     src={
                       'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'

src/pages/exchangepage/edittemplate/main.less

@@ -595,12 +595,19 @@
 					position: relative;
 					height: 100%;
 					overflow: hidden;
-
 					.topbanner {
 						width: 100%;
 						height: 70px;
 					}
-
+                    .searchBar{
+						transform: scale(0.8);
+						font-size: 10px;
+						padding: 0 5px; 
+						border-radius: 10px;
+					}
+					.marketing{
+						width: 10px;
+					}
 					.bottom_Img {
 						width: 100%;
 					}