完成优惠券落地页编辑器底部栏配置静态页面编写
This commit is contained in:
许红梅
parent
f052646034
commit
54522ad248
|
|
@ -1,10 +1,13 @@
|
|||
import React from 'react';
|
||||
import { ColorPicker, Notify, RadioGroup, RadioButton } from 'zent';
|
||||
import { ColorPicker, Notify, RadioGroup, RadioButton, Switch, ImageUpload } from 'zent';
|
||||
import "@/assets/comm.css"
|
||||
import Form from "@/components/form/main"
|
||||
import FormItem from "@/components/form-item/main"
|
||||
import { uploadImg, handelResponse } from "@/assets/api.js"
|
||||
import Ipt from "@/components/input/main"
|
||||
import '@/assets/comm.css'
|
||||
import './comm.less'
|
||||
|
||||
export default class edittemplate extends React.Component {
|
||||
constructor(props) {
|
||||
super(props)
|
||||
|
|
@ -14,7 +17,8 @@ export default class edittemplate extends React.Component {
|
|||
list: "2",
|
||||
font_color: "#f1f2f3",
|
||||
button_color: "#FACD6A",
|
||||
describe: { type: "", content: "", bg_image: '' }
|
||||
describe: { type: "", content: "", bg_image: '' },
|
||||
checkedLarge: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -63,12 +67,8 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
};
|
||||
|
||||
//悬浮富文本
|
||||
getsusEditext(c) {
|
||||
let model1 = this.state.model;
|
||||
model1.describe.content = c;
|
||||
this.setState({ model: model1 });
|
||||
this.props.seteditorHtml(c);
|
||||
handleChangeLarge = checked => {
|
||||
this.setState({ checkedLarge: checked });
|
||||
}
|
||||
//富文本
|
||||
getEditext(c) {
|
||||
|
|
@ -196,7 +196,7 @@ export default class edittemplate extends React.Component {
|
|||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="bottomBar">
|
||||
<div className='control page-title-control'>
|
||||
<h1 style={{ fontSize: '16px' }}>底部栏设置</h1>
|
||||
</div>
|
||||
|
|
@ -204,33 +204,56 @@ export default class edittemplate extends React.Component {
|
|||
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<div className="activeTip">
|
||||
<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}>
|
||||
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>圆形</RadioButton>
|
||||
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>方形</RadioButton>
|
||||
<RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>默认</RadioButton>
|
||||
<RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>自定义</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
</div>
|
||||
<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 required={false} labelname="上传图标:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<p className="tips">（建议上传宽高为<span>100*100</span>像素的<span>.png</span>图片）</p>
|
||||
</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 className="component-item">
|
||||
<div className="v-editItem">
|
||||
<span>首页</span>
|
||||
<p className="dflexacsa"><span className="showType">显示</span>
|
||||
<Switch
|
||||
checked={this.state.checkedLarge}
|
||||
onChange={this.handleChangeLarge}
|
||||
/></p>
|
||||
</div>
|
||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<div className="dflexacsa">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="默认图"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="选中图"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
<FormItem labelname="提示文字:" prop="title" id="title" labelwidth="100px">
|
||||
|
||||
<FormItem labelname="导航文本:" prop="title" id="title" labelwidth="100px">
|
||||
<Ipt onChange={(e) => {
|
||||
let model2 = this.state.model;
|
||||
model2.title = e;
|
||||
|
|
@ -244,6 +267,166 @@ export default class edittemplate extends React.Component {
|
|||
}}
|
||||
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
|
||||
</FormItem>
|
||||
</div>
|
||||
<div className="component-item">
|
||||
<div className="v-editItem">
|
||||
<span>订单</span>
|
||||
<p className="dflexacsa"><span className="showType">显示</span>
|
||||
<Switch
|
||||
checked={this.state.checkedLarge}
|
||||
onChange={this.handleChangeLarge}
|
||||
/></p>
|
||||
</div>
|
||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<div className="dflexacsa">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="默认图"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="选中图"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
|
||||
<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) => {
|
||||
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>
|
||||
</div>
|
||||
<div className="component-item">
|
||||
<div className="v-editItem">
|
||||
<span>我的券</span>
|
||||
<p className="dflexacsa"><span className="showType">显示</span>
|
||||
<Switch
|
||||
checked={this.state.checkedLarge}
|
||||
onChange={this.handleChangeLarge}
|
||||
/></p>
|
||||
</div>
|
||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<div className="dflexacsa">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="默认图"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="选中图"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
|
||||
<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) => {
|
||||
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>
|
||||
</div>
|
||||
<div className="color-control">
|
||||
<FormItem labelname="选中文字颜色:" prop="bg_color" id="bg_color" labelwidth="140px">
|
||||
<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 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>
|
||||
</div>
|
||||
<div className="color-control">
|
||||
<FormItem labelname="默认文字颜色:" prop="bg_color" id="bg_color" labelwidth="140px">
|
||||
<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 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>
|
||||
</div>
|
||||
<FormItem required={false} labelname="背景图:" prop="bottom" id="bottom" labelwidth="100px">
|
||||
<p className="tips">（建议上传宽高为<span>750*100</span>像素的图片）</p>
|
||||
</FormItem>
|
||||
<div className="component-item backpic-item">
|
||||
|
||||
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
|
||||
<div className="dflexacsa">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo choice-up-image"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
|
||||
onError={this.onUploadError}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,47 @@
|
|||
.component-item{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px 8px;
|
||||
margin-bottom: 8px;
|
||||
background: #f5faff;
|
||||
}
|
||||
.component-item .v-editItem{
|
||||
font-size: 14px;
|
||||
display: flex;
|
||||
justify-content:space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.component-item .v-editItem>span{
|
||||
color: #999;
|
||||
}
|
||||
.component-item .showType{
|
||||
margin-right: 10px;
|
||||
color: #333!important;
|
||||
}
|
||||
.bottomBar .form-compontent{
|
||||
padding-top:0;
|
||||
.choice-up-image{
|
||||
margin-right: 15px;
|
||||
.zent-image-upload-tips[data-zv="9.12.7"]{
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.colorItemfont{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
.tips{
|
||||
color: #999;
|
||||
span{
|
||||
color:#f00;
|
||||
}
|
||||
}
|
||||
.color-control{
|
||||
margin-top: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.backpic-item{
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
|
@ -156,7 +156,7 @@
|
|||
overflow-y: auto;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 490px;
|
||||
width: 450px;
|
||||
.zent-image-upload-item-delete[data-zv="9.11.0"] {
|
||||
display: block;
|
||||
top: -15px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue