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{
width: 20px;
height: 20px;
width: 20px!important;
height: 20px!important;
}
.bottomBar-view>li>span{
padding-top: 5px;

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

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

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

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

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

@ -359,7 +359,7 @@
vertical-align: middle;
}
.center {
#center {
width: 100%;
padding: 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 { RadioButton, Icon,RadioGroup } from 'zent'
import PreviewItem from '../template/preview.js'
import '../template/main.less'
export default class previewEffect extends React.Component {
constructor(props) {
super(props)
@ -17,7 +18,6 @@ export default class previewEffect extends React.Component {
detailType:3
}
}
onClose() {
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 _ from "lodash";
import "./preview.less"
import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏
import BottomBarView from '../edittemplate/couponConfig/bottomBar' //底部栏
import Descteplate from "../edittemplate/goodsdesc.js"
export default class acclist extends React.Component {
constructor(props) {
@ -35,8 +38,6 @@ export default class acclist extends React.Component {
showactiveIcon(c) {
this.setState({ activeshow: false });
}
opendescFn() {
this.setState({ activeshow: true });
}
@ -50,9 +51,15 @@ export default class acclist extends React.Component {
render() {
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 (
<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 ? (
<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" />
}
<div className="submit"></div>
</div>
<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" >
{
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" />
{
!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 ? <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
@ -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
}
{
goodsConfig.bottomBar&&goodsConfig.bottomBar.iswitch&&naVisual.length>1? <BottomBarView bottomBarConfig={goodsConfig.bottomBar}/>: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>
</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>

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

@ -1,4 +1,4 @@
.maskdeiol{
.maskdeiol {
position: fixed;
top: 0;
left: 0;
@ -7,8 +7,9 @@
background: rgba(0, 0, 0, 0.8);
z-index: 8;
}
.preview-box{
.preview-top-close{
.preview-box {
.preview-top-close {
padding-left: 28px;
position: absolute;
top: 30px;
@ -19,109 +20,129 @@
}
}
#preview-bg{
z-index: 10;
#preview-bg {
z-index: 10;
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;
overflow-y: hidden;
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;
top: 0;
margin-top: -45px;
}
.preBtn,.susactive_tip{
width: 30px;
}
.top{
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.viewdetailBtn{
top:90%;
width:200px;
left: 50%;
margin-left: -100px;
height: 40px;
z-index: 9999;
}
img{
width: 100%;
vertical-align: middle;
}
.center{
width: 100%;
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;
top: 0;
margin-top: -45px;
}
.preBtn,
.susactive_tip {
width: 30px;
}
.top {
width: 100%;
height: auto;
padding: 0;
margin: 0;
}
.viewdetailBtn {
top: 90%;
width: 200px;
left: 50%;
margin-left: -100px;
height: 40px;
z-index: 9999;
}
.bottomBar-view{
position: static;
}
img {
width: 100%;
vertical-align: middle;
}
#preview-center {
width: 100%;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
vertical-align: middle;
}
.goodstemplate {
.bottomTip {
width: 100%;
margin-top: 10px;
}
.submit:active{
background-color: #F3F5F7;
border-radius: 30px;
opacity: 0.2;
.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;
border-radius: 30px;
opacity: 0.2;
}
}
.footbar{
.footbar {
width: 100%;
height: 80px;
background-color: #FFFFFF;
@ -130,7 +151,8 @@
align-items: center;
}
.previewComponent .verifycode{
.previewComponent .verifycode {
// width: 21%!important;
// height: 18%;
// position: absolute;
@ -138,7 +160,7 @@
// top: 39%;
// border-radius:32px;
// z-index: 555;
width: 2.2em!important;
width: 2.2em !important;
height: 1.2em;
position: absolute;
right: 0.8em;
@ -147,19 +169,22 @@
z-index: 555;
}
.preview-box .previewComponent .exchageBtn{
.preview-box .previewComponent .exchageBtn {
width: 90%;
margin: 30px 5%;
}
.previewComponent .preview-show .bottomactiveTip{
.previewComponent .preview-show .bottomactiveTip {
width: 95%;
margin-left: 2.5%;
p{
p {
width: 100%;
}
}
.previewComponent .preview-show .bottomBtn{
width:200px;
.previewComponent .preview-show .bottomBtn {
width: 200px;
left: 50%;
margin-left: -100px;
height: 40px;

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

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