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
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}

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>:
<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>

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

@ -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
}
{

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

@ -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 {

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

@ -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: '',//选择组件库
@ -617,6 +618,9 @@ 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) {
case 1:
@ -626,10 +630,16 @@ export default class edittemplate extends React.Component {
holdData = editorData.exchangeList
break;
default:
let {activeNavStatus,showType,model}=this.state;
let { activeNavStatus, showType, model,product_list,product_detail } = this.state;
if (activeNavStatus == 1 && [4, 8].includes(showType)) {//落地页
editorData.coupon.land = model;
}
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;
@ -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 })
}
@ -823,18 +831,13 @@ export default class edittemplate extends React.Component {
? 'activeNav thumbheader'
: 'thumbheader'
}>
<h3>{this.state.model.title}</h3>
{!this.state.model.top_image ? (
{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'
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'>
<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) ? (
@ -904,67 +907,30 @@ export default class edittemplate extends React.Component {
<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'
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={
'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/nextBtn.png'
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>
) : 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='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,20 +943,12 @@ 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
key={this.state.model.top_image}
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'
/>
)}
</div>
<div className='center' id='center'>
<img
@ -1098,14 +1056,10 @@ export default class edittemplate extends React.Component {
</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'>
<div>
{[1, 3].includes(this.state.showType) ? (
<div className='control page-title-control'>
{this.state.activeNavStatus == 1 ? (
@ -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>

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

@ -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;

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

@ -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>

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="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