完成编辑器搜索栏配置联动

src/assets/comm.css

@@ -133,3 +133,12 @@ html,body,h1,h2,h3,h4,h5,h6,p,ul,li,dl,dd,dt,ol,input{
 .fz12{
   font-size: 12px!important;
 }
+.center{
+  text-align: center;
+}
+.left{
+  text-align: left;
+}
+.right{
+  text-align: right;
+}

src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less

@@ -1,48 +1,73 @@
-.component-item{
+.component-item {
     display: flex;
     flex-direction: column;
     padding: 16px 8px;
     margin-bottom: 8px;
     background: #f5faff;
 }
-.component-item .v-editItem{
+
+.component-item .v-editItem {
     font-size: 14px;
     display: flex;
-    justify-content:space-between;
+    justify-content: space-between;
     align-items: center;
 }
-.component-item .v-editItem>span{
+
+.component-item .v-editItem>span {
     color: #999;
 }
-.component-item .showType{
+
+.component-item .showType {
     margin-right: 10px;
-    color: #333!important;
+    color: #333 !important;
 }
-.bottomBar .form-compontent{
+
-    padding-top:0;
+.bottomBar .form-compontent {
-    .choice-up-image{
+    padding-top: 0;
+
+    .choice-up-image {
         margin-right: 15px;
-        .zent-image-upload-tips[data-zv="9.12.7"]{
+
+        .zent-image-upload-tips[data-zv="9.12.7"] {
             text-align: center;
             color: #333;
         }
     }
-  .colorItemfont{
+
+    .colorItemfont {
         margin-top: 0;
     }
 }
-.tips{
+
+.assembly {
+    .form-Item {
+        margin-bottom: 15px;
+    }
+
+    .form-compontent {
+        padding-top: 0;
+
+        .colorItemfont {
+            margin-top: 0;
+        }
+    }
+
+}
+
+.tips {
     color: #999;
-    span{
+
-        color:#f00;
+    span {
+        color: #f00;
     }
 }
-.color-control{
+
+.color-control {
     margin-top: 10px;
     display: flex;
     justify-content: space-between;
 }
 
-.backpic-item{
+.backpic-item {
     margin-bottom: 30px;
 }

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

@@ -102,7 +102,7 @@ export default class edittemplate extends React.Component {
   render() {
     console.log(105,this.state);
     return (
-      <div>
+      <div className="assembly">
         <div className='control page-title-control'>
           <h1 style={{ fontSize: '16px' }}>图片设置</h1>
         </div>

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

@@ -5,244 +5,104 @@ 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"
+import Bus from '@/assets/eventBus.js'
+import _ from 'lodash'
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      model: {
+      switch:false,
-        top_image: "",
+      shape: 'circular',
-        list: "2",
+      textAlign: 'left',
-        font_color: "#f1f2f3",
+      borderColor: '#333',
-        button_color: "#FACD6A",
+      placeholder: '请输入关键字搜索'
-        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 { shape, textAlign, borderColor, placeholder } = config.couponList.product_list.search;
+      this.setState({ shape, textAlign, borderColor, placeholder });
     }
   }
-  onListChange(e) {
+  //形状
-    let model = this.state.model;
+  shapeChange(e) {
-    model.list = e.target.value;
+    this.setState({ shape: e.target.value })
-    this.setState({ model: model })
+    Bus.emit('shape', e.target.value)
-    this.props.setarrayType(e.target.value);
+  }
+  //文字
+  textChange(e) {
+    this.setState({ textAlign: e.target.value })
+    Bus.emit('textAlign', 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) {
+  changeBorder = (color) => {
-    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
+      borderColor: color
     });
-    this.props.setButtonbgcolor(color);
+    Bus.emit('borderColor', color)
-
-  }
-  handleChange1 = (color) => {
-    let model1 = this.state.model;
-    model1.button_color = color;
-    this.setState({
-      model: model1
-    });
-    this.props.setButtoncolor(color);
   }
 
   // 字体颜色
-  fontcolor(cor) {
+  borderColorFn(cor) {
-    let models = this.state.model;
+    this.setState({ borderColor: cor });
-    models.button_color = cor;
+    Bus.emit('borderColor', cor)
-    this.setState({ model: models });
-    this.props.setButtoncolor(cor);
   }
-  // 背景颜色
-  bgcolor(cor) {
-    let models = this.state.model;
-    models.font_color = cor;
-    this.setState({ model: models });
-    this.props.setButtonbgcolor(cor);
-  }
-  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'));
-    if (oldobj && oldobj.couponList) {
+    let couponList = oldobj.couponList;
-      let couponList = oldobj.couponList
+    couponList.product_list.search = _.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() {
+    let { shape, textAlign, borderColor, placeholder } = this.state;
     return (
-      <div>
+      <div className="assembly">
         <div className='control page-title-control'>
           <h1 style={{ fontSize: '16px' }}>搜索栏设置</h1>
         </div>
 
         <div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
-          <Form model={this.state.model} ref="form1">
+          <Form ref="form1">
             <div className="activeTip">
-              <FormItem required={false} labelname="框体样式:" prop="bottom" id="bottom" labelwidth="100px">
+              <FormItem required={false} labelname="框体样式:" labelwidth="100px">
-                <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
+                <RadioGroup onChange={(e) => { this.shapeChange(e) }} value={shape}>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>圆形</RadioButton>
+                  <RadioButton value={"circular"}>圆形</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>方形</RadioButton>
+                  <RadioButton value={"square"}>方形</RadioButton>
                 </RadioGroup>
               </FormItem>
             </div>
-            <FormItem required={false} labelname="文字格式:" prop="bottom" id="bottom" labelwidth="100px">
+            <FormItem required={false} labelname="文字格式:" labelwidth="100px">
-                <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
+              <RadioGroup onChange={(e) => { this.textChange(e) }} value={textAlign}>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton>
+                <RadioButton value={"left"}>居左</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton>
+                <RadioButton value={"center"}>居中</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居右</RadioButton>
+                <RadioButton value={"right"}>居右</RadioButton>
               </RadioGroup>
             </FormItem>
-              <FormItem labelname="框体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
+            <FormItem labelname="框体颜色:" labelwidth="80px">
               <div className="colorItemfont dfleac">
-              <span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></span>
+                <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#f0f') }}></span>
-              <span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
+                <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.borderColorFn('#04C160') }}></span>
-              <span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
+                <span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.borderColorFn('#AE99D3') }}></span>
-              <span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
+                <span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.borderColorFn('#FACD6A') }}></span>
-              <span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
+                <span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.borderColorFn('#FE7962') }}></span>
                 <div className="selfset">
-                <ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
+                  <ColorPicker className="setbgColor" color={borderColor} onChange={this.changeBorder} />
                 </div>
               </div>
             </FormItem>
             <FormItem labelname="提示文字:" prop="title" id="title" labelwidth="100px">
               <Ipt onChange={(e) => {
-              let model2 = this.state.model;
+                this.setState({ placeholder: e })
-              model2.title = e;
+                Bus.emit('placeholder', e)
-              this.setState({ model: model2 })
-              this.props.settitle(e)
               }}
                 onClearItem={(e) => {
-                let model2 = this.state.model;
+                  this.setState({ placeholder: '' })
-                model2.title = "";
+                  Bus.emit('placeholder', '')
-                this.setState({ model: model2 })
                 }}
-              value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
+                value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={18} height={'36px'} width={'300px'} alignment={'left'} />
             </FormItem>
           </Form>
         </div>

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

@@ -0,0 +1,13 @@
+.searchBar{
+    display: flex;
+    justify-content: flex-end;
+    justify-content: space-between;
+    padding:0 15px;
+    box-sizing: border-box;
+    i{
+        width: 16px;
+    }
+    .placeholder{
+        flex: 1;
+    }
+}

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import "./comm.less"
+import '@/assets/comm.css'
+export default class searchBar extends React.Component {
+    constructor(props) {
+        super(props)
+    }
+    render() {
+        let searchConfig=this.props.searchConfig;
+        console.log(10,searchConfig);
+        return (
+            <div className="searchBar">
+                <i className='marketing marketing-sousuo' />
+                <div className={searchConfig.textAlign +'  placeholder'}>
+                    {searchConfig.placeholder}
+                </div>
+
+            </div>
+        )
+    }
+}

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -2,6 +2,7 @@ import React  from 'react';
 import "./main.less"
 import "../../../assets/comm.css"
 import './goodstemplate.less'
+import SearchBarView from './couponConfig/searchBar' //商品详情立减金页面
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
@@ -10,8 +11,12 @@ export default class edittemplate extends React.Component {
     this.props.opendesc(true)
   }
   render() {
+    let goodsConfig=this.props.goodsdata;
     return (
       <div className="editor-main goodstemplate"  style={{ background:this.props.goodsdata.backgroundImg&&this.props.goodsdata.backgroundImg.bgImg? `url('${this.props.goodsdata.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
+        {
+         goodsConfig.search?<SearchBarView searchConfig={goodsConfig.search}/>:null
+        }
         <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
         {
           !this.props.goodsdata.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={this.props.goodsdata.top_image} />

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -71,7 +71,17 @@
       width: 310px;
     }
   }
-  
+  .searchBar{
+    width: 80%;
+    margin-left:10%;
+    margin-top: 2%;
+    height: 40px;
+    line-height: 40px;
+    padding-left: 15px;
+    box-sizing: border-box;
+    border: 1px solid #333;
+    border-radius: 20px;
+  }
 }
 
 .detailstemplate{
@@ -179,4 +189,3 @@
 .picture{
   width: 100%;
 }
-

src/pages/exchangepage/edittemplate/main.js

@@ -77,6 +77,13 @@ let couponProduct_list = {
   },
   backgroundImg:{
     bgImg:''
+  },
+  search:{
+    switch:false,
+    shape:'circular',
+    textAlign:'left',
+    borderColor:'#333',
+    placeholder:'请输入关键字搜索'
   }
 }
 export default class edittemplate extends React.Component {
@@ -124,7 +131,21 @@ export default class edittemplate extends React.Component {
       bgImgConfig.backgroundImg.bgImg = prop
       this.setState({ product_list: bgImgConfig })
     })
-    
+    Bus.addListener('shape', (prop) => {
+      let searchConfig = this.state.product_list
+      searchConfig.search.shape = prop
+      this.setState({ product_list: searchConfig })
+    })
+    Bus.addListener('textAlign', (prop) => {
+      let searchConfig = this.state.product_list
+      searchConfig.search.textAlign = prop
+      this.setState({ product_list: searchConfig })
+    })
+    Bus.addListener('placeholder', (prop) => {
+      let searchConfig = this.state.product_list
+      searchConfig.search.placeholder = prop
+      this.setState({ product_list: searchConfig })
+    })
     setTimeout(() => {
       let img = document.getElementById('center-img')
       let center = document.getElementById('center')