完成编辑器预览-详情页

src/pages/exchangepage/edittemplate/goodstemplate.less

@@ -119,7 +119,7 @@
     position: absolute;
     bottom: 0;
     left: 0;
-    z-index: 9999;
+    z-index: 9;
     background: #D7D7D7;
     .coupon-price{
       display: flex;

src/pages/exchangepage/template/main.less

@@ -204,6 +204,7 @@ button{
 	-webkit-transform: scale(.83);
 	transform: scale(.83)
 }
+
 .xj-template-preview-card {
 	background-color: #fff;
 	border: 1px solid hsla(0, 0%, 89%, .96);
@@ -634,6 +635,7 @@ button{
 .scroller-page .block-selector-list-label {
 	margin-right: 22px
 }
+
 .preview-box {
 	width: 900px;
 	height: 640px;
@@ -655,6 +657,7 @@ button{
 	background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
 	z-index: 1;
 }
+
 .toTop-canvas {
 	width: 60px;
 	height: 60px;
@@ -669,18 +672,22 @@ button{
 	bottom: 2vh;
 	cursor: pointer;
 }
+
 .toTopBtn {
 	width: 40px;
 	fill-opacity: 0.2;
 }
+
 .toTop-canvas:hover {
 	transform: scale(1.1);
 }
+
 .main-preview {
 	width: 100%;
 	overflow: hidden;
 
 }
+
 .previewComponent {
 	width: 100%;
 	height: 100%;
@@ -690,6 +697,7 @@ button{
 	justify-content: space-between;
 	// height: calc(100% - 200px);
 }
+
 .previewbody {
 	display: flex;
 	justify-content: center;
@@ -697,14 +705,18 @@ button{
 	height: 100%;
 	align-items: center;
 }
+
 .ctorSize {
 	width: 375px;
 	overflow: hidden;
 	border: 1px solid #ccc;
+	box-sizing: border-box;
 }
+
 .preview-show {
 	height: 100%;
 }
+
 .left-choice {
 	flex: 1;
 	margin-left: 30px;
@@ -714,8 +726,10 @@ button{
 
 	box-sizing: border-box;
 }
+
 .exchange-page {
 	margin-bottom: 20px;
+
 	p {
 		padding: 15px 0;
 		font-weight: bold;
@@ -734,15 +748,18 @@ button{
 	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;
@@ -754,6 +771,7 @@ button{
 	text-align: center;
 	width: 96px;
 }
+
 .screen-size-selector .size span {
 	display: block;
 	font-size: 12px;
@@ -761,10 +779,12 @@ button{
 	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;

src/pages/exchangepage/template/preview.js

@@ -4,12 +4,13 @@ import { Button } 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 '../edittemplate/goodstemplate'
 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 {
+export default class preview extends React.Component {
 	constructor(props) {
 		super(props)
 		this.state = {
@@ -45,10 +46,11 @@ export default class acclist extends React.Component {
 		this.setState({ detailactiveshow: false });
 	}
 	opendetaildescFn() {
-
 		this.setState({ detailactiveshow: true });
 	}
-
+    componentDidUpdate(){
+		document.querySelector('#previewbg').scrollTop = 0
+	}
 	render() {
 		let propsData = this.props.data;
 		let goodsConfig=propsData.product_list;
@@ -59,7 +61,7 @@ export default class acclist extends React.Component {
 		console.log(53,this.props);
 		return (
 			<div className="preview-show">
-				<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' }}>
+				<div id="previewbg" 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 }}>
@@ -147,10 +149,34 @@ export default class acclist extends React.Component {
 								{
 									propsData.product_detail.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendetaildescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
 								}
-								<button className="exchangeBtn viewdetailBtn" style={{ background: propsData.product_detail.button_color, color: propsData.product_detail.font_color }}>立即兑换</button>
+								{
+								[1,3].includes(this.props.pageType)?<button className="exchangeBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即兑换</button>:
+								<div className="dflexaj payBtn-view">
+									<div className="coupon-price">
+									<p>￥0.00</p>
+									<p>共省￥0.01</p>
+									</div>
+									<button className="payBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即支付</button>
+								</div>
+								}
 							</div>
 						) : null
-						// (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>)
+					}
+					{
+						this.props.step==4?<div className="detailstemplate reduceComponent" >
+							<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>
+							{
+								[1,3].includes(this.props.pageType)?null:
+								<div className="dflexaj payBtn-view">
+									<div className="coupon-price">
+									<p>￥0.00</p>
+									<p>共省￥0.01</p>
+									</div>
+									<button className="payBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即支付</button>
+								</div>
+							}
+						</div>
+						:null
 					}
 				</div>
 

src/pages/exchangepage/template/preview.less

@@ -20,7 +20,7 @@
 	}
 }
 
-#preview-bg {
+#previewbg {
 	z-index: 10;
 	height: 100%;
 	position: relative;
@@ -182,7 +182,9 @@
 		width: 100%;
 	}
 }
-
+.reduceComponent{
+	overflow: hidden;
+}
 .previewComponent .preview-show .bottomBtn {
 	width: 200px;
 	left: 50%;