完成编辑器背景图联动

2022-09-02 14:09:39 +08:00 · 2022-09-02 14:09:39 +08:00 · d94593cdcf
parent ada8132384
commit d94593cdcf
6 changed files with 29 additions and 120 deletions
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
@ -5,96 +5,34 @@ 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 _ from "lodash";
+import Bus from '@/assets/eventBus.js'
 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: '' }
-      }
+      bgimg:''
    }
  }
+
  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 {bgimg}=config.couponList.product_list.backgroundImg;
+      this.setState({ bgimg});
    }
  }
-  onListChange(e) {
-    let model = this.state.model;
-    model.list = e.target.value;
-    this.setState({ model: model })
-    this.props.setarrayType(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);
+      this.setState({ bgimg: files[0].src })
+      Bus.emit('bgImg', files[0].src)
    } else {
-      let model = this.state.model;
-      model.top_image = '';
-      this.setState({ model: model })
-      this.props.setbanner("");
+      this.setState({ bgimg: ''})
+      Bus.emit('bgImg','')
    }
  };

-  //悬浮富文本
-  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} 张图片`);
@ -102,38 +40,6 @@ export default class edittemplate extends React.Component {
      Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
    }
  };
-  handleChange = (color) => {
-    let model1 = this.state.model;
-    model1.font_color = color;
-    this.setState({
-      model: model1
-    });
-    this.props.setButtonbgcolor(color);
-
-  }
-  handleChange1 = (color) => {
-    let model1 = this.state.model;
-    model1.button_color = color;
-    this.setState({
-      model: model1
-    });
-    this.props.setButtoncolor(color);
-  }
-
-  // 字体颜色
-  fontcolor(cor) {
-    let models = this.state.model;
-    models.button_color = 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);
@ -180,18 +86,12 @@ export default class edittemplate extends React.Component {
    });

  };
+
  componentWillUnmount() {
    let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
-    if (oldobj && oldobj.couponList) {
-      let couponList = oldobj.couponList
-      couponList.product_list = this.state.model;
+      let couponList = oldobj.couponList;
+      couponList.product_list.backgroundImg = _.cloneDeep(this.state);
      oldobj.couponList = couponList;
-    } else {
-      oldobj = {}
-      let couponList = {}
-      couponList.product_list = this.state.model;
-      oldobj.couponList = couponList;
-    }
    sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
  }
  render() {
@ -200,7 +100,6 @@ export default class edittemplate extends React.Component {
        <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">
            <FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
@ -213,7 +112,7 @@ export default class edittemplate extends React.Component {
                tips="单张图片不超过 5M"
                onChange={(e) => { this.onUploadChange(e) }}
                onUpload={this.onUpload}
-                defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
+                defaultFileList={this.state.bgimg ? [{ 'src': this.state.bgimg }] : null}
                onError={this.onUploadError}
              />
            </FormItem>
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
@ -96,7 +96,6 @@ export default class edittemplate extends React.Component {
    let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
      let couponList = oldobj.couponList;
      couponList.product_list.picture = _.cloneDeep(this.state);
-      console.log(100,couponList);
      oldobj.couponList = couponList;
    sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
  }
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@ -11,7 +11,7 @@ export default class edittemplate extends React.Component {
  }
  render() {
    return (
-      <div className="editor-main goodstemplate" >
+      <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' }}>
        <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
@ -179,3 +179,4 @@
 .picture{
  width: 100%;
 }
+
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/src/pages/exchangepage/edittemplate/main.js
@ -74,6 +74,9 @@ let couponProduct_list = {
    img:'',
    jumpType:'0',//0不跳转  1跳转
    jumpUrl:''
+  },
+  backgroundImg:{
+    bgImg:''
  }
 }
 export default class edittemplate extends React.Component {
@ -115,6 +118,13 @@ export default class edittemplate extends React.Component {
      coupongoodsConfig.picture.img = prop
      this.setState({ product_list: coupongoodsConfig })
    })
+    //背景图
+    Bus.addListener('bgImg', (prop) => {
+      let bgImgConfig = this.state.product_list
+      bgImgConfig.backgroundImg.bgImg = prop
+      this.setState({ product_list: bgImgConfig })
+    })
+    
    setTimeout(() => {
      let img = document.getElementById('center-img')
      let center = document.getElementById('center')
@ -728,12 +738,13 @@ export default class edittemplate extends React.Component {
              <h4>商品列表页:</h4>
              <div
                onClick={() => this.activeChoice(2)}
+                
                className={
                  this.state.activeNavStatus == 2
                    ? 'activeNav thumbheader'
                    : 'thumbheader'
                }>
-                <div className='goodsList-item' >
+                <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' }}>
                  <img
                    src={
                      'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'
--- a/src/pages/exchangepage/edittemplate/main.less
+++ b/src/pages/exchangepage/edittemplate/main.less
@ -587,7 +587,6 @@
 				border: 1px solid #f1f2f3;
 				align-self: center;
 				cursor: pointer;
-
 				&.activeNav {
 					border: 5px solid #DDEEFF;
 				}