完成组件库图片配置与预览效果联动

src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js

@@ -40,7 +40,7 @@ export default class componentLib extends React.Component {
   render() {
     return (
       <div className="componentLib">
-        <h4>基础组件</h4>
+        <h4 onClick={()=>this.propcomponentName({name:''})}>基础组件</h4>
         <ul>
           {
             comPonentList.map(item=>{

src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less

@@ -11,6 +11,7 @@
 
     h4 {
         padding: 15px 0;
+        cursor: pointer;
     }
 
     ul {

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

@@ -1,95 +1,42 @@
 import React from 'react';
 import { ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
 import "@/assets/comm.css"
+import Bus from '@/assets/eventBus.js'
 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";
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      model: {
+        img:'',
-        top_image: "",
+        jumpType:'0',//0不跳转  1跳转
-        list: "2",
+        jumpUrl:''
-        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 {img,jumpType,jumpUrl}=config.couponList.product_list.picture;
-    }
+      this.setState({ img,jumpType,jumpUrl });
-  }
-  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
+  //跳转链接
+  onjumpChange(e) {
+    this.setState({ jumpType: e.target.value })
+  }
+
+  //图片
   onUploadChange(files) {
     if (files.length > 0 && files[0].status == "success") {
-      let model = this.state.model;
+      this.setState({ img: files[0].src })
-      model.top_image = files[0].src;
+      Bus.emit('picture', files[0].src)
-      this.setState({ model: model })
-      this.props.setbanner(files[0].src);
     } else {
-      let model = this.state.model;
+      this.setState({ img: '' })
-      model.top_image = '';
+      Bus.emit('picture', '')
-      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("");
     }
   };
 
@@ -102,41 +49,9 @@ 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);
     return new Promise((resolve, reject) => {
       let path = ""
       let formdata = new FormData();
@@ -169,40 +84,32 @@ export default class edittemplate extends React.Component {
             console.log("上传中")
           }
           else {
-
             reject();
           }
         }
-
-
       };
       setTimeout(update, 500);
     });
 
   };
   componentWillUnmount() {
+    console.log(96);
     let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
-    if (oldobj && oldobj.couponList) {
+      let couponList = oldobj.couponList;
-      let couponList = oldobj.couponList
+      couponList.product_list.picture = _.cloneDeep(this.state);
-      couponList.product_list = this.state.model;
+      console.log(100,couponList);
       oldobj.couponList = couponList;
-    } else {
-      oldobj = {}
-      let couponList = {}
-      couponList.product_list = this.state.model;
-      oldobj.couponList = couponList;
-    }
     sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
   }
   render() {
+    console.log(105,this.state);
     return (
       <div>
         <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 model={this.state} ref="form1">
             <FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
               <ImageUpload
                 className="zent-image-upload-demo"
@@ -213,32 +120,30 @@ 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.img ? [{ 'src': this.state.img }] : null}
                 onError={this.onUploadError}
               />
             </FormItem>
             <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.onjumpChange(e) }} value={this.state.jumpType}>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>不跳转</RadioButton>
+                  <RadioButton  value={"0"}>不跳转</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>链接</RadioButton>
+                  <RadioButton  value={"1"}>链接</RadioButton>
                 </RadioGroup>
               </FormItem>
             </div>
-            <FormItem labelname="跳转链接:" prop="title" id="title" labelwidth="100px">
+            {
+              this.state.jumpType==1? <FormItem labelname="跳转链接:" labelwidth="100px">
               <Ipt onChange={(e) => {
-              let model2 = this.state.model;
+                this.setState({ jumpUrl: e })
-              model2.title = e;
-              this.setState({ model: model2 })
-              this.props.settitle(e)
               }}
                 onClearItem={(e) => {
-                let model2 = this.state.model;
+                  this.setState({ jumpUrl: '' })
-                model2.title = "";
-                this.setState({ model: model2 })
                 }}
-              value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
+                value={this.state.jumpUrl} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
-          </FormItem>
+            </FormItem>:null
+            }
+           
           </Form>
         </div>
       </div>

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -15,6 +15,9 @@ export default class edittemplate extends React.Component {
         <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} />
+        }
+         {
+          this.props.goodsdata.picture? <img src={this.props.goodsdata.picture.img} alt="" className="picture"/>:null
         }
         {
           this.props.goodsdata.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : this.props.goodsdata.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -175,3 +175,7 @@
     z-index: 1;
   }
 }
+//优惠券图片
+.picture{
+  width: 100%;
+}

src/pages/exchangepage/edittemplate/main.js

@@ -17,6 +17,7 @@ import {
   putSystemTemplate,
   addSystemTemplate
 } from '../../../assets/api.js'
+import Bus from '@/assets/eventBus.js'
 import PreviewEffect from '../previewEffect/main'
 import html2canvas from 'html2canvas'
 import Goodstemplate from './goodstemplate'
@@ -62,6 +63,19 @@ let product_detail = {
   button_color: '#FACD6A',
   describe: { type: '', content: '', bg_image: '' }
 }
+//优惠券商品列表
+let couponProduct_list = {
+  top_image: '',
+  list: '2',
+  font_color: '#ffffff',
+  button_color: '#FACD6A',
+  describe: { type: '', content: '', bg_image: '' },
+  picture:{
+    img:'',
+    jumpType:'0',//0不跳转  1跳转
+    jumpUrl:''
+  }
+}
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
@@ -96,6 +110,11 @@ export default class edittemplate extends React.Component {
     this.setState({ model: val })
   }
   componentDidMount() {
+    Bus.addListener('picture', (prop) => {
+      let coupongoodsConfig = this.state.product_list
+      coupongoodsConfig.picture.img = prop
+      this.setState({ product_list: coupongoodsConfig })
+    })
     setTimeout(() => {
       let img = document.getElementById('center-img')
       let center = document.getElementById('center')
@@ -154,7 +173,7 @@ export default class edittemplate extends React.Component {
       if (!couponList) {
         couponList = {}
         couponList.land = model
-        couponList.product_list = product_list
+        couponList.product_list = couponProduct_list
         couponList.product_detail = product_detail
       }
       couponList['land'].title = newEditor.title
@@ -186,12 +205,17 @@ export default class edittemplate extends React.Component {
         product_list,
         product_detail
       }
+      let sourcecouponObj = {//模板数据结构
+        land: model,
+        product_list:couponProduct_list,
+        product_detail
+      }
       whiteList = _.cloneDeep(sourceObj);
       exchangeList = _.cloneDeep(sourceObj);
-      couponList = _.cloneDeep(sourceObj);
+      couponList = _.cloneDeep(sourcecouponObj);
       obj.exchangeList = exchangeList
       obj.whiteList = whiteList
-      obj.couponList = whiteList
+      obj.couponList = couponList
       sessionStorage.setItem('editorConfig', JSON.stringify(obj))
     }
   }
@@ -729,7 +753,9 @@ export default class edittemplate extends React.Component {
                       }
                     />
                   )}
-
+                {
+                   this.state.product_list.picture? <img src={this.state.product_list.picture.img} alt="" className="picture"/>:null
+                }
                   {this.state.product_list.list == 2 ? (
                     <img
                       className='goodsPic'