完成标题文字Tab切换，配置栏新增传图，优化预览区代码

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

@@ -13,10 +13,10 @@ export default class Searchbar extends React.Component {
     this.state = {
       switch:false,
       shape: 'circular',
-      textAlign: 'left',
+      textAlign: 'center',
       borderColor: '#333',
       bgColor:'#a00',
-      fontColor:'#333',
+      fontColor:'#fff',
       placeholder: '请输入关键字搜索'
     }
   }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ColorPicker, Notify, RadioGroup, RadioButton } from 'zent';
+import { ColorPicker,ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
 import "@/assets/comm.css"
 import Form from "@/components/form/main"
 import FormItem from "@/components/form-item/main"
@@ -12,10 +12,12 @@ export default class Title extends React.Component {
     super(props)
     this.state = {
       switch:false,
-      text: '',
+      text: '商品标题',
       textAlign: 'left',
       fontColor: '#333',
-      fontSize: 1
+      fontSize: 1,
+      comstyle:1,
+      pic:''
     }
   }
   componentWillMount(e) {
@@ -50,6 +52,73 @@ export default class Title extends React.Component {
     this.setState({ fontSize: e.target.value })
     Bus.emit('fontSize', e.target.value)
   }
+  styleChange(e){
+    this.setState({ comstyle: e.target.value })
+    Bus.emit('comstyle', e.target.value)
+  }
+  onUploadChange(files) {
+    if (files.length > 0 && files[0].status == "success") {
+      this.setState({ pic: files[0].src })
+      Bus.emit('titlePic', files[0].src)
+    } else {
+      this.setState({ pic: ''})
+      Bus.emit('titlePic','')
+    }
+  };
+
+  onUploadError = (type, data) => {
+    if (type === 'overMaxAmount') {
+      Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
+    } else if (type === 'overMaxSize') {
+      Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
+    }
+  };
+  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'));
@@ -60,13 +129,20 @@ export default class Title extends React.Component {
   }
   render() {
     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">
+          <FormItem required={false} labelname="组件样式:"   labelwidth="100px">
+              <RadioGroup onChange={(e) => { this.styleChange(e) }} value={this.state.comstyle}>
+                <RadioButton   value={1}>文字</RadioButton>
+                <RadioButton  value={2}>图片</RadioButton>
+              </RadioGroup>
+            </FormItem>
+            {
+              this.state.comstyle==1?<div>
                 <FormItem labelname="标题文字:"   labelwidth="100px">
               <Ipt onChange={(e) => {
                 this.setState({ text: e })
@@ -104,6 +180,22 @@ export default class Title extends React.Component {
                 <RadioButton  value={"big"}>A+</RadioButton>
               </RadioGroup>
             </FormItem>
+              </div>:<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
+              <ImageUpload
+                className="zent-image-upload-demo"
+                maxSize={5 * 1024 * 1024}
+                maxAmount={1}
+                multiple
+                sortable
+                tips="单张图片不超过 5M"
+                onChange={(e) => { this.onUploadChange(e) }}
+                onUpload={this.onUpload}
+                defaultFileList={this.state.pic ? [{ 'src': this.state.pic }] : null}
+                onError={this.onUploadError}
+              />
+            </FormItem>
+            }
+            
 
           </Form>
         </div>

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -48,25 +48,31 @@ export default class edittemplate extends React.Component {
 
   render() {
     let goodsConfig = this.props.goodsdata;
-    console.log(48,goodsConfig);
+    let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
     return (
-      <div className="editor-main goodstemplate"  style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:'#F2F7F8' }}>
+      <div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
         {
-         goodsConfig.search&&goodsConfig.search.iswitch?
+          search && search.iswitch ?
-         <div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
+            <div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={search} /></div> : null
         }
         <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
         {
           !goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
         }
         {
-          goodsConfig.picture&&goodsConfig.picture.iswitch? <div  onClick={e=>this.customComponent(e,'picture','marketing-tupian')} ref="picture"  className={this.state.selectDom=='picture'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
+          picture && picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={picture.img} alt="" className="picture" /></div> : null
         }
         {
-          goodsConfig.title&&goodsConfig.title.iswitch?<div  onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div  className={goodsConfig.title.textAlign +'  content-title  '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor}}>{goodsConfig.title.text}</div></div>:null
+          title && title.iswitch && title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
+            <div className={title.textAlign + '  content-title  ' +title.fontSize} style={{ color: title.fontColor, fontWeight: 'bold' }}>{title.text}</div></div> : null
         }
         {
-          goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
+          title && title.iswitch && title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
+            <img src={title.pic} className="title-pic" />
+          </div> : null
+        }
+        {
+          (title && title.iswitch && title.text||title.pic) || picture && picture.iswitch && picture.img ? <div className="parting-line"></div> : null
         }
         {
           goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.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'} />
@@ -81,7 +87,7 @@ export default class edittemplate extends React.Component {
           goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
         }
         {
-          goodsConfig.bottomBar&&goodsConfig.bottomBar.iswitch? <div  ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar','marketing-list')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>:null
+          bottomBar && bottomBar.iswitch ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={bottomBar} /></div> : null
 
         }
         {
@@ -91,7 +97,6 @@ export default class edittemplate extends React.Component {
             <span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
           </div> : null
         }
-        
       </div>
     )
   }

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -129,6 +129,9 @@
   background: rgba(25,133,255,.2);
   content: "";
 }
+.title-pic{
+  height:40px;
+}
 .selectBottomBorder {
   position: absolute;
   left: 0;

src/pages/exchangepage/edittemplate/main.js

@@ -85,18 +85,20 @@ let couponProduct_list = {
   search: {
     iswitch: false,
     shape: 'circular',
-    textAlign: 'left',
+    textAlign: 'center',
     borderColor: '#333',
     bgColor:'#a00',
-    fontColor:'#333',
+    fontColor:'#fff',
     placeholder: '请输入关键字搜索'
   },
   title: {
     iswitch: false,
-    text: 'circular',
+    text: '商品标题',
     textAlign: 'left',
     fontColor: '#333',
-    fontSize: 1
+    fontSize: 1,
+    comstyle:1,
+    pic:''
   },
   bottomBar: {
     iswitch:false,
@@ -225,6 +227,17 @@ export default class edittemplate extends React.Component {
       this.setState({ product_list: searchConfig })
     })
     //标题设置
+    Bus.addListener('comstyle', (prop) => {
+      let titleConfig = this.state.product_list
+      titleConfig.title.comstyle = prop
+      this.setState({ product_list: titleConfig })
+    })
+    Bus.addListener('titlePic', (prop) => {
+      let titleConfig = this.state.product_list
+      titleConfig.title.pic = prop
+      this.setState({ product_list: titleConfig })
+    })
+    
     Bus.addListener('title', (prop) => {
       let titleConfig = this.state.product_list
       titleConfig.title.text = prop