From 720b12704c39686c5e7bd681ddcc0516b57cdceb Mon Sep 17 00:00:00 2001
From: Apple <>
Date: Mon, 19 Sep 2022 17:38:13 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BC=96=E8=BE=91=E5=99=A8?=
 =?UTF-8?q?=E9=85=8D=E7=BD=AE=E6=96=B0=E5=A2=9E/=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=95=86=E5=93=81=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E6=90=9C=E7=B4=A2=E6=A0=8F=E9=85=8D=E7=BD=AE=EF=BC=8C=E8=83=8C?=
 =?UTF-8?q?=E6=99=AF=E5=9B=BE=E8=9E=8D=E5=85=A5/=E5=BA=95=E9=83=A8?=
 =?UTF-8?q?=E6=A0=8F=EF=BC=8C=E5=85=BC=E5=AE=B9=E6=80=A7=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../edittemplate/couponConfig/comm.less       |   4 +-
 .../edittemplate/goodstemplate.js             |   6 -
 .../edittemplate/goodstemplate.less           |   1 +
 src/pages/exchangepage/edittemplate/main.less |   2 +-
 src/pages/exchangepage/previewEffect/main.js  |   2 +-
 src/pages/exchangepage/template/preview.js    |  44 +++-
 src/pages/exchangepage/template/preview.less  | 241 ++++++++++--------
 src/pages/extension/main/main.css             |   2 +-
 8 files changed, 176 insertions(+), 126 deletions(-)

diff --git a/src/pages/exchangepage/edittemplate/couponConfig/comm.less b/src/pages/exchangepage/edittemplate/couponConfig/comm.less
index b03c6194..3c196279 100644
--- a/src/pages/exchangepage/edittemplate/couponConfig/comm.less
+++ b/src/pages/exchangepage/edittemplate/couponConfig/comm.less
@@ -37,8 +37,8 @@
 
 }
 .bottomBar-view>li>img{
-    width: 20px;
-    height: 20px;
+    width: 20px!important;
+    height: 20px!important;
 }
 .bottomBar-view>li>span{
     padding-top: 5px;
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index 111b78cf..3977828c 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/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
-
-         
-
         }
 
         {
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less
index c04f70f6..03e0e15c 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.less
@@ -23,6 +23,7 @@
     height: 40px;
     line-height: 40px;
     padding: 0 13px;
+    display: flex;
   }
  .parting-line{
    height: 50px;
diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less
index 4e22af3f..3b657f57 100644
--- a/src/pages/exchangepage/edittemplate/main.less
+++ b/src/pages/exchangepage/edittemplate/main.less
@@ -359,7 +359,7 @@
 		vertical-align: middle;
 	}
 
-	.center {
+	#center {
 		width: 100%;
 		padding: 0;
 		margin: 0;
diff --git a/src/pages/exchangepage/previewEffect/main.js b/src/pages/exchangepage/previewEffect/main.js
index bbe956ad..5df29230 100644
--- a/src/pages/exchangepage/previewEffect/main.js
+++ b/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();
     }
diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js
index 4f1d7451..1a0b3ea9 100644
--- a/src/pages/exchangepage/template/preview.js
+++ b/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>
 
diff --git a/src/pages/exchangepage/template/preview.less b/src/pages/exchangepage/template/preview.less
index 6414036a..8c73197b 100644
--- a/src/pages/exchangepage/template/preview.less
+++ b/src/pages/exchangepage/template/preview.less
@@ -1,4 +1,4 @@
-.maskdeiol{
+.maskdeiol {
 	position: fixed;
 	top: 0;
 	left: 0;
@@ -7,8 +7,9 @@
 	background: rgba(0, 0, 0, 0.8);
 	z-index: 8;
 }
-.preview-box{
-	.preview-top-close{
+
+.preview-box {
+	.preview-top-close {
 		padding-left: 28px;
 		position: absolute;
 		top: 30px;
@@ -19,109 +20,129 @@
 	}
 }
 
-#preview-bg{
-		 z-index: 10;
+#preview-bg {
+	z-index: 10;
 	height: 100%;
+	position: relative;
+	overflow-y: auto;
+	background: #fff;
+	box-shadow: 0 0 1px #C1C1C1;
+	.goodstemplate,
+	.detailstemplate {
+		height: 100%;
+	}
+
+	.editor-main {
+		top: 0;
+		width: 100%;
+	}
+
+	.landpage {
+		width: 100%;
+		height: 100%;
+		overflow-y: scroll;
+	}
+
+	.swiperType {
+		width: 96%;
+		margin-left: 2%;
 		position: relative;
-			overflow-y: hidden;
-			background: #fff;
-			box-shadow: 0 0 1px #C1C1C1;
-			.goodstemplate, .detailstemplate{
-				height:100%;
-			}
-			.editor-main{
-				top: 0;
-				width: 100%;
-			}
-			.landpage{
-				width: 100%;
-				height: 100%;
-				overflow-y: scroll;
-			}
-			.swiperType{
-				width: 96%;
-				margin-left: 2%;
-				position: relative;
-				top: 0;
-				margin-top: -45px;
-			}
-			.preBtn,.susactive_tip{
-				width: 30px;
-			}
-			.top{
-				width: 100%;
-				height: auto;
-				padding: 0;
-				margin: 0;
-			}
-			.viewdetailBtn{
-				top:90%;
-				width:200px;
-				left: 50%;
-				margin-left: -100px;
-				height: 40px;
-				z-index: 9999;
-			}
-			img{
-				width: 100%;
-				vertical-align: middle;
-			}
-			.center{
-				width: 100%;
-				padding: 0;
-				margin: 0;
-				position: relative;
-				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;
-				padding:70px  25px 0;
-				line-height: 1.5rem;
-				font-size: 13px;
-				box-sizing: border-box;
-			}
-			#preview-center-img{
-				width: 100%;
-			}
-		
-		.submit{
-			position: absolute;
-			top: 1.5rem;
-			left: 50%;
-			width: 3rem;
-			height: 0.4rem;
-			margin-left: -1.5rem;
-			z-index: 2;
-			background-color: transparent;
+		top: 0;
+		margin-top: -45px;
+	}
+
+	.preBtn,
+	.susactive_tip {
+		width: 30px;
+	}
+
+	.top {
+		width: 100%;
+		height: auto;
+		padding: 0;
+		margin: 0;
+	}
+
+	.viewdetailBtn {
+		top: 90%;
+		width: 200px;
+		left: 50%;
+		margin-left: -100px;
+		height: 40px;
+		z-index: 9999;
+	}
+    .bottomBar-view{
+		position: static;
+	}
+	img {
+		width: 100%;
+		vertical-align: middle;
+	}
+
+	#preview-center {
+		width: 100%;
+		padding: 0;
+		margin: 0;
+		position: relative;
+		overflow: hidden;
+		vertical-align: middle;
+	}
+
+	.goodstemplate {
+		.bottomTip {
+			width: 100%;
+			margin-top: 10px;
 		}
-		.submit:active{
-			background-color: #F3F5F7;
-			border-radius: 30px;
-			opacity: 0.2;
+
+		.bottomBtn {
+			top: 84%;
 		}
-		
+
+		.bottomTipView {
+			padding-bottom: 30px;
+		}
+	}
+
+	.bottom {
+		width: 100%;
+		height: auto;
+		vertical-align: middle;
+		position: relative;
+	}
+
+	.textTip_land {
+		position: absolute;
+		top: 0;
+		padding: 70px 25px 0;
+		line-height: 1.5rem;
+		font-size: 13px;
+		box-sizing: border-box;
+	}
+
+	#preview-center-img {
+		width: 100%;
+	}
+
+	.submit {
+		position: absolute;
+		top: 1.5rem;
+		left: 50%;
+		width: 3rem;
+		height: 0.4rem;
+		margin-left: -1.5rem;
+		z-index: 2;
+		background-color: transparent;
+	}
+
+	.submit:active {
+		background-color: #F3F5F7;
+		border-radius: 30px;
+		opacity: 0.2;
+	}
+
 }
-.footbar{
+
+.footbar {
 	width: 100%;
 	height: 80px;
 	background-color: #FFFFFF;
@@ -130,7 +151,8 @@
 	align-items: center;
 
 }
-.previewComponent .verifycode{
+
+.previewComponent .verifycode {
 	// width: 21%!important;
 	// height: 18%;
 	// position: absolute;
@@ -138,7 +160,7 @@
 	// top: 39%;
 	// border-radius:32px;
 	// z-index: 555;
-	width: 2.2em!important;
+	width: 2.2em !important;
 	height: 1.2em;
 	position: absolute;
 	right: 0.8em;
@@ -147,19 +169,22 @@
 	z-index: 555;
 }
 
-.preview-box .previewComponent  .exchageBtn{
+.preview-box .previewComponent .exchageBtn {
 	width: 90%;
 	margin: 30px 5%;
 }
-.previewComponent .preview-show .bottomactiveTip{
+
+.previewComponent .preview-show .bottomactiveTip {
 	width: 95%;
 	margin-left: 2.5%;
-	p{
+
+	p {
 		width: 100%;
 	}
 }
-.previewComponent .preview-show .bottomBtn{
-	width:200px;
+
+.previewComponent .preview-show .bottomBtn {
+	width: 200px;
 	left: 50%;
 	margin-left: -100px;
 	height: 40px;
diff --git a/src/pages/extension/main/main.css b/src/pages/extension/main/main.css
index ebd0d8db..18084231 100644
--- a/src/pages/extension/main/main.css
+++ b/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{