系统模版流程自测,细节优化
This commit is contained in:
parent
70723332c8
commit
ea2efa7f18
|
@ -206,7 +206,7 @@ export default class couponLandpage extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.this.onUploadChange(e,'top_image') }}
|
||||
onChange={(e) => { this.onUploadChange(e,'top_image') }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
|
|
|
@ -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>:
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="coupon-price">
|
||||
<p>¥0.00</p>
|
||||
<p>¥<span>0.00</span></p>
|
||||
<p>共省¥0.01</p>
|
||||
</div>
|
||||
<button className="payBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即支付</button>
|
||||
|
|
|
@ -227,7 +227,7 @@ export default class edittemplate extends React.Component {
|
|||
{
|
||||
this.state.isSystemModel ? (
|
||||
<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
|
||||
}
|
||||
{
|
||||
|
|
|
@ -125,8 +125,16 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
:first-of-type{
|
||||
color: #FF5533;
|
||||
span{
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
.payBtn{
|
||||
width: 100px;
|
||||
|
@ -273,7 +281,10 @@
|
|||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sort_number{
|
||||
border: 0!important;
|
||||
border-bottom: 1px solid #e0e0e0!important;
|
||||
}
|
||||
//商品详情页区分立减金/权益
|
||||
.details_type {
|
||||
position: relative;
|
||||
|
@ -292,7 +303,7 @@
|
|||
|
||||
/*商品详情页-立减金*/
|
||||
.details-reduce {
|
||||
background: #fff;
|
||||
background: #F3F5F7;
|
||||
position: relative;
|
||||
|
||||
.reduce-pic {
|
||||
|
|
|
@ -50,7 +50,7 @@ let product_detail = {
|
|||
font_color: '#ffffff',
|
||||
button_color: '#FACD6A',
|
||||
describe: { type: '', content: '', bg_image: '' },
|
||||
reduce:{
|
||||
reduce: {
|
||||
font_color: "#AB582F",
|
||||
button_color: "#FACD6A",
|
||||
}
|
||||
|
@ -64,23 +64,23 @@ let couponProduct_list = {
|
|||
button_color: '#FACD6A',
|
||||
describe: { type: '', content: '', bg_image: '' },
|
||||
picture: {
|
||||
iswitch:false,
|
||||
iswitch: false,
|
||||
img: '',
|
||||
jumpType: '0',//0不跳转 1跳转
|
||||
jumpUrl: ''
|
||||
},
|
||||
backgroundImg: {
|
||||
iswitch:false,
|
||||
iswitch: false,
|
||||
bgImg: '',
|
||||
bgColor:'#f2f3f4'
|
||||
bgColor: '#f2f3f4'
|
||||
},
|
||||
search: {
|
||||
iswitch: false,
|
||||
shape: 'circular',
|
||||
textAlign: 'center',
|
||||
borderColor: '#FFFAF5',
|
||||
bgColor:'#FFD8BB',
|
||||
fontColor:'#ADADAD',
|
||||
bgColor: '#FFD8BB',
|
||||
fontColor: '#ADADAD',
|
||||
placeholder: '请输入商品名称'
|
||||
},
|
||||
title: {
|
||||
|
@ -89,46 +89,46 @@ let couponProduct_list = {
|
|||
textAlign: 'left',
|
||||
fontColor: '#333',
|
||||
fontSize: 1,
|
||||
comstyle:1,
|
||||
pic:''
|
||||
comstyle: 1,
|
||||
pic: ''
|
||||
},
|
||||
bottomBar: {
|
||||
iswitch:false,
|
||||
navlist:[
|
||||
iswitch: false,
|
||||
navlist: [
|
||||
{
|
||||
id:1,
|
||||
iswitch:true,
|
||||
name:'index',
|
||||
pic:{
|
||||
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'
|
||||
id: 1,
|
||||
iswitch: true,
|
||||
name: 'index',
|
||||
pic: {
|
||||
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'
|
||||
},
|
||||
text:'首页'
|
||||
text: '首页'
|
||||
},
|
||||
{
|
||||
id:2,
|
||||
iswitch:true,
|
||||
name:'order',
|
||||
pic:{
|
||||
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'
|
||||
},
|
||||
text:'订单'
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
iswitch:true,
|
||||
name:'coupon',
|
||||
pic:{
|
||||
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'
|
||||
},
|
||||
text:'我的券'
|
||||
}
|
||||
id: 2,
|
||||
iswitch: true,
|
||||
name: 'order',
|
||||
pic: {
|
||||
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'
|
||||
},
|
||||
text: '订单'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
iswitch: true,
|
||||
name: 'coupon',
|
||||
pic: {
|
||||
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'
|
||||
},
|
||||
text: '我的券'
|
||||
}
|
||||
],
|
||||
defaultText:'#A6A5B2',
|
||||
selectText:'#FD6932',
|
||||
background:'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png'
|
||||
defaultText: '#A6A5B2',
|
||||
selectText: '#FD6932',
|
||||
background: 'http://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/coupon/bottombar/bottom_bg.png'
|
||||
}
|
||||
}
|
||||
export default class edittemplate extends React.Component {
|
||||
|
@ -136,6 +136,7 @@ export default class edittemplate extends React.Component {
|
|||
super(props)
|
||||
this.state = {
|
||||
mouldType: 1,//区分是系统模板还是落地页 0-系统模板 1-落地页新增 2-落地页编辑
|
||||
systemTitle: '',//控制系统模版标题回显
|
||||
activeshow: true, //控制商品列表页活动说明显示与否
|
||||
loading_visible: false,//保存加载效果
|
||||
componentOfconfig: '',//选择组件库
|
||||
|
@ -168,14 +169,14 @@ export default class edittemplate extends React.Component {
|
|||
//开启
|
||||
Bus.addListener('componentLib', (prop) => {
|
||||
let coupongoodsConfig = this.state.product_list
|
||||
coupongoodsConfig[prop.name].iswitch= true
|
||||
coupongoodsConfig[prop.name].iswitch = true
|
||||
this.setState({ product_list: coupongoodsConfig })
|
||||
})
|
||||
//关闭
|
||||
Bus.addListener('componentLibClose', (prop) => {
|
||||
let coupongoodsConfig = this.state.product_list
|
||||
coupongoodsConfig[prop].iswitch= false
|
||||
this.setState({ product_list: coupongoodsConfig,componentOfconfig: '' })
|
||||
coupongoodsConfig[prop].iswitch = false
|
||||
this.setState({ product_list: coupongoodsConfig, componentOfconfig: '' })
|
||||
})
|
||||
Bus.addListener('picture', (prop) => {
|
||||
let coupongoodsConfig = this.state.product_list
|
||||
|
@ -193,7 +194,7 @@ export default class edittemplate extends React.Component {
|
|||
bgImgConfig.backgroundImg.bgColor = prop
|
||||
this.setState({ product_list: bgImgConfig })
|
||||
})
|
||||
|
||||
|
||||
Bus.addListener('shape', (prop) => {
|
||||
let searchConfig = this.state.product_list
|
||||
searchConfig.search.shape = prop
|
||||
|
@ -235,7 +236,7 @@ export default class edittemplate extends React.Component {
|
|||
titleConfig.title.pic = prop
|
||||
this.setState({ product_list: titleConfig })
|
||||
})
|
||||
|
||||
|
||||
Bus.addListener('title', (prop) => {
|
||||
let titleConfig = this.state.product_list
|
||||
titleConfig.title.text = prop
|
||||
|
@ -341,22 +342,22 @@ export default class edittemplate extends React.Component {
|
|||
coupon['land'].title = newEditor.title
|
||||
coupon['land'].sort = newEditor.sort
|
||||
|
||||
newEditor.exchangeList = exchangeList
|
||||
newEditor.whiteList = whiteList
|
||||
newEditor.coupon = coupon;
|
||||
newEditor.exchangeList = exchangeList
|
||||
newEditor.whiteList = whiteList
|
||||
newEditor.coupon = coupon;
|
||||
if (template == 1) { //1-白名单 3-兑换码
|
||||
this.setState({
|
||||
model: newEditor.whiteList.land,
|
||||
product_list: newEditor.whiteList.product_list,
|
||||
product_detail: newEditor.whiteList.product_detail
|
||||
})
|
||||
} else if (template ==3){
|
||||
} else if (template == 3) {
|
||||
this.setState({
|
||||
model: newEditor.exchangeList.land,
|
||||
product_list: newEditor.exchangeList.product_list,
|
||||
product_detail: newEditor.exchangeList.product_detail
|
||||
})
|
||||
}else{
|
||||
} else {
|
||||
this.setState({
|
||||
model: newEditor.coupon.land,
|
||||
product_list: newEditor.coupon.product_list,
|
||||
|
@ -368,7 +369,7 @@ export default class edittemplate extends React.Component {
|
|||
this.setState({ pagedisable: true })
|
||||
}
|
||||
} else {//新增数据
|
||||
console.log(369,sessionStorage.getItem('editorConfig'));
|
||||
console.log(369, sessionStorage.getItem('editorConfig'));
|
||||
let obj = {}, whiteList = {}, exchangeList = {}, coupon = {}
|
||||
let sourceObj = {//模板数据结构
|
||||
land: model,
|
||||
|
@ -452,7 +453,7 @@ export default class edittemplate extends React.Component {
|
|||
_.omit(infoWhite.land, ['title', 'sort']);
|
||||
formdata.exchange = infoExchange
|
||||
formdata.access_conf = infoWhite
|
||||
formdata.coupon=infoCoupon
|
||||
formdata.coupon = infoCoupon
|
||||
if (myInfoData) {
|
||||
//编辑
|
||||
putSystemTemplate(myInfoData.id, formdata).then((res) => {
|
||||
|
@ -495,7 +496,7 @@ export default class edittemplate extends React.Component {
|
|||
infoExchange.product_detail = exchangeState.product_detail
|
||||
delete infoExchange.land.sort
|
||||
delete infoExchange.land.title
|
||||
switch(this.state.showType){
|
||||
switch (this.state.showType) {
|
||||
case 3://兑换码
|
||||
formdata.exchange = infoExchange;
|
||||
break;
|
||||
|
@ -564,8 +565,8 @@ export default class edittemplate extends React.Component {
|
|||
formdata.exchange = infoExchange
|
||||
} else if (this.state.showType == 1) {
|
||||
formdata.access_conf = infoExchange
|
||||
}else{
|
||||
formdata.coupon=infoExchange;
|
||||
} else {
|
||||
formdata.coupon = infoExchange;
|
||||
}
|
||||
putTheme(myInfoData.id, formdata).then((res) => {
|
||||
handelResponse(
|
||||
|
@ -588,27 +589,27 @@ export default class edittemplate extends React.Component {
|
|||
getlandConfig(c) {
|
||||
console.log(578);
|
||||
let landConfig = this.state.model
|
||||
landConfig[c.attr]=c.value;
|
||||
landConfig[c.attr] = c.value;
|
||||
this.setState({ model: landConfig })
|
||||
}
|
||||
//商品列表页基础配置
|
||||
getGoodConfig(c){
|
||||
getGoodConfig(c) {
|
||||
let goodsConfig = this.state.product_list
|
||||
goodsConfig[c.attr] = c.value;
|
||||
this.setState({ product_list: goodsConfig })
|
||||
}
|
||||
//商品列表页说明配置
|
||||
getexplainConfig(c){
|
||||
getexplainConfig(c) {
|
||||
let goodsConfig = this.state.product_list
|
||||
goodsConfig.describe[c.attr] = c.value
|
||||
this.setState({ product_list: goodsConfig })
|
||||
}
|
||||
//商品详情页基础配置
|
||||
getGoodDetailConfig(c){
|
||||
let detailpage = this.state.product_detail
|
||||
detailpage[c.attr] = c.value;
|
||||
this.setState({ product_detail: detailpage })
|
||||
}
|
||||
//商品详情页基础配置
|
||||
getGoodDetailConfig(c) {
|
||||
let detailpage = this.state.product_detail
|
||||
detailpage[c.attr] = c.value;
|
||||
this.setState({ product_detail: detailpage })
|
||||
}
|
||||
//商品详情页配置更新
|
||||
getdetailActiveFn(c) {
|
||||
let detailpage = this.state.product_detail
|
||||
|
@ -617,30 +618,39 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
onmodelChange(e) {
|
||||
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;
|
||||
switch(e.target.value){
|
||||
switch (e.target.value) {
|
||||
case 1:
|
||||
holdData= editorData.whiteList;
|
||||
holdData = editorData.whiteList;
|
||||
break;
|
||||
case 3:
|
||||
holdData= editorData.exchangeList
|
||||
holdData = editorData.exchangeList
|
||||
break;
|
||||
default:
|
||||
let {activeNavStatus,showType,model}=this.state;
|
||||
if(activeNavStatus==1&&[4,8].includes(showType)){//落地页
|
||||
editorData.coupon.land=model;
|
||||
let { activeNavStatus, showType, model,product_list,product_detail } = this.state;
|
||||
if (activeNavStatus == 1 && [4, 8].includes(showType)) {//落地页
|
||||
editorData.coupon.land = model;
|
||||
}
|
||||
sessionStorage.setItem('editorConfig',JSON.stringify(editorData));
|
||||
holdData= editorData.coupon
|
||||
if (activeNavStatus == 2 && [4, 8].includes(showType)) {//列表页
|
||||
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;
|
||||
}
|
||||
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() {
|
||||
let previewInfo=_.cloneDeep(this.state);
|
||||
previewInfo.land=this.state.model;
|
||||
this.setState({ previewData:previewInfo})
|
||||
let previewInfo = _.cloneDeep(this.state);
|
||||
previewInfo.land = this.state.model;
|
||||
this.setState({ previewData: previewInfo })
|
||||
this.setState({
|
||||
preview_visible: true,
|
||||
})
|
||||
|
@ -738,9 +748,7 @@ export default class edittemplate extends React.Component {
|
|||
addFn() {
|
||||
let item = this.state.activeNavStatus
|
||||
item++
|
||||
if (item > 3) {
|
||||
item = 3
|
||||
}
|
||||
if (item > 3) item = 3
|
||||
this.setState({ activeNavStatus: item })
|
||||
}
|
||||
|
||||
|
@ -765,7 +773,7 @@ export default class edittemplate extends React.Component {
|
|||
this.setState({ componentOfconfig: c });
|
||||
}
|
||||
render() {
|
||||
console.log(761,this.state);
|
||||
console.log(761, this.state);
|
||||
return (
|
||||
<div className='edittemplate'>
|
||||
<div className='topHeader'>
|
||||
|
@ -823,21 +831,16 @@ export default class edittemplate extends React.Component {
|
|||
? 'activeNav thumbheader'
|
||||
: 'thumbheader'
|
||||
}>
|
||||
<h3>{this.state.model.title}</h3>
|
||||
{!this.state.model.top_image ? (
|
||||
<img
|
||||
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' />
|
||||
)}
|
||||
|
||||
{this.state.mouldType == 0 && this.state.showType != 3}
|
||||
<h3>{this.state.mouldType == 0 && this.state.showType != 3 ? this.state.systemTitle : this.state.model.title} </h3>
|
||||
<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'
|
||||
/>
|
||||
<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' />
|
||||
{[1,8].includes(this.state.showType)? (
|
||||
<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) ? (
|
||||
<img
|
||||
src={
|
||||
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png'
|
||||
|
@ -845,18 +848,18 @@ export default class edittemplate extends React.Component {
|
|||
className='thumbcode'
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
src={
|
||||
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
|
||||
}
|
||||
className='thumbcode'
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
src={
|
||||
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
|
||||
}
|
||||
className='thumbcode'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
{this.state.model.describe &&
|
||||
this.state.model.describe.bg_image ? (
|
||||
<img src={this.state.model.describe.bg_image} />
|
||||
) : null}
|
||||
<img src={this.state.model.describe.bg_image} />
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<div className='item'>
|
||||
|
@ -869,10 +872,10 @@ export default class edittemplate extends React.Component {
|
|||
: 'thumbheader'
|
||||
}>
|
||||
<div className='goodsList-item'>
|
||||
<Goodstemplate
|
||||
opendesc={(c) => this.setState({ activeshow: true })}
|
||||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
<Goodstemplate
|
||||
opendesc={(c) => this.setState({ activeshow: true })}
|
||||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -886,7 +889,7 @@ export default class edittemplate extends React.Component {
|
|||
: 'thumbheader'
|
||||
}>
|
||||
<div className='detailstemplatescale' >
|
||||
{
|
||||
{
|
||||
this.state.detailType == 1 ? <Detailstemplate
|
||||
opendesc={(c) => this.setState({ detailactiveshow: true })}
|
||||
detaildata={this.state.product_detail}
|
||||
|
@ -898,73 +901,36 @@ export default class edittemplate extends React.Component {
|
|||
</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 className='xj-wrapper' style={{ 'zIndex': '1' }}>
|
||||
<div className={[4,8].includes(this.state.showType)&& this.state.activeNavStatus == 2 ? 'xj-center-small' : 'xj-center'}>
|
||||
{this.state.activeNavStatus == 1 ? (
|
||||
<div>
|
||||
<img
|
||||
className='perimg'
|
||||
onClick={this.reduceFn.bind(this)}
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/pre.png'
|
||||
}
|
||||
/>
|
||||
<img
|
||||
className='nextimg'
|
||||
onClick={this.addFn.bind(this)}
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
) : this.state.activeNavStatus == 2 ? (
|
||||
<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'
|
||||
<div className={[4, 8].includes(this.state.showType) && this.state.activeNavStatus == 2 ? 'xj-center-small' : 'xj-center'}>
|
||||
<div>
|
||||
<img
|
||||
className='perimg'
|
||||
onClick={this.reduceFn.bind(this)}
|
||||
src={[2, 3].includes(this.state.activeNavStatus) ?
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png' : 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/pre.png'
|
||||
}
|
||||
/>
|
||||
<img
|
||||
className='nextimg'
|
||||
onClick={this.addFn.bind(this)}
|
||||
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/next.png'
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
<div className='editor-main'
|
||||
ref={this.canvasImgDom}
|
||||
style={{
|
||||
display: this.state.activeNavStatus == 1 ? 'block' : 'none'
|
||||
}}>
|
||||
<div className='xj-viewer-title'>
|
||||
<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>
|
||||
</div>
|
||||
<div
|
||||
|
@ -977,28 +943,20 @@ export default class edittemplate extends React.Component {
|
|||
style={{ background: this.state.model.bg_color }}
|
||||
ref={this.canvasImgDomScr}>
|
||||
<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
|
||||
crossOrigin='anonymous'
|
||||
src={this.state.model.top_image}
|
||||
id='top'
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
key={this.state.model.top_image}
|
||||
crossOrigin='anonymous'
|
||||
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'
|
||||
/>
|
||||
</div>
|
||||
<div className='center' id='center'>
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
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
|
||||
src={
|
||||
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220127/22e5d4c1b1190a0a7bc8db43e1490d67.png'
|
||||
|
@ -1006,14 +964,14 @@ export default class edittemplate extends React.Component {
|
|||
className='verifycode'
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
src={
|
||||
'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
|
||||
}
|
||||
className='verifycode'
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
src={
|
||||
'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
|
||||
}
|
||||
className='verifycode'
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className='submit'></div>
|
||||
</div>
|
||||
|
@ -1022,29 +980,29 @@ export default class edittemplate extends React.Component {
|
|||
this.state.model.describe.type == 0 ? null : this.state
|
||||
.model.describe &&
|
||||
this.state.model.describe.type == 1 ? (
|
||||
<img
|
||||
src={this.state.model.describe.bg_image}
|
||||
crossOrigin='anonymous'
|
||||
/>
|
||||
) : (
|
||||
<div className='editbg'>
|
||||
{this.state.model.describe &&
|
||||
this.state.model.describe.bg_image ? (
|
||||
<img
|
||||
src={this.state.model.describe.bg_image}
|
||||
crossOrigin='anonymous'
|
||||
className='bgimg'
|
||||
/>
|
||||
) : (
|
||||
<div className='editbg'>
|
||||
{this.state.model.describe &&
|
||||
this.state.model.describe.bg_image ? (
|
||||
<img
|
||||
src={this.state.model.describe.bg_image}
|
||||
crossOrigin='anonymous'
|
||||
className='bgimg'
|
||||
/>
|
||||
) : null}
|
||||
{this.state.model.describe &&
|
||||
this.state.model.describe.content ? (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: this.state.model.describe.content
|
||||
}}></div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
) : null}
|
||||
{this.state.model.describe &&
|
||||
this.state.model.describe.content ? (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: this.state.model.describe.content
|
||||
}}></div>
|
||||
) : null}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1053,70 +1011,66 @@ export default class edittemplate extends React.Component {
|
|||
{this.state.activeNavStatus != 2 ? null : this.state.activeshow &&
|
||||
this.state.product_list.describe.type == 2 &&
|
||||
this.state.product_list.describe.content ? (
|
||||
<Descteplate
|
||||
backPrepage={(c) => this.showactiveIcon(c)}
|
||||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
) : (
|
||||
<Goodstemplate
|
||||
opendesc={(c) => this.setState({ activeshow: true })}
|
||||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
)}
|
||||
<Descteplate
|
||||
backPrepage={(c) => this.showactiveIcon(c)}
|
||||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
) : (
|
||||
<Goodstemplate
|
||||
opendesc={(c) => this.setState({ activeshow: true })}
|
||||
goodsdata={this.state.product_list}
|
||||
/>
|
||||
)}
|
||||
{this.state.activeNavStatus != 3 ? null : this.state
|
||||
.detailactiveshow &&
|
||||
this.state.product_detail.describe.type == 2 &&
|
||||
this.state.product_detail.describe.content ? (
|
||||
<Descteplate
|
||||
backPrepage={(c) => this.showactivedetail(c)}
|
||||
goodsdata={this.state.product_detail}
|
||||
/>
|
||||
) : (
|
||||
<div>
|
||||
<div className="details_type">
|
||||
<RadioGroup
|
||||
onChange={(e) => {
|
||||
this.ondetailTypeChange(e)
|
||||
}}
|
||||
value={this.state.detailType}>
|
||||
<RadioButton value={1} >
|
||||
权益
|
||||
<Descteplate
|
||||
backPrepage={(c) => this.showactivedetail(c)}
|
||||
goodsdata={this.state.product_detail}
|
||||
/>
|
||||
) : (
|
||||
<div>
|
||||
<div className="details_type">
|
||||
<RadioGroup
|
||||
onChange={(e) => {
|
||||
this.ondetailTypeChange(e)
|
||||
}}
|
||||
value={this.state.detailType}>
|
||||
<RadioButton value={1} >
|
||||
权益
|
||||
</RadioButton>
|
||||
<RadioButton value={2} >
|
||||
立减金
|
||||
<RadioButton value={2} >
|
||||
立减金
|
||||
</RadioButton>
|
||||
|
||||
</RadioGroup>
|
||||
</div>
|
||||
{
|
||||
this.state.detailType == 1 ? <Detailstemplate
|
||||
opendesc={(c) => this.setState({ detailactiveshow: true })}
|
||||
detaildata={this.state.product_detail}
|
||||
templateType={this.state.showType}
|
||||
/> : <Reduce templateType={this.state.showType} detaildata={this.state.product_detail}/>
|
||||
}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
this.state.detailType == 1 ? <Detailstemplate
|
||||
opendesc={(c) => this.setState({ detailactiveshow: true })}
|
||||
detaildata={this.state.product_detail}
|
||||
templateType={this.state.showType}
|
||||
/> : <Reduce templateType={this.state.showType} detaildata={this.state.product_detail} />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className='xj-center-fixed'
|
||||
style={{ 'marginLeft': '288px' }}></div>
|
||||
<div className='xj-center-fixed' style={{ 'marginLeft': '288px' }}></div>
|
||||
<div className='xj-rightPanel'>
|
||||
<div className='RootEditor'>
|
||||
<div
|
||||
className='schema-editor-container'
|
||||
data-editor-role='XJWebsitePage'>
|
||||
{[1,3].includes(this.state.showType)? (
|
||||
<div className='control page-title-control'>
|
||||
{this.state.activeNavStatus == 1 ? (
|
||||
<h1 style={{ fontSize: '16px' }}>落地页设置</h1>
|
||||
) : this.state.activeNavStatus == 2 ? (
|
||||
<h1 style={{ fontSize: '16px' }}>商品列表页设置</h1>
|
||||
) : (
|
||||
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
<div>
|
||||
{[1, 3].includes(this.state.showType) ? (
|
||||
<div className='control page-title-control'>
|
||||
{this.state.activeNavStatus == 1 ? (
|
||||
<h1 style={{ fontSize: '16px' }}>落地页设置</h1>
|
||||
) : this.state.activeNavStatus == 2 ? (
|
||||
<h1 style={{ fontSize: '16px' }}>商品列表页设置</h1>
|
||||
) : (
|
||||
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
|
||||
)}
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
{this.state.showType == 3 ? (
|
||||
this.state.activeNavStatus == 1 ? (
|
||||
|
@ -1166,13 +1120,13 @@ export default class edittemplate extends React.Component {
|
|||
/>
|
||||
) : this.state.detailType == 1 ? (
|
||||
this.state.activeNavStatus == 1 ?
|
||||
<DetailsPage
|
||||
setdetailActive={(c) => this.getdetailActiveFn(c)}
|
||||
setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)}
|
||||
/>:<CouponGoodsDetailForm
|
||||
setdetailActive={(c) => this.getdetailActiveFn(c)}
|
||||
setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)}/>
|
||||
) :this.state.activeNavStatus == 1?<ReduceConfig />:<CouponReduceDetailForm setReduceFontcolor={(c)=>this.getReduceFontcolor(c)} setReduceButtoncolor={(c)=>this.getReduceButtoncolor(c)}/>
|
||||
<DetailsPage
|
||||
setdetailActive={(c) => this.getdetailActiveFn(c)}
|
||||
setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)}
|
||||
/> : <CouponGoodsDetailForm
|
||||
setdetailActive={(c) => this.getdetailActiveFn(c)}
|
||||
setGoodDetailConfig={(c) => this.getGoodDetailConfig(c)} />
|
||||
) : this.state.activeNavStatus == 1 ? <ReduceConfig /> : <CouponReduceDetailForm setReduceFontcolor={(c) => this.getReduceFontcolor(c)} setReduceButtoncolor={(c) => this.getReduceButtoncolor(c)} />
|
||||
}
|
||||
{this.state.preview_visible ? (
|
||||
<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 ? (
|
||||
<div className='loadingShow'>
|
||||
<div className='modal model44'></div>
|
||||
<BlockLoading
|
||||
loading
|
||||
icon='circle'
|
||||
iconSize={64}
|
||||
iconText='保存中'
|
||||
/>
|
||||
<BlockLoading loading icon='circle' iconSize={64} iconText='保存中' className='save_loading'/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
|
|
@ -465,7 +465,12 @@
|
|||
.edittemplate {
|
||||
height: 100vh;
|
||||
background: #f3f4f5;
|
||||
|
||||
.save_loading{
|
||||
position: fixed;
|
||||
top: 30%;
|
||||
left: 50%;
|
||||
z-index: 999999;
|
||||
}
|
||||
.zent-image-upload-item-thumb[data-zv="9.11.0"] {
|
||||
border: 1px dashed #f1f2f3;
|
||||
}
|
||||
|
@ -491,7 +496,7 @@
|
|||
|
||||
#leftComponent {
|
||||
position: fixed;
|
||||
width: 300px;
|
||||
width: 330px;
|
||||
height: 100%;
|
||||
background: #fff;
|
||||
|
||||
|
|
|
@ -13,6 +13,7 @@ export default class edittemplate extends React.Component {
|
|||
this.props.opendesc(true)
|
||||
}
|
||||
render() {
|
||||
console.log(16,this.props.detaildata);
|
||||
return (
|
||||
<div className="editor-main goodstemplate details-reduce">
|
||||
<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" />
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="coupon-price">
|
||||
<p>¥0.00</p>
|
||||
<p>¥<span>0.00</span></p>
|
||||
<p>共省¥0.01</p>
|
||||
</div>
|
||||
<button className="payBtn" style={{ background: this.props.detaildata.reduce.button_color, color: this.props.detaildata.reduce.font_color }}>立即支付</button>
|
||||
|
|
|
@ -326,7 +326,7 @@ export default class preview extends React.Component {
|
|||
) : (
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="coupon-price">
|
||||
<p>¥0.00</p>
|
||||
<p>¥<span>0.00</span></p>
|
||||
<p>共省¥0.01</p>
|
||||
</div>
|
||||
<button
|
||||
|
@ -349,7 +349,7 @@ export default class preview extends React.Component {
|
|||
{[1, 3].includes(this.props.pageType) ? null : (
|
||||
<div className="dflexaj payBtn-view">
|
||||
<div className="coupon-price">
|
||||
<p>¥0.00</p>
|
||||
<p>¥<span>0.00</span></p>
|
||||
<p>共省¥0.01</p>
|
||||
</div>
|
||||
<button
|
||||
|
|
Loading…
Reference in New Issue