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 17:38:13 +08:00
parent c27ebf9bed
commit 720b12704c
8 changed files with 176 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/pages/exchangepage/edittemplate/couponConfig/comm.less
View File

@ -37,8 +37,8 @@
} }
.bottomBar-view>li>img{ .bottomBar-view>li>img{
width: 20px; width: 20px!important;
height: 20px; height: 20px!important;
} }
.bottomBar-view>li>span{ .bottomBar-view>li>span{
padding-top: 5px; padding-top: 5px;

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

@ -95,9 +95,7 @@ export default class edittemplate extends React.Component {
render() { render() {
let goodsConfig=this.props.goodsdata; let goodsConfig=this.props.goodsdata;
console.log(48,goodsConfig); console.log(48,goodsConfig);
let naVisual=[] let naVisual=[]
if(goodsConfig.bottomBar){ if(goodsConfig.bottomBar){
@ -176,11 +174,7 @@ export default class edittemplate extends React.Component {
} }
{ {
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 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
} }
{ {

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

@ -23,6 +23,7 @@
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
padding: 0 13px; padding: 0 13px;
display: flex;
} }
.parting-line{ .parting-line{
height: 50px; height: 50px;

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

@ -359,7 +359,7 @@
vertical-align: middle; vertical-align: middle;
} }
.center { #center {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;

2
src/pages/exchangepage/previewEffect/main.js
View File

@ -4,6 +4,7 @@ import '../main/main.less'
import '../../../assets/comm.css' import '../../../assets/comm.css'
import { RadioButton, Icon,RadioGroup } from 'zent' import { RadioButton, Icon,RadioGroup } from 'zent'
import PreviewItem from '../template/preview.js' import PreviewItem from '../template/preview.js'
import '../template/main.less'
export default class previewEffect extends React.Component { export default class previewEffect extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
@ -17,7 +18,6 @@ export default class previewEffect extends React.Component {
detailType:3 detailType:3
} }
} }
onClose() { onClose() {
this.props.onCloseFn(); this.props.onCloseFn();
} }

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

@ -5,6 +5,9 @@ import { RadioGroup, RadioButton, Input, openDialog, Dialog, Notify, Switch, Swi
import "../../../assets/comm.css" import "../../../assets/comm.css"
import _ from "lodash"; import _ from "lodash";
import "./preview.less" import "./preview.less"
import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏
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 acclist extends React.Component {
constructor(props) { constructor(props) {
@ -35,8 +38,6 @@ export default class acclist extends React.Component {
showactiveIcon(c) { showactiveIcon(c) {
this.setState({ activeshow: false }); this.setState({ activeshow: false });
} }
opendescFn() { opendescFn() {
this.setState({ activeshow: true }); this.setState({ activeshow: true });
} }
@ -50,9 +51,15 @@ export default class acclist extends React.Component {
render() { render() {
let propsData = this.props.data; let propsData = this.props.data;
let goodsConfig=propsData.product_list;
let naVisual=[]
if(goodsConfig.bottomBar){
naVisual=goodsConfig.bottomBar.navlist.filter(item=>item.iswitch);
}
console.log(53,this.props);
return ( return (
<div className="preview-show"> <div className="preview-show">
<div id="preview-bg"> <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' }}>
{ {
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 }}>
@ -68,7 +75,6 @@ export default class acclist extends React.Component {
{ {
this.props.pageType == 1 ? <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/getsmscode.png" className="verifycode" /> : <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/verify.png" className="verifycode" /> this.props.pageType == 1 ? <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/getsmscode.png" className="verifycode" /> : <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/verify.png" className="verifycode" />
} }
<div className="submit"></div> <div className="submit"></div>
</div> </div>
<div className="bottom"> <div className="bottom">
@ -84,15 +90,36 @@ export default class acclist extends React.Component {
} }
{ {
this.props.step == 2 ? this.state.activeshow && propsData.product_list.describe.type == 2 && propsData.product_list.describe.content ? <Descteplate backPrepage={c => this.showactiveIcon(c)} goodsdata={propsData.product_list} /> : <div className="goodstemplate" > this.props.step == 2 ? this.state.activeshow && propsData.product_list.describe.type == 2 && propsData.product_list.describe.content ? <Descteplate backPrepage={c => this.showactiveIcon(c)} goodsdata={propsData.product_list} /> : <div className="goodstemplate" >
{
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" /> <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
{ {
!propsData.product_list.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={propsData.product_list.top_image} /> !propsData.product_list.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={propsData.product_list.top_image} />
} }
{
goodsConfig.picture&&goodsConfig.picture.iswitch?<img src={goodsConfig.picture.img} alt="" className="picture"/>:null
}
{
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==1?<div className={goodsConfig.title.textAlign +' content-title '+goodsConfig.title.fontSize} style={{color:goodsConfig.title.fontColor,fontWeight:'bold'}}>{goodsConfig.title.text}</div>:null
}
{
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.comstyle==2?
<img src={goodsConfig.title.pic} alt="" className="title-pic"/>
:null
}
{
goodsConfig.title&&goodsConfig.title.iswitch&&goodsConfig.title.text||goodsConfig.picture&&goodsConfig.picture.iswitch&&goodsConfig.picture.img?<div className="parting-line"></div>:null
}
{ {
propsData.product_list.list == 2 ? <img className="swiperType" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiperview.png" /> : propsData.product_list.list == 3 ? <img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrixview.png'} /> : <img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listview.png'} /> propsData.product_list.list == 2 ? <img className="swiperType" src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiperview.png" /> : propsData.product_list.list == 3 ? <img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrixview.png'} /> : <img className="swiperType" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listview.png'} />
} }
{ {
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 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" : "exchageBtn"} style={{ color: propsData.product_list.font_color, background: propsData.product_list.button_color }}>立即兑换</button> : null
} }
{ {
propsData.product_list.describe.type == 1 ? <img src={propsData.product_list.describe.bg_image} alt="" className={propsData.product_list.describe.type && propsData.product_list.list == 1 ? 'bottomTipView' : 'bottomTip'} /> : propsData.product_list.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: propsData.product_list.describe.content }}></div> : null propsData.product_list.describe.type == 1 ? <img src={propsData.product_list.describe.bg_image} alt="" className={propsData.product_list.describe.type && propsData.product_list.list == 1 ? 'bottomTipView' : 'bottomTip'} /> : propsData.product_list.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: propsData.product_list.describe.content }}></div> : null
@ -100,6 +127,9 @@ export default class acclist extends React.Component {
{ {
propsData.product_list.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 propsData.product_list.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? <BottomBarView bottomBarConfig={goodsConfig.bottomBar}/>:null
}
</div> : null </div> : null
} }
@ -119,8 +149,8 @@ export default class acclist extends React.Component {
} }
<button className="exchangeBtn viewdetailBtn" style={{ background: propsData.product_detail.button_color, color: propsData.product_detail.font_color }}>立即兑换</button> <button className="exchangeBtn viewdetailBtn" style={{ background: propsData.product_detail.button_color, color: propsData.product_detail.font_color }}>立即兑换</button>
</div> </div>
) : (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>) ) : null
// (<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>)
} }
</div> </div>

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

@ -1,4 +1,4 @@
.maskdeiol{ .maskdeiol {
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -7,8 +7,9 @@
background: rgba(0, 0, 0, 0.8); background: rgba(0, 0, 0, 0.8);
z-index: 8; z-index: 8;
} }
.preview-box{
.preview-top-close{ .preview-box {
.preview-top-close {
padding-left: 28px; padding-left: 28px;
position: absolute; position: absolute;
top: 30px; top: 30px;
@ -19,109 +20,129 @@
} }
} }
#preview-bg{ #preview-bg {
z-index: 10; z-index: 10;
height: 100%; height: 100%;
position: relative;
overflow-y: auto;
background: #fff;
box-shadow: 0 0 1px #C1C1C1;
.goodstemplate,
.detailstemplate {
height: 100%;
}
.editor-main {
top: 0;
width: 100%;
}
.landpage {
width: 100%;
height: 100%;
overflow-y: scroll;
}
.swiperType {
width: 96%;
margin-left: 2%;
position: relative; position: relative;
overflow-y: hidden; top: 0;
background: #fff; margin-top: -45px;
box-shadow: 0 0 1px #C1C1C1; }
.goodstemplate, .detailstemplate{
height:100%; .preBtn,
} .susactive_tip {
.editor-main{ width: 30px;
top: 0; }
width: 100%;
} .top {
.landpage{ width: 100%;
width: 100%; height: auto;
height: 100%; padding: 0;
overflow-y: scroll; margin: 0;
} }
.swiperType{
width: 96%; .viewdetailBtn {
margin-left: 2%; top: 90%;
position: relative; width: 200px;
top: 0; left: 50%;
margin-top: -45px; margin-left: -100px;
} height: 40px;
.preBtn,.susactive_tip{ z-index: 9999;
width: 30px; }
} .bottomBar-view{
.top{ position: static;
width: 100%; }
height: auto; img {
padding: 0; width: 100%;
margin: 0; vertical-align: middle;
} }
.viewdetailBtn{
top:90%; #preview-center {
width:200px; width: 100%;
left: 50%; padding: 0;
margin-left: -100px; margin: 0;
height: 40px; position: relative;
z-index: 9999; overflow: hidden;
} vertical-align: middle;
img{ }
width: 100%;
vertical-align: middle; .goodstemplate {
} .bottomTip {
.center{ width: 100%;
width: 100%; margin-top: 10px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
vertical-align: middle;
}
.goodstemplate{
.bottomTip{
width: 100%;
margin-top: 10px;
}
.bottomBtn{
top: 84%;
}
.bottomTipView{
padding-bottom: 30px;
}
}
.bottom{
width: 100%;
height: auto;
vertical-align: middle;
position: relative;
}
.textTip_land{
position: absolute;
top: 0;
padding:70px 25px 0;
line-height: 1.5rem;
font-size: 13px;
box-sizing: border-box;
}
#preview-center-img{
width: 100%;
}
.submit{
position: absolute;
top: 1.5rem;
left: 50%;
width: 3rem;
height: 0.4rem;
margin-left: -1.5rem;
z-index: 2;
background-color: transparent;
} }
.submit:active{
background-color: #F3F5F7; .bottomBtn {
border-radius: 30px; top: 84%;
opacity: 0.2;
} }
.bottomTipView {
padding-bottom: 30px;
}
}
.bottom {
width: 100%;
height: auto;
vertical-align: middle;
position: relative;
}
.textTip_land {
position: absolute;
top: 0;
padding: 70px 25px 0;
line-height: 1.5rem;
font-size: 13px;
box-sizing: border-box;
}
#preview-center-img {
width: 100%;
}
.submit {
position: absolute;
top: 1.5rem;
left: 50%;
width: 3rem;
height: 0.4rem;
margin-left: -1.5rem;
z-index: 2;
background-color: transparent;
}
.submit:active {
background-color: #F3F5F7;
border-radius: 30px;
opacity: 0.2;
}
} }
.footbar{
.footbar {
width: 100%; width: 100%;
height: 80px; height: 80px;
background-color: #FFFFFF; background-color: #FFFFFF;
@ -130,7 +151,8 @@
align-items: center; align-items: center;
} }
.previewComponent .verifycode{
.previewComponent .verifycode {
// width: 21%!important; // width: 21%!important;
// height: 18%; // height: 18%;
// position: absolute; // position: absolute;
@ -138,7 +160,7 @@
// top: 39%; // top: 39%;
// border-radius:32px; // border-radius:32px;
// z-index: 555; // z-index: 555;
width: 2.2em!important; width: 2.2em !important;
height: 1.2em; height: 1.2em;
position: absolute; position: absolute;
right: 0.8em; right: 0.8em;
@ -147,19 +169,22 @@
z-index: 555; z-index: 555;
} }
.preview-box .previewComponent .exchageBtn{ .preview-box .previewComponent .exchageBtn {
width: 90%; width: 90%;
margin: 30px 5%; margin: 30px 5%;
} }
.previewComponent .preview-show .bottomactiveTip{
.previewComponent .preview-show .bottomactiveTip {
width: 95%; width: 95%;
margin-left: 2.5%; margin-left: 2.5%;
p{
p {
width: 100%; width: 100%;
} }
} }
.previewComponent .preview-show .bottomBtn{
width:200px; .previewComponent .preview-show .bottomBtn {
width: 200px;
left: 50%; left: 50%;
margin-left: -100px; margin-left: -100px;
height: 40px; height: 40px;

2
src/pages/extension/main/main.css
View File

@ -37,7 +37,7 @@
#extension .main-title{ #extension .main-title{
padding: 14px 0 14px 8px; padding: 14px 0 14px 8px;
} }
#extension .center{ #extension #center{
height: 760px; height: 760px;
} }
#extension .toolbar{ #extension .toolbar{