HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

完成编辑器预览-详情页

This commit is contained in:
Apple 2022-09-19 18:24:41 +08:00
parent 720b12704c
commit b41a3697a1
4 changed files with 90 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

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

74
src/pages/exchangepage/template/main.less
View File

@ -1,8 +1,8 @@
button{ button {
border: 0; border: 0;
} }
.xj-template-list { .xj-template-list {
display: grid; display: grid;
gap: 24px 20px; gap: 24px 20px;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
@ -11,12 +11,12 @@ button{
width: 1200px width: 1200px
} }
.xj-template-list.IOS_APP .xj-template-blank-card-content { .xj-template-list.IOS_APP .xj-template-blank-card-content {
height: 392px; height: 392px;
position: relative position: relative
} }
.spaui-nav>li>a { .spaui-nav>li>a {
padding: 15px 15px 5px 10px padding: 15px 15px 5px 10px
} }
@ -204,6 +204,7 @@ button{
-webkit-transform: scale(.83); -webkit-transform: scale(.83);
transform: scale(.83) transform: scale(.83)
} }
.xj-template-preview-card { .xj-template-preview-card {
background-color: #fff; background-color: #fff;
border: 1px solid hsla(0, 0%, 89%, .96); border: 1px solid hsla(0, 0%, 89%, .96);
@ -634,8 +635,9 @@ button{
.scroller-page .block-selector-list-label { .scroller-page .block-selector-list-label {
margin-right: 22px margin-right: 22px
} }
.preview-box{
width:900px; .preview-box {
width: 900px;
height: 640px; height: 640px;
position: fixed; position: fixed;
top: 50%; top: 50%;
@ -655,7 +657,8 @@ button{
background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff)); background-color: var(--theme-default-hover-bg, var(--theme-primary-8, #e6efff));
z-index: 1; z-index: 1;
} }
.toTop-canvas{
.toTop-canvas {
width: 60px; width: 60px;
height: 60px; height: 60px;
border-radius: 60px; border-radius: 60px;
@ -666,22 +669,26 @@ button{
box-shadow: 1px 2px 3px 3px #eee; box-shadow: 1px 2px 3px 3px #eee;
position: fixed; position: fixed;
right: 2vh; right: 2vh;
bottom:2vh; bottom: 2vh;
cursor: pointer; cursor: pointer;
} }
.toTopBtn{
.toTopBtn {
width: 40px; width: 40px;
fill-opacity: 0.2; fill-opacity: 0.2;
} }
.toTop-canvas:hover{
.toTop-canvas:hover {
transform: scale(1.1); transform: scale(1.1);
} }
.main-preview{
.main-preview {
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
.previewComponent{
.previewComponent {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
@ -690,22 +697,27 @@ button{
justify-content: space-between; justify-content: space-between;
// height: calc(100% - 200px); // height: calc(100% - 200px);
} }
.previewbody{
.previewbody {
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 400px; width: 400px;
height: 100%; height: 100%;
align-items: center; align-items: center;
} }
.ctorSize{
.ctorSize {
width: 375px; width: 375px;
overflow: hidden; overflow: hidden;
border: 1px solid #ccc; border: 1px solid #ccc;
box-sizing: border-box;
} }
.preview-show{
.preview-show {
height: 100%; height: 100%;
} }
.left-choice{
.left-choice {
flex: 1; flex: 1;
margin-left: 30px; margin-left: 30px;
// height: 300px; // height: 300px;
@ -714,9 +726,11 @@ button{
box-sizing: border-box; box-sizing: border-box;
} }
.exchange-page{
.exchange-page {
margin-bottom: 20px; margin-bottom: 20px;
p{
p {
padding: 15px 0; padding: 15px 0;
font-weight: bold; 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; 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: -ms-flexbox;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-bottom:10px; margin-bottom: 10px;
margin-top: 20px; 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; width: 408px;
} }
.screen-size-selector .size.active { .screen-size-selector .size.active {
background: rgba(41,107,239,.08); background: rgba(41, 107, 239, .08);
border: 1px solid #2096f5; border: 1px solid #2096f5;
color: #296bef; color: #296bef;
font-weight: bold; font-weight: bold;
} }
.screen-size-selector .size { .screen-size-selector .size {
border: 1px solid #dcdee3; border: 1px solid #dcdee3;
border-radius: 4px; border-radius: 4px;
@ -754,6 +771,7 @@ button{
text-align: center; text-align: center;
width: 96px; width: 96px;
} }
.screen-size-selector .size span { .screen-size-selector .size span {
display: block; display: block;
font-size: 12px; font-size: 12px;
@ -761,18 +779,20 @@ button{
opacity: .5; opacity: .5;
font-weight: bold; font-weight: bold;
} }
.touse{
.touse {
margin-top: 100px; margin-top: 100px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
.zent-btn[data-zv="9.11.0"] { .zent-btn[data-zv="9.11.0"] {
width: 80px; width: 80px;
height: 32px; height: 32px;
} }
} }
.left-choice .zent-radio-button--checked[data-zv="9.11.0"]{ .left-choice .zent-radio-button--checked[data-zv="9.11.0"] {
background: rgba(41, 107, 239, 0.08)!important; background: rgba(41, 107, 239, 0.08) !important;
border: 1px solid #2096f5!important; border: 1px solid #2096f5 !important;
color: #296bef!important; color: #296bef !important;
} }

38
src/pages/exchangepage/template/preview.js
View File

@ -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 { RadioGroup, RadioButton, Input, openDialog, Dialog, Notify, Switch, Swiper, Dropdown, DropdownPosition, DropdownClickTrigger, Icon, MenuItem, DropdownContent, Menu, Sweetalert } from 'zent';
import "../../../assets/comm.css" import "../../../assets/comm.css"
import _ from "lodash"; import _ from "lodash";
import '../edittemplate/goodstemplate'
import "./preview.less" import "./preview.less"
import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏 import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏
import BottomBarView from '../edittemplate/couponConfig/bottomBar' //底部栏 import BottomBarView from '../edittemplate/couponConfig/bottomBar' //底部栏
import Descteplate from "../edittemplate/goodsdesc.js" import Descteplate from "../edittemplate/goodsdesc.js"
export default class acclist extends React.Component { export default class preview extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
@ -45,10 +46,11 @@ export default class acclist extends React.Component {
this.setState({ detailactiveshow: false }); this.setState({ detailactiveshow: false });
} }
opendetaildescFn() { opendetaildescFn() {
this.setState({ detailactiveshow: true }); this.setState({ detailactiveshow: true });
} }
componentDidUpdate(){
document.querySelector('#previewbg').scrollTop = 0
}
render() { render() {
let propsData = this.props.data; let propsData = this.props.data;
let goodsConfig=propsData.product_list; let goodsConfig=propsData.product_list;
@ -59,7 +61,7 @@ export default class acclist extends React.Component {
console.log(53,this.props); console.log(53,this.props);
return ( return (
<div className="preview-show"> <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 ? ( this.props.step == 1 ? (
<div className="landpage" style={{ background: propsData.model.bg_color }}> <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 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> </div>
) : null ) : 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> </div>

6
src/pages/exchangepage/template/preview.less
View File

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