pc代码添加

admin/config/router.config.js

@@ -8,7 +8,23 @@ export default [
       { path: '/user/login', component: './User/Login' },
     ],
   },
-  
+  {
+    path: '/pcdecorate_home/diy_page_lists_to_edit',
+    component: '../layouts/UserLayout',
+    Routes: ['src/pages/CheckLogin'],
+    routes: [
+      { path: '/pcdecorate_home/diy_page_lists_to_edit', component: './pcdecorate/home/edit_diy_page' },
+    ],
+  },
+  {
+    path: '/pcdecorate_topic/topic_diy_page_lists_to_edit',
+    component: '../layouts/UserLayout',
+    Routes: ['src/pages/CheckLogin'],
+    routes: [
+      { path: '/pcdecorate_topic/topic_diy_page_lists_to_edit', component: './pcdecorate/home/edit_diy_page' },
+    ],
+  },
+
   // app
   {
     path: '/',
@@ -250,7 +266,77 @@ export default [
           },
         ],
       },
-
+// PC装修
+      {
+        path: '/pcdecorate_home',
+        icon: 'cluster',
+        name: 'pc_home',
+        routes: [
+          // 模板列表
+          {
+            path: '/pcdecorate_home/tpl_lists',
+            name: 'tpl_lists',
+            component: './pcdecorate/home/tpl_lists',
+          },
+          // 实例化模版
+          {
+            path: '/pcdecorate_home/instance_template_lists',
+            name: 'instance_template_lists',
+            component: './pcdecorate/home/instance_template_lists',
+          },
+          // 新增/编辑模版
+          {
+            path: '/pcdecorate_home/instance_template_lists_to_add',
+            name: '',
+            component: './pcdecorate/home/add_template',
+          },
+          // // 测试模板
+          // {
+          //   path: '/pcdecorate_home/adv_222',
+          //   name: 'adv_222',
+          //   component: './pcdecorate/home/adv_222',
+          // },
+          // 首页装修
+          {
+            path: '/pcdecorate_home/diy_page_lists',
+            name: 'diy_page_lists',
+            component: './pcdecorate/home/diy_page_lists',
+          },
+          // 首页设置
+          {
+            path: '/pcdecorate_home/home_setting',
+            name: 'home_setting',
+            component: './pcdecorate/home/home_setting',
+          },
+          // 首页导航
+          {
+            path: '/pcdecorate_home/nav',
+            name: 'nav',
+            component: './pcdecorate/home/nav',
+          },
+          //页脚管理
+          {
+            path: '/pcdecorate_home/footer',
+            name: 'footer',
+            component: './pcdecorate/home/footer',
+          },
+        ],
+      },
+      // 专题装修
+      {
+        path: '/pcdecorate_topic',
+        icon: 'tool',
+        name: 'pc_decorate_topic',
+        routes: [
+          // 专题装修
+          {
+            path: '/pcdecorate_topic/topic_diy_page_lists',
+            name: 'topic_diy_page_lists',
+            component: './pcdecorate/topic/topic_diy_page_lists',
+          },
+        ],
+      },
+      
       // 首页装修
       {
         path: '/decorate_mhome',

admin/src/pages/pcdecorate/home/add_template.js

@@ -0,0 +1,158 @@
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form, } from 'antd';
+import {
+	sldIconBtn,
+	failTip,
+	sucTip,
+	sldLlineRtextAddGoodsAddMargin,
+	showMoreHelpTip,
+	getSldEmptyH,
+	sldEmptyHandle2,
+	sldComLanguage,
+} from '@/utils/utils';
+import { add_tpl_tip } from '@/utils/util_data';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import Adv_01 from './adv_01';
+import Adv_02 from './adv_02';
+import Adv_04 from './adv_04';
+import Adv_05 from './adv_05';
+import Adv_06 from './adv_06';
+import Adv_07 from './adv_07';
+import Adv_08 from './adv_08';
+import Adv_09 from './adv_09';
+import Adv_10 from './adv_10';
+import Adv_11 from './adv_11';
+import Adv_12 from './adv_12';
+import Adv_13 from './adv_13';
+import Adv_19 from './adv_19';
+import MainBanner from './main_banner';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Add_template extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			data: sldEmptyHandle2(localStorage.getItem('pc_diy_tpl')) != '' ? JSON.parse(localStorage.getItem('pc_diy_tpl')) : '',
+		};
+	}
+
+
+	componentDidMount() {
+
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	//保存装修数据
+	save_tpl_data = (val, html) => {
+		let { data } = this.state;
+		//将对象转为JSON对象
+		let val_to_json_object = JSON.parse(JSON.stringify(val));
+		let param = {};
+		param.dataId = data.dataId;
+		param.html = html;
+		param.json = JSON.stringify(val_to_json_object);
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/save_instance_tpl_data',
+			payload: param,
+			callback: (res) => {
+				if (res.state == 200) {
+					//替换缓存里的数据
+					data.json = param.json;
+					data.html = param.html;
+					this.setState({data})
+					localStorage.setItem('pc_diy_tpl',JSON.stringify(data))
+					sucTip(res.msg);
+				} else {
+					failTip(res.msg);
+				}
+			},
+		});
+	};
+
+	render() {
+		const { data } = this.state;
+		let data_json = JSON.parse(data.json);
+		return (
+
+			<div className={`${global.common_page} ${styles.allow_show_edit}`}>
+
+				{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('模板编辑')}`, 0, 0, 10)}
+				{showMoreHelpTip(`${sldComLanguage('操作提示')}`, add_tpl_tip())}{/*操作提示*/}
+				{getSldEmptyH(10)}
+				{/*公共功能条-start*/}
+				<div className={global.operate_bg}>
+					{sldIconBtn(() => this.props.history.goBack(), `${sldComLanguage('返回')}${sldComLanguage('模板列表')}`, 7, 7, 15, 15, 4, 'fanhui', '#FA6F1E')}
+				</div>
+				{/*公共功能条-end*/}
+				<div className={`${styles.diy_part_wrap} ${styles.allow_show_edit}`}>
+					<Scrollbars autoHeight
+								autoHeightMin={50}
+								autoHeightMax={document.body.clientHeight - 330}>
+						{data_json.type == 'adv_01' &&
+						<Adv_01 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_02' &&
+						<Adv_02 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_04' &&
+						<Adv_04 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_05' &&
+						<Adv_05 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_06' &&
+						<Adv_06 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_07' &&
+						<Adv_07 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_08' &&
+						<Adv_08 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_09' &&
+						<Adv_09 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_10' &&
+						<Adv_10 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_11' &&
+						<Adv_11 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_12' &&
+						<Adv_12 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_13' &&
+						<Adv_13 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+						{data_json.type == 'adv_19' &&
+						<Adv_19 back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+
+						{data_json.type == 'main_banner' &&
+						<MainBanner back_route={data.back_route} tpl_info={data_json} save_tpl_data={this.save_tpl_data}/>
+						}
+					</Scrollbars>
+				</div>
+
+
+			</div>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_01.js

@@ -0,0 +1,121 @@
+/*
+* 单图广告
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	isEmptyObject,
+	sldTsvgBotText,
+	sldComLanguage,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiySingleImgModal from '@/components/SldDiySingleImgModal/SldDiySingleImgModal';
+
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_01 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			tpl_adv_01_modal_tip: [],//modal框提示
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_01',
+				width: 1200,
+				height: 0,//高度为0的话表示不限制
+				data: {
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_url: '',
+					link_type: '',
+					link_value: '',
+				},
+			},//装修的数据
+
+		};
+	}
+
+	componentDidMount() {
+		let { tpl_info, data } = this.state;
+		this.setState({
+			data: tpl_info,
+		});
+	}
+
+	componentWillUnmount() {
+
+	}
+
+
+	editTpl = (tip) => {
+		this.setState({
+			modalVisible: true,
+			tpl_adv_01_modal_tip: tip,
+		});
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data } = this.state;
+		data.data = val;
+		// data.height = ;
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			this.props.save_tpl_data(data, sthis.refs.wrap_html.innerHTML);
+		});
+	};
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false });
+	};
+
+	render() {
+		const { data, submiting, modalVisible, tpl_adv_01_modal_tip } = this.state;
+		return (
+			<Fragment>
+				<div ref={'wrap_html'} className={global.flex_row_common}>
+					<div className={styles.adv_01_wrap}>
+						{!isEmptyObject(data.data) && data.data.imgUrl
+							? <img className={styles.adv_01_img} src={data.data.imgUrl}/>
+							: sldTsvgBotText('kehubiaoqian', `${sldComLanguage('点击上传图片')}`, 10, '', '', '#999', 30, 30, '#999')
+						}
+						<div className={styles.sld_mask} onClick={() => this.editTpl([
+							`${sldComLanguage('请严格根据提示要求上传规定尺寸的广告图片')}`,
+							`${sldComLanguage('编辑项中的“操作”指点击该内容所产生的链接地址，可通过下拉选项选择不同的方式')}`,
+						])}>
+							<span>{sldComLanguage('编辑')}</span>
+						</div>
+					</div>
+				</div>
+				<SldDiySingleImgModal
+					width={1000}
+					title={sldComLanguage('广告图设置')}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={data}
+					modal_tip={tpl_adv_01_modal_tip}
+				/>
+
+			</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_02.js

@@ -0,0 +1,258 @@
+/*
+* 装修板块2，左侧一个图片，中间4个商品，右侧3个图片
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  sldComLanguage,
+} from '@/utils/utils';
+import { tpl_adv_01_modal_tip } from '@/utils/util_data';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldDiySingleImgModal from '@/components/SldDiySingleImgModal/SldDiySingleImgModal';
+import SldSelMoreLeftRightGoods from '@/components/SldSelMoreLeftRightGoods';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_02 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modal_tip: [],//弹框的提示语
+      modalTitle: '',//弹框的标题
+      cur_sele_goods: [],//当前选择的商品数据
+      cur_sele_goods_ids: [],//当前选择商品id数组
+      cur_part: '',//当前操作的部分，比如left，center，right
+      cur_data: {},//当前操作数据
+      cur_data1: {},//当前操作数据
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      modalSingleImgVisible: false,//单图选择器modal是否显示
+      tpl_info: props.tpl_info,
+      data: {
+        type: 'adv_02',
+        left: {
+          type: 'single_img',
+          width: 210,
+          height: 344,//高度为0的话表示不限制
+          data: {
+            imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+            imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+            title: '',
+            link_type: '',
+            link_value: '',
+
+          },
+        },//左侧图片信息
+        center: {
+          type: 'goods',
+          data: {
+            goods_ids: [],
+            goods_data: [],
+          },
+        },//中间商品信息
+        right: {
+          type: 'more_img',
+          width: 242,
+          height: 108,
+          data: [{
+            imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+            imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+            title: '',
+            link_type: '',
+            link_value: '',
+          },
+            {
+              imgUrl: 'http://img.slodon.cn/data/upload/mobile/special/s1549014137/s1549014137_06023581370067902.jpg',
+              imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+              title: '',
+              link_type: '',
+              link_value: '',
+            }, {
+              imgUrl: 'http://img.slodon.cn/data/upload/mobile/special/s1549014141/s1549014141_06023581415508567.jpg',
+              imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+              title: '',
+              link_type: '',
+              link_value: '',
+            }],
+        },//右侧图片信息
+      },//装修的数据
+
+    };
+  }
+
+  sele_goods_param = {
+    type: 'common',
+    total_num: 0,
+  };//商品选择器参数
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part, modalTitle = '', modalTip = []) => {
+    let { data, modalVisible, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, modalSingleImgVisible } = this.state;
+    if (data[part].type == 'goods') {
+      modalSpuShow = true;
+      cur_sele_goods = data[part].data.goods_data;
+      cur_sele_goods_ids = data[part].data.goods_ids;
+      this.sele_goods_param.total_num = 4;
+    } else if (data[part].type == 'single_img') {
+      modalSingleImgVisible = true;
+    } else {
+      modalVisible = true;
+    }
+    this.setState({
+      cur_part: part,
+      cur_data: data[part],
+      modalVisible,
+      modalSpuShow,
+      cur_sele_goods,
+      cur_sele_goods_ids,
+      modalSingleImgVisible,
+      modalTitle: modalTitle,
+      modal_tip: modalTip,
+    });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { cur_part, data } = this.state;
+    data[cur_part].data = val;
+    this.setState({
+      data,
+      modalVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false, modalSingleImgVisible: false, modalSpuShow: false });
+  };
+
+  //选中spu事件
+  seleSpu = (selectedRows, selectedRowKeys) => {
+    let { data, cur_part } = this.state;
+    data[cur_part].data.goods_ids = selectedRowKeys;
+    data[cur_part].data.goods_data = selectedRows;
+    this.setState({ data }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+      this.sldHandleCancle();
+    });
+  };
+
+  render() {
+    const { data, submiting, modalVisible, cur_data, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, modalSingleImgVisible, modalTitle, modal_tip } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'} className={global.flex_com_row}>
+          <div className={styles.adv_02_part}>
+            <div className={styles.adv_02_left}>
+              {data.left.data.imgUrl != undefined && data.left.data.imgUrl &&
+              <img src={data.left.data.imgUrl}/>
+              }
+              <div className={styles.sld_mask}
+                   onClick={() => this.editTpl('left', `${sldComLanguage('左侧图片设置')}`, tpl_adv_01_modal_tip())}>
+                <span>{sldComLanguage('编辑')}</span>
+              </div>
+            </div>
+            <div className={styles.adv_02_center}>
+              <span className={styles.split_h}></span>
+              <span className={styles.split_v}></span>
+              {data.center.data.goods_ids.length > 0 &&
+              data.center.data.goods_data.map((item, index) => {
+                return <div key={index} className={`${styles.goods_item} ${styles.clearfix}`}>
+                  <div className={styles.left}>
+                    <img src={item.mainImage}/>
+                  </div>
+                  <div className={styles.right}>
+                    <p className={styles.goods_name}>{item.goodsName}</p>
+                    <p
+                      className={styles.buy_num}>{item.actualSales + item.virtualSales}{sldComLanguage('人已买')}</p>
+                    <div className={styles.price}>
+                      <span className={styles.unit}>{sldComLanguage('¥')}</span>
+                      <span className={styles.integer}>{item.goodsPrice}</span>
+                      {/*<span className={styles.decimal}>00</span>*/}
+                      {item.marketPrice * 1 > 0 &&
+                      <span className={`${styles.btn_common} ${styles.del}`}>{sldComLanguage('¥')}{item.marketPrice}</span>}
+                    </div>
+                    <a className={styles.buy}>{sldComLanguage('立即抢购')}</a>
+                  </div>
+                </div>;
+              })
+              }
+              <div className={styles.sld_mask}
+                   onClick={() => this.editTpl('center', `${sldComLanguage('商品选择(该模块需要4个商品)')}`)}>
+                <span>{sldComLanguage('编辑')}</span>
+              </div>
+            </div>
+            <div className={styles.adv_02_right}>
+              {data.right.data.map((item, index) => {
+                return <span key={index} className={styles.right_img_item}>
+                    <img src={item.imgUrl}/>
+                  </span>;
+              })}
+              <div className={styles.sld_mask}
+                   onClick={() => this.editTpl('right', `${sldComLanguage('右侧图片设置')}`, tpl_adv_01_modal_tip())}>
+                <span>{sldComLanguage('编辑')}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <SldDiySingleImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalSingleImgVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+        />
+        <SldDiyMoreImgModal
+          width={900}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+
+        {/*商品多选的modal框-start*/}
+        <SldSelMoreLeftRightGoods selectedRows={cur_sele_goods}
+                                  selectedRowKeys={cur_sele_goods_ids}
+                                  modalVisible={modalSpuShow} width={1000}
+                                  height={document.body.clientHeight - 400}
+                                  sldHandleSeleMoreModalCancle={this.sldHandleCancle} seleSvideo={this.seleSpu}
+                                  title={modalTitle} extra={this.sele_goods_param}/>
+        {/*商品多选的modal框-end*/}
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_03.js

@@ -0,0 +1,212 @@
+/*
+* 装修板块2，左侧一个图片，中间4个商品，右侧3个图片
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	sldIconBtn,
+	sldLlineRtextAddGoodsAddMargin,
+	showMoreHelpTip,
+	getSldEmptyH,
+	sldComLanguage,
+} from '@/utils/utils';
+import { add_tpl_tip } from '@/utils/util_data';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldDiySingleImgModal from '@/components/SldDiySingleImgModal/SldDiySingleImgModal';
+import SldSelGoodsMore from '@/components/SldSelGoodsMore';
+import router from 'umi/router';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_03 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			modal_tip: [],//弹框的提示语
+			modalTitle: '',//弹框的标题
+			cur_sele_goods: [],//当前选择的商品数据
+			cur_sele_goods_ids: [],//当前选择商品id数组
+			cur_part: '',//当前操作的部分，比如left，center，right
+			cur_data: {},//当前操作数据
+			cur_data1: {},//当前操作数据
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modalSpuShow: false,//是否展示选择商品modal
+			modalSingleImgVisible: false,//单图选择器modal是否显示
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_02',
+				left: {
+					type: 'single_img',
+					width: 210,
+					height: 344,//高度为0的话表示不限制
+					data: {
+						imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+						imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+						title: '',
+						link_type: '',
+						link_value: '',
+					},
+				},//左侧图片信息
+				center: {
+					type: 'goods',
+					data: {
+						goods_ids: [],
+						goods_data: [],
+					},
+				},//中间商品信息
+				right: {
+					type: 'more_img',
+					width: 242,
+					height: 108,
+					data: [{
+						imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+						imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+						title: '',
+						link_type: '',
+						link_value: '',
+					},
+						{
+							imgUrl: 'http://img.slodon.cn/data/upload/mobile/special/s1549014137/s1549014137_06023581370067902.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+						}, {
+							imgUrl: 'http://img.slodon.cn/data/upload/mobile/special/s1549014141/s1549014141_06023581415508567.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+						}],
+				},//右侧图片信息
+			},//装修的数据
+
+		};
+	}
+
+	sele_goods_param = {
+		type: 'common',
+		total_num: 0,
+	};//商品选择器参数
+
+
+	componentDidMount() {
+
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	//编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+	editTpl = (part, modalTitle = '', modalTip = []) => {
+		let { data, modalVisible, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, modalSingleImgVisible } = this.state;
+		if (data[part].type == 'goods') {
+			modalSpuShow = true;
+			cur_sele_goods = data[part].data.goods_data;
+			cur_sele_goods_ids = data[part].data.goods_ids;
+			this.sele_goods_param.total_num = 4;
+		} else if (data[part].type == 'single_img') {
+			modalSingleImgVisible = true;
+		} else {
+			modalVisible = true;
+		}
+		this.setState({
+			cur_part: part,
+			cur_data: data[part],
+			modalVisible,
+			modalSpuShow,
+			cur_sele_goods,
+			cur_sele_goods_ids,
+			modalSingleImgVisible,
+			modalTitle: modalTitle,
+			modal_tip: modalTip,
+		});
+	};
+
+	sldHandleConfirm = (val) => {
+		let { cur_part, data } = this.state;
+		data[cur_part].data = val;
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false, modalSingleImgVisible: false, modalSpuShow: false });
+	};
+
+	//选中spu事件
+	seleSpu = (selectedRows, selectedRowKeys) => {
+		let { data, cur_part } = this.state;
+		data[cur_part].data.goods_ids = selectedRowKeys;
+		data[cur_part].data.goods_data = selectedRows;
+		this.setState({ data }, () => {
+			this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	render() {
+		const { data, submiting, modalVisible, cur_data, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, modalSingleImgVisible, modalTitle, modal_tip } = this.state;
+		return (
+			<Fragment>
+				{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('商品楼层（楼层类型）—楼层具体的名称')}`, 0, 0, 10)}
+				{showMoreHelpTip(`${sldComLanguage('操作提示')}`, add_tpl_tip())}
+				{getSldEmptyH(10)}
+				{/*公共功能条-start*/}
+				<div className={global.operate_bg}>
+					{sldIconBtn(() => router.replace(this.props.back_route), `${sldComLanguage('返回')}${sldComLanguage('模板列表')}`, 7, 7, 15, 15, 4, 'fanhui', '#FA6F1E')}
+				</div>
+				{/*公共功能条-end*/}
+				<div className={styles.diy_part_wrap}>
+
+				</div>
+				<SldDiySingleImgModal
+					width={1000}
+					title={modalTitle}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalSingleImgVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+				<SldDiyMoreImgModal
+					width={900}
+					title={modalTitle}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+
+				{/*添加spu的modal框-start*/}
+				<SldSelGoodsMore selectedRows={cur_sele_goods} selectedRowKeys={cur_sele_goods_ids}
+								  modalAddSkuIsShow={modalSpuShow} width={1000}
+								  sldHandleAddSkuModalCancle={this.sldHandleCancle} seleSku={this.seleSpu}
+								  modaltitle={modalTitle} extra={this.sele_goods_param}/>
+				{/*添加spu的modal框-end*/}
+			</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_04.js

@@ -0,0 +1,286 @@
+/*
+* 猜你喜欢模块
+* 标题可以自定义
+* 商品一行5个，为了页面效果好看，建议选择的商品数量是5的倍数
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  formItemLayoutModal,
+  sldComLanguage,
+} from '@/utils/utils';
+import styles from '../pcdecorate.less';
+import SldModal from '@/components/SldModal/SldModal';
+import SldSelMoreLeftRightGoods from '@/components/SldSelMoreLeftRightGoods';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+const empty_data = [1, 2, 3, 4, 5];
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_04 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modal_tip: [],//弹框的提示语
+      modalTitle: '',//弹框的标题
+      cur_sele_goods: [],//当前选择的商品数据
+      cur_sele_goods_ids: [],//当前选择商品id数组
+      cur_part: '',//当前操作的部分，比如left，center，right
+      cur_data: {},//当前操作数据
+      cur_data1: {},//当前操作数据
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      tpl_info: props.tpl_info,
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('标题名称')}`,
+        name: 'title_name',
+        placeholder: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,
+        extra: `${sldComLanguage('标题名称不能为空，10个字符以内')}`,
+        initialValue: '',
+        maxLength:10,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,
+        },],
+      }, {
+        type: 'more_color_picker',
+        label: `${sldComLanguage('颜色')}`,
+        name: 'title_color',
+        placeholder: `${sldComLanguage('请点击选择颜色')}`,
+        initialValue: '',
+        is_show: false,
+        callbackShow: (color) => this.sldHandleColorPicker(color, 'title_color', 'is_show'),
+        callback: (color) => this.sldHandleColorPicker(color, 'title_color', 'color'),
+      }, {
+        type: 'empty',
+        name: 'empty',
+        height: 0,
+      }],//modal框的数据
+      data: {
+        type: 'adv_04',
+        title_info: {
+          title_name: '',//标题名称
+          title_color: '',//标题颜色
+        },
+        data: {
+          goods_ids: [],
+          goods_data: [],
+        },//商品信息
+      },//装修的数据
+    };
+  }
+
+  sele_goods_param = {
+    type: 'common',
+    total_num: 0,
+    min_num: 5,
+  };//商品选择器参数
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //设置颜色  color:选中的颜色值  name:addData里面的name  type：color 修改颜色， is_show 是否显示
+  sldHandleColorPicker = (color, name, type) => {
+    let { addData } = this.state;
+    for (let i in addData) {
+      if (addData[i].name == name) {
+        if (type == 'is_show') {
+          addData[i].is_show = color;
+        } else if (type == 'color') {
+          addData[i].initialValue = color;
+        }
+      } else {
+        if (addData[i].name == 'empty') {
+          if (type == 'is_show' && color) {
+            addData[i].height = 300;
+          } else if (type == 'is_show' && !color) {
+            addData[i].height = 0;
+          }
+        }
+
+        if (type == 'is_show') {
+          addData[i].is_show = false;
+        }
+      }
+
+    }
+    this.setState({ addData });
+  };
+
+  //编辑板块 type：类型  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (type, modalTitle = '', modalTip = []) => {
+    let { data, modalVisible, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, cur_data, addData } = this.state;
+    if (type == 'goods') {
+      //商品选择
+      modalSpuShow = true;
+      cur_sele_goods = data.data.goods_data;
+      cur_sele_goods_ids = data.data.goods_ids;
+      cur_data = data.data;
+    } else {
+      modalVisible = true;
+      for (let i in addData) {
+        addData[i].initialValue = data.title_info[addData[i].name];
+      }
+      cur_data = data.title_info;
+    }
+    this.setState({
+      cur_part: type,
+      cur_data,
+      modalVisible,
+      modalSpuShow,
+      cur_sele_goods,
+      cur_sele_goods_ids,
+      modalTitle: modalTitle,
+      modal_tip: modalTip,
+      addData,
+    });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data, addData } = this.state;
+    //标题数据组装
+    data.title_info.title_name = val.title_name;
+    for (let i in addData) {
+      if (addData[i].name == 'title_color') {
+        data.title_info.title_color = addData[i].initialValue;
+        break;
+      }
+    }
+    this.setState({
+      data,
+      modalVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false, modalSpuShow: false });
+  };
+
+  //选中spu事件
+  seleSpu = (selectedRows, selectedRowKeys) => {
+    let { data } = this.state;
+    data.data.goods_ids = selectedRowKeys;
+    data.data.goods_data = selectedRows;
+    this.setState({ data }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+      this.sldHandleCancle();
+    });
+  };
+
+  render() {
+    const { data, submiting, modalVisible, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, modalTitle, addData } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_04_wrap}`}>
+            <div className={styles.floor_title}>
+              <div className={styles.sld_mask}
+                   onClick={() => this.editTpl('title', `${sldComLanguage('顶部标题设置')}`)}>
+                <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+              </div>
+              <h2>
+                <font
+                  style={data.title_info.title_color != '' ? { background: data.title_info.title_color } : null}>&nbsp;</font>
+                <span
+                  style={data.title_info.title_color != '' ? { color: data.title_info.title_color } : null}>{data.title_info.title_name != '' ? data.title_info.title_name : '请填写标题'}</span>
+                <font
+                  style={data.title_info.title_color != '' ? { background: data.title_info.title_color } : null}>&nbsp;</font>
+              </h2>
+            </div>
+            <div className={styles.floor_goods}>
+              <div className={styles.sld_mask}
+                //商品选择(至少选择5个商品，建议是5的倍数)     标题不能为空，最多输入10个字', '选择不同的颜色，标题颜色随之改变
+                   onClick={() => this.editTpl('goods', `${sldComLanguage('pc_home.adv.select_goods')}`, [`${sldComLanguage('pc_home.adv.title_limit')}`, `${sldComLanguage('pc_home.adv.color_change')}`])}>
+                <span>{sldComLanguage('编辑')}</span>{/**/}
+              </div>
+              {data.data.goods_data.length == 0 &&
+              empty_data.map((item) => {
+                return <div key={item} className={styles.item}>
+                  <div className={styles.wrap}>
+                    <a className={styles.example_text}>
+                      <span>{sldComLanguage('示例产品')}<br/>【172*170】</span>{/*示例产品*/}
+                    </a>
+                    <p className={styles.title}>
+                      <a href="javascript:;" title={sldComLanguage('商品名称')}>{/*商品名称*/}
+                        {sldComLanguage('商品名称')}</a>{/*商品名称*/}
+                    </p>
+                    <p className={styles.price}>
+                      <span className={styles.second_color}>{sldComLanguage('￥')}<span className={styles.money_number}>0.00</span>
+                      </span>
+                    </p>
+                  </div>
+                </div>;
+              })
+              }
+
+              {data.data.goods_data.length > 0 &&
+              data.data.goods_data.map((item) => {
+                return <div key={item.id} className={styles.item}>
+                  <div className={styles.wrap}>
+                    <a href="javascript:;" className={styles.example_text}>
+                      <img src={item.mainImage}/>
+                    </a>
+                    <p className={styles.title}>
+                      <a href="javascript:;" title={item.goodsName}>{item.goodsName}</a>
+                    </p>
+                    <p className={styles.price}>
+                      <span className={styles.second_color}>￥<span
+                        className={styles.money_number}>{item.goodsPrice}</span>
+                      </span>
+                    </p>
+                  </div>
+                </div>;
+              })
+              }
+            </div>
+
+
+          </div>
+        </div>
+        { /*标题对话框-start*/}
+        <SldModal
+          title={modalTitle}
+          submiting={submiting}
+          width={500}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          formItemLayoutModal={formItemLayoutModal}
+          content={addData}
+        />
+        { /*标题对话框-end*/}
+        {/*商品多选的modal框-start*/}
+        <SldSelMoreLeftRightGoods selectedRows={cur_sele_goods}
+                                  selectedRowKeys={cur_sele_goods_ids}
+                                  modalVisible={modalSpuShow} width={1000}
+                                  height={document.body.clientHeight - 400}
+                                  sldHandleSeleMoreModalCancle={this.sldHandleCancle} seleSvideo={this.seleSpu}
+                                  title={modalTitle} extra={this.sele_goods_param}/>
+        {/*商品多选的modal框-end*/}
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_05.js

@@ -0,0 +1,521 @@
+/*
+* 商品楼层
+* 标题可以自定义
+* 左侧图片+分类信息，中间和右侧是商品信息，属于标准的楼层模板
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  formItemLayoutModal,
+  sldComLanguage,
+} from '@/utils/utils';
+import {
+  sld_com_empty_arrar_4,
+  sld_com_empty_arrar_5,
+  sld_com_empty_arrar_9,
+} from '@/utils/util_data';
+import styles from '../pcdecorate.less';
+import SldModal from '@/components/SldModal/SldModal';
+import SldDiySingleImgModal from '@/components/SldDiySingleImgModal/SldDiySingleImgModal';
+import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
+import SldSelCatMore from '@/components/SldSelCatMore';
+import SldSelMoreLeftRightGoods from '@/components/SldSelMoreLeftRightGoods';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_05 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modal_tip: [],//弹框的提示语
+      modalTitle: '',//弹框的标题
+      cur_sele_goods: [],//当前选择的商品数据
+      cur_sele_goods_ids: [],//当前选择商品id数组
+      cur_sele_cats: [],//当前选择的分类数据
+      cur_sele_cats_ids: [],//当前选择分类id数组
+      cur_part: '',//当前操作的部分，比如left，center，right
+      cur_data: {},//当前操作数据
+      cur_data1: {},//当前操作数据
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      modalSingleImgVisible: false,//单图选择器modal是否显示
+      modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+      modalComCatSelectorShow: false,//分类选择modal是否显示
+      tpl_info: props.tpl_info,
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('标题名称')}`,
+        name: 'title_name',
+        placeholder: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,
+        extra: `${sldComLanguage('最多输入8个字')}`,
+        initialValue: '',
+        maxLength:8,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,
+        }],
+      }],//modal框的数据
+      data: {
+        type: 'adv_05',
+        title_info: {
+          title: {
+            label: `${sldComLanguage('标题')}`,
+            name: 'title',
+            initialValue: `${sldComLanguage('清仓打折')}`,
+            required: true,
+          },//标题名称
+          sub_title: {
+            label: `${sldComLanguage('子标题')}`,
+            name: 'sub_title',
+            initialValue: `${sldComLanguage('清仓打折')}`,
+            required: false,
+          },//子标题名称
+          link_type: '',
+          link_value: '',
+          info: {},
+        },
+        left: {
+          type: 'img_cat',
+          width: 298,
+          height: 482,
+          data: {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          },
+          cat_data: {
+            title_info: {
+              title_name: '',
+              title_color: '',//标题颜色
+            },
+            cat_ids: [],//分类id数组
+            cat_datas: [],//分类信息数组
+          },//分类信息
+        },//左侧板块信息
+        center: {
+          data: {
+            goods_ids: [],
+            goods_data: [],
+          },
+        },//中间板块信息
+        right: {
+          type: 'goods',
+          title_info: {
+            title_name: '',//标题名称
+            title_color: '',//标题颜色
+          },
+          data: {
+            goods_ids: [],
+            goods_data: [],
+          },
+        },//右侧板块信息
+      },
+    };
+  }
+
+  sele_goods_param = {
+    type: 'common',
+    total_num: 0,
+  };//商品选择器参数
+
+  sele_cats_param = {
+    type: 'common',
+    max_num: 0,
+  };//分类选择器参数
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part, modalTitle = '', modalTip = []) => {
+    let { data, modalVisible, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, cur_sele_cats, cur_sele_cats_ids, modalSingleImgVisible, cur_data, addData, modalSldDiyTitleLinkVisible, modalComCatSelectorShow } = this.state;
+    if (part == 'center') {
+      modalSpuShow = true;
+      cur_sele_goods = data[part].data.goods_data;
+      cur_sele_goods_ids = data[part].data.goods_ids;
+      cur_data = data[part];
+      this.sele_goods_param.total_num = 5;
+    } else if (part == 'right') {
+      modalSpuShow = true;
+      cur_sele_goods = data[part].data.goods_data;
+      cur_sele_goods_ids = data[part].data.goods_ids;
+      cur_data = data[part];
+      this.sele_goods_param.total_num = 4;
+    } else if (part == 'left_img') {
+      //左侧图片
+      cur_data = data.left;
+      modalSingleImgVisible = true;
+    } else if (part == 'left_cat_title') {
+      //左侧分类信息标题
+      cur_data = data.left.cat_data.title_info;
+      for (let i in addData) {
+        addData[i].initialValue = cur_data[addData[i].name];
+      }
+      modalVisible = true;
+    } else if (part == 'right_title') {
+      //右侧标题设置
+      cur_data = data.right.title_info;
+      for (let i in addData) {
+        addData[i].initialValue = cur_data[addData[i].name];
+      }
+      modalVisible = true;
+    } else if (part == 'top_title_link') {
+      //顶部标题设置
+      cur_data = data.title_info;
+      modalSldDiyTitleLinkVisible = true;
+    } else if (part == 'left_cat_data') {
+      //左侧分类标题设置
+      cur_sele_cats = data.left.cat_data.cat_datas;
+      cur_sele_cats_ids = data.left.cat_data.cat_ids;
+      cur_data = data.left.cat_data;
+      modalComCatSelectorShow = true;
+      this.sele_cats_param.max_num = 9;
+    }
+    this.setState({
+      cur_part: part,
+      cur_data,
+      modalVisible,
+      modalSpuShow,
+      cur_sele_goods,
+      cur_sele_goods_ids,
+      cur_sele_cats,
+      cur_sele_cats_ids,
+      modalSingleImgVisible,
+      modalTitle: modalTitle,
+      modal_tip: modalTip,
+      addData,
+      modalSldDiyTitleLinkVisible,
+      modalComCatSelectorShow,
+    });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { cur_part, data } = this.state;
+    if (cur_part == 'left_img') {
+      data.left.data = val;
+    } else if (cur_part == 'left_cat_title') {
+      data.left.cat_data.title_info = val;
+    } else if (cur_part == 'right_title') {
+      data.right.title_info = val;
+    } else if (cur_part == 'top_title_link') {
+      //顶部标题数据
+      for (let i in val) {
+        if (i == 'title') {
+          data.title_info.title.initialValue = val.title;
+        } else if (i == 'sub_title') {
+          data.title_info.sub_title.initialValue = val.sub_title;
+        } else if (i == 'link_type') {
+          data.title_info.link_type = val.link_type;
+          data.title_info.link_value = val.link_value;
+          data.title_info.info = val.info != undefined ? val.info : {};
+        }
+      }
+    }
+    this.setState({
+      data,
+      modalVisible: false,
+      modalSldDiyTitleLinkVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  sldHandleCancle = () => {
+    this.setState({
+      modalVisible: false,
+      modalSingleImgVisible: false,
+      modalSpuShow: false,
+      modalSldDiyTitleLinkVisible: false,
+      modalComCatSelectorShow: false,
+    });
+  };
+
+  //选中spu事件
+  seleSpu = (selectedRows, selectedRowKeys) => {
+    let { data, cur_part } = this.state;
+    if (cur_part == 'left_cat_data') {
+      //左侧分类数据
+      data.left.cat_data.cat_ids = selectedRowKeys;
+      data.left.cat_data.cat_datas = selectedRows;
+    } else {
+      data[cur_part].data.goods_ids = selectedRowKeys;
+      data[cur_part].data.goods_data = selectedRows;
+    }
+    this.setState({ data }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+      this.sldHandleCancle();
+    });
+  };
+
+  //渲染页面右侧商品数据
+  render_right_goods = (item, index) => {
+    let is_empty = typeof (item) != 'object' ? true : false;
+    return <div key={index} className={styles.item}>
+      <div className={styles.wrap}>
+        <div className={styles.left_pic}>
+          <a href="javascript:;" className={`${styles.ad_img} ${styles.example_text}`}>
+            {is_empty
+              ? <span>【90*90</span>
+              : <img src={item.mainImage} alt={item.goodsName}/>
+            }
+
+          </a>
+        </div>
+        <div className={styles.right_info}>
+          <p className={styles.title}>
+            <a href="javascript:;"
+               title={is_empty ? `${sldComLanguage('商品名称')}` : item.goodsName}>{is_empty ? `${sldComLanguage('商品名称')}` : item.goodsName}</a>
+          </p>
+          <p className={styles.price}>
+            ￥<span className={styles.money_number}>{is_empty ? 0.00 : item.goodsPrice}</span>
+          </p>
+        </div>
+      </div>
+    </div>;
+  };
+
+  //渲染中间商品信息
+  render_center_goods = (item, index) => {
+    let is_empty = typeof (item) != 'object' ? true : false;
+    let content = '';
+    let goods_name = is_empty ? `${sldComLanguage('商品名称')}` : item.goodsName;
+    let img_part = is_empty ? <span>{sldComLanguage('示例产品')}<br/>【162*162】</span> :
+      <img src={item.mainImage} alt={item.goodsName}/>;
+    let goods_price = is_empty ? 0.00 : item.goodsPrice;
+    if (index == 0) {
+      content = <div key={index} className={`${styles.big_item} ${styles.item}`}>
+        <div className={styles.wrap}>
+          <div className={styles.left_pic}>
+            <a href="javascript:;" className={`${styles.ad_img} ${styles.example_text}`}>
+              {img_part}
+            </a>
+          </div>
+          <div className={styles.right_info}>
+            <p className={styles.title}>
+              <a href="javascript:;" title={goods_name}>{goods_name}</a>
+            </p>
+            <p className={styles.price}>
+              ￥<span className={styles.money_number}>{goods_price}</span>
+            </p>
+          </div>
+        </div>
+      </div>;
+    } else {
+      content = <div key={index} className={`${styles.item} ${index > 1 ? styles.bottom_item : null}`}>
+        <div className={styles.wrap}>
+          <a href="javascript:;" className={`${styles.ad_img} ${styles.example_text} ${styles.special}`}>
+            {img_part}
+          </a>
+          <p className={styles.title}>
+            <a href="javascript:;" title={goods_name}>{goods_name}</a>
+          </p>
+          <p className={styles.price}>￥<span className={styles.money_number}>{goods_price}</span>
+          </p>
+        </div>
+      </div>;
+    }
+    return content;
+  };
+
+  render() {
+    const { data, submiting, modalVisible, cur_data, modalSpuShow, cur_sele_goods, cur_sele_goods_ids, cur_sele_cats, cur_sele_cats_ids, modalSingleImgVisible, modalTitle, modal_tip, addData, modalSldDiyTitleLinkVisible, modalComCatSelectorShow } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_05_wrap}`}>
+            <div className={styles.floor}>
+              <div className={styles.floor_layout}>
+                <div className={`${styles.floor_con} ${styles.floor_con3}`}>
+                  <div className={styles.floor_title}>
+                    <div className={styles.sld_mask}
+                         onClick={() => this.editTpl('top_title_link', `${sldComLanguage('标题设置')}`)}>{/*标题设置*/}
+                      <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                    </div>
+                    <h2>
+												<span
+                          className={styles.main_title}>{data.title_info.title.initialValue != '' ? data.title_info.title.initialValue : `${sldComLanguage('添加')}${sldComLanguage('标题')}`}</span>
+                      <span
+                        className={styles.sub_title}>{data.title_info.sub_title.initialValue != '' ? data.title_info.sub_title.initialValue : `${sldComLanguage('添加')}${sldComLanguage('子标题')}`}</span>
+                    </h2>
+                    <div className={styles.right_action}>
+                      <a
+                        href="javascript:void(0)">{sldComLanguage('查看更多')}<i>&gt;&gt;</i></a>
+                    </div>
+                  </div>
+                  <div className={styles.floor_content}>
+                    <div className={styles.floor_left}>
+                      <div className={styles.floor_bg_img}>
+                        <div className={styles.sld_mask}
+                             onClick={() => this.editTpl('left_img', `${sldComLanguage('左侧图片设置')}`)}>
+                          <span>{sldComLanguage('编辑')}</span>
+                        </div>
+                        <a className={`${styles.ad_img} ${styles.example_text}`}
+                           href="javascript:;">
+                          {data.left.data.imgUrl != '' ?
+                            <img src={data.left.data.imgUrl}/> :
+                            <span>{sldComLanguage('此处添加【298*482】图片')}</span>}
+                        </a>
+                      </div>
+                      <div className={styles.floor_words}>
+                        <div className={styles.floor_words_top_title}>
+                          <div className={styles.sld_mask}
+                               onClick={() => this.editTpl('left_cat_title', `${sldComLanguage('左侧分类信息标题')}`)}>
+                            <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                          </div>
+                          <font></font>
+                          <span>{data.left.cat_data.title_info.title_name != '' ? data.left.cat_data.title_info.title_name : `${sldComLanguage('添加')}${sldComLanguage('标题')}`}</span>
+                          <font></font>
+                        </div>
+                        <ul className={styles.cat_data_wrap}>
+                          <div className={styles.sld_mask}
+                               onClick={() => this.editTpl('left_cat_data', `${sldComLanguage('左侧分类选择9个')}`)}>
+                            <span>{sldComLanguage('编辑')}</span>
+                          </div>
+                          {data.left.cat_data.cat_datas.length == 0
+                            ? sld_com_empty_arrar_9.map((item, index) => {
+                              return <li key={index}>
+                                <a href="javascript:;"
+                                   title={sldComLanguage('分类名称')}>{sldComLanguage('分类名称')}</a>
+                              </li>;
+                            })
+                            : data.left.cat_data.cat_datas.map((item, index) => {
+                              return <li key={index}>
+                                <a href="javascript:;"
+                                   title={item.categoryName}>{item.categoryName}</a>
+                              </li>;
+                            })
+                          }
+                        </ul>
+                      </div>
+                    </div>
+                    <div
+                      style={{ borderColor: data.right.title_info.title_color ? data.right.title_info.title_color : '#fc5863' }}
+                      className={styles.floor_right}>
+                      <div className={styles.floor_right_main}>
+                        <div className={styles.sld_mask}
+                             onClick={() => this.editTpl('center', `${sldComLanguage('商品选择5个')}`)}>
+                          <span>{sldComLanguage('编辑')}</span>
+                        </div>
+                        <div className={styles.floor_content}>
+                          {data.center.data.goods_data.length == 0
+                            ? sld_com_empty_arrar_5.map((item, index) => {
+                              return this.render_center_goods(item, index);
+                            })
+                            : data.center.data.goods_data.map((item, index) => {
+                              return this.render_center_goods(item, index);
+                            })
+                          }
+                        </div>
+                      </div>
+
+                      <div className={styles.floor_right_new}>
+                        <div className={styles.floor_right_new_top_title}>
+                          <div className={styles.sld_mask}
+                               onClick={() => this.editTpl('right_title', `${sldComLanguage('右侧标题设置')}`)}>
+                            <span>{sldComLanguage('编辑')}</span>
+                          </div>
+                          <font
+                            style={{ background: data.right.title_info.title_color ? data.right.title_info.title_color : '#fc5863' }}></font>
+                          <span
+                            style={{ color: data.right.title_info.title_color ? data.right.title_info.title_color : '#fc5863' }}>{data.right.title_info.title_name != '' ? data.right.title_info.title_name : `${sldComLanguage('添加')}${sldComLanguage('标题')}`}</span>{/*添加标题*/}
+                          <font
+                            style={{ background: data.right.title_info.title_color ? data.right.title_info.title_color : '#fc5863' }}></font>
+                        </div>
+                        <div className={styles.floor_content}>
+                          <div className={styles.sld_mask}
+                               onClick={() => this.editTpl('right', `${sldComLanguage('商品选择4个')}`)}>
+                            <span>{sldComLanguage('编辑')}</span>
+                          </div>
+                          {data.right.data.goods_data.length == 0
+                            ? sld_com_empty_arrar_4.map((item, index) => {
+                              return this.render_right_goods(item, index);
+                            })
+                            : data.right.data.goods_data.map((item, index) => {
+                              return this.render_right_goods(item, index);
+                            })
+                          }
+                        </div>
+                      </div>
+
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <SldDiySingleImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalSingleImgVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+        />
+        <SldDiyTitleLinkModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalSldDiyTitleLinkVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+        />
+        { /*标题对话框-start*/}
+        <SldModal
+          title={modalTitle}
+          submiting={submiting}
+          width={500}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          formItemLayoutModal={formItemLayoutModal}
+          content={addData}
+        />
+        { /*标题对话框-end*/}
+        {/*添加spu的modal框-start*/}
+        {/*商品多选的modal框-start*/}
+        <SldSelMoreLeftRightGoods selectedRows={cur_sele_goods}
+                                  selectedRowKeys={cur_sele_goods_ids}
+                                  modalVisible={modalSpuShow} width={1000}
+                                  height={document.body.clientHeight - 400}
+                                  sldHandleSeleMoreModalCancle={this.sldHandleCancle} seleSvideo={this.seleSpu}
+                                  title={modalTitle} extra={this.sele_goods_param}/>
+        {/*商品多选的modal框-end*/}
+        <SldSelCatMore selectedRows={cur_sele_cats} selectedRowKeys={cur_sele_cats_ids}
+                       modalAddSkuIsShow={modalComCatSelectorShow} width={1000}
+                       sldHandleAddSkuModalCancle={this.sldHandleCancle} seleSku={this.seleSpu}
+                       modaltitle={modalTitle} extra={this.sele_cats_param}/>
+        {/*添加spu的modal框-end*/}
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_06.js

@@ -0,0 +1,157 @@
+/*
+* 四栏广告：一行四图，图片之间没有间隔
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	sldComLanguage,
+} from '@/utils/utils';
+import {
+	tpl_adv_06_modal_tip,
+} from '@/utils/util_data';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_06 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			modalTitle: `${sldComLanguage('编辑四栏广告')}`,//弹框的标题
+			modal_tip: [],//弹框的提示语
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modalSpuShow: false,//是否展示选择商品modal
+			modalSingleImgVisible: false,//单图选择器modal是否显示
+			modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+			modalComCatSelectorShow: false,//分类选择modal是否显示
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_06',
+				width: 302,
+				height: 0,//高度为0的话表示不限制
+				data:[{
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info:{},
+				},{
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info:{},
+				},{
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info:{},
+				},{
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info:{},
+				},],
+			},
+		};
+	}
+
+
+
+
+	componentDidMount() {
+		let { tpl_info } = this.state;
+		this.setState({
+			data: tpl_info,
+		});
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false });
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data } = this.state;
+		data.data = val;
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	//编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+	editTpl = (part='', modalTitle = '', modalTip = []) => {
+		let { data, modalVisible, } = this.state;
+		modalVisible = true;
+		this.setState({
+			cur_part: part,
+			cur_data: data,
+			modalVisible,
+			modal_tip: modalTip,
+		});
+	};
+
+
+	render() {
+		const { data, submiting,modalTitle,modalVisible,cur_data,modal_tip } = this.state;
+		return (
+			<Fragment>
+				<div ref={'wrap_html'}>
+					<div className={`${styles.w_sld_react_1210} ${styles.adv_06}`}>
+						<div className={` ${styles.adv_06_wrap}`}>
+							<div className={styles.sld_mask}
+								 onClick={() => this.editTpl('','',tpl_adv_06_modal_tip())}>
+								<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+							</div>
+							{data.data.map((item,index)=>(
+								<div key={index} className={styles.item}>
+									<a className={`${item.imgUrl?null:styles.show_tip}`} href="javascript:void(0);">
+										{item.imgUrl?<img src={item.imgUrl}/>:<span>{sldComLanguage('此处添加【302*高度不限】图片')}</span>}
+									</a>
+								</div>
+							))
+							}
+						</div>
+
+					</div>
+				</div>
+				<SldDiyMoreImgModal
+					width={1000}
+					title={modalTitle}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+          client={'pc'}
+				/>
+			</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_07.js

@@ -0,0 +1,147 @@
+/*
+* 三栏广告：一行三图，图片之间没有间隔
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  sldComLanguage,
+} from '@/utils/utils';
+import {
+  tpl_adv_07_modal_tip,
+} from '@/utils/util_data';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_07 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modalTitle: `${sldComLanguage('编辑三栏广告')}`,//弹框的标题
+      modal_tip: [],//弹框的提示语
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      modalSingleImgVisible: false,//单图选择器modal是否显示
+      modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+      modalComCatSelectorShow: false,//分类选择modal是否显示
+      tpl_info: props.tpl_info,
+      data: {
+        type: 'adv_07',
+        width: 403,
+        height: 0,//高度为0的话表示不限制
+        data: [{
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }, {
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }, {
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }],
+      },
+    };
+  }
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data } = this.state;
+    data.data = val;
+    this.setState({
+      data,
+      modalVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  //编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part = '', modalTitle = '', modalTip = []) => {
+    let { data, modalVisible } = this.state;
+    modalVisible = true;
+    this.setState({
+      cur_part: part,
+      cur_data: data,
+      modalVisible,
+      modal_tip: modalTip,
+    });
+  };
+
+
+  render() {
+    const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_07}`}>
+            <div className={` ${styles.adv_07_wrap}`}>
+              <div className={styles.sld_mask}
+                   onClick={() => this.editTpl('', '', tpl_adv_07_modal_tip())}>
+                <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+              </div>
+              {data.data.map((item, index) => (
+                <div key={index} className={styles.item}>
+                  <a className={`${item.imgUrl ? null : styles.show_tip}`} href="javascript:void(0);">
+                    {item.imgUrl ? <img src={item.imgUrl}/> : <span>{sldComLanguage('此处添加【403*高度不限】图片')}</span>}
+                  </a>
+                </div>
+              ))
+              }
+            </div>
+
+          </div>
+        </div>
+        <SldDiyMoreImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_08.js

@@ -0,0 +1,161 @@
+/*
+* 五栏广告：一行五图，图片之间没有间隔
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  sldComLanguage,
+} from '@/utils/utils';
+import {
+  tpl_adv_08_modal_tip,
+} from '@/utils/util_data';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_08 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modalTitle: `${sldComLanguage('编辑五栏广告')}`,//弹框的标题
+      modal_tip: [],//弹框的提示语
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      modalSingleImgVisible: false,//单图选择器modal是否显示
+      modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+      modalComCatSelectorShow: false,//分类选择modal是否显示
+      tpl_info: props.tpl_info,
+      data: {
+        type: 'adv_08',
+        width: 242,
+        height: 0,//高度为0的话表示不限制
+        data: [{
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }, {
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }, {
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }, {
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }, {
+          imgUrl: '',
+          imgPath: '',
+          title: '',
+          link_type: '',
+          link_value: '',
+          info: {},
+        }],
+      },
+    };
+  }
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data } = this.state;
+    data.data = val;
+    this.setState({
+      data,
+      modalVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  //编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part = '', modalTitle = '', modalTip = []) => {
+    let { data, modalVisible } = this.state;
+    modalVisible = true;
+    this.setState({
+      cur_part: part,
+      cur_data: data,
+      modalVisible,
+      modal_tip: modalTip,
+    });
+  };
+
+
+  render() {
+    const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_08}`}>
+            <div className={` ${styles.adv_08_wrap}`}>
+              <div className={styles.sld_mask}
+                   onClick={() => this.editTpl('', '', tpl_adv_08_modal_tip())}>
+                <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+              </div>
+              {data.data.map((item, index) => (
+                <div key={index} className={styles.item}>
+                  <a className={`${item.imgUrl ? null : styles.show_tip}`} href="javascript:void(0);">
+                    {item.imgUrl ? <img src={item.imgUrl}/> : <span>{sldComLanguage('此处添加【242*高度不限】图片')}</span>}
+                  </a>
+                </div>
+              ))
+              }
+            </div>
+          </div>
+        </div>
+        <SldDiyMoreImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_09.js

@@ -0,0 +1,434 @@
+/*
+* 一行三列广告，每列由标题和图片布局组成，效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  formItemLayoutModal,
+  sldComLanguage,
+} from '@/utils/utils';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldModal from '@/components/SldModal/SldModal';
+
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_09 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modalTitle: `${sldComLanguage('编辑五栏广告')}`,//弹框的标题
+      modal_tip: [],//弹框的提示语
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalImgVisible: false,//是否展示多图选择modal
+      tpl_info: props.tpl_info,
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('标题名称')}`,//标题名称
+        name: 'title_name',
+        placeholder: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,
+        extra: `${sldComLanguage('最多输入5个字')}`,
+        initialValue: '',
+        maxLength:5,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,
+        }],
+      }, {
+        type: 'more_color_picker',
+        label: `${sldComLanguage('标题颜色')}`,
+        name: 'title_color',
+        placeholder: `${sldComLanguage('请点击选择标题颜色')}`,
+        initialValue: '',
+        is_show: false,
+        callbackShow: (color) => this.sldHandleColorPicker(color, 'title_color', 'is_show'),
+        callback: (color) => this.sldHandleColorPicker(color, 'title_color', 'color'),
+      }, {
+        type: 'more_color_picker',
+        label: `${sldComLanguage('背景色')}`,
+        name: 'title_bg_color',
+        placeholder: `${sldComLanguage('请点击选择背景色')}`,
+        initialValue: '',
+        is_show: false,
+        callbackShow: (color) => this.sldHandleColorPicker(color, 'title_bg_color', 'is_show'),
+        callback: (color) => this.sldHandleColorPicker(color, 'title_bg_color', 'color'),
+      }, {
+        type: 'empty',
+        name: 'empty',
+        height: 0,
+      }],//modal框的数据
+      data: {
+        type: 'adv_09',
+        left: {
+          width: 187,
+          height: 123,//高度为0的话表示不限制
+          title_info: {
+            title_name: '',//标题名称
+            title_color: '#fff',//标题颜色
+            title_bg_color: '#6358d4',//标题背景色
+          },
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+        center: {
+          width: 376,
+          height: 123,//高度为0的话表示不限制
+          title_info: {
+            title_name: '',//标题名称
+            title_color: '#fff',//标题颜色
+            title_bg_color: '#e05795',//标题背景色
+          },
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+        right: {
+          width: 124,
+          height: 185,//高度为0的话表示不限制
+          title_info: {
+            title_name: '',//标题名称
+            title_color: '#fff',//标题颜色
+            title_bg_color: '#47c0ca',//标题背景色
+          },
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+      },
+    };
+  }
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false, modalImgVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data, addData, cur_part } = this.state;
+    if (this.operate_type == 'title_info') {
+      //编辑标题
+      data[cur_part]['title_info'].title_name = val.title_name;
+      for (let i in addData) {
+        if (addData[i].name == 'title_color' || addData[i].name == 'title_bg_color') {
+          data[cur_part]['title_info'][addData[i].name] = addData[i].initialValue;
+        }
+      }
+    } else if (this.operate_type == 'data') {
+      //编辑图片
+      data[cur_part].data = val.parent_data;
+    }
+    this.setState({
+      data,
+      modalVisible: false,
+      modalImgVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  //设置颜色  color:选中的颜色值  name:addData里面的name  type：color 修改颜色， is_show 是否显示
+  sldHandleColorPicker = (color, name, type) => {
+    let { addData } = this.state;
+    for (let i in addData) {
+      if (addData[i].name == name) {
+        if (type == 'is_show') {
+          addData[i].is_show = color;
+        } else if (type == 'color') {
+          addData[i].initialValue = color;
+        }
+      } else {
+        if (addData[i].name == 'empty') {
+          if (type == 'is_show' && color) {
+            addData[i].height = 300;
+          } else if (type == 'is_show' && !color) {
+            addData[i].height = 0;
+          }
+        }
+
+        if (type == 'is_show') {
+          addData[i].is_show = false;
+        }
+      }
+    }
+    this.setState({ addData: addData });
+  };
+
+  //编辑板块 part：标示哪一部分,比如left，center   type:标示修改的是标题还是data   modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part = '', type, modalTitle = '', modalTip = []) => {
+    let { data, modalVisible, addData, cur_data, modalImgVisible } = this.state;
+    if (type == 'title_info') {
+      for (let i in addData) {
+        addData[i].initialValue = data[part]['title_info'][addData[i].name];
+      }
+      modalVisible = true;
+    } else if (type == 'data') {
+      cur_data = data[part];
+      modalImgVisible = true;
+    }
+    this.operate_type = type;//当前的修改的内容  title_info/data
+    this.setState({
+      cur_part: part,
+      cur_data,
+      modalVisible,
+      modalImgVisible,
+      modal_tip: modalTip,
+      modalTitle: modalTitle,
+    });
+  };
+
+
+  render() {
+    const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip, addData, modalImgVisible } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_09}`}>
+            <div className={`${styles.adv_09_wrap}`}>
+              {/*左侧--start*/}
+              <div className={`${styles.item} ${styles.left}`}>
+                <div className={`${styles.top_title}`} style={{
+                  backgroundColor: data.left.title_info.title_bg_color ? data.left.title_info.title_bg_color : '#6358d4',
+                  color: data.left.title_info.title_color ? data.left.title_info.title_color : '#fff',
+                }}>
+                  {data.left.title_info.title_name ? data.left.title_info.title_name : `${sldComLanguage('请输入标题')}`}
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('left', 'title_info', `${sldComLanguage('左侧标题设置')}`, [`${sldComLanguage('请不要超过5个字')}`])}>
+                    <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                  </div>
+                </div>
+                <div className={`${styles.main_con}`}>
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('left', 'data', `${sldComLanguage('左侧图片设置')}`)}>
+                    <span>{sldComLanguage('编辑')}</span>
+                  </div>
+                  {data.left.data.map((item, index) => (
+                    <a key={index}
+                       className={`${index % 2 == 0 ? styles.first : null} ${styles.show_tip} ${index > data.left.data.length - 3 ? styles.sld_no_border_bottom : null}`}
+                       href="javascript:void(0);">
+                      {item.imgUrl
+                        ? <img src={item.imgUrl}/>
+                        : <span>{sldComLanguage('此处添加【187*123】图片')}</span>
+                      }
+
+                    </a>
+                  ))}
+                </div>
+              </div>
+              {/*左侧--end*/}
+              {/*中间--start*/}
+              <div className={`${styles.item} ${styles.center}`}>
+                <div className={`${styles.top_title}`} style={{
+                  backgroundColor: data.center.title_info.title_bg_color ? data.center.title_info.title_bg_color : '#e05795',
+                  color: data.center.title_info.title_color ? data.center.title_info.title_color : '#fff',
+                }}>
+                  {data.center.title_info.title_name ? data.center.title_info.title_name : `${sldComLanguage('请输入标题')}`}
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('center', 'title_info', `${sldComLanguage('中间标题设置')}`, [`${sldComLanguage('请不要超过5个字')}`])}>{/*中间标题设置*/}
+                    <span>{sldComLanguage('编辑')}</span>
+                  </div>
+                </div>
+                <div className={`${styles.main_con}`}>
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('center', 'data', `${sldComLanguage('中间图片设置')}`)}>
+                    <span>{sldComLanguage('编辑')}</span>
+                  </div>
+                  {data.center.data.map((item, index) => (
+                    <a key={index}
+                       className={`${styles.show_tip} ${index == data.center.data.length - 1 ? styles.sld_no_border_bottom : null}`}
+                       href="javascript:void(0);">
+                      {item.imgUrl
+                        ? <img src={item.imgUrl}/>
+                        : <span>{sldComLanguage('此处添加【376*123】图片')}</span>
+                      }
+
+                    </a>
+                  ))}
+                </div>
+              </div>
+              {/*中间--end*/}
+              {/*右侧--start*/}
+              <div className={`${styles.item} ${styles.right}`}>
+                <div className={`${styles.top_title}`} style={{
+                  backgroundColor: data.right.title_info.title_bg_color ? data.right.title_info.title_bg_color : '#47c0ca',
+                  color: data.right.title_info.title_color ? data.right.title_info.title_color : '#fff',
+                }}>
+                  {data.right.title_info.title_name ? data.right.title_info.title_name : `${sldComLanguage('请输入标题')}`}
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('right', 'title_info', `${sldComLanguage('右侧标题设置')}`, [`${sldComLanguage('请不要超过5个字')}`])}>{/*右侧标题设置*/}
+                    <span>{sldComLanguage('编辑')}</span>
+                  </div>
+                </div>
+                <div className={`${styles.main_con}`}>
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('right', 'data', `${sldComLanguage('右侧图片设置')}`)}>
+                    <span>{sldComLanguage('编辑')}</span>
+                  </div>
+                  {data.right.data.map((item, index) => (
+                    <a key={index}
+                       className={`${index % 3 == 0 ? styles.first : null} ${styles.show_tip}  ${index > data.right.data.length - 4 ? styles.sld_no_border_bottom : null}`}
+                       href="javascript:void(0);">
+                      {item.imgUrl
+                        ? <img src={item.imgUrl}/>
+                        : <span>{sldComLanguage('此处添加【124*185】图片')}</span>
+                      }
+
+                    </a>
+                  ))}
+                </div>
+              </div>
+              {/*右侧--end*/}
+            </div>
+          </div>
+        </div>
+        { /*标题对话框-start*/}
+        <SldModal
+          title={modalTitle}
+          submiting={submiting}
+          width={500}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          formItemLayoutModal={formItemLayoutModal}
+          content={addData}
+        />
+        { /*标题对话框-end*/}
+        <SldDiyMoreImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalImgVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_10.js

@@ -0,0 +1,239 @@
+/*
+* 由三行组成，每行都是由图片布局组成，效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  sldComLanguage,
+} from '@/utils/utils';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_10 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modalTitle: '',//弹框的标题
+      modal_tip: [],//弹框的提示语
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      modalSingleImgVisible: false,//单图选择器modal是否显示
+      modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+      modalComCatSelectorShow: false,//分类选择modal是否显示
+      tpl_info: props.tpl_info,
+      data: {
+        type: 'adv_10',
+        row_one: {
+          width: 1210,
+          height: 30,//高度为0的话表示不限制
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+        row_four: {
+          width: 295,
+          height: 220,//高度为0的话表示不限制
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+        row_five: {
+          width: 234,
+          height: 130,//高度为0的话表示不限制
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+      },
+    };
+  }
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data, cur_part } = this.state;
+    data[cur_part].data = val;
+    this.setState({
+      data,
+      modalVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  //编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part = '', modalTitle = '', modalTip = []) => {
+    let { data, modalVisible } = this.state;
+    modalVisible = true;
+    this.setState({
+      cur_part: part,
+      cur_data: data[part],
+      modalVisible,
+      modalTitle,
+      modal_tip: modalTip,
+    });
+  };
+
+
+  render() {
+    const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_10}`}>
+            <div className={` ${styles.adv_10_wrap}`}>
+              <div className={`${styles.row_one}`}>
+                <div className={styles.sld_mask}
+                     onClick={() => this.editTpl('row_one', `${sldComLanguage('顶部单图设置')}`)}>{/*顶部单图设置*/}
+                  <span>{sldComLanguage('编辑')}</span>
+                </div>
+                {data.row_one.data.map((item, index) => (
+                  <a key={index} href="javascript:void(0);">
+                    {item.imgUrl
+                      ? <img src={item.imgUrl}/>
+                      : <span>{sldComLanguage('此处添加【1210*30】图片')}</span>
+                    }
+                  </a>
+                ))}
+              </div>
+
+              <div className={`${styles.row_four}`}>
+                <div className={styles.sld_mask}
+                     onClick={() => this.editTpl('row_four', `${sldComLanguage('中间4图设置')}`)}>{/*中间4图设置*/}
+                  <span>{sldComLanguage('编辑')}</span>
+                </div>
+                {data.row_four.data.map((item, index) => (
+                  <a key={index} href="javascript:void(0);">
+                    {item.imgUrl
+                      ? <img src={item.imgUrl}/>
+                      : <span>{sldComLanguage('此处添加【295*220】图片')}</span>
+                    }
+                  </a>
+                ))}
+              </div>
+
+              <div className={`${styles.row_five}`}>
+                <div className={styles.sld_mask}
+                     onClick={() => this.editTpl('row_five', `${sldComLanguage('底部5图设置')}`)}>{/*底部5图设置*/}
+                  <span>{sldComLanguage('编辑')}</span>
+                </div>
+                {data.row_five.data.map((item, index) => (
+                  <a key={index} href="javascript:void(0);">
+                    {item.imgUrl
+                      ? <img src={item.imgUrl}/>
+                      : <span>{sldComLanguage('此处添加【234*130】图片')}</span>
+                    }
+                  </a>
+                ))}
+              </div>
+
+            </div>
+          </div>
+        </div>
+        <SldDiyMoreImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_11.js

@@ -0,0 +1,240 @@
+/*
+* 由三列组成，每列都是由图片布局组成，效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  sldComLanguage,
+} from '@/utils/utils';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_11 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      modalTitle: '',//弹框的标题
+      modal_tip: [],//弹框的提示语
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalSpuShow: false,//是否展示选择商品modal
+      modalSingleImgVisible: false,//单图选择器modal是否显示
+      modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+      modalComCatSelectorShow: false,//分类选择modal是否显示
+      tpl_info: props.tpl_info,
+      data: {
+        type: 'adv_11',
+        row_left: {
+          width: 400,
+          height: 170,//高度为0的话表示不限制
+          data: [{
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }, {
+            imgUrl: '',
+            imgPath: '',
+            title: '',
+            link_type: '',
+            link_value: '',
+            info: {},
+          }],
+        },
+        row_right: {
+          top: {
+            width: 400,
+            height: 350,//高度为0的话表示不限制
+            data: [{
+              imgUrl: '',
+              imgPath: '',
+              title: '',
+              link_type: '',
+              link_value: '',
+              info: {},
+            }],
+          },
+          bottom: {
+            width: 400,
+            height: 170,//高度为0的话表示不限制
+            data: [{
+              imgUrl: '',
+              imgPath: '',
+              title: '',
+              link_type: '',
+              link_value: '',
+              info: {},
+            }],
+          },
+        },
+      },
+    };
+  }
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data, cur_part } = this.state;
+    if (this.operate_type) {
+      data[cur_part][this.operate_type].data = val;
+    } else {
+      data[cur_part].data = val;
+    }
+    this.setState({
+      data,
+      modalVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  //编辑板块 part：标示哪一部分，比如left，center type 位置 top/bottom，主要用于区分右侧数据  modalTitle：弹框的标题  modalTip：弹框的整体提示
+  editTpl = (part = '', type, modalTitle = '', modalTip = []) => {
+    let { data, modalVisible, cur_data } = this.state;
+    if (type) {
+      cur_data = data[part][type];
+    } else {
+      cur_data = data[part];
+    }
+    modalVisible = true;
+    this.operate_type = type;//当前的修改的位置 top/bottom，主要用于区分右侧数据
+    this.setState({
+      cur_part: part,
+      cur_data,
+      modalVisible,
+      modalTitle,
+      modal_tip: modalTip,
+    });
+  };
+
+
+  render() {
+    const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_11}`}>
+            <div className={` ${styles.adv_11_wrap}`}>
+              <div className={`${styles.item} ${styles.row_left}`}>
+                <div className={styles.sld_mask}
+                     onClick={() => this.editTpl('row_left', '', `${sldComLanguage('左侧图片设置')}`)}>{/*左侧图片设置*/}
+                  <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                </div>
+                {data.row_left.data.map((item, index) => (
+                  <a className={`${index % 2 == 1 ? styles.lb_margin : null}`} key={index}
+                     href="javascript:void(0);">
+                    {item.imgUrl
+                      ? <img src={item.imgUrl}/>
+                      : <span>{sldComLanguage('此处添加【400*170】图片')}</span>
+                    }
+                  </a>
+                ))}
+              </div>
+              <div className={`${styles.item} ${styles.row_right}`}>
+                <div className={`${styles.top}`}>
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('row_right', 'top', `${sldComLanguage('右侧上部图片设置')}`)}>{/*右侧上部图片设置*/}
+                    <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                  </div>
+                  {data.row_right.top.data.map((item, index) => (
+                    <a className={`${index % 2 == 1 ? styles.lb_margin : null}`} key={index}
+                       href="javascript:void(0);">
+                      {item.imgUrl
+                        ? <img src={item.imgUrl}/>
+                        : <span>{sldComLanguage('此处添加【400*350】图片')}</span>
+                      }
+                    </a>
+                  ))}
+                </div>
+                <div className={`${styles.bottom}`}>
+                  <div className={styles.sld_mask}
+                       onClick={() => this.editTpl('row_right', 'bottom', `${sldComLanguage('右侧下部图片设置')}`)}>{/*右侧下部图片设置*/}
+                    <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                  </div>
+                  {data.row_right.bottom.data.map((item, index) => (
+                    <a className={`${index % 2 == 1 ? styles.lb_margin : null}`} key={index}
+                       href="javascript:void(0);">
+                      {item.imgUrl
+                        ? <img src={item.imgUrl}/>
+                        : <span>{sldComLanguage('此处添加【400*170】图片')}</span>
+                      }
+                    </a>
+                  ))}
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        <SldDiyMoreImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/adv_12.js

@@ -0,0 +1,326 @@
+/*
+* 由三列组成，每列都是由图片布局组成，右侧部分可以添加标题,效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	sldComLanguage,
+} from '@/utils/utils';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_12 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			modalTitle: '',//弹框的标题
+			modal_tip: [],//弹框的提示语
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modalSpuShow: false,//是否展示选择商品modal
+			modalSingleImgVisible: false,//单图选择器modal是否显示
+			modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+			modalComCatSelectorShow: false,//分类选择modal是否显示
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_12',
+				left: {
+					width: 396,
+					height: 450,//高度为0的话表示不限制
+					data: [{
+						imgUrl: '',
+						imgPath: '',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}],
+				},
+				center: {
+					width: 183,
+					height: 210,//高度为0的话表示不限制
+					data: [{
+						imgUrl: '',
+						imgPath: '',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}, {
+						imgUrl: '',
+						imgPath: '',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}, {
+						imgUrl: '',
+						imgPath: '',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}, {
+						imgUrl: '',
+						imgPath: '',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}],
+				},
+				right: {
+					title_info: {
+						title: {
+							label: `标题`,//标题
+							name: 'title',
+							initialValue: `清仓打折`,//清仓打折
+							required: true,
+						},//标题名称
+						sub_title: {
+							label: `子标题`,//子标题
+							name: 'sub_title',
+							initialValue: `清仓打折`,//清仓打折
+							required: false,
+						},//子标题名称
+						link_type: '',
+						link_value: '',
+						info: {},
+					},
+					top: {
+						width: 376,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+					bottom: {
+						width: 183,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}, {
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+
+				},
+			},
+		};
+	}
+
+
+	componentDidMount() {
+		let { tpl_info } = this.state;
+		this.setState({
+			data: tpl_info,
+		});
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false,modalSldDiyTitleLinkVisible: false });
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data, cur_part } = this.state;
+		if(cur_part == 'right_top'){
+			data['right']['top'].data = val;
+		}else if(cur_part == 'right_bottom'){
+			data['right']['bottom'].data = val;
+		}else if(cur_part == 'right_title'){
+			for (let i in val) {
+				if (i == 'title') {
+					data['right']['title_info'].title.initialValue = val.title;
+				} else if (i == 'sub_title') {
+					data['right']['title_info'].sub_title.initialValue = val.sub_title;
+				} else if (i == 'link_type') {
+					data['right']['title_info'].link_type = val.link_type;
+					data['right']['title_info'].link_value = val.link_value;
+					data['right']['title_info'].info = val.info != undefined ? val.info : {};
+				}
+			}
+		}else{
+			data[cur_part].data = val;
+		}
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	//编辑板块 part：标示哪一部分，比如left，center  modalTitle：弹框的标题  modalTip：弹框的整体提示
+	editTpl = (part = '', modalTitle = '', modalTip = []) => {
+		let { data, modalVisible, cur_data,modalSldDiyTitleLinkVisible } = this.state;
+		if(part == 'right_top'){
+			cur_data = data['right']['top'];
+			modalVisible = true;
+		}else if(part == 'right_bottom'){
+			cur_data = data['right']['bottom'];
+			modalVisible = true;
+		}else if(part == 'right_title'){
+			//编辑标题
+			cur_data = data['right']['title_info'];
+			modalSldDiyTitleLinkVisible = true;
+		}else{
+			cur_data = data[part];
+			modalVisible = true;
+		}
+		this.setState({
+			cur_part: part,
+			cur_data,
+			modalVisible,
+			modalSldDiyTitleLinkVisible,
+			modalTitle,
+			modal_tip: modalTip,
+		});
+	};
+
+
+	render() {
+		const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip,modalSldDiyTitleLinkVisible } = this.state;
+		return (
+				<Fragment>
+					<div ref={'wrap_html'}>
+						<div className={`${styles.w_sld_react_1210} ${styles.adv_12}`}>
+							<div className={` ${styles.adv_12_wrap}`}>
+								<div className={`${styles.item} ${styles.left} ${styles.clear_padding}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('left', `${sldComLanguage('左侧图片设置')}`)}>
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.left.data.map((item,index) => (
+										<a key={index} className={`${styles.l_img}`}
+										   href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【396*450】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+								<div className={`${styles.item} ${styles.center}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('center',`${sldComLanguage('中间图片设置')}`)}>
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.center.data.map((item, index) => (
+										<a key={index}
+										   className={`${index % 2 == 1 ? styles.l_b_margin : null}`}
+										   href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【183*210】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+
+
+								<div className={`${styles.item} ${styles.right}`}>
+									<div className={`${styles.title_wrap}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('right_title', `${sldComLanguage('右侧标题设置')}`,[`${sldComLanguage('标题不能为空，最多输入5个字')}`,`${sldComLanguage('子标题不能为空，最多输入10个字')}`])}>{/*右侧标题设置*/}
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										<a className={`${styles.title}`}
+										   href="javascript:void(0);">{data.right.title_info.title.initialValue ? data.right.title_info.title.initialValue : `${sldComLanguage('添加标题')}`}</a>
+										<span>》</span>
+										<a className={`${styles.subtitle}`}>{data.right.title_info.title.initialValue ? data.right.title_info.sub_title.initialValue : `${sldComLanguage('添加子标题')}`}</a>
+									</div>
+									<div className={`${styles.img_top}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('right_top', `${sldComLanguage('右侧上部图片设置')}`)}>
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										{data.right.top.data.map((item, index) => (
+											<a key={index} href="javascript:void(0);">
+												{item.imgUrl
+													? <img src={item.imgUrl}/>
+													: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+												}
+											</a>
+										))}
+									</div>
+									<div className={`${styles.img_bottom}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('right_bottom',`${sldComLanguage('右侧下部图片设置')}`)}>
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										{data.right.bottom.data.map((item, index) => (
+											<a key={index} href="javascript:void(0);">
+												{item.imgUrl
+													? <img src={item.imgUrl}/>
+													: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+												}
+											</a>
+										))}
+									</div>
+								</div>
+
+							</div>
+						</div>
+					</div>
+					<SldDiyMoreImgModal
+						width={1000}
+						title={modalTitle}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						content={cur_data}
+						modal_tip={modal_tip}
+            client={'pc'}
+					/>
+					{/*标题+链接设置*/}
+					<SldDiyTitleLinkModal
+						width={1000}
+						title={modalTitle}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalSldDiyTitleLinkVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						content={cur_data}
+						modal_tip={modal_tip}
+            client={'pc'}
+					/>
+					{/*标题+链接设置*/}
+				</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_13.js

@@ -0,0 +1,365 @@
+/*
+* 由三列组成，每列都是由图片布局组成，右侧部分可以添加标题,效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	sldComLanguage,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_13 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			modalTitle: '',//弹框的标题
+			modal_tip: [],//弹框的提示语
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modalSpuShow: false,//是否展示选择商品modal
+			modalSingleImgVisible: false,//单图选择器modal是否显示
+			modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+			modalComCatSelectorShow: false,//分类选择modal是否显示
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_13',
+				left: {
+					title_info: {
+						title: {
+							label: `${sldComLanguage('标题')}`,
+							name: 'title',
+							initialValue: `${sldComLanguage('清仓打折')}`,
+							required: true,
+						},//标题名称
+						sub_title: {
+							label: `${sldComLanguage('子标题')}`,
+							name: 'sub_title',
+							initialValue: `${sldComLanguage('清仓打折')}`,
+							required: false,
+						},//子标题名称
+						link_type: '',
+						link_value: '',
+						info: {},
+					},
+					top: {
+						width: 376,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+					bottom: {
+						width: 183,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}, {
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+
+				},
+				center: {
+					title_info: {
+						title: {
+							label: `${sldComLanguage('标题')}`,
+							name: 'title',
+							initialValue: `${sldComLanguage('清仓打折')}`,
+							required: true,
+						},//标题名称
+						sub_title: {
+							label: `${sldComLanguage('子标题')}`,
+							name: 'sub_title',
+							initialValue: `${sldComLanguage('清仓打折')}`,
+							required: false,
+						},//子标题名称
+						link_type: '',
+						link_value: '',
+						info: {},
+					},
+					top: {
+						width: 376,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+					bottom: {
+						width: 183,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}, {
+							imgUrl: '',
+							imgPath: '',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+
+				},
+				right: {
+					width: 396,
+					height: 450,//高度为0的话表示不限制
+					data: [{
+						imgUrl: '',
+						imgPath: '',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}],
+				},
+			},
+		};
+	}
+
+
+	componentDidMount() {
+		let { tpl_info } = this.state;
+		this.setState({
+			data: tpl_info,
+		});
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false,modalSldDiyTitleLinkVisible: false });
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data, cur_part } = this.state;
+		if(cur_part == 'right'&&this.operate_type == ''){
+			data[cur_part].data = val;
+		}else{
+			if(this.operate_type == 'title_info'){
+				for (let i in val) {
+					if (i == 'title') {
+						data[cur_part][this.operate_type].title.initialValue = val.title;
+					} else if (i == 'sub_title') {
+						data[cur_part][this.operate_type].sub_title.initialValue = val.sub_title;
+					} else if (i == 'link_type') {
+						data[cur_part][this.operate_type].link_type = val.link_type;
+						data[cur_part][this.operate_type].link_value = val.link_value;
+						data[cur_part][this.operate_type].info = val.info != undefined ? val.info : {};
+					}
+				}
+			}else{
+				data[cur_part][this.operate_type].data = val;
+			}
+
+		}
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	//编辑板块 part：标示哪一部分，比如left，center type：某一模块下的具体部分  modalTitle：弹框的标题  modalTip：弹框的整体提示
+	editTpl = (part = '',type='', modalTitle = '', modalTip = []) => {
+		let { data, modalVisible, cur_data,modalSldDiyTitleLinkVisible } = this.state;
+		if(part == 'right'&&type == ''){
+			cur_data = data[part];
+			modalVisible = true;
+		}else{
+			cur_data = data[part][type];
+			if(type == 'title_info'){
+				modalSldDiyTitleLinkVisible = true;
+			}else{
+				modalVisible = true;
+			}
+
+		}
+		this.operate_type = type;//当前模块下的具体部分
+		this.setState({
+			cur_part: part,
+			cur_data,
+			modalVisible,
+			modalSldDiyTitleLinkVisible,
+			modalTitle,
+			modal_tip: modalTip,
+		});
+	};
+
+
+	render() {
+		const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip,modalSldDiyTitleLinkVisible } = this.state;
+		return (
+				<Fragment>
+					<div ref={'wrap_html'}>
+						<div className={`${styles.w_sld_react_1210} ${styles.adv_13}`}>
+							<div className={` ${styles.adv_13_wrap}`}>
+								<div className={`${styles.item} ${styles.right}`}>
+									<div className={`${styles.title_wrap}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('left', 'title_info',`${sldComLanguage('左侧标题设置')}`,[`${sldComLanguage('标题不能为空，最多输入5个字，子标题不能为空，最多输入10个字')}`])}>{/*左侧标题设置*/}
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										<a className={`${styles.title}`}
+										   href="javascript:void(0);">{data.left.title_info.title.initialValue ? data.left.title_info.title.initialValue : `${sldComLanguage('添加标题')}`}</a>
+										<span>》</span>
+										<a className={`${styles.subtitle}`}>{data.left.title_info.title.initialValue ? data.left.title_info.sub_title.initialValue : `${sldComLanguage('添加子标题')}`}</a>
+									</div>
+									<div className={`${styles.img_top}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('left','top', `${sldComLanguage('左侧上部图片设置')}`)}>
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										{data.left.top.data.map((item, index) => (
+											<a key={index} href="javascript:void(0);">
+												{item.imgUrl
+													? <img src={item.imgUrl}/>
+													: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+												}
+											</a>
+										))}
+									</div>
+									<div className={`${styles.img_bottom}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('left','bottom',`${sldComLanguage('左侧下部图片设置')}`)}>
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										{data.left.bottom.data.map((item, index) => (
+											<a key={index} href="javascript:void(0);">
+												{item.imgUrl
+													? <img src={item.imgUrl}/>
+													: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+												}
+											</a>
+										))}
+									</div>
+								</div>
+								<div className={`${styles.item} ${styles.right}`}>
+									<div className={`${styles.title_wrap}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('center','title_info', `${sldComLanguage('中间标题设置')}`,[`${sldComLanguage('标题不能为空，最多输入5个字，子标题不能为空，最多输入10个字')}`])}>{/*中间标题设置*/}
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										<a className={`${styles.title}`}
+										   href="javascript:void(0);">{data.center.title_info.title.initialValue ? data.center.title_info.title.initialValue : `${sldComLanguage('添加标题')}`}</a>
+										<span>》</span>
+										<a className={`${styles.subtitle}`}>{data.center.title_info.title.initialValue ? data.center.title_info.sub_title.initialValue : `${sldComLanguage('添加子标题')}`}</a>
+									</div>
+									<div className={`${styles.img_top}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('center','top', `${sldComLanguage('中间上部图片设置')}`)}>{/*中间上部图片设置*/}
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										{data.center.top.data.map((item, index) => (
+											<a key={index} href="javascript:void(0);">
+												{item.imgUrl
+													? <img src={item.imgUrl}/>
+													: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+												}
+											</a>
+										))}
+									</div>
+									<div className={`${styles.img_bottom}`}>
+										<div className={styles.sld_mask}
+											 onClick={() => this.editTpl('center','bottom',`${sldComLanguage('中间下部图片设置')}`)}>{/*中间下部图片设置*/}
+											<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+										</div>
+										{data.center.bottom.data.map((item, index) => (
+											<a key={index} href="javascript:void(0);">
+												{item.imgUrl
+													? <img src={item.imgUrl}/>
+													: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+												}
+											</a>
+										))}
+									</div>
+								</div>
+								<div className={`${styles.item} ${styles.left} ${styles.clear_padding}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('right','', `${sldComLanguage('右侧图片设置')}`)}>{/*右侧图片设置*/}
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.right.data.map((item,index) => (
+										<a key={index} className={`${styles.l_img}`}
+										   href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【396*450】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+							</div>
+						</div>
+					</div>
+					<SldDiyMoreImgModal
+						width={1000}
+						title={modalTitle}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						content={cur_data}
+						modal_tip={modal_tip}
+            client={'pc'}
+					/>
+					{/*标题+链接设置*/}
+					<SldDiyTitleLinkModal
+						width={1000}
+						title={modalTitle}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalSldDiyTitleLinkVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						content={cur_data}
+						modal_tip={modal_tip}
+					/>
+					{/*标题+链接设置*/}
+				</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_14.js

@@ -0,0 +1,369 @@
+/*
+* 商品楼层，左侧图片+分类，右侧商品,效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	sldComLanguage,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_14 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			modalTitle: '',//弹框的标题
+			modal_tip: [],//弹框的提示语
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modalSpuShow: false,//是否展示选择商品modal
+			modalSingleImgVisible: false,//单图选择器modal是否显示
+			modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+			modalComCatSelectorShow: false,//分类选择modal是否显示
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_14',
+				left: {
+					title_info: {
+						title: {
+							label: `${sldComLanguage('标题')}`,
+							name: 'title',
+							initialValue: `${sldComLanguage('清仓打折')}`,
+							required: true,
+						},//标题名称
+						sub_title: {
+							label: `${sldComLanguage('子标题')}`,
+							name: 'sub_title',
+							initialValue: `${sldComLanguage('清仓打折')}`,
+							required: false,
+						},//子标题名称
+						link_type: '',
+						link_value: '',
+						info: {},
+					},
+					top: {
+						width: 376,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+					bottom: {
+						width: 183,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}, {
+							imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+
+				},
+				center: {
+					title_info: {
+						title: {
+							label: `${sldComLanguage('标题')}`,//标题
+							name: 'title',
+							initialValue: `${sldComLanguage('清仓打折')}`,//清仓打折
+							required: true,
+						},//标题名称
+						sub_title: {
+							label: `${sldComLanguage('子标题')}`,//子标题
+							name: 'sub_title',
+							initialValue: `${sldComLanguage('清仓打折')}`,//清仓打折
+							required: false,
+						},//子标题名称
+						link_type: '',
+						link_value: '',
+						info: {},
+					},
+					top: {
+						width: 376,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+					bottom: {
+						width: 183,
+						height: 180,//高度为0的话表示不限制
+						data: [{
+							imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}, {
+							imgUrl: 'https://img.alicdn.com/simba/img/TB1jsBeKYPpK1RjSZFFSuu5PpXa.jpg',
+							imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+							title: '',
+							link_type: '',
+							link_value: '',
+							info: {},
+						}],
+					},
+
+				},
+				right: {
+					width: 396,
+					height: 450,//高度为0的话表示不限制
+					data: [{
+						imgUrl: 'http://img.slodon.cn/data/upload/fixture/06105719695849326.png',
+						imgPath: '/images/brand/3e56e20d-453d-4cf8-906f-a928de37ce6a.png',
+						title: '',
+						link_type: '',
+						link_value: '',
+						info: {},
+					}],
+				},
+			},
+		};
+	}
+
+
+	componentDidMount() {
+		// let { tpl_info } = this.state;
+		// this.setState({
+		// 	data: tpl_info,
+		// });
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false,modalSldDiyTitleLinkVisible: false });
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data, cur_part } = this.state;
+		if(cur_part == 'right'&&this.operate_type == ''){
+			data[cur_part].data = val;
+		}else{
+			if(this.operate_type == 'title_info'){
+				for (let i in val) {
+					if (i == 'title') {
+						data[cur_part][this.operate_type].title.initialValue = val.title;
+					} else if (i == 'sub_title') {
+						data[cur_part][this.operate_type].sub_title.initialValue = val.sub_title;
+					} else if (i == 'link_type') {
+						data[cur_part][this.operate_type].link_type = val.link_type;
+						data[cur_part][this.operate_type].link_value = val.link_value;
+						data[cur_part][this.operate_type].info = val.info != undefined ? val.info : {};
+					}
+				}
+			}else{
+				data[cur_part][this.operate_type].data = val;
+			}
+
+		}
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			// this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	//编辑板块 part：标示哪一部分，比如left，center type：某一模块下的具体部分  modalTitle：弹框的标题  modalTip：弹框的整体提示
+	editTpl = (part = '',type='', modalTitle = '', modalTip = []) => {
+		let { data, modalVisible, cur_data,modalSldDiyTitleLinkVisible } = this.state;
+		if(part == 'right'&&type == ''){
+			cur_data = data[part];
+			modalVisible = true;
+		}else{
+			cur_data = data[part][type];
+			if(type == 'title_info'){
+				modalSldDiyTitleLinkVisible = true;
+			}else{
+				modalVisible = true;
+			}
+
+		}
+		this.operate_type = type;//当前模块下的具体部分
+		this.setState({
+			cur_part: part,
+			cur_data,
+			modalVisible,
+			modalSldDiyTitleLinkVisible,
+			modalTitle,
+			modal_tip: modalTip,
+		});
+	};
+
+
+	render() {
+		const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip,modalSldDiyTitleLinkVisible } = this.state;
+		return (
+			<Fragment>
+				<div ref={'wrap_html'}>
+					<div className={`${styles.w_sld_react_1210} ${styles.adv_14}`}>
+						<div className={` ${styles.adv_14_wrap}`}>
+							<div className={`${styles.item} ${styles.right}`}>
+								<div className={`${styles.title_wrap}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('left', 'title_info',`${sldComLanguage('左侧标题设置')}`,[`${sldComLanguage('标题不能为空，最多输入5个字，子标题不能为空，最多输入10个字')}`])}>{/*左侧标题设置*/}
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									<a className={`${styles.title}`}
+									   href="javascript:void(0);">{data.left.title_info.title.initialValue ? data.left.title_info.title.initialValue : `${sldComLanguage('添加标题')}`}</a>
+									<span>》</span>
+									<a className={`${styles.subtitle}`}>{data.left.title_info.title.initialValue ? data.left.title_info.sub_title.initialValue : `${sldComLanguage('添加子标题')}`}</a>
+								</div>
+								<div className={`${styles.img_top}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('left','top', `${sldComLanguage('左侧上部图片设置')}`)}>
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.left.top.data.map((item, index) => (
+										<a key={index} href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+								<div className={`${styles.img_bottom}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('left','bottom',`${sldComLanguage('左侧下部图片设置')}`)}>{/*左侧上部图片设置*/}
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.left.bottom.data.map((item, index) => (
+										<a key={index} href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+							</div>
+							<div className={`${styles.item} ${styles.right}`}>
+								<div className={`${styles.title_wrap}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('center','title_info', `${sldComLanguage('中间标题设置')}`,[`${sldComLanguage('标题不能为空，最多输入5个字，子标题不能为空，最多输入10个字')}`])}>{/*中间标题设置*/}
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									<a className={`${styles.title}`}
+									   href="javascript:void(0);">{data.center.title_info.title.initialValue ? data.center.title_info.title.initialValue : `${sldComLanguage('添加标题')}`}</a>
+									<span>》</span>
+									<a className={`${styles.subtitle}`}>{data.center.title_info.title.initialValue ? data.center.title_info.sub_title.initialValue : `${sldComLanguage('添加子标题')}`}</a>
+								</div>
+								<div className={`${styles.img_top}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('center','top', `${sldComLanguage('中间上部图片设置')}`)}>{/*中间上部图片设置*/}
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.center.top.data.map((item, index) => (
+										<a key={index} href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【376*180】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+								<div className={`${styles.img_bottom}`}>
+									<div className={styles.sld_mask}
+										 onClick={() => this.editTpl('center','bottom',`${sldComLanguage('中间下部图片设置')}`)}>
+										<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+									</div>
+									{data.center.bottom.data.map((item, index) => (
+										<a key={index} href="javascript:void(0);">
+											{item.imgUrl
+												? <img src={item.imgUrl}/>
+												: <span>{sldComLanguage('此处添加【183*180】图片')}</span>
+											}
+										</a>
+									))}
+								</div>
+							</div>
+							<div className={`${styles.item} ${styles.left} ${styles.clear_padding}`}>
+								<div className={styles.sld_mask}
+									 onClick={() => this.editTpl('right','', `${sldComLanguage('右侧图片设置')}`)}>{/*右侧图片设置*/}
+									<span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+								</div>
+								{data.right.data.map((item,index) => (
+									<a key={index} className={`${styles.l_img}`}
+									   href="javascript:void(0);">
+										{item.imgUrl
+											? <img src={item.imgUrl}/>
+											: <span>{sldComLanguage('此处添加【396*450】图片')}</span>
+										}
+									</a>
+								))}
+							</div>
+
+
+
+
+
+						</div>
+					</div>
+				</div>
+				<SldDiyMoreImgModal
+					width={1000}
+					title={modalTitle}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+				{/*标题+链接设置*/}
+				<SldDiyTitleLinkModal
+					width={1000}
+					title={modalTitle}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalSldDiyTitleLinkVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+				{/*标题+链接设置*/}
+			</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_15.js

@@ -0,0 +1,235 @@
+/*
+* 商品楼层，都是商品,效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+	sldIconBtn,
+	sldLlineRtextAddGoodsAddMargin,
+	showMoreHelpTip,
+	getSldEmptyH,
+	sldComLanguage,
+} from '@/utils/utils';
+import {
+	add_tpl_tip,
+} from '@/utils/util_data';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import router from 'umi/router';
+import SldDiyTitleLinkModal from '@/components/SldDiyTitleLinkModal/SldDiyTitleLinkModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Adv_15 extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			modalTitle: '',//弹框的标题
+			modal_tip: [],//弹框的提示语
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modalSpuShow: false,//是否展示选择商品modal
+			modalSingleImgVisible: false,//单图选择器modal是否显示
+			modalSldDiyTitleLinkVisible: false,//标题链接modal是否显示
+			modalComCatSelectorShow: false,//分类选择modal是否显示
+			tpl_info: props.tpl_info,
+			data: {
+				type: 'adv_15',
+				data: [{
+					title_info: {
+						title_name: '',//标题名称
+					},
+					goods_ids: [],
+					goods_data: [],
+				},{
+					title_info: {
+						title_name: '',//标题名称
+					},
+					goods_ids: [],
+					goods_data: [],
+				},{
+					title_info: {
+						title_name: '',//标题名称
+					},
+					goods_ids: [],
+					goods_data: [],
+				},{
+					title_info: {
+						title_name: '',//标题名称
+					},
+					goods_ids: [],
+					goods_data: [],
+				},{
+					title_info: {
+						title_name: '',//标题名称
+					},
+					goods_ids: [],
+					goods_data: [],
+				}],
+			},
+		};
+	}
+
+
+	componentDidMount() {
+		// let { tpl_info } = this.state;
+		// this.setState({
+		// 	data: tpl_info,
+		// });
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false,modalSldDiyTitleLinkVisible: false });
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data, cur_part } = this.state;
+		if(cur_part == 'right'&&this.operate_type == ''){
+			data[cur_part].data = val;
+		}else{
+			if(this.operate_type == 'title_info'){
+				for (let i in val) {
+					if (i == 'title') {
+						data[cur_part][this.operate_type].title.initialValue = val.title;
+					} else if (i == 'sub_title') {
+						data[cur_part][this.operate_type].sub_title.initialValue = val.sub_title;
+					} else if (i == 'link_type') {
+						data[cur_part][this.operate_type].link_type = val.link_type;
+						data[cur_part][this.operate_type].link_value = val.link_value;
+						data[cur_part][this.operate_type].info = val.info != undefined ? val.info : {};
+					}
+				}
+			}else{
+				data[cur_part][this.operate_type].data = val;
+			}
+
+		}
+		this.setState({
+			data,
+			modalVisible: false,
+		}, () => {
+			// this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+		});
+	};
+
+	//编辑板块 part：标示哪一部分，比如left，center type：某一模块下的具体部分  modalTitle：弹框的标题  modalTip：弹框的整体提示
+	editTpl = (part = '',type='', modalTitle = '', modalTip = []) => {
+		let { data, modalVisible, cur_data,modalSldDiyTitleLinkVisible } = this.state;
+		if(part == 'right'&&type == ''){
+			cur_data = data[part];
+			modalVisible = true;
+		}else{
+			cur_data = data[part][type];
+			if(type == 'title_info'){
+				modalSldDiyTitleLinkVisible = true;
+			}else{
+				modalVisible = true;
+			}
+
+		}
+		this.operate_type = type;//当前模块下的具体部分
+		this.setState({
+			cur_part: part,
+			cur_data,
+			modalVisible,
+			modalSldDiyTitleLinkVisible,
+			modalTitle,
+			modal_tip: modalTip,
+		});
+	};
+
+
+	render() {
+		const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip,modalSldDiyTitleLinkVisible } = this.state;
+		return (
+			<div className={`${global.common_page} ${styles.allow_show_edit}`}>
+				<Fragment>
+					{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('模板编辑')}`, 0, 0, 10)}{/*模板编辑*/}
+					{showMoreHelpTip(`${sldComLanguage('操作提示')}`, add_tpl_tip())}{/*操作提示*/}
+					{getSldEmptyH(10)}
+					{/*公共功能条-start*/}
+					<div className={global.operate_bg}>
+						{sldIconBtn(() => router.replace(this.props.back_route), `${sldComLanguage('返回')}${sldComLanguage('模板列表')}`, 7, 7, 15, 15, 4, 'fanhui', '#FA6F1E')}{/*返回模板列表*/}
+					</div>
+					{/*公共功能条-end*/}
+					<div className={`${styles.diy_part_wrap} ${styles.allow_show_edit}`}>
+						<div ref={'wrap_html'}>
+							<div className={`${styles.w_sld_react_1210} ${styles.adv_15}`}>
+								<div className={` ${styles.adv_15_wrap}`}>
+
+									<div className={`${styles.top_title}`}>
+										<h2 className={`${styles.title}`}>{sldComLanguage('添加标题')}</h2>
+										<ul className={`${styles.tab_nav}`}>
+											<li className={`${styles.tabs_selected}`}>
+												<i className={`${styles.arrow}`}></i>
+												<h3>1332</h3>
+											</li>
+											<li className={`${styles.arrow}`}>
+												<i className="arrow"></i>
+												<h3>12312</h3>
+											</li>
+											<li className="">
+												<i className={`${styles.arrow}`}></i>
+												<h3>添加商品</h3>
+											</li>
+											<li className="">
+												<i className={`${styles.arrow}`}></i>
+												<h3>3333</h3>
+											</li>
+											<li className="">
+												<i className={`${styles.arrow}`}></i>
+												<h3>添加商品</h3>
+											</li>
+										</ul>
+									</div>
+
+
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<SldDiyMoreImgModal
+						width={1000}
+						title={modalTitle}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						content={cur_data}
+						modal_tip={modal_tip}
+					/>
+					{/*标题+链接设置*/}
+					<SldDiyTitleLinkModal
+						width={1000}
+						title={modalTitle}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalSldDiyTitleLinkVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						content={cur_data}
+						modal_tip={modal_tip}
+					/>
+					{/*标题+链接设置*/}
+				</Fragment>
+			</div>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/adv_19.js

@@ -0,0 +1,710 @@
+/*
+* 商品楼层，都是商品,效果图可以点击同名图片查看
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {
+  formItemLayoutModal,
+  sldComLanguage,
+} from '@/utils/utils';
+import styles from '../pcdecorate.less';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+import SldModal from '@/components/SldModal/SldModal';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class Adv_19 extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      l_tab_index: 0,//左侧选中的tab
+      r_tab_index: 0,//右侧选中的tab
+      modalTitle: '',//弹框的标题
+      modal_tip: [],//弹框的提示语
+      submiting: false,//按钮loading
+      modalVisible: false,//是否展示modal
+      modalTitleVisible: false,//是否展示标题modal
+      tpl_info: props.tpl_info,
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('标题名称')}`,//标题名称
+        name: 'title_name',
+        placeholder: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,//请输入标题名称
+        extra: `${sldComLanguage('最多输入5个字')}`,//标题名称不能为空，8个字符以内
+        initialValue: '',
+        maxLength:5,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入')}${sldComLanguage('标题名称')}`,//请输入标题名称
+        }],
+      }, {
+        type: 'more_color_picker',
+        label: `${sldComLanguage('标题颜色')}`,//标题颜色
+        name: 'title_color',
+        placeholder: `${sldComLanguage('请点击选择标题颜色')}`,//请点击选择标题颜色
+        initialValue: '',
+        is_show: false,
+        callbackShow: (color) => this.sldHandleColorPicker(color, 'title_color', 'is_show'),
+        callback: (color) => this.sldHandleColorPicker(color, 'title_color', 'color'),
+      }, {
+        type: 'more_color_picker',
+        label: `${sldComLanguage('背景色')}`,//背景色
+        name: 'title_bg_color',
+        placeholder: `${sldComLanguage('请点击选择背景色')}`,//请点击选择背景色
+        initialValue: '',
+        is_show: false,
+        callbackShow: (color) => this.sldHandleColorPicker(color, 'title_bg_color', 'is_show'),
+        callback: (color) => this.sldHandleColorPicker(color, 'title_bg_color', 'color'),
+      }, {
+        type: 'empty',
+        name: 'empty',
+        height: 0,
+      }],//modal框的数据
+      data: {
+        type: 'adv_19',
+        data: [{
+          top: {
+            title_info: {
+              title_name: '',//标题名称
+              title_color: '#fff',//标题颜色
+              title_bg_color: '#f89a3f',//标题背景色
+            },
+
+          },
+          center: {
+            left: {
+              width: 186,
+              height: 340,//高度为0的话表示不限制
+              data: [{
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            },
+            right: [{
+              title_info: {
+                title_name: '',//标题名称
+              },
+              width: 172,
+              height: 106,//高度为0的话表示不限制
+              data: [{
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            }, {
+              title_info: {
+                title_name: '',//标题名称
+              },
+              width: 172,
+              height: 106,//高度为0的话表示不限制
+              data: [{
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            }, {
+              title_info: {
+                title_name: '',//标题名称
+              },
+              width: 172,
+              height: 106,//高度为0的话表示不限制
+              data: [{
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            }],
+          },
+          bottom: {
+            width: 187,
+            height: 120,//高度为0的话表示不限制
+            data: [
+              {
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+          },
+        }, {
+          top: {
+            title_info: {
+              title_name: '',//标题名称
+              title_color: '#fff',//标题颜色
+              title_bg_color: '#f89a3f',//标题背景色
+            },
+          },
+          center: {
+            left: {
+              width: 186,
+              height: 340,//高度为0的话表示不限制
+              data: [{
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            },
+            right: [{
+              title_info: {
+                title_name: '',//标题名称
+              },
+              width: 172,
+              height: 106,//高度为0的话表示不限制
+              data: [{
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            }, {
+              title_info: {
+                title_name: '',//标题名称
+              },
+              width: 172,
+              height: 106,//高度为0的话表示不限制
+              data: [{
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            }, {
+              title_info: {
+                title_name: '',//标题名称
+              },
+              width: 172,
+              height: 106,//高度为0的话表示不限制
+              data: [{
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                main_title: '',
+                sub_title: '',
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+            }],
+          },
+          bottom: {
+            width: 187,
+            height: 120,//高度为0的话表示不限制
+            data: [
+              {
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }, {
+                imgUrl: '',
+                imgPath: '',
+                title: '',
+                link_type: '',
+                link_value: '',
+                info: {},
+              }],
+          },
+        }],
+      },
+    };
+  }
+
+
+  componentDidMount() {
+    let { tpl_info } = this.state;
+    this.setState({
+      data: tpl_info,
+    });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //设置颜色  color:选中的颜色值  name:addData里面的name  type：color 修改颜色， is_show 是否显示
+  sldHandleColorPicker = (color, name, type) => {
+    let { addData } = this.state;
+    for (let i in addData) {
+      if (addData[i].name == name) {
+        if (type == 'is_show') {
+          addData[i].is_show = color;
+        } else if (type == 'color') {
+          addData[i].initialValue = color;
+        }
+      } else {
+        if (addData[i].name == 'empty') {
+          if (type == 'is_show' && color) {
+            addData[i].height = 300;
+          } else if (type == 'is_show' && !color) {
+            addData[i].height = 0;
+          }
+        }
+
+        if (type == 'is_show') {
+          addData[i].is_show = false;
+        }
+      }
+    }
+    this.setState({ addData: addData });
+  };
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false, modalSldDiyTitleLinkVisible: false, modalTitleVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    let { data, cur_part, addData, l_tab_index, r_tab_index } = this.state;
+    if (cur_part == 'bottom') {
+      data.data[this.operate_type][cur_part].data = val;
+    } else if (cur_part == 'center_left') {
+      data.data[this.operate_type]['center']['left'].data = val;
+    } else if (cur_part == 'l_title') {
+      //编辑顶部左侧标题+文字颜色+背景色
+      data.data[this.operate_type]['top']['title_info'].title_name = val.title_name;
+      for (let i in addData) {
+        if (addData[i].name == 'title_color' || addData[i].name == 'title_bg_color') {
+          data.data[this.operate_type]['top']['title_info'][addData[i].name] = addData[i].initialValue;
+        }
+      }
+    } else if (cur_part == 'r_title') {
+      //分类名+图片信息
+      data.data[this.operate_type]['center']['right'][this.operate_type == 0 ? l_tab_index : r_tab_index]['title_info']['title_name'] = val.title_name;
+      data.data[this.operate_type]['center']['right'][this.operate_type == 0 ? l_tab_index : r_tab_index]['data'] = val.parent_data;
+    } else {
+      if (this.operate_type == 'title_info') {
+        for (let i in val) {
+          if (i == 'title') {
+            data[cur_part][this.operate_type].title.initialValue = val.title;
+          } else if (i == 'sub_title') {
+            data[cur_part][this.operate_type].sub_title.initialValue = val.sub_title;
+          } else if (i == 'link_type') {
+            data[cur_part][this.operate_type].link_type = val.link_type;
+            data[cur_part][this.operate_type].link_value = val.link_value;
+            data[cur_part][this.operate_type].info = val.info != undefined ? val.info : {};
+          }
+        }
+      } else {
+        data[cur_part][this.operate_type].data = val;
+      }
+
+    }
+    this.setState({
+      data,
+      modalVisible: false,
+      modalTitleVisible: false,
+    }, () => {
+      this.props.save_tpl_data(data, this.refs.wrap_html.innerHTML);//保存数据
+    });
+  };
+
+  //编辑板块 part：标示哪一部分，比如left，center type：某一模块下的具体部分  modalTitle：弹框的标题  modalTip：弹框的整体提示,tab_index 当前选中的tab的index
+  editTpl = (part = '', type = '', modalTitle = '', modalTip = [], tab_index = 0) => {
+    let { data, modalVisible, cur_data, modalSldDiyTitleLinkVisible, modalTitleVisible, addData } = this.state;
+    if (part == 'bottom') {
+      cur_data = data.data[type][part];
+      modalVisible = true;
+    } else if (part == 'center_left') {
+      cur_data = data.data[type]['center']['left'];
+      modalVisible = true;
+    } else if (part == 'l_title') {
+      for (let i in addData) {
+        addData[i].initialValue = data.data[type]['top']['title_info'][addData[i].name];
+      }
+      modalTitleVisible = true;
+    } else if (part == 'r_title') {
+      cur_data = data.data[type]['center']['right'][tab_index];
+      modalVisible = true;
+    }
+    this.operate_type = type;//当前模块下的具体部分
+    this.setState({
+      cur_part: part,
+      cur_data,
+      modalVisible,
+      modalTitleVisible,
+      modalSldDiyTitleLinkVisible,
+      modalTitle,
+      modal_tip: modalTip,
+    });
+  };
+
+  selTab = (index, tab_index) => {
+    let { l_tab_index, r_tab_index } = this.state;
+    if (index == 0) {
+      l_tab_index = tab_index;
+    } else {
+      r_tab_index = tab_index;
+    }
+    this.setState({ l_tab_index, r_tab_index });
+  };
+
+
+  render() {
+    const { data, submiting, modalTitle, modalVisible, cur_data, modal_tip, l_tab_index, r_tab_index, modalTitleVisible, addData } = this.state;
+    return (
+      <Fragment>
+        <div ref={'wrap_html'}>
+          <div className={`${styles.w_sld_react_1210} ${styles.adv_19}`}>
+            <div className={` ${styles.adv_19_wrap}`}>
+
+              {data.data.map((item, index) => {
+                return <div key={index} className={`${styles.item} ${styles.left}`}>
+                  <div className={`${styles.top_title}`}
+                       style={{ backgroundColor: item.top.title_info.title_bg_color }}>
+                    <div className={`${styles.l_title}`}
+                         style={{ color: item.top.title_info.title_color }}>
+                      <div className={styles.sld_mask}
+                           onClick={() => this.editTpl('l_title', index, `${sldComLanguage('顶部标题设置')}`)}>{/*顶部标题设置*/}
+                        <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                      </div>
+                      {item.top.title_info.title_name
+                        ? item.top.title_info.title_name
+                        : `${sldComLanguage('添加标题')}`
+                      }
+                    </div>
+                    <div className={`${styles.r_title}`}>
+                      <ul>
+                        {item.center.right.map((val, key) => {
+                          return <li key={key} onMouseOver={() => this.selTab(index, key)}
+                                     className={`${index == 0 ? (key == l_tab_index ? styles.sel_tab : null) : (key == r_tab_index ? styles.sel_tab : null)}`}>
+                            <div className={styles.sld_mask}
+                                 onClick={() => this.editTpl('r_title', index, `${sldComLanguage('标题tab设置')}`, [`${sldComLanguage('为达到页面效果，建议上传4张 172*106大小的图片，标题名称不能为空，最多输入4个字')}`], key)}>{/*标题tab设置*/}
+                              <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                            </div>
+                            <span className={`${styles.con}`}>
+																	{val.title_info.title_name
+                                    ? val.title_info.title_name
+                                    : `${sldComLanguage('添加内容')}`
+                                  }</span>
+                          </li>;
+                        })}
+                      </ul>
+                    </div>
+                  </div>
+                  <div className={`${styles.center}`}>
+                    <div className={`${styles.l_center}`}>
+                      <div className={styles.sld_mask}
+                           onClick={() => this.editTpl('center_left', index, `${sldComLanguage('中间左侧图片设置')}`)}>{/*中间左侧图片设置*/}
+                        <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                      </div>
+                      <a href="javascript:;">
+                        {item.center.left.data[0].imgUrl
+                          ? <img src={item.center.left.data[0].imgUrl}/>
+                          : <span>{sldComLanguage('此处添加【186*340】图片')}</span>
+                        }
+                      </a>
+                    </div>
+                    <div className={`${styles.r_center}`}>
+                      <div className={`${styles.tabs_panel}`}>
+
+                        {item.center.right.map((vals, keys) => {
+                          return <Fragment>
+                            {(index == 0 && keys == l_tab_index || index == 1 && keys == r_tab_index) &&
+                            vals.data.map((val, key) => {
+                              return <div key={key} className={`${styles.item}`}>
+                                <div className={`${styles.title_wrap}`}>
+                                  <a className={`${styles.main_title}`}
+                                     href="javascript:;">
+                                    {val.main_title ? val.main_title : `${sldComLanguage('图片标题')}`}
+                                  </a>
+                                  <a className={`${styles.sub_title}`}
+                                     href="javascript:;">
+                                    {val.sub_title ? val.sub_title : `${sldComLanguage('图片子标题')}`}
+                                  </a>
+                                </div>
+                                <div className={`${styles.bottom_img}`}>
+                                  <a className={`${styles.sld_com_no_img}`}
+                                     href="javascript:;">
+                                    {val.imgUrl
+                                      ? <img src={val.imgUrl}/>
+                                      : <span>{sldComLanguage('此处添加【172*106】图片')}</span>
+                                    }
+                                  </a>
+                                </div>
+                              </div>;
+                            })
+
+                            }
+                          </Fragment>;
+
+
+                        })}
+                      </div>
+                    </div>
+                  </div>
+                  <div className={`${styles.bottom}`}>
+                    <div className={styles.sld_mask}
+                         onClick={() => this.editTpl('bottom', index, `${sldComLanguage('底部图片设置')}`)}>{/*底部图片设置*/}
+                      <span>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                    </div>
+                    {item.bottom.data.map((val, key) => {
+                      return <a key={key} className={`${styles.sld_com_no_img}`} href="javascript:;">
+                        {val.imgUrl
+                          ? <img src={val.imgUrl}/>
+                          : <span>{sldComLanguage('此处添加【187*120】图片')}</span>
+                        }
+                      </a>;
+                    })}
+                  </div>
+                </div>;
+              })}
+
+
+            </div>
+          </div>
+        </div>
+        <SldDiyMoreImgModal
+          width={1000}
+          title={modalTitle}
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          content={cur_data}
+          modal_tip={modal_tip}
+          client={'pc'}
+        />
+        { /*标题对话框-start*/}
+        <SldModal
+          title={modalTitle}
+          submiting={submiting}
+          width={500}
+          modalVisible={modalTitleVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          formItemLayoutModal={formItemLayoutModal}
+          content={addData}
+        />
+
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/diy_page_lists.js

@@ -0,0 +1,408 @@
+import { connect } from 'dva/index';
+import Link from 'umi/link';
+import React, { Component, Fragment } from 'react';
+import { Input, Form, Spin, Switch } from 'antd';
+import {
+	sldIconBtn,
+	failTip,
+	sucTip,
+  sldPopConfirmDiy,
+	dragSldTableColumn,
+	sldHandlePaginationData,
+	list_com_page_size_10,
+	sldLlineRtextAddGoodsAddMargin,
+	formItemLayoutModal,
+	sldSvgIcon,
+	getTableNum,
+	sldComLanguage,
+  sldtbaleOpeBtnText,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import StandardTable from '@/components/StandardTable';
+import SldModal from '@/components/SldModal/SldModal';
+import Search from '@/components/Search/Search';
+
+let pageSize = list_com_page_size_10;
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Diy_page_lists extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			formValues: {},//搜索条件
+			search_con: '',//搜索框内容
+			submiting: false,//按钮loading
+			loading: false,
+			data: {},
+			selectedRows: [],
+			selectedRowKeys: [],//selectedRows的key
+			modalVisible: false,
+			title: '',
+			type: 'add',//'add'新增  'edit'编辑
+			params: { pageSize: pageSize },//搜索条件
+			curData: {},//编辑的数据
+			search_data: [{
+				type: 'input',
+				label: `${sldComLanguage('页面名称')}`,
+				name: 'decoName',
+				placeholder: `${sldComLanguage('请输入页面名称')}`,
+			}, {
+				type: 'select',
+				label: `${sldComLanguage('使用状态')}`,//使用状态
+				name: 'isEnable',
+				placeholder: `${sldComLanguage('请选择')}${sldComLanguage('使用状态')}`,
+				sel_data: [
+					{ key: '', name: `${sldComLanguage('全部')}` },//全部
+					{ key: '1', name: `${sldComLanguage('启用')}` },//启用
+					{ key: '0', name: `${sldComLanguage('禁用')}` },//禁用
+				],
+			}],//搜索数据
+			addData: [{
+				type: 'input',
+				label: `${sldComLanguage('装修页面名称')}`,//装修页面名称
+				name: 'decoName',
+				placeholder: `${sldComLanguage('请输入')}${sldComLanguage('装修页面名称')}`,
+				initialValue: '',
+        maxLength:20,
+				rules: [{
+					required: true,
+          whitespace: true,
+					message: `${sldComLanguage('请输入')}${sldComLanguage('装修页面名称')}`,
+				}],
+			},
+			],//modal框的数据
+			columns: [
+				{
+					title: ' ',
+					align: 'center',
+					dataIndex: 'decoId',
+					width: 50,
+					render: (text, record, index) => getTableNum(this.state.params, pageSize, index),
+				},
+				{
+					title: `${sldComLanguage('名称')}`,
+					align: 'center',
+					dataIndex: 'decoName',
+					width: 200,
+					render: (text, record) => (
+						<Fragment>
+							<div className={global.flex_com_space_between}>
+								{record.is_edit_name != undefined && record.is_edit_name
+									? <Input maxLength={20} onChange={(e) => this.edit_filed_con(record.decoId, 'decoName', e.target.value)}
+											 defaultValue={text}/>
+									: <span>{text}</span>
+								}
+								{record.is_edit_name != undefined && record.is_edit_name
+									? <a className={global.flex_com_column} href={'javascript:void(0)'}
+										 style={{ marginLeft: 7 }}
+										 onClick={() => this.save_edit_filed(record, 'decoName', text)}>{sldSvgIcon('#FA6F1E', 16, 16, 'xuanzhong')}</a>
+									: <a className={global.flex_com_column} href={'javascript:void(0)'}
+										 style={{ marginLeft: 7 }}
+										 onClick={() => this.edit_filed(record.decoId, 'is_edit_name', 'true')}>{sldSvgIcon('#FA6F1E', 16, 16, 'edit')}</a>
+								}
+							</div>
+						</Fragment>
+					),
+				},
+				 {
+					title: `${sldComLanguage('创建时间')}`,
+					align: 'center',
+					dataIndex: 'createTime',
+					width: 150,
+				},
+				{
+					title: `${sldComLanguage('修改时间')}`,
+					dataIndex: 'updateTime',
+					align: 'center',
+					width: 150,
+				},
+				{
+					title: `${sldComLanguage('启用状态')}`,
+					align: 'center',
+					dataIndex: 'isEnable',
+					width: 100,
+					render: (text, record) => {
+						return <Switch checked={text == 1 ? true : false}
+									   onChange={(val) => this.handleSetEnable(val, record.decoId)}/>;
+					},
+				},
+				{
+					title: `${sldComLanguage('操作')}`,
+					align: 'center',
+					width: 100,
+					render: (text, record) => (
+						<Fragment>
+							<Link to={{ pathname: `/pcdecorate_home/diy_page_lists_to_edit`, search: `?id=${record.decoId}` }}
+								  target="_blank">
+								{
+                  sldtbaleOpeBtnText(`${sldComLanguage('装修')}`, null)
+								}
+							</Link>
+              <span className={global.splitLine}></span>
+              {/*删除后不可恢复，是否确定删除？*/}
+              {sldPopConfirmDiy('leftBottom', `${sldComLanguage('删除后不可恢复，是否确定删除')}`, () => this.operateDiyPage(record.decoId, 'del'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+                sldtbaleOpeBtnText(`${sldComLanguage('删除')}`, () => null))}
+              <span className={global.splitLine}></span>
+              {sldtbaleOpeBtnText(`${sldComLanguage('复制')}`, () => this.operateDiyPage(record.decoId,'copy'))}{/*复制*/}
+						</Fragment>
+					),
+				},
+
+			],
+		};
+	}
+
+	componentDidMount() {
+		this.get_list({ pageSize: pageSize });
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	//获取数据列表
+	get_list = (params) => {
+		this.setState({ loading: true });
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/get_diy_page_list',
+			payload: {...params,decoType:'index'},
+			callback: (res) => {
+				this.setState({ loading: false });
+				if (res.state == 200) {
+					if (res.data.length == 0 && this.state.params.current > 1) {
+						params.current = params.current - 1;
+						this.get_list(params);
+					} else {
+						this.setState({
+							data: res.data,
+						});
+					}
+				}
+			},
+		});
+	};
+
+	handleSelectRows = (rows, rowkeys) => {
+		this.setState({
+			selectedRows: rows,
+			selectedRowKeys: rowkeys,
+		});
+	};
+
+	handleTablePagination = (pagination, filtersArg, sorter, type = 'main') => {
+		const { formValues } = this.state;
+		const params = sldHandlePaginationData(pagination, filtersArg, sorter, formValues);
+		pageSize = params.pageSize;
+		this.setState({
+			params: params,
+		});
+		this.get_list(params);
+	};
+
+	//保存表格列的内容
+	save_edit_filed = (record, filed, value) => {
+		let { data } = this.state;
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/edit_diy_page',
+			payload: { decoId: record.decoId, decoName: record.decoName },
+			callback: (res) => {
+				if (res.state == 200) {
+					sucTip(res.msg);
+					let tmp = data.list.filter(item => item.decoId == record.decoId)[0];
+					tmp[filed] = value;
+					tmp.is_edit_name = false;
+					this.setState({ data });
+				} else {
+					failTip(res.msg);
+				}
+			},
+		});
+
+	};
+
+	//编辑表格列的内容
+	edit_filed_con = (id, filed, value) => {
+		let { data } = this.state;
+		let tmp = data.list.filter(item => item.decoId == id)[0];
+		tmp[filed] = value;
+		this.setState({ data });
+	};
+
+	//编辑表格列内容
+	edit_filed = (id, filed, flag) => {
+		let { data } = this.state;
+		let tmp = data.list.filter(item => item.decoId == id)[0];
+		tmp[filed] = flag;
+		this.setState({ data });
+	};
+
+	//新增数据
+	addData = () => {
+		let { addData } = this.state;
+		for (let i in addData) {
+			addData[i].initialValue = '';
+		}
+		this.setState({ modalVisible: true, type: 'add', title: `${sldComLanguage('新增')}${sldComLanguage('装修页面')}`, addData: addData });
+	};
+
+	//是否启用
+	handleSetEnable = (val, id) => {
+		this.operateDiyPage({ decoId: id, isEnable: val }, 'enable');
+	};
+
+	//编辑数据
+	editData = (val) => {
+		let { addData } = this.state;
+		addData.map(item => {
+			item.initialValue = val[item.name];
+		});
+		this.setState({ modalVisible: true, type: 'edit', title: `${sldComLanguage('编辑')}${sldComLanguage('装修页面')}`, addData: addData, curData: val });
+	};
+
+	//装修页面操作，edit 编辑，del 删除，enable 启用/禁用, copy 复制
+	operateDiyPage = (id, type) => {
+		const { dispatch } = this.props;
+		let dis_type = '';
+		let params = { decoId: id };
+		if (type == 'edit') {
+			dis_type = 'pc_home/edit_diy_page';
+			params = id;
+		} else if (type == 'del') {
+			dis_type = 'pc_home/del_diy_page';
+		} else if (type == 'copy') {
+			dis_type = 'pc_home/copy_diy_page';
+		} else if (type == 'enable') {
+			dis_type = 'pc_home/enable_diy_page';
+			params = id;
+		}
+		dispatch({
+			type: dis_type,
+			payload: params,
+			callback: (res) => {
+				this.setState({ submiting: false });
+				if (res.state == 200) {
+					sucTip(res.msg);
+					this.get_list(this.state.params);
+					this.setState({
+						modalVisible: false,
+					});
+				} else {
+					failTip(res.msg);
+				}
+			},
+		});
+	};
+
+	sldHandleConfirm = (val) => {
+		const { curData, type } = this.state;
+		const { dispatch } = this.props;
+		this.setState({ submiting: true });
+		val.decoType = 'index';
+		if (type == 'edit') {
+			val.decoId = curData.decoId;
+			this.operateDiyPage(val, 'edit');
+		} else {
+			dispatch({
+				type: 'pc_home/add_diy_page',
+				payload: val,
+				callback: (res) => {
+					this.setState({ submiting: false });
+					if (res.state == 200) {
+						sucTip(res.msg);
+						this.get_list({ pageSize: pageSize });
+						this.setState({
+							modalVisible: false,
+						});
+					} else {
+						failTip(res.msg);
+					}
+				},
+			});
+		}
+	};
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false });
+	};
+
+	//搜索事件
+	search = (data) => {
+		const values = { ...data };
+    for (let i in values) {
+      if (values[i] == '') {
+        delete values[i];
+      }
+    }
+		this.setState({
+			formValues: values,
+      params: { pageSize: pageSize }
+		});
+		this.get_list({ pageSize: pageSize, ...values });
+	};
+	//搜索重置事件
+	seaReset = () => {
+		//搜索条件置为空
+		this.setState({
+			formValues: {},
+      params: { pageSize: pageSize }
+		});
+		this.get_list({ pageSize: pageSize });
+	};
+
+	//表格拖动
+	resizeTable = (index, size, type, data) => {
+		let datas = dragSldTableColumn(index, size, data);
+		this.setState({ [type]: datas });
+	};
+
+	render() {
+		const { selectedRows, modalVisible, title, addData, columns, submiting, data, loading, search_data } = this.state;
+		return (
+			<div className={global.common_page}>
+				{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('首页装修列表管理')}`, 0, 0, 10)}
+				<Spin spinning={loading}>
+					<div className={global.tableListForm}>
+						<Search search_data={search_data}
+								seaSubmit={(data) => this.search(data)} seaReset={() => this.seaReset()}/>
+					</div>
+					{/*公共功能条-start*/}
+					<div className={global.operate_bg}>
+            {sldIconBtn(() => this.addData(), `${sldComLanguage('新增页面')}`, 7, 7)}
+					</div>
+					{/*公共功能条-end*/}
+					{/*标准表格-start*/}
+					<StandardTable
+						selectedRows={selectedRows}
+						data={data}
+						rowKey={'decoId'}
+						isCheck={false}
+						columns={columns}
+						onSelectRow={this.handleSelectRows}
+						onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'main')}
+						resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+						isColumnResize={true}
+					/>
+					{/*标准表格-end*/}
+					{/*新增/编辑对话框-start*/}
+					<SldModal
+						width={600}
+						title={title}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						formItemLayoutModal={formItemLayoutModal}
+						content={addData}
+					/>
+					{/*新增/编辑对话框-end*/}
+				</Spin>
+
+			</div>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/edit_diy_page.js

@@ -0,0 +1,412 @@
+/*
+* 装修页面
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form, Carousel, Icon } from 'antd';
+import {
+  failTip,
+  sucTip,
+  formItemLayoutModal,
+  getSldEmptyH,
+  list_com_page_more,
+  sldSvgIcon,
+  sldComLanguage,
+  getSldImgSet,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import SldSeleTpl from '@/components/SldSeleTpl/SldSeleTpl';
+import diy from '../diy_page.less';
+import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
+import EditDdiyPageHead from './edit_diy_page_head';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+//设置顶部logo
+let main_site_logo = require('@/assets/pc_diy_img/pc_edit_diy_page_logo.png');
+let com_img_info = getSldImgSet('com_img_info');
+if (com_img_info != '') {
+  main_site_logo = com_img_info.filter(item => item.name == 'main_site_logo')[0].url || main_site_logo;
+}
+//  将拖拽后位置的数据删除然后添加到拖拽前的位置上
+const reorder = (list, startIndex, endIndex) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  result.splice(endIndex, 0, removed);
+  return result;
+};
+
+const grid = 8;
+
+const getItemStyle = (isDragging, draggableStyle) => ({
+  // some basic styles to make the items look a bit nicer
+  userSelect: 'none',
+  margin: `0 0 ${grid}px 0`,
+  display: 'flex',
+  flexDirection: 'row',
+  justifyContent: 'center',
+  alignItems: 'center',
+  // change background colour if dragging
+  background: isDragging ? '#fff' : '#fff',
+  opacity: isDragging ? 0.5 : 1,
+  borderStyle: 'solid',
+  borderWidth: 4,
+  borderColor: isDragging ? '#7abfe8' : '#fff',
+  // styles we need to apply on draggables
+  ...draggableStyle,
+});
+
+const getListStyle = isDraggingOver => ({
+  background: isDraggingOver ? '#cfe2f9' : '#fff',
+  width: 1220,
+  borderStyle: 'dashed',
+  borderWidth: 1,
+  borderColor: isDraggingOver ? '#ecf0f5' : '#fff',
+
+});
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+
+export default class Edit_diy_page extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    getFieldDecorator_new = getFieldDecorator;
+    this.state = {
+      cur_tpl_type: '',//当前操作模式,main_banner:页面主轮播图，floor：楼层，main_nav:主导航
+      is_edit_flag: false,//当前页面是否执行过操作
+      swiper_data: [],//选择的页面主轮播的数据
+      curData: {},//当前页面数据
+      query: props.location.query,
+      submiting: false,
+      modalVisible: false,
+      diy_page_data: {},
+      data: [],//装修数据
+    };
+  }
+
+  sele_banner_instance_id = '';//选择的实例化模板id
+  position = '';//添加模板的位置，top 当前模板的顶部，bottom 当前模板的底部
+  id = '';//当前模板的id
+
+  componentDidMount() {
+    const { query } = this.state;
+    if (query.id != undefined && query.id > 0) {
+      this.get_diy_page_detial(query.id);
+    }
+    this.get_tpl_type_list();
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //获取所有模板类型列表
+  get_tpl_type_list = () => {
+    const { dispatch } = this.props;
+    let { addData } = this.state;
+    dispatch({
+      type: 'pc_home/get_tpl_type_list',
+      callback: (res) => {
+        if (res.state == 200) {
+          for (let i in addData) {
+            if (addData[i].type == 'sele_instance_tpl') {
+              res.data = res.data.filter(item => item.type != 'main_banner' && item.type != 'top_com_nav');
+              addData[i].data_left = res.data;
+              addData[i].activeKey = res.data[0].type;
+              break;
+            }
+          }
+          this.setState({ addData }, () => {
+            this.get_tpl_instance_list(res.data[0].type);
+          });
+        }
+      },
+    });
+  };
+
+  //装修模板切换
+  handleTabChange = (val) => {
+    let { addData } = this.state;
+    addData.map((item) => {
+      if (item.type == 'sele_instance_tpl') {
+        item.activeKey = val;
+      }
+    });
+    this.setState({ addData });
+    this.get_tpl_instance_list(val);
+  };
+
+  //装修模板的选择
+  handle_sele_tpl = (val) => {
+    let { addData } = this.state;
+    addData.map((item) => {
+      if (item.type == 'sele_instance_tpl') {
+        item.sele_tpl_info = val;
+      }
+    });
+    this.setState({ addData });
+  };
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  sldHandleConfirm = (val = []) => {
+    let { data, swiper_data, cur_tpl_type } = this.state;
+    if (cur_tpl_type == 'main_banner') {
+      //轮播图处理
+      swiper_data = JSON.parse(val[0].json).data;
+      this.sele_banner_instance_id = val[0].dataId;
+    } else {
+      for (let i in val) {
+        //楼层模板处理
+        let tmp_tpl = { key: val[i].dataId, html: val[i].html, id: data.length + 1 };
+        if (this.id != '') {
+          for (let i = 0; i < data.length; i++) {
+            if (data[i].id == this.id) {
+              if (this.position == 'top') {
+                data.splice(i, 0, { ...tmp_tpl, id: i + 1 });
+                data[i + 1].id = i + 2;
+              } else {
+                data.splice(i + 1, 0, { ...tmp_tpl, id: i + 2 });
+              }
+              break;
+            }
+          }
+          data.map((item, index) => {
+            item.id = index + 1;
+          });
+        } else {
+          //并将数据追加到装修里面,并将页面滚动到最底部
+          data.push(tmp_tpl);
+        }
+      }
+    }
+    this.setState({ data, modalVisible: false, is_edit_flag: true, swiper_data });
+  };
+
+  //删除实例化模板
+  del_instance = (id) => {
+    let { data } = this.state;
+    data = data.filter(item => item.id != id);
+    for (let i in data) {
+      data[i].id = i + 1;
+    }
+    this.setState({ data, is_edit_flag: true });
+  };
+
+  onDragEnd = (result) => {
+    // 拖出范围外
+    if (!result.destination) {
+      return;
+    }
+    const data = reorder(
+      this.state.data,
+      result.source.index,
+      result.destination.index,
+    );
+
+    this.setState({ data, is_edit_flag: true });
+  };
+
+  //获取所有开启状态的实例化模板列表  tpl_type 模版类型  mode_type：single 只从一种模板中选择
+  get_tpl_instance_list = (tpl_type, mode_type = '') => {
+    const { dispatch } = this.props;
+    let { addData, modalVisible } = this.state;
+    dispatch({
+      type: 'pc_home/get_tpl_instance_list_allow_use',
+      payload: { tplType: tpl_type, pageSize: list_com_page_more, isEnable: 1 },
+      callback: (res) => {
+        for (let i in addData) {
+          if (addData[i].type == 'sele_instance_tpl') {
+            addData[i].data_right = [];
+            if (mode_type == 'single') {
+              modalVisible = true;
+              addData[i].show_left = false;
+            } else {
+              addData[i].show_left = true;
+            }
+            if (res.state == 200) {
+              addData[i].data_right = res.data.list;
+            }
+            break;
+          }
+        }
+        this.setState({ addData, cur_tpl_type: mode_type, modalVisible: modalVisible });
+      },
+    });
+  };
+
+
+  //获取装修页面数据
+  get_diy_page_detial = (id) => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pc_home/get_diy_page_detial',
+      payload: { decoId: id },
+      callback: (res) => {
+        if (res.state == 200) {
+          let tmp = res.data.tplData ? res.data.tplData : [];
+          if (tmp.length > 0) {
+            tmp.map((val, key) => {
+              val.key = val.id;
+              val.id = key + 1;
+            });
+          }
+          this.sele_banner_instance_id = !res.data.masterBannerData ? '' : res.data.masterBannerData.id;
+          this.setState({
+            data: tmp, //楼层数据
+            curData: res.data,
+            swiper_data: !res.data.masterBannerData ? [] : JSON.parse(res.data.masterBannerData.json).data,//轮播图数据
+          });
+        }
+      },
+    });
+  };
+
+
+  //添加模板
+  addTplData = (position = '', id = '', type = 'floor') => {
+    this.position = position;
+    this.id = id;
+    this.setState({ modalVisible: true, cur_tpl_type: type });
+  };
+
+  //保存装修数据
+  save_diy_page_data = () => {
+    const { data, curData, is_edit_flag } = this.state;
+    if (is_edit_flag) {
+      if (this.sele_banner_instance_id == '') {
+        failTip(`${sldComLanguage('请选择主轮播图模板')}`);
+        return false;
+      }
+      let param = {};
+      param.decoId = curData.decoId;
+      let diy_tpl_ids = [];
+      for (let i in data) {
+        diy_tpl_ids.push(data[i].key);
+      }
+      param.rankedTplDataIds = diy_tpl_ids.join(',');
+      param.masterBannerId = this.sele_banner_instance_id;//主轮播图实例化模板id
+      const { dispatch } = this.props;
+      dispatch({
+        type: 'pc_home/save_diy_page_data',
+        payload: param,
+        callback: (res) => {
+          if (res.state == 200) {
+            sucTip(res.msg);
+          } else {
+            failTip(res.msg);
+          }
+        },
+      });
+    }
+  };
+
+  render() {
+    const { data, submiting, modalVisible, swiper_data, is_edit_flag, cur_tpl_type } = this.state;
+    return (
+      <div ref={(el) => {
+        this.messagesEnd = el;
+      }} className={` ${diy.allow_show_sld_mask}`}
+           style={{ display: 'flex', flexDirection: 'column', justifyContent: 'flex-start' }}>
+        <div className={diy.add_floor_fixed} style={{ bottom: 120 }}>
+          <div className={`${diy.com_btn} ${diy.add_floor_btn}`} onClick={() => this.addTplData()}>
+            <Icon type="plus-circle"/> {sldComLanguage('添加楼层')}
+          </div>
+        </div>
+        <div ref={'wrap_top'} className={global.flex_com_column}>
+          <EditDdiyPageHead/>
+        </div>
+        <div style={{ position: 'relative' }}>
+          <a className={diy.sld_mask} onClick={() => this.addTplData('', '', 'main_banner')}>
+            <span style={{
+              right: '50%',
+              marginRight: -550,
+            }}>{sldComLanguage('选择主轮播模板')}</span>
+          </a>
+          {swiper_data.length > 0 &&
+          <Carousel autoplay>
+            {swiper_data.map((item, index) => (
+              <div className={diy.swiper_wrap} key={index}><img src={item.imgUrl}/></div>
+            ))}
+          </Carousel>
+          }
+          {swiper_data.length == 0 &&
+          <div className={diy.swiper_wrap}></div>
+          }
+        </div>
+        <div className={`${global.flex_com_column}`}>
+          <DragDropContext onDragEnd={this.onDragEnd}>
+            <Droppable droppableId="droppable">
+              {(provided, snapshot) => (
+                <div
+                  {...provided.droppableProps}
+                  ref={provided.innerRef}
+                  style={getListStyle(snapshot.isDraggingOver)}
+                >
+                  {data.map((item, index) => (
+                    <Draggable key={item.id} draggableId={item.id} index={index}>
+                      {(provided, snapshot) => (
+                        <div
+                          ref={provided.innerRef}
+                          {...provided.draggableProps}
+                          {...provided.dragHandleProps}
+                          style={getItemStyle(
+                            snapshot.isDragging,
+                            provided.draggableProps.style,
+                          )}
+                        >
+                          <div style={{ position: 'relative' }}>
+                            <div dangerouslySetInnerHTML={{ __html: item.html }}></div>
+                            <div className={diy.sld_mask}>
+                              <a className={diy.top_add}
+                                 onClick={() => this.addTplData('top', item.id)}>{sldSvgIcon('#FA6F1E', 16, 16, 'jia')}</a>
+                              <a className={diy.bottom_add}
+                                 onClick={() => this.addTplData('bottom', item.id)}>{sldSvgIcon('#FA6F1E', 16, 16, 'jia')}</a>
+                              <span
+                                onClick={() => this.del_instance(item.id)}>{sldComLanguage('删除')}</span>{/*删除*/}
+                            </div>
+                          </div>
+                        </div>
+                      )}
+                    </Draggable>
+                  ))}
+                  {provided.placeholder}
+                </div>
+              )}
+            </Droppable>
+          </DragDropContext>
+          {getSldEmptyH(50)}
+        </div>
+        {/*新增/编辑对话框-start*/}
+        <SldSeleTpl
+          width={1000}
+          title={sldComLanguage('选择装修模板')}//选择装修模板
+          sldSeleSingleRow={true}
+          submiting={submiting}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          formItemLayoutModal={formItemLayoutModal}
+          sele_type={cur_tpl_type}
+        />
+        {/*新增/编辑对话框-end*/}
+        {getSldEmptyH(20)}
+        <div className={global.m_diy_bottom_wrap}
+             style={{ position: 'fixed', left: 0, right: 0 }}>
+          <div onClick={() => this.props.form.submit(this.save_diy_page_data)}
+               className={`${global.add_goods_bottom_btn} ${is_edit_flag ? global.add_goods_bottom_btn_sel : global.add_goods_bottom_btn_forbidden}`}>
+            {sldComLanguage('保 存')}{/*保 存*/}
+          </div>
+        </div>
+      </div>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/edit_diy_page_head.js

@@ -0,0 +1,192 @@
+/*
+* 装修页面头部
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form } from 'antd';
+import {sldSvgIcon,sldComLanguage} from '@/utils/utils';
+import global from '../../../global.less';
+import styles from './edit_diy_page_head.less';
+
+let sthis = '';
+@connect(({ common, pc_home }) => ({
+  common, pc_home,
+}))
+@Form.create()
+
+export default class EditDdiyPageHead extends Component {
+  constructor(props) {
+    super(props);
+    sthis = this;
+    const {
+      form: { getFieldDecorator },
+    } = props;
+    this.state = {
+      hot_search_words: [],//热搜词
+      mall_logo: '',//商城logo
+      nav_list: [],//导航列表
+    };
+  }
+
+
+  componentDidMount() {
+    this.get_base_setting();//获取基本配置信息
+    this.get_nav_list();//获取导航列表
+  }
+
+  //获取基本配置信息
+  get_base_setting = () => {
+    const { dispatch } = this.props;
+    let { hot_search_words, mall_logo } = this.state;
+    dispatch({
+      type: 'common/getSetting',
+      payload: { str: 'hot_search_words,main_site_logo' },
+      callback: (res) => {
+        if (res.state == 200) {
+          res.data.map(item => {
+            if (item.name == 'hot_search_words') {
+              let tmp = [];
+              if (item.value) {
+                tmp = item.value.split(',');
+              }
+              hot_search_words = tmp;
+            } else if (item.name == 'main_site_logo') {
+              mall_logo = item.imageUrl ? item.imageUrl : require('@/assets/pc_diy_top_default_mall_logo.png');
+            }
+          });
+          this.setState({ hot_search_words, mall_logo });
+        }
+      },
+    });
+  };
+
+  //获取导航列表
+  get_nav_list = () => {
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pc_home/get_home_nav_list',
+      payload: { pageSize: 30 },
+      callback: (res) => {
+        if (res.state == 200) {
+          this.setState({ nav_list: res.data.list });
+        }
+      },
+    });
+  };
+
+
+  render() {
+    const { hot_search_words, mall_logo, nav_list } = this.state;
+    return (
+      <Fragment>
+        {/* 最顶部 start */}
+        <div className={styles.header_wrap}>
+          <div className={styles.header}>
+            <div className={styles.header_left}>
+              <span className={styles.hello}>{sldComLanguage('您好，欢迎来到')}</span>
+              <span className={`${styles.register} ${styles.h1}`}>{sldComLanguage('登录')}</span>
+              <span className={`${styles.register} ${styles.h1}`}>{sldComLanguage('注册')}</span>
+            </div>
+            <div className={styles.header_right}>
+              <ul>
+                <li>
+                  <div className={styles.li_item}>{sldComLanguage('商城首页')}</div>
+                </li>
+                <li>
+                  <div className={`${styles.has_more} ${styles.li_item}`}>
+                    {sldComLanguage('我的订单')}
+                    <div className={styles.li_item_more}>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('待支付订单')}</a>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('待收货订单')}</a>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('待评价订单')}</a>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div className={styles.li_item}>{sldComLanguage('个人中心')}</div>
+                </li>
+                <li>
+                  <div className={`${styles.has_more} ${styles.li_item}`}>
+                    {sldComLanguage('我的收藏')}
+                    <div className={styles.li_item_more}>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('商品收藏')}</a>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('店铺收藏')}</a>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('我的足迹')}</a>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div className={`${styles.has_more} ${styles.li_item}`}>
+                    {sldComLanguage('我的账户')}
+                    <div className={styles.li_item_more}>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('我的优惠券')}</a>
+                      <a href="javascript:void(0)" className={styles.li_item_more_item}>{sldComLanguage('我的余额')}</a>
+                    </div>
+                  </div>
+                </li>
+                <li>
+                  <div className={`${styles.li_item}`}>{sldComLanguage('服务中心')}</div>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+        {/* 最顶部 end */}
+
+        {/* 搜索部分 start */}
+        <div className={`${styles.sld_home_top_search} ${styles.container}`}>
+          <div className={`${styles.ld} ${styles.sld_home_top_search_left}`}>
+            <a className={`${styles.sld_logo_wrap} ${global.flex_row_start_center}`}>
+              <img src={mall_logo}/>
+            </a>
+          </div>
+          <div className={styles.sld_seach_wrap}>
+            <div className={`${styles.sld_seach_box} ${styles.ld}`}>
+              <div className={styles.form}>
+                <input type="text" className={styles.text} autocomplete="off" style={{ color: 'rgb(153,153,153)' }}
+                       placeholder={sldComLanguage('请输入关键词')}/>
+                <input type="submit" value={sldComLanguage('搜索')} className={styles.button}/>
+              </div>
+              <div className={styles.hot_search_wrap}>
+                <div>
+                  {hot_search_words.length && hot_search_words.map((item, index) => {
+                    return <a key={index} href="javascript:void(0)">{item}</a>;
+                  })
+                  }
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={styles.sld_cart_wrap}>
+            <dl class>
+              <dt className={`${styles.ld} ${styles.cart_icon_text_wrap}`}
+                  style={{ borderBottom: '1px solid rgb(239, 239, 239)' }}>
+                <span className={styles.iconfont}>{sldSvgIcon('#e2231a',16,16,'gouwuche1')}</span>
+                <a href="javascript:void(0)">{sldComLanguage('我的购物车')}</a>
+                <div className={styles.cart_goods_num}>0</div>
+              </dt>
+            </dl>
+          </div>
+        </div>
+        {/* 搜索部分 end */}
+
+        {/* 导航 start */}
+        <div className={styles.nav_cat}>
+          <div className={styles.header}>
+            <div className={styles.product_sort}>
+              <img src={require('@/assets/pc_diy_top_all_cat_icon.png')}/>
+              <span className={styles.sort}>{sldComLanguage('产品分类')}</span>
+            </div>
+            <nav>
+              <li><a href="javascript:void(0)">{sldComLanguage('首页')}</a></li>
+              {nav_list.length && nav_list.map((item, index) => {
+                return <li key={index}><a href="javascript:void(0)">{item.navName}</a></li>;
+              })}
+            </nav>
+          </div>
+        </div>
+        {/* 导航 end */}
+      </Fragment>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/edit_diy_page_head.less

@@ -0,0 +1,582 @@
+@import '~antd/lib/style/themes/default.less';
+
+.header_wrap {
+  width: 100%;
+  height: 33px;
+  background: #f7f7f7;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .header {
+    width: 1210px;
+    height: 33px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .header_left {
+      width: 360px;
+      height: 100%;
+      font-size: 12px;
+      color: #999;
+      line-height: 36px;
+      display: flex;
+
+      .hello {
+        margin-right: 20px;
+        color: #999;
+      }
+
+      .h1 {
+        margin: 0 5px;
+        cursor: pointer;
+
+        &:hover {
+          color: #e2231a;
+        }
+      }
+    }
+
+    .header_right {
+      height: 100%;
+
+      ul {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+
+        .personal_center {
+          width: 121px;
+          height: 30px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        li {
+          float: left;
+          text-align: center;
+          border-right: 1px solid #ddd;
+          padding: 0 10px;
+          height: 12px;
+
+          .li_item {
+            position: relative;
+            cursor: pointer;
+            font-size: 12px;
+            line-height: 12px;
+            color: #999;
+            height: 33px;
+
+            &:hover {
+              color: #e2231a;
+
+              &.has_more {
+                &:before {
+                  border-top-color: #e2231a;
+                }
+              }
+
+              .li_item_more {
+                display: block;
+              }
+            }
+
+            &.has_more {
+              padding-right: 12px;
+
+              &:before,
+              &:after {
+                position: absolute;
+                right: -2px;
+                display: block;
+                width: 0;
+                height: 0;
+                content: " ";
+                border: 4px solid transparent;
+                border-radius: 2px;
+              }
+
+              &:before {
+                top: 3px;
+                border-top: 5px solid #888;
+              }
+
+              &:after {
+                top: 1px;
+                border-top: 5px solid #f7f7f7;
+              }
+            }
+
+            .li_item_more {
+              position: absolute;
+              width: 80px;
+              padding: 5px 3px;
+              left: 50%;
+              transform: translateX(-50%);
+              top: 21px;
+              background: #fff;
+              box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
+              z-index: 999;
+              display: none;
+
+              &:before,
+              &:after {
+                position: absolute;
+                top: -11px;
+                left: 50%;
+                transform: translateX(-50%);
+                -webkit-transform: translateX(-50%);
+                display: block;
+                content: " ";
+                width: 0;
+                height: 0;
+                border: 5px solid transparent;
+                border-bottom: 6px solid #dedede;
+              }
+
+              &:after {
+                top: -10px;
+                border-bottom: 6px solid #fff;
+              }
+
+              .li_item_more_item {
+                display: block;
+                text-align: center;
+                color: #999;
+                line-height: 12px;
+                padding: 8px 0;
+
+                &:hover {
+                  color: #e2231a;
+                }
+              }
+            }
+          }
+
+          &:last-child {
+            border-right-width: 0;
+            padding-right: 0;
+          }
+        }
+      }
+    }
+  }
+}
+.sld_home_top_search {
+  height: 99px;
+  position: relative;
+  z-index: 12;
+  width: 1210px;
+  margin: 0 auto 15px;
+  padding-left: 0px;
+  padding-right: 0px;
+
+  &:before {
+    display: table;
+    content: " ";
+  }
+
+  .sld_home_top_search_left {
+    position: relative;
+    float: left;
+    width: 331px;
+    margin-top: 24px;
+
+    .sld_logo_wrap {
+      display: block;
+      width: 160px;
+      height: 60px;
+
+      img {
+        max-width: 100%;
+        max-height: 100%;
+      }
+    }
+  }
+
+  .sld_seach_wrap {
+    float: left;
+    width: 660px;
+    padding-top: 4px;
+    margin-top: 30px;
+
+    .sld_seach_box {
+      width: 580px;
+      z-index: 11;
+      height: 38px;
+      margin-bottom: 3px;
+      border: 2px solid #e2231a;
+
+      .form {
+        background-color: #e2231a;
+        height: 34px;
+        overflow: hidden;
+
+        .text {
+          background-color: #fff;
+          width: 471px;
+          -webkit-appearance: none;
+          -webkit-border-radius: 0;
+          height: 34px;
+          padding: 5px 5px 5px 10px;
+          background-position: 0 -360px;
+          background-repeat: repeat-x;
+          line-height: 20px;
+          font-size: 12px;
+          outline: none;
+          border: none;
+        }
+
+        input {
+          margin: 0;
+          padding: 0;
+          height: 34px;
+          border: 0;
+        }
+
+        .button {
+          width: 103px;
+          background: #e2231a;
+          font-size: 16px;
+          font-weight: 600;
+          color: #fff;
+          float: right;
+          cursor: pointer;
+        }
+      }
+
+      .hot_search_wrap {
+        height: 30px;
+        line-height: 30px;
+        color: #999;
+        overflow: hidden;
+
+        strong {
+          float: left;
+          font-weight: 400;
+        }
+
+        a {
+          color: #666;
+          font-size: 12px;
+
+          &:link,
+          &:visited {
+            float: left;
+            margin-right: 10px;
+          }
+
+          &:hover {
+            color: #e2231a;
+          }
+        }
+      }
+    }
+  }
+
+  .sld_cart_wrap {
+    float: right;
+    position: relative;
+    z-index: 99;
+    height: 40px;
+    width: 165px;
+    margin-top: 34px;
+    margin-right: 13px;
+
+    dl {
+      margin-bottom: 0px;
+
+      .cart_goods_num {
+        font: 11px/16px Verdana;
+        color: #fff;
+        background: #e2231a;
+        text-align: center;
+        display: inline-block;
+        height: 16px;
+        min-width: 16px;
+        border: none 0;
+        border-radius: 8px;
+        margin-left: 10px;
+      }
+
+      dt {
+        position: absolute;
+        z-index: 3;
+        width: 165px;
+        height: 38px;
+        border: 1px solid #e3e3e3;
+        background-color: #fff;
+        cursor: pointer;
+        font-weight: 400;
+
+        .iconfont {
+          display: inline-block;
+          margin: 0 13px 0 12px;
+          color: #e2231a;
+          font-weight: 600;
+          vertical-align: bottom;
+          font-size: 17px;
+          font-style: normal;
+          -webkit-font-smoothing: antialiased;
+          -moz-osx-font-smoothing: grayscale;
+          line-height: 32px;
+        }
+
+        &.cart_icon_text_wrap {
+          a {
+            color: #666666;
+            font-size: 14px;
+            line-height: 36px;
+          }
+        }
+      }
+
+      dd {
+        .cart_goods {
+          dl {
+            padding-top: 8px;
+          }
+
+          dd {
+            &.cart_goods_price {
+              position: static;
+
+              em {
+                margin-right: 6px;
+                width: auto;
+                color: #666;
+
+                &:nth-child(1) {
+                  display: block;
+                  font-weight: 600;
+                }
+
+                &:nth-child(2) {
+                  display: block;
+                  text-align: right;
+                  margin-top: 6px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+
+    dd {
+      position: absolute;
+      top: 37px;
+      right: 0;
+      width: 355px;
+      border: 1px solid #e3e3e3;
+      background: #fff;
+      z-index: 1;
+    }
+
+    &:hover .cart_more_view {
+      display: inline-block;
+    }
+  }
+
+  .cart_more_view {
+    display: none;
+
+    .empty_cart {
+      width: 100%;
+      position: relative;
+
+      .empty_cart_line {
+        position: absolute;
+        width: 163px;
+        right: 0;
+        height: 2px;
+        top: -2px;
+        z-index: 999;
+        background: #fff;
+      }
+
+      .empty_cart_txt {
+        padding: 10px;
+        color: #999;
+      }
+    }
+  }
+
+  .ld {
+    position: relative;
+    zoom: 1;
+  }
+
+  .cart_data {
+    height: 300px;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+
+    .cart_data_title {
+      font-weight: 600;
+      float: left;
+      padding: 7px;
+      line-height: 32px;
+      height: 32px;
+    }
+
+    .cart_list {
+      padding: 20px;
+      overflow-y: scroll;
+
+      .cart_list_pre {
+        margin-bottom: 20px;
+
+        .cart_pre_left {
+          .cart_pre_img {
+            width: 48px;
+            height: 48px;
+            border: 1px solid #e3e3e3;
+            cursor: pointer;
+
+            img {
+              width: 100%;
+              height: 100%;
+            }
+          }
+
+          .cart_pre_cen {
+            width: 150px;
+            margin-left: 20px;
+            cursor: pointer;
+
+            .cart_pre_name {
+              word-break: break-all;
+              text-overflow: ellipsis;
+              display: -webkit-box;
+              -webkit-box-orient: vertical;
+              -webkit-line-clamp: 2;
+              overflow: hidden;
+            }
+
+            .cart_pre_spec {
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              margin-top: 5px;
+            }
+          }
+        }
+
+        .cart_pre_right {
+          .cart_pre_price {
+            color: #666;
+          }
+
+          .cart_pre_del {
+            color: #666;
+            cursor: pointer;
+            margin-top: 10px;
+
+            &:hover {
+              color: #e2231a;
+            }
+          }
+        }
+      }
+    }
+
+    .cart_bottom {
+      width: 100%;
+      height: 44px;
+      border: 1px solid #e3e3e3;
+
+      .cart_bottom_left {
+        padding-left: 11px;
+        height: 44px;
+
+        span {
+          color: #666;
+
+          &:nth-child(2) {
+            margin-left: 5px;
+          }
+        }
+      }
+
+      .cart_bottom_right {
+        width: 110px;
+        height: 44px;
+        text-align: center;
+        color: #fff;
+        background-color: #f30213;
+        line-height: 44px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+.header {
+  width: 1210px;
+  height: 37px;
+  margin: 0 auto;
+  display: flex;
+  overflow: visible;
+
+  .product_sort {
+    position: relative;
+    overflow: visible;
+    width: 187px;
+    height: 100%;
+    background: #e2231a;
+    color: #fff;
+    font-size: 15px;
+    letter-spacing: 3px;
+    line-height: 30px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    cursor: pointer;
+    box-sizing: border-box;
+    padding: 0 50px 0 26px;
+
+    &:hover {
+      #category_sort {
+        display: block;
+      }
+    }
+
+    img {
+      width: 12px;
+      height: 12px;
+    }
+  }
+
+  nav {
+    width: 1013px;
+    height: 30px;
+    margin-left: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 30px;
+    overflow: hidden;
+
+    a {
+      height: 37px;
+      display: inline-block;
+      -webkit-box-sizing: border-box;
+      box-sizing: border-box;
+      color: #333333;
+      font-size: 15px;
+      margin: 0 20px;
+      line-height: 37px;
+      padding: 0 7px;
+      width: max-content;
+    }
+
+    a:hover {
+      color: #e2231a;
+      border-bottom: 3px solid #e2231a;
+    }
+  }
+}

admin/src/pages/pcdecorate/home/footer.js

@@ -0,0 +1,343 @@
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form, Spin,message } from 'antd';
+import {
+  sldIconBtn,
+  failTip,
+  sucTip,
+  dragSldTableColumn,
+  sldHandlePaginationData,
+  list_com_page_size_10,
+  sldLlineRtextAddGoodsAddMargin,
+  formItemLayoutModal,
+  validatorNumbe,
+  sldComLanguage,
+  getTableNum,
+  sldtbaleOpeBtnText,
+  sldPopConfirmDiy,
+  sldSearchValClear,
+} from '@/utils/utils';
+import global from '@/global.less';
+import StandardTable from '@/components/StandardTable';
+import SldModal from '@/components/SldModal/SldModal';
+
+
+let pageSize = list_com_page_size_10;
+@connect(({ pc_home }) => ({
+  pc_home,
+}))
+@Form.create()
+export default class Footer extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      data: {},
+      submiting: false,//按钮loading
+      loading: false,//按钮loading
+      selectedRows: [],
+      selectedRowKeys: [],//selectedRows的key
+      modalVisible: false,
+      title: '',
+      search_con: '',
+      type: 'add',//'add'新增  'edit'编辑
+      params: { pageSize: pageSize },//搜索条件
+      curData: {},//编辑的数据
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('标题')}`,
+        name: 'linkName',
+        placeholder: `${sldComLanguage('请输入标题')}`,
+        initialValue: '',
+        maxLength:20,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入标题')}`,
+        }],
+      },
+        {
+          type: 'input',
+          label: `${sldComLanguage('链接')}`,//链接
+          extra: `${sldComLanguage('链接URL应以http://或https://开头')}`,
+          name: 'linkUrl',
+          placeholder: `${sldComLanguage('请输入')}${sldComLanguage('链接')}`,
+          initialValue: '',
+          maxLength:200,
+          rules: [{
+            required: true,
+            whitespace: true,
+            message: `${sldComLanguage('请输入')}${sldComLanguage('链接')}`,
+          }],
+        }, {
+          type: 'inputnum',
+          label: `${sldComLanguage('排序')}`,//排序
+          extra: `${sldComLanguage('请输入0~255的数字，数字越小，该项显示将越靠前')}`,
+          name: 'sort',
+          placeholder: `${sldComLanguage('请输入')}${sldComLanguage('排序')}`,
+          initialValue: '',
+          rules: [{
+            required: true,
+            message: `${sldComLanguage('请输入')}${sldComLanguage('排序')}`,
+          }, { validator: (rule, value, callback) => validatorNumbe(rule, value, callback) }],
+        }],//modal框的数据
+      columns: [
+        {
+          title: ' ',
+          dataIndex: 'linkId',
+          align: 'center',
+          width: 50,
+          render: (text, record, index) => getTableNum(this.state.params, pageSize, index),
+        },
+        {
+          title: `${sldComLanguage('名称')}`,
+          align: 'center',
+          dataIndex: 'linkName',
+          width: 200,
+        },
+        {
+          title: `${sldComLanguage('链接')}`,
+          dataIndex: 'linkUrl',
+          align: 'center',
+          width: 150,
+          render: (text) => (
+            text != '' ? <a target='_blank' href={text}>{text}</a> : '--'
+          ),
+        }, {
+          title: `${sldComLanguage('排序')}`,
+          dataIndex: 'sort',
+          align: 'center',
+          width: 100,
+        }, {
+          title: `${sldComLanguage('创建时间')}`,
+          dataIndex: 'createTime',
+          align: 'center',
+          width: 150,
+        },
+        {
+          title: `${sldComLanguage('操作')}`,
+          align: 'center',
+          width: 100,
+          render: (text, record) => (
+            <Fragment>
+              {sldtbaleOpeBtnText('编辑', () => this.editFooter(record))}
+              <span className={global.splitLine}></span>
+              {
+                sldPopConfirmDiy('leftBottom', `${sldComLanguage('删除后不可恢复，是否确定删除')}`, () => this.operateFooter(record.linkId, 'del'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+                  sldtbaleOpeBtnText(`${sldComLanguage('删除')}`, () => null))
+              }
+            </Fragment>
+          ),
+        },
+
+      ],
+    };
+  }
+
+
+  componentDidMount() {
+    this.get_list({ pageSize: pageSize });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //获取数据列表
+  get_list = (params) => {
+    const { dispatch } = this.props;
+    this.setState({ loading: true });
+    dispatch({
+      type: 'pc_home/get_home_footer_list',
+      payload: params,
+      callback: (res) => {
+        this.setState({ loading: false });
+        if (res.state == 200) {
+          if (res.data.list.length == 0 && this.state.params.current > 1) {
+            params.current = params.current - 1;
+            this.get_list(params);
+          } else {
+            this.setState({
+              data: res.data,
+            });
+          }
+        }
+      },
+    });
+  };
+
+  handleSelectRows = (rows, rowkeys) => {
+    this.setState({
+      selectedRows: rows,
+      selectedRowKeys: rowkeys,
+    });
+  };
+
+  handleTablePagination = (pagination, filtersArg, sorter, type = 'main') => {
+    const { formValues } = this.state;
+    if (type == 'main') {
+      const params = sldHandlePaginationData(pagination, filtersArg, sorter, formValues);
+      pageSize = params.pageSize;
+      this.setState({ params });
+      this.get_list(params);
+    }
+  };
+
+  //编辑页脚
+  editFooter = (record) => {
+    let { addData } = this.state;
+    for (let i in addData) {
+      addData[i].initialValue = record[addData[i].name];
+    }
+    this.setState({ modalVisible: true, type: 'edit', title: `${sldComLanguage('编辑页脚')}`, addData, curData: record });//编辑页脚
+  };
+
+  //页脚操作 edit:编辑 del:删除
+  operateFooter = (id, type) => {
+    const { dispatch } = this.props;
+    const { params } = this.state;
+    let dis_type = '';
+    let param_data = {};
+    if (type == 'edit') {
+      dis_type = 'pc_home/edit_home_footer';
+      param_data = id;
+    } else if (type == 'del') {
+      dis_type = 'pc_home/del_home_footer';
+      param_data.linkIds = id;
+    }
+    if(param_data.linkName&&param_data.linkName.length>20){
+      message.error(`${sldComLanguage('标题长度不能大于20')}`)
+      return false
+    }
+    this.setState({ submiting: true });
+    dispatch({
+      type: dis_type,
+      payload: param_data,
+      callback: (res) => {
+        if (res.state == 200) {
+          sucTip(res.msg);
+          this.get_list(params);
+          this.setState({
+            modalVisible: false,
+          });
+        } else {
+          failTip(res.msg);
+        }
+        this.setState({ submiting: false });
+      },
+    });
+
+  };
+
+  sldHandleConfirm = (val) => {
+    const { curData, type, addData } = this.state;
+    const { dispatch } = this.props;
+    val.showType = 1;//展示方式：1、文字；2、图片
+    if (type == 'edit') {
+      val.linkId = curData.linkId;
+      this.operateFooter(val, 'edit');
+      return false;
+    }
+    this.setState({ submiting: true });
+    dispatch({
+      type: 'pc_home/add_home_footer',
+      payload: val,
+      callback: (res) => {
+        if (res.state == 200) {
+          sucTip(res.msg);
+          this.get_list({ pageSize: pageSize });
+          this.setState({
+            modalVisible: false,
+          });
+        } else {
+          failTip(res.msg);
+        }
+        this.setState({ submiting: false });
+      },
+    });
+  };
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  //搜索
+  sldSearch = (val) => {
+    this.setState({
+      formValues: { linkName: val },
+      params: { pageSize: pageSize }
+    });
+    this.get_list({ pageSize: pageSize, linkName: val });
+  };
+
+  //搜索框内容的变化
+  sldSearChange = (val) => {
+    this.setState({
+      search_con: val.target.value,
+    });
+  };
+
+  //清空搜索内容
+  sldSearClear = () => {
+    this.setState({
+      search_con: '',
+    });
+    this.sldSearch('');
+  };
+
+  //表格拖动
+  resizeTable = (index, size, type, data) => {
+    let datas = dragSldTableColumn(index, size, data);
+    this.setState({ [type]: datas });
+  };
+
+  //添加页脚
+  addFooter = () => {
+    let { addData } = this.state;
+    for (let i in addData) {
+      addData[i].initialValue = '';
+    }
+    this.setState({ modalVisible: true, type: 'add', title: `${sldComLanguage('添加页脚')}`, addData: addData });//添加页脚
+  };
+
+  render() {
+    const { selectedRows, modalVisible, title, addData, columns, submiting, data, loading,search_con } = this.state;
+    return (
+      <div className={global.common_page}>
+        {sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('页脚管理')}`, 0, 0, 5)}
+        <Spin spinning={loading}>
+          { /*公共功能条-start*/}
+          <div className={global.operate_bg}>
+            {sldIconBtn(() => this.addFooter(), `${sldComLanguage('新增页脚')}`, 7, 7)}{/*新增页脚*/}
+            {sldSearchValClear(`${sldComLanguage('请输入名称')}`, 291, this.sldSearch, `${sldComLanguage('搜索')}`, search_con, this.sldSearChange, this.sldSearClear, 65)}
+          </div>
+          { /*公共功能条-end*/}
+          { /*标准表格-start*/}
+          <StandardTable
+            selectedRows={selectedRows}
+            data={data}
+            rowKey={'linkId'}
+            isCheck={false}
+            columns={columns}
+            onSelectRow={this.handleSelectRows}
+            onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'main')}
+            resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+            isColumnResize={true}
+          />
+          { /*标准表格-end*/}
+          { /*新增/编辑对话框-start*/}
+          <SldModal
+            width={500}
+            title={title}
+            submiting={submiting}
+            modalVisible={modalVisible}
+            sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+            sldHandleCancle={this.sldHandleCancle}
+            formItemLayoutModal={formItemLayoutModal}
+            content={addData}
+          />
+          { /*新增/编辑对话框-end*/}
+        </Spin>
+      </div>
+    );
+  }
+}

admin/src/pages/pcdecorate/home/home_cat.js

@@ -0,0 +1,375 @@
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form, Spin } from 'antd';
+import {
+	failTip,
+	sucTip,
+	list_com_page_size_10,
+	dragSldTableColumn,
+	sldHandlePaginationData,
+	sldLlineRtextAddGoodsAddMargin,
+	formItemLayoutModal,
+	getTableNum,
+	sldComLanguage,
+	sldtbaleOpeBtn,
+	getSldComImg,
+} from '@/utils/utils';
+import global from '@/global.less';
+import StandardTable from '@/components/StandardTable';
+import SldModal from '@/components/SldModal/SldModal';
+import { apiUrl } from '@/utils/sldconfig.js';
+import SldDiyMoreImgModal from '@/components/SldDiyMoreImgModal/SldDiyMoreImgModal';
+
+let pageSize = list_com_page_size_10;
+@connect(({ pc_home }) => ({
+	pc_home,
+}))
+@Form.create()
+export default class HomeCat extends Component {
+	constructor(props) {
+		super(props);
+		this.state = {
+			cur_data: {},//当前操作数据
+			modal_tip: [],//操作提示
+			modalImgVisible: false,//上传多图广告modal是否显示
+			initLoading: false,
+			submiting: false,
+			data: {},//列表数据
+			selectedRows: [],
+			selectedRowKeys: [],//selectedRows的key
+			type: 'add',//'add'新增  'edit'编辑
+			params: { pageSize: pageSize },//搜索条件
+			addData: [{
+				type: 'upload_img_upload',
+				label: `${sldComLanguage('分类图标')}`,//分类图标
+				name: 'categoryIcon',
+				fileList: [],
+				img_info: {},
+				upload_name: 'file',
+				upload_url: apiUrl + `v3/oss/common/upload?source=adminDeco`,
+				uploadPreview: this.uploadImgPre,
+				uploadChange: (info) => this.uploadImg(info, 'categoryIcon'),
+				initialValue: '',
+				extra: `${sldComLanguage('建议上传16*16的图片')}`,//建议上传16*16的图片
+			},
+			],//modal框的数据
+			formValues: {},//搜索条件、
+			columns: [
+				{
+					title: ' ',
+					dataIndex: 'goodsCategoryId',
+					align: 'center',
+					width: 55,
+					render: (text, record, index) => getTableNum(this.state.params, pageSize, index),
+				},
+				{
+					title: `${sldComLanguage('分类图标')}`,//分类图标
+					dataIndex: 'categoryIconUrl',
+					align: 'center',
+					width: 100,
+					render: (text, record, index) => {
+						return text ? getSldComImg(text, 20, 20, 16, 16) : null;
+					},
+				},
+				{
+					title: `${sldComLanguage('分类名称')}`,//分类名称
+					dataIndex: 'name',
+					align: 'center',
+					width: 100,
+				},
+				{
+					title: `${sldComLanguage('广告图')}`,//广告图
+					dataIndex: 'advertisePicture',
+					align: 'center',
+					width: 100,
+					render: (text, record, index) => {
+						return text
+							? <div className={global.flex_com_row_center}>
+								{
+									JSON.parse(text).map((val, key) => {
+										return getSldComImg(val.imgUrl, 227, 146, 30, 30)
+									})
+								}
+							</div>
+							: null;
+					},
+				},
+				{
+					title: `${sldComLanguage('更新时间')}`,//更新时间
+					dataIndex: 'updateTime',
+					align: 'center',
+					width: 150,
+				}, {
+					title: `${sldComLanguage('操作')}`,//操作
+					align: 'center',
+					width: 100,
+					render: (text, record) => (
+						<Fragment>
+							{
+								sldtbaleOpeBtn(sldComLanguage('分类图标设置'), 'fenlei2', () => this.editCat(record, 'icon'))//分类图标设置
+							}
+							{
+								sldtbaleOpeBtn(sldComLanguage('分类广告设置'), 'guanggao', () => this.editCat(record, 'adv'))//分类广告设置
+							}
+						</Fragment>
+					),
+				},
+			],
+			adv_data: {
+				width: 227,
+				height: 146,//高度为0的话表示不限制
+				data: [{
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info: {},
+				}, {
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info: {},
+				}, {
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					info: {},
+				}],
+			},
+		};
+	}
+
+	empty_data = {
+		imgUrl: '',
+		imgPath: '',
+		title: '',
+		link_type: '',
+		link_value: '',
+		info: {},
+	};//空数据
+	cur_type = '';//当前操作类型 icon 图标 adv 分类广告
+	cur_row_info = '';//当前操作行信息
+	componentDidMount() {
+		this.get_list({ pageSize: pageSize });
+	}
+
+	//预览图片
+	uploadImgPre = (info) => {
+		this.viewImg(true, info.response.data.url);
+	};
+
+	//预览图片/关闭预览图片
+	viewImg = (flag, img = '', text = '') => {
+		this.setState({
+			preview_img: img,
+			preview_alt_con: text,
+			show_preview_modal: flag,
+		});
+	};
+
+	//上传图片
+	uploadImg = (info, type) => {
+		let { addData } = this.state;
+		if (info.file.status != undefined && info.file.status != 'error') {
+			for (let i in addData) {
+				if (addData[i].name == type) {
+					addData[i].fileList = info.fileList;
+					addData[i].img_info = (info.file.response != undefined && info.fileList.length > 0 && info.file.response.data != undefined) ? info.file.response.data : [];
+				}
+			}
+			this.setState({ addData });
+		}
+	};
+	//编辑分类   type icon：分类图标  adv:分类广告
+	editCat = (val, type) => {
+		let { adv_data, modalImgVisible, addData, modalVisible, cur_data } = this.state;
+		if (type == 'adv') {
+			if(val.advertisePicture){
+				let tmp_data = JSON.parse(val.advertisePicture);
+				for(let i in adv_data.data){
+					adv_data.data[i] = tmp_data[i]!=undefined?tmp_data[i]:this.empty_data;
+				}
+			}else{
+				for(let i in adv_data.data){
+					adv_data.data[i] = this.empty_data;
+				}
+			}
+			cur_data = adv_data;
+			modalImgVisible = true;
+		} else if (type == 'icon') {
+			for (let i in addData) {
+				if (addData[i].name == 'categoryIcon') {
+					let fileList = [];
+					let tmp_data = {};
+					tmp_data.uid = val.goodsCategoryId;
+					tmp_data.name = val.categoryIconUrl;
+					tmp_data.status = 'done';
+					tmp_data.url = val.categoryIconUrl;
+					fileList.push(tmp_data);
+					addData[i].fileList = fileList;
+					addData[i].img_info.path = val.categoryIconPath;
+				} else {
+					addData[i].initialValue = val[addData[i].name];
+				}
+			}
+			modalVisible = true;
+		}
+		this.cur_type = type;
+		this.cur_row_info = val;
+		this.setState({
+			cur_data,
+			modalImgVisible,
+			modal_tip: [],
+			addData: addData,
+			modalVisible,
+			adv_data
+		});
+	};
+
+	//获取数据列表
+	get_list = (params) => {
+		this.setState({ initLoading: true });
+		const { dispatch } = this.props;
+		let { data } = this.state;
+		dispatch({
+			type: 'pc_home/get_home_cat_lists',
+			payload: params,
+			callback: (res) => {
+				this.setState({ initLoading: false });
+				if (res.state == 200) {
+					if (res.data.length == 0 && this.state.params.currentPage > 1) {
+						params.currentPage = params.currentPage - 1;
+						this.get_list(params);
+					} else {
+						data.list = res.data;
+						this.setState({
+							data: data,
+						});
+					}
+				}
+			},
+		});
+	};
+
+	handleSelectRows = (rows, rowkeys) => {
+		this.setState({
+			selectedRows: rows,
+			selectedRowKeys: rowkeys,
+		});
+	};
+
+	handleTablePagination = (pagination, filtersArg, sorter, type = 'main') => {
+		const { formValues } = this.state;
+		if (type == 'main') {
+			const params = sldHandlePaginationData(pagination, filtersArg, sorter, formValues);
+			pageSize = params.pageSize;
+			this.setState({ params });
+			this.get_list(params);
+		}
+	};
+
+
+//表格拖动
+	resizeTable = (index, size, type, data) => {
+		let datas = dragSldTableColumn(index, size, data);
+		this.setState({ [type]: datas });
+	};
+
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false, modalImgVisible: false });
+	};
+
+	sldHandleConfirm = (val) => {
+		let { adv_data, params, addData } = this.state;
+		const { dispatch } = this.props;
+		let param_data = {};
+		param_data.goodsCategoryId = this.cur_row_info.goodsCategoryId;//分类id
+		if (this.cur_type == 'icon') {
+			for (let i in addData) {
+				if (addData[i].name == 'categoryIcon') {
+					if (addData[i].img_info.path == undefined) {
+						failTip(`${sldComLanguage('请上传')}${sldComLanguage('分类图标')}`);//请上传分类图标
+						return false;
+					} else {
+						param_data.categoryIcon = addData[i].img_info.path;//分类图标
+					}
+				}
+			}
+		} else if (this.cur_type == 'adv') {
+			param_data.advertisePicture = JSON.stringify(val);//分类的广告数据
+		}
+		dispatch({
+			type: 'pc_home/edit_cat',
+			payload: param_data,
+			callback: (res) => {
+				if (res.state == 200) {
+					sucTip(res.msg);
+					this.get_list(params);
+					this.setState({
+						modalVisible: false,
+						modalImgVisible: false,
+					});
+				} else {
+					failTip(res.msg);
+				}
+				this.setState({ submiting: false });
+			},
+		});
+	};
+
+	render() {
+		const { selectedRows, columns, initLoading, data, submiting, addData, modalVisible, modalImgVisible, cur_data, modal_tip } = this.state;
+		return (
+			<div className={global.common_page} style={{ flex: 1 }}>
+				{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('首页分类')}${sldComLanguage('管理')}`, 0, 0, 10)}{/*首页分类管理*/}
+				<Spin spinning={initLoading}>
+					{/*标准表格-start*/}
+					<StandardTable
+						selectedRows={selectedRows}
+						data={data}
+						rowKey={'goodsCategoryId'}
+						isCheck={false}
+						columns={columns}
+						onSelectRow={this.handleSelectRows}
+						onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'main')}
+						onSldHandleSeleRow={this.onSldHandleSeleRow}
+						resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+						isColumnResize={true}
+					/>
+					{/*标准表格-end*/}
+
+				</Spin>
+				{/*新增/编辑对话框-start*/}
+				<SldModal
+					title={`${sldComLanguage('首页分类图标设置')}`}//首页分类图标设置
+					submiting={submiting}
+					width={500}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					formItemLayoutModal={formItemLayoutModal}
+					content={addData}
+				/>
+				{/*新增/编辑对话框-end*/}
+				<SldDiyMoreImgModal
+					width={1000}
+					title={`${sldComLanguage('首页分类广告设置')}`}//首页分类广告设置
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalImgVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+			</div>
+
+		);
+	}
+}

admin/src/pages/pcdecorate/home/home_setting.js

@@ -0,0 +1,161 @@
+/*
+* 首页轮播图设置
+* */
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form, } from 'antd';
+import {
+	failTip,
+	sucTip,
+	sldEmptyHandle2,
+	sldComLanguage,
+} from '@/utils/utils';
+import {  pc_home_modal_tip } from '@/utils/util_data';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldHomeSetting from '@/components/SldHomeSetting/SldHomeSetting';
+import SldComHeader from '@/components/SldComHeader';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ pc_home }) => ({
+	pc_home,
+}))
+@Form.create()
+export default class HomeSetting extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			cur_index: '',//当前操作数据的index
+			cur_data: {},//当前操作的数据
+			tpl_adv_01_modal_tip: [],//modal框提示
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			modal_adv_data: {
+				type: 'home_modal_adv',
+				width: 500,
+				height: 320,
+				data: {},
+			},//首页开屏幕图设置
+			data: {
+				type: 'single_img',
+				width: 1920,
+				height: 457,//高度为0的话表示不限制
+				data: [],
+			},//装修的数据
+
+		};
+	}
+
+	cur_flash_id = '';//当前操作的轮播图id
+	modal_adv_id = '';//开屏图的id
+
+	componentDidMount() {
+		this.get_modal_adv();
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	get_modal_adv = () => {
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/get_modal_adv',
+			callback: (res) => {
+				if (res.state == 200) {
+					this.modal_adv_id = res.data.advId;
+					this.cur_flash_id = '';
+					this.editModaldv(JSON.parse(res.data.data));
+				}
+			},
+		});
+	};
+
+
+	//设置首页开屏图事件
+	editModaldv = (res) => {
+		let { modal_adv_data } = this.state;
+		let tmp_data = {};
+		tmp_data.width = modal_adv_data.width;
+		tmp_data.height = modal_adv_data.height;
+		tmp_data.source = 'home_modal_adv';
+		tmp_data.data = {
+			imgUrl: sldEmptyHandle2(res.imgUrl),
+			imgPath: sldEmptyHandle2(res.imgPath),
+			title: '',
+			link_type: sldEmptyHandle2(res.link_type),
+			link_value: sldEmptyHandle2(res.link_value),
+			show_switch: sldEmptyHandle2(res.show_switch),//弹出广告开关
+			show_radio_sele: sldEmptyHandle2(res.show_radio_sele),//弹出方式，one只有一次 more多次
+		};
+		this.setState({
+			cur_data: tmp_data,
+			modalVisible: true,
+			modal_tip: pc_home_modal_tip(),
+			title: `${sldComLanguage('设置首页开屏图')}`,//设置首页开屏图
+		});
+
+	};
+
+	//保存开屏设置
+	save_modal_adv = (val) => {
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/save_modal_adv',
+			payload: { data: JSON.stringify(val), advId: this.modal_adv_id },
+			callback: (res) => {
+				if (res.state == 200) {
+					sucTip(res.msg);
+				} else {
+					failTip(res.msg);
+				}
+			},
+		});
+	};
+
+	sldHandleConfirm = (val) => {
+		if (this.modal_adv_id != '') {
+			//保存开屏图设置
+			let {cur_data} = this.state;
+			cur_data.data = val;
+			this.setState({cur_data})
+			this.save_modal_adv(val);
+		}
+	};
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false });
+	};
+
+	render() {
+		const { submiting, modalVisible, modal_tip, cur_data, title } = this.state;
+		return (
+			<div className={`${global.common_page} ${styles.allow_show_edit}`}>
+				<SldComHeader
+					type={2}
+					title={sldComLanguage('首页开屏图设置')}//首页开屏图设置
+					tip_title={sldComLanguage('操作提示')}
+					tip_data={pc_home_modal_tip()}
+				/>
+				<SldHomeSetting
+					width={1000}
+					title={title}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+			</div>
+
+		);
+	}
+}

admin/src/pages/pcdecorate/home/instance_template_lists.js

@@ -0,0 +1,653 @@
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Input, Form, Spin, Popover, Switch,InputNumber } from 'antd';
+import {
+	sldIconBtn,
+	failTip,
+	sucTip,
+  sldPopConfirmDiy,
+	dragSldTableColumn,
+	sldHandlePaginationData,
+	list_com_page_size_10,
+	sldLlineRtextAddGoodsAddMargin,
+	formItemLayoutModal,
+	list_com_page_more,
+	sldSvgIcon,
+	validatorNumbe,
+	getTableNum,
+	sldComLanguage,
+  sldtbaleOpeBtnText,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import StandardTable from '@/components/StandardTable';
+import SldModal from '@/components/SldModal/SldModal';
+import Search from '@/components/Search/Search';
+import router from 'umi/router';
+
+let pageSize = list_com_page_size_10;
+let sthis = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class Instance_template_lists extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		this.state = {
+      search_height:0,
+			formValues: {},//搜索条件
+			submiting: false,//按钮loading
+			loading: false,
+			data: {},
+			selectedRows: [],
+			selectedRowKeys: [],//selectedRows的key
+			modalVisible: false,
+			title: '',
+			type: 'add',//'add'新增  'edit'编辑
+			params: { pageSize: pageSize },//搜索条件
+			curData: {},//编辑的数据
+			search_data: [{
+				type: 'input',
+				label: `${sldComLanguage('实例化名称')}`,
+				name: 'name',
+				placeholder: `${sldComLanguage('实例化名称')}`,
+			}, {
+				type: 'select',
+				label: `${sldComLanguage('使用状态')}`,
+				name: 'isEnable',
+				placeholder: `${sldComLanguage('请选择')}${sldComLanguage('使用状态')}`,
+				sel_data: [
+					{ key: '', name: `${sldComLanguage('全部')}` },
+					{ key: '1', name: `${sldComLanguage('启用')}` },
+					{ key: '0', name: `${sldComLanguage('禁用')}` },
+				],
+			}, {
+				type: 'select',
+				label: `${sldComLanguage('模板类型')}`,
+				name: 'tplType',
+				placeholder: `${sldComLanguage('请选择')}${sldComLanguage('模板类型')}`,
+				sel_data: [],
+				sele_key: 'type',
+				sele_name: 'typeName',
+				diy: true,
+			}, {
+				type: 'select',
+				label: `${sldComLanguage('模板布局')}`,
+				name: 'tplId',
+				placeholder: `${sldComLanguage('请选择')}${sldComLanguage('模板布局')}`,
+				sel_data: [],
+				sele_key: 'tplPcId',
+				sele_name: 'name',
+				diy: true,
+			}],//搜索数据
+			addData: [{
+				type: 'show_subtitle',
+				color: '#ff7e28',
+				name: `${sldComLanguage('基本信息')}`,
+				distance: {
+					left: 5,
+					top: 5,
+					right: 5,
+					bottom: 10,
+				},
+			}, {
+				type: 'input',
+				label: `${sldComLanguage('实例化模板名称')}`,
+				name: 'name',
+				placeholder: `${sldComLanguage('请输入')}${sldComLanguage('实例化模板名称')}`,
+				initialValue: '',
+        maxLength:20,
+				rules: [{
+					required: true,
+          whitespace: true,
+					message: `${sldComLanguage('请输入')}${sldComLanguage('实例化模板名称')}`,
+				}],
+			}, {
+				type: 'inputnum',
+				label: `${sldComLanguage('排序')}`,//排序
+				name: 'sort',
+				placeholder: `${sldComLanguage('请输入排序')}`,
+				extra: `${sldComLanguage('请输入0~255的数字,数据越小显示越靠前')}`,
+				initialValue: '',
+				rules: [{
+					required: true,
+					message: `${sldComLanguage('请输入排序')}`,
+				}, { validator: (rule, value, callback) => validatorNumbe(rule, value, callback) }],
+			},
+			],//modal框的数据
+			columns: [
+				{
+					title: ' ',
+					align: 'center',
+					dataIndex: 'dataId',
+					width: 55,
+					render: (text, record, index) => getTableNum(this.state.params, pageSize, index),
+				},
+				{
+					title: `${sldComLanguage('实例化模板名称')}`,
+					align: 'center',
+					dataIndex: 'name',
+					width: 150,
+					render: (text, record) => (
+						<Fragment>
+							<div className={global.flex_com_space_between}>
+								{record.is_edit_name != undefined && record.is_edit_name
+									? <Input maxLength={20} onChange={(e) => this.edit_filed_con(record.dataId, 'name', e.target.value)}
+											 defaultValue={text}/>
+									: <span>{text}</span>
+								}
+								{record.is_edit_name != undefined && record.is_edit_name
+									? <a className={global.flex_com_column} href={'javascript:void(0)'}
+										 style={{ marginLeft: 7 }}
+										 onClick={() => this.save_edit_filed(record, 'name', text)}>{sldSvgIcon('#FA6F1E', 16, 16, 'xuanzhong')}</a>
+									: <a className={global.flex_com_column} href={'javascript:void(0)'}
+										 style={{ marginLeft: 7 }}
+										 onClick={() => this.edit_filed(record.dataId, 'is_edit_name', 'true')}>{sldSvgIcon('#FA6F1E', 16, 16, 'edit')}</a>
+								}
+							</div>
+						</Fragment>
+					),
+				},
+				{
+					title: `${sldComLanguage('模板类型')}`,//模板类型
+					dataIndex: 'tplPcTypeName',
+					align: 'center',
+					width: 80,
+				}, {
+					title: `${sldComLanguage('模板布局')}`,//模板布局
+					dataIndex: 'tplPcName',
+					align: 'center',
+					width: 100,
+				},
+				{
+					title: `${sldComLanguage('排序')}`,//排序
+					dataIndex: 'sort',
+          align: 'center',
+					width: 80,
+					render: (text, record) => (
+						<Fragment>
+							<div className={global.flex_com_space_between}>
+								{record.is_edit_sort != undefined && record.is_edit_sort
+									? <InputNumber min={0} max={255} precision={0} onChange={(e) => this.edit_filed_con(record.dataId, 'sort', e)}
+											 defaultValue={text}/>
+									: <span>{text}</span>
+								}
+								{record.is_edit_sort != undefined && record.is_edit_sort
+									? <a className={global.flex_com_column} href={'javascript:void(0)'}
+										 style={{ marginLeft: 7 }}
+										 onClick={() => this.save_edit_filed(record, 'sort', text)}>{sldSvgIcon('#FA6F1E', 16, 16, 'xuanzhong')}</a>
+									: <a className={global.flex_com_column} href={'javascript:void(0)'}
+										 style={{ marginLeft: 7 }}
+										 onClick={() => this.edit_filed(record.dataId, 'is_edit_sort', 'true')}>{sldSvgIcon('#FA6F1E', 16, 16, 'edit')}</a>
+								}
+							</div>
+						</Fragment>
+					),
+				},
+				{
+					title: `${sldComLanguage('创建时间')}`,//创建时间
+					dataIndex: 'createTime',
+					align: 'center',
+					width: 150,
+				}, {
+					title: `${sldComLanguage('更新时间')}`,//更新时间
+					dataIndex: 'updateTime',
+					align: 'center',
+					width: 150,
+				},
+				{
+					title: `${sldComLanguage('启用状态')}`,//启用状态
+					dataIndex: 'isEnable',
+					align: 'center',
+					width: 80,
+					render: (text, record) => {
+						return <Switch checked={text == 1 ? true : false}
+									   onChange={(val) => this.handleSetEnable(val, record.dataId)}/>;
+					},
+				},
+				{
+					title: `${sldComLanguage('操作')}`,//操作
+					align: 'center',
+					width: 100,
+					render: (text, record) => (
+						<Fragment>
+              {sldtbaleOpeBtnText(`${sldComLanguage('编辑')}`, () => this.diyTpl(record))}{/*装修*/}
+              <span className={global.splitLine}></span>
+              {/*删除后不可恢复，是否确定删除？*/}
+              {sldPopConfirmDiy('leftBottom', `${sldComLanguage('删除后不可恢复，是否确定删除')}`, () => this.operateInstanceTpl(record.dataId, 'del'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+                sldtbaleOpeBtnText(`${sldComLanguage('删除')}`, () => null))}
+              <span className={global.splitLine}></span>
+              {sldtbaleOpeBtnText(`${sldComLanguage('复制')}`, () => this.operateInstanceTpl(record.dataId,'copy'))}{/*复制*/}
+              <span className={global.splitLine}></span>
+							<Popover placement="leftBottom" content={<div className={global.com_zoom}
+																		  dangerouslySetInnerHTML={{ __html: record.html }}></div>}
+									 title={sldComLanguage('装修模版效果预览')}>
+								{
+                  sldtbaleOpeBtnText(`${sldComLanguage('预览')}`, null)
+								}
+							</Popover>
+						</Fragment>
+					),
+				},
+			],
+		};
+	}
+
+	sele_tpl_data = {
+		type: 'sele_tpl_type',
+		handleTabChange(val) {
+			sthis.handleTabChange(val);
+		},
+		handle_sele_tpl(val) {
+			sthis.handle_sele_tpl(val);
+		},
+		activeKey: '',//默认第一个模板分类
+		sele_tpl_info: {},//选中的模板信息
+		data_left: [],//模板分类列表
+		data_right: [],//模板列表
+	};//选择模板数据信息
+
+	sele_tpl_title = {
+		type: 'show_subtitle',
+		color: '#ff7e28',
+		name: `${sldComLanguage('选择模板')}`,
+		distance: {
+			left: 5,
+			top: 10,
+			right: 5,
+			bottom: 10,
+		},
+	};//选择模板的标题
+
+	componentDidMount() {
+		this.get_list({ pageSize: pageSize });
+		this.get_tpl_type_list();
+    this.get_tpl_list('');
+    this.resize();
+    window.addEventListener('resize', this.resize);
+	}
+
+  componentWillUnmount() {
+    window.removeEventListener('resize', this.resize);
+  }
+
+  resize = () =>{
+    const {search_height} = this.state;
+    if(this.refs.search_part!=undefined){
+      if(this.refs.search_part.clientHeight != search_height){
+        this.setState({search_height:this.refs.search_part.clientHeight})
+      }
+    }
+  }
+
+	//获取所有模板类型列表
+	get_tpl_type_list = () => {
+		const { dispatch } = this.props;
+		let { search_data } = this.state;
+		dispatch({
+			type: 'pc_home/get_tpl_type_list',
+			callback: (res) => {
+				if (res.state == 200) {
+					if(res.data.length != 0){
+						this.sele_tpl_data.data_left = res.data;
+						this.sele_tpl_data.activeKey = res.data[0].type;
+						this.get_tpl_list(res.data[0].type, 'first');
+						for (let i in search_data) {
+							if (search_data[i].name == 'tplType') {
+								search_data[i].sel_data = res.data;
+								break;
+							}
+						}
+						this.setState({ search_data });
+					}
+				}
+			},
+		});
+	};
+
+	//根据模板类型获取该类型下的模板
+	get_tpl_list = (tpl_type, type = '') => {
+		const { dispatch } = this.props;
+		let { addData,search_data } = this.state;
+		let param = {};
+		if(tpl_type){
+      param.type = tpl_type;
+    }
+    param.pageSize = list_com_page_more;
+		dispatch({
+			type: 'pc_home/get_tpl_list',
+			payload: param,
+			callback: (res) => {
+				if(tpl_type == ''){
+					//用于搜索
+					for(let i in search_data){
+						if(search_data[i].name == 'tplId'){
+							search_data[i].sel_data = res.data.list;
+							break;
+						}
+					}
+					this.setState({search_data})
+				}
+				if (type == 'first') {
+					if (res.state == 200) {
+						this.sele_tpl_data.data_right = res.data.list;
+					} else {
+						this.sele_tpl_data.data_right = [];
+					}
+				} else {
+					addData.map(item => {
+						if (item.type == 'sele_tpl_type') {
+							item.data_right = [];
+							if (res.state == 200) {
+								item.data_right = res.data.list;
+							}
+						}
+					});
+					this.setState({ addData });
+
+				}
+
+			},
+		});
+	};
+
+	//获取数据列表
+	get_list = (params) => {
+		this.setState({ loading: true });
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/get_tpl_instance_list',
+			payload: params,
+			callback: (res) => {
+				this.setState({ loading: false });
+				if (res.state == 200) {
+					if (res.data.length == 0 && this.state.params.current > 1) {
+						params.current = params.current - 1;
+						this.get_list(params);
+					} else {
+						this.setState({
+							data: res.data,
+						});
+					}
+				}
+			},
+		});
+	};
+
+	//保存表格列的内容
+	save_edit_filed = (record, filed, value) => {
+		let { data } = this.state;
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/edit_instance_tpl',
+			payload: { dataId: record.dataId, name: record.name, sort: record.sort },
+			callback: (res) => {
+				if (res.state == 200) {
+					sucTip(res.msg);
+					let tmp = data.list.filter(item => item.dataId == record.dataId)[0];
+					tmp[filed] = value;
+					tmp.is_edit_name = false;
+					tmp.is_edit_sort = false;
+					this.setState({ data });
+				} else {
+					failTip(res.msg);
+				}
+			},
+		});
+
+	};
+
+	//编辑表格列的内容
+	edit_filed_con = (id, filed, value) => {
+		let { data } = this.state;
+		let tmp = data.list.filter(item => item.dataId == id)[0];
+		tmp[filed] = value;
+		this.setState({ data });
+	};
+
+	//编辑表格列内容
+	edit_filed = (id, filed, flag) => {
+		let { data } = this.state;
+		let tmp = data.list.filter(item => item.dataId == id)[0];
+		tmp[filed] = flag;
+		this.setState({ data });
+	};
+
+
+	//装修模板切换
+	handleTabChange = (val) => {
+		let { addData } = this.state;
+		addData.map((item) => {
+			if (item.type == 'sele_tpl_type') {
+				item.activeKey = val;
+			}
+		});
+		this.setState({ addData });
+		this.get_tpl_list(val);
+	};
+
+	//装修模板的选择
+	handle_sele_tpl = (val) => {
+		let { addData } = this.state;
+		addData.map((item) => {
+			if (item.type == 'sele_tpl_type') {
+				item.sele_tpl_info = val;
+			}
+		});
+		this.setState({ addData });
+	};
+
+	handleSelectRows = (rows, rowkeys) => {
+		this.setState({
+			selectedRows: rows,
+			selectedRowKeys: rowkeys,
+		});
+	};
+
+	handleTablePagination = (pagination, filtersArg, sorter, type = 'main') => {
+		const { formValues } = this.state;
+		const params = sldHandlePaginationData(pagination, filtersArg, sorter, formValues);
+		pageSize = params.pageSize;
+		this.setState({
+			params: params,
+		});
+		this.get_list(params);
+	};
+
+	//新增数据
+	addData = () => {
+		let { addData } = this.state;
+		addData = addData.filter(item => item.type != 'sele_tpl_type' && item.name != `${sldComLanguage('选择模板')}`);
+		addData.map(item => {
+			if (item.type != 'show_subtitle') {
+				item.initialValue = '';
+			}
+		});
+		addData.push(this.sele_tpl_title);
+		addData.push(this.sele_tpl_data);
+		this.setState({ modalVisible: true, type: 'add', title: `${sldComLanguage('添加')}${sldComLanguage('装修模板')}`, addData: addData });
+	};
+
+	//编辑数据
+	editData = (val) => {
+		let { addData } = this.state;
+		addData = addData.filter(item => item.type != 'sele_tpl_type' && item.name != `${sldComLanguage('选择模板')}`);
+		addData.map(item => {
+			if (item.type != 'show_subtitle') {
+				item.initialValue = val[item.name];
+			}
+		});
+		//编辑装修模板基本信息
+		this.setState({ type: 'edit', title: `${sldComLanguage('编辑装修模板基本信息')}`, addData: addData, modalVisible: true, curData: val });
+	};
+
+	//模板装修
+	diyTpl = (val) => {
+		//装修数据存缓存
+		val.back_route = '/pcdadd_templateecorate_home/instance_template_lists';
+		localStorage.setItem('pc_diy_tpl', JSON.stringify(val));
+		router.push('/pcdecorate_home/instance_template_lists_to_add');
+	};
+
+	sldHandleConfirm = (val) => {
+		const { curData, type, addData } = this.state;
+		const { dispatch } = this.props;
+		if (type == 'edit') {
+			val.dataId = curData.dataId;
+			this.operateInstanceTpl(val, 'edit');
+		} else {
+			let sele_tpl_info = addData.filter(item => item.type == 'sele_tpl_type')[0].sele_tpl_info;
+			val.html = sele_tpl_info.data;
+			val.json = sele_tpl_info.defaultData;
+			val.tplPcId = sele_tpl_info.tplPcId;
+			if(val.tplPcId == undefined){
+				failTip(`${sldComLanguage('请选择模板')}`);
+				return false;
+			}
+			this.setState({ submiting: true });
+			dispatch({
+				type: 'pc_home/add_instance_tpl',
+				payload: val,
+				callback: (res) => {
+					if (res.state == 200) {
+						sucTip(res.msg);
+						this.get_list({ pageSize: pageSize });
+						this.setState({
+							modalVisible: false,
+							params: { pageSize: pageSize },
+						});
+					} else {
+						failTip(res.msg);
+					}
+					this.setState({ submiting: false });
+				},
+			});
+		}
+	};
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false });
+	};
+
+	//搜索事件
+	search = (data) => {
+		const values = { ...data };
+    for(let i in values){
+      if(values[i] == ''){
+        delete values[i]
+      }
+    }
+		this.setState({
+			formValues: values,
+      params: { pageSize: pageSize }
+		});
+		this.get_list({ pageSize: pageSize, ...values });
+	};
+	//搜索重置事件
+	seaReset = () => {
+		//搜索条件置为空
+		this.setState({
+			formValues: {},
+      params: { pageSize: pageSize }
+		});
+		this.get_list({ pageSize: pageSize });
+	};
+
+
+	//表格拖动
+	resizeTable = (index, size, type, data) => {
+		let datas = dragSldTableColumn(index, size, data);
+		this.setState({ [type]: datas });
+	};
+
+	//是否启用
+	handleSetEnable = (val, id) => {
+		this.operateInstanceTpl({ dataId: id, isEnable: val }, 'enable');
+	};
+
+
+	//实例化模板操作，edit 编辑，del 删除，enable 启用/禁用, diy 装修 copy 复制
+	operateInstanceTpl = (id, type) => {
+		const { dispatch } = this.props;
+		let dis_type = '';
+		let params = { dataId: id };
+		if (type == 'add') {
+			dis_type = 'pc_home/add_home_flash';
+			params = id;
+		} else if (type == 'edit') {
+			dis_type = 'pc_home/edit_instance_tpl';
+			params = id;
+		} else if (type == 'del') {
+			dis_type = 'pc_home/del_instance_tpl';
+		} else if (type == 'copy') {
+			dis_type = 'pc_home/copy_instance_tpl';
+		} else if (type == 'enable') {
+			dis_type = 'pc_home/enable_instance_tpl';
+			params = id;
+		}
+		dispatch({
+			type: dis_type,
+			payload: params,
+			callback: (res) => {
+				if (res.state == 200) {
+					sucTip(res.msg);
+					this.get_list(this.state.params);
+					this.setState({
+						modalVisible: false,
+					});
+				} else {
+					failTip(res.msg);
+				}
+			},
+		});
+	};
+
+	render() {
+		const { selectedRows, modalVisible, title, addData, columns, submiting, data, loading, type, search_data, search_height } = this.state;
+		return (
+			<div className={global.common_page}>
+				{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('实例化装修模板管理')}`, 0, 0, 10)}{/*实例化装修模板管理*/}
+				<Spin spinning={loading}>
+					<div className={global.tableListForm} ref={'search_part'}>
+						<Search search_data={search_data}
+								seaSubmit={(data) => this.search(data)} seaReset={() => this.seaReset()}/>
+					</div>
+					{/*公共功能条-start*/}
+					<div className={global.operate_bg}>
+            {sldIconBtn(() => this.addData(), `${sldComLanguage('添加装修模板')}`, 7, 7)}
+					</div>
+					{/*公共功能条-end*/}
+					{/*标准表格-start*/}
+					<StandardTable
+            totalHeight={document.body.clientHeight-160-search_height-20}
+						selectedRows={selectedRows}
+						data={data}
+						rowKey={'dataId'}
+						isCheck={false}
+						columns={columns}
+						onSelectRow={this.handleSelectRows}
+						onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'main')}
+						resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+						isColumnResize={true}
+					/>
+					{/*标准表格-end*/}
+					{/*新增/编辑对话框-start*/}
+					<SldModal
+						width={type == 'add' ? 900 : 600}
+						title={title}
+						sldSeleSingleRow={true}
+						submiting={submiting}
+						modalVisible={modalVisible}
+						sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+						sldHandleCancle={this.sldHandleCancle}
+						formItemLayoutModal={formItemLayoutModal}
+						content={addData}
+					/>
+					{/*新增/编辑对话框-end*/}
+				</Spin>
+
+			</div>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/main_banner.js

@@ -0,0 +1,245 @@
+/*
+* 主轮播图设置，宽度满屏，高度457，主要用于页面分类处
+* */
+import { connect } from 'dva/index';
+import moment from 'moment/moment';
+import React, { Component, Fragment } from 'react';
+import { Form, Carousel } from 'antd';
+import {
+	sldPopConfirmDiy,
+	sldEmptyHandle2,dateTimeFormat,sldComLanguage
+} from '@/utils/utils';
+import { tpl_adv_01_modal_tip } from '@/utils/util_data';
+import global from '../../../global.less';
+import styles from '../pcdecorate.less';
+import SldDiySingleImgModal from '@/components/SldDiySingleImgModal/SldDiySingleImgModal';
+import diy from '../diy_page.less';
+
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ product }) => ({
+	product,
+}))
+@Form.create()
+export default class MainBanner extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			tpl_info: props.tpl_info,
+			cur_index: '',//当前操作数据的index
+			cur_data: {},//当前操作的数据
+			tpl_adv_01_modal_tip: [],//modal框提示
+			submiting: false,//按钮loading
+			modalVisible: false,//是否展示modal
+			data: {
+				type: 'main_banner',
+				width: 1920,
+				height: 457,//高度为0的话表示不限制
+				data: [{
+					status: 1,
+					imgUrl: '',
+					imgPath: '',
+					title: '',
+					link_type: '',
+					link_value: '',
+					sort: '',
+					startTime: '',
+					endTime: '',
+				}],
+			},//装修的数据
+		};
+	}
+
+	cur_operate_index = '';//当前操作的轮播图位置
+
+	componentDidMount() {
+		let { tpl_info } = this.state;
+		if (tpl_info.data.length > 0) {
+			let tmp_data = [];
+			for (let i in tpl_info.data) {
+				tmp_data.push({
+					status: tpl_info.data[i].status,
+					imgUrl: tpl_info.data[i].imgUrl,
+					imgPath: tpl_info.data[i].imgPath,
+					title: '',
+					link_type: tpl_info.data[i].link_type,
+					link_value: tpl_info.data[i].link_value,
+					sort: tpl_info.data[i].orderNo!=undefined?tpl_info.data[i].orderNo:'',
+					range_picker: [moment(tpl_info.data[i].startTime, dateTimeFormat), moment(tpl_info.data[i].endTime, dateTimeFormat)],
+				});
+			}
+			tpl_info.data = tmp_data;
+		}
+		this.setState({
+			data: tpl_info,
+		});
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	editTpl = (tip, index, type) => {
+		let { data, title } = this.state;
+		let tmp_data = {};
+		tmp_data.width = data.width;
+		tmp_data.height = data.height;
+		tmp_data.source = 'home_flash';
+		this.cur_operate_index = index;
+		if (type == 'add') {
+			title = `${sldComLanguage('添加')}${sldComLanguage('轮播图')}`;
+			tmp_data.data = {
+				imgUrl: '',
+				imgPath: '',
+				title: '',
+				link_type: '',
+				link_value: '',
+				sort: '',//排序
+				range_picker: [],//使用时间
+			};
+		} else {
+			title = `${sldComLanguage('编辑')}${sldComLanguage('轮播图')}`;
+			tmp_data.data = data.data[index];
+		}
+		this.setState({
+			cur_index: index,
+			cur_data: tmp_data,
+			modalVisible: true,
+			modal_tip: tip,
+			title,
+		});
+	};
+
+	//轮播图操作，del 删除，start 启用，stop 禁用
+	operateFlash = (indexs, type) => {
+		let { data } = this.state;
+		if (type == 'del') {
+			data.data = data.data.filter((item, index) => index != indexs);
+		} else if (type == 'start') {
+			for (let i in data.data) {
+				if (i == indexs) {
+					data.data[i].status = 1;
+					break;
+				}
+			}
+		} else if (type == 'stop') {
+			for (let i in data.data) {
+				if (i == indexs) {
+					data.data[i].status = 2;
+					break;
+				}
+			}
+		}
+		this.save(data);
+	};
+
+	sldHandleConfirm = (val) => {
+		let { data } = this.state;
+		if (this.cur_operate_index !== '') {
+			//严格不等于防止把下表为0的数据过滤掉
+			for (let i in data.data) {
+				if (i == this.cur_operate_index) {
+					val.status = data.data[i].status;
+					data.data[i] = val;
+				}
+			}
+		} else {
+			data.data.push({ ...val, status: 1 });
+		}
+		this.save(data);
+	};
+
+	//数据处理并保存
+	save = (data) => {
+		let tmp_data = [];
+		if (data.data.length > 0) {
+			for (let i in data.data) {
+				tmp_data[i] = {...data.data[i]};
+				if (data.data[i].range_picker) {
+					tmp_data[i].startTime = data.data[i].range_picker[0] ? data.data[i].range_picker[0].format(dateTimeFormat) : '';
+					tmp_data[i].endTime = data.data[i].range_picker[1] ? data.data[i].range_picker[1].format(dateTimeFormat) : '';
+					delete tmp_data[i].range_picker;
+				}
+			}
+		}
+		let data_new = {...data};
+		data_new.data = tmp_data
+		this.setState({
+			modalVisible: false,
+		}, () => {
+			this.props.save_tpl_data(data_new, sthis.refs.wrap_html.innerHTML);
+		});
+	};
+
+	sldHandleCancle = () => {
+		this.setState({ modalVisible: false });
+	};
+
+	render() {
+		const { data, submiting, modalVisible, modal_tip, cur_data, title } = this.state;
+		sldEmptyHandle2(localStorage.getItem('pc_diy_tpl')) != '' ? JSON.parse(localStorage.getItem('pc_diy_tpl')) : '';
+		return (
+			<Fragment>
+				{data.data.length > 0 &&
+				<Carousel autoplay>
+					{data.data.map((item, index) => (
+						<div key={index} className={`${styles.adv_01_wrap}`}>
+							<img className={styles.adv_01_img} src={item.imgUrl}/>
+							<div className={styles.sld_mask}>
+								{/*添加轮播图*/}
+								<span className={`${styles.btn_common} ${styles.add}`}
+								      onClick={() => this.editTpl(tpl_adv_01_modal_tip(),'',  'add')}>{sldComLanguage('添加')}</span>
+								{/*删除*/}
+                {/*确定启用该轮播图？*/}
+								{item.status == 2 && sldPopConfirmDiy('leftBottom', `${sldComLanguage('pc_home.home_setting.confirm_available')}`, () => this.operateFlash(index, 'start'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+									<span className={`${styles.btn_common} ${styles.enable}`}>{sldComLanguage('启用')}</span>)}{/*启用*/}
+                {/*确定停用该轮播图？*/}
+								{item.status == 1 && sldPopConfirmDiy('leftBottom', `${sldComLanguage('pc_home.home_setting.confirm_unavailable')}`, () => this.operateFlash(index, 'stop'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+									<span className={`${styles.btn_common} ${styles.enable}`}>{sldComLanguage('禁用')}</span>)}{/*停用*/}
+								<span className={`${styles.btn_common} ${styles.edit}`}
+									  onClick={() => this.editTpl(tpl_adv_01_modal_tip(), index, 'edit')}>{sldComLanguage('编辑')}</span>{/*编辑*/}
+                {/*删除后不可恢复，是否确定删除？*/}
+								{sldPopConfirmDiy('leftBottom', `${sldComLanguage('删除后不可恢复，是否确定删除')}`, () => this.operateFlash(index, 'del'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+									<span className={`${styles.btn_common} ${styles.del}`}>{sldComLanguage('删除')}</span>)}{/*删除*/}
+							</div>
+						</div>
+					))}
+				</Carousel>
+				}
+
+        {data.data.length == 0
+          ? <div ref={'wrap_html'}>
+            <div className={diy.main_banner}>
+              <div className={styles.sld_mask}>
+                {/*添加轮播图*/}
+                <span className={`${styles.btn_common} ${styles.add}`}
+                      onClick={() => this.editTpl(tpl_adv_01_modal_tip(),'',  'add')} style={{right:5}}>{sldComLanguage('添加')}</span></div>
+            </div>
+          </div>
+          : <div ref={'wrap_html'} style={{ opacity: 0 }}>
+            <div className={diy.main_banner}>
+              <img src={data.data[0].imgUrl}/>
+            </div>
+          </div>
+        }
+
+				<SldDiySingleImgModal
+					width={1000}
+					title={title}
+					sldSeleSingleRow={true}
+					submiting={submiting}
+					modalVisible={modalVisible}
+					sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+					sldHandleCancle={this.sldHandleCancle}
+					content={cur_data}
+					modal_tip={modal_tip}
+				/>
+			</Fragment>
+		);
+	}
+}

admin/src/pages/pcdecorate/home/nav.js

@@ -0,0 +1,576 @@
+import { connect } from 'dva/index';
+import React, { Component, Fragment } from 'react';
+import { Form, Spin, Switch } from 'antd';
+import {
+  sldIconBtn,
+  failTip,
+  sucTip,
+  sldPopConfirmDiy,
+  sldSearchValClear,
+  list_com_page_size_10,
+  dragSldTableColumn,
+  sldHandlePaginationData,
+  formItemLayoutModal,
+  getTableNum,
+  sldComLanguage,
+  sldtbaleOpeBtnText,
+  validatorNumbe,
+} from '@/utils/utils';
+import { diy_link_type } from '@/utils/util_data';
+import global from '@/global.less';
+import StandardTable from '@/components/StandardTable';
+import SldModal from '@/components/SldModal/SldModal';
+import SldSelGoodsSingleDiy from '@/components/SldSelGoodsSingleDiy';
+import SldComHeader from '@/components/SldComHeader';
+
+let pageSize = list_com_page_size_10;
+@connect(({ pc_home }) => ({
+  pc_home,
+}))
+@Form.create()
+export default class Nav extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      link_type: '',
+      search_con: '',
+      initLoading: false,
+      submiting: false,
+      data: {},//列表数据
+      selectedRows: [],
+      selectedRowKeys: [],//selectedRows的key
+      title: '',
+      type: 'add',//'add'新增  'edit'编辑
+      params: { pageSize: pageSize },//搜索条件
+      operateData: [],//sldmodal操作数据
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('导航名称')}`,
+        name: 'navName',
+        extra: `${sldComLanguage('最多6个字')}`,
+        placeholder: `${sldComLanguage('请输入')}${sldComLanguage('导航名称')}`,
+        initialValue: '',
+        maxLength: 6,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入')}${sldComLanguage('导航名称')}`,
+        }],
+      }, {
+
+        type: 'inputnum',
+        label: `${sldComLanguage('排序')}`,
+        name: 'sort',
+        extra: `${sldComLanguage('数字越小越靠前')}`,
+        placeholder: `${sldComLanguage('请输入排序')}`,
+        initialValue: '',
+        rules: [{
+          required: true,
+          message: `${sldComLanguage('排序必填')}`,
+        }, { validator: (rule, value, callback) => validatorNumbe(rule, value, callback) }],
+      }, {
+        type: 'radio_select',
+        label: `${sldComLanguage('是否显示')}`,
+        name: 'isShow',
+        data: [{
+          key: 1,
+          value: `${sldComLanguage('是')}`,
+        }, {
+          key: 0,
+          value: `${sldComLanguage('否')}`,
+        }],
+        initialValue: 1,
+      }, {
+        type: 'select',
+        label: `${sldComLanguage('链接类型')}`,
+        name: 'linkData',
+        placeholder: `${sldComLanguage('请选择')}${sldComLanguage('链接类型')}`,//请选择操作类型
+        initialValue: '',
+        sel_data: diy_link_type(),
+        sldChange: this.handleSeleLinkType,
+      },
+      ],//modal框的数据
+      formValues: {},//搜索条件、
+      columns: [
+        {
+          title: ' ',
+          dataIndex: 'navId',
+          align: 'center',
+          width: 55,
+          render: (text, record, index) => getTableNum(this.state.params, pageSize, index),
+        },
+        {
+          title: `${sldComLanguage('导航名称')}`,
+          dataIndex: 'navName',
+          align: 'center',
+          width: 150,
+        },
+        {
+          title: `${sldComLanguage('排序')}`,
+          dataIndex: 'sort',
+          align: 'center',
+          width: 100,
+        },
+        {
+          title: `${sldComLanguage('链接类型')}`,
+          dataIndex: 'link_type',
+          align: 'center',
+          width: 150,
+          render: (text, record) => {
+            let tmp_data = JSON.parse(record.data);
+            let data = diy_link_type().filter(item => item.key == tmp_data.link_type)[0];
+            return data != undefined ? data.name : '--';
+          },
+        }, {
+          title: `${sldComLanguage('跳转目标')}`,
+          dataIndex: 'link_value',
+          align: 'center',
+          width: 150,
+          render: (text, record) => {
+            let tmp_data = JSON.parse(record.data);
+            return tmp_data.link_value?tmp_data.link_value:'--';
+          },
+        }, {
+          title: `${sldComLanguage('启用状态')}`,
+          dataIndex: 'isShow',
+          align: 'center',
+          width: 100,
+          render: (text, record) => {
+            return <Switch checked={text == 1 ? true : false}
+                           onChange={(val) => this.handleSetEnable(val, record.navId)}/>;
+          },
+        }, {
+          title: `${sldComLanguage('操作')}`,
+          align: 'center',
+          width: 100,
+          render: (text, record) => (
+            <Fragment>
+              {sldtbaleOpeBtnText('编辑', () => this.editNav(record))}{/*编辑*/}
+              <span className={global.splitLine}></span>
+              {/*删除后不可恢复，是否确定删除？*/}
+              {sldPopConfirmDiy('leftBottom', `${sldComLanguage('删除后不可恢复，是否确定删除')}`, () => this.operateNav(record.navId, 'del'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+                sldtbaleOpeBtnText(`${sldComLanguage('删除')}`, () => null))}
+            </Fragment>
+          ),
+        },
+      ],
+    };
+  }
+
+  cur_edit_id = '';//当前操作数据id
+  sele_info = {};//当前选中的数据
+  componentDidMount() {
+    this.get_list({ pageSize: pageSize });
+  }
+
+  handleSeleLinkType = (val) => {
+    let { operateData } = this.state;
+    operateData = operateData.filter(item => item.name != 'link_value');
+    for (let i = 0; i < operateData.length; i++) {
+      if (operateData[i].name == 'linkData') {
+        operateData[i].initialValue = val;
+        if (val == 'url') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('链接地址')}`,
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入')}${sldComLanguage('链接地址')}`,
+            initialValue: '',
+            rules: [{
+              required: true,
+              whitespace: true,
+              message: `${sldComLanguage('请输入')}${sldComLanguage('链接地址')}`,
+            }],
+          });
+        } else if (val == 'keyword') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('关键字')}`,//关键字
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入')}${sldComLanguage('关键字')}`,
+            initialValue: '',
+            rules: [{
+              required: true,
+              whitespace: true,
+              message: `${sldComLanguage('请输入')}${sldComLanguage('关键字')}`,
+            }],
+          });
+        } else if (val == 'goods') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('商品名称')}`,
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入')}${sldComLanguage('商品名称')}`,
+            initialValue: '',
+            disable: true,
+          });
+        } else if (val == 'category') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('分类名称')}`,
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入')}${sldComLanguage('分类名称')}`,
+            initialValue: '',
+            disable: true,
+          });
+        } else if (val == 'topic') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('专题名称')}`,
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入')}${sldComLanguage('专题名称')}`,
+            initialValue: '',
+            disable: true,
+          });
+        }
+      }
+    }
+    this.setState({ operateData, link_type: val });
+  };
+
+  //是否启用
+  handleSetEnable = (val, id) => {
+    this.operateNav({ navId: id, isShow: val ? 1 : 0 }, 'enable');
+  };
+
+  //编辑导航
+  editNav = (val) => {
+    let { operateData, addData } = this.state;
+    operateData = JSON.parse(JSON.stringify(addData));
+    for (let i = 0; i < operateData.length; i++) {
+      if (operateData[i].name == 'linkData') {
+        let data = JSON.parse(val.data);
+        operateData[i].initialValue = data.link_type;
+        this.sele_info = data.info;
+        if (data.link_type == 'url') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('链接地址')}`,//链接地址
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入链接地址')}`,
+            initialValue: data.link_value,
+            rules: [{
+              required: true,
+              whitespace: true,
+              message: `${sldComLanguage('请输入链接地址')}`,
+            }],
+          });
+        } else if (data.link_type == 'keyword') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('关键字')}`,//关键字
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入关键字')}`,
+            initialValue: data.link_value,
+            rules: [{
+              required: true,
+              whitespace: true,
+              message: `${sldComLanguage('请输入关键字')}`,
+            }],
+          });
+        } else if (data.link_type == 'goods') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('商品名称')}`,//商品名称
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入商品名称')}`,
+            initialValue: data.link_value,
+            disable: true,
+          });
+        } else if (data.link_type == 'category') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('分类名称')}`,//分类名称
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入分类名称')}`,
+            initialValue: data.link_value,
+            disable: true,
+          });
+        } else if (data.link_type == 'topic') {
+          operateData.splice(i + 1, 0, {
+            type: 'input',
+            label: `${sldComLanguage('专题名称')}`,//专题名称
+            name: 'link_value',
+            placeholder: `${sldComLanguage('请输入专题名称')}`,
+            initialValue: data.link_value,
+            disable: true,
+          });
+        }
+        operateData[i].sldChange = this.handleSeleLinkType;
+      } else if (operateData[i].name != 'link_value') {
+        if (operateData[i].name == 'sort') {
+          operateData[i].initialValue = val[operateData[i].name].toString();
+        } else {
+          operateData[i].initialValue = val[operateData[i].name];
+        }
+      }
+    }
+    this.cur_edit_id = val.navId;//当前操作数据id
+    this.setState({
+      type: 'edit',
+      title: `${sldComLanguage('编辑导航')}`,
+      operateData,
+      modalVisible: true,
+    });//编辑导航
+  };
+
+  //导航操作  del：删除 edit: 编辑 enable：是否启用
+  operateNav = (id, type) => {
+    this.setState({ submiting: true });
+    const { params } = this.state;
+    const { dispatch } = this.props;
+    let dis_type = '';
+    let param_data = {};
+    if (type == 'del') {
+      dis_type = 'pc_home/del_home_nav';
+      param_data = { navId: id };
+    } else if (type == 'edit') {
+      dis_type = 'pc_home/edit_home_nav';
+      param_data = id;
+    } else if (type == 'enable') {
+      dis_type = 'pc_home/switch_home_nav';
+      param_data = id;
+    }
+    dispatch({
+      type: dis_type,
+      payload: param_data,
+      callback: (res) => {
+        if (res.state == 200) {
+          sucTip(res.msg);
+          this.setState({
+            modalVisible: false,
+          });
+          this.sele_info = {};
+          this.get_list(params);
+        } else {
+          failTip(res.msg);
+        }
+        this.setState({ submiting: false });
+      },
+    });
+  };
+
+  //添加导航
+  addNav = () => {
+    let { addData, operateData } = this.state;
+    operateData = JSON.parse(JSON.stringify(addData));
+    for (let i in operateData) {
+      if (operateData[i].name == 'sort') {
+        operateData[i].rules = [{
+          required: true,
+          message: `${sldComLanguage('排序必填')}`,//排序必填
+        }, { validator: (rule, value, callback) => validatorNumbe(rule, value, callback) }];
+      } else if (operateData[i].name == 'linkData') {
+        operateData[i].sldChange = this.handleSeleLinkType;
+      }
+    }
+    this.setState({
+      modalVisible: true,
+      type: 'add',
+      title: `${sldComLanguage('添加导航')}`,
+      operateData,
+    });//添加导航
+  };
+
+  //获取数据列表
+  get_list = (params) => {
+    this.setState({ initLoading: true });
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pc_home/get_home_nav_list',
+      payload: params,
+      callback: (res) => {
+        this.setState({ initLoading: false });
+        if (res.state == 200) {
+          if (res.data.list.length == 0 && this.state.params.currentPage > 1) {
+            params.currentPage = params.currentPage - 1;
+            this.get_list(params);
+          } else {
+            this.setState({
+              data: res.data,
+            });
+          }
+        }
+      },
+    });
+  };
+
+  handleSelectRows = (rows, rowkeys) => {
+    this.setState({
+      selectedRows: rows,
+      selectedRowKeys: rowkeys,
+    });
+  };
+
+  handleTablePagination = (pagination, filtersArg, sorter, type = 'main') => {
+    const { formValues } = this.state;
+    if (type == 'main') {
+      const params = sldHandlePaginationData(pagination, filtersArg, sorter, formValues);
+      pageSize = params.pageSize;
+      this.setState({ params });
+      this.get_list(params);
+    }
+  };
+
+
+//表格拖动
+  resizeTable = (index, size, type, data) => {
+    let datas = dragSldTableColumn(index, size, data);
+    this.setState({ [type]: datas });
+  };
+
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  sldHandleConfirm = (val) => {
+    const { type } = this.state;
+    const { dispatch } = this.props;
+    this.setState({ submiting: true });
+    val.data = JSON.stringify({
+      link_type: val.linkData,
+      link_value: val.link_value,
+      info: this.sele_info,
+    });
+    delete val.link_type;
+    delete val.link_value;
+    delete val.linkData;
+    if (type == 'edit') {
+      val.navId = this.cur_edit_id;
+      this.operateNav(val, 'edit');
+    } else {
+      dispatch({
+        type: 'pc_home/add_home_nav',
+        payload: val,
+        callback: (res) => {
+          if (res.state == 200) {
+            sucTip(res.msg);
+            this.get_list({ pageSize: pageSize });
+            this.sele_info = {};
+            this.setState({
+              modalVisible: false,
+            });
+          } else {
+            failTip(res.msg);
+          }
+          this.setState({ submiting: false });
+        },
+      });
+    }
+  };
+
+  //搜索
+  sldSearch = (val) => {
+    this.setState({
+      formValues: { navName: val },
+      params: { pageSize: pageSize }
+    });
+    this.get_list({ pageSize: pageSize, navName: val });
+  };
+
+  //搜索框内容的变化
+  sldSearChange = (val) => {
+    this.setState({
+      search_con: val.target.value,
+    });
+  };
+
+  //清空搜索内容
+  sldSearClear = () => {
+    this.setState({
+      search_con: '',
+    });
+    this.sldSearch('');
+  };
+
+  //商品/分类/专题选中事件
+  seleSku = (val) => {
+    let { operateData, link_type } = this.state;
+    for (let i in operateData) {
+      if (operateData[i].name == 'link_value') {
+        if (link_type == 'goods') {
+          operateData[i].initialValue = val.goodsName;
+          this.sele_info.id = val.goodsId;
+          this.sele_info.gid = val.defaultProductId;
+          this.sele_info.defaultProductId = val.defaultProductId;
+        } else if (link_type == 'category') {
+          operateData[i].initialValue = val.categoryName;
+          this.sele_info.id = val.categoryId;
+          this.sele_info.categoryId = val.categoryId;
+          this.sele_info.grade = val.grade;
+        } else if (link_type == 'topic') {
+          operateData[i].initialValue = val.decoName;
+          this.sele_info.id = val.decoId;
+          this.sele_info.decoId = val.decoId;
+        }
+        break;
+      }
+    }
+    this.setState({ operateData, link_type: '' });
+  };
+
+  //商品/分类/专题取消事件
+  sldHandleLinkCancle = () => {
+    let { operateData } = this.state;
+    operateData = operateData.filter(item => item.name != 'link_value');
+    for (let i in operateData) {
+      if (operateData[i].name == 'link_type') {
+        operateData[i].initialValue = 'topic';
+        break;
+      }
+    }
+    this.sele_info = {};
+    this.setState({ operateData, link_type: '' });
+  };
+
+  render() {
+    const { selectedRows, columns, initLoading, data, submiting, operateData, modalVisible, title, search_con, link_type } = this.state;
+    return (
+      <div className={global.common_page} style={{ flex: 1 }}>
+        <SldComHeader
+          type={2}
+          title={sldComLanguage('首页导航设置')}//首页导航设置
+          tip_title={sldComLanguage('首页导航设置')}
+          tip_data={[`${sldComLanguage('序号越小，显示越靠前')}`, `${sldComLanguage('PC商城首页展示一行，超出部分不展示，需要根据页面效果调整展示的数据')}`]}
+        />
+        <div className={global.operate_bg}>
+          {sldIconBtn(() => this.addNav(), `${sldComLanguage('添加导航')}`, 7, 7)}{/*添加导航*/}
+          {/*请输入导航名称   搜索*/}
+          {sldSearchValClear(`${sldComLanguage('请输入')}${sldComLanguage('导航名称')}`, 291, this.sldSearch, `${sldComLanguage('搜索')}`, search_con, this.sldSearChange, this.sldSearClear, 65)}
+        </div>
+        <Spin spinning={initLoading}>
+          {/*标准表格-start*/}
+          <StandardTable
+            selectedRows={selectedRows}
+            data={data}
+            rowKey={'navId'}
+            isCheck={false}
+            columns={columns}
+            onSelectRow={this.handleSelectRows}
+            onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'main')}
+            onSldHandleSeleRow={this.onSldHandleSeleRow}
+            resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+            isColumnResize={true}
+          />
+          {/*标准表格-end*/}
+
+        </Spin>
+        {/*新增/编辑对话框-start*/}
+        <SldModal
+          title={title}
+          submiting={submiting}
+          width={500}
+          modalVisible={modalVisible}
+          sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+          sldHandleCancle={this.sldHandleCancle}
+          formItemLayoutModal={formItemLayoutModal}
+          content={operateData}
+        />
+        {/*新增/编辑对话框-end*/}
+        <SldSelGoodsSingleDiy link_type={link_type} seleSku={this.seleSku} sldHandleCancle={this.sldHandleLinkCancle}/>
+      </div>
+
+    );
+  }
+}

admin/src/pages/pcdecorate/home/tpl_lists.js

@@ -0,0 +1,89 @@
+/*
+* 模板列表页面
+* */
+import { connect } from 'dva/index';
+import React, { Component } from 'react';
+import { Form } from 'antd';
+import {
+	sldLlineRtextAddGoodsAddMargin,
+	getSldEmptyH,
+	list_com_page_more,
+	sldComLanguage,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import diy_page from '../diy_page.less';
+import styles from '../pcdecorate.less';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+let pageSize = list_com_page_more;
+let sthis = '';
+let getFieldDecorator_new = '';
+@connect(({ pc_home }) => ({
+	pc_home,
+}))
+@Form.create()
+export default class Tpl_lists extends Component {
+	constructor(props) {
+		super(props);
+		sthis = this;
+		const {
+			form: { getFieldDecorator },
+		} = props;
+		getFieldDecorator_new = getFieldDecorator;
+		this.state = {
+			data: { list: [], pagination: {} },
+		};
+	}
+
+	componentDidMount() {
+		this.get_list();
+	}
+
+	componentWillUnmount() {
+
+	}
+
+	//获取模板列表
+	get_list = () => {
+		let { data } = this.state;
+		const { dispatch } = this.props;
+		dispatch({
+			type: 'pc_home/get_tpl_list',
+			payload: { pageSize: pageSize },
+			callback: (res) => {
+				if (res.state == 200) {
+					data = res.data;
+				}
+				this.setState({ data });
+			},
+		});
+	};
+
+	render() {
+		const { data } = this.state;
+		return (
+			<div className={`${global.common_page} ${styles.allow_show_edit}`}>
+				{sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('模板列表')}`, 0, 0, 10)}{/*模板列表*/}
+				{getSldEmptyH(10)}
+				<Scrollbars autoHeight
+							autoHeightMin={50}
+							autoHeightMax={document.body.clientHeight - 100}>
+					<div className={global.flex_com_row_wrap}>
+						{data.list!=null&&data.list.length > 0 &&
+						data.list.map(val => (
+							<div key={val.id} className={`${global.flex_com_column} ${diy_page.tpl_list_item}`}>
+              <span className={`${diy_page.img_wrap}`}>
+                    <img src={val.image}/>
+              </span>
+								<span className={diy_page.title}>{val.name}</span>
+								<span className={diy_page.desc}>{val.desc}</span>
+							</div>
+						))
+						}
+					</div>
+          {getSldEmptyH(40)}
+				</Scrollbars>
+			</div>
+		);
+	}
+}

admin/src/pages/pcdecorate/models/pc_home.js

@@ -0,0 +1,160 @@
+import { sldCommonService } from '@/utils/utils';
+
+export default {
+	namespace: 'pc_home',
+	state: {
+		loading: false,//加载状态
+		data: {
+			list: [],
+			pagination: {},
+		},
+	},
+
+	effects: {
+	  //slodon_获取pc首页弹层广告
+		* get_modal_adv({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/pcFirstAdv/get');
+			if (callback) callback(response);
+		},
+		//slodon_更新pc首页弹层广告
+		* save_modal_adv({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcFirstAdv/update');
+			if (callback) callback(response);
+		},
+		//slodon_获取mall端装修模板类型列表
+		* get_tpl_type_list({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/tplPc/type/list');
+			if (callback) callback(response);
+		},
+		//slodon_获取mall端装修模板列表
+		* get_tpl_list({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/tplPc/list');
+			if (callback) callback(response);
+		},
+		//slodon_添加mall端装修实例化模板数据
+		* add_instance_tpl({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/tplPc/data/add');
+			if (callback) callback(response);
+		},
+		//slodon_修改mall端装修实例化模板数据
+		* edit_instance_tpl({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/tplPc/data/update');
+			if (callback) callback(response);
+		},
+		//slodon_获取mall端装修实例化模板数据列表
+		* get_tpl_instance_list({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/tplPc/data/list');
+			if (callback) callback(response);
+		},
+		//slodon_删除mall端装修实例化模板数据
+		* del_instance_tpl({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/tplPc/data/del');
+			if (callback) callback(response);
+		},
+		//slodon_启/停用mall端装修实例化模板数据
+		* enable_instance_tpl({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/tplPc/data/isEnable');
+			if (callback) callback(response);
+		},
+		//slodon_修改mall端装修实例化模板数据
+		* save_instance_tpl_data({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/tplPc/data/update');
+			if (callback) callback(response);
+		},
+		//slodon_获取mall端装修页列表
+		* get_diy_page_list({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/pcDeco/list');
+			if (callback) callback(response);
+		},
+		//slodon_添加mall端装修页
+		* add_diy_page({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcDeco/add');
+			if (callback) callback(response);
+		},
+		//slodon_修改mall端装修页
+		* edit_diy_page({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcDeco/update');
+			if (callback) callback(response);
+		},
+		//slodon_删除mall端装修页
+		* del_diy_page({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcDeco/del');
+			if (callback) callback(response);
+		},
+		//slodon_启用/禁用mall端装修页
+		* enable_diy_page({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcDeco/isEnable');
+			if (callback) callback(response);
+		},
+		//slodon_获取mall端装修页详细数据
+		* get_diy_page_detial({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/pcDeco/display');
+			if (callback) callback(response);
+		},
+		//slodon_获取模板类型下的实例化模板列表
+		* get_tpl_instance_list_allow_use({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/tplPc/data/list');
+			if (callback) callback(response);
+		},
+		//slodon_复制mall端实例化模板
+		* copy_instance_tpl({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/tplPc/data/copy');
+			if (callback) callback(response);
+		},
+		//slodon_复制mall端装修页
+		* copy_diy_page({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcDeco/copy');
+			if (callback) callback(response);
+		},
+		//slodon_修改mall端装修页
+		* save_diy_page_data({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/pcDeco/update');
+			if (callback) callback(response);
+		},
+		//slodon_获取首页导航列表
+		* get_home_nav_list({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'get', 'v3/system/admin/navigation/list');
+			if (callback) callback(response);
+		},
+		//slodon_新增首页导航
+		* add_home_nav({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/navigation/add');
+			if (callback) callback(response);
+		},
+		//slodon_编辑首页导航
+		* edit_home_nav({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/navigation/update');
+			if (callback) callback(response);
+		},
+    //slodon_首页导航_开关
+		* switch_home_nav({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/navigation/isShow');
+			if (callback) callback(response);
+		},
+		//slodon_删除首页导航
+		* del_home_nav({ payload, callback }, { call }) {
+			const response = yield call(sldCommonService, payload, 'post', 'v3/system/admin/navigation/del');
+			if (callback) callback(response);
+		},
+    //slodon_获取页脚列表
+    * get_home_footer_list({ payload, callback }, { call, put }) {
+      const response = yield call(sldCommonService, payload, 'get', 'v3/cms/admin/friendLink/list');
+      if (callback) callback(response);
+    },
+    //slodon_添加页脚
+    * add_home_footer({ payload, callback }, { call, put }) {
+      const response = yield call(sldCommonService, payload, 'post', 'v3/cms/admin/friendLink/add');
+      if (callback) callback(response);
+    },
+    //slodon_编辑页脚
+    * edit_home_footer({ payload, callback }, { call, put }) {
+      const response = yield call(sldCommonService, payload, 'post', 'v3/cms/admin/friendLink/edit');
+      if (callback) callback(response);
+    },
+    //slodon_删除页脚
+    * del_home_footer({ payload, callback }, { call, put }) {
+      const response = yield call(sldCommonService, payload, 'post', 'v3/cms/admin/friendLink/del');
+      if (callback) callback(response);
+    },
+	},
+};

admin/src/pages/pcdecorate/topic/topic_diy_page_lists.js

@@ -0,0 +1,419 @@
+import { connect } from 'dva/index';
+import Link from 'umi/link';
+import React, { Component, Fragment } from 'react';
+import { Input, Form, Spin, Switch } from 'antd';
+import {
+  sldIconBtn,
+  failTip,
+  sucTip,
+  dragSldTableColumn,
+  sldHandlePaginationData,
+  list_com_page_size_10,
+  sldLlineRtextAddGoodsAddMargin,
+  formItemLayoutModal,
+  sldSvgIcon,
+  getTableNum,
+  sldComLanguage,
+  sldPopConfirmDiy,
+  sldtbaleOpeBtnText,
+} from '@/utils/utils';
+import global from '../../../global.less';
+import StandardTable from '@/components/StandardTable';
+import SldModal from '@/components/SldModal/SldModal';
+import Search from '@/components/Search/Search';
+
+let pageSize = list_com_page_size_10;
+@connect(({ product }) => ({
+  product,
+}))
+@Form.create()
+export default class TopicDiyPageLists extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      formValues: {},//搜索条件
+      search_con: '',//搜索框内容
+      submiting: false,//按钮loading
+      loading: false,
+      data: {},
+      selectedRows: [],
+      selectedRowKeys: [],//selectedRows的key
+      modalVisible: false,
+      title: '',
+      type: 'add',//'add'新增  'edit'编辑
+      params: { pageSize: pageSize },//搜索条件
+      curData: {},//编辑的数据
+      search_data: [{
+        type: 'input',
+        label: `${sldComLanguage('页面名称')}`,
+        name: 'decoName',
+        placeholder: `${sldComLanguage('请输入页面名称')}`,
+      }, {
+        type: 'select',
+        label: `${sldComLanguage('使用状态')}`,//使用状态
+        name: 'isEnable',
+        placeholder: `${sldComLanguage('请选择')}${sldComLanguage('使用状态')}`,
+        sel_data: [
+          { key: '', name: `${sldComLanguage('全部')}` },//全部
+          { key: '1', name: `${sldComLanguage('启用')}` },//启用
+          { key: '0', name: `${sldComLanguage('禁用')}` },//禁用
+        ],
+      }],//搜索数据
+      addData: [{
+        type: 'input',
+        label: `${sldComLanguage('装修页面名称')}`,//装修页面名称
+        name: 'decoName',
+        placeholder: `${sldComLanguage('请输入')}${sldComLanguage('装修页面名称')}`,
+        initialValue: '',
+        maxLength:20,
+        rules: [{
+          required: true,
+          whitespace: true,
+          message: `${sldComLanguage('请输入')}${sldComLanguage('装修页面名称')}`,
+        }],
+      },
+      ],//modal框的数据
+      columns: [
+        {
+          title: ' ',
+          align: 'center',
+          dataIndex: 'decoId',
+          width: 50,
+          render: (text, record, index) => getTableNum(this.state.params, pageSize, index),
+        },
+        {
+          title: `${sldComLanguage('名称')}`,//名称
+          align: 'center',
+          dataIndex: 'decoName',
+          width: 200,
+          render: (text, record) => (
+            <Fragment>
+              <div className={global.flex_com_space_between}>
+                {record.is_edit_name != undefined && record.is_edit_name
+                  ? <Input maxLength={20} onChange={(e) => this.edit_filed_con(record.decoId, 'decoName', e.target.value)}
+                           defaultValue={text}/>
+                  : <span>{text}</span>
+                }
+                {record.is_edit_name != undefined && record.is_edit_name
+                  ? <a className={global.flex_com_column} href={'javascript:void(0)'}
+                       style={{ marginLeft: 7 }}
+                       onClick={() => this.save_edit_filed(record, 'decoName', text)}>{sldSvgIcon('#FA6F1E', 16, 16, 'xuanzhong')}</a>
+                  : <a className={global.flex_com_column} href={'javascript:void(0)'}
+                       style={{ marginLeft: 7 }}
+                       onClick={() => this.edit_filed(record.decoId, 'is_edit_name', 'true')}>{sldSvgIcon('#FA6F1E', 16, 16, 'edit')}</a>
+                }
+              </div>
+            </Fragment>
+          ),
+        },
+        {
+          title: `${sldComLanguage('创建时间')}`,//创建时间
+          align: 'center',
+          dataIndex: 'createTime',
+          width: 150,
+        },
+        {
+          title: `${sldComLanguage('修改时间')}`,//修改时间
+          dataIndex: 'updateTime',
+          align: 'center',
+          width: 150,
+        },
+        {
+          title: `${sldComLanguage('启用状态')}`,//启用状态
+          align: 'center',
+          dataIndex: 'isEnable',
+          width: 100,
+          render: (text, record) => {
+            return <Switch checked={text == 1 ? true : false}
+                           onChange={(val) => this.handleSetEnable(val, record.decoId)}/>;
+          },
+        },
+        {
+          title: `${sldComLanguage('操作')}`,//操作
+          align: 'center',
+          width: 100,
+          render: (text, record) => (
+            <Fragment>
+              <Link to={{ pathname: `/pcdecorate_topic/topic_diy_page_lists_to_edit`, search: `?id=${record.decoId}` }}
+                    target="_blank">
+                {
+                  sldtbaleOpeBtnText('装修', null)
+                }
+              </Link>
+              <span className={global.splitLine}></span>
+              {/*删除后不可恢复，是否确定删除？*/}
+              {sldPopConfirmDiy('leftBottom', `${sldComLanguage('删除后不可恢复，是否确定删除')}`, () => this.operateDiyPage(record.decoId, 'del'), `${sldComLanguage('确定')}`, `${sldComLanguage('取消')}`,
+                sldtbaleOpeBtnText(`${sldComLanguage('删除')}`, () => null))}
+              <span className={global.splitLine}></span>
+              {sldtbaleOpeBtnText(`${sldComLanguage('复制')}`, () => this.operateDiyPage(record.decoId, 'copy'))}{/*复制*/}
+            </Fragment>
+          ),
+        },
+
+      ],
+    };
+  }
+
+  componentDidMount() {
+    this.get_list({ pageSize: pageSize });
+  }
+
+  componentWillUnmount() {
+
+  }
+
+  //获取数据列表
+  get_list = (params) => {
+    this.setState({ loading: true });
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pc_home/get_diy_page_list',
+      payload: { ...params, decoType: 'topic' },
+      callback: (res) => {
+        this.setState({ loading: false });
+        if (res.state == 200) {
+          if (res.data.length == 0 && this.state.params.current > 1) {
+            params.current = params.current - 1;
+            this.get_list(params);
+          } else {
+            this.setState({
+              data: res.data,
+            });
+          }
+        }
+      },
+    });
+  };
+
+  handleSelectRows = (rows, rowkeys) => {
+    this.setState({
+      selectedRows: rows,
+      selectedRowKeys: rowkeys,
+    });
+  };
+
+  handleTablePagination = (pagination, filtersArg, sorter, type = 'main') => {
+    const { formValues } = this.state;
+    const params = sldHandlePaginationData(pagination, filtersArg, sorter, formValues);
+    pageSize = params.pageSize;
+    this.setState({
+      params: params,
+    });
+    this.get_list(params);
+  };
+
+  //保存表格列的内容
+  save_edit_filed = (record, filed, value) => {
+    let { data } = this.state;
+    const { dispatch } = this.props;
+    dispatch({
+      type: 'pc_home/edit_diy_page',
+      payload: { decoId: record.decoId, decoName: record.decoName },
+      callback: (res) => {
+        if (res.state == 200) {
+          sucTip(res.msg);
+          let tmp = data.list.filter(item => item.id == record.id)[0];
+          tmp[filed] = value;
+          tmp.is_edit_name = false;
+          this.setState({ data });
+        } else {
+          failTip(res.msg);
+        }
+      },
+    });
+
+  };
+
+  //编辑表格列的内容
+  edit_filed_con = (id, filed, value) => {
+    let { data } = this.state;
+    let tmp = data.list.filter(item => item.decoId == id)[0];
+    tmp[filed] = value;
+    this.setState({ data });
+  };
+
+  //编辑表格列内容
+  edit_filed = (id, filed, flag) => {
+    let { data } = this.state;
+    let tmp = data.list.filter(item => item.decoId == id)[0];
+    tmp[filed] = flag;
+    this.setState({ data });
+  };
+
+  //新增数据
+  addData = () => {
+    let { addData } = this.state;
+    for (let i in addData) {
+      addData[i].initialValue = '';
+    }
+    this.setState({
+      modalVisible: true,
+      type: 'add',
+      title: `${sldComLanguage('新增')}${sldComLanguage('装修页面')}`,
+      addData: addData,
+    });//新增装修页面
+  };
+
+  //是否启用
+  handleSetEnable = (val, id) => {
+    this.operateDiyPage({ decoId: id, isEnable: val }, 'enable');
+  };
+
+  //编辑数据
+  editData = (val) => {
+    let { addData } = this.state;
+    addData.map(item => {
+      item.initialValue = val[item.name];
+    });
+    this.setState({
+      modalVisible: true,
+      type: 'edit',
+      title: `${sldComLanguage('编辑')}${sldComLanguage('装修页面')}`,
+      addData: addData,
+      curData: val,
+    });//编辑装修页面
+  };
+
+  //装修页面操作，edit 编辑，del 删除，enable 启用/禁用, copy 复制
+  operateDiyPage = (id, type) => {
+    const { dispatch } = this.props;
+    let dis_type = '';
+    let params = { decoId: id };
+    if (type == 'edit') {
+      dis_type = 'pc_home/edit_diy_page';
+      params = id;
+    } else if (type == 'del') {
+      dis_type = 'pc_home/del_diy_page';
+    } else if (type == 'copy') {
+      dis_type = 'pc_home/copy_diy_page';
+    } else if (type == 'enable') {
+      dis_type = 'pc_home/enable_diy_page';
+      params = id;
+    }
+    dispatch({
+      type: dis_type,
+      payload: params,
+      callback: (res) => {
+        this.setState({ submiting: false });
+        if (res.state == 200) {
+          sucTip(res.msg);
+          this.get_list(this.state.params);
+          this.setState({
+            modalVisible: false,
+          });
+        } else {
+          failTip(res.msg);
+        }
+      },
+    });
+  };
+
+  sldHandleConfirm = (val) => {
+    const { curData, type } = this.state;
+    const { dispatch } = this.props;
+    this.setState({ submiting: true });
+    val.decoType = 'topic';
+    if (type == 'edit') {
+      val.decoId = curData.decoId;
+      this.operateDiyPage(val, 'edit');
+    } else {
+      dispatch({
+        type: 'pc_home/add_diy_page',
+        payload: val,
+        callback: (res) => {
+          this.setState({ submiting: false });
+          if (res.state == 200) {
+            sucTip(res.msg);
+            this.get_list({ pageSize: pageSize });
+            this.setState({
+              modalVisible: false,
+            });
+          } else {
+            failTip(res.msg);
+          }
+        },
+      });
+    }
+  };
+
+  sldHandleCancle = () => {
+    this.setState({ modalVisible: false });
+  };
+
+  //搜索事件
+  search = (data) => {
+    const values = { ...data };
+    for (let i in values) {
+      if (values[i] == '') {
+        delete values[i];
+      }
+    }
+    this.setState({
+      formValues: values,
+      params: { pageSize: pageSize }
+    });
+    this.get_list({ pageSize: pageSize, ...values });
+  };
+  //搜索重置事件
+  seaReset = () => {
+    //搜索条件置为空
+    this.setState({
+      formValues: {},
+      params: { pageSize: pageSize }
+    });
+    this.get_list({ pageSize: pageSize });
+  };
+
+  //表格拖动
+  resizeTable = (index, size, type, data) => {
+    let datas = dragSldTableColumn(index, size, data);
+    this.setState({ [type]: datas });
+  };
+
+  render() {
+    const { selectedRows, modalVisible, title, addData, columns, submiting, data, loading, search_data } = this.state;
+    return (
+      <div className={global.common_page}>
+        {sldLlineRtextAddGoodsAddMargin('#FA6F1E', `${sldComLanguage('专题装修列表管理')}`, 0, 0, 10)}
+        <Spin spinning={loading}>
+          <div className={global.tableListForm}>
+            <Search search_data={search_data}
+                    seaSubmit={(data) => this.search(data)} seaReset={() => this.seaReset()}/>
+          </div>
+          {/*公共功能条-start*/}
+          <div className={global.operate_bg}>
+            {sldIconBtn(() => this.addData(), `${sldComLanguage('新增')}`, 7, 7, 15, 15, 4, 'jia', '#FA6F1E')}{/*新增*/}
+          </div>
+          {/*公共功能条-end*/}
+          {/*标准表格-start*/}
+          <StandardTable
+            selectedRows={selectedRows}
+            data={data}
+            rowKey={'decoId'}
+            isCheck={false}
+            columns={columns}
+            onSelectRow={this.handleSelectRows}
+            onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'main')}
+            resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+            isColumnResize={true}
+          />
+          {/*标准表格-end*/}
+          {/*新增/编辑对话框-start*/}
+          <SldModal
+            width={600}
+            title={title}
+            sldSeleSingleRow={true}
+            submiting={submiting}
+            modalVisible={modalVisible}
+            sldHandleConfirm={(val) => this.sldHandleConfirm(val)}
+            sldHandleCancle={this.sldHandleCancle}
+            formItemLayoutModal={formItemLayoutModal}
+            content={addData}
+          />
+          {/*新增/编辑对话框-end*/}
+        </Spin>
+
+      </div>
+    );
+  }
+}

admin/src/pages/sysset/base/payment.js

@@ -34,7 +34,7 @@ export default class Payment extends Component {
 			mobile_data: {},
 			curData: {},//当前编辑的对象信息
 			pc_data: {},
-			activeTabKey: '2',
+			activeTabKey: '1',
 			columns: [
 				{
 					title: ' ',
@@ -101,9 +101,18 @@ export default class Payment extends Component {
 		} else if (val.name == 'wxpay_is_enable_pc') {
 			//PC微信支付
 			dis_type = 'sldsetting/get_pc_weixin_info';
+		} else if (val.name == 'alipay_is_enable_h5') {
+			//支付宝移动支付
+			dis_type = 'sldsetting/get_alipay_mobile';
 		} else if (val.name == 'wxpay_is_enable_miniapp') {
 			//微信小程序支付
 			dis_type = 'sldsetting/get_wxpay_miniapp';
+		} else if (val.name == 'wxpay_is_enable_app') {
+			//微信app支付
+			dis_type = 'sldsetting/get_wxpay_app';
+		} else if (val.name == 'wxpay_is_enable_h5') {
+			//微信h5支付
+			dis_type = 'sldsetting/get_wxpay_h5';
 		}
 		title = `${sldComLanguage('编辑')}` + val.payment + `${sldComLanguage('信息')}`;
 		dispatch({
@@ -246,6 +255,22 @@ export default class Payment extends Component {
 				{getSldEmptyH(10)}
 				<Spin spinning={initLoading}>
 					<Tabs activeKey={activeTabKey} onChange={(key) => this.changeSldTab(key)} type="card">
+						<TabPane tab={sldComLanguage('PC支付')} key="1">
+							{showMoreHelpTip(``, sld_need_update_setting(),8,sld_show_tip)}{/*操作提示*/}
+							{getSldEmptyH(8)}
+							<StandardTable
+								sldpagination={false}
+								selectedRows={[]}
+								data={pc_data}
+								rowKey={'payment'}
+								isCheck={false}
+								columns={columns}
+								onSelectRow={this.handleSelectRows}
+								onChange={(pagination, filtersArg, sorter) => this.handleTablePagination(pagination, filtersArg, sorter, 'bottom')}
+								resizeTable={(index, size) => this.resizeTable(index, size, 'columns', columns)}
+								isColumnResize={true}
+							/>
+						</TabPane>
 						<TabPane tab={sldComLanguage('移动端支付')} key="2">
 							{showMoreHelpTip(``, sld_need_update_setting(),8,sld_show_tip)}{/*操作提示*/}
 							{getSldEmptyH(8)}

admin/src/utils/sldconfig.js

@@ -1,9 +1,9 @@
 //slodon_配置服务器接口地址
 module.exports = {
-  // apiUrl: document.location.protocol+'//'+window.location.host + '/',
+  apiUrl: document.location.protocol+'//'+window.location.host + '/',
   // apiUrl: 'https://jbbcadmindev.slodon.cn/',
   // apiUrl: 'https://ad.eqbidding.com/',
-  apiUrl: 'http://localhost:8001/',
+  // apiUrl: 'http://localhost:8001/',
   uploadLimit: 20,//上传限制，单位M
   'specialFlag': window.location.host.indexOf('jbbcadmin.slodon.cn')+window.location.host.indexOf('localhost'),
 };