From 54522ad248f3a6efed31cb81bf78f53c151c8e72 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com> Date: Thu, 1 Sep 2022 17:12:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E4=BC=98=E6=83=A0=E5=88=B8?= =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E7=BC=96=E8=BE=91=E5=99=A8=E5=BA=95?= =?UTF-8?q?=E9=83=A8=E6=A0=8F=E9=85=8D=E7=BD=AE=E9=9D=99=E6=80=81=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2=E7=BC=96=E5=86=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../goodsPage/config/bottomBar.js | 269 +++++++++++++++--- .../couponTemplate/goodsPage/config/comm.less | 47 +++ src/pages/exchangepage/edittemplate/main.less | 2 +- 3 files changed, 274 insertions(+), 44 deletions(-) create mode 100644 src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js index bcfdf969..674ac056 100644 --- a/src/pages/exchangepage/couponTemplate/goodsPage/config/bottomBar.js +++ b/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 { } }; - //悬浮富文本 - 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 ( -
+

底部栏设置

@@ -204,46 +204,229 @@ export default class edittemplate extends React.Component {
- + { this.onactivityChange(e) }} value={this.state.model.describe.type}> - this.hasItemFn(1)} value={"1"}>圆形 - this.hasItemFn(2)} value={"2"}>方形 + this.hasItemFn(1)} value={"1"}>默认 + this.hasItemFn(2)} value={"2"}>自定义
- - { this.onactivityChange(e) }} value={this.state.model.describe.type}> - this.hasItemFn(1)} value={"1"}>居左 - this.hasItemFn(2)} value={"2"}>居中 - this.hasItemFn(2)} value={"2"}>居右 - - - -
- { this.fontcolor('#f0f') }}> - { this.fontcolor('#04C160') }}> - { this.fontcolor('#AE99D3') }}> - { this.fontcolor('#FACD6A') }}> - { this.fontcolor('#FE7962') }}> -
- + +

（建议上传宽高为100*100像素的.png图片）

+ +
+
+ 首页 +

显示 +

+ +
+ { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> + { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> +
+ + + + + { + 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'} /> + +
+
+
+ 订单 +

显示 +

+
+ +
+ { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> + { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> +
+ + + + + { + 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'} /> + +
+
+
+ 我的券 +

显示 +

+
+ +
+ { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> + { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> +
+ + + + + { + 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'} /> + +
+
+ +
+ { this.fontcolor('#f0f') }}> + { this.fontcolor('#04C160') }}> + { this.fontcolor('#AE99D3') }}> + { this.fontcolor('#FACD6A') }}> + { this.fontcolor('#FE7962') }}> +
+ +
+
+ +
+
+ +
+ { this.fontcolor('#f0f') }}> + { this.fontcolor('#04C160') }}> + { this.fontcolor('#AE99D3') }}> + { this.fontcolor('#FACD6A') }}> + { this.fontcolor('#FE7962') }}> +
+ +
+
+ +
+ +

（建议上传宽高为750*100像素的图片）

+ +
+ + +
+ { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + /> +
+ + +
- - - { - 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'} /> -
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less b/src/pages/exchangepage/couponTemplate/goodsPage/config/comm.less new file mode 100644 index 00000000..e2662347 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/main.less b/src/pages/exchangepage/edittemplate/main.less index 2971dab9..1e1bc35f 100644 --- a/src/pages/exchangepage/edittemplate/main.less +++ b/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;