diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
index ab305ac3..579bce0a 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
@@ -23,6 +23,12 @@ export default class edittemplate extends React.Component {
       this.setState({ bgimg });
     }
   }
+  bgColorFn(color){
+    this.setState({
+      bgColor: color
+    });
+      Bus.emit('globalColor',color)
+  }
   handleChange1 = (color) => {
     this.setState({
       bgColor: color
@@ -125,11 +131,11 @@ export default class edittemplate extends React.Component {
             </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>
+                <span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
+                <span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
+                <span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
+                <span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
+                <span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
                 <div className="selfset">
                   <ColorPicker className="setbgColor" color={this.state.bgColor} onChange={this.handleChange1} />
                 </div>
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index 3bb453fe..20a75aa4 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@@ -1,104 +1,206 @@
-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)
-      },
-      onCancel: () => {
+
+      onConfirm:()=>{
+
+        this.setState({selectDom:''});
+
+        Bus.emit('componentLibClose',selectDom)
 
       },
+
+      onCancel:()=>{
+
+        
+
+      },
+
       parentComponent: this
+
     });
+
   }
 
+
+
   render() {
-    let goodsConfig = this.props.goodsdata;
-    let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
-    let naVisual=bottomBar.navlist.filter(item=>item.iswitch);
+
+    let goodsConfig=this.props.goodsdata;
+
+    console.log(48,goodsConfig);
+    let naVisual=[]
+    if(goodsConfig.bottomBar){
+      naVisual=goodsConfig.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 }}>
+
+      <div className="editor-main goodstemplate"  style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
+
         {
-          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
+
+         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
+
         }
+
         <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} />
+
         }
-        {
-          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.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
+
         }
+
         {
-          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
-        }
-        {
-          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'} />
-        }
-        {
-          goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>立即兑换</button> : null
-        }
-        {
-          goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
-        }
-        {
-          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&&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
+
+          goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==1?<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,fontWeight:'bold'}}>{goodsConfig.title.text}</div></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
+
+         goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==2?<div  onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}>
+         <img src={goodsConfig.title.pic} alt="" className="title-pic"/>
+         </div>:null
+
         }
+
+        {
+
+          goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.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'} />
+
+        }
+
+        {
+
+          goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>立即兑换</button> : null
+
+        }
+
+        {
+
+          goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
+
+        }
+
+        {
+
+          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&&naVisual.length>1? <div  ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar','marketing-list')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.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
+
+        }
+
+        
+
       </div>
+
     )
+
   }
+
 }
\ No newline at end of file
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js
index 4d389b74..29ea91a3 100644
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/src/pages/exchangepage/edittemplate/main.js
@@ -1,22 +1,8 @@
 import React from 'react'
 import './main.less'
 import '../../../assets/comm.css'
-import {
-  Notify,
-  BlockLoading,
-  Button,
-  RadioGroup,
-  RadioButton
-} from 'zent'
-import {
-  uploadImg,
-  handelResponse,
-  addTheme,
-  putMyTheme,
-  putTheme,
-  putSystemTemplate,
-  addSystemTemplate
-} from '../../../assets/api.js'
+import {Notify,BlockLoading,Button,RadioGroup,RadioButton} from 'zent'
+import {uploadImg,handelResponse,addTheme,putMyTheme, putTheme,putSystemTemplate,addSystemTemplate} from '../../../assets/api.js'
 import Bus from '@/assets/eventBus.js'
 import PreviewEffect from '../previewEffect/main'
 import html2canvas from 'html2canvas'
@@ -900,13 +886,18 @@ 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' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
+                <div className='goodsList-item'>
+                <Goodstemplate
+                  opendesc={(c) => this.setState({ activeshow: true })}
+                  goodsdata={this.state.product_list}
+                />
+                </div>
+                {/* <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' }}>
                   {
                     this.state.product_list.search&&this.state.product_list.search.iswitch ? <SearchBarView searchConfig={this.state.product_list.search} /> : null
                   }
@@ -1000,7 +991,7 @@ export default class edittemplate extends React.Component {
                    {
                       this.state.product_list.bottomBar&&this.state.product_list.bottomBar.iswitch? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
                     }
-                </div>
+                </div> */}
               </div>
             </div>
             <div className='item'>
diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less
index 9effa13c..2f062f4d 100644
--- a/src/pages/exchangepage/edittemplate/main.less
+++ b/src/pages/exchangepage/edittemplate/main.less
@@ -589,119 +589,135 @@
 				&.activeNav {
 					border: 5px solid #DDEEFF;
 				}
-
 				.goodsList-item {
-					position: relative;
-					height: 100%;
-					overflow: hidden;
-					.topbanner {
-						width: 100%;
-						height: 50px;
+					.goodstemplate{
+						transform: scale(0.315);
+						transform-origin: 0 0;
 					}
-					>.content-title{
-						position: relative;
-						z-index: 999;
-						height: 20px;
-						padding:0 8px; 
-						font-size: 8px;
-					  }
-					  .parting-line{
-						height:15px;
-					}
-                    .searchBar{
-						transform: scale(0.8);
-						font-size: 10px;
-						padding: 0 5px; 
-						border-radius: 10px;
-					}
-					.marketing{
-						width: 10px;
-					}
-					.bottom_Img {
-						width: 100%;
-					}
-
-					.bottom_activeTip {
-						width: 7.2vw;
-						margin-left: 0.4vw;
-						padding: 6px;
-						background: #fff;
-						border-radius: 2px;
-						box-shadow: 1px 1px 13px 2px #f1f2f3;
-						box-sizing: border-box;
-						line-height: 15px;
-						padding-bottom: 60px;
-						font-size: 8px;
-					}
-
-					.susactive_Tip {
-						position: absolute;
-						top: 14px;
-						right: 0;
-						width: 14px;
-						// height: 24px;
-					}
-
-					.preBtn {
-						position: absolute;
-						width: 14px;
-						height: 14px;
-						top: 4%;
-						left: 4%;
-					}
-
-					.goodsPic,
-					.goodsPicMatrax {
-						width: 90%;
-						margin-left: 5%;
-						position: relative;
-						margin-top: -20px;
-					}
-                  
-					.bottom_exchageBtn {
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						margin: 0 5% 3% !important;
-					}
-
-					.exchageBtn {
-						width: 90%;
-						height: 30px;
-						font-size: 8px;
-						color: #fff;
-						height: 20px;
-						background: #E8EAEC;
-						border-radius: 15px;
-						margin: 10% 5%;
-					}
-					.bottomBar-view{
-						width: 100%;
-						height: 30px;
-						position: absolute;
-						bottom: 0;
-						display: flex;
-						justify-content: space-evenly;
-					}
-					.bottomBar-view>li{
-						flex: 1;
-						display: flex;
-						flex-direction: column;
-						align-items: center;
-						justify-content: center;
-						cursor: pointer;
-					
-					}
-					.bottomBar-view>li>img{
-						width: 8px;
-						height: 8px;
-					}
-					.bottomBar-view>li>span{
-						font-size: 6px;
+					.editor-main{
+						top: 0;
+						img{
+							width: auto!important;
+						}
 					}
 					
-
 				}
+			// 	.goodsList-item {
+			// 		position: relative;
+			// 		height: 100%;
+			// 		overflow: hidden;
+			// 		.goodstemplate{
+			// 			transform: scale(0.31);
+			// 			transform-origin: 0 0;
+			// 		}
+			// 		.topbanner {
+			// 			width: 100%;
+			// 			height: 50px;
+			// 		}
+			// 		>.content-title{
+			// 			position: relative;
+			// 			z-index: 999;
+			// 			height: 20px;
+			// 			padding:0 8px; 
+			// 			font-size: 8px;
+			// 		  }
+			// 		  .parting-line{
+			// 			height:15px;
+			// 		}
+            //         .searchBar{
+			// 			transform: scale(0.8);
+			// 			font-size: 10px;
+			// 			padding: 0 5px; 
+			// 			border-radius: 10px;
+			// 		}
+			// 		.marketing{
+			// 			width: 10px;
+			// 		}
+			// 		.bottom_Img {
+			// 			width: 100%;
+			// 		}
+
+			// 		.bottom_activeTip {
+			// 			width: 7.2vw;
+			// 			margin-left: 0.4vw;
+			// 			padding: 6px;
+			// 			background: #fff;
+			// 			border-radius: 2px;
+			// 			box-shadow: 1px 1px 13px 2px #f1f2f3;
+			// 			box-sizing: border-box;
+			// 			line-height: 15px;
+			// 			padding-bottom: 60px;
+			// 			font-size: 8px;
+			// 		}
+
+			// 		.susactive_Tip {
+			// 			position: absolute;
+			// 			top: 14px;
+			// 			right: 0;
+			// 			width: 14px;
+			// 			// height: 24px;
+			// 		}
+
+			// 		.preBtn {
+			// 			position: absolute;
+			// 			width: 14px;
+			// 			height: 14px;
+			// 			top: 4%;
+			// 			left: 4%;
+			// 		}
+
+			// 		.goodsPic,
+			// 		.goodsPicMatrax {
+			// 			width: 90%;
+			// 			margin-left: 5%;
+			// 			position: relative;
+			// 			margin-top: -20px;
+			// 		}
+                  
+			// 		.bottom_exchageBtn {
+			// 			position: absolute;
+			// 			bottom: 0;
+			// 			left: 0;
+			// 			margin: 0 5% 3% !important;
+			// 		}
+
+			// 		.exchageBtn {
+			// 			width: 90%;
+			// 			height: 30px;
+			// 			font-size: 8px;
+			// 			color: #fff;
+			// 			height: 20px;
+			// 			background: #E8EAEC;
+			// 			border-radius: 15px;
+			// 			margin: 10% 5%;
+			// 		}
+			// 		.bottomBar-view{
+			// 			width: 100%;
+			// 			height: 30px;
+			// 			position: absolute;
+			// 			bottom: 0;
+			// 			display: flex;
+			// 			justify-content: space-evenly;
+			// 		}
+			// 		.bottomBar-view>li{
+			// 			flex: 1;
+			// 			display: flex;
+			// 			flex-direction: column;
+			// 			align-items: center;
+			// 			justify-content: center;
+			// 			cursor: pointer;
+					
+			// 		}
+			// 		.bottomBar-view>li>img{
+			// 			width: 8px;
+			// 			height: 8px;
+			// 		}
+			// 		.bottomBar-view>li>span{
+			// 			font-size: 6px;
+			// 		}
+					
+
+			// 	}
 			}
 		}
 	}