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

2022-09-02 19:48:32 +08:00 · 2022-09-02 19:48:32 +08:00 · 8cb1e3670c
parent d94593cdcf
commit 8cb1e3670c
9 changed files with 188 additions and 225 deletions
--- a/src/assets/comm.css
+++ b/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;
+}
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less
+++ b/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;
-    .choice-up-image{
+
+.bottomBar .form-compontent {
+    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{
-      margin-top: 0;
-  }
-}
-.tips{
-    color: #999;
-    span{
-        color:#f00;
+
+    .colorItemfont {
+        margin-top: 0;
    }
 }
-.color-control{
+
+.assembly {
+    .form-Item {
+        margin-bottom: 15px;
+    }
+
+    .form-compontent {
+        padding-top: 0;
+
+        .colorItemfont {
+            margin-top: 0;
+        }
+    }
+
+}
+
+.tips {
+    color: #999;
+
+    span {
+        color: #f00;
+    }
+}
+
+.color-control {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
 }

-.backpic-item{
+.backpic-item {
    margin-bottom: 30px;
 }
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
+++ b/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>
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
@ -5,245 +5,105 @@ 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: {
-        top_image: "",
-        list: "2",
-        font_color: "#f1f2f3",
-        button_color: "#FACD6A",
-        describe: { type: "", content: "", bg_image: '' }
-      }
+      switch:false,
+      shape: 'circular',
+      textAlign: 'left',
+      borderColor: '#333',
+      placeholder: '请输入关键字搜索'
    }
  }
  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;
-    model.list = e.target.value;
-    this.setState({ model: model })
-    this.props.setarrayType(e.target.value);
+  //形状
+  shapeChange(e) {
+    this.setState({ shape: e.target.value })
+    Bus.emit('shape', 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) {
-    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;
+  changeBorder = (color) => {
    this.setState({
-      model: model1
+      borderColor: color
    });
-    this.props.setButtonbgcolor(color);
-
-  }
-  handleChange1 = (color) => {
-    let model1 = this.state.model;
-    model1.button_color = color;
-    this.setState({
-      model: model1
-    });
-    this.props.setButtoncolor(color);
+    Bus.emit('borderColor', color)
  }

  // 字体颜色
-  fontcolor(cor) {
-    let models = this.state.model;
-    models.button_color = cor;
-    this.setState({ model: models });
-    this.props.setButtoncolor(cor);
+  borderColorFn(cor) {
+    this.setState({ borderColor: cor });
+    Bus.emit('borderColor', 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
-      couponList.product_list = this.state.model;
-      oldobj.couponList = couponList;
-    } else {
-      oldobj = {}
-      let couponList = {}
-      couponList.product_list = this.state.model;
-      oldobj.couponList = couponList;
-    }
+    let couponList = oldobj.couponList;
+    couponList.product_list.search = _.cloneDeep(this.state);
+    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">
-                <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>圆形</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>方形</RadioButton>
+              <FormItem required={false} labelname="框体样式:" labelwidth="100px">
+                <RadioGroup onChange={(e) => { this.shapeChange(e) }} value={shape}>
+                  <RadioButton value={"circular"}>圆形</RadioButton>
+                  <RadioButton value={"square"}>方形</RadioButton>
                </RadioGroup>
              </FormItem>
            </div>
-            <FormItem required={false} labelname="文字格式:" prop="bottom" id="bottom" labelwidth="100px">
-                <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居右</RadioButton>
-                </RadioGroup>
-              </FormItem>
-              <FormItem labelname="框体颜色:" prop="bg_color" id="bg_color" 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 className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
-              <span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
-              <span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
-              <span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
-              <div className="selfset">
-                <ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
+            <FormItem required={false} labelname="文字格式:" labelwidth="100px">
+              <RadioGroup onChange={(e) => { this.textChange(e) }} value={textAlign}>
+                <RadioButton value={"left"}>居左</RadioButton>
+                <RadioButton value={"center"}>居中</RadioButton>
+                <RadioButton value={"right"}>居右</RadioButton>
+              </RadioGroup>
+            </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 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>
+                <span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.borderColorFn('#FE7962') }}></span>
+                <div className="selfset">
+                  <ColorPicker className="setbgColor" color={borderColor} onChange={this.changeBorder} />
+                </div>
              </div>
-            </div>
-          </FormItem>
+            </FormItem>
            <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)
-            }}
-              onClearItem={(e) => {
-                let model2 = this.state.model;
-                model2.title = "";
-                this.setState({ model: model2 })
+              <Ipt onChange={(e) => {
+                this.setState({ placeholder: e })
+                Bus.emit('placeholder', e)
              }}
-              value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
-          </FormItem>
+                onClearItem={(e) => {
+                  this.setState({ placeholder: '' })
+                  Bus.emit('placeholder', '')
+                }}
+                value={placeholder} placeholder={"请输入"} labelWidth={'0px'} maxLength={18} height={'36px'} width={'300px'} alignment={'left'} />
+            </FormItem>
          </Form>
        </div>
      </div>
--- a/src/pages/exchangepage/edittemplate/couponConfig/comm.less
+++ b/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;
+    }
+}
--- a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
+++ b/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>
+        )
+    }
+}
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/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} />
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/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%;
 }
-
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/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')