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

style:调整编辑器预览区域兼容性，搜索栏，底部栏目样式

This commit is contained in:
Apple 2022-10-10 16:13:21 +08:00
parent a0976834b5
commit d7b0c04388
7 changed files with 96 additions and 62 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/comm.less
View File

@ -1,6 +1,14 @@
.searchBar-container {
padding: 4px 0;
box-sizing: border-box;
position: relative;
.preBtn{
width: 28px;
height: 28px;
position:absolute;
top: 18px;
margin-left: 4%;
}
}
.searchBar {
@ -8,7 +16,7 @@
justify-content: center;
padding: 0 10px;
box-sizing: border-box;
// flex: 1;
i {
width: 16px;
}

1
src/pages/exchangepage/edittemplate/couponCard/couponViewConfig/searchBar.js
View File

@ -9,6 +9,7 @@ export default class searchBar extends React.Component {
let searchConfig=this.props.searchConfig;
return (
<div className="searchBar-container" style={{background:searchConfig.bgColor}}>
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
<div className={searchConfig.shape +' searchBar '+searchConfig.textAlign} style={{background:searchConfig.borderColor,color:searchConfig.fontColor}}>
<i className='marketing marketing-sousuo' />
<div className='placeholder'>

56
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -6,6 +6,7 @@ import SearchBarView from './couponCard/couponViewConfig/searchBar' //商品详
import BottomBarView from './couponCard/couponViewConfig/bottomBar' //底部栏
import { Sweetalert } from 'zent'
import Bus from '@/assets/eventBus.js'
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
@ -36,7 +37,7 @@ export default class edittemplate extends React.Component {
content: <p>确认删除该模块？</p>,
onConfirm: () => {
this.setState({ selectDom: '' });
Bus.emit('componentLib', {attr:selectDom,value:0})
Bus.emit('componentLib', { attr: selectDom, value: 0 })
},
onCancel: () => {
},
@ -44,58 +45,71 @@ export default class edittemplate extends React.Component {
});
}
//动态设置容器高度
setHeight() {
let height = 653;
let searchHeight = 0;
let bottomHeight = 0;
let goodsConfig = this.props.goodsdata;
if (goodsConfig.search && goodsConfig.search.iswitch == 1) searchHeight = 60;
if (goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch == 1) bottomHeight = 50;
return `${height - searchHeight - bottomHeight}px`
}
render() {
let goodsConfig = this.props.goodsdata;
let naVisual = []
if (goodsConfig.bottomBar) {
naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch==1);
naVisual = goodsConfig.bottomBar.navlist.filter(item => item.iswitch == 1);
}
return (
<div className="goodstemplate_Xcenter" >
<div className="goodstemplate" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8' }}>
{
goodsConfig.search && goodsConfig.search.iswitch==1 ?
<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.search && goodsConfig.search.iswitch == 1 ?
<div onClick={e => this.customComponent(e, 'search', 'marketing-sousuolan-', '搜索栏')} className={this.state.selectDom == 'search' ? 'selectBorder' : ''} ref="search">
<SearchBarView searchConfig={goodsConfig.search} /></div> : null
}
<div className="goodstemplate" style={{ background: goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgImg ? `url('${goodsConfig.backgroundImg.bgImg}') center center /cover` : goodsConfig.backgroundImg && goodsConfig.backgroundImg.bgColor ? goodsConfig.backgroundImg.bgColor : '#F2F7F8', height: this.setHeight() }}>
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" style={{display:goodsConfig.search && goodsConfig.search.iswitch == 1?'none':'block'}}/>
{
!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} />
}
{
goodsConfig.picture && goodsConfig.picture.iswitch==1 ? <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
goodsConfig.picture && goodsConfig.picture.iswitch == 1 ? <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
}
{
goodsConfig.title && goodsConfig.title.iswitch==1 && 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
goodsConfig.title && goodsConfig.title.iswitch == 1 && 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
}
{
goodsConfig.title && goodsConfig.title.iswitch==1 && goodsConfig.title.comstyle == 2 ? <div onClick={e => this.customComponent(e, 'title', 'marketing-fuwenbenkuang', '标题')} ref="title" className={this.state.selectDom == 'title' ? 'selectBorder' : ''}>
goodsConfig.title && goodsConfig.title.iswitch == 1 && 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==1 && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch==1 && goodsConfig.picture.img ? <div className="parting-line"></div> : null
goodsConfig.title && goodsConfig.title.iswitch == 1 && goodsConfig.title.text || goodsConfig.picture && goodsConfig.picture.iswitch == 1 && 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="exchageBtn" style={{ color: goodsConfig.font_color, background: goodsConfig.button_color }}>
{goodsConfig.search ? '立即购买' : '立即兑换'}
</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.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 }}>
{goodsConfig.search ? '立即购买' : '立即兑换'}
</button> : null
}
{
goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch==1 ? <div ref="bottomBar" onClick={e => this.customComponent(e, 'bottomBar', 'marketing-list', '底部栏')} className={this.state.selectDom == 'bottomBar' ? 'selectBottomBorder' : ''}><BottomBarView bottomBarConfig={goodsConfig.bottomBar} /></div> : null
}
</div>
{
goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch == 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 }}>
<span>{this.state.comName}</span>

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

@ -163,17 +163,16 @@
}
}
.searchBar {
width: 80%;
margin: 2% 15%;
height: 40px;
line-height: 40px;
box-sizing: border-box;
border: 0;
border-radius: 20px;
}
}
.searchBar {
width: 80%;
margin: 2% 15%;
height: 40px;
line-height: 40px;
box-sizing: border-box;
border: 0;
border-radius: 20px;
}
.detailstemplate {
position: relative;
background: #fff;

4
src/pages/exchangepage/edittemplate/main.less
View File

@ -577,7 +577,9 @@
}
.goodsList-item {
.goodstemplate {
pointer-events: none;
::-webkit-scrollbar {display:none}
.goodstemplate_Xcenter {
transform: scale(0.387);
transform-origin: 0 0;
}

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

@ -33,7 +33,22 @@ export default class preview extends React.Component {
this.setState({ detailactiveshow: true });
}
componentDidUpdate() {
document.querySelector("#previewbg").scrollTop = 0;
if(this.props.step == 2){
document.querySelector(".preview-show .goodstemplate").scrollTop = 0;
}else{
document.querySelector("#previewbg").scrollTop = 0;
}
}
//动态设置容器高度
setHeight() {
let height = '100%';
let searchHeight = 0;
let bottomHeight = 0;
let goodsConfig = this.props.data.product_list;
if (goodsConfig.search && goodsConfig.search.iswitch == 1) searchHeight = '60px';
if (goodsConfig.bottomBar && goodsConfig.bottomBar.iswitch == 1) bottomHeight = '50px';
return `calc(${height} - ${searchHeight} - ${bottomHeight})`
}
render() {
let propsData = this.props.data;
@ -120,16 +135,12 @@ export default class preview extends React.Component {
goodsdata={propsData.product_list}
/>
) : (
<div className="goodstemplate">
{goodsConfig.search && goodsConfig.search.iswitch ? (
<div className="goodstemplate_view" >
{goodsConfig.search && goodsConfig.search.iswitch ? (
<SearchBarView searchConfig={goodsConfig.search} />
) : null}
<img
src={
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
}
className="preBtn"
/>
<div className="goodstemplate" style={{ height: this.setHeight() }}>
<img src={"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"} className="preBtn" style={{display:goodsConfig.search && goodsConfig.search.iswitch == 1?'none':'block'}}/>
{!propsData.product_list.top_image ? (
<img
className="topbanner"
@ -206,7 +217,17 @@ export default class preview extends React.Component {
}
/>
)}
{propsData.product_list.list == 2 ? (
<button
className="exchageBtn"
style={{
color: propsData.product_list.font_color,
background: propsData.product_list.button_color,
}}
>
{goodsConfig.search ? '立即购买' : '立即兑换'}
</button>
) : null}
{propsData.product_list.describe.type == 1 ? (
<img
src={propsData.product_list.describe.bg_image}
@ -235,24 +256,8 @@ export default class preview extends React.Component {
}
/>
) : null}
{propsData.product_list.list == 2 ? (
<button
className={
(propsData.product_list.describe.type == 1 &&
propsData.product_list.describe.bg_image) ||
propsData.product_list.describe.type == 3
? "exchageBtn bottomBtn"
: "exchageBtn"
}
style={{
color: propsData.product_list.font_color,
background: propsData.product_list.button_color,
}}
>
立即兑换
</button>
) : null}
{goodsConfig.bottomBar &&
</div>
{goodsConfig.bottomBar &&
goodsConfig.bottomBar.iswitch &&
naVisual.length > 1 ? (
<BottomBarView bottomBarConfig={goodsConfig.bottomBar} />

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

@ -173,7 +173,9 @@
width: 90%;
margin: 30px 5%;
}
.previewComponent .preview-show{
height: 100%;
}
.previewComponent .preview-show .bottomactiveTip {
width: 95%;
margin-left: 2.5%;
@ -187,4 +189,7 @@
}
.previewComponent .preview-show .bottomBtn {
height: 40px;
}
.previewComponent .goodstemplate_view{
height: 100%;
}