完成优惠券落地页编辑器底部栏配置静态页面编写

src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js

@@ -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 {
     }
   };
 
-  //悬浮富文本
+  handleChangeLarge = checked => {
-  getsusEditext(c) {
+    this.setState({ checkedLarge: checked });
-    let model1 = this.state.model;
-    model1.describe.content = c;
-    this.setState({ model: model1 });
-    this.props.seteditorHtml(c);
   }
   //富文本
   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,46 +204,229 @@ 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(1)} value={"1"}>默认</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>方形</RadioButton>
+                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>自定义</RadioButton>
                 </RadioGroup>
               </FormItem>
             </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}>
+              <p className="tips">（建议上传宽高为<span>100*100</span>像素的<span>.png</span>图片）</p>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>居左</RadioButton>
+            </FormItem>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居中</RadioButton>
+            <div className="component-item">
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>居右</RadioButton>
+              <div className="v-editItem">
-                </RadioGroup>
+                <span>首页</span>
-              </FormItem>
+                <p className="dflexacsa"><span className="showType">显示</span>
-              <FormItem labelname="框体颜色:" prop="bg_color" id="bg_color" labelwidth="80px">
+                  <Switch
-            <div className="colorItemfont dfleac">
+                    checked={this.state.checkedLarge}
-              <span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#f0f' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#f0f') }}></span>
+                    onChange={this.handleChangeLarge}
-              <span className={this.state.model.font_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
+                  /></p>
-              <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>
+              <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="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>
-          </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>
           </Form>
         </div>
       </div>

src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less

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

src/pages/exchangepage/edittemplate/main.less

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