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-20 17:28:48 +08:00
parent a888b05722
commit 8a31ec46aa
12 changed files with 498 additions and 419 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
View File

@ -31,12 +31,7 @@ export default class componentLib extends React.Component {
constructor(props) {
super(props);
}
componentWillMount(e) {}
//组件将要销毁阶段
componentWillUnmount() {}
propcomponentName(item){
console.log(39,item);
this.props.componentName(item.name);
if(item.name){
Bus.emit('componentLib',item)

7
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less
View File

@ -1,4 +1,3 @@
.componentLib {
width: 180px;
height: 100%;
@ -8,17 +7,14 @@
right: -190px;
padding: 15px;
box-sizing: border-box;
h4 {
padding: 15px 0;
cursor: pointer;
}
ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
li {
margin: 0 0 15px 0;
border-radius: 2px;
@ -33,10 +29,11 @@
justify-content: center;
cursor: pointer;
transition: all .3s;
&:hover {
background: #007aff;
color: #fff;
i{
i {
color: #fff;
}
}

19
src/pages/exchangepage/couponTemplate/goodsPage/config/backPicture.js
View File

@ -1,13 +1,12 @@
import React from 'react';
import { ImageUpload, ColorPicker, Notify, RadioGroup, RadioButton } from 'zent';
import "@/assets/comm.css"
import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main"
import { uploadImg, handelResponse } from "@/assets/api.js"
import Ipt from "@/components/input/main"
import { handelResponse, uploadImg } from "@/assets/api.js";
import "@/assets/comm.css";
import Bus from '@/assets/eventBus.js';
import FormItem from "@/components/form-item/main";
import Form from "@/components/form/main";
import _ from "lodash";
import Bus from '@/assets/eventBus.js'
export default class edittemplate extends React.Component {
import React from 'react';
import { ColorPicker, ImageUpload, Notify } from 'zent';
export default class backPicture extends React.Component {
constructor(props) {
super(props)
this.state = {
@ -27,7 +26,7 @@ export default class edittemplate extends React.Component {
this.setState({
bgColor: color
});
Bus.emit('globalColor',color)
Bus.emit('globalColor',color)
}
handleChange1 = (color) => {
this.setState({

14
src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less
View File

@ -5,35 +5,28 @@
margin-bottom: 8px;
background: #f5faff;
}
.component-item .v-editItem {
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.component-item .v-editItem>span {
color: #999;
}
.component-item .showType {
margin-right: 10px;
color: #333 !important;
}
.bottomBar .form-compontent {
padding-top: 0;
.choice-up-image {
margin-right: 15px;
.zent-image-upload-tips[data-zv="9.12.7"] {
text-align: center;
color: #333;
}
}
.colorItemfont {
margin-top: 0;
}
@ -43,31 +36,24 @@
.form-Item {
margin-bottom: 15px;
}
.form-compontent {
padding-top: 0;
.colorItemfont {
margin-top: 0;
}
}
}
.tips {
color: #999;
span {
color: #f00;
}
}
.color-control {
margin-top: 10px;
display: flex;
justify-content: space-between;
}
.backpic-item {
margin-bottom: 30px;
}

2
src/pages/exchangepage/couponTemplate/goodsPage/config/main.js
View File

@ -10,7 +10,7 @@ import BottomBar from './bottomBar';
import Picture from './picture.js'; //白名单商品页面
import SearchBar from './searchBar.js';
import Title from './title';
export default class edittemplate extends React.Component {
export default class couponGoodConfig extends React.Component {
constructor(props) {
super(props)
this.state = {

14
src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
View File

@ -46,8 +46,6 @@ export default class edittemplate extends React.Component {
}
};
onUploadError = (type, data) => {
if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
@ -71,18 +69,14 @@ export default class edittemplate extends React.Component {
reject();
})
});
let count = 0;
const update = () => {
if (path) {
resolve(
path
);
}
else {
if (count < 100) {
count += 2;
report(count);
@ -96,18 +90,15 @@ export default class edittemplate extends React.Component {
};
setTimeout(update, 500);
});
};
componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
let coupon = oldobj.coupon;
console.log(105,this.state);
coupon.product_list.picture = _.cloneDeep(this.state);
oldobj.coupon = coupon;
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
return (
<div className="assembly">
<div className='control page-title-control'>
@ -148,7 +139,6 @@ export default class edittemplate extends React.Component {
value={this.state.jumpUrl} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>:null
}
</Form>
</div>
</div>

5
src/pages/exchangepage/couponTemplate/goodsPage/config/searchBar.js
View File

@ -22,7 +22,6 @@ export default class Searchbar extends React.Component {
componentWillMount(e) {
//关闭
Bus.addListener('componentLibClose', (prop) => {
console.log(999,prop);
if(prop=='search'){
this.setState({iswitch:false})
}
@ -43,8 +42,6 @@ export default class Searchbar extends React.Component {
this.setState({ textAlign: e.target.value })
Bus.emit('textAlign', e.target.value)
}
changeBorder = (color) => {
this.setState({
borderColor: color
@ -63,7 +60,6 @@ export default class Searchbar extends React.Component {
});
Bus.emit('searchfontColor', color)
}
borderColorFn(cor) {
this.setState({ borderColor: cor });
Bus.emit('borderColor', cor)
@ -90,7 +86,6 @@ export default class Searchbar extends React.Component {
<div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>搜索栏设置</h1>
</div>
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form ref="form1">
<div className="activeTip">

3
src/pages/exchangepage/couponTemplate/goodsPage/config/title.js
View File

@ -22,7 +22,6 @@ export default class Title extends React.Component {
}
componentWillMount(e) {
Bus.addListener('componentLibClose', (prop) => {
console.log(999,prop);
if(prop=='title'){
this.setState({iswitch:false})
}
@ -201,8 +200,6 @@ export default class Title extends React.Component {
/>
</FormItem>
}
</Form>
</div>
</div>

2
src/pages/exchangepage/couponTemplate/landingPage/config/main.js
View File

@ -21,7 +21,6 @@ export default class couponLandpage extends React.Component {
},
}
}
componentWillMount(_e) {
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
let data = config.coupon.land;
@ -34,7 +33,6 @@ export default class couponLandpage extends React.Component {
model: model1
});
this.props.landbgcolor(color);
}
handleChange1 = (color) => {
let model1 = this.state.model;

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

@ -676,7 +676,9 @@ export default class edittemplate extends React.Component {
this.setState({ showType: e.target.value, activeNavStatus: 1,model: land, product_list, product_detail })
}
onPreview() {
this.setState({ previewData: this.state })
let previewInfo=_.cloneDeep(this.state);
previewInfo.land=this.state.model;
this.setState({ previewData:previewInfo})
this.setState({
preview_visible: true,
})

294
src/pages/exchangepage/template/main.js
View File

@ -1,35 +1,17 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Button, RadioGroup, RadioButton } from 'zent';
import "./main.less"
import { Icon, Notify } from 'zent';
import "../../../assets/comm.css"
import PreviewItem from "./preview.js"
import { handelResponse, getThemeType, getSystemTemplate, getTheme, copyThemecustom } from "../../../assets/api.js"
let model = {
title: "落地页标题",
top_image: "",
middle_image: "",
describe: { type: "", content: "", bg_image: '' },
bg_color: "#EEEEEE",
sort: 1,
type_id: { key: 2, text: '通用' },
font_color: "#000000",
thumb: ''
import _ from 'lodash';
import React from 'react';
import { Button, Icon, Notify, RadioButton, RadioGroup } from 'zent';
import { copyThemecustom, getSystemTemplate, getTheme, getThemeType, handelResponse } from "../../../assets/api.js";
import "../../../assets/comm.css";
import "./main.less";
import PreviewItem from "./preview.js";
let typeList={//1 白名单 3 兑换码 4优惠券 8 优惠券白名单
'1':'access_conf',
'3':'exchange',
'4':'coupon',
'8':'coupon',
}
//商品列表
let product_list = {
top_image: "",
list: "2",
font_color: "#ffffff",
button_color: "#FACD6A",
describe: { type: "", content: "", bg_image: '' },
}
let product_detail = {
font_color: "#ffffff",
button_color: "#FACD6A",
describe: { type: "", content: "", bg_image: '' },
}
export default class mytemplate extends React.Component {
constructor(props) {
super(props)
@ -45,7 +27,7 @@ export default class mytemplate extends React.Component {
activeHeight: 667,
showType: 1,
previewData: {},
moudleData: {},
moudleData: {}, //模版数据
previewwhite: {},
previewexchange: {},
system_template: [],
@ -71,86 +53,86 @@ export default class mytemplate extends React.Component {
}
onTypeChange(e) {
this.setState({ showType: e.target.value, pageStep: 1, showPage: 1,detailType:3 });
if (e.target.value == 1) {//白名单
let previewwhite = { ...this.state.previewwhite }
this.setState({ previewData: previewwhite });
} else if (e.target.value == 3) {//兑换码
let previewexchange = { ...this.state.previewexchange }
this.setState({ previewexchange: previewexchange });
this.setState({ previewData: previewexchange });
let viewInfo=_.cloneDeep(this.state.moudleData);
let viewData=viewInfo[typeList[e.target.value]];
if(!viewData){//新增模板，没有数据，需要拼接组装
viewData={
land:{
describe:{}
},
product_list:{
list:'',
describe:{}
},
product_detail:{
describe:{}
}
}
}
this.setState({ previewData: viewData});
}
componentDidMount(e) {
componentDidMount() {
let self = this;
getThemeType().then(res => {
handelResponse(res, (req, msg) => {
handelResponse(res, () => {
let typeListSource = res.data.map(it => {
return { id: it.id, title: it.name }
});
let typelistData = self.state.typeList.concat(typeListSource);
self.setState({ typeList: typelistData });
}, (err) => {
}, () => {
})
}).catch(err => {
}).catch(() => {
});
let data = { page: 1, limit: 10 }
getSystemTemplate(data).then(res => {
handelResponse(res, (req, msg) => {
handelResponse(res, (req) => {
this.setState({ system_template: req.data })
}, (err) => {
}, () => {
})
}).catch(err => {
}).catch(() => {
});
//监听滚动条滚动事件
this.refs.component.addEventListener('scroll', (event) => {
let scrolHeight = event.target.scrollTop;
let endreq = this.state.endreq;
if (scrolHeight > 300) {
this.setState({ toTopFlag: true });
this.setState({ toTopshow: false });
this.setState({ toTopFlag: true,toTopshow: false });
let isBottom = event.target.scrollHeight - event.target.clientHeight;
console.log('到底了',Math.round(isBottom));
console.log('设备高度',Math.round(event.target.scrollTop));
if (Math.round(isBottom)== Math.round(event.target.scrollTop)) {
let endreq = this.state.endreq;
if (endreq) {
let page = this.state.page;//请求
page = page + 1;
let data = { page: page, limit: 10 }
if (this.state.sourceIndex == 0) {//系统模板
if (this.state.typeIndex != 0) {
data.type_id = this.state.typeIndex;
}
let preResult = this.state.system_template;
getSystemTemplate(data).then(res => {
handelResponse(res, (req, msg) => {
if (0<req.data.length&&req.data.length==10) {
let addres = preResult.concat(req.data)
this.setState({ system_template: addres, page: page })
} else {
this.setState({ endreq: false });
}
}, (err) => {
})
}).catch(err => {
});
} else {
let preResult = this.state.system_template;
getTheme(data).then(res => {
handelResponse(res, (req, msg) => {
if (req.data.length > 0) {
let addres = preResult.concat(req.data)
this.setState({ system_template: addres, page: page })
} else {
this.setState({ endreq: false });
}
}, (err) => {
})
}).catch(err => {
});
}
if (Math.round(isBottom)== Math.round(event.target.scrollTop)&&endreq) {
let preResult = this.state.system_template;
let page = this.state.page;//请求
page = page + 1;
let data = { page: page, limit: 10 }
if (this.state.sourceIndex == 0) {//系统模板
if(this.state.typeIndex != 0) data.type_id = this.state.typeIndex;
getSystemTemplate(data).then(res => {
handelResponse(res, (req) => {
if (0<req.data.length&&req.data.length==10) {
let addres = preResult.concat(req.data)
this.setState({ system_template: addres, page: page })
} else {
this.setState({ endreq: false });
}
}, () => {
})
}).catch(() => {
});
} else {
getTheme(data).then(res => {
handelResponse(res, (req) => {
if (req.data.length > 0) {
let addres = preResult.concat(req.data)
this.setState({ system_template: addres, page: page })
} else {
this.setState({ endreq: false });
}
}, () => {
})
}).catch(() => {
});
}
}
} else {
@ -168,127 +150,79 @@ export default class mytemplate extends React.Component {
}
typeClick(e) {
this.setState({ typeIndex: e, page: 1, endreq: true })
if (e == 0)//全部
{
let data = { page: 1, limit: 10 }
getSystemTemplate(data).then(res => {
handelResponse(res, (req, msg) => {
console.log(req)
this.setState({ system_template: req.data })
if (req.data.length < 10) {
this.setState({ endreq: false });
}
}, (err) => {
})
}).catch(err => {
});
} else {
let data = { type_id: e, page: 1, limit: 10 }
getSystemTemplate(data).then(res => {
handelResponse(res, (req, msg) => {
this.setState({ system_template: req.data })
if (req.data.length < 10) {
this.setState({ endreq: false });
}
}, (err) => {
})
}).catch(err => {
});
}
let data = { page: 1, limit: 10 }
if(e) data.type_id=e;
getSystemTemplate(data).then(res => {
handelResponse(res, (req) => {
console.log(req)
this.setState({ system_template: req.data })
if (req.data.length < 10) {
this.setState({ endreq: false });
}
}, () => {
})
}).catch(() => {
});
}
sourceClick(e) {
this.setState({ sourceIndex: e, page: 1, endreq: true })
let data = { page: 1, limit: 10 }
if (e == 0) {
let data = { page: 1, limit: 10 }
getSystemTemplate(data).then(res => {
handelResponse(res, (req, msg) => {
handelResponse(res, (req) => {
this.setState({ system_template: req.data })
}, (err) => {
}, () => {
})
}).catch(err => {
}).catch(() => {
});
}
else {
let data = { page: 1, limit: 10 }
getTheme(data).then(res => {
handelResponse(res, (req, msg) => {
handelResponse(res, (req) => {
this.setState({ system_template: req.data })
}, (err) => {
}, () => {
})
}).catch(err => {
}).catch(() => {
});
}
}
onPreview(row) {
let rowdata = {};
rowdata.model = model;
rowdata.product_list = product_list;
rowdata.product_detail = product_detail;
let exchangedata = {}
exchangedata.model = model;
exchangedata.product_list = product_list;
exchangedata.product_detail = product_detail;
this.setState({ moudleData: row, showPage: 1, pageStep: 1, activeHeight: 667, setStyle: { width: '375px', height: '667px', transform: 'scale(0.75)' } });
if (row.access_conf) {
rowdata.model = row.access_conf.land;
rowdata.product_list = row.access_conf.product_list;
rowdata.product_detail = row.access_conf.product_detail;
}
if (row.exchange) {
exchangedata.model = row.exchange.land;
exchangedata.product_list = row.exchange.product_list;
exchangedata.product_detail = row.exchange.product_detail;
}
this.setState({ preview_url: row.href })
this.setState({ preview_visible: true, showType: row.page })
this.setState({ previewwhite: rowdata })
this.setState({ previewexchange: exchangedata })
if (row.page == 1) {
this.setState({ previewData: rowdata });
} else {
this.setState({ previewData: exchangedata });
let templateType=this.state.sourceIndex; //0 系统模版 1:我的模板
let previewInfo;
if(templateType==1){
previewInfo=row[typeList[row.page]]
}else{
previewInfo=row.exchange;
}
console.log(14,previewInfo);
this.setState({ preview_visible: true,previewData:previewInfo, showType: row.page,moudleData: row, showPage: 1, pageStep: 1, activeHeight: 667, setStyle: { width: '375px', height: '667px', transform: 'scale(0.75)' } });
}
onUse(row, type) {
let self = this;
if (row.edit == 0) {
Notify.error("该模板是定制模板无法编辑");
return
}
if (this.state.sourceIndex == 0) {
copyThemecustom(row.id).then(res => {
handelResponse(res, (req, msg) => {
handelResponse(res, (req) => {
row.id = req.id;
sessionStorage.setItem("pageInfo", JSON.stringify(row))
sessionStorage.setItem("isSort", 0)
sessionStorage.setItem('mouldType', 1);
sessionStorage.setItem('pageChange', 0);
if (type) {
window.location.href = "/#/edittemplate?type=" + type;
} else {
window.location.href = "/#/edittemplate?type=" + row.page;
}
}, (err) => {
}, () => {
})
}).catch(err => {
}).catch(() => {
});
}
else {
}else {
sessionStorage.setItem("pageInfo", JSON.stringify(row))
sessionStorage.setItem('mouldType', 1);
if (type) {
window.location.href = "/#/edittemplate?type=" + type;
} else {
window.location.href = "/#/edittemplate?type=" + row.page;
}
sessionStorage.setItem('pageChange', 1);
}
sessionStorage.setItem('mouldType', 1);
if (type) {
window.location.href = "/#/edittemplate?type=" + type;
} else {
window.location.href = "/#/edittemplate?type=" + row.page;
}
}
toTop() {
this.refs.component.scrollTo({
@ -347,7 +281,7 @@ export default class mytemplate extends React.Component {
{
this.state.sourceList.map((child, c_index) => {
return (
<div key={c_index} className={this.state.sourceIndex == c_index ? "block-selector-item active" : "block-selector-item"} onClick={(e) => { this.sourceClick(c_index) }} >
<div key={c_index} className={this.state.sourceIndex == c_index ? "block-selector-item active" : "block-selector-item"} onClick={() => { this.sourceClick(c_index) }} >
{child.title}
</div>
)
@ -362,7 +296,7 @@ export default class mytemplate extends React.Component {
{
this.state.typeList.map((child, c_index) => {
return (
<div className={this.state.typeIndex == c_index ? "block-selector-item active" : "block-selector-item"} onClick={(e) => { this.typeClick(c_index) }} key={c_index} >
<div className={this.state.typeIndex == c_index ? "block-selector-item active" : "block-selector-item"} onClick={() => { this.typeClick(c_index) }} key={c_index} >
{child.title}
</div>
)
@ -398,11 +332,11 @@ export default class mytemplate extends React.Component {
<i className=""></i>
</div>
<div className="xj-template-preview-card-operation">
<a onClick={(e) => { this.onPreview(child) }}>
<a onClick={() => { this.onPreview(child) }}>
<div className="svg-icon-container" style={{ width: "22px", height: "16px", "marginRight": "8px" }}>
<div className="svg-icon svg-icon-preview"></div>
</div> 预览</a>
<a onClick={(e) => { this.onUse(child) }}>
<a onClick={() => { this.onUse(child) }}>
<div className="svg-icon-container" style={{ width: "20px", height: "16px", "marginRight": "8px" }}>
<div className="svg-icon svg-icon-use"></div>
</div> 使用</a>
@ -470,7 +404,7 @@ export default class mytemplate extends React.Component {
) : null}
<div className="touse">
<Button type="primary"
onClick={(e) => { this.onUse(this.state.moudleData, this.state.showType) }}> 使用 </Button>
onClick={() => { this.onUse(this.state.moudleData, this.state.showType) }}> 使用 </Button>
</div>
</div>
</div>

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

@ -1,186 +1,372 @@
import ReactDOM from 'react-dom';
import React, { Component } from 'react';
import { Button } from 'zent';
import { RadioGroup, RadioButton, Input, openDialog, Dialog, Notify, Switch, Swiper, Dropdown, DropdownPosition, DropdownClickTrigger, Icon, MenuItem, DropdownContent, Menu, Sweetalert } from 'zent';
import "../../../assets/comm.css"
import _ from "lodash";
import '../edittemplate/goodstemplate'
import "./preview.less"
import SearchBarView from '../edittemplate/couponConfig/searchBar' //商品详情搜索栏
import BottomBarView from '../edittemplate/couponConfig/bottomBar' //底部栏
import Descteplate from "../edittemplate/goodsdesc.js"
import React from "react";
import "../../../assets/comm.css";
import BottomBarView from "../edittemplate/couponConfig/bottomBar"; //底部栏
import SearchBarView from "../edittemplate/couponConfig/searchBar"; //商品详情搜索栏
import Descteplate from "../edittemplate/goodsdesc.js";
import "../edittemplate/goodstemplate";
import "./preview.less";
export default class preview extends React.Component {
constructor(props) {
super(props)
this.state = {
layout: "list",
type: 1,
top_url: "",
activeshow: false,
detailactiveshow: false,
top_image: 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png',
middle_image: 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png',
}
}
componentDidMount(e) {
// let center = document.getElementById("preview-center")
// let img = document.getElementById("preview-center-img")
// // center.style.height = img.scrollHeight + "px";
// let imgHeight=this.refs;
// img.onload = function (e) {
// center.style.height = imgHeight.middleCenter.clientHeight + "px";
// }
constructor(props) {
super(props);
this.state = {
layout: "list",
type: 1,
top_url: "",
activeshow: false,
detailactiveshow: false,
top_image:
"https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png",
middle_image:
"https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png",
};
}
showactiveIcon(c) {
this.setState({ activeshow: false });
}
opendescFn() {
this.setState({ activeshow: true });
}
showactivedetail(c) {
this.setState({ detailactiveshow: false });
}
opendetaildescFn() {
this.setState({ detailactiveshow: true });
}
componentDidUpdate() {
document.querySelector("#previewbg").scrollTop = 0;
}
render() {
let propsData = this.props.data;
let goodsConfig = propsData.product_list;
let naVisual = [];
if (goodsConfig&&goodsConfig.bottomBar) {
naVisual = goodsConfig.bottomBar.navlist.filter((item) => item.iswitch);
}
return (
<div className="preview-show">
<div
id="previewbg"
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.land.bg_color }}
>
<div className="top">
{propsData.land.top_image ? (
<img src={propsData.land.top_image} id="top" />
) : (
<img src={this.state.top_image} id="top" />
)}
</div>
<div
className="center"
id="preview-center"
ref="middleCenter"
style={{ fontSize: this.props.fontSize }}
>
{propsData.land.middle_image ? (
<img
id="preview-center-img"
src={propsData.land.middle_image}
/>
) : (
<img id="preview-center-img" src={this.state.middle_image} />
)}
{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">
{propsData.land.describe.bg_image ? (
<img src={propsData.land.describe.bg_image} />
) : null}
{propsData.land.describe.content ? (
<div
className="textTip_land"
dangerouslySetInnerHTML={{
__html: propsData.land.describe.content,
}}
></div>
) : null}
</div>
</div>
) : null}
{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}
}
exchangeBtn() {
{(goodsConfig.title &&
goodsConfig.title.iswitch &&
goodsConfig.title.text) ||
(goodsConfig.picture &&
goodsConfig.picture.iswitch &&
goodsConfig.picture.img) ? (
<div className="parting-line"></div>
) : null}
}
showactiveIcon(c) {
this.setState({ activeshow: false });
}
opendescFn() {
this.setState({ activeshow: true });
}
showactivedetail(c) {
this.setState({ detailactiveshow: false });
}
opendetaildescFn() {
this.setState({ detailactiveshow: true });
}
componentDidUpdate(){
document.querySelector('#previewbg').scrollTop = 0
}
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="previewbg" 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 }}>
<div className="top">
{
propsData.model.top_image ? <img src={propsData.model.top_image} id="top" /> : <img src={this.state.top_image} id="top" />
}
</div>
<div className="center" id="preview-center" ref="middleCenter" style={{ fontSize: this.props.fontSize }}>
{
propsData.model.middle_image ? <img id="preview-center-img" src={propsData.model.middle_image} /> : <img id="preview-center-img" src={this.state.middle_image} />
}
{
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">
{
propsData.model.describe.bg_image ? <img src={propsData.model.describe.bg_image} /> : null
}
{
propsData.model.describe.content ? <div className="textTip_land" dangerouslySetInnerHTML={{ __html: propsData.model.describe.content }}></div> : null
}
</div>
</div>
) : null
}
{
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
}
{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"
: "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 == 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}
{
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" : "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 == 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
}
{
this.props.step == 3 ? this.state.detailactiveshow && propsData.product_detail.describe.type == 2 && propsData.product_detail.describe.content ? <Descteplate backPrepage={c => this.showactivedetail(c)} goodsdata={propsData.product_detail} /> : (
<div className="detailstemplate" >
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
<img className="topBanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodsbigPic.png'} />
<p className="splitLine"></p>
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/viewIpt.png'} />
<p className="splitLine"></p>
{
propsData.product_detail.describe.bg_image && propsData.product_detail.describe.type == 1 ? <img className="detail_bottomImg" src={propsData.product_detail.describe.bg_image} /> : propsData.product_detail.describe.type == 3 ? <div className="bottomactiveTip" dangerouslySetInnerHTML={{ __html: propsData.product_detail.describe.content }}></div> : null
}
{
propsData.product_detail.describe.type == 2 ? <img className="susactive_tip" onClick={this.opendetaildescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'} /> : null
}
{
[1,3].includes(this.props.pageType)?<button className="exchangeBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即兑换</button>:
<div className="dflexaj payBtn-view">
<div className="coupon-price">
<p>￥0.00</p>
<p>共省￥0.01</p>
</div>
<button className="payBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即支付</button>
</div>
}
</div>
) : null
}
{
this.props.step==4?<div className="detailstemplate reduceComponent" >
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png"/>
{
[1,3].includes(this.props.pageType)?null:
<div className="dflexaj payBtn-view">
<div className="coupon-price">
<p>￥0.00</p>
<p>共省￥0.01</p>
</div>
<button className="payBtn" style={{background:propsData.product_detail.button_color, color: propsData.product_detail.font_color}}>立即支付</button>
</div>
}
</div>
:null
}
</div>
</div>
)
}
{this.props.step == 3 ? (
this.state.detailactiveshow &&
propsData.product_detail.describe.type == 2 &&
propsData.product_detail.describe.content ? (
<Descteplate
backPrepage={(c) => this.showactivedetail(c)}
goodsdata={propsData.product_detail}
/>
) : (
<div className="detailstemplate">
<img
src={
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png"
}
className="preBtn"
/>
<img
className="topBanner"
src={
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodsbigPic.png"
}
/>
<p className="splitLine"></p>
<img
className="iptbg"
src={
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/viewIpt.png"
}
/>
<p className="splitLine"></p>
{propsData.product_detail.describe.bg_image &&
propsData.product_detail.describe.type == 1 ? (
<img
className="detail_bottomImg"
src={propsData.product_detail.describe.bg_image}
/>
) : propsData.product_detail.describe.type == 3 ? (
<div
className="bottomactiveTip"
dangerouslySetInnerHTML={{
__html: propsData.product_detail.describe.content,
}}
></div>
) : null}
{propsData.product_detail.describe.type == 2 ? (
<img
className="susactive_tip"
onClick={this.opendetaildescFn.bind(this)}
src={
"https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png"
}
/>
) : null}
{[1, 3].includes(this.props.pageType) ? (
<button
className="exchangeBtn"
style={{
background: propsData.product_detail.button_color,
color: propsData.product_detail.font_color,
}}
>
立即兑换
</button>
) : (
<div className="dflexaj payBtn-view">
<div className="coupon-price">
<p>￥0.00</p>
<p>共省￥0.01</p>
</div>
<button
className="payBtn"
style={{
background: propsData.product_detail.button_color,
color: propsData.product_detail.font_color,
}}
>
立即支付
</button>
</div>
)}
</div>
)
) : null}
{this.props.step == 4 ? (
<div className="detailstemplate reduceComponent">
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_pic.png" />
{[1, 3].includes(this.props.pageType) ? null : (
<div className="dflexaj payBtn-view">
<div className="coupon-price">
<p>￥0.00</p>
<p>共省￥0.01</p>
</div>
<button
className="payBtn"
style={{
background: propsData.product_detail.button_color,
color: propsData.product_detail.font_color,
}}
>
立即支付
</button>
</div>
)}
</div>
) : null}
</div>
</div>
);
}
}