this.setImg(info, index,parent_index)}
headers={{
Authorization: 'Bearer ' + getLocalStorageStingVal('sld_token')
}}
>
{item.img
?
:sldSvgIcon(defaultSettings.primaryColor,40,40,'ziyuan110')
}
选择图片
{upload_img_tip}
{show_color_picker &&
选择背景色：
{/**/}
this.showTopCatNavColorPicker(true, index)}>
{item.show_color_picker && (
this.showTopCatNavColorPicker(false, index)}/>
this.onChange('rgba(' + e.rgb.r + ',' + e.rgb.g + ',' + e.rgb.b + ',' + e.rgb.a + ')', 'bg_color', index)}/>
)}
}
{(select_data.type != 'top_cat_nav' && select_data.type != 'lunbo') &&
this.onChange(e.target.value, title_key, index)} value={item[title_key]}/>
}
{this.getDetailItemHideLabel(item, index)}
{show_del_icon &&
this.delSldComImg(index)}>
{sldTsvg('qingchu', '#666', 16, 16)}
}
;
return content;
};
//删除图片item,针对于多条数据的处理（用于轮播/导航/图片组合）
delSldComImg = (tar_index) => {
let { select_data } = this.props;
let data = select_data.data.filter((item, index) => index != tar_index);
select_data.data = data;
this.props.handleCurSelData(select_data);
};
//添加轮播图片
addLunbo = (data) => {
data.data.push({
img: '',//图片绝对地址
img_path: '',//图片相对地址
title: '',//图片标题
url: '', //链接值
url_type: '',//链接类型
info: '',//用于存放额外信息
width: '100%',
height: 285.5,
});
this.props.handleCurSelData(data);
};
//添加顶部分类导航轮播
addTopCatNav = (data) => {
if(data.data.length == 8){
failTip('最多支持8张轮播图');
return false;
}
data.data.push({
img: '',//图片绝对地址
img_path: '',//图片相对地址
title: '',//图片标题
url: '', //链接值
url_type: '',//链接类型
info: '',//用于存放额外信息
width: '355',
height: 140,
bg_color: '#FC1C1C',//轮播背景色
show_color_picker:false,//是否显示颜色选择器，默认不显示
swiper_bg_style:1,//轮播背景风格，1为纯色弧度，2为渐变
});
this.props.handleCurSelData(data);
};
//顶部分类——颜色选择器的显示与否
showTopCatNavColorPicker = (flag,index) =>{
let { select_data } = this.props;
select_data.data[index].show_color_picker = flag;
this.props.handleCurSelData(select_data);
}
//添加导航item
addNav = (data) => {
if (data.type == 'nav' && data.data.length >= 5) {
failTip('最多添加5个导航，否则页面展示效果不佳');
return false;
} else if (data.type == 'tupianzuhe' && data.data.length >= 30) {
failTip('最多添加30张图片');
return false;
} else {
data.data.push({
img: '',//图片绝对地址
img_path: '',//图片相对地址
name: '',//导航名称
url: '', //链接值
url_type: '',//链接类型
info: '',//用于存放额外信息
width: '100%',
height: 150,
});
this.props.handleCurSelData(data);
}
};
//添加TAB切换分类导航，最多15个
addMoreTabNav = (data) => {
if (data.data.length >= 15) {
failTip('最多添加15个tab导航');
return false;
} else {
if (data.data.length == 0) {
data.nav_current = 0;
}
data.data.push({
title: '',//分类标题
sub_title: '',//子标题
data_type: 'goods',//商品类型
cart_icon_type: 5,//商品的话显示的购物车图标
ids: [],//数据id集合
info: [],//数据信息
});
this.props.handleCurSelData(data);
}
};
//短视频添加事件
selMoreSvideo = (data) => {
let { sle_more_title } = this.state;
this.sele_more_svideo.info = data.data.info;
this.sele_more_svideo.ids = data.data.ids;
if (data.show_style == 'four' || data.show_style == 'five') {
this.sele_more_svideo = {
info: this.sele_more_svideo.info,//选择的短视频数组
ids: this.sele_more_svideo.ids,//选择的短视频id数组
min_num: 3,//最小数量，0为不限制
max_num: 15,//最多选择15个
};
sle_more_title = '选择短视频(最少选择3个，最多选择15个)';
} else if (data.show_style == 'two') {
this.sele_more_svideo = {
info: this.sele_more_svideo.info,//选择的短视频数组
ids: this.sele_more_svideo.ids,//选择的短视频id数组
total_num: 3,//只能选择3个
};
sle_more_title = '选择短视频(只能选择3个)';
} else {
this.sele_more_svideo = {
info: this.sele_more_svideo.info,//选择的短视频数组
ids: this.sele_more_svideo.ids,//选择的短视频id数组
total_num: 2,//只能选择2个
};
sle_more_title = '选择短视频(只能选择2个)';
}
this.setState({
modalVisible: true,
sle_more_title,
});
};
//选择商品事件-多选
selMoreGoods = (data) => {
let { activityType, sle_more_title, modalVisibleGoods, modalVisibleActivityGoods } = this.state;
if (data.type == 'dapei') {
//搭配
this.sele_more_goods = {
info: data.data.info,
ids: data.data.ids,
min_num: 3,
max_num: 15,
};
sle_more_title = '选择商品(最少选择3个，最多选择9个)';
modalVisibleGoods = true;
} else if (data.type == 'tuijianshangpin') {
//商品推荐
this.sele_more_goods = {
info: data.data.info,
ids: data.data.ids,
min_num: 1,
};
sle_more_title = '选择商品(最少选择1个)';
modalVisibleGoods = true;
} else if (data.type == 'activity') {
if (data.show_style == 'group_buy') {
//团购
this.sele_more_goods = {
info: data.data.info,
ids: data.data.ids,
total_num: 2,//只能选择2个
};
sle_more_title = '选择团购商品(只能选择2个)';
} else {
//拼团、限时折扣
this.sele_more_goods = {
info: data.data.info,
ids: data.data.ids,
min_num: 3,
max_num: 15,
};
sle_more_title = '选择' + (data.show_style == 'pin' ? '拼团' : '限时折扣') + '商品(最少选择3个，最多选择15个)';
}
activityType = data.show_style;
modalVisibleActivityGoods = true;
}
this.setState({
modalVisibleActivityGoods,
modalVisibleGoods,
activityType,
sle_more_title,
});
};
//TAB切换选择数据功能
selMoreTabData = (data, tar_index) => {
let { modalVisibleLive, modalVisible, modalVisibleGoods } = this.state;
let tar_data = data.data.filter((item, index) => index == tar_index)[0];
if (tar_data.data_type == 'goods') {
this.sele_more_goods = {
info: tar_data.info,//选择的商品数组
ids: tar_data.ids,//选择的商品id数组
min_num: 2,//最少选择2个
};
modalVisibleGoods = true;
} else if (tar_data.data_type == 'live') {
this.sele_more_live = {
info: tar_data.info,//选择的直播数组
ids: tar_data.ids,//选择的直播id数组
min_num: 2,//最少选择2个
};
modalVisibleLive = true;
} else if (tar_data.data_type == 'svideo') {
this.sele_more_svideo = {
info: tar_data.info,//选择的短视频数组
ids: tar_data.ids,//选择的短视频id数组
min_num: 2,//最少选择2个
};
modalVisible = true;
}
this.oprate_more_tab_index = tar_index;//TAB切换当前操作的数据index
this.setState({
modalVisibleLive,
modalVisible,
modalVisibleGoods,
});
};
//直播添加事件
selMoreLive = (data) => {
let { sle_more_title } = this.state;
this.sele_more_live.info = data.data.info;
this.sele_more_live.ids = data.data.ids;
if (data.show_style == 'one' || data.show_style == 'five') {
this.sele_more_live = {
info: this.sele_more_live.info,//选择的直播数组
ids: this.sele_more_live.ids,//选择的直播id数组
total_num: 2,//只能选择2个
};
sle_more_title = '选择直播(只能选择2个)';
} else if (data.show_style == 'two') {
this.sele_more_live = {
info: this.sele_more_live.info,//选择的直播数组
ids: this.sele_more_live.ids,//选择的直播id数组
min_num: 3,//最少选择3个
max_num: 15,//最多选择15个
};
sle_more_title = '选择直播(最少选择3个，最多选择15个)';
}
this.setState({
modalVisibleLive: true,
sle_more_title,
});
};
renderMoreTabSeleData = (data, type, tar_index) => {
let con = '';
if (type == 'goods') {
con =
序号
商品信息
价格
操作
{data.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.productPrice * 1}
this.delGoods(svideo_item.goodsId, tar_index)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
} else if (type == 'svideo') {
con =
序号
短视频信息
播放量
操作
{data.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.video_name}
{svideo_item.label_name}
{svideo_item.click_num}
this.delSvideo(svideo_item.video_id, tar_index)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
;
} else if (type == 'live') {
con =
序号
直播信息
播放量
操作
{data.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.live_name}
{svideo_item.label_name}
{svideo_item.click_num}
this.delLive(svideo_item.live_id, tar_index)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
}
return con;
};
renderItem = (data) => {
const { getFieldDecorator } = this.props.form;
const { showColorPicker, showColorPicker2 } = this.state;
let con = '';
this.props.form.resetFields(['activity_border_radius','tjsp_isshow_sales','tjsp_show_style','tjsp_border_radius','tjsp_border_style','live_border_radius']);
if (data.type == 'top_cat_nav') {
//轮播
con =
轮播背景设置
this.onChange(e.target.value, 'swiper_bg_style')}>
纯色弧度
渐变
轮播图片
{data.data.length > 0 && data.data.map((item, index) => {
return this.renderLunBo(item, index, '宽710*高280');
})}
this.addTopCatNav(data)}>
+ 添加图片
}else if (data.type == 'lunbo') {
//轮播
con =
轮播图片
{data.data.length > 0 && data.data.map((item, index) => {
return this.renderLunBo(item, index, '宽710,高不限制');
})}
this.addLunbo(data)}>
+ 添加图片
} else if (data.type == 'nav') {
//导航
con =
显示风格
this.onChange(e.target.value, 'style_set')}>
导航
分组
{data.style_set == 'nav' &&
显示图标
this.onChange(e.target.value, 'icon_set')}>
图标居上
图标居左
不显示图标
}
{data.style_set == 'nav' &&
图标大小
this.onChange(e, 'slide')}/>
}
导航图片
{data.data.length > 0 && data.data.map((item, index) => {
return this.renderLunBo(item, index);
})}
this.addNav(data)}>
+ 添加导航
} else if (data.type == 'tupianzuhe') {
//图片组合
con =
展示风格
{sld_m_diy_tpzh_style.map(item => {
return
this.handleTuPianZuHeStyle(item.sele_style)}>
;
})}
{data.sele_style == 8 &&
{data.data.length>0&&data.data.map((item, index) => {
return
{index%2==0?'左':'右'}{index<2?1:2}模块数据
this.onChange(e.target.value,'main_title', index)} value={item.main_title}/>
this.onChange(e.target.value, 'sub_title', index)} value={item.sub_title}/>
{this.getDetailItem(item,index)}
{item.img.length > 0 && item.img.map((child, child_index) => {
let upload_tip = '宽154*高188';
return this.renderTPZH8Img(child, child_index, upload_tip,index);
})}
})}
}
{data.sele_style != 8 &&
上传图片
{data.data.length > 0 && data.data.map((item, index) => {
let upload_tip = '';
if (data.sele_style == 0 || data.sele_style == 1) {
upload_tip = '宽750,高不限制';
} else if (data.sele_style == 2) {
upload_tip = '宽300*高300';
} else if (data.sele_style == 3) {
upload_tip = '宽200*高200';
} else if (data.sele_style == 4) {
if (index == 0) {
upload_tip = '宽300*高320';
} else {
upload_tip = '宽300*高150';
}
} else if (data.sele_style == 5) {
if (index == 0 || index == 3) {
upload_tip = '宽200*高200';
} else {
upload_tip = '宽400*高200';
}
} else if (data.sele_style == 6) {
if (index == 0 || index == 3) {
upload_tip = '宽300*高150';
} else {
upload_tip = '宽300*高300';
}
} else if (data.sele_style == 7) {
if (index == 4) {
upload_tip = '宽200*高420';
} else {
upload_tip = '宽200*高200';
}
}
return this.renderLunBo(item, index, upload_tip);
})}
{data.sele_style < 4 &&
this.addNav(data)}>
+ 添加图片
}
}
} else if (data.type == 'fzx') {
//辅助线
con =
颜色
{showColorPicker && (
this.showColorPicker('showColorPicker', false)}/>
this.onChange('rgba(' + e.rgb.r + ',' + e.rgb.g + ',' + e.rgb.b + ',' + e.rgb.a + ')', 'color')}/>
)}
上下边距
this.onChange(e, 'tbmargin')}/>
左右边距
this.onChange(e, 'lrmargin')}/>
样式
{getFieldDecorator('fzx_border_type', { initialValue: data.val })(
this.onChange(e.target.value, 'val')}>
实线
虚线
点线
,
)}
} else if (data.type == 'fzkb') {
//辅助线
con =
颜色
{showColorPicker && (
this.showColorPicker('showColorPicker', false)}/>
this.onChange(e.hex, 'color')}/>
)}
空白高度
this.onChange(e, 'text')}/>
} else if (data.type == 'fuwenben') {
//富文本
con =
this.handleGetContent(con, 'text')}
toolbarOptions = {toolbarOptions}
/>
} else if (data.type == 'kefu') {
//客服
con =
;
} else if (data.type == 'gonggao') {
//公告
con =
展示风格
{sld_m_diy_notice_style.map(item => {
return
this.handleNoticeStyle(item.sele_style)}>
;
})}
公告链接
{this.getDetailItem(data)}
} else if (data.type == 'dapei') {
//搭配
con =
搭配图片
{data.dapei_img != '' &&
this.delImg(data)}>
{sldTsvg('shanchu4', '#fff', 15, 15)}
}
this.setImg(info)}
headers={{
Authorization: 'Bearer ' + getLocalStorageStingVal('sld_token'),
}}
>
此处建议上传宽度为750，高度不限制的图片；支持格式gif，jpg，png。
选择商品
{data.data.info.length > 0 &&
序号
商品信息
价格
操作
{data.data.info.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.productPrice * 1}
this.delGoods(svideo_item.goodsId)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
}
;
} else if (data.type == 'tuijianshangpin') {
//推荐商品
con =
商品销量
{getFieldDecorator('tjsp_isshow_sales', { initialValue: data.isshow_sales })(
this.onChange(e.target.value, 'isshow_sales')}>
展示
隐藏
,
)}
展示类型
{getFieldDecorator('tjsp_show_style', { initialValue: data.show_style })(
this.onChange(e.target.value, 'show_style')}>
大图
一行两个
列表
,
)}
商品边角
{getFieldDecorator('tjsp_border_radius', { initialValue: data.border_radius })(
this.onChange(e.target.value, 'border_radius')}>
圆角
直角
,
)}
商品样式
{getFieldDecorator('tjsp_border_style', { initialValue: data.border_style })(
this.onChange(e.target.value, 'border_style')}>
无边白底
卡片投影
描边白底
无边灰底
,
)}
页面边距
this.onChange(e, 'page_margin')}/>
商品间距
this.onChange(e, 'goods_margin')}/>
选择商品
{data.data.info.length > 0 &&
序号
商品信息
价格
操作
{data.data.info.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.productPrice * 1}
this.delGoods(svideo_item.goodsId)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
}
;
} else if (data.type == 'svideo') {
//短视频
con =
展示风格
{sld_m_diy_svideo_style.map(item => {
return
this.handleVideoStyle(item.sele_style)}>
;
})}
短视频卡片边角
{getFieldDecorator('svideo_border_radius', { initialValue: data.border_radius })(
this.onChange(e.target.value, 'border_radius')}>
圆角
直角
,
)}
添加短视频
{data.data.info.length > 0 &&
序号
短视频信息
播放量
操作
{data.data.info.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.video_name}
{svideo_item.label_name}
{svideo_item.click_num}
this.delSvideo(svideo_item.video_id)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
}
;
} else if (data.type == 'live') {
//直播
con =
展示风格
{sld_m_diy_live_style.map(item => {
return
this.handleLiveStyle(item.sele_style)}>
;
})}
直播卡片边角
{getFieldDecorator('live_border_radius', { initialValue: data.border_radius })(
this.onChange(e.target.value, 'border_radius')}>
圆角
直角
,
)}
添加直播
{data.data.info.length > 0 &&
序号
直播信息
播放量
操作
{data.data.info.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.live_name}
{svideo_item.label_name}
{svideo_item.click_num}
this.delLive(svideo_item.live_id)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
}
;
} else if (data.type == 'more_tab') {
//TAB切换
con =
数据卡片边角
{getFieldDecorator('more_tab_border_radius', { initialValue: data.border_radius })(
this.onChange(e.target.value, 'border_radius')}>
圆角
直角
,
)}
{data.data.length > 0 && data.data.map((more_tab_item, more_tab_index) => {
return ;
})}
this.addMoreTabNav(data)}>
+ 添加分类导航
;
} else if (data.type == 'activity') {
//活动组
con =
活动类型
{sld_m_diy_activity_style.map(item => {
return
this.handleActivityStyle(item.sele_style)}>
;
})}
数据卡片边角
{getFieldDecorator('activity_border_radius', { initialValue: data.border_radius })(
this.onChange(e.target.value, 'border_radius')}>
圆角
直角
,
)}
活动标签背景颜色设置
{showColorPicker2 && (
this.showColorPicker('showColorPicker2', false)}/>
this.onChange('rgba(' + e.rgb.r + ',' + e.rgb.g + ',' + e.rgb.b + ',' + e.rgb.a + ')', 'tag_bg_color')}/>
)}
{data.show_style != 'pin' &&
}
选择商品
{data.data.info.length > 0 &&
序号
商品信息
价格
操作
{data.data.info.map((svideo_item, svideo_index) => {
return
{svideo_index + 1}
{svideo_item.goodsPrice * 1}
this.delGoods(svideo_item.goodsId)}
className={`${styles.operate} ${global.flex_row_center_center}`}>
;
})}
}
;
}
return con;
};
render() {
const { select_data } = this.props;
const { link_type, modalVisibleGoods, sle_more_title } = this.state;
return (
{/*商品多选的modal框-start*/}
{/*商品多选的modal框-end*/}
);
}
}