HandOver-liuwu
/
frontend
mirror of https://codeup.aliyun.com/lsxd/marketing/frontend.git
4
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

完成组件库图片配置与预览效果联动

This commit is contained in:
许红梅 2022-09-02 13:35:50 +08:00
parent 1cfc91505c
commit fa4d0b940b
6 changed files with 78 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
View File

@ -40,7 +40,7 @@ export default class componentLib extends React.Component {
render() {
return (
<div className="componentLib">
<h4>基础组件</h4>
<h4 onClick={()=>this.propcomponentName({name:''})}>基础组件</h4>
<ul>
{
comPonentList.map(item=>{

1
src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less
View File

@ -11,6 +11,7 @@
h4 {
padding: 15px 0;
cursor: pointer;
}
ul {

173
src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
View File

@ -1,95 +1,42 @@
import React from 'react';
import { ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
import "@/assets/comm.css"
import Bus from '@/assets/eventBus.js'
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 _ from "lodash";
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: '' }
}
img:'',
jumpType:'0',//0不跳转 1跳转
jumpUrl:''
}
}
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('');
let {img,jumpType,jumpUrl}=config.couponList.product_list.picture;
this.setState({ img,jumpType,jumpUrl });
}
}
//顶部banner
//跳转链接
onjumpChange(e) {
this.setState({ jumpType: e.target.value })
}
//图片
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);
this.setState({ img: files[0].src })
Bus.emit('picture', 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("");
this.setState({ img: '' })
Bus.emit('picture', '')
}
};
@ -102,41 +49,9 @@ export default class edittemplate extends React.Component {
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();
@ -169,40 +84,32 @@ export default class edittemplate extends React.Component {
console.log("上传中")
}
else {
reject();
}
}
};
setTimeout(update, 500);
});
};
componentWillUnmount() {
console.log(96);
let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
if (oldobj && oldobj.couponList) {
let couponList = oldobj.couponList
couponList.product_list = this.state.model;
let couponList = oldobj.couponList;
couponList.product_list.picture = _.cloneDeep(this.state);
console.log(100,couponList);
oldobj.couponList = couponList;
} else {
oldobj = {}
let couponList = {}
couponList.product_list = this.state.model;
oldobj.couponList = couponList;
}
sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
}
render() {
console.log(105,this.state);
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">
<Form model={this.state} ref="form1">
<FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
<ImageUpload
className="zent-image-upload-demo"
@ -213,32 +120,30 @@ export default class edittemplate extends React.Component {
tips="单张图片不超过 5M"
onChange={(e) => { this.onUploadChange(e) }}
onUpload={this.onUpload}
defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
defaultFileList={this.state.img ? [{ 'src': this.state.img }] : null}
onError={this.onUploadError}
/>
</FormItem>
<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>
<FormItem required={false} labelname="跳转类型:" labelwidth="100px">
<RadioGroup onChange={(e) => { this.onjumpChange(e) }} value={this.state.jumpType}>
<RadioButton value={"0"}>不跳转</RadioButton>
<RadioButton value={"1"}>链接</RadioButton>
</RadioGroup>
</FormItem>
</div>
<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 })
{
this.state.jumpType==1? <FormItem labelname="跳转链接:" labelwidth="100px">
<Ipt onChange={(e) => {
this.setState({ jumpUrl: e })
}}
value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>
onClearItem={(e) => {
this.setState({ jumpUrl: '' })
}}
value={this.state.jumpUrl} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
</FormItem>:null
}
</Form>
</div>
</div>

3
src/pages/exchangepage/edittemplate/goodstemplate.js
View File

@ -15,6 +15,9 @@ export default class edittemplate extends React.Component {
<img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
{
!this.props.goodsdata.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={this.props.goodsdata.top_image} />
}
{
this.props.goodsdata.picture? <img src={this.props.goodsdata.picture.img} alt="" className="picture"/>:null
}
{
this.props.goodsdata.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : this.props.goodsdata.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />

4
src/pages/exchangepage/edittemplate/goodstemplate.less
View File

@ -174,4 +174,8 @@
left:0;
z-index: 1;
}
}
//优惠券图片
.picture{
width: 100%;
}

34
src/pages/exchangepage/edittemplate/main.js
View File

@ -17,6 +17,7 @@ import {
putSystemTemplate,
addSystemTemplate
} from '../../../assets/api.js'
import Bus from '@/assets/eventBus.js'
import PreviewEffect from '../previewEffect/main'
import html2canvas from 'html2canvas'
import Goodstemplate from './goodstemplate'
@ -62,6 +63,19 @@ let product_detail = {
button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' }
}
//优惠券商品列表
let couponProduct_list = {
top_image: '',
list: '2',
font_color: '#ffffff',
button_color: '#FACD6A',
describe: { type: '', content: '', bg_image: '' },
picture:{
img:'',
jumpType:'0',//0不跳转 1跳转
jumpUrl:''
}
}
export default class edittemplate extends React.Component {
constructor(props) {
super(props)
@ -96,6 +110,11 @@ export default class edittemplate extends React.Component {
this.setState({ model: val })
}
componentDidMount() {
Bus.addListener('picture', (prop) => {
let coupongoodsConfig = this.state.product_list
coupongoodsConfig.picture.img = prop
this.setState({ product_list: coupongoodsConfig })
})
setTimeout(() => {
let img = document.getElementById('center-img')
let center = document.getElementById('center')
@ -154,7 +173,7 @@ export default class edittemplate extends React.Component {
if (!couponList) {
couponList = {}
couponList.land = model
couponList.product_list = product_list
couponList.product_list = couponProduct_list
couponList.product_detail = product_detail
}
couponList['land'].title = newEditor.title
@ -186,12 +205,17 @@ export default class edittemplate extends React.Component {
product_list,
product_detail
}
let sourcecouponObj = {//模板数据结构
land: model,
product_list:couponProduct_list,
product_detail
}
whiteList = _.cloneDeep(sourceObj);
exchangeList = _.cloneDeep(sourceObj);
couponList = _.cloneDeep(sourceObj);
couponList = _.cloneDeep(sourcecouponObj);
obj.exchangeList = exchangeList
obj.whiteList = whiteList
obj.couponList = whiteList
obj.couponList = couponList
sessionStorage.setItem('editorConfig', JSON.stringify(obj))
}
}
@ -729,7 +753,9 @@ export default class edittemplate extends React.Component {
}
/>
)}
{
this.state.product_list.picture? <img src={this.state.product_list.picture.img} alt="" className="picture"/>:null
}
{this.state.product_list.list == 2 ? (
<img
className='goodsPic'