优惠券商品详情页页面编写10%
This commit is contained in:
许红梅
parent
6c764cb521
commit
dd738fffbd
|
|
@ -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 (
|
||||
<div>
|
||||
<div className='control page-title-control'>
|
||||
<h1 style={{ fontSize: '16px' }}>商品详情页设置</h1>
|
||||
</div>
|
||||
<div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
|
||||
<Form model={this.state.model} ref="form1">
|
||||
<div style={{ fontWeight: 'bold', marginBottom: '20px' }}>样式</div>
|
||||
<FormItem labelname="字体颜色:" prop="button_color" id="button_color" labelwidth="80px">
|
||||
<div className="colorItembg dfleac" >
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.font_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.bgcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.font_color == '#000000' ? "activecicle cicle cicle2" : "cicle cicle2"} onClick={() => { this.bgcolor('#000000') }}></span>
|
||||
<div className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.font_color} onChange={this.handleChange} /></div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem labelname="按钮颜色:" prop="font_color" id="font_color" labelwidth="80px">
|
||||
<div className="colorItemfont dfleac">
|
||||
<span style={{ border: '1px solid #f1f2f3' }} className={this.state.model.button_color == '#ffffff' ? "cicle activecicle" : "cicle"} onClick={() => { this.fontcolor('#ffffff') }}></span>
|
||||
<span className={this.state.model.button_color == '#04C160' ? "activecicle cicle cicle6" : "cicle cicle6"} onClick={() => { this.fontcolor('#04C160') }}></span>
|
||||
<span className={this.state.model.button_color == '#AE99D3' ? "activecicle cicle cicle3" : "cicle cicle3"} onClick={() => { this.fontcolor('#AE99D3') }}></span>
|
||||
<span className={this.state.model.button_color == '#FACD6A' ? "activecicle cicle cicle4" : "cicle cicle4"} onClick={() => { this.fontcolor('#FACD6A') }}></span>
|
||||
<span className={this.state.model.button_color == '#FE7962' ? "activecicle cicle cicle5" : "cicle cicle5"} onClick={() => { this.fontcolor('#FE7962') }}></span>
|
||||
<div className="selfset" >
|
||||
<ColorPicker className="setbgColor" color={this.state.model.button_color} onChange={this.handleChange1} /></div>
|
||||
</div>
|
||||
|
||||
</FormItem>
|
||||
|
||||
<div style={{ marginTop: '20px', fontWeight: 'bold' }}>基础图层</div>
|
||||
<div className="activeTip">
|
||||
<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(3)} value={"3"}>富文本</RadioButton>
|
||||
</RadioGroup>
|
||||
</FormItem>
|
||||
<Tooltip trigger="hover" position="top-left" title="非必选项，圆形组件悬浮，适用于长文本">
|
||||
<Icon type="help-circle" className="imgTip" />
|
||||
</Tooltip>
|
||||
</div>
|
||||
{
|
||||
this.state.model.describe.type == 1 ? <FormItem required={false} labelname=" " prop="bottom" id="bottom" labelwidth="100px">
|
||||
<ImageUpload
|
||||
className="zent-image-upload-demo"
|
||||
maxSize={5 * 1024 * 1024}
|
||||
maxAmount={1}
|
||||
multiple
|
||||
sortable
|
||||
tips="单张图片不超过 5M"
|
||||
onChange={(e) => { this.onUploadChange(e) }}
|
||||
onUpload={this.onUpload}
|
||||
onError={this.onUploadError}
|
||||
defaultFileList={this.state.model.describe.bg_image ? [{ 'src': this.state.model.describe.bg_image }] : null}
|
||||
/>
|
||||
</FormItem> : this.state.model.describe.type == 2 ? <Wangeditor pageType="detailsuseditor" setEdittext={c => this.getsusEditext(c)} /> : this.state.model.describe.type == 3 ? <Wangeditor pageType="detaileditor" setEdittext={c => this.getEditext(c)} /> : null
|
||||
}
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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(
|
||||
<div className="editor-main detailstemplate">
|
||||
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn"/>
|
||||
<img className="topBanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailtop.png'}/>
|
||||
<p className="splitLine"></p>
|
||||
<img className="iptbg" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/detailipt.png'}/>
|
||||
<p className="splitLine"></p>
|
||||
{
|
||||
this.props.detaildata.describe.bg_image&&this.props.detaildata.describe.type==1?<img className="detail_bottomImg" src={this.props.detaildata.describe.bg_image}/>:this.props.detaildata.describe.type==3?<div className="bottomactiveTip" dangerouslySetInnerHTML = {{ __html:this.props.detaildata.describe.content}}></div>:null
|
||||
}
|
||||
{
|
||||
this.props.detaildata.describe.type==2?<img className="susactive_tip" onClick={this.opendescFn.bind(this)} src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/acticeTextTip.png'}/>:null
|
||||
}
|
||||
<button className="exchangeBtn" style={{background:this.props.detaildata.button_color,color:this.props.detaildata.font_color}}>立即兑换</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
@ -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 ?
|
||||
<DetailsPage
|
||||
seteditorHtml={(c) => 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)}
|
||||
/>
|
||||
) : <ReduceConfig />
|
||||
/>:<CouponGoodsDetailForm/>
|
||||
) :this.state.activeNavStatus == 1?<ReduceConfig />:<CouponGoodsDetailForm/>
|
||||
}
|
||||
{this.state.preview_visible ? (
|
||||
<PreviewEffect previewData={this.state.previewData} showType={this.state.showType} onCloseFn={this.onClose.bind(this)} />
|
||||
|
|
|
|||
Loading…
Reference in New Issue