完成编辑器背景图联动

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: {
+      bgimg:''
-        top_image: "",
-        list: "2",
-        font_color: "#f1f2f3",
-        button_color: "#FACD6A",
-        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 {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;
+      this.setState({ bgimg: files[0].src })
-      model.top_image = files[0].src;
+      Bus.emit('bgImg', files[0].src)
-      this.setState({ model: model })
-      this.props.setbanner(files[0].src);
     } else {
-      let model = this.state.model;
+      this.setState({ bgimg: ''})
-      model.top_image = '';
+      Bus.emit('bgImg','')
-      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} 张图片`);
@@ -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;
-      let couponList = oldobj.couponList
+      couponList.product_list.backgroundImg = _.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() {
@@ -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>

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

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

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -179,3 +179,4 @@
 .picture{
   width: 100%;
 }
+

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'

src/pages/exchangepage/edittemplate/main.less

@@ -587,7 +587,6 @@
 				border: 1px solid #f1f2f3;
 				align-self: center;
 				cursor: pointer;
-
 				&.activeNav {
 					border: 5px solid #DDEEFF;
 				}