优化编辑器预览视图兼容性适配方案,scale计算

This commit is contained in:
许红梅 2022-09-09 16:25:29 +08:00
parent 704b5ff62a
commit 1e99514aa1
4 changed files with 307 additions and 192 deletions

View File

@ -23,6 +23,12 @@ export default class edittemplate extends React.Component {
this.setState({ bgimg });
}
}
bgColorFn(color){
this.setState({
bgColor: color
});
Bus.emit('globalColor',color)
}
handleChange1 = (color) => {
this.setState({
bgColor: color
@ -125,11 +131,11 @@ export default class edittemplate extends React.Component {
</FormItem>
<FormItem labelname="背景颜色:" labelwidth="80px">
<div className="colorItemfont dfleac">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColor('#fff') }}></span>
<span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColor('#04C160') }}></span>
<span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColor('#AE99D3') }}></span>
<span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColor('#FACD6A') }}></span>
<span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColor('#FE7962') }}></span>
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.bgColor == '#fff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgColorFn('#fff') }}></span>
<span className={this.state.bgColor == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.bgColorFn('#04C160') }}></span>
<span className={this.state.bgColor == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.bgColorFn('#AE99D3') }}></span>
<span className={this.state.bgColor == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.bgColorFn('#FACD6A') }}></span>
<span className={this.state.bgColor == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.bgColorFn('#FE7962') }}></span>
<div className="selfset">
<ColorPicker className="setbgColor" color={this.state.bgColor} onChange={this.handleChange1} />
</div>

View File

@ -1,104 +1,206 @@
import React from 'react';
import React from 'react';
import "./main.less"
import "../../../assets/comm.css"
import './goodstemplate.less'
import SearchBarView from './couponConfig/searchBar' //商品详情搜索栏
import BottomBarView from './couponConfig/bottomBar' //底部栏
import { Sweetalert } from 'zent'
import {Sweetalert} from 'zent'
import Bus from '@/assets/eventBus.js'
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
this.state = {
clientY: 0,
selectDom: '',
icon: '',
this.state={
clientY:0,
selectDom:'',
icon:''
}
}
opendescFn() {
this.props.opendesc(true)
}
customComponent(e, name, icon) {
customComponent(e,name,icon){
//getBoundingClientRect().top ;获取div最顶边距离浏览器的位置
let b = this.refs[name];
let offset_top = this.refs[name].getBoundingClientRect().top;
this.setState({ clientY: (offset_top - 125), selectDom: name, icon: icon });
if (name == 'searchBar') {
this.setState({ clientY: 0 });
let b=this.refs[name];
let offset_top=this.refs[name].getBoundingClientRect().top;
this.setState({clientY:(offset_top-125),selectDom:name,icon:icon});
if(name=='searchBar'){
this.setState({clientY:0});
}
if (name == 'bottomBar') {
this.setState({ clientY: 600 });
if(name=='bottomBar'){
this.setState({clientY:600});
}
}
deleteFn() {
let selectDom = this.state.selectDom;//需删除组件名称
deleteFn(){
let selectDom=this.state.selectDom;//需删除组件名称
Sweetalert.confirm({
title: '确认信息',
title:'确认信息',
content: <p>确认删除该模块</p>,
onConfirm: () => {
this.setState({ selectDom: '' });
Bus.emit('componentLibClose', selectDom)
},
onCancel: () => {
onConfirm:()=>{
this.setState({selectDom:''});
Bus.emit('componentLibClose',selectDom)
},
onCancel:()=>{
},
parentComponent: this
});
}
render() {
let goodsConfig = this.props.goodsdata;
let {backgroundImg,search,picture,title,bottomBar}=goodsConfig;
let naVisual=bottomBar.navlist.filter(item=>item.iswitch);
let goodsConfig=this.props.goodsdata;
console.log(48,goodsConfig);
let naVisual=[]
if(goodsConfig.bottomBar){
naVisual=goodsConfig.bottomBar.navlist.filter(item=>item.iswitch);
}
return (
<div className="editor-main goodstemplate" style={{ background:backgroundImg && backgroundImg.bgImg ? `url('${backgroundImg.bgImg}') center center /cover` :backgroundImg.bgColor }}>
<div className="editor-main goodstemplate" style={{ background:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgImg? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover`:goodsConfig.backgroundImg&&goodsConfig.backgroundImg.bgColor?goodsConfig.backgroundImg.bgColor:'#F2F7F8' }}>
{
search && search.iswitch ?
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search"><SearchBarView searchConfig={search} /></div> : null
goodsConfig.search&&goodsConfig.search.iswitch?
<div onClick={e=>this.customComponent(e,'search','marketing-sousuolan-')} className={this.state.selectDom=='search'?'selectBorder':''} ref="search"><SearchBarView searchConfig={goodsConfig.search} /></div>:null
}
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
{
!goodsConfig.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={goodsConfig.top_image} />
}
{
picture && picture.iswitch ? <div onClick={e => this.customComponent(e, 'picture', 'marketing-tupian')} ref="picture" className={this.state.selectDom == 'picture' ? 'selectBorder' : ''}><img src={picture.img} alt="" className="picture" /></div> : null
{
goodsConfig.picture&&goodsConfig.picture.iswitch? <div onClick={e=>this.customComponent(e,'picture','marketing-tupian')} ref="picture" className={this.state.selectDom=='picture'?'selectBorder':''}><img src={goodsConfig.picture.img} alt="" className="picture"/></div>:null
}
{
title && title.iswitch && title.comstyle == 1 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
<div className={title.textAlign + ' content-title ' +title.fontSize} style={{ color: title.fontColor, fontWeight: 'bold' }}>{title.text}</div></div> : null
}
{
title && title.iswitch && title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
<img src={title.pic} className="title-pic" />
</div> : null
}
{
(title && title.iswitch && title.text||title.pic) || picture && picture.iswitch && picture.img ? <div className="parting-line"></div> : null
}
{
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />
}
{
goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>立即兑换</button> : null
}
{
goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
}
{
goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
}
{
bottomBar && bottomBar.iswitch&&naVisual.length>1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={bottomBar} /></div> : null
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==1?<div onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}><div className={goodsConfig.title.textAlign +' content-title '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor,fontWeight:'bold'}}>{goodsConfig.title.text}</div></div>:null
}
{
this.state.selectDom ? <div className="delete-component" style={{ top: this.state.clientY }}>
<i className={'marketing ' + this.state.icon}></i>
<b className="split">|</b>
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
</div> : null
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==2?<div onClick={e=>this.customComponent(e,'title','marketing-fuwenbenkuang')} ref="title" className={this.state.selectDom=='title'?'selectBorder':''}>
<img src={goodsConfig.title.pic} alt="" className="title-pic"/>
</div>:null
}
{
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
}
{
goodsConfig.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : goodsConfig.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />
}
{
goodsConfig.list == 2 ? <button className={goodsConfig.describe.type == 1 && goodsConfig.describe.bg_image || goodsConfig.describe.type == 3 ? "exchageBtn bottomBtn" : "exchageBtn"} style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>立即兑换</button> : null
}
{
goodsConfig.describe.type == 1 ? <img src={goodsConfig.describe.bg_image} alt="" className={goodsConfig.list == 1 && goodsConfig.describe.bg_image ? 'bottomTip bottomTipview' : 'bottomTip'} /> : goodsConfig.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: goodsConfig.describe.content }}></div> : null
}
{
goodsConfig.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
}
{
goodsConfig.bottomBar&&goodsConfig.bottomBar.iswitch&&naVisual.length>1? <div ref="bottomBar" onClick={e=>this.customComponent(e,'bottomBar','marketing-list')} className={this.state.selectDom=='bottomBar'?'selectBottomBorder':''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar}/></div>:null
}
{
this.state.selectDom?<div className="delete-component" style={{top:this.state.clientY}}>
<i className={'marketing '+this.state.icon}></i>
<b className="split">|</b>
<span className="del-color" onClick={this.deleteFn.bind(this)}>删除</span>
</div>:null
}
</div>
)
}
}

View File

@ -1,22 +1,8 @@
import React from 'react'
import './main.less'
import '../../../assets/comm.css'
import {
Notify,
BlockLoading,
Button,
RadioGroup,
RadioButton
} from 'zent'
import {
uploadImg,
handelResponse,
addTheme,
putMyTheme,
putTheme,
putSystemTemplate,
addSystemTemplate
} from '../../../assets/api.js'
import {Notify,BlockLoading,Button,RadioGroup,RadioButton} from 'zent'
import {uploadImg,handelResponse,addTheme,putMyTheme, putTheme,putSystemTemplate,addSystemTemplate} from '../../../assets/api.js'
import Bus from '@/assets/eventBus.js'
import PreviewEffect from '../previewEffect/main'
import html2canvas from 'html2canvas'
@ -900,13 +886,18 @@ export default class edittemplate extends React.Component {
<h4>商品列表页:</h4>
<div
onClick={() => this.activeChoice(2)}
className={
this.state.activeNavStatus == 2
? 'activeNav thumbheader'
: 'thumbheader'
}>
<div className='goodsList-item' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
<div className='goodsList-item'>
<Goodstemplate
opendesc={(c) => this.setState({ activeshow: true })}
goodsdata={this.state.product_list}
/>
</div>
{/* <div className='goodsList-item' style={{ background: this.state.product_list.backgroundImg && this.state.product_list.backgroundImg.bgImg ? `url('${this.state.product_list.backgroundImg.bgImg}') center center /cover` : '#F2F7F8' }}>
{
this.state.product_list.search&&this.state.product_list.search.iswitch ? <SearchBarView searchConfig={this.state.product_list.search} /> : null
}
@ -1000,7 +991,7 @@ export default class edittemplate extends React.Component {
{
this.state.product_list.bottomBar&&this.state.product_list.bottomBar.iswitch? <BottomBarView bottomBarConfig={this.state.product_list.bottomBar}/>:null
}
</div>
</div> */}
</div>
</div>
<div className='item'>

View File

@ -589,119 +589,135 @@
&.activeNav {
border: 5px solid #DDEEFF;
}
.goodsList-item {
position: relative;
height: 100%;
overflow: hidden;
.topbanner {
width: 100%;
height: 50px;
.goodstemplate{
transform: scale(0.315);
transform-origin: 0 0;
}
>.content-title{
position: relative;
z-index: 999;
height: 20px;
padding:0 8px;
font-size: 8px;
}
.parting-line{
height:15px;
}
.searchBar{
transform: scale(0.8);
font-size: 10px;
padding: 0 5px;
border-radius: 10px;
}
.marketing{
width: 10px;
}
.bottom_Img {
width: 100%;
}
.bottom_activeTip {
width: 7.2vw;
margin-left: 0.4vw;
padding: 6px;
background: #fff;
border-radius: 2px;
box-shadow: 1px 1px 13px 2px #f1f2f3;
box-sizing: border-box;
line-height: 15px;
padding-bottom: 60px;
font-size: 8px;
}
.susactive_Tip {
position: absolute;
top: 14px;
right: 0;
width: 14px;
// height: 24px;
}
.preBtn {
position: absolute;
width: 14px;
height: 14px;
top: 4%;
left: 4%;
}
.goodsPic,
.goodsPicMatrax {
width: 90%;
margin-left: 5%;
position: relative;
margin-top: -20px;
}
.bottom_exchageBtn {
position: absolute;
bottom: 0;
left: 0;
margin: 0 5% 3% !important;
}
.exchageBtn {
width: 90%;
height: 30px;
font-size: 8px;
color: #fff;
height: 20px;
background: #E8EAEC;
border-radius: 15px;
margin: 10% 5%;
}
.bottomBar-view{
width: 100%;
height: 30px;
position: absolute;
bottom: 0;
display: flex;
justify-content: space-evenly;
}
.bottomBar-view>li{
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
}
.bottomBar-view>li>img{
width: 8px;
height: 8px;
}
.bottomBar-view>li>span{
font-size: 6px;
.editor-main{
top: 0;
img{
width: auto!important;
}
}
}
// .goodsList-item {
// position: relative;
// height: 100%;
// overflow: hidden;
// .goodstemplate{
// transform: scale(0.31);
// transform-origin: 0 0;
// }
// .topbanner {
// width: 100%;
// height: 50px;
// }
// >.content-title{
// position: relative;
// z-index: 999;
// height: 20px;
// padding:0 8px;
// font-size: 8px;
// }
// .parting-line{
// height:15px;
// }
// .searchBar{
// transform: scale(0.8);
// font-size: 10px;
// padding: 0 5px;
// border-radius: 10px;
// }
// .marketing{
// width: 10px;
// }
// .bottom_Img {
// width: 100%;
// }
// .bottom_activeTip {
// width: 7.2vw;
// margin-left: 0.4vw;
// padding: 6px;
// background: #fff;
// border-radius: 2px;
// box-shadow: 1px 1px 13px 2px #f1f2f3;
// box-sizing: border-box;
// line-height: 15px;
// padding-bottom: 60px;
// font-size: 8px;
// }
// .susactive_Tip {
// position: absolute;
// top: 14px;
// right: 0;
// width: 14px;
// // height: 24px;
// }
// .preBtn {
// position: absolute;
// width: 14px;
// height: 14px;
// top: 4%;
// left: 4%;
// }
// .goodsPic,
// .goodsPicMatrax {
// width: 90%;
// margin-left: 5%;
// position: relative;
// margin-top: -20px;
// }
// .bottom_exchageBtn {
// position: absolute;
// bottom: 0;
// left: 0;
// margin: 0 5% 3% !important;
// }
// .exchageBtn {
// width: 90%;
// height: 30px;
// font-size: 8px;
// color: #fff;
// height: 20px;
// background: #E8EAEC;
// border-radius: 15px;
// margin: 10% 5%;
// }
// .bottomBar-view{
// width: 100%;
// height: 30px;
// position: absolute;
// bottom: 0;
// display: flex;
// justify-content: space-evenly;
// }
// .bottomBar-view>li{
// flex: 1;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// cursor: pointer;
// }
// .bottomBar-view>li>img{
// width: 8px;
// height: 8px;
// }
// .bottomBar-view>li>span{
// font-size: 6px;
// }
// }
}
}
}