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-08-25 14:22:08 +08:00
parent 3d733e2205
commit 2241437012
2 changed files with 126 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,21 +1,13 @@
import ReactDOM from 'react-dom' import React from 'react'
import React, { Component } from 'react'
import './main.less' import './main.less'
import '../../../assets/comm.css' import '../../../assets/comm.css'
import { import {
Notify, Notify,
BlockLoading, BlockLoading,
Button, Button,
Input,
onUpload,
RadioGroup, RadioGroup,
RadioButton, RadioButton
Dropdown,
Icon
} from 'zent' } from 'zent'
import Ipt from '../../../components/input/main'
import Form from '../../../components/form/main'
import FormItem from '../../../components/form-item/main'
import { import {
uploadImg, uploadImg,
handelResponse, handelResponse,
@ -88,7 +80,6 @@ export default class edittemplate extends React.Component {
activeHeight: 667, activeHeight: 667,
pageStep: 1, pageStep: 1,
showPage: 1, showPage: 1,
fontSize: 10000 / (375 * 0.75),
setStyle: { width: '375px', height: '667px', transform: 'scale(0.75)' }, setStyle: { width: '375px', height: '667px', transform: 'scale(0.75)' },
detailType: 1 //详情页1 权益 2-立减金 detailType: 1 //详情页1 权益 2-立减金
} }
@ -579,44 +570,9 @@ export default class edittemplate extends React.Component {
showactivedetail(c) { showactivedetail(c) {
this.setState({ detailactiveshow: false }) 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) { handleSize(width, height) {
let style = { width: width + 'px', height: height + 'px' } let style = { width: width + 'px', height: height + 'px' }
let fontSize = null
switch (height) { switch (height) {
case 667: case 667:
style = { width: '375px', height: '667px', transform: 'scale(0.75)' } 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'> <div className='hascode'>
{!this.state.model.middle_image ? ( {!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 ? ( {this.state.showType == 1 ? (
<img <img
src={ src={
@ -723,18 +679,18 @@ export default class edittemplate extends React.Component {
className='thumbcode' className='thumbcode'
/> />
) : ( ) : (
<img <img
src={ src={
'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png' 'https://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
} }
className='thumbcode' className='thumbcode'
/> />
)} )}
</div> </div>
{this.state.model.describe && {this.state.model.describe &&
this.state.model.describe.bg_image ? ( this.state.model.describe.bg_image ? (
<img src={this.state.model.describe.bg_image} /> <img src={this.state.model.describe.bg_image} />
) : null} ) : null}
</div> </div>
</div> </div>
<div className='item'> <div className='item'>
@ -759,13 +715,13 @@ export default class edittemplate extends React.Component {
src={this.state.product_list.top_image} src={this.state.product_list.top_image}
/> />
) : ( ) : (
<img <img
className='topbanner' className='topbanner'
src={ src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'
} }
/> />
)} )}
{this.state.product_list.list == 2 ? ( {this.state.product_list.list == 2 ? (
<img <img
@ -782,13 +738,13 @@ export default class edittemplate extends React.Component {
} }
/> />
) : ( ) : (
<img <img
className='goodsPicMatrax' className='goodsPicMatrax'
src={ src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'
} }
/> />
)} )}
{this.state.product_list.list == 2 ? ( {this.state.product_list.list == 2 ? (
<button <button
className={ className={
@ -867,7 +823,7 @@ export default class edittemplate extends React.Component {
color: this.state.product_detail.font_color color: this.state.product_detail.font_color
}}> }}>
立即兑换 立即兑换
</button> </button>
{this.state.product_detail.describe.type == 2 ? ( {this.state.product_detail.describe.type == 2 ? (
<img <img
className='susactive_Tip' className='susactive_Tip'
@ -920,23 +876,23 @@ export default class edittemplate extends React.Component {
/> />
</div> </div>
) : ( ) : (
<div> <div>
<img <img
className='perimg' className='perimg'
onClick={this.reduceFn.bind(this)} onClick={this.reduceFn.bind(this)}
src={ src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/preBtn.png'
} }
/> />
<img <img
className='nextimg' className='nextimg'
onClick={this.addFn.bind(this)} onClick={this.addFn.bind(this)}
src={ src={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png' 'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/next.png'
} }
/> />
</div> </div>
)} )}
<div <div
className='editor-main' className='editor-main'
ref={this.canvasImgDom} ref={this.canvasImgDom}
@ -966,12 +922,12 @@ export default class edittemplate extends React.Component {
id='top' id='top'
/> />
) : ( ) : (
<img <img
crossOrigin='anonymous' crossOrigin='anonymous'
src={this.state.model.top_image} src={this.state.model.top_image}
id='top' id='top'
/> />
)} )}
</div> </div>
<div className='center' id='center'> <div className='center' id='center'>
{!this.state.model.middle_image ? ( {!this.state.model.middle_image ? (
@ -982,12 +938,12 @@ export default class edittemplate extends React.Component {
} }
/> />
) : ( ) : (
<img <img
crossOrigin='anonymous' crossOrigin='anonymous'
id='center-img' id='center-img'
src={this.state.model.middle_image} src={this.state.model.middle_image}
/> />
)} )}
{this.state.showType == 1 ? ( {this.state.showType == 1 ? (
<img <img
src={ src={
@ -996,14 +952,14 @@ export default class edittemplate extends React.Component {
className='verifycode' className='verifycode'
/> />
) : ( ) : (
<img <img
crossOrigin='anonymous' crossOrigin='anonymous'
src={ src={
'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png' 'http://lsxd-yunshanfu.oss-cn-hangzhou.aliyuncs.com/common_image/20220105/7dafa511638b084f21966b2c3d269a0e.png'
} }
className='verifycode' className='verifycode'
/> />
)} )}
<div className='submit'></div> <div className='submit'></div>
</div> </div>
@ -1012,29 +968,29 @@ export default class edittemplate extends React.Component {
this.state.model.describe.type == 0 ? null : this.state this.state.model.describe.type == 0 ? null : this.state
.model.describe && .model.describe &&
this.state.model.describe.type == 1 ? ( 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 <img
src={this.state.model.describe.bg_image} src={this.state.model.describe.bg_image}
crossOrigin='anonymous' crossOrigin='anonymous'
className='bgimg'
/> />
) : ( ) : null}
<div className='editbg'> {this.state.model.describe &&
{this.state.model.describe && this.state.model.describe.content ? (
this.state.model.describe.bg_image ? ( <div
<img dangerouslySetInnerHTML={{
src={this.state.model.describe.bg_image} __html: this.state.model.describe.content
crossOrigin='anonymous' }}></div>
className='bgimg' ) : 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> </div>
</div> </div>
@ -1043,49 +999,49 @@ export default class edittemplate extends React.Component {
{this.state.activeNavStatus != 2 ? null : this.state.activeshow && {this.state.activeNavStatus != 2 ? null : this.state.activeshow &&
this.state.product_list.describe.type == 2 && this.state.product_list.describe.type == 2 &&
this.state.product_list.describe.content ? ( this.state.product_list.describe.content ? (
<Descteplate <Descteplate
backPrepage={(c) => this.showactiveIcon(c)} backPrepage={(c) => this.showactiveIcon(c)}
goodsdata={this.state.product_list} goodsdata={this.state.product_list}
/> />
) : ( ) : (
<Goodstemplate <Goodstemplate
opendesc={(c) => this.setState({ activeshow: true })} opendesc={(c) => this.setState({ activeshow: true })}
goodsdata={this.state.product_list} goodsdata={this.state.product_list}
/> />
)} )}
{this.state.activeNavStatus != 3 ? null : this.state {this.state.activeNavStatus != 3 ? null : this.state
.detailactiveshow && .detailactiveshow &&
this.state.product_detail.describe.type == 2 && this.state.product_detail.describe.type == 2 &&
this.state.product_detail.describe.content ? ( this.state.product_detail.describe.content ? (
<Descteplate <Descteplate
backPrepage={(c) => this.showactivedetail(c)} backPrepage={(c) => this.showactivedetail(c)}
goodsdata={this.state.product_detail} goodsdata={this.state.product_detail}
/> />
) : ( ) : (
<div> <div>
<div className="details_type"> <div className="details_type">
<RadioGroup <RadioGroup
onChange={(e) => { onChange={(e) => {
this.ondetailTypeChange(e) this.ondetailTypeChange(e)
}} }}
value={this.state.detailType}> value={this.state.detailType}>
<RadioButton value={1} > <RadioButton value={1} >
权益 权益
</RadioButton> </RadioButton>
<RadioButton value={2} > <RadioButton value={2} >
立减金 立减金
</RadioButton> </RadioButton>
</RadioGroup> </RadioGroup>
</div>
{
this.state.detailType == 1 ? <Detailstemplate
opendesc={(c) => this.setState({ detailactiveshow: true })}
detaildata={this.state.product_detail}
/> : <Reduce />
}
</div> </div>
)} {
this.state.detailType == 1 ? <Detailstemplate
opendesc={(c) => this.setState({ detailactiveshow: true })}
detaildata={this.state.product_detail}
/> : <Reduce />
}
</div>
)}
</div> </div>
<div <div
className='xj-center-fixed' className='xj-center-fixed'
@ -1101,8 +1057,8 @@ export default class edittemplate extends React.Component {
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
<h1 style={{ fontSize: '16px' }}>商品列表页设置</h1> <h1 style={{ fontSize: '16px' }}>商品列表页设置</h1>
) : ( ) : (
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1> <h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
)} )}
</div> </div>
{this.state.showType == 3 ? ( {this.state.showType == 3 ? (
this.state.activeNavStatus == 1 ? ( this.state.activeNavStatus == 1 ? (

1
src/pages/exchangepage/previewEffect/main.js
View File

@ -23,7 +23,6 @@ export default class previewEffect extends React.Component {
} }
handleSize(width, height) { handleSize(width, height) {
let style = { width: width + 'px', height: height + 'px' } let style = { width: width + 'px', height: height + 'px' }
let fontSize = null
switch (height) { switch (height) {
case 667: case 667:
style = { width: '375px', height: '667px', transform: 'scale(0.75)' } style = { width: '375px', height: '667px', transform: 'scale(0.75)' }