From 8cc7012a189f0650b03b22a05f3c0ef683c705cb Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Mon, 29 Aug 2022 10:21:28 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E5=8E=9F=E5=9E=8B?= =?UTF-8?q?=E8=B0=83=E6=95=B4=E5=85=91=E6=8D=A2=E7=A0=81=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../exchangecode/exchangecodeAdd/index.jsx | 43 +++++-- .../exchangecode/exchangecodeAdd/utils.js | 114 +++++++++--------- 2 files changed, 91 insertions(+), 66 deletions(-) diff --git a/src/pages/exchangecode/exchangecodeAdd/index.jsx b/src/pages/exchangecode/exchangecodeAdd/index.jsx index 0e95d4aa..a10f4c01 100644 --- a/src/pages/exchangecode/exchangecodeAdd/index.jsx +++ b/src/pages/exchangecode/exchangecodeAdd/index.jsx @@ -36,7 +36,7 @@ import "./index.less" import moment from "moment" import Grid from "@/components/gird/main.js" import { isSameDay } from "date-fns" -import { Column2, rulesInfo, codeInfo, state } from "./utils" +import { Column2, rulesInfo, codeInfo, init } from "./utils" const initArray = (targetNum) => { return Array.from({ length: targetNum }, (_, index) => index) } @@ -44,7 +44,7 @@ const initArray = (targetNum) => { export default class exchangeAdd extends React.Component { constructor(props) { super(props) - this.state = { ...state } + this.state = { ...init() } } componentDidMount() { @@ -1143,7 +1143,7 @@ export default class exchangeAdd extends React.Component { rules={codeInfo} ref='code_info' className='addform'> - + this.handleChange(e, "keyBatchId")} clearable @@ -1181,19 +1181,40 @@ export default class exchangeAdd extends React.Component { value={this.state.codeInfo.code_name} placeholder={"请输入兑换码名称"} labelWidth={"0px"} - maxLength={10} + maxLength={12} height={"36px"} width={"520px"} alignment={"left"} /> - -
{this.state.codeInfo.issued}
- - -
{this.state.codeInfo.stock}
- + {this.state.isState === 2 ? ( + <> + +
{this.state.codeInfo.issued}
+ + +
{this.state.codeInfo.stock}
+ + + ) : ( + + this.handleChange(e, "issued")} + onClearItem={() => this.handleChange("", "issued")} + value={this.state.codeInfo.issued} + placeholder={"请输入发放总量"} + labelWidth={"0px"} + maxLength={6} + countShow={false} + unit='条' + height={"36px"} + width={"520px"} + alignment={"left"} + /> + + )} + { + return { + uploading: false, //上传中 + model: { + //数据模型不可少 + product_id: "", + product_type: "1", + contract_price: "", + official_price: "", + cost_price: "", + quantity: "", + product_name: "", + show_url: "", + describe_url: "", + detail_url: "", + weight: "0" + }, + codeInfo: { + //数据模型不可少 + code_name: "", + issued: "", //发放总量 + describe: "", + date_time: "", + range: "", + stock: "", + planId: "", + keyBatchId: "" + }, + isload: false, + tempdata: [], + oldProduct: [], + deleteProduct: [], //审批删除的商品 + new_product: [], + cur_product: null, + productOption: [], + rankoptions: [], + rank: [], + recall_visible: false, + approvalLoading: false, + timer: 3, + paytype: 3, + reseller: null, + payment_direction: ["对私账户", "对公账户", "预付款扣除"], + isAudit: false, + approvalsStatus: false, + oldTable: [], + product_title: "新建商品", + plan_time: "", + direct_reseller_id: 0, + newGoodsBtnLoading: false, + tableLoading: false, + newGoldLoading: false, + addIsType: "", + isState: 0, + planSelectData: [] /* 营销计划数据 */, + keyBatchSelectData: [] /* 营销计划ID */ + } } From 685ad20e3abb2e444ec708276047c9536e910ecb Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Mon, 29 Aug 2022 10:54:56 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/login/login.less | 134 ++++++++++++++++++++++--------------- 1 file changed, 81 insertions(+), 53 deletions(-) diff --git a/src/pages/login/login.less b/src/pages/login/login.less index d8b107b9..f421e917 100644 --- a/src/pages/login/login.less +++ b/src/pages/login/login.less @@ -1,18 +1,22 @@ -.loginPage{ - width: 100%; - height: 100%; -background-color: #f5f9ff; -overflow: hidden; -.zent-form-reactive{ - width:60%!important; -} -.login-box .zent-input-wrapper.zent-input--size-normal, .login-box .zent-input{ - width: 100%!important; - border-radius: 4px; -} +.loginPage { + width: 100%; + height: 100%; + background-color: #f5f9ff; + overflow: hidden; + + .zent-form-reactive { + width: 60% !important; + } + + .login-box .zent-input-wrapper.zent-input--size-normal, + .login-box .zent-input { + width: 100% !important; + border-radius: 4px; + } } -.login-title{ + +.login-title { width: 400px; height: 40px; margin: 80px auto; @@ -20,111 +24,135 @@ overflow: hidden; align-items: center; justify-content: center; } -.login-title-label{ + +.login-title-label { font-size: 32px; } -.login-title-icon img{ + +.login-title-icon img { width: auto; height: 40px; padding-right: 20px; } -.login-box{ + +.login-box { margin: 0 auto; width: 520px; background-color: #fff; - box-sizing: "border-box"; + box-sizing: border-box; overflow: hidden; border-radius: 8px; - box-shadow: 0px 0px 20px rgba(0,60,179,0.12); + box-shadow: 0px 0px 5px rgba(0, 60, 179, 0.12); text-align: center; display: flex; justify-content: center; flex-wrap: wrap; align-items: center; - - .zent-input-wrapper.zent-input--size-normal,.zent-input{ + transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); + + &:hover { + box-shadow: 0px 0px 20px rgba(0, 60, 179, 0.12); + transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1) + } + + .zent-input-wrapper.zent-input--size-normal, + .zent-input { width: 268px !important; height: 40px !important; } - .zent-btn-disabled[data-zv="9.11.0"], .zent-btn-disabled[data-zv="9.11.0"][disabled]{ - background-color: #f7f7f7!important; - border:1px solid #e0e0e0!important; + + .zent-btn-disabled[data-zv="9.11.0"], + .zent-btn-disabled[data-zv="9.11.0"][disabled] { + background-color: #f7f7f7 !important; + border: 1px solid #e0e0e0 !important; } } -.loginBtn{ - width: 100%!important; + +.loginBtn { + width: 100% !important; width: 272px; height: 41px; line-height: 41px; color: #FFF; - background-color:#1e6fff; + background-color: #1e6fff; border: none; outline: none; border-radius: 2px; text-align: center; font-size: 17px; - text-align: center; + text-align: center; cursor: pointer; margin-bottom: 70px; margin-top: 5px; - .login-Btntxt{ - display: inline-block; - letter-spacing:50px; - text-indent: 50px; + + .login-Btntxt { + display: inline-block; + letter-spacing: 50px; + text-indent: 50px; } } -.box-title{ + +.box-title { width: 100%; height: 52px; - font-size:20px; + font-size: 20px; display: flex; align-items: center; justify-content: center; margin-bottom: 40px; - border-bottom: 1px solid rgba(44,114,255,0.1); + border-bottom: 1px solid rgba(44, 114, 255, 0.1); } -.box-title>div{ + +.box-title>div { width: 60%; height: 100%; display: flex; align-items: center; - justify-content:center; + justify-content: center; } -.box-title>div span{ + +.box-title>div span { cursor: pointer; height: 100%; display: flex; border-bottom: 2px solid transparent; align-items: center; - &.activeLogin{ - color: #1e6fff; - border-bottom: 2px solid #1e6fff; + + &.activeLogin { + color: #1e6fff; + border-bottom: 2px solid #1e6fff; } } -.yzmcodeIpt{ + +.yzmcodeIpt { height: 40px; - .zent-form-control[data-zv="9.11.0"]{ + + .zent-form-control[data-zv="9.11.0"] { float: left; } + margin-bottom: 30px; display: flex; } -.yzmcode{ + +.yzmcode { width: 38%; height: 40px; float: left; - .zent-btn{ - height: 100%!important; + + .zent-btn { + height: 100% !important; width: 100%; } } -.forget{ - text-align: right; - display: block; - margin-bottom: 10px; - margin-top: 30px; - color: #1e6fff; - cursor: pointer; - } \ No newline at end of file + +.forget { + text-align: right; + display: block; + margin-bottom: 10px; + margin-top: 30px; + color: #1e6fff; + cursor: pointer; +} \ No newline at end of file From dc2aa9e2f216cab3dd86dc8df2965e602a3d5bd9 Mon Sep 17 00:00:00 2001 From: wangsongsole Date: Mon, 29 Aug 2022 11:37:33 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dapp.css=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E9=94=99=E8=AF=AF?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.css | 40 +++++++++++++++++++++++++++++----------- 1 file changed, 29 insertions(+), 11 deletions(-) diff --git a/src/App.css b/src/App.css index 87ea30ff..c2e5fff9 100644 --- a/src/App.css +++ b/src/App.css @@ -13,22 +13,27 @@ .zent-grid-th[data-zv="9.11.0"] { background: #fff !important; } + .zent-grid-th[data-zv="9.11.0"], .zent-grid-td[data-zv="9.11.0"] { border-bottom-color: #f1f1f1 !important; } + .zent-swiper__dots-small[data-zv="9.11.0"] .zent-swiper__dots-item { height: 8px; width: 8px; margin: 12px 8px; } + /* 账号新增岗位 */ .zent-form-horizontal[data-zv="9.11.0"] .zent-form-label { margin-right: 58px !important; } + #accadd .zent-form-horizontal[data-zv="9.11.0"] .zent-form-label { flex-basis: 90px !important; } + #accadd .zent-form-horizontal[data-zv="9.11.0"] .zent-form-control-content { margin-left: 0; } @@ -36,16 +41,20 @@ .zent-form-error[data-zv="9.11.0"] { margin-left: 10px; } + .zent-radio-button[data-zv="9.11.0"]:first-child { border-radius: 6px 0 0 6px !important; } + .zent-radio-button[data-zv="9.11.0"]:last-child { border-radius: 0 6px 6px 0 !important; } + .zent-radio-button[data-zv="9.11.0"] { min-width: 90px !important; line-height: 25px !important; } + .zent-radio-button--checked[data-zv="9.11.0"] { font-weight: bold !important; } @@ -60,11 +69,13 @@ border-left: 0 !important; border-right: 0 !important; } + /* 表格样式 */ .zent-card[data-zv="9.11.0"] { border-radius: 6px !important; overflow: scroll !important; } + .zent-card-header[data-zv="9.11.0"] { background: #f9fafc; } @@ -75,17 +86,21 @@ flex-direction: column; justify-content: space-between; } + .zent-dialog-r-title-text { color: #333; font-weight: bold; } + .zent-zoom-enter-done .zent-btn { width: 20%; } + .zent-zoom-enter-done .btngroup { display: flex !important; justify-content: flex-end !important; } + .surebtnstyle { color: #2b66f2 !important; } @@ -98,6 +113,7 @@ flex-basis: 80px !important; justify-content: flex-start; } + /* .zent-switch::after{ content: '开'!important; margin-left: 10px; @@ -117,6 +133,7 @@ font-size: 16px; margin-right: 6px; } + .zent-form-label[data-zv="9.11.0"].zent-form-label-required::before { content: "" !important; display: inline-block; @@ -215,11 +232,11 @@ /* 日期整体样式 */ .zent-datepicker .zent-datepicker-trigger { border-radius: 0 !important; +} - &:hover { - border-color: #296bef !important; - background-color: #f7f9fc !important; - } +.zent-datepicker .zent-datepicker-trigger:hover { + border-color: #296bef !important; + background-color: #f7f9fc !important; } /* 下拉框统一样式 */ @@ -228,11 +245,12 @@ border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; - - &:hover { - background-color: #f7f9fc !important; - .zent-select-v2-search { - background-color: #f7f9fc !important; - } - } } + +.zent-select-v2:hover { + background-color: #f7f9fc !important; +} + +.zent-select-v2:hover .zent-select-v2-search { + background-color: #f7f9fc !important; +} \ No newline at end of file From d141c1a2dc5efce48700598a232b01220f75b9b0 Mon Sep 17 00:00:00 2001 From: Apple <> Date: Tue, 30 Aug 2022 15:12:05 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E7=BC=96=E7=A0=81=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E8=90=BD=E5=9C=B0=E9=A1=B5=E7=BC=96=E8=BE=91=E6=A8=A1=E5=9D=97?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=EF=BC=8C=E5=AE=8C=E6=88=90=E4=BC=98=E6=83=A0?= =?UTF-8?q?=E5=88=B8=E8=90=BD=E5=9C=B0=E9=A1=B5=E6=95=B0=E6=8D=AE=E5=A4=84?= =?UTF-8?q?=E7=90=86=EF=BC=8C=E9=85=8D=E7=BD=AE=E4=B8=8E=E9=A2=84=E8=A7=88?= =?UTF-8?q?=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../couponTemplate/goodDetail/config.js | 0 .../couponTemplate/goodDetail/preview.js | 0 .../goodsPage/componentLib/main.js | 26 ++ .../goodsPage/componentLib/main.less | 11 + .../couponTemplate/goodsPage/config/main.js | 284 ++++++++++++++ .../couponTemplate/goodsPage/preview/main.js | 0 .../couponTemplate/landingPage/config/main.js | 370 ++++++++++++++++++ .../landingPage/config/main.less | 0 src/pages/exchangepage/edittemplate/main.js | 68 +++- src/pages/exchangepage/edittemplate/main.less | 3 + 10 files changed, 757 insertions(+), 5 deletions(-) create mode 100644 src/pages/exchangepage/couponTemplate/goodDetail/config.js create mode 100644 src/pages/exchangepage/couponTemplate/goodDetail/preview.js create mode 100644 src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js create mode 100644 src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less create mode 100644 src/pages/exchangepage/couponTemplate/goodsPage/config/main.js create mode 100644 src/pages/exchangepage/couponTemplate/goodsPage/preview/main.js create mode 100644 src/pages/exchangepage/couponTemplate/landingPage/config/main.js create mode 100644 src/pages/exchangepage/couponTemplate/landingPage/config/main.less diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/config.js b/src/pages/exchangepage/couponTemplate/goodDetail/config.js new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/preview.js b/src/pages/exchangepage/couponTemplate/goodDetail/preview.js new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js new file mode 100644 index 00000000..25087ca1 --- /dev/null +++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js @@ -0,0 +1,26 @@ +import React from 'react'; +import "./main.less" +export default class componentLib extends React.Component { + constructor(props) { + super(props) + + } + componentWillMount(e) { + + }; + + //组件将要销毁阶段 + componentWillUnmount() { + + } + + + + render() { + return ( +
+

基础组件

+
+ ) + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less new file mode 100644 index 00000000..bbbe3f59 --- /dev/null +++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less @@ -0,0 +1,11 @@ +.componentLib{ + width: 45%; + height: 100%; + background: #fff; + position: absolute; + top: 0; + right:-48%; + h4{ + + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js new file mode 100644 index 00000000..2eb5ecdf --- /dev/null +++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/main.js @@ -0,0 +1,284 @@ +import React from 'react'; +import { ColorPicker, ImageUpload, Tooltip, Notify, RadioGroup, RadioButton, Icon } 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 Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js' +export default class edittemplate extends React.Component { + constructor(props) { + super(props) + this.state = { + model: { + top_image: "", + list: "2", + font_color: "#f1f2f3", + button_color: "#FACD6A", + describe: { type: "", content: "", bg_image: '' } + } + } + } + componentWillMount(e) { + let config = JSON.parse(sessionStorage.getItem('editorConfig')); + if (config && config.couponList && config.couponList.product_list) { + this.setState({ model: config.couponList.product_list }); + } + } + onListChange(e) { + let model = this.state.model; + model.list = e.target.value; + this.setState({ model: model }) + this.props.setarrayType(e.target.value); + } + + //活动说明 + onactivityChange(e) { + let model1 = this.state.model; + model1.describe.type = e.target.value; + this.setState({ model: model1 }) + this.props.setactiveType(e.target.value); + } + + hasItemFn(c) { + let model1 = this.state.model; + if (c == model1.describe.type) { + model1.describe.type = ''; + this.setState({ model: model1 }); + this.props.setactiveType(''); + } + } + + //顶部banner + onUploadChange(files) { + if (files.length > 0 && files[0].status == "success") { + let model = this.state.model; + model.top_image = files[0].src; + this.setState({ model: model }) + this.props.setbanner(files[0].src); + } else { + let model = this.state.model; + model.top_image = ''; + this.setState({ model: model }) + this.props.setbanner(""); + } + }; + + //悬浮富文本 + getsusEditext(c) { + let model1 = this.state.model; + model1.describe.content = c; + this.setState({ model: model1 }); + this.props.seteditorHtml(c); + } + //富文本 + getEditext(c) { + let model1 = this.state.model; + model1.describe.content = c; + this.setState({ model: model1 }); + this.props.seteditorHtml(c); + } + + //底部描述图 + onUploadChange2(files) { + if (files.length > 0 && files[0].status == "success") { + let model1 = this.state.model; + model1.describe.bg_image = files[0].src; + this.setState({ model: model1 }) + this.props.setbottomImg(files[0].src); + } else { + let model1 = this.state.model; + model1.describe.bg_image = ''; + this.setState({ model: model1 }) + this.props.setbottomImg(""); + } + }; + + + + onUploadError = (type, data) => { + if (type === 'overMaxAmount') { + Notify.error(`最多可上传 ${data.maxAmount} 张图片`); + } else if (type === 'overMaxSize') { + Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); + } + }; + handleChange = (color) => { + let model1 = this.state.model; + model1.font_color = color; + this.setState({ + model: model1 + }); + this.props.setButtonbgcolor(color); + + } + handleChange1 = (color) => { + let model1 = this.state.model; + model1.button_color = color; + this.setState({ + model: model1 + }); + this.props.setButtoncolor(color); + } + + // 字体颜色 + fontcolor(cor) { + let models = this.state.model; + models.button_color = cor; + this.setState({ model: models }); + this.props.setButtoncolor(cor); + } + // 背景颜色 + bgcolor(cor) { + let models = this.state.model; + models.font_color = cor; + this.setState({ model: models }); + this.props.setButtonbgcolor(cor); + } + onUpload = (file, report) => { + let self = this; + console.log('上传头像', file); + return new Promise((resolve, reject) => { + let path = "" + let formdata = new FormData(); + formdata.append("file", file) + formdata.append("path", "common_image") + uploadImg(formdata).then((res) => { + handelResponse(res, (req, msg) => { + path = req.path; + + }, (err) => { + reject(); + }) + }); + + let count = 0; + const update = () => { + if (path) { + + resolve( + path + ); + + } + else { + + if (count < 100) { + count += 2; + report(count); + setTimeout(update, 500); + console.log("上传中") + } + else { + + reject(); + } + } + + + }; + setTimeout(update, 500); + }); + + }; + componentWillUnmount() { + let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); + if (oldobj && oldobj.couponList) { + let couponList = oldobj.couponList + couponList.product_list = this.state.model; + oldobj.couponList = couponList; + } else { + oldobj = {} + let couponList = {} + couponList.product_list = this.state.model; + oldobj.couponList = couponList; + } + sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); + } + render() { + return ( +
+
+
样式
+
+ + { this.onListChange(e) }} value={this.state.model.list}> + 轮播 + 列表 + 矩阵 + + +
+ { + this.state.model.list == 2 ? +
+ { this.bgcolor('#ffffff') }}> + { this.bgcolor('#000000') }}> +
+
+
+ : null + } + { + this.state.model.list == 2 ? +
+ { this.fontcolor('#ffffff') }}> + { this.fontcolor('#04C160') }}> + { this.fontcolor('#AE99D3') }}> + { this.fontcolor('#FACD6A') }}> + { this.fontcolor('#FE7962') }}> +
+ +
+
+ : null + } +
基础图层
+ + { this.onUploadChange(e) }} + onUpload={this.onUpload} + defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null} + onError={this.onUploadError} + + /> + + +
+ + { this.onactivityChange(e) }} value={this.state.model.describe.type}> + this.hasItemFn(1)} value={"1"}>图片 + this.hasItemFn(2)} value={"2"}>悬浮 + this.hasItemFn(3)} value={"3"}>富文本 + + + + + +
+ { + this.state.model.describe.type == 1 ? + { this.onUploadChange2(e) }} + onUpload={this.onUpload} + onError={this.onUploadError} + defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null} + /> + : this.state.model.describe.type == 2 ? this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? this.getEditext(c)} /> : null + } + +
+ ) + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/preview/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/preview/main.js new file mode 100644 index 00000000..e69de29b diff --git a/src/pages/exchangepage/couponTemplate/landingPage/config/main.js b/src/pages/exchangepage/couponTemplate/landingPage/config/main.js new file mode 100644 index 00000000..7960502b --- /dev/null +++ b/src/pages/exchangepage/couponTemplate/landingPage/config/main.js @@ -0,0 +1,370 @@ +import React from 'react'; +import { Button, Select, ImageUpload, ColorPicker, NumberInput } from 'zent'; +import "./main.less" +import "../../../edittemplate/goodstemplate.less" +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 { uploadImg, handelResponse, getThemeType } from "@/assets/api.js" +import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js' +export default class edittemplate extends React.Component { + constructor(props) { + super(props) + this.state = { + isSystemModel: false, + mouldWay: [], + model: { + title: "落地页标题12", + top_image: "", + middle_image: "", + describe: { type: "", content: "", bg_image: '' }, + bg_color: "#EEEEEE", + font_color: "#000000", + sort: 1, + type_id: { key: 1, text: '通用' } + }, + } + } + + componentWillMount(e) { + 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; + this.setState({ model: data }); + } else { + + } + getThemeType().then(res => { + handelResponse(res, (req, msg) => { + let typeListSource = res.data.map(it => { + return { key: it.id, text: it.name } + }); + self.setState({ mouldWay: typeListSource }); + }, (err) => { + + }) + }).catch(err => { + }); + } + handleChange = (color) => { + let model1 = this.state.model; + model1.bg_color = color; + this.setState({ + model: model1 + }); + this.props.landbgcolor(color); + + } + handleChange1 = (color) => { + let model1 = this.state.model; + model1.font_color = color; + this.setState({ + model: model1 + }); + this.props.landftcolor(color); + } + onactivityChange(e) { + let active = this.state.model; + active.describe.type = e.target.value; + if (active.describe.bg_image) { + active.describe.bg_image = ""; + } + this.setState({ model: active }) + + this.props.setbanner(this.state.model); + } + hasItemFn(c) { + let model1 = this.state.model; + if (c == model1.describe.type) { + model1.describe.type = ''; + model1.describe.type = 0; + this.setState({ model: model1 }); + this.props.setbanner(this.state.model); + } + } + onmouldChange(c) { + + let model1 = this.state.model; + model1.type_id = c; + this.setState({ model: model1 }); + this.props.setbanner(model1); + } + //上传顶部banner + onUploadChange(files) { + if (files.length > 0 && files[0].status == "success") { + let model = this.state.model; + model.top_image = files[0].src; + this.setState({ model: model }) + this.props.setbanner(model); + } else { + let model = this.state.model; + model.top_image = ''; + this.setState({ model: model }) + this.props.setbanner(model); + } + }; + + //上传输入框 + onUploadChange1(files) { + if (files.length > 0 && files[0].status == "success") { + let model = this.state.model; + model.middle_image = files[0].src; + this.setState({ model: model }) + this.props.setbanner(model); + } else { + let model = this.state.model; + model.middle_image = ''; + this.setState({ model: model }) + this.props.setbanner(model); + } + }; + + //上传使用说明 + onUploadChange2(files) { + if (files.length > 0 && files[0].status == "success") { + let model = this.state.model; + model.describe.bg_image = files[0].src; + this.setState({ model: model }) + this.props.setbanner(model); + } else { + let model = this.state.model; + model.describe.bg_image = ""; + this.setState({ model: model }) + this.props.setbanner(model); + } + + }; + onUploadError = (type, data) => { + if (type === 'overMaxAmount') { + Notify.error(`最多可上传 ${data.maxAmount} 张图片`); + } else if (type === 'overMaxSize') { + Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); + } + }; + sortFn(c) { + let model1 = this.state.model; + model1.sort = c; + this.setState({ model: model1 }); + this.props.setbanner(model1); + } + getEditext(c) { + let model1 = this.state.model; + model1.describe.content = c; + this.setState({ model: model1 }); + this.props.setbanner(model1); + } + + + // 字体颜色 + fontcolor(cor) { + let model1 = this.state.model; + model1.font_color = cor; + this.setState({ model: model1 }); + this.props.landftcolor(cor); + } + // 背景颜色 + bgcolor(cor) { + let model1 = this.state.model; + model1.bg_color = cor; + this.setState({ model: model1 }); + this.props.landbgcolor(cor); + } + onUpload = (file, report) => { + let self = this; + return new Promise((resolve, reject) => { + let path = "" + let formdata = new FormData(); + formdata.append("file", file) + formdata.append("path", "common_image") + uploadImg(formdata).then((res) => { + handelResponse(res, (req, msg) => { + path = req.path; + + }, (err) => { + reject(); + }) + }); + + let count = 0; + const update = () => { + if (path) { + + resolve( + path + ); + + } + else { + + if (count < 100) { + count += 2; + report(count); + setTimeout(update, 500); + console.log("上传中") + } + else { + + reject(); + } + } + + + }; + setTimeout(update, 500); + }); + + }; + + //组件将要销毁阶段 + componentWillUnmount() { + let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); + if (oldobj && oldobj.couponList) { + let couponList = oldobj.couponList + couponList.land = this.state.model; + oldobj.couponList = couponList; + } else { + oldobj = {} + let couponList = {} + couponList.land = this.state.model; + oldobj.couponList = couponList; + } + sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); + } + + + + render() { + return ( +
+
基础设置
+ +
+ + { + 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.state.isSystemModel ? ( + + this.sortFn(c)} value={this.state.model.sort} placeholder="请输入数字" integer={true} max={999} /> + ) : null + } + { + this.state.isSystemModel ? ( + +