优化落地页编辑模块代码
This commit is contained in:
Apple
parent
3d733e2205
commit
2241437012
|
|
@ -1,21 +1,13 @@
|
|||
import ReactDOM from 'react-dom'
|
||||
import React, { Component } from 'react'
|
||||
import React from 'react'
|
||||
import './main.less'
|
||||
import '../../../assets/comm.css'
|
||||
import {
|
||||
Notify,
|
||||
BlockLoading,
|
||||
Button,
|
||||
Input,
|
||||
onUpload,
|
||||
RadioGroup,
|
||||
RadioButton,
|
||||
Dropdown,
|
||||
Icon
|
||||
RadioButton
|
||||
} from 'zent'
|
||||
import Ipt from '../../../components/input/main'
|
||||
import Form from '../../../components/form/main'
|
||||
import FormItem from '../../../components/form-item/main'
|
||||
import {
|
||||
uploadImg,
|
||||
handelResponse,
|
||||
|
|
@ -88,7 +80,6 @@ export default class edittemplate extends React.Component {
|
|||
activeHeight: 667,
|
||||
pageStep: 1,
|
||||
showPage: 1,
|
||||
fontSize: 10000 / (375 * 0.75),
|
||||
setStyle: { width: '375px', height: '667px', transform: 'scale(0.75)' },
|
||||
detailType: 1 //详情页1 权益 2-立减金
|
||||
}
|
||||
|
|
@ -579,44 +570,9 @@ export default class edittemplate extends React.Component {
|
|||
showactivedetail(c) {
|
||||
this.setState({ detailactiveshow: false })
|
||||
}
|
||||
onUpload = (file, report) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
let path = ''
|
||||
let formdata = new FormData()
|
||||
formdata.append('file', file)
|
||||
formdata.append('path', 'common_image')
|
||||
uploadImg(formdata).then((res) => {
|
||||
handelResponse(
|
||||
res,
|
||||
(req, msg) => {
|
||||
path = req.path
|
||||
},
|
||||
(err) => {
|
||||
reject()
|
||||
}
|
||||
)
|
||||
})
|
||||
|
||||
let count = 0
|
||||
const update = () => {
|
||||
if (path) {
|
||||
resolve(path)
|
||||
} else {
|
||||
if (count < 100) {
|
||||
count += 2
|
||||
report(count)
|
||||
setTimeout(update, 500)
|
||||
} else {
|
||||
reject()
|
||||
}
|
||||
}
|
||||
}
|
||||
setTimeout(update, 500)
|
||||
})
|
||||
}
|
||||
|
||||
handleSize(width, height) {
|
||||
let style = { width: width + 'px', height: height + 'px' }
|
||||
let fontSize = null
|
||||
switch (height) {
|
||||
case 667:
|
||||
style = { width: '375px', height: '667px', transform: 'scale(0.75)' }
|
||||
|
|
@ -701,8 +657,8 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<img src={this.state.model.top_image} id='top' />
|
||||
)}
|
||||
<img src={this.state.model.top_image} id='top' />
|
||||
)}
|
||||
|
||||
<div className='hascode'>
|
||||
{!this.state.model.middle_image ? (
|
||||
|
|
@ -713,8 +669,8 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<img src={this.state.model.middle_image} id='top' />
|
||||
)}
|
||||
<img src={this.state.model.middle_image} id='top' />
|
||||
)}
|
||||
{this.state.showType == 1 ? (
|
||||
<img
|
||||
src={
|
||||
|
|
@ -723,18 +679,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'>
|
||||
|
|
@ -759,13 +715,13 @@ export default class edittemplate extends React.Component {
|
|||
src={this.state.product_list.top_image}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
className='topbanner'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
className='topbanner'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
|
||||
{this.state.product_list.list == 2 ? (
|
||||
<img
|
||||
|
|
@ -782,13 +738,13 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
className='goodsPicMatrax'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
className='goodsPicMatrax'
|
||||
src={
|
||||
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'
|
||||
}
|
||||
/>
|
||||
)}
|
||||
{this.state.product_list.list == 2 ? (
|
||||
<button
|
||||
className={
|
||||
|
|
@ -867,7 +823,7 @@ export default class edittemplate extends React.Component {
|
|||
color: this.state.product_detail.font_color
|
||||
}}>
|
||||
立即兑换
|
||||
</button>
|
||||
</button>
|
||||
{this.state.product_detail.describe.type == 2 ? (
|
||||
<img
|
||||
className='susactive_Tip'
|
||||
|
|
@ -920,23 +876,23 @@ export default class edittemplate extends React.Component {
|
|||
/>
|
||||
</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>
|
||||
<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}
|
||||
|
|
@ -966,12 +922,12 @@ export default class edittemplate extends React.Component {
|
|||
id='top'
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
src={this.state.model.top_image}
|
||||
id='top'
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
src={this.state.model.top_image}
|
||||
id='top'
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
<div className='center' id='center'>
|
||||
{!this.state.model.middle_image ? (
|
||||
|
|
@ -982,12 +938,12 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
/>
|
||||
) : (
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
id='center-img'
|
||||
src={this.state.model.middle_image}
|
||||
/>
|
||||
)}
|
||||
<img
|
||||
crossOrigin='anonymous'
|
||||
id='center-img'
|
||||
src={this.state.model.middle_image}
|
||||
/>
|
||||
)}
|
||||
{this.state.showType == 1 ? (
|
||||
<img
|
||||
src={
|
||||
|
|
@ -996,14 +952,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>
|
||||
|
|
@ -1012,29 +968,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>
|
||||
|
|
@ -1043,49 +999,49 @@ 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} >
|
||||
权益
|
||||
</RadioButton>
|
||||
<RadioButton value={2} >
|
||||
立减金
|
||||
</RadioButton>
|
||||
<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>
|
||||
|
||||
</RadioGroup>
|
||||
</div>
|
||||
{
|
||||
this.state.detailType == 1 ? <Detailstemplate
|
||||
opendesc={(c) => this.setState({ detailactiveshow: true })}
|
||||
detaildata={this.state.product_detail}
|
||||
/> : <Reduce />
|
||||
}
|
||||
</RadioGroup>
|
||||
</div>
|
||||
)}
|
||||
{
|
||||
this.state.detailType == 1 ? <Detailstemplate
|
||||
opendesc={(c) => this.setState({ detailactiveshow: true })}
|
||||
detaildata={this.state.product_detail}
|
||||
/> : <Reduce />
|
||||
}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div
|
||||
className='xj-center-fixed'
|
||||
|
|
@ -1101,8 +1057,8 @@ export default class edittemplate extends React.Component {
|
|||
) : this.state.activeNavStatus == 2 ? (
|
||||
<h1 style={{ fontSize: '16px' }}>商品列表页设置</h1>
|
||||
) : (
|
||||
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
|
||||
)}
|
||||
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
|
||||
)}
|
||||
</div>
|
||||
{this.state.showType == 3 ? (
|
||||
this.state.activeNavStatus == 1 ? (
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ export default class previewEffect extends React.Component {
|
|||
}
|
||||
handleSize(width, height) {
|
||||
let style = { width: width + 'px', height: height + 'px' }
|
||||
let fontSize = null
|
||||
switch (height) {
|
||||
case 667:
|
||||
style = { width: '375px', height: '667px', transform: 'scale(0.75)' }
|
||||
|
|
|
|||
Loading…
Reference in New Issue