From 3063dc19987d1e592544e801c57ecb089c502d76 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com>
Date: Thu, 8 Sep 2022 18:09:00 +0800
Subject: [PATCH 1/5] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E6=90=9C=E7=B4=A2=E6=A0=8F=E6=96=B0=E5=A2=9E=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E9=A2=9C=E8=89=B2=EF=BC=8C=E8=BE=93=E5=85=A5=E6=96=87?=
 =?UTF-8?q?=E5=AD=97=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/comm.css                           |  6 +--
 .../goodsPage/componentLib/main.js            |  5 +-
 .../goodsPage/config/searchBar.js             | 52 +++++++++++++++++--
 .../edittemplate/couponConfig/comm.less       | 10 ++--
 .../edittemplate/couponConfig/searchBar.js    |  7 +--
 .../edittemplate/goodstemplate.less           |  6 +--
 src/pages/exchangepage/edittemplate/main.js   | 12 +++++
 src/pages/exchangepage/edittemplate/main.less |  2 +-
 8 files changed, 82 insertions(+), 18 deletions(-)

diff --git a/src/assets/comm.css b/src/assets/comm.css
index c40edada..bbbeae09 100644
--- a/src/assets/comm.css
+++ b/src/assets/comm.css
@@ -172,15 +172,15 @@ input {
 }
 
 .center {
-  text-align: center;
+   justify-content: center!important;;
 }
 
 .left {
-  text-align: left;
+  justify-content: flex-start!important;;
 }
 
 .right {
-  text-align: right;
+  justify-content: flex-end!important;;
 }
 
 .square {
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
index 1a7c6a56..76103274 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
@@ -37,7 +37,10 @@ export default class componentLib extends React.Component {
   componentWillUnmount() {}
   propcomponentName(item){
     this.props.componentName(item.name);
-    Bus.emit('componentLib',item)
+    if(item.name){
+      Bus.emit('componentLib',item)
+    }
+   
   }
   render() {
     return (
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
index c77686c4..b8ced255 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
@@ -15,6 +15,8 @@ export default class Searchbar extends React.Component {
       shape: 'circular',
       textAlign: 'left',
       borderColor: '#333',
+      bgColor:'#a00',
+      fontColor:'#333',
       placeholder: '请输入关键字搜索'
     }
   }
@@ -43,11 +45,31 @@ export default class Searchbar extends React.Component {
     });
     Bus.emit('borderColor', color)
   }
+  changebgColor = (color) => {
+    this.setState({
+      bgColor: color
+    });
+    Bus.emit('searchbgColor', color)
+  }
+  changefontColor = (color) => {
+    this.setState({
+      fontColor: color
+    });
+    Bus.emit('searchfontColor', color)
+  }
 
   borderColorFn(cor) {
     this.setState({ borderColor: cor });
     Bus.emit('borderColor', cor)
   }
+  bgColorFn(cor) {
+    this.setState({ bgColor: cor });
+    Bus.emit('searchbgColor', cor)
+  }
+  fontColorFn(cor) {
+    this.setState({ fontColor: cor });
+    Bus.emit('searchfontColor', cor)
+  }
   componentWillUnmount() {
     let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
     let couponList = oldobj.couponList;
@@ -56,7 +78,7 @@ export default class Searchbar extends React.Component {
     sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
   }
   render() {
-    let { shape, textAlign, borderColor, placeholder } = this.state;
+    let { shape, textAlign, borderColor, placeholder,bgColor,fontColor } = this.state;
     return (
       <div className="assembly">
         <div className='control page-title-control'>
@@ -80,7 +102,7 @@ export default class Searchbar extends React.Component {
                 <RadioButton value={"right"}>居右</RadioButton>
               </RadioGroup>
             </FormItem>
-            <FormItem labelname="框体颜色:" labelwidth="80px">
+            <FormItem required={false} labelname="框体颜色:" labelwidth="80px">
               <div className="colorItemfont dfleac">
                 <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.borderColorFn('#fff') }}></span>
                 <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.borderColorFn('#04C160') }}></span>
@@ -92,7 +114,31 @@ export default class Searchbar extends React.Component {
                 </div>
               </div>
             </FormItem>
-            <FormItem labelname="提示文字:" prop="title" id="title" labelwidth="100px">
+            <FormItem required={false} labelname="背景颜色:" labelwidth="80px">
+              <div className="colorItemfont dfleac">
+                <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
+                <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
+                <span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
+                <span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
+                <span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
+                <div className="selfset">
+                  <ColorPicker className="setbgColor" color={bgColor} onChange={this.changebgColor} />
+                </div>
+              </div>
+            </FormItem>
+            <FormItem required={false} labelname="文字颜色:" labelwidth="80px">
+              <div className="colorItemfont dfleac">
+                <span style={{ border: '1px solid #f1f2f3' }} className={borderColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontColorFn('#fff') }}></span>
+                <span className={borderColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontColorFn('#04C160') }}></span>
+                <span className={borderColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontColorFn('#AE99D3') }}></span>
+                <span className={borderColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontColorFn('#FACD6A') }}></span>
+                <span className={borderColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontColorFn('#FE7962') }}></span>
+                <div className="selfset">
+                  <ColorPicker className="setbgColor" color={fontColor} onChange={this.changefontColor} />
+                </div>
+              </div>
+            </FormItem>
+            <FormItem required={false} labelname="提示文字:"  labelwidth="100px">
               <Ipt onChange={(e) => {
                 this.setState({ placeholder: e })
                 Bus.emit('placeholder', e)
diff --git a/src/pages/exchangepage/edittemplate/couponConfig/comm.less b/src/pages/exchangepage/edittemplate/couponConfig/comm.less
index 8188ee93..b03c6194 100644
--- a/src/pages/exchangepage/edittemplate/couponConfig/comm.less
+++ b/src/pages/exchangepage/edittemplate/couponConfig/comm.less
@@ -1,14 +1,16 @@
+.searchBar-container{
+    padding: 4px 0;
+    box-sizing: border-box;
+}
 .searchBar{
     display: flex;
-    justify-content: flex-end;
-    justify-content: space-between;
-    padding:0 15px;
+    justify-content: center;
+    padding:0 10px;
     box-sizing: border-box;
     i{
         width: 16px;
     }
     .placeholder{
-        flex: 1;
         white-space:nowrap;       /* 不换行 */
         overflow:hidden;          /* 内容超出宽度时隐藏超出部分的内容 */
 
diff --git a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
index 342c1761..1e779896 100644
--- a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
+++ b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
@@ -7,15 +7,16 @@ export default class searchBar extends React.Component {
     }
     render() {
         let searchConfig=this.props.searchConfig;
-        console.log(10,searchConfig);
         return (
-            <div className={searchConfig.shape +' searchBar'} style={{border:'1px solid '+searchConfig.borderColor}}>
+            <div className="searchBar-container" style={{background:searchConfig.bgColor}}>
+            <div className={searchConfig.shape +' searchBar  '+searchConfig.textAlign} style={{background:searchConfig.borderColor,color:searchConfig.fontColor}}>
                 <i className='marketing marketing-sousuo' />
-                <div className={searchConfig.textAlign +'  placeholder'}>
+                <div className='placeholder'>
                     {searchConfig.placeholder}
                 </div>
 
             </div>
+            </div>
         )
     }
 }
\ No newline at end of file
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less
index d745fb74..814628d7 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.less
@@ -118,7 +118,7 @@
 }
 
 .goodstemplate {
-  overflow-y: auto;
+  // overflow-y: auto;
 .selectBorder {
   z-index: 2;
   -webkit-box-sizing: border-box;
@@ -153,12 +153,12 @@
 
   .searchBar {
     width: 80%;
-    margin: 2% 10%;
+    margin: 2% 15%;
     height: 40px;
     line-height: 40px;
     padding-left: 15px;
     box-sizing: border-box;
-    border: 1px solid #333;
+    border:0;
     border-radius: 20px;
   }
 }
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js
index b02791b6..04bf0d15 100644
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/src/pages/exchangepage/edittemplate/main.js
@@ -87,6 +87,8 @@ let couponProduct_list = {
     shape: 'circular',
     textAlign: 'left',
     borderColor: '#333',
+    bgColor:'#a00',
+    fontColor:'#333',
     placeholder: '请输入关键字搜索'
   },
   title: {
@@ -212,6 +214,16 @@ export default class edittemplate extends React.Component {
       searchConfig.search.borderColor = prop
       this.setState({ product_list: searchConfig })
     })
+    Bus.addListener('searchbgColor', (prop) => {
+      let searchConfig = this.state.product_list
+      searchConfig.search.bgColor = prop
+      this.setState({ product_list: searchConfig })
+    })
+    Bus.addListener('searchfontColor', (prop) => {
+      let searchConfig = this.state.product_list
+      searchConfig.search.fontColor = prop
+      this.setState({ product_list: searchConfig })
+    })
     //标题设置
     Bus.addListener('title', (prop) => {
       let titleConfig = this.state.product_list
diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less
index 5c031010..9effa13c 100644
--- a/src/pages/exchangepage/edittemplate/main.less
+++ b/src/pages/exchangepage/edittemplate/main.less
@@ -8,7 +8,7 @@
 	// background-color: #f5f7f8;
 	height: 100%;
 	left: 0;
-	margin: 0 485px 0 250px;
+	margin: 0 430px 0 325px;
 	overflow-y: scroll;
 	position: absolute;
 	right: 0;

From 90635e1a83020a85e10a603cc7f7e8212fa23ef1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com>
Date: Thu, 8 Sep 2022 18:09:31 +0800
Subject: [PATCH 2/5] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=90=9C=E7=B4=A2?=
 =?UTF-8?q?=E6=A0=8F=E9=85=8D=E7=BD=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/exchangepage/edittemplate/couponConfig/searchBar.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
index 1e779896..5979ece3 100644
--- a/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
+++ b/src/pages/exchangepage/edittemplate/couponConfig/searchBar.js
@@ -14,7 +14,6 @@ export default class searchBar extends React.Component {
                 <div className='placeholder'>
                     {searchConfig.placeholder}
                 </div>
-
             </div>
             </div>
         )

From ab98bd7872c70eacd3209a3d525413b0f301f772 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com>
Date: Fri, 9 Sep 2022 11:11:40 +0800
Subject: [PATCH 3/5] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=A0=87=E9=A2=98?=
 =?UTF-8?q?=E6=96=87=E5=AD=97Tab=E5=88=87=E6=8D=A2=EF=BC=8C=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=A0=8F=E6=96=B0=E5=A2=9E=E4=BC=A0=E5=9B=BE=EF=BC=8C?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E9=A2=84=E8=A7=88=E5=8C=BA=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goodsPage/config/searchBar.js             |   4 +-
 .../couponTemplate/goodsPage/config/title.js  | 104 +++++++++++++++++-
 .../edittemplate/goodstemplate.js             |  83 +++++++-------
 .../edittemplate/goodstemplate.less           |   3 +
 src/pages/exchangepage/edittemplate/main.js   |  21 +++-
 5 files changed, 164 insertions(+), 51 deletions(-)

diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
index b8ced255..6739a7c5 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
+++ b/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: '请输入关键字搜索'
     }
   }
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js
index 6e3c52fe..f7828b4e 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/title.js
+++ b/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,14 +129,21 @@ 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 labelname="标题文字:"   labelwidth="100px">
+          <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 })
                 Bus.emit('title', 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>
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index a6f8828d..99f95c5c 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@@ -1,72 +1,78 @@
-import React  from 'react';
+import React from 'react';
 import "./main.less"
 import "../../../assets/comm.css"
 import './goodstemplate.less'
 import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
 import BottomBarView from './couponConfig/bottomBar' //底部栏
-import {Sweetalert} from 'zent'
+import { Sweetalert } from 'zent'
 import Bus from '@/assets/eventBus.js'
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
-    this.state={
-      clientY:0,
-      selectDom:'',
-      icon:''
+    this.state = {
+      clientY: 0,
+      selectDom: '',
+      icon: ''
     }
   }
   opendescFn() {
     this.props.opendesc(true)
   }
-  customComponent(e,name,icon){
+  customComponent(e, name, icon) {
     //getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
-    let b=this.refs[name];
-    let offset_top=this.refs[name].getBoundingClientRect().top;
-    this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
-    if(name=='searchBar'){
-      this.setState({clientY:0});
+    let b = this.refs[name];
+    let offset_top = this.refs[name].getBoundingClientRect().top;
+    this.setState({ clientY: (offset_top - 125), selectDom: name, icon: icon });
+    if (name == 'searchBar') {
+      this.setState({ clientY: 0 });
     }
-    if(name=='bottomBar'){
-      this.setState({clientY:600});
+    if (name == 'bottomBar') {
+      this.setState({ clientY: 600 });
     }
   }
-  deleteFn(){
-    let selectDom=this.state.selectDom;//需删除组件名称
+  deleteFn() {
+    let selectDom = this.state.selectDom;//需删除组件名称
     Sweetalert.confirm({
-      title:'确认信息',
+      title: '确认信息',
       content: <p>确认删除该模块？</p>,
-      onConfirm:()=>{
-        this.setState({selectDom:''});
-        Bus.emit('componentLibClose',selectDom)
+      onConfirm: () => {
+        this.setState({ selectDom: '' });
+        Bus.emit('componentLibClose', selectDom)
       },
-      onCancel:()=>{
-        
+      onCancel: () => {
+
       },
       parentComponent: this
     });
   }
 
   render() {
-    let goodsConfig=this.props.goodsdata;
-    console.log(48,goodsConfig);
+    let goodsConfig = this.props.goodsdata;
+    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?
-         <div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
+          search && search.iswitch ?
+            <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,17 +87,16 @@ 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
+
         }
         {
-          this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
-          <i className={'marketing '+this.state.icon}></i>
-          <b className="split">|</b>
-          <span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
-         </div>:null
+          this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
+            <i className={'marketing ' + this.state.icon}></i>
+            <b className="split">|</b>
+            <span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
+          </div> : null
         }
-        
       </div>
     )
   }
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less
index 814628d7..fec19c6a 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/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;
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js
index 04bf0d15..aad13b2b 100644
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/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

From 5d052825ea2c8f72066c8877e156ca0a0b109297 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com>
Date: Fri, 9 Sep 2022 11:30:53 +0800
Subject: [PATCH 4/5] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E8=83=8C=E6=99=AF=E5=9B=BE=E6=96=B0=E5=A2=9E=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E9=A2=9C=E8=89=B2=E9=85=8D=E7=BD=AE=EF=BC=8C=E6=B8=B2?=
 =?UTF-8?q?=E6=9F=93=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goodsPage/componentLib/main.js            |  1 +
 .../goodsPage/config/backPicture.js           | 39 ++++++++++++++-----
 .../goodsPage/config/searchBar.js             |  2 +-
 .../edittemplate/goodstemplate.js             |  2 +-
 .../edittemplate/goodstemplate.less           |  1 -
 src/pages/exchangepage/edittemplate/main.js   | 11 +++++-
 6 files changed, 41 insertions(+), 15 deletions(-)

diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
index 76103274..bd23a85e 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
@@ -36,6 +36,7 @@ export default class componentLib extends React.Component {
   //组件将要销毁阶段
   componentWillUnmount() {}
   propcomponentName(item){
+    console.log(39,item);
     this.props.componentName(item.name);
     if(item.name){
       Bus.emit('componentLib',item)
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
index 8e9e6ed8..ab305ac3 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
+import { ImageUpload, ColorPicker, Notify, RadioGroup, RadioButton } from 'zent';
 import "@/assets/comm.css"
 import Form from "@/components/form/main"
 import FormItem from "@/components/form-item/main"
@@ -11,25 +11,32 @@ export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      bgimg:''
+      bgimg: '',
+      bgColor: '#f2f3f4'
     }
   }
 
   componentWillMount(e) {
     let config = JSON.parse(sessionStorage.getItem('editorConfig'));
     if (config && config.couponList && config.couponList.product_list) {
-      let {bgimg}=config.couponList.product_list.backgroundImg;
-      this.setState({ bgimg});
+      let { bgimg } = config.couponList.product_list.backgroundImg;
+      this.setState({ bgimg });
     }
   }
+  handleChange1 = (color) => {
+    this.setState({
+      bgColor: color
+    });
+      Bus.emit('globalColor',color)
+  }
   //顶部banner
   onUploadChange(files) {
     if (files.length > 0 && files[0].status == "success") {
       this.setState({ bgimg: files[0].src })
       Bus.emit('bgImg', files[0].src)
     } else {
-      this.setState({ bgimg: ''})
-      Bus.emit('bgImg','')
+      this.setState({ bgimg: '' })
+      Bus.emit('bgImg', '')
     }
   };
 
@@ -89,9 +96,9 @@ export default class edittemplate extends React.Component {
 
   componentWillUnmount() {
     let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
-      let couponList = oldobj.couponList;
-      couponList.product_list.backgroundImg = _.cloneDeep(this.state);
-      oldobj.couponList = couponList;
+    let couponList = oldobj.couponList;
+    couponList.product_list.backgroundImg = _.cloneDeep(this.state);
+    oldobj.couponList = couponList;
     sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
   }
   render() {
@@ -102,7 +109,7 @@ export default class edittemplate extends React.Component {
         </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">
+            <FormItem labelname="覆盖背景:"  labelwidth="80px">
               <ImageUpload
                 className="zent-image-upload-demo"
                 maxSize={5 * 1024 * 1024}
@@ -116,6 +123,18 @@ export default class edittemplate extends React.Component {
                 onError={this.onUploadError}
               />
             </FormItem>
+            <FormItem labelname="背景颜色:" labelwidth="80px">
+              <div className="colorItemfont dfleac">
+                <span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColor('#fff') }}></span>
+                <span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColor('#04C160') }}></span>
+                <span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColor('#AE99D3') }}></span>
+                <span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColor('#FACD6A') }}></span>
+                <span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColor('#FE7962') }}></span>
+                <div className="selfset">
+                  <ColorPicker className="setbgColor" color={this.state.bgColor} onChange={this.handleChange1} />
+                </div>
+              </div>
+            </FormItem>
           </Form>
         </div>
       </div>
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
index 6739a7c5..5a4cc81f 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
@@ -16,7 +16,7 @@ export default class Searchbar extends React.Component {
       textAlign: 'center',
       borderColor: '#333',
       bgColor:'#a00',
-      fontColor:'#fff',
+      fontColor:'#f3f4f5',
       placeholder: '请输入关键字搜索'
     }
   }
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index 99f95c5c..a7bdd09e 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@@ -50,7 +50,7 @@ export default class edittemplate extends React.Component {
     let goodsConfig = this.props.goodsdata;
     let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
     return (
-      <div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
+      <div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` :backgroundImg.bgColor }}>
         {
           search && search.iswitch ?
             <div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={search} /></div> : null
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less
index fec19c6a..8525b1bd 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.less
@@ -159,7 +159,6 @@
     margin: 2% 15%;
     height: 40px;
     line-height: 40px;
-    padding-left: 15px;
     box-sizing: border-box;
     border:0;
     border-radius: 20px;
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js
index aad13b2b..4d389b74 100644
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/src/pages/exchangepage/edittemplate/main.js
@@ -80,7 +80,8 @@ let couponProduct_list = {
   },
   backgroundImg: {
     iswitch:false,
-    bgImg: ''
+    bgImg: '',
+    bgColor:'#f2f3f4'
   },
   search: {
     iswitch: false,
@@ -88,7 +89,7 @@ let couponProduct_list = {
     textAlign: 'center',
     borderColor: '#333',
     bgColor:'#a00',
-    fontColor:'#fff',
+    fontColor:'#f3f4f5',
     placeholder: '请输入关键字搜索'
   },
   title: {
@@ -196,6 +197,12 @@ export default class edittemplate extends React.Component {
       bgImgConfig.backgroundImg.bgImg = prop
       this.setState({ product_list: bgImgConfig })
     })
+    Bus.addListener('globalColor', (prop) => {
+      let bgImgConfig = this.state.product_list
+      bgImgConfig.backgroundImg.bgColor = prop
+      this.setState({ product_list: bgImgConfig })
+    })
+    
     Bus.addListener('shape', (prop) => {
       let searchConfig = this.state.product_list
       searchConfig.search.shape = prop

From f2637a0dea909046abbfd1fac5d58fd4b969000c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com>
Date: Fri, 9 Sep 2022 11:42:21 +0800
Subject: [PATCH 5/5] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=BA=95=E9=83=A8=E6=A0=8F=E9=99=90=E5=88=B6=EF=BC=8C?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E4=B8=80=E4=B8=AA=E6=97=B6=EF=BC=8C=E4=B8=8D?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BAbottomBar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goodsPage/config/bottomBar.js               | 17 +++++++----------
 .../exchangepage/edittemplate/goodstemplate.js  |  5 +++--
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js
index c5fedfae..8a719ce9 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js
@@ -197,11 +197,8 @@ export default class edittemplate extends React.Component {
             <div className="component-item">
               <div className="v-editItem">
                 <span>首页</span>
-                <p className="dflexacsa"><span className="showType">显示</span>
-                  <Switch
-                    checked={this.state.navlist[0].iswitch}
-                    onChange={checked=>this.handleChangeStatus(0,checked)}
-                  /></p>
+                <p className="dflexacsa"><span>显示</span>
+                </p>
               </div>
               <FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
                 <div className="dflexacsa">
@@ -246,13 +243,13 @@ export default class edittemplate extends React.Component {
                     this.setState({ navlist: model2 })
                     Bus.emit('navlist', model2)
                   }}
-                  value={this.state.navlist[0].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
+                  value={this.state.navlist[0].text} placeholder={"首页"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
               </FormItem>
             </div>
             <div className="component-item">
               <div className="v-editItem">
                 <span>订单</span>
-                <p className="dflexacsa"><span className="showType">显示</span>
+                <p className="dflexacsa"><span className="showType">{this.state.navlist[1].iswitch?'显示':'隐藏'}</span>
                   <Switch
                      checked={this.state.navlist[1].iswitch}
                      onChange={checked=>this.handleChangeStatus(1,checked)}
@@ -301,13 +298,13 @@ export default class edittemplate extends React.Component {
                     Bus.emit('navlist', model2)
                     this.setState({ navlist: model2 })
                   }}
-                  value={this.state.navlist[1].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
+                  value={this.state.navlist[1].text} placeholder={"订单"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
               </FormItem>
             </div>
             <div className="component-item">
               <div className="v-editItem">
                 <span>我的券</span>
-                <p className="dflexacsa"><span className="showType">显示</span>
+                <p className="dflexacsa"><span className="showType">{this.state.navlist[2].iswitch?'显示':'隐藏'}</span>
                   <Switch
                      checked={this.state.navlist[2].iswitch}
                      onChange={checked=>this.handleChangeStatus(2,checked)}
@@ -356,7 +353,7 @@ export default class edittemplate extends React.Component {
                     this.setState({ navlist:model2})
                     Bus.emit('navlist', model2)
                   }}
-                  value={this.state.navlist[2].text} placeholder={"请输入"} labelWidth={'0px'} maxLength={4} height={'36px'} width={'300px'} alignment={'left'} />
+                  value={this.state.navlist[2].text} placeholder={"我的券"} labelWidth={'0px'} maxLength={5} height={'36px'} width={'300px'} alignment={'left'} />
               </FormItem>
             </div>
             <div className="color-control">
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index a7bdd09e..3bb453fe 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@@ -12,7 +12,7 @@ export default class edittemplate extends React.Component {
     this.state = {
       clientY: 0,
       selectDom: '',
-      icon: ''
+      icon: '',
     }
   }
   opendescFn() {
@@ -49,6 +49,7 @@ export default class edittemplate extends React.Component {
   render() {
     let goodsConfig = this.props.goodsdata;
     let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
+    let naVisual=bottomBar.navlist.filter(item=>item.iswitch);
     return (
       <div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` :backgroundImg.bgColor }}>
         {
@@ -87,7 +88,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
         }
         {
-          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
+          bottomBar && bottomBar.iswitch&&naVisual.length>1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={bottomBar} /></div> : null
 
         }
         {