完成编辑器配置新增/编辑预览商品列表页搜索栏配置，背景图融入/底部栏，兼容性样式处理

src/pages/exchangepage/edittemplate/couponConfig/comm.less

@@ -37,8 +37,8 @@
 
 }
 .bottomBar-view>li>img{
-    width: 20px;
+    width: 20px!important;
-    height: 20px;
+    height: 20px!important;
 }
 .bottomBar-view>li>span{
     padding-top: 5px;

src/pages/exchangepage/edittemplate/goodstemplate.js

@@ -95,9 +95,7 @@ export default class edittemplate extends React.Component {
 
 
   render() {
-
     let goodsConfig=this.props.goodsdata;
-
     console.log(48,goodsConfig);
     let naVisual=[]
     if(goodsConfig.bottomBar){
@@ -176,11 +174,7 @@ export default class edittemplate extends React.Component {
         }
 
         {
-
           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
-
-         
-
         }
 
         {

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -23,6 +23,7 @@
     height: 40px;
     line-height: 40px;
     padding: 0 13px;
+    display: flex;
   }
  .parting-line{
    height: 50px;

src/pages/exchangepage/edittemplate/main.less

@@ -359,7 +359,7 @@
 		vertical-align: middle;
 	}
 
-	.center {
+	#center {
 		width: 100%;
 		padding: 0;
 		margin: 0;

src/pages/exchangepage/previewEffect/main.js

@@ -4,6 +4,7 @@ import '../main/main.less'
 import '../../../assets/comm.css'
 import { RadioButton, Icon,RadioGroup } from 'zent'
 import PreviewItem from '../template/preview.js'
+import '../template/main.less'
 export default class previewEffect extends React.Component {
     constructor(props) {
         super(props)
@@ -17,7 +18,6 @@ export default class previewEffect extends React.Component {
             detailType:3
         }
     }
-
     onClose() {
         this.props.onCloseFn();
     }

src/pages/exchangepage/template/preview.js

@@ -5,6 +5,9 @@ import { RadioGroup, RadioButton, Input, openDialog, Dialog, Notify, Switch, Swi
 import "../../../assets/comm.css"
 import _ from "lodash";
 import "./preview.less"
+import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏
+import BottomBarView from '../edittemplate/couponConfig/bottomBar' //底部栏
+
 import Descteplate from "../edittemplate/goodsdesc.js"
 export default class acclist extends React.Component {
 	constructor(props) {
@@ -35,8 +38,6 @@ export default class acclist extends React.Component {
 	showactiveIcon(c) {
 		this.setState({ activeshow: false });
 	}
-
-
 	opendescFn() {
 		this.setState({ activeshow: true });
 	}
@@ -50,9 +51,15 @@ export default class acclist extends React.Component {
 
 	render() {
 		let propsData = this.props.data;
+		let goodsConfig=propsData.product_list;
+		let naVisual=[]
+		if(goodsConfig.bottomBar){
+			naVisual=goodsConfig.bottomBar.navlist.filter(item=>item.iswitch);
+		}
+		console.log(53,this.props);
 		return (
 			<div className="preview-show">
-				<div id="preview-bg">
+				<div id="preview-bg" style={{background:this.props.step == 2&&goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
 					{
 						this.props.step == 1 ? (
 							<div className="landpage" style={{ background: propsData.model.bg_color }}>
@@ -68,7 +75,6 @@ export default class acclist extends React.Component {
 									{
 										this.props.pageType == 1 ? <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/getsmscode.png" className="verifycode" /> : <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/verify.png" className="verifycode" />
 									}
-
 									<div className="submit"></div>
 								</div>
 								<div className="bottom">
@@ -84,15 +90,36 @@ export default class acclist extends React.Component {
 					}
 					{
 						this.props.step == 2 ? this.state.activeshow && propsData.product_list.describe.type == 2 && propsData.product_list.describe.content ? <Descteplate backPrepage={c => this.showactiveIcon(c)} goodsdata={propsData.product_list} /> : <div className="goodstemplate" >
+							 {
+								goodsConfig.search&&goodsConfig.search.iswitch?
+								<SearchBarView searchConfig={goodsConfig.search} />:null
+							}
 							<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
 							{
 								!propsData.product_list.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={propsData.product_list.top_image} />
 							}
+							 {
+								goodsConfig.picture&&goodsConfig.picture.iswitch?<img src={goodsConfig.picture.img} alt="" className="picture"/>:null
+							}
+							{
+								goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==1?<div  className={goodsConfig.title.textAlign +'  content-title  '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor,fontWeight:'bold'}}>{goodsConfig.title.text}</div>:null
+							}
+							{
+								goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==2?
+							<img src={goodsConfig.title.pic} alt="" className="title-pic"/>
+							:null
+							}
+
+							{
+							goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
+
+							}
+
 							{
 								propsData.product_list.list == 2 ? <img className="swiperType" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiperview.png" /> : propsData.product_list.list == 3 ? <img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrixview.png'} /> : <img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listview.png'} />
 							}
 							{
-								propsData.product_list.list == 2 ? <button className={propsData.product_list.describe.type == 1 && propsData.product_list.describe.bg_image || propsData.product_list.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: propsData.product_list.font_color, background: propsData.product_list.button_color }}>立即兑换</button> : null
+								propsData.product_list.list == 2 ? <button className={propsData.product_list.describe.type == 1 && propsData.product_list.describe.bg_image || propsData.product_list.describe.type == 3 ? "exchageBtn" : "exchageBtn"} style={{ color: propsData.product_list.font_color, background: propsData.product_list.button_color }}>立即兑换</button> : null
 							}
 							{
 								propsData.product_list.describe.type == 1 ? <img src={propsData.product_list.describe.bg_image} alt="" className={propsData.product_list.describe.type && propsData.product_list.list == 1 ? 'bottomTipView' : 'bottomTip'} /> : propsData.product_list.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: propsData.product_list.describe.content }}></div> : null
@@ -100,6 +127,9 @@ export default class acclist extends React.Component {
 							{
 								propsData.product_list.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? <BottomBarView bottomBarConfig={goodsConfig.bottomBar}/>:null
+							}
 						</div> : null
 					}
 
@@ -119,8 +149,8 @@ export default class acclist extends React.Component {
 								}
 								<button className="exchangeBtn viewdetailBtn" style={{ background: propsData.product_detail.button_color, color: propsData.product_detail.font_color }}>立即兑换</button>
 							</div>
-						) : (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>)
+						) : null
-
+						// (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>)
 					}
 				</div>
 

src/pages/exchangepage/template/preview.less

@@ -7,6 +7,7 @@
 	background: rgba(0, 0, 0, 0.8);
 	z-index: 8;
 }
+
 .preview-box {
 	.preview-top-close {
 		padding-left: 28px;
@@ -23,21 +24,25 @@
 	z-index: 10;
 	height: 100%;
 	position: relative;
-			overflow-y: hidden;
+	overflow-y: auto;
 	background: #fff;
 	box-shadow: 0 0 1px #C1C1C1;
-			.goodstemplate, .detailstemplate{
+	.goodstemplate,
+	.detailstemplate {
 		height: 100%;
 	}
+
 	.editor-main {
 		top: 0;
 		width: 100%;
 	}
+
 	.landpage {
 		width: 100%;
 		height: 100%;
 		overflow-y: scroll;
 	}
+
 	.swiperType {
 		width: 96%;
 		margin-left: 2%;
@@ -45,15 +50,19 @@
 		top: 0;
 		margin-top: -45px;
 	}
-			.preBtn,.susactive_tip{
+
+	.preBtn,
+	.susactive_tip {
 		width: 30px;
 	}
+
 	.top {
 		width: 100%;
 		height: auto;
 		padding: 0;
 		margin: 0;
 	}
+
 	.viewdetailBtn {
 		top: 90%;
 		width: 200px;
@@ -62,11 +71,15 @@
 		height: 40px;
 		z-index: 9999;
 	}
+    .bottomBar-view{
+		position: static;
+	}
 	img {
 		width: 100%;
 		vertical-align: middle;
 	}
-			.center{
+
+	#preview-center {
 		width: 100%;
 		padding: 0;
 		margin: 0;
@@ -74,24 +87,29 @@
 		overflow: hidden;
 		vertical-align: middle;
 	}
+
 	.goodstemplate {
 		.bottomTip {
 			width: 100%;
 			margin-top: 10px;
 		}
+
 		.bottomBtn {
 			top: 84%;
 		}
+
 		.bottomTipView {
 			padding-bottom: 30px;
 		}
 	}
+
 	.bottom {
 		width: 100%;
 		height: auto;
 		vertical-align: middle;
 		position: relative;
 	}
+
 	.textTip_land {
 		position: absolute;
 		top: 0;
@@ -100,6 +118,7 @@
 		font-size: 13px;
 		box-sizing: border-box;
 	}
+
 	#preview-center-img {
 		width: 100%;
 	}
@@ -114,6 +133,7 @@
 		z-index: 2;
 		background-color: transparent;
 	}
+
 	.submit:active {
 		background-color: #F3F5F7;
 		border-radius: 30px;
@@ -121,6 +141,7 @@
 	}
 
 }
+
 .footbar {
 	width: 100%;
 	height: 80px;
@@ -130,6 +151,7 @@
 	align-items: center;
 
 }
+
 .previewComponent .verifycode {
 	// width: 21%!important;
 	// height: 18%;
@@ -151,13 +173,16 @@
 	width: 90%;
 	margin: 30px 5%;
 }
+
 .previewComponent .preview-show .bottomactiveTip {
 	width: 95%;
 	margin-left: 2.5%;
+
 	p {
 		width: 100%;
 	}
 }
+
 .previewComponent .preview-show .bottomBtn {
 	width: 200px;
 	left: 50%;

src/pages/extension/main/main.css

@@ -37,7 +37,7 @@
 #extension .main-title{
 	padding: 14px 0 14px 8px;
 }
-#extension .center{
+#extension #center{
 	height: 760px;
 }
 #extension  .toolbar{