diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/config.js b/src/pages/exchangepage/couponTemplate/goodDetail/config.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/preview.js b/src/pages/exchangepage/couponTemplate/goodDetail/preview.js deleted file mode 100644 index e69de29b..00000000 diff --git a/src/pages/exchangepage/couponTemplate/goodDetail/product/config.js b/src/pages/exchangepage/couponTemplate/goodDetail/product/config.js new file mode 100644 index 00000000..60aeb3cd --- /dev/null +++ b/src/pages/exchangepage/couponTemplate/goodDetail/product/config.js @@ -0,0 +1,223 @@ +import React from 'react'; +import { ImageUpload, ColorPicker, Notify, RadioGroup, RadioButton, Tooltip, Icon } from 'zent'; +import "@/assets/comm.css" +import Form from "@/components/form/main" +import Wangeditor from '@/pages/exchangepage/edittemplate/wangeditorCom.js' +import FormItem from "@/components/form-item/main" +import { uploadImg, handelResponse, addTheme, putMyTheme, putTheme, putSystemTemplate, addSystemTemplate } from "@/assets/api.js" +export default class edittemplate extends React.Component { + constructor(props) { + super(props) + this.state = { + model: { + font_color: "#ffffff", + button_color: "#FACD6A", + describe: { type: "", content: " ", bg_image: '' }, + } + } + } + //活动说明 + onactivityChange(e) { + let model1 = this.state.model; + model1.describe.type = e.target.value; + this.setState({ model: model1 }) + this.props.setdetailActive(e.target.value); + } + //悬浮富文本 + 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); + } + onUploadChange(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(""); + } + }; + + handleChange = (color) => { + let model1 = this.state.model; + model1.font_color = color; + this.setState({ + model: model1 + }); + this.props.setdetailbgc(color); + + } + handleChange1 = (color) => { + let model1 = this.state.model; + model1.button_color = color; + this.setState({ + model: model1 + }); + this.props.setdetailftc(color); + } + + onUploadError = (type, data) => { + if (type === 'overMaxAmount') { + Notify.error(`最多可上传 ${data.maxAmount} 张图片`); + } else if (type === 'overMaxSize') { + Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`); + } + }; + + + // 字体颜色 + fontcolor(cor) { + let models = this.state.model; + models.button_color = cor; + this.setState({ model: models }); + this.props.setdetailftc(cor); + } + // 背景颜色 + bgcolor(cor) { + let models = this.state.model; + models.font_color = cor; + this.setState({ model: models }); + this.props.setdetailbgc(cor); + } + onUpload = (file, report) => { + 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); + }); + + }; + hasItemFn(c) { + let model1 = this.state.model; + if (c == model1.describe.type) { + model1.describe.type = ''; + this.setState({ model: model1 }); + this.props.setdetailActive(''); + } + } + componentWillMount() { + let config = JSON.parse(sessionStorage.getItem('editorConfig')); + if (config && config.exchangeList && config.exchangeList.product_detail) { + this.setState({ model: config.exchangeList.product_detail }); + } + } + componentWillUnmount() { + let oldobj = JSON.parse(sessionStorage.getItem('editorConfig')); + if (oldobj && oldobj.exchangeList) { + let exchangeList = oldobj.exchangeList + exchangeList.product_detail = this.state.model; + oldobj.exchangeList = exchangeList; + } else { + let exchangeList = {} + exchangeList.product_detail = this.state.model; + oldobj.exchangeList = exchangeList; + } + sessionStorage.setItem('editorConfig', JSON.stringify(oldobj)); + } + + render() { + return ( +
+
+

商品详情页设置

+
+
+
+
样式
+ +
+ { this.bgcolor('#ffffff') }}> + { this.bgcolor('#000000') }}> +
+
+
+
+ +
+ { this.fontcolor('#ffffff') }}> + { this.fontcolor('#04C160') }}> + { this.fontcolor('#AE99D3') }}> + { this.fontcolor('#FACD6A') }}> + { this.fontcolor('#FE7962') }}> +
+
+
+ +
+ +
基础图层
+
+ + { 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.onUploadChange(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/goodDetail/product/preview.js b/src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js new file mode 100644 index 00000000..9d71a2f0 --- /dev/null +++ b/src/pages/exchangepage/couponTemplate/goodDetail/product/preview.js @@ -0,0 +1,30 @@ +import React from 'react'; +import "./main.less" +import "../../../assets/comm.css" +import './goodstemplate.less' +export default class edittemplate extends React.Component{ + constructor(props){ + super(props) + } + opendescFn(){ + this.props.opendesc(true) + } + render(){ + return( +
+ + +

+ +

+ { + this.props.detaildata.describe.bg_image&&this.props.detaildata.describe.type==1?:this.props.detaildata.describe.type==3?
:null + } + { + this.props.detaildata.describe.type==2?:null + } + +
+ ) + } +} \ No newline at end of file diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js index a940de0d..f79d5bf8 100644 --- a/src/pages/exchangepage/edittemplate/main.js +++ b/src/pages/exchangepage/edittemplate/main.js @@ -18,10 +18,11 @@ import Whitedetails from './whitedetails' //白名单详情页 import Reduce from './reduce' //商品详情页立减金 import ReduceConfig from './reduceConfig' //商品详情立减金页面 import SearchBarView from './couponConfig/searchBar' -import BottomBarView from './couponConfig/bottomBar' //商品详情立减金页面 +import BottomBarView from './couponConfig/bottomBar' // 优惠券 import CouponLandingForm from '../couponTemplate/landingPage/config/main' //优惠券落地页表单 import CouponGoodsListForm from '../couponTemplate/goodsPage/config/main' //优惠券商品列表页 +import CouponGoodsDetailForm from '../couponTemplate/goodDetail/product/config' //优惠券商品详情页 import CouponComLib from '../couponTemplate/goodsPage/componentLib/main' //优惠券组件库 // import import _ from 'lodash' @@ -1239,6 +1240,7 @@ export default class edittemplate extends React.Component { setarrayType={(c) => this.getarrayType(c)} /> ) : this.state.detailType == 1 ? ( + this.state.activeNavStatus == 1 ? this.getdetailEditorHtmlFn(c)} setdetailActive={(c) => this.getdetailActiveFn(c)} @@ -1247,8 +1249,8 @@ export default class edittemplate extends React.Component { }} setbottomImg={(c) => this.getbottomimgFn(c)} setdetailftc={(c) => this.getdetailfont_color(c)} - /> - ) : + />: + ) :this.state.activeNavStatus == 1?: } {this.state.preview_visible ? (