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>

95
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,54 +20,66 @@
} }
} }
#preview-bg{ #preview-bg {
z-index: 10; z-index: 10;
height: 100%; height: 100%;
position: relative; position: relative;
overflow-y: hidden; overflow-y: auto;
background: #fff; background: #fff;
box-shadow: 0 0 1px #C1C1C1; box-shadow: 0 0 1px #C1C1C1;
.goodstemplate, .detailstemplate{ .goodstemplate,
height:100%; .detailstemplate {
height: 100%;
} }
.editor-main{
.editor-main {
top: 0; top: 0;
width: 100%; width: 100%;
} }
.landpage{
.landpage {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow-y: scroll; overflow-y: scroll;
} }
.swiperType{
.swiperType {
width: 96%; width: 96%;
margin-left: 2%; margin-left: 2%;
position: relative; position: relative;
top: 0; top: 0;
margin-top: -45px; margin-top: -45px;
} }
.preBtn,.susactive_tip{
.preBtn,
.susactive_tip {
width: 30px; width: 30px;
} }
.top{
.top {
width: 100%; width: 100%;
height: auto; height: auto;
padding: 0; padding: 0;
margin: 0; margin: 0;
} }
.viewdetailBtn{
top:90%; .viewdetailBtn {
width:200px; top: 90%;
width: 200px;
left: 50%; left: 50%;
margin-left: -100px; margin-left: -100px;
height: 40px; height: 40px;
z-index: 9999; z-index: 9999;
} }
img{ .bottomBar-view{
position: static;
}
img {
width: 100%; width: 100%;
vertical-align: middle; vertical-align: middle;
} }
.center{
#preview-center {
width: 100%; width: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
@ -74,37 +87,43 @@
overflow: hidden; overflow: hidden;
vertical-align: middle; vertical-align: middle;
} }
.goodstemplate{
.bottomTip{ .goodstemplate {
.bottomTip {
width: 100%; width: 100%;
margin-top: 10px; margin-top: 10px;
} }
.bottomBtn{
.bottomBtn {
top: 84%; top: 84%;
} }
.bottomTipView{
.bottomTipView {
padding-bottom: 30px; padding-bottom: 30px;
} }
} }
.bottom{
.bottom {
width: 100%; width: 100%;
height: auto; height: auto;
vertical-align: middle; vertical-align: middle;
position: relative; position: relative;
} }
.textTip_land{
.textTip_land {
position: absolute; position: absolute;
top: 0; top: 0;
padding:70px 25px 0; padding: 70px 25px 0;
line-height: 1.5rem; line-height: 1.5rem;
font-size: 13px; font-size: 13px;
box-sizing: border-box; box-sizing: border-box;
} }
#preview-center-img{
#preview-center-img {
width: 100%; width: 100%;
} }
.submit{ .submit {
position: absolute; position: absolute;
top: 1.5rem; top: 1.5rem;
left: 50%; left: 50%;
@ -114,14 +133,16 @@
z-index: 2; z-index: 2;
background-color: transparent; background-color: transparent;
} }
.submit:active{
.submit:active {
background-color: #F3F5F7; background-color: #F3F5F7;
border-radius: 30px; border-radius: 30px;
opacity: 0.2; 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{