Merge branch 'product_v1.1.0' of codeup.aliyun.com:5f9118049cffa29cfdd3be1c/marketing/frontend into product_v1.1.0

src/pages/exchangepage/template/main.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
 import { HashRouter as Router, Route, Link } from "react-router-dom";
-import { Button } from 'zent';
+import { Button, RadioGroup,RadioButton} from 'zent';
 import  "./main.less"
 import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Notify } from 'zent';
 import "../../../assets/comm.css"
@@ -19,6 +19,7 @@ import {handelResponse,getThemeType,getSystemTemplate,getTheme,copyThemecustom}
 // 	          </div>
 // 	         </div>
 // 	        </div>
+
 window.addEventListener('scroll',function(){
 	console.log('滚动');
 });
@@ -33,9 +34,18 @@ export default class mytemplate extends React.Component{
 		sourceIndex:0,
 		page:1,
 		typeIndex:0,
+		showPage:1,//落地页类型
+		activeHeight:667,
+		showType:1,
+		previewData:{},
+		moudleData:{},
+		previewwhite:{},
+		previewexchange:{},
 		system_template:[],
+		pageStep:1,
 		preview_visible:false,
 		topbar:"",
+		setStyle:{width:'282px',height:'547px'},
 		 top:"",
 		 toTopshow:false,
 		 toTopFlag:false,
@@ -47,6 +57,21 @@ export default class mytemplate extends React.Component{
   pageChange(e){
 	  
 	}
+	onpageChange(e){
+		this.setState({showPage:e.target.value});
+		this.setState({pageStep:e.target.value});
+	}
+	onTypeChange(e){
+		this.setState({showType:e.target.value,pageStep:1,showPage:1});
+		if(e.target.value==1){//白名单
+			let previewwhite={...this.state.previewwhite}
+			this.setState({previewData:previewwhite});
+		}else if(e.target.value==3){//兑换码
+			let previewexchange={...this.state.previewexchange}
+			this.setState({previewexchange:previewexchange});
+			this.setState({previewData:previewexchange});
+		}
+	}
   clickFn(){
    
 	}
@@ -214,22 +239,26 @@ export default class mytemplate extends React.Component{
 
 	onPreview(row){
 		let rowdata={};
-		if(row.page==1){//白名单
+		let exchangedata={}
+		this.setState({moudleData:row});
 		rowdata.model=row.access_conf.land;
 		rowdata.product_list=row.access_conf.product_list;
 		rowdata.product_detail=row.access_conf.product_detail;
-		}else if(row.page==3){
+		exchangedata.model=row.exchange.land;
-			rowdata.model=row.exchange.land;
+		exchangedata.product_list=row.exchange.product_list;
-			rowdata.product_list=row.exchange.product_list;
+		exchangedata.product_detail=row.exchange.product_detail;
-			rowdata.product_detail=row.exchange.product_detail;
-		}
 		this.setState({preview_url:row.href})
-
+		this.setState({preview_visible:true,showType:row.page})
-		this.setState({preview_visible:true})
+		this.setState({previewwhite:rowdata})
-		this.setState({previewData:rowdata})
+		this.setState({previewexchange:exchangedata})
-
+		if(row.page==1){
+			this.setState({previewData:rowdata});
+		}else{
+			this.setState({previewData:exchangedata});
+		}
 	}
 	onUse(row){
+		console.log(258,row);
     let self=this;
 		if(row.edit == 0)
 		{
@@ -287,7 +316,16 @@ export default class mytemplate extends React.Component{
 	mouseoverFn(){
 		this.setState({toTopshow:false});
 	}
- 
+	handleSize(width,height){
+		let style={width:width+'px',height:height+'px'};
+		switch(height){
+			case 667:style={width:'282px',height:'547px'};break;
+			case 750:style={width:'282px',height:'609px'};break;
+			case 812:style={width:'262px',height:'612px'};break;
+			case 500:style={width:'358px',height:'500px'};break;
+		}
+		this.setState({setStyle:style,activeHeight:height});
+	}
   render(){
     return(
       <div className="mytemplate" >
@@ -423,16 +461,49 @@ export default class mytemplate extends React.Component{
 	  {
 		 this.state.preview_visible ? (
 		 <div>
-		 	 <div className="modal"></div>
+		 	 <div className="modal" style={{background:'rgba(0,0,0,0.8)'}}></div>
 		<div className="preview-box">
-		 <div className="preview-top-bar">
-		 <div className="preview-top-back" onClick={(e)=>{this.onBack(e)}} ></div>
 		 <Icon type="close" className="preview-top-close"  onClick={(e)=>{this.onClose(e)}}  />
+		 <div style={{height:'100%'}}>
+		 <div className="previewComponent">
+		 <div className="previewbody">
+		 <div className="ctorSize" style={this.state.setStyle}>
+		 <PreviewItem data={this.state.previewData}  ref="preview" step={this.state.pageStep}/>
 		 </div>
-		<PreviewItem data={this.state.previewData}  ref="preview" />
 		 
+		 </div>
 	
+		 <div className="left-choice">
 		 
+		 <div className="exchange-page">
+		 <p className="preview-setting">落地页预览:</p>
+		 <section class="screen-size-selector"><div  className={this.state.activeHeight==667?'size active':'size'} onClick={()=>this.handleSize(375,667)}>主流机型<span>375x667</span></div><div className={this.state.activeHeight==750?'size active':'size'}  onClick={()=>this.handleSize(375,750)}>全面屏<span>375x750</span></div><div className={this.state.activeHeight==812?'size active':'size'} onClick={()=>this.handleSize(375,812)}>刘海屏<span>375x812</span></div><div className={this.state.activeHeight==500?'size active':'size'} onClick={()=>this.handleSize(375,500)}>小屏手机<span>375x500</span></div></section>
+			<p>落地页类型:</p>
+			<RadioGroup onChange={(e)=>{this.onTypeChange(e)}  } value={this.state.showType} >
+					<RadioButton value={3} >兑换码</RadioButton>
+					<RadioButton value={1} >白名单</RadioButton>
+					<RadioButton disabled={true} value={2}>立减金</RadioButton>
+		</RadioGroup>
+
+		 </div>
+		 
+		 <div className="exchange-page">
+		<p>页面类型:</p>
+			<RadioGroup onChange={(e)=>{this.onpageChange(e)}  } value={this.state.showPage} >
+					<RadioButton value={1} >落地页</RadioButton>
+					<RadioButton value={2} >列表页</RadioButton>
+					<RadioButton   value={3}>详情页</RadioButton>
+		</RadioGroup>
+
+		 </div>
+		 <div className="touse">
+		 <Button type = "primary"  
+			onClick={(e)=>{ this.onUse(this.state.moudleData) }}> 使用 </Button>
+		 </div>
+		 </div>
+		 </div>
+
+		 </div>
 		</div>
 		</div>
 		) :null

src/pages/exchangepage/template/main.less

@@ -2502,32 +2502,38 @@ div.previewclose {
 	margin-right: 22px
 }
 .preview-box{
-	width: 375px;
+	// width: 375px;
-	height: 600px;
+	width:900px;
+	height: 640px;
+	// padding:30px;
+	// box-sizing: border-box;
 	position: fixed;
-	top: 8%;
+	top: 50%;
 	left: 50%;
-	margin-left: -187.5px;
+	margin-left: -450px;
+	margin-top: -320px;
 	background-color: #FFFFFF;
 	z-index: 99999;
 }
-.preview-top-bar{
-	width: 100%;
-	height: 36px;
-	line-height: 36px; 
-	background-color: #cacacb;
-	display: flex;
 
-	align-items: center;
+.preview-top-bar{
+	// width: 100%;
+	// height: 30px;
+	// line-height: 30px; 
+	background-color: #fff;
+	display: flex;
+	justify-content: flex-end;
+	align-items: baseline;
 	.preview-top-back{
-		padding-left: 10px;
+		padding-right: 20px;
 		color: #FFFFFF;
 		padding-right: 300px;
 	}
 	.preview-top-close{
 		font-size: 24px;
-		color: #FFFFFF;
+		color: #333;
-		
+		position: absolute;
+		padding-right: 30px;
 		
 	}
 	
@@ -2569,3 +2575,103 @@ div.previewclose {
 .toTop-canvas:hover{
 	transform: scale(1.1);
 }
+.main-preview{
+	width: 100%;
+	overflow: hidden;
+	
+}
+.previewComponent{
+ width: 100%;
+ height: 100%;
+	overflow: hidden;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	// height: calc(100% - 200px);
+}
+.previewbody{
+	display: flex;
+	justify-content: center;
+	width: 400px;
+	height: 100%;
+	align-items: center;
+}
+.ctorSize{
+	width: 375px;
+	overflow: hidden;
+		border: 1px solid #ccc;
+}
+.preview-show{
+	height: 100%;
+}
+.left-choice{
+	flex: 1;
+	margin-left: 30px;
+	// height: 300px;
+	height: 100%;
+	padding-top: 50px;
+
+	box-sizing: border-box;
+}
+.exchange-page{
+	margin-bottom: 20px;
+	p{
+		padding: 15px 0;
+		font-weight: bold;
+		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif;
+	}
+}
+
+.screen-size-selector {
+	-webkit-box-pack: justify;
+	-ms-flex-pack: justify;
+	display: -webkit-box;
+	display: -ms-flexbox;
+	display: flex;
+	justify-content: space-between;
+	margin-bottom:10px;
+	margin-top: 20px;
+	font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", STHeiti, SimSun, sans-serif ;
+}
+.screen-size-selector{
+	width: 408px;
+}
+.screen-size-selector .size.active {
+	background: rgba(41,107,239,.08);
+	border: 1px solid #2096f5;
+	color: #296bef;
+	font-weight: bold;
+}
+.screen-size-selector .size {
+	border: 1px solid #dcdee3;
+	border-radius: 4px;
+	color: #333;
+	cursor: pointer;
+	height: 48px;
+	line-height: 20px;
+	padding-top: 6px;
+	text-align: center;
+	width: 96px;
+}
+.screen-size-selector .size span {
+	display: block;
+	font-size: 12px;
+	line-height: 26px;
+	opacity: .5;
+	font-weight: bold;
+}
+.touse{
+	margin-top: 100px;
+	display: flex;
+	justify-content: flex-start;
+	.zent-btn[data-zv="9.11.0"] {
+		width: 80px;
+		height: 32px;
+	}
+}
+
+.left-choice .zent-radio-button--checked[data-zv="9.11.0"]{
+background: rgba(41, 107, 239, 0.08)!important;
+border: 1px solid #2096f5;
+color: #296bef;
+}

src/pages/exchangepage/template/preview.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
 import { Button } from 'zent';
-import {RadioGroup,RadioButton,Input,openDialog ,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent';
+import {RadioGroup,RadioButton,Input,openDialog,Dialog,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent';
 import "../../../assets/comm.css"
 import _ from "lodash";
 import  "./preview.less"
@@ -10,7 +10,6 @@ export default class acclist extends React.Component{
   constructor(props){
     super(props)
     this.state={
-	  step:1,
 	  layout:"list",
 	  type:1,
 		top_url:"",
@@ -30,9 +29,7 @@ export default class acclist extends React.Component{
 		this.setState({activeshow:false});
 	}
 
-	onListChange(e){
+
-		this.setState({step:e.target.value })
-	}
 	opendescFn(){
     this.setState({activeshow:true});
 	}
@@ -43,15 +40,16 @@ export default class acclist extends React.Component{
 		
 		this.setState({detailactiveshow:true});
 	}
+
   render(){
 
 	let propsData=this.props.data;
-	console.log('预览', propsData);
+	console.log('预览', this.props);
     return(
-	<div>
+	<div className="preview-show">
       <div id="preview-bg">
 	  {
-		  this.state.step==1 ? (
+		  this.props.step==1 ? (
 		<div className="landpage" style={{background:propsData.model.bg_color}}>
 	  			<div className="top">
 					{
@@ -77,7 +75,7 @@ export default class acclist extends React.Component{
 	        ) : null
 		}
   {
-		this.state.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" tabindex="0"  >
+		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" tabindex="0"  >
 		<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}/>
@@ -98,7 +96,7 @@ export default class acclist extends React.Component{
 	}
 
 			{
-				this.state.step==3 ? this.state.detailactiveshow&&propsData.product_detail.describe.type==2&&propsData.product_detail.describe.content?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
+				this.props.step==3 ? this.state.detailactiveshow&&propsData.product_detail.describe.type==2&&propsData.product_detail.describe.content?<Descteplate backPrepage={c=>this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
 					<div className="detailstemplate" tabindex="0"  >
 					<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
 				 <img className="topBanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodsbigPic.png'}/> 
@@ -117,15 +115,8 @@ export default class acclist extends React.Component{
 				
 			}	
       </div>
-	  <div className="footbar">
-	  		<RadioGroup onChange={(e)=>{this.onListChange(e)}  } value={this.state.step}>
-	  		        <RadioButton value={1}>落地页</RadioButton>
-	  		        <RadioButton value={2}>列表页</RadioButton>
-	  				<RadioButton value={3}>详情页</RadioButton>
-	  		 </RadioGroup>
 	 
 	   </div>
-	   </div>
     )
   }
 }

src/pages/exchangepage/template/preview.less

@@ -4,23 +4,30 @@
 	left: 0;
 	bottom: 0;
 	right: 0;
-	background: rgba(0, 0, 0, 0.5);
+	background: rgba(0, 0, 0, 0.8);
 	z-index: 8;
 }
 .preview-box{
 	.preview-top-close{
 		padding-left: 28px;
+		position: absolute;
+		top: 30px;
+		right: 30px;
+		font-size: 22px;
+		cursor: pointer;
+		font-weight: bold;
 	}
 }
+
 #preview-bg{
 		 z-index: 10;
-	height: 600px;
+	height: 100%;
 		position: relative;
 			overflow-y: hidden;
 			background: #fff;
 			box-shadow: 0 0 1px #C1C1C1;
 			.goodstemplate, .detailstemplate{
-				height: 600px;
+				height:100%;
 			}
 			.editor-main{
 				top: 0;
@@ -47,7 +54,12 @@
 				margin: 0;
 			}
 			.viewdetailBtn{
-				top:660px;
+				top:50%;
+				width:200px;
+				left: 50%;
+				margin-left: -350px;
+				height: 40px;
+				margin-top: 220px!important;
 			}
 			img{
 				width: 100%;
@@ -117,11 +129,17 @@
 	align-items: center;
 
 }
-.verifycode{
+.previewComponent .verifycode{
-	width: 83px !important;
+	width: 21%!important;
-	height: 43px;
+	height: 18%;
 	position: absolute;
-	right: 20px;
+	right: 9%;
-	top: 80px;
+	top: 39%;
-	z-index: 666;
+	border-radius:32px;
+	z-index: 555;
+}
+
+.preview-box .previewComponent  .exchageBtn{
+	width: 90%;
+	margin: 30px 5%;
 }