编辑器优惠券白名单数据处理
This commit is contained in:
许红梅
parent
1fa59939a8
commit
8f90a194b9
|
|
@ -6,6 +6,7 @@ import { Notify, RadioGroup, RadioButton } from 'zent';
|
|||
import Ipt from "@/components/input/main"
|
||||
import Form from "@/components/form/main"
|
||||
import FormItem from "@/components/form-item/main"
|
||||
import Bus from '@/assets/eventBus.js'
|
||||
import { uploadImg, handelResponse, getThemeType } from "@/assets/api.js"
|
||||
import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js'
|
||||
export default class edittemplate extends React.Component {
|
||||
|
|
@ -28,18 +29,34 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
|
||||
componentWillMount(e) {
|
||||
console.log(6666,'组件初始化啦');
|
||||
let self = this;
|
||||
let config = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
let moudTyle = sessionStorage.getItem('mouldType');
|
||||
if (moudTyle && moudTyle == 0) {
|
||||
this.setState({ isSystemModel: true });
|
||||
}
|
||||
if (config && config.couponList && config.couponList.land) {
|
||||
let data = config.couponList.land;
|
||||
if (this.props.templateType == 4) {
|
||||
let data = config.couponWhiteList.land;
|
||||
this.setState({ model: data });
|
||||
} 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 => {
|
||||
handelResponse(res, (req, msg) => {
|
||||
let typeListSource = res.data.map(it => {
|
||||
|
|
@ -224,119 +241,87 @@ export default class edittemplate extends React.Component {
|
|||
//组件将要销毁阶段
|
||||
componentWillUnmount() {
|
||||
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
|
||||
if (oldobj && oldobj.couponList) {
|
||||
let couponList = oldobj.couponList
|
||||
let couponList;
|
||||
if (this.props.templateType == 4) {
|
||||
couponList = oldobj.couponWhiteList
|
||||
couponList.land = this.state.model;
|
||||
oldobj.couponList = couponList;
|
||||
oldobj.couponWhiteList = couponList;
|
||||
} else {
|
||||
oldobj = {}
|
||||
let couponList = {}
|
||||
couponList = oldobj.couponList
|
||||
couponList.land = this.state.model;
|
||||
oldobj.couponList = couponList;
|
||||
}
|
||||
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
|
||||
}
|
||||
|
||||
componentWillReceiveProps(val) {
|
||||
console.log(123, val);
|
||||
}
|
||||
|
||||
|
||||
render() {
|
||||
console.log(262,this.state);
|
||||
return (
|
||||
<div>
|
||||
<div className='control page-title-control'>
|
||||
<h1 style={{ fontSize: '16px' }}>落地页设置</h1>
|
||||
<h1 style={{ fontSize: '16px' }}>落地页设置123</h1>
|
||||
</div>
|
||||
|
||||
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<div style={{ fontWeight: 'bold' }}>基础设置</div>
|
||||
<div style={{ width: "92%", "margin": "0 auto 60px", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<div style={{ fontWeight: 'bold' }}>基础设置</div>
|
||||
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = e;
|
||||
this.setState({ model: model2 })
|
||||
this.props.settitle(e)
|
||||
}}
|
||||
onClearItem={(e) => {
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<FormItem labelname="落地页标题:" prop="title" id="title" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = "";
|
||||
model2.title = e;
|
||||
this.setState({ model: model2 })
|
||||
this.props.settitle(e)
|
||||
}}
|
||||
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<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} />
|
||||
</FormItem>) : null
|
||||
}
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<FormItem labelname="模板分类" labelwidth="100px" prop="scope" id="scope">
|
||||
<Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} />
|
||||
</FormItem>
|
||||
) : null
|
||||
}
|
||||
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
|
||||
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
|
||||
<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} />
|
||||
onClearItem={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = "";
|
||||
this.setState({ model: model2 })
|
||||
}}
|
||||
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<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} />
|
||||
</FormItem>) : null
|
||||
}
|
||||
{
|
||||
this.state.isSystemModel ? (
|
||||
<FormItem labelname="模板分类" labelwidth="100px" prop="scope" id="scope">
|
||||
<Select options={this.state.mouldWay} onChange={(e) => { this.onmouldChange(e) }} placeholder="选择一项" width={300} value={this.state.model.type_id} />
|
||||
</FormItem>
|
||||
) : null
|
||||
}
|
||||
<div style={{ marginTop: '20px', marginBottom: '15px', fontWeight: 'bold' }}>样式</div>
|
||||
<FormItem labelname="背景颜色:" prop="font_color" id="font_color" labelwidth="80px">
|
||||
<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>
|
||||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<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 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 == '#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>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
||||
</FormItem>
|
||||
<FormItem labelname="字体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
|
||||
<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 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 == '#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>
|
||||
<div className="selfset">
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange1} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
|
||||
<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">
|
||||
</FormItem>
|
||||
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
|
||||
<FormItem labelname="顶部banner:" prop="top" id="top" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -344,15 +329,13 @@ export default class edittemplate extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange2(e) }}
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
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">
|
||||
</FormItem>
|
||||
<FormItem labelname="输入框:" prop="center" id="center" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
|
|
@ -360,16 +343,53 @@ export default class edittemplate extends React.Component {
|
|||
multiple
|
||||
sortable
|
||||
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}
|
||||
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>
|
||||
</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
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -341,9 +341,20 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
couponList['land'].title = newEditor.title
|
||||
couponList['land'].sort = newEditor.sort
|
||||
newEditor.exchangeList = exchangeList
|
||||
newEditor.whiteList = whiteList
|
||||
newEditor.couponList = couponList;
|
||||
//优惠券白名单
|
||||
let couponWhiteList = newEditor.couponWhiteList
|
||||
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-兑换码
|
||||
this.setState({
|
||||
model: newEditor.whiteList.land,
|
||||
|
|
@ -362,7 +373,7 @@ export default class edittemplate extends React.Component {
|
|||
this.setState({ pagedisable: true })
|
||||
}
|
||||
} else {//新增数据
|
||||
let obj = {}, whiteList = {}, exchangeList = {}, couponList = {}
|
||||
let obj = {}, whiteList = {}, exchangeList = {}, couponList = {},couponWhiteList={}
|
||||
let sourceObj = {//模板数据结构
|
||||
land: model,
|
||||
product_list,
|
||||
|
|
@ -376,9 +387,11 @@ export default class edittemplate extends React.Component {
|
|||
whiteList = _.cloneDeep(sourceObj);
|
||||
exchangeList = _.cloneDeep(sourceObj);
|
||||
couponList = _.cloneDeep(sourcecouponObj);
|
||||
couponWhiteList = _.cloneDeep(sourcecouponObj);
|
||||
obj.exchangeList = exchangeList
|
||||
obj.whiteList = whiteList
|
||||
obj.couponList = couponList
|
||||
obj.couponWhiteList = couponWhiteList
|
||||
sessionStorage.setItem('editorConfig', JSON.stringify(obj))
|
||||
}
|
||||
}
|
||||
|
|
@ -656,6 +669,12 @@ export default class edittemplate extends React.Component {
|
|||
let couponData = editorData.couponList
|
||||
let { land, product_list, product_detail } = couponData;
|
||||
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() {
|
||||
|
|
@ -1242,6 +1261,7 @@ export default class edittemplate extends React.Component {
|
|||
landbgcolor={(c) => this.getlandbgcolor(c)}
|
||||
landftcolor={(c) => this.getlandftcolor(c)}
|
||||
setbanner={(e) => this.getLandingdata(e)}
|
||||
templateType={this.state.showType}
|
||||
/>
|
||||
) : this.state.activeNavStatus == 2 ? (
|
||||
<CouponGoodsListForm
|
||||
|
|
|
|||
Loading…
Reference in New Issue