From 3b0a3bd09fe8af3e50955fb5716f587578ac7c56 Mon Sep 17 00:00:00 2001 From: red-deng-deng <1924913374@qq.com> Date: Tue, 25 Jan 2022 19:09:17 +0800 Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E9=A2=84=E8=A7=88=E6=95=88?= =?UTF-8?q?=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 3 - src/pages/exchangepage/template/main.js | 117 ++++++++++++---- src/pages/exchangepage/template/main.less | 134 +++++++++++++++++-- src/pages/exchangepage/template/preview.js | 31 ++--- src/pages/exchangepage/template/preview.less | 40 ++++-- 5 files changed, 254 insertions(+), 71 deletions(-) diff --git a/src/App.css b/src/App.css index f91c621f..23ac7a11 100644 --- a/src/App.css +++ b/src/App.css @@ -191,6 +191,3 @@ resize: none; z-index: 6; } -.zent-image-upload-list{ - width: 500px !important; -} \ No newline at end of file diff --git a/src/pages/exchangepage/template/main.js b/src/pages/exchangepage/template/main.js index a1206b51..d9061027 100644 --- a/src/pages/exchangepage/template/main.js +++ b/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} // // // + 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, @@ -46,7 +56,22 @@ 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){//白名单 - 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){ - rowdata.model=row.exchange.land; - rowdata.product_list=row.exchange.product_list; - rowdata.product_detail=row.exchange.product_detail; - } + 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; + exchangedata.model=row.exchange.land; + exchangedata.product_list=row.exchange.product_list; + exchangedata.product_detail=row.exchange.product_detail; this.setState({preview_url:row.href}) - - this.setState({preview_visible:true}) - this.setState({previewData:rowdata}) - + this.setState({preview_visible:true,showType:row.page}) + this.setState({previewwhite: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(
@@ -423,16 +461,49 @@ export default class mytemplate extends React.Component{ { this.state.preview_visible ? (
-
+
-
-
{this.onBack(e)}} >
{this.onClose(e)}} /> +
+
+
+
+ +
+ +
+ +
+ +
+

落地页预览:

+
this.handleSize(375,667)}>主流机型375x667
this.handleSize(375,750)}>全面屏375x750
this.handleSize(375,812)}>刘海屏375x812
this.handleSize(375,500)}>小屏手机375x500
+

落地页类型:

+ {this.onTypeChange(e)} } value={this.state.showType} > + 兑换码 + 白名单 + 立减金 + + +
+ +
+

页面类型:

+ {this.onpageChange(e)} } value={this.state.showPage} > + 落地页 + 列表页 + 详情页 + + +
+
+ +
+
+
+
- - - -
) :null diff --git a/src/pages/exchangepage/template/main.less b/src/pages/exchangepage/template/main.less index 0c857a23..8a6e1d2d 100644 --- a/src/pages/exchangepage/template/main.less +++ b/src/pages/exchangepage/template/main.less @@ -2502,32 +2502,38 @@ div.previewclose { margin-right: 22px } .preview-box{ - width: 375px; - height: 600px; + // width: 375px; + 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; + // width: 100%; + // height: 30px; + // line-height: 30px; + background-color: #fff; display: flex; - - align-items: center; + 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; } @@ -2568,4 +2574,104 @@ div.previewclose { } .toTop-canvas:hover{ transform: scale(1.1); -} \ No newline at end of file +} +.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; +} diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js index c0532711..a9ae919c 100644 --- a/src/pages/exchangepage/template/preview.js +++ b/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}); } @@ -42,16 +39,17 @@ export default class acclist extends React.Component{ opendetaildescFn(){ this.setState({detailactiveshow:true}); - } + } + render(){ let propsData=this.props.data; - console.log('预览', propsData); + console.log('预览', this.props); return( -
+
{ - this.state.step==1 ? ( + this.props.step==1 ? (
{ @@ -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?this.showactiveIcon(c)} goodsdata={propsData.product_list}/>:
+ this.props.step==2?this.state.activeshow&&propsData.product_list.describe.type==2&&propsData.product_list.describe.content?this.showactiveIcon(c)} goodsdata={propsData.product_list}/>:
{ !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?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?this.showactivedetail(c)} goodsdata={propsData.product_detail}/>:(
@@ -117,15 +115,8 @@ export default class acclist extends React.Component{ }
-
- {this.onListChange(e)} } value={this.state.step}> - 落地页 - 列表页 - 详情页 - - -
+
) } -} \ No newline at end of file +} diff --git a/src/pages/exchangepage/template/preview.less b/src/pages/exchangepage/template/preview.less index 6246be0f..3e8f3500 100644 --- a/src/pages/exchangepage/template/preview.less +++ b/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{ - width: 83px !important; - height: 43px; +.previewComponent .verifycode{ + width: 21%!important; + height: 18%; position: absolute; - right: 20px; - top: 80px; - z-index: 666; -} \ No newline at end of file + right: 9%; + top: 39%; + border-radius:32px; + z-index: 555; +} + +.preview-box .previewComponent .exchageBtn{ + width: 90%; + margin: 30px 5%; +}