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-22 15:20:59 +08:00
parent 70723332c8
commit ea2efa7f18
8 changed files with 251 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/exchangepage/edittemplate/couponCard/landPage.js
View File

@ -206,7 +206,7 @@ export default class couponLandpage extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e) => { this.this.onUploadChange(e,'top_image') }} onChange={(e) => { this.onUploadChange(e,'top_image') }}
onUpload={this.onUpload} onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError} onError={this.onUploadError}

2
src/pages/exchangepage/edittemplate/exchange/detailstemplate.js
View File

@ -27,7 +27,7 @@ export default class edittemplate extends React.Component{
[1,3].includes(this.props.templateType)?<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>: [1,3].includes(this.props.templateType)?<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>:
<div className="dflexaj payBtn-view"> <div className="dflexaj payBtn-view">
<div className="coupon-price"> <div className="coupon-price">
<p>￥0.00</p> <p>￥<span>0.00</span></p>
<p>共省￥0.01</p> <p>共省￥0.01</p>
</div> </div>
<button className="payBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即支付</button> <button className="payBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即支付</button>

2
src/pages/exchangepage/edittemplate/exchange/landingPage.js
View File

@ -227,7 +227,7 @@ export default class edittemplate extends React.Component {
{ {
this.state.isSystemModel ? ( this.state.isSystemModel ? (
<FormItem labelname="权重" required={false} labelwidth="100px"> <FormItem labelname="权重" required={false} labelwidth="100px">
<NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} /> <NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} width={'300px'} className="sort_number"/>
</FormItem>) : null </FormItem>) : null
} }
{ {

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

@ -125,8 +125,16 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
text-align: right; text-align: left;
padding-right: 15px; padding-left: 15px;
:first-of-type{
color: #FF5533;
span{
font-size: 24px;
font-weight: bold;
}
}
} }
.payBtn{ .payBtn{
width: 100px; width: 100px;
@ -273,7 +281,10 @@
font-size: 16px; font-size: 16px;
} }
} }
.sort_number{
border: 0!important;
border-bottom: 1px solid #e0e0e0!important;
}
//商品详情页区分立减金/权益 //商品详情页区分立减金/权益
.details_type { .details_type {
position: relative; position: relative;
@ -292,7 +303,7 @@
/*商品详情页-立减金*/ /*商品详情页-立减金*/
.details-reduce { .details-reduce {
background: #fff; background: #F3F5F7;
position: relative; position: relative;
.reduce-pic { .reduce-pic {

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

@ -50,7 +50,7 @@ let product_detail = {
font_color: '#ffffff', font_color: '#ffffff',
button_color: '#FACD6A', button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' }, describe: { type: '', content: '', bg_image: '' },
reduce:{ reduce: {
font_color: "#AB582F", font_color: "#AB582F",
button_color: "#FACD6A", button_color: "#FACD6A",
} }
@ -64,23 +64,23 @@ let couponProduct_list = {
button_color: '#FACD6A', button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' }, describe: { type: '', content: '', bg_image: '' },
picture: { picture: {
iswitch:false, iswitch: false,
img: '', img: '',
jumpType: '0',//0不跳转 1跳转 jumpType: '0',//0不跳转 1跳转
jumpUrl: '' jumpUrl: ''
}, },
backgroundImg: { backgroundImg: {
iswitch:false, iswitch: false,
bgImg: '', bgImg: '',
bgColor:'#f2f3f4' bgColor: '#f2f3f4'
}, },
search: { search: {
iswitch: false, iswitch: false,
shape: 'circular', shape: 'circular',
textAlign: 'center', textAlign: 'center',
borderColor: '#FFFAF5', borderColor: '#FFFAF5',
bgColor:'#FFD8BB', bgColor: '#FFD8BB',
fontColor:'#ADADAD', fontColor: '#ADADAD',
placeholder: '请输入商品名称' placeholder: '请输入商品名称'
}, },
title: { title: {
@ -89,46 +89,46 @@ let couponProduct_list = {
textAlign: 'left', textAlign: 'left',
fontColor: '#333', fontColor: '#333',
fontSize: 1, fontSize: 1,
comstyle:1, comstyle: 1,
pic:'' pic: ''
}, },
bottomBar: { bottomBar: {
iswitch:false, iswitch: false,
navlist:[ navlist: [
{ {
id:1, id: 1,
iswitch:true, iswitch: true,
name:'index', name: 'index',
pic:{ pic: {
show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png', show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home.png',
selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png' selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/home_check.png'
}, },
text:'首页' text: '首页'
}, },
{ {
id:2, id: 2,
iswitch:true, iswitch: true,
name:'order', name: 'order',
pic:{ pic: {
show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png', show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order.png',
selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png' selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/order_check.png'
}, },
text:'订单' text: '订单'
}, },
{ {
id:3, id: 3,
iswitch:true, iswitch: true,
name:'coupon', name: 'coupon',
pic:{ pic: {
show:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png', show: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon.png',
selectShow:'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png' selectShow: 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/coupon_check.png'
}, },
text:'我的券' text: '我的券'
} }
], ],
defaultText:'#A6A5B2', defaultText: '#A6A5B2',
selectText:'#FD6932', selectText: '#FD6932',
background:'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png' background: 'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png'
} }
} }
export default class edittemplate extends React.Component { export default class edittemplate extends React.Component {
@ -136,6 +136,7 @@ export default class edittemplate extends React.Component {
super(props) super(props)
this.state = { this.state = {
mouldType: 1,//区分是系统模板还是落地页 0-系统模板 1-落地页新增 2-落地页编辑 mouldType: 1,//区分是系统模板还是落地页 0-系统模板 1-落地页新增 2-落地页编辑
systemTitle: '',//控制系统模版标题回显
activeshow: true, //控制商品列表页活动说明显示与否 activeshow: true, //控制商品列表页活动说明显示与否
loading_visible: false,//保存加载效果 loading_visible: false,//保存加载效果
componentOfconfig: '',//选择组件库 componentOfconfig: '',//选择组件库
@ -168,14 +169,14 @@ export default class edittemplate extends React.Component {
//开启 //开启
Bus.addListener('componentLib', (prop) => { Bus.addListener('componentLib', (prop) => {
let coupongoodsConfig = this.state.product_list let coupongoodsConfig = this.state.product_list
coupongoodsConfig[prop.name].iswitch= true coupongoodsConfig[prop.name].iswitch = true
this.setState({ product_list: coupongoodsConfig }) this.setState({ product_list: coupongoodsConfig })
}) })
//关闭 //关闭
Bus.addListener('componentLibClose', (prop) => { Bus.addListener('componentLibClose', (prop) => {
let coupongoodsConfig = this.state.product_list let coupongoodsConfig = this.state.product_list
coupongoodsConfig[prop].iswitch= false coupongoodsConfig[prop].iswitch = false
this.setState({ product_list: coupongoodsConfig,componentOfconfig: '' }) this.setState({ product_list: coupongoodsConfig, componentOfconfig: '' })
}) })
Bus.addListener('picture', (prop) => { Bus.addListener('picture', (prop) => {
let coupongoodsConfig = this.state.product_list let coupongoodsConfig = this.state.product_list
@ -350,13 +351,13 @@ export default class edittemplate extends React.Component {
product_list: newEditor.whiteList.product_list, product_list: newEditor.whiteList.product_list,
product_detail: newEditor.whiteList.product_detail product_detail: newEditor.whiteList.product_detail
}) })
} else if (template ==3){ } else if (template == 3) {
this.setState({ this.setState({
model: newEditor.exchangeList.land, model: newEditor.exchangeList.land,
product_list: newEditor.exchangeList.product_list, product_list: newEditor.exchangeList.product_list,
product_detail: newEditor.exchangeList.product_detail product_detail: newEditor.exchangeList.product_detail
}) })
}else{ } else {
this.setState({ this.setState({
model: newEditor.coupon.land, model: newEditor.coupon.land,
product_list: newEditor.coupon.product_list, product_list: newEditor.coupon.product_list,
@ -368,7 +369,7 @@ export default class edittemplate extends React.Component {
this.setState({ pagedisable: true }) this.setState({ pagedisable: true })
} }
} else {//新增数据 } else {//新增数据
console.log(369,sessionStorage.getItem('editorConfig')); console.log(369, sessionStorage.getItem('editorConfig'));
let obj = {}, whiteList = {}, exchangeList = {}, coupon = {} let obj = {}, whiteList = {}, exchangeList = {}, coupon = {}
let sourceObj = {//模板数据结构 let sourceObj = {//模板数据结构
land: model, land: model,
@ -452,7 +453,7 @@ export default class edittemplate extends React.Component {
_.omit(infoWhite.land, ['title', 'sort']); _.omit(infoWhite.land, ['title', 'sort']);
formdata.exchange = infoExchange formdata.exchange = infoExchange
formdata.access_conf = infoWhite formdata.access_conf = infoWhite
formdata.coupon=infoCoupon formdata.coupon = infoCoupon
if (myInfoData) { if (myInfoData) {
//编辑 //编辑
putSystemTemplate(myInfoData.id, formdata).then((res) => { putSystemTemplate(myInfoData.id, formdata).then((res) => {
@ -495,7 +496,7 @@ export default class edittemplate extends React.Component {
infoExchange.product_detail = exchangeState.product_detail infoExchange.product_detail = exchangeState.product_detail
delete infoExchange.land.sort delete infoExchange.land.sort
delete infoExchange.land.title delete infoExchange.land.title
switch(this.state.showType){ switch (this.state.showType) {
case 3://兑换码 case 3://兑换码
formdata.exchange = infoExchange; formdata.exchange = infoExchange;
break; break;
@ -564,8 +565,8 @@ export default class edittemplate extends React.Component {
formdata.exchange = infoExchange formdata.exchange = infoExchange
} else if (this.state.showType == 1) { } else if (this.state.showType == 1) {
formdata.access_conf = infoExchange formdata.access_conf = infoExchange
}else{ } else {
formdata.coupon=infoExchange; formdata.coupon = infoExchange;
} }
putTheme(myInfoData.id, formdata).then((res) => { putTheme(myInfoData.id, formdata).then((res) => {
handelResponse( handelResponse(
@ -588,27 +589,27 @@ export default class edittemplate extends React.Component {
getlandConfig(c) { getlandConfig(c) {
console.log(578); console.log(578);
let landConfig = this.state.model let landConfig = this.state.model
landConfig[c.attr]=c.value; landConfig[c.attr] = c.value;
this.setState({ model: landConfig }) this.setState({ model: landConfig })
} }
//商品列表页基础配置 //商品列表页基础配置
getGoodConfig(c){ getGoodConfig(c) {
let goodsConfig = this.state.product_list let goodsConfig = this.state.product_list
goodsConfig[c.attr] = c.value; goodsConfig[c.attr] = c.value;
this.setState({ product_list: goodsConfig }) this.setState({ product_list: goodsConfig })
} }
//商品列表页说明配置 //商品列表页说明配置
getexplainConfig(c){ getexplainConfig(c) {
let goodsConfig = this.state.product_list let goodsConfig = this.state.product_list
goodsConfig.describe[c.attr] = c.value goodsConfig.describe[c.attr] = c.value
this.setState({ product_list: goodsConfig }) this.setState({ product_list: goodsConfig })
} }
//商品详情页基础配置 //商品详情页基础配置
getGoodDetailConfig(c){ getGoodDetailConfig(c) {
let detailpage = this.state.product_detail let detailpage = this.state.product_detail
detailpage[c.attr] = c.value; detailpage[c.attr] = c.value;
this.setState({ product_detail: detailpage }) this.setState({ product_detail: detailpage })
} }
//商品详情页配置更新 //商品详情页配置更新
getdetailActiveFn(c) { getdetailActiveFn(c) {
let detailpage = this.state.product_detail let detailpage = this.state.product_detail
@ -617,30 +618,39 @@ export default class edittemplate extends React.Component {
} }
onmodelChange(e) { onmodelChange(e) {
let editorData = _.cloneDeep(JSON.parse(sessionStorage.getItem('editorConfig'))) let editorData = _.cloneDeep(JSON.parse(sessionStorage.getItem('editorConfig')))
if (this.state.mouldType == 0 && e.target.value != 3) {
this.setState({ systemTitle: editorData.exchangeList.land.title });
}
let holdData; let holdData;
switch(e.target.value){ switch (e.target.value) {
case 1: case 1:
holdData= editorData.whiteList; holdData = editorData.whiteList;
break; break;
case 3: case 3:
holdData= editorData.exchangeList holdData = editorData.exchangeList
break; break;
default: default:
let {activeNavStatus,showType,model}=this.state; let { activeNavStatus, showType, model,product_list,product_detail } = this.state;
if(activeNavStatus==1&&[4,8].includes(showType)){//落地页 if (activeNavStatus == 1 && [4, 8].includes(showType)) {//落地页
editorData.coupon.land=model; editorData.coupon.land = model;
} }
sessionStorage.setItem('editorConfig',JSON.stringify(editorData)); if (activeNavStatus == 2 && [4, 8].includes(showType)) {//列表页
holdData= editorData.coupon editorData.coupon.product_list = product_list;
}
if (activeNavStatus == 3 && [4, 8].includes(showType)) {//详情页
editorData.coupon.product_detail = product_detail;
}
sessionStorage.setItem('editorConfig', JSON.stringify(editorData));
holdData = editorData.coupon
break; break;
} }
let { land, product_list, product_detail } = holdData; let { land, product_list, product_detail } = holdData;
this.setState({ showType: e.target.value, activeNavStatus: 1,model: land, product_list, product_detail }) this.setState({ showType: e.target.value, activeNavStatus: 1, model: land, product_list, product_detail })
} }
onPreview() { onPreview() {
let previewInfo=_.cloneDeep(this.state); let previewInfo = _.cloneDeep(this.state);
previewInfo.land=this.state.model; previewInfo.land = this.state.model;
this.setState({ previewData:previewInfo}) this.setState({ previewData: previewInfo })
this.setState({ this.setState({
preview_visible: true, preview_visible: true,
}) })
@ -738,9 +748,7 @@ export default class edittemplate extends React.Component {
addFn() { addFn() {
let item = this.state.activeNavStatus let item = this.state.activeNavStatus
item++ item++
if (item > 3) { if (item > 3) item = 3
item = 3
}
this.setState({ activeNavStatus: item }) this.setState({ activeNavStatus: item })
} }
@ -765,7 +773,7 @@ export default class edittemplate extends React.Component {
this.setState({ componentOfconfig: c }); this.setState({ componentOfconfig: c });
} }
render() { render() {
console.log(761,this.state); console.log(761, this.state);
return ( return (
<div className='edittemplate'> <div className='edittemplate'>
<div className='topHeader'> <div className='topHeader'>
@ -823,21 +831,16 @@ export default class edittemplate extends React.Component {
? 'activeNav thumbheader' ? 'activeNav thumbheader'
: 'thumbheader' : 'thumbheader'
}> }>
<h3>{this.state.model.title}</h3> {this.state.mouldType == 0 && this.state.showType != 3}
{!this.state.model.top_image ? ( <h3>{this.state.mouldType == 0 && this.state.showType != 3 ? this.state.systemTitle : this.state.model.title} </h3>
<img <img
key={this.state.model.top_image}
src={!this.state.model.top_image ? 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png' : this.state.model.top_image}
id='top' id='top'
src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png'
}
/> />
) : (
<img src={this.state.model.top_image} id='top' />
)}
<div className='hascode'> <div className='hascode'>
<img src={this.state.showType==8?this.state.model.white_image?this.state.model.white_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png':this.state.model.middle_image?this.state.model.middle_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'} id='top' /> <img src={this.state.showType == 8 ? this.state.model.white_image ? this.state.model.white_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png' : this.state.model.middle_image ? this.state.model.middle_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'} id='top' />
{[1,8].includes(this.state.showType)? ( {[1, 8].includes(this.state.showType) ? (
<img <img
src={ src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png' 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png'
@ -898,73 +901,36 @@ export default class edittemplate extends React.Component {
</div> </div>
{/* 组件库 */} {/* 组件库 */}
{ {
[4,8].includes(this.state.showType) && this.state.activeNavStatus == 2 ? <CouponComLib componentName={(c) => this.componentName(c)} /> : null [4, 8].includes(this.state.showType) && this.state.activeNavStatus == 2 ? <CouponComLib componentName={(c) => this.componentName(c)} /> : null
} }
</div> </div>
<div className='xj-wrapper' style={{ 'zIndex': '1' }}> <div className='xj-wrapper' style={{ 'zIndex': '1' }}>
<div className={[4,8].includes(this.state.showType)&& this.state.activeNavStatus == 2 ? 'xj-center-small' : 'xj-center'}> <div className={[4, 8].includes(this.state.showType) && this.state.activeNavStatus == 2 ? 'xj-center-small' : 'xj-center'}>
{this.state.activeNavStatus == 1 ? (
<div> <div>
<img <img
className='perimg' className='perimg'
onClick={this.reduceFn.bind(this)} onClick={this.reduceFn.bind(this)}
src={ src={[2, 3].includes(this.state.activeNavStatus) ?
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/pre.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png' : 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/pre.png'
} }
/> />
<img <img
className='nextimg' className='nextimg'
onClick={this.addFn.bind(this)} onClick={this.addFn.bind(this)}
src={ src={[1, 2].includes(this.state.activeNavStatus) ?
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png' : 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'
} }
/> />
</div> </div>
) : this.state.activeNavStatus == 2 ? ( <div className='editor-main'
<div>
<img
className='perimg'
onClick={this.reduceFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'
}
/>
<img
className='nextimg'
onClick={this.addFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png'
}
/>
</div>
) : (
<div>
<img
className='perimg'
onClick={this.reduceFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'
}
/>
<img
className='nextimg'
onClick={this.addFn.bind(this)}
src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'
}
/>
</div>
)}
<div
className='editor-main'
ref={this.canvasImgDom} ref={this.canvasImgDom}
style={{ style={{
display: this.state.activeNavStatus == 1 ? 'block' : 'none' display: this.state.activeNavStatus == 1 ? 'block' : 'none'
}}> }}>
<div className='xj-viewer-title'> <div className='xj-viewer-title'>
<span className='xj-viewer-title-line'> <span className='xj-viewer-title-line'>
{this.state.model.title} {this.state.mouldType == 0 && this.state.showType != 3 ? this.state.systemTitle : this.state.model.title}
</span> </span>
</div> </div>
<div <div
@ -977,28 +943,20 @@ export default class edittemplate extends React.Component {
style={{ background: this.state.model.bg_color }} style={{ background: this.state.model.bg_color }}
ref={this.canvasImgDomScr}> ref={this.canvasImgDomScr}>
<div className='top'> <div className='top'>
{!this.state.model.top_image ? (
<img
src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png'
}
id='top'
/>
) : (
<img <img
key={this.state.model.top_image}
crossOrigin='anonymous' crossOrigin='anonymous'
src={this.state.model.top_image} src={!this.state.model.top_image ? 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/59ba305520d3229e7fc53d5229bfec0c.png' : this.state.model.top_image}
id='top' id='top'
/> />
)}
</div> </div>
<div className='center' id='center'> <div className='center' id='center'>
<img <img
crossOrigin='anonymous' crossOrigin='anonymous'
id='center-img' id='center-img'
src={this.state.showType==8?this.state.model.white_image?this.state.model.white_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png':this.state.model.middle_image?this.state.model.middle_image:'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'} src={this.state.showType == 8 ? this.state.model.white_image ? this.state.model.white_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png' : this.state.model.middle_image ? this.state.model.middle_image : 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/5dd765e3b46042f7ecd8c576e6fa9568.png'}
/> />
{[1,8].includes(this.state.showType) ? ( {[1, 8].includes(this.state.showType) ? (
<img <img
src={ src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png' 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png'
@ -1093,20 +1051,16 @@ export default class edittemplate extends React.Component {
opendesc={(c) => this.setState({ detailactiveshow: true })} opendesc={(c) => this.setState({ detailactiveshow: true })}
detaildata={this.state.product_detail} detaildata={this.state.product_detail}
templateType={this.state.showType} templateType={this.state.showType}
/> : <Reduce templateType={this.state.showType} detaildata={this.state.product_detail}/> /> : <Reduce templateType={this.state.showType} detaildata={this.state.product_detail} />
} }
</div> </div>
)} )}
</div> </div>
<div <div className='xj-center-fixed' style={{ 'marginLeft': '288px' }}></div>
className='xj-center-fixed'
style={{ 'marginLeft': '288px' }}></div>
<div className='xj-rightPanel'> <div className='xj-rightPanel'>
<div className='RootEditor'> <div className='RootEditor'>
<div <div>
className='schema-editor-container' {[1, 3].includes(this.state.showType) ? (
data-editor-role='XJWebsitePage'>
{[1,3].includes(this.state.showType)? (
<div className='control page-title-control'> <div className='control page-title-control'>
{this.state.activeNavStatus == 1 ? ( {this.state.activeNavStatus == 1 ? (
<h1 style={{ fontSize: '16px' }}>落地页设置</h1> <h1 style={{ fontSize: '16px' }}>落地页设置</h1>
@ -1169,10 +1123,10 @@ export default class edittemplate extends React.Component {
<DetailsPage <DetailsPage
setdetailActive={(c) => this.getdetailActiveFn(c)} setdetailActive={(c) => this.getdetailActiveFn(c)}
setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)} setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)}
/>:<CouponGoodsDetailForm /> : <CouponGoodsDetailForm
setdetailActive={(c) => this.getdetailActiveFn(c)} setdetailActive={(c) => this.getdetailActiveFn(c)}
setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)}/> setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)} />
) :this.state.activeNavStatus == 1?<ReduceConfig />:<CouponReduceDetailForm setReduceFontcolor={(c)=>this.getReduceFontcolor(c)} setReduceButtoncolor={(c)=>this.getReduceButtoncolor(c)}/> ) : this.state.activeNavStatus == 1 ? <ReduceConfig /> : <CouponReduceDetailForm setReduceFontcolor={(c) => this.getReduceFontcolor(c)} setReduceButtoncolor={(c) => this.getReduceButtoncolor(c)} />
} }
{this.state.preview_visible ? ( {this.state.preview_visible ? (
<PreviewEffect previewData={this.state.previewData} showType={this.state.showType} onCloseFn={this.onClose.bind(this)} /> <PreviewEffect previewData={this.state.previewData} showType={this.state.showType} onCloseFn={this.onClose.bind(this)} />
@ -1180,12 +1134,7 @@ export default class edittemplate extends React.Component {
{this.state.loading_visible ? ( {this.state.loading_visible ? (
<div className='loadingShow'> <div className='loadingShow'>
<div className='modal model44'></div> <div className='modal model44'></div>
<BlockLoading <BlockLoading loading icon='circle' iconSize={64} iconText='保存中' className='save_loading'/>
loading
icon='circle'
iconSize={64}
iconText='保存中'
/>
</div> </div>
) : null} ) : null}
</div> </div>

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

@ -465,7 +465,12 @@
.edittemplate { .edittemplate {
height: 100vh; height: 100vh;
background: #f3f4f5; background: #f3f4f5;
.save_loading{
position: fixed;
top: 30%;
left: 50%;
z-index: 999999;
}
.zent-image-upload-item-thumb[data-zv="9.11.0"] { .zent-image-upload-item-thumb[data-zv="9.11.0"] {
border: 1px dashed #f1f2f3; border: 1px dashed #f1f2f3;
} }
@ -491,7 +496,7 @@
#leftComponent { #leftComponent {
position: fixed; position: fixed;
width: 300px; width: 330px;
height: 100%; height: 100%;
background: #fff; background: #fff;

3
src/pages/exchangepage/edittemplate/reduce.js
View File

@ -13,6 +13,7 @@ export default class edittemplate extends React.Component {
this.props.opendesc(true) this.props.opendesc(true)
} }
render() { render() {
console.log(16,this.props.detaildata);
return ( return (
<div className="editor-main goodstemplate details-reduce"> <div className="editor-main goodstemplate details-reduce">
<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" />
@ -22,7 +23,7 @@ export default class edittemplate extends React.Component {
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_coupon.png" alt="" className="reduce-pic" /> <img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/reduce_coupon.png" alt="" className="reduce-pic" />
<div className="dflexaj payBtn-view"> <div className="dflexaj payBtn-view">
<div className="coupon-price"> <div className="coupon-price">
<p>￥0.00</p> <p>￥<span>0.00</span></p>
<p>共省￥0.01</p> <p>共省￥0.01</p>
</div> </div>
<button className="payBtn" style={{ background: this.props.detaildata.reduce.button_color, color: this.props.detaildata.reduce.font_color }}>立即支付</button> <button className="payBtn" style={{ background: this.props.detaildata.reduce.button_color, color: this.props.detaildata.reduce.font_color }}>立即支付</button>

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

@ -326,7 +326,7 @@ export default class preview extends React.Component {
) : ( ) : (
<div className="dflexaj payBtn-view"> <div className="dflexaj payBtn-view">
<div className="coupon-price"> <div className="coupon-price">
<p>￥0.00</p> <p>￥<span>0.00</span></p>
<p>共省￥0.01</p> <p>共省￥0.01</p>
</div> </div>
<button <button
@ -349,7 +349,7 @@ export default class preview extends React.Component {
{[1, 3].includes(this.props.pageType) ? null : ( {[1, 3].includes(this.props.pageType) ? null : (
<div className="dflexaj payBtn-view"> <div className="dflexaj payBtn-view">
<div className="coupon-price"> <div className="coupon-price">
<p>￥0.00</p> <p>￥<span>0.00</span></p>
<p>共省￥0.01</p> <p>共省￥0.01</p>
</div> </div>
<button <button