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:
许红梅 2022-09-14 13:39:42 +08:00
parent 1fa59939a8
commit 8f90a194b9
2 changed files with 152 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

236
src/pages/exchangepage/couponTemplate/landingPage/config/main.js
View File

@ -6,6 +6,7 @@ import { Notify, RadioGroup, RadioButton } from 'zent';
import Ipt from "@/components/input/main" import Ipt from "@/components/input/main"
import Form from "@/components/form/main" import Form from "@/components/form/main"
import FormItem from "@/components/form-item/main" import FormItem from "@/components/form-item/main"
import Bus from '@/assets/eventBus.js'
import { uploadImg, handelResponse, getThemeType } from "@/assets/api.js" import { uploadImg, handelResponse, getThemeType } from "@/assets/api.js"
import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js' import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js'
export default class edittemplate extends React.Component { export default class edittemplate extends React.Component {
@ -28,18 +29,34 @@ export default class edittemplate extends React.Component {
} }
componentWillMount(e) { componentWillMount(e) {
console.log(6666,'组件初始化啦');
let self = this; let self = this;
let config = JSON.parse(sessionStorage.getItem('editorConfig')); let config = JSON.parse(sessionStorage.getItem('editorConfig'));
let moudTyle = sessionStorage.getItem('mouldType'); let moudTyle = sessionStorage.getItem('mouldType');
if (moudTyle && moudTyle == 0) { if (moudTyle && moudTyle == 0) {
this.setState({ isSystemModel: true }); this.setState({ isSystemModel: true });
} }
if (config && config.couponList && config.couponList.land) { if (this.props.templateType == 4) {
let data = config.couponList.land; let data = config.couponWhiteList.land;
this.setState({ model: data }); this.setState({ model: data });
} else { } else {
let data = config.couponList.land;
this.setState({ model: data });
} }
Bus.addListener('refreshcoupon', (prop) => {
console.log(46, config);
if (config && config.couponList && config.couponList.land) {
let data = config[prop].land;
this.setState({ model: data });
}
console.log(52,prop);
if(prop=='couponList'){
config.couponWhiteList.land = this.state.model;
}else{
config.couponList.land = this.state.model;
}
sessionStorage.setItem('editorConfig', JSON.stringify(config));
})
getThemeType().then(res => { getThemeType().then(res => {
handelResponse(res, (req, msg) => { handelResponse(res, (req, msg) => {
let typeListSource = res.data.map(it => { let typeListSource = res.data.map(it => {
@ -224,119 +241,87 @@ export default class edittemplate extends React.Component {
//组件将要销毁阶段 //组件将要销毁阶段
componentWillUnmount() { componentWillUnmount() {
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
if (oldobj && oldobj.couponList) { let couponList;
let couponList = oldobj.couponList if (this.props.templateType == 4) {
couponList = oldobj.couponWhiteList
couponList.land = this.state.model; couponList.land = this.state.model;
oldobj.couponList = couponList; oldobj.couponWhiteList = couponList;
} else { } else {
oldobj = {} couponList = oldobj.couponList
let couponList = {}
couponList.land = this.state.model; couponList.land = this.state.model;
oldobj.couponList = couponList; oldobj.couponList = couponList;
} }
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
} }
componentWillReceiveProps(val) {
console.log(123, val);
}
render() { render() {
console.log(262,this.state);
return ( return (
<div> <div>
<div className='control page-title-control'> <div className='control page-title-control'>
<h1 style={{ fontSize: '16px' }}>落地页设置</h1> <h1 style={{ fontSize: '16px' }}>落地页设置123</h1>
</div> </div>
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}> <div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
<div style={{ fontWeight: 'bold' }}>基础设置</div> <div style={{ fontWeight: 'bold' }}>基础设置</div>
<Form model={this.state.model} ref="form1"> <Form model={this.state.model} ref="form1">
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px"> <FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
<Ipt onChange={(e) => { <Ipt onChange={(e) => {
let model2 = this.state.model;
model2.title = e;
this.setState({ model: model2 })
this.props.settitle(e)
}}
onClearItem={(e) => {
let model2 = this.state.model; let model2 = this.state.model;
model2.title = ""; model2.title = e;
this.setState({ model: model2 }) this.setState({ model: model2 })
this.props.settitle(e)
}} }}
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} /> onClearItem={(e) => {
</FormItem> let model2 = this.state.model;
{ model2.title = "";
this.state.isSystemModel ? ( this.setState({ model: model2 })
<FormItem labelname="权重" required={false} prop="sort" id="sort" labelwidth="100px"> }}
<NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} /> value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>) : null </FormItem>
} {
{ this.state.isSystemModel ? (
this.state.isSystemModel ? ( <FormItem labelname="权重" required={false} prop="sort" id="sort" labelwidth="100px">
<FormItem labelname="模板分类" labelwidth="100px" prop="scope" id="scope"> <NumberInput onChange={c => this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} />
<Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} /> </FormItem>) : null
</FormItem> }
) : null {
} this.state.isSystemModel ? (
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div> <FormItem labelname="模板分类" labelwidth="100px" prop="scope" id="scope">
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px"> <Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} />
<div className="colorItembg dfleac"> </FormItem>
<span className="cicle" style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span> ) : null
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.bgcolor('#EEEEEE') }}></span> }
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span> <div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
<div className="selfset" > <FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} /> <div className="colorItembg dfleac">
<span className="cicle" style={{ border: '1px solid #f1f2f3' }} className={this.state.model.bg_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span>
<span className={this.state.model.bg_color == '#EEEEEE' ? "activecicle cicle cicle1" : "cicle cicle1"} onClick={() => { this.bgcolor('#EEEEEE') }}></span>
<span className={this.state.model.bg_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
<div className="selfset" >
<ColorPicker className="setbgColor" color={this.state.model.bg_color} onChange={this.handleChange} />
</div>
</div> </div>
</div> </FormItem>
</FormItem> <FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px"> <div className="colorItemfont dfleac">
<div className="colorItemfont dfleac"> <span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span>
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span> <span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
<span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span> <span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
<span className={this.state.model.font_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span> <span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
<span className={this.state.model.font_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span> <span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
<span className={this.state.model.font_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span> <div className="selfset">
<div className="selfset"> <ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} /> </div>
</div> </div>
</div> </FormItem>
</FormItem> <div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div> <FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }}
onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError}
/>
</FormItem>
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange1(e) }}
defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
onUpload={this.onUpload}
onError={this.onUploadError}
/>
</FormItem>
<FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
<RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup>
</FormItem>
{
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -344,15 +329,13 @@ export default class edittemplate extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }} onChange={(e) => { this.onUploadChange(e) }}
onUpload={this.onUpload} onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/> />
</FormItem> : null </FormItem>
} <FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
{
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload <ImageUpload
className="zent-image-upload-demo" className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024} maxSize={5 * 1024 * 1024}
@ -360,16 +343,53 @@ export default class edittemplate extends React.Component {
multiple multiple
sortable sortable
tips="单张图片不超过 5M" tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }} onChange={(e) => { this.onUploadChange1(e) }}
defaultFileList={this.state.model.middle_image ? [{ 'src': this.state.model.middle_image }] : null}
onUpload={this.onUpload} onUpload={this.onUpload}
onError={this.onUploadError} onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/> />
</FormItem> : null </FormItem>
} <FormItem myClassName="activeSet" required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px">
{this.state.model.describe.type == 2 ? <Wangeditor pageType="landeditor" setEdittext={c => this.getEditext(c)} /> : null} <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
</Form> <RadioButton value={"1"} onClick={() => this.hasItemFn(1)}>图片</RadioButton>
</div> <RadioButton value={"2"} onClick={() => this.hasItemFn(2)}>富文本</RadioButton>
</RadioGroup>
</FormItem>
{
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }}
onUpload={this.onUpload}
onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/>
</FormItem> : null
}
{
this.state.model.describe.type == 2 ? <FormItem required={false} labelname="背景图案:" prop="bottom" id="bottom" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
maxSize={5 * 1024 * 1024}
maxAmount={1}
multiple
sortable
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange2(e) }}
onUpload={this.onUpload}
onError={this.onUploadError}
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
/>
</FormItem> : null
}
{this.state.model.describe.type == 2 ? <Wangeditor pageType="landeditor" setEdittext={c => this.getEditext(c)} /> : null}
</Form>
</div>
</div> </div>
) )
} }

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

@ -341,9 +341,20 @@ export default class edittemplate extends React.Component {
} }
couponList['land'].title = newEditor.title couponList['land'].title = newEditor.title
couponList['land'].sort = newEditor.sort couponList['land'].sort = newEditor.sort
newEditor.exchangeList = exchangeList //优惠券白名单
newEditor.whiteList = whiteList let couponWhiteList = newEditor.couponWhiteList
newEditor.couponList = couponList; if (!couponWhiteList) {
couponWhiteList = {}
couponWhiteList.land = model
couponWhiteList.product_list = couponProduct_list
couponWhiteList.product_detail = product_detail
}
couponWhiteList['land'].title = newEditor.title
couponWhiteList['land'].sort = newEditor.sort
newEditor.exchangeList = exchangeList
newEditor.whiteList = whiteList
newEditor.couponList = couponList;
newEditor.couponWhiteList = couponWhiteList;
if (template == 1) { //1-白名单 2-兑换码 if (template == 1) { //1-白名单 2-兑换码
this.setState({ this.setState({
model: newEditor.whiteList.land, model: newEditor.whiteList.land,
@ -362,7 +373,7 @@ export default class edittemplate extends React.Component {
this.setState({ pagedisable: true }) this.setState({ pagedisable: true })
} }
} else {//新增数据 } else {//新增数据
let obj = {}, whiteList = {}, exchangeList = {}, couponList = {} let obj = {}, whiteList = {}, exchangeList = {}, couponList = {},couponWhiteList={}
let sourceObj = {//模板数据结构 let sourceObj = {//模板数据结构
land: model, land: model,
product_list, product_list,
@ -376,9 +387,11 @@ export default class edittemplate extends React.Component {
whiteList = _.cloneDeep(sourceObj); whiteList = _.cloneDeep(sourceObj);
exchangeList = _.cloneDeep(sourceObj); exchangeList = _.cloneDeep(sourceObj);
couponList = _.cloneDeep(sourcecouponObj); couponList = _.cloneDeep(sourcecouponObj);
couponWhiteList = _.cloneDeep(sourcecouponObj);
obj.exchangeList = exchangeList obj.exchangeList = exchangeList
obj.whiteList = whiteList obj.whiteList = whiteList
obj.couponList = couponList obj.couponList = couponList
obj.couponWhiteList = couponWhiteList
sessionStorage.setItem('editorConfig', JSON.stringify(obj)) sessionStorage.setItem('editorConfig', JSON.stringify(obj))
} }
} }
@ -656,6 +669,12 @@ export default class edittemplate extends React.Component {
let couponData = editorData.couponList let couponData = editorData.couponList
let { land, product_list, product_detail } = couponData; let { land, product_list, product_detail } = couponData;
this.setState({ model: land, product_list, product_detail }) this.setState({ model: land, product_list, product_detail })
Bus.emit('refreshcoupon', 'couponList')
}else if (e.target.value == 4) {
let couponData = editorData.couponWhiteList
let { land, product_list, product_detail } = couponData;
this.setState({ model: land, product_list, product_detail })
Bus.emit('refreshcoupon', 'couponWhiteList')
} }
} }
onPreview() { onPreview() {
@ -1242,6 +1261,7 @@ export default class edittemplate extends React.Component {
landbgcolor={(c) => this.getlandbgcolor(c)} landbgcolor={(c) => this.getlandbgcolor(c)}
landftcolor={(c) => this.getlandftcolor(c)} landftcolor={(c) => this.getlandftcolor(c)}
setbanner={(e) => this.getLandingdata(e)} setbanner={(e) => this.getLandingdata(e)}
templateType={this.state.showType}
/> />
) : this.state.activeNavStatus == 2 ? ( ) : this.state.activeNavStatus == 2 ? (
<CouponGoodsListForm <CouponGoodsListForm