完成编辑器预览-详情页

2022-09-19 18:24:41 +08:00 · 2022-09-19 18:24:41 +08:00 · b41a3697a1
parent 720b12704c
commit b41a3697a1
4 changed files with 90 additions and 42 deletions
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/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;
--- a/src/pages/exchangepage/template/main.less
+++ b/src/pages/exchangepage/template/main.less
@ -1,8 +1,8 @@
-button{
+button {
 	border: 0;
 }

- .xj-template-list {
+.xj-template-list {
 	display: grid;
 	gap: 24px 20px;
 	grid-template-columns: repeat(5, 1fr);
@ -11,12 +11,12 @@ button{
 	width: 1200px
 }

- .xj-template-list.IOS_APP .xj-template-blank-card-content {
+.xj-template-list.IOS_APP .xj-template-blank-card-content {
 	height: 392px;
 	position: relative
 }

- .spaui-nav>li>a {
+.spaui-nav>li>a {
 	padding: 15px 15px 5px 10px
 }

@ -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,8 +635,9 @@ button{
 .scroller-page .block-selector-list-label {
 	margin-right: 22px
 }
-.preview-box{
-	width:900px;
+
+.preview-box {
+	width: 900px;
 	height: 640px;
 	position: fixed;
 	top: 50%;
@ -655,7 +657,8 @@ button{
 	background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
 	z-index: 1;
 }
-.toTop-canvas{
+
+.toTop-canvas {
 	width: 60px;
 	height: 60px;
 	border-radius: 60px;
@ -666,46 +669,55 @@ button{
 	box-shadow: 1px 2px 3px 3px #eee;
 	position: fixed;
 	right: 2vh;
-	bottom:2vh;
+	bottom: 2vh;
 	cursor: pointer;
 }
-.toTopBtn{
+
+.toTopBtn {
 	width: 40px;
 	fill-opacity: 0.2;
 }
-.toTop-canvas:hover{
+
+.toTop-canvas:hover {
 	transform: scale(1.1);
 }
-.main-preview{
+
+.main-preview {
 	width: 100%;
 	overflow: hidden;

 }
-.previewComponent{
- width: 100%;
- height: 100%;
+
+.previewComponent {
+	width: 100%;
+	height: 100%;
 	overflow: hidden;
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
 	// height: calc(100% - 200px);
 }
-.previewbody{
+
+.previewbody {
 	display: flex;
 	justify-content: center;
 	width: 400px;
 	height: 100%;
 	align-items: center;
 }
-.ctorSize{
+
+.ctorSize {
 	width: 375px;
 	overflow: hidden;
-		border: 1px solid #ccc;
+	border: 1px solid #ccc;
+	box-sizing: border-box;
 }
-.preview-show{
+
+.preview-show {
 	height: 100%;
 }
-.left-choice{
+
+.left-choice {
 	flex: 1;
 	margin-left: 30px;
 	// height: 300px;
@ -714,9 +726,11 @@ button{

 	box-sizing: border-box;
 }
-.exchange-page{
+
+.exchange-page {
 	margin-bottom: 20px;
-	p{
+
+	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;
@ -730,19 +744,22 @@ button{
 	display: -ms-flexbox;
 	display: flex;
 	justify-content: space-between;
-	margin-bottom:10px;
+	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 ;
+	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{
+
+.screen-size-selector {
 	width: 408px;
 }
+
 .screen-size-selector .size.active {
-	background: rgba(41,107,239,.08);
+	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,18 +779,20 @@ button{
 	opacity: .5;
 	font-weight: bold;
 }
-.touse{
+
+.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!important;
-color: #296bef!important;
+.left-choice .zent-radio-button--checked[data-zv="9.11.0"] {
+	background: rgba(41, 107, 239, 0.08) !important;
+	border: 1px solid #2096f5 !important;
+	color: #296bef !important;
 }
--- a/src/pages/exchangepage/template/preview.js
+++ b/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>

--- a/src/pages/exchangepage/template/preview.less
+++ b/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%;