编辑器基础组件库配置静态页面编写完毕

This commit is contained in:
许红梅 2022-09-02 10:43:38 +08:00
parent 3c4beb4c8e
commit 1d351102da
5 changed files with 43 additions and 29 deletions

View File

@ -15,7 +15,7 @@ export default class edittemplate extends React.Component {
model: { model: {
top_image: "", top_image: "",
list: "2", list: "2",
font_color: "#f1f2f3", font_color: "#000000",
button_color: "#FACD6A", button_color: "#FACD6A",
describe: { type: "", content: "", bg_image: '' }, describe: { type: "", content: "", bg_image: '' },
checkedLarge: false checkedLarge: false
@ -379,7 +379,7 @@ export default class edittemplate extends React.Component {
<div className="color-control"> <div className="color-control">
<FormItem labelname="选中文字颜色:" prop="bg_color" id="bg_color" labelwidth="140px"> <FormItem labelname="选中文字颜色:" prop="bg_color" id="bg_color" labelwidth="140px">
<div className="colorItemfont dflexajce"> <div className="colorItemfont dflexajce">
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></span> <span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#000000' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#000000') }}></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>

View File

@ -104,7 +104,7 @@ export default class edittemplate extends React.Component {
if (type === 'overMaxAmount') { if (type === 'overMaxAmount') {
Notify.error(`最多可上传 ${data.maxAmount} 张图片`); Notify.error(`最多可上传 ${data.maxAmount} 张图片`);
} else if (type === 'overMaxSize') { } else if (type === 'overMaxSize') {
Notify.error(`图片大小超过 ${data.formattedMaxSize}`); Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
} }
}; };
handleChange = (color) => { handleChange = (color) => {

View File

@ -211,7 +211,7 @@ export default class edittemplate extends React.Component {
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
</div> </div>
<FormItem required={false} labelname="活动说明:" prop="bottom" id="bottom" labelwidth="100px"> <FormItem required={false} labelname="文字格式:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}> <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton> <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton> <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton>

View File

@ -203,18 +203,6 @@ export default class edittemplate extends React.Component {
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}> <div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
<Form model={this.state.model} ref="form1"> <Form model={this.state.model} ref="form1">
<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 == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></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>
</FormItem>
<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; let model2 = this.state.model;
@ -229,6 +217,33 @@ export default class edittemplate extends React.Component {
}} }}
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} /> value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem> </FormItem>
<FormItem required={false} labelname="文字格式:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居右</RadioButton>
</RadioGroup>
</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 == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></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>
</FormItem>
<FormItem required={false} labelname="文字大小:" prop="bottom" id="bottom" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>A-</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>A</RadioButton>
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>A+</RadioButton>
</RadioGroup>
</FormItem>
</Form> </Form>
</div> </div>
</div> </div>

View File

@ -847,13 +847,12 @@ export default class edittemplate extends React.Component {
</div> </div>
{/* 组件库 */} {/* 组件库 */}
{ {
this.state.showType==2? <CouponComLib componentName={(c)=>this.componentName(c)}/>:null this.state.showType==2&&this.state.activeNavStatus==2? <CouponComLib componentName={(c)=>this.componentName(c)}/>:null
} }
{/* this.state.showType==2&&this.state.activeNavStatus==2? */}
</div> </div>
<div className='xj-wrapper' style={{ 'zIndex': '1' }}> <div className='xj-wrapper' style={{ 'zIndex': '1' }}>
<div className={this.state.showType==2?'xj-center-small':'xj-center'}> <div className={ this.state.showType==2&&this.state.activeNavStatus==2?'xj-center-small':'xj-center'}>
{this.state.activeNavStatus == 1 ? ( {this.state.activeNavStatus == 1 ? (
<div> <div>
<img <img