From fa4d0b940baa2d6b3775c9252d99d5fee2aead0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=AE=B8=E7=BA=A2=E6=A2=85?= <1924913374@qq.com>
Date: Fri, 2 Sep 2022 13:35:50 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E7=BB=84=E4=BB=B6=E5=BA=93?=
 =?UTF-8?q?=E5=9B=BE=E7=89=87=E9=85=8D=E7=BD=AE=E4=B8=8E=E9=A2=84=E8=A7=88?=
 =?UTF-8?q?=E6=95=88=E6=9E=9C=E8=81=94=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../goodsPage/componentLib/main.js            |   2 +-
 .../goodsPage/componentLib/main.less          |   1 +
 .../goodsPage/config/picture.js               | 173 ++++--------------
 .../edittemplate/goodstemplate.js             |   3 +
 .../edittemplate/goodstemplate.less           |   4 +
 src/pages/exchangepage/edittemplate/main.js   |  34 +++-
 6 files changed, 78 insertions(+), 139 deletions(-)

diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
index 2c001410..43c93071 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.js
@@ -40,7 +40,7 @@ export default class componentLib extends React.Component {
   render() {
     return (
       <div className="componentLib">
-        <h4>基础组件</h4>
+        <h4 onClick={()=>this.propcomponentName({name:''})}>基础组件</h4>
         <ul>
           {
             comPonentList.map(item=>{
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less
index afe53f63..69d3d629 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/componentLib/main.less
@@ -11,6 +11,7 @@
 
     h4 {
         padding: 15px 0;
+        cursor: pointer;
     }
 
     ul {
diff --git a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js b/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
index 5b308a81..9e061fbd 100644
--- a/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
+++ b/src/pages/exchangepage/couponTemplate/goodsPage/config/picture.js
@@ -1,95 +1,42 @@
 import React from 'react';
 import { ImageUpload, Notify, RadioGroup, RadioButton } from 'zent';
 import "@/assets/comm.css"
+import Bus from '@/assets/eventBus.js'
 import Form from "@/components/form/main"
 import FormItem from "@/components/form-item/main"
 import { uploadImg, handelResponse } from "@/assets/api.js"
 import Ipt from "@/components/input/main"
+import _ from "lodash";
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
     this.state = {
-      model: {
-        top_image: "",
-        list: "2",
-        font_color: "#f1f2f3",
-        button_color: "#FACD6A",
-        describe: { type: "", content: "", bg_image: '' }
-      }
+        img:'',
+        jumpType:'0',//0不跳转  1跳转
+        jumpUrl:''
     }
   }
   componentWillMount(e) {
     let config = JSON.parse(sessionStorage.getItem('editorConfig'));
     if (config && config.couponList && config.couponList.product_list) {
-      this.setState({ model: config.couponList.product_list });
-    }
-  }
-  onListChange(e) {
-    let model = this.state.model;
-    model.list = e.target.value;
-    this.setState({ model: model })
-    this.props.setarrayType(e.target.value);
-  }
-
-  //活动说明
-  onactivityChange(e) {
-    let model1 = this.state.model;
-    model1.describe.type = e.target.value;
-    this.setState({ model: model1 })
-    this.props.setactiveType(e.target.value);
-  }
-
-  hasItemFn(c) {
-    let model1 = this.state.model;
-    if (c == model1.describe.type) {
-      model1.describe.type = '';
-      this.setState({ model: model1 });
-      this.props.setactiveType('');
+      let {img,jumpType,jumpUrl}=config.couponList.product_list.picture;
+      this.setState({ img,jumpType,jumpUrl });
     }
   }
 
-  //顶部banner
+  //跳转链接
+  onjumpChange(e) {
+    this.setState({ jumpType: e.target.value })
+  }
+
+  //图片
   onUploadChange(files) {
     if (files.length > 0 && files[0].status == "success") {
-      let model = this.state.model;
-      model.top_image = files[0].src;
-      this.setState({ model: model })
-      this.props.setbanner(files[0].src);
+      this.setState({ img: files[0].src })
+      Bus.emit('picture', files[0].src)
     } else {
-      let model = this.state.model;
-      model.top_image = '';
-      this.setState({ model: model })
-      this.props.setbanner("");
-    }
-  };
-
-  //悬浮富文本
-  getsusEditext(c) {
-    let model1 = this.state.model;
-    model1.describe.content = c;
-    this.setState({ model: model1 });
-    this.props.seteditorHtml(c);
-  }
-  //富文本
-  getEditext(c) {
-    let model1 = this.state.model;
-    model1.describe.content = c;
-    this.setState({ model: model1 });
-    this.props.seteditorHtml(c);
-  }
-
-  //底部描述图
-  onUploadChange2(files) {
-    if (files.length > 0 && files[0].status == "success") {
-      let model1 = this.state.model;
-      model1.describe.bg_image = files[0].src;
-      this.setState({ model: model1 })
-      this.props.setbottomImg(files[0].src);
-    } else {
-      let model1 = this.state.model;
-      model1.describe.bg_image = '';
-      this.setState({ model: model1 })
-      this.props.setbottomImg("");
+      this.setState({ img: '' })
+      Bus.emit('picture', '')
     }
   };
 
@@ -102,41 +49,9 @@ export default class edittemplate extends React.Component {
       Notify.error(`图片大小不能超过 ${data.formattedMaxSize}`);
     }
   };
-  handleChange = (color) => {
-    let model1 = this.state.model;
-    model1.font_color = color;
-    this.setState({
-      model: model1
-    });
-    this.props.setButtonbgcolor(color);
 
-  }
-  handleChange1 = (color) => {
-    let model1 = this.state.model;
-    model1.button_color = color;
-    this.setState({
-      model: model1
-    });
-    this.props.setButtoncolor(color);
-  }
-
-  // 字体颜色
-  fontcolor(cor) {
-    let models = this.state.model;
-    models.button_color = cor;
-    this.setState({ model: models });
-    this.props.setButtoncolor(cor);
-  }
-  // 背景颜色
-  bgcolor(cor) {
-    let models = this.state.model;
-    models.font_color = cor;
-    this.setState({ model: models });
-    this.props.setButtonbgcolor(cor);
-  }
   onUpload = (file, report) => {
     let self = this;
-    console.log('上传头像', file);
     return new Promise((resolve, reject) => {
       let path = ""
       let formdata = new FormData();
@@ -169,40 +84,32 @@ export default class edittemplate extends React.Component {
             console.log("上传中")
           }
           else {
-
             reject();
           }
         }
-
-
       };
       setTimeout(update, 500);
     });
 
   };
   componentWillUnmount() {
+    console.log(96);
     let oldobj = JSON.parse(sessionStorage.getItem('editorConfig'));
-    if (oldobj && oldobj.couponList) {
-      let couponList = oldobj.couponList
-      couponList.product_list = this.state.model;
+      let couponList = oldobj.couponList;
+      couponList.product_list.picture = _.cloneDeep(this.state);
+      console.log(100,couponList);
       oldobj.couponList = couponList;
-    } else {
-      oldobj = {}
-      let couponList = {}
-      couponList.product_list = this.state.model;
-      oldobj.couponList = couponList;
-    }
     sessionStorage.setItem('editorConfig', JSON.stringify(oldobj));
   }
   render() {
+    console.log(105,this.state);
     return (
       <div>
         <div className='control page-title-control'>
           <h1 style={{ fontSize: '16px' }}>图片设置</h1>
         </div>
-
         <div style={{ width: "92%", "margin": "0 auto", "overflow": "auto", "maxHeight": "100%" }}>
-          <Form model={this.state.model} ref="form1">
+          <Form model={this.state} ref="form1">
             <FormItem labelname="添加图片:" prop="top" id="top" labelwidth="100px">
               <ImageUpload
                 className="zent-image-upload-demo"
@@ -213,32 +120,30 @@ export default class edittemplate extends React.Component {
                 tips="单张图片不超过 5M"
                 onChange={(e) => { this.onUploadChange(e) }}
                 onUpload={this.onUpload}
-                defaultFileList={this.state.model.top_image ? [{ 'src': this.state.model.top_image }] : null}
+                defaultFileList={this.state.img ? [{ 'src': this.state.img }] : null}
                 onError={this.onUploadError}
               />
             </FormItem>
             <div className="activeTip">
-              <FormItem required={false} labelname="跳转类型:" prop="bottom" id="bottom" labelwidth="100px">
-                <RadioGroup onChange={(e) => { this.onactivityChange(e) }} value={this.state.model.describe.type}>
-                  <RadioButton onClick={() => this.hasItemFn(1)} value={"1"}>不跳转</RadioButton>
-                  <RadioButton onClick={() => this.hasItemFn(2)} value={"2"}>链接</RadioButton>
+              <FormItem required={false} labelname="跳转类型:"  labelwidth="100px">
+                <RadioGroup onChange={(e) => { this.onjumpChange(e) }} value={this.state.jumpType}>
+                  <RadioButton  value={"0"}>不跳转</RadioButton>
+                  <RadioButton  value={"1"}>链接</RadioButton>
                 </RadioGroup>
               </FormItem>
             </div>
-            <FormItem labelname="跳转链接:" prop="title" id="title" labelwidth="100px">
-            <Ipt onChange={(e) => {
-              let model2 = this.state.model;
-              model2.title = e;
-              this.setState({ model: model2 })
-              this.props.settitle(e)
-            }}
-              onClearItem={(e) => {
-                let model2 = this.state.model;
-                model2.title = "";
-                this.setState({ model: model2 })
+            {
+              this.state.jumpType==1? <FormItem labelname="跳转链接:" labelwidth="100px">
+              <Ipt onChange={(e) => {
+                this.setState({ jumpUrl: e })
               }}
-              value={this.state.model.title} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
-          </FormItem>
+                onClearItem={(e) => {
+                  this.setState({ jumpUrl: '' })
+                }}
+                value={this.state.jumpUrl} placeholder={"请输入"} labelWidth={'0px'} maxLength={12} height={'36px'} width={'300px'} alignment={'left'} />
+            </FormItem>:null
+            }
+           
           </Form>
         </div>
       </div>
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.js b/src/pages/exchangepage/edittemplate/goodstemplate.js
index 503aba86..6b204d05 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.js
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.js
@@ -15,6 +15,9 @@ export default class edittemplate extends React.Component {
         <img src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/backprepageBtn.png'} className="preBtn" />
         {
           !this.props.goodsdata.top_image ? <img className="topbanner" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/goodstop.png'} /> : <img className="topbanner" src={this.props.goodsdata.top_image} />
+        }
+         {
+          this.props.goodsdata.picture? <img src={this.props.goodsdata.picture.img} alt="" className="picture"/>:null
         }
         {
           this.props.goodsdata.list == 2 ? <img className="goodsPic" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/swiper.png'} /> : this.props.goodsdata.list == 3 ? <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/matrix.png'} /> : <img className="goodsPicMatrax" src={'https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/listnew.png'} />
diff --git a/src/pages/exchangepage/edittemplate/goodstemplate.less b/src/pages/exchangepage/edittemplate/goodstemplate.less
index d51624c7..54dcb4c4 100644
--- a/src/pages/exchangepage/edittemplate/goodstemplate.less
+++ b/src/pages/exchangepage/edittemplate/goodstemplate.less
@@ -174,4 +174,8 @@
     left:0;
     z-index: 1;
   }
+}
+//优惠券图片
+.picture{
+  width: 100%;
 }
\ No newline at end of file
diff --git a/src/pages/exchangepage/edittemplate/main.js b/src/pages/exchangepage/edittemplate/main.js
index 1c2fde79..01ecf1f5 100644
--- a/src/pages/exchangepage/edittemplate/main.js
+++ b/src/pages/exchangepage/edittemplate/main.js
@@ -17,6 +17,7 @@ import {
   putSystemTemplate,
   addSystemTemplate
 } from '../../../assets/api.js'
+import Bus from '@/assets/eventBus.js'
 import PreviewEffect from '../previewEffect/main'
 import html2canvas from 'html2canvas'
 import Goodstemplate from './goodstemplate'
@@ -62,6 +63,19 @@ let product_detail = {
   button_color: '#FACD6A',
   describe: { type: '', content: '', bg_image: '' }
 }
+//优惠券商品列表
+let couponProduct_list = {
+  top_image: '',
+  list: '2',
+  font_color: '#ffffff',
+  button_color: '#FACD6A',
+  describe: { type: '', content: '', bg_image: '' },
+  picture:{
+    img:'',
+    jumpType:'0',//0不跳转  1跳转
+    jumpUrl:''
+  }
+}
 export default class edittemplate extends React.Component {
   constructor(props) {
     super(props)
@@ -96,6 +110,11 @@ export default class edittemplate extends React.Component {
     this.setState({ model: val })
   }
   componentDidMount() {
+    Bus.addListener('picture', (prop) => {
+      let coupongoodsConfig = this.state.product_list
+      coupongoodsConfig.picture.img = prop
+      this.setState({ product_list: coupongoodsConfig })
+    })
     setTimeout(() => {
       let img = document.getElementById('center-img')
       let center = document.getElementById('center')
@@ -154,7 +173,7 @@ export default class edittemplate extends React.Component {
       if (!couponList) {
         couponList = {}
         couponList.land = model
-        couponList.product_list = product_list
+        couponList.product_list = couponProduct_list
         couponList.product_detail = product_detail
       }
       couponList['land'].title = newEditor.title
@@ -186,12 +205,17 @@ export default class edittemplate extends React.Component {
         product_list,
         product_detail
       }
+      let sourcecouponObj = {//模板数据结构
+        land: model,
+        product_list:couponProduct_list,
+        product_detail
+      }
       whiteList = _.cloneDeep(sourceObj);
       exchangeList = _.cloneDeep(sourceObj);
-      couponList = _.cloneDeep(sourceObj);
+      couponList = _.cloneDeep(sourcecouponObj);
       obj.exchangeList = exchangeList
       obj.whiteList = whiteList
-      obj.couponList = whiteList
+      obj.couponList = couponList
       sessionStorage.setItem('editorConfig', JSON.stringify(obj))
     }
   }
@@ -729,7 +753,9 @@ export default class edittemplate extends React.Component {
                       }
                     />
                   )}
-
+                {
+                   this.state.product_list.picture? <img src={this.state.product_list.picture.img} alt="" className="picture"/>:null
+                }
                   {this.state.product_list.list == 2 ? (
                     <img
                       className='goodsPic'