update

src/components/base/EditStyle.vue

@@ -6,7 +6,13 @@
       <div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom">
         点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }}
       </div>
-      <el-input :maxlength="valueMaxLength" v-if="returnData.show === false" style="margin-top: 15px" v-model="returnData.textValue" placeholder="请输入"></el-input>
+      <el-input
+        :maxlength="valueMaxLength"
+        v-if="returnData.show === false"
+        style="margin-top: 15px"
+        v-model="returnData.textValue"
+        placeholder="请输入"
+      ></el-input>
     </div>
     <div class="tool-select">
       <div v-for="(item, index) in toolList" :key="index">
@@ -65,7 +71,14 @@ export default {
     // 一组数据的话工具框的下标
     toolIndex: { type: Number, default: 0 },
     // 输入框最多输入的长度
-    valueMaxLength: { type: Number, default: 10 }
+    valueMaxLength: { type: Number, default: 10 },
+    // 回显的数据
+    echoData: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
   },
   data() {
     return {
@@ -75,8 +88,10 @@ export default {
       returnData: {}
     }
   },
-  created() {
+  mounted() {
+    this.returnData = this.echoData
     this.setToolData()
+    // this.returnData = this.echoData
   },
   methods: {
     // 拖拽的dom 通过此方法显示隐藏
@@ -148,7 +163,8 @@ export default {
           a.push(`${b.styleName}: ${b.value};`)
           return a
         }, [])
-        .join().replace(/,/g, '')
+        .join()
+        .replace(/,/g, '')
     },
     // 设置option值
     setOption(min, max, count, symbol = '') {

src/modules/market-tools/components/mail/MailStepFour.vue

+<template>
+  <div class="four-box">
+    <div class="card">
+      <div class="title">个人属性</div>
+      <div class="ul-list">
+        <div class="li">
+          <div class="icon"></div>
+          <div class="text">年龄  等于  20-30</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.four-box{
+  .card{
+    background: rgba(250, 250, 250, 0.39);
+    border: 1px solid #E8E8E8;
+    border-radius: 16px;
+    margin-bottom: 20px;
+    padding: 20px;
+    .title{
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 100%;
+      color: #333333;
+    }
+    .ul-list{
+      padding-top: 20px;
+      .li{
+        display: flex;
+        align-items: center;
+        margin-bottom: 15px;
+        .icon{
+          width: 6px;
+          height: 6px;
+          background: rgba(73, 187, 162, 0.39);
+          border-radius: 50%;
+        }
+        .text{
+          font-size: 16px;
+          line-height: 100%;
+          color: #666666;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/modules/market-tools/components/mail/MailStepThree.vue

 <template>
   <div class="mail-three-box">
     <div class="content-left">
-      <edit-style v-for="(item, index) in toolList" :key="index" v-bind="item" @data="setTitleData" :toolIndex="index"></edit-style>
-      <div class="upload-img">
-        <div class="btn">上传图片</div>
-        <UploadImage class="upload" style="width:50px" v-model="imgParams.url" @input="uploadImg"></UploadImage>
-      </div>
+      <template v-if="showFlag">
+        <edit-style
+          v-for="(item, index) in toolList"
+          :key="index"
+          v-bind="item"
+          @data="setStyleData"
+          :toolIndex="index"
+        ></edit-style>
+        <div class="upload-img">
+          <div class="btn">上传图片</div>
+          <UploadImage class="upload" style="width: 50px" v-model="imgParams.url" @input="uploadImg"></UploadImage>
+        </div>
+      </template>
     </div>
     <div class="content-right">
       <div class="card-dom" id="max">
-        <div id="title" v-show="titleParams.show == false" :style="titleParams.style" class="title">{{ titleParams.textValue || '请输入' }}</div>
-        <div id="describe" v-show="describeParams.show == false" :style="describeParams.style" class="describe">{{ describeParams.textValue || '请输入' }}</div>
-        <div id="btn" v-show="btnParams.show == false" :style="btnParams.style" class="btn">{{ btnParams.textValue || '请输入' }}</div>
-        <div v-if="imgParams.url" id="uploadImg" :style="`background:url(${imgParams.url});background-size:cover;`" class="img" />
+        <div id="title" v-show="titleParams.show == false" :style="titleParams.style" class="title">
+          {{ titleParams.textValue || '请输入' }}
+        </div>
+        <div id="describe" v-show="describeParams.show == false" :style="describeParams.style" class="describe">
+          {{ describeParams.textValue || '请输入' }}
+        </div>
+        <div id="btn" v-show="btnParams.show == false" :style="btnParams.style" class="btn">
+          {{ btnParams.textValue || '请输入' }}
+        </div>
+        <div
+          v-if="imgParams.url"
+          id="uploadImg"
+          :style="`background:url(${imgParams.url});background-size:cover;`"
+          class="img"
+        />
       </div>
-      <!-- <div @click="makePreview">点击生成预览</div> -->
     </div>
   </div>
 </template>
@@ -25,15 +43,17 @@ import drag from '@/utils/drag.js'
 import EditStyle from '@/components/base/EditStyle.vue'
 export default {
   components: { EditStyle, UploadImage },
+  props: ['data'],
   data() {
     return {
+      showFlag: false,
       imgParams: { url: '' },
       titleParams: {},
       describeParams: {},
       btnParams: {},
-      textarea1: '',
       toolList: [
         {
+          dataFlag: 'titleParams',
           title: '邮件标题',
           subTitle: '标题栏',
           tool: [
@@ -44,6 +64,7 @@ export default {
           ]
         },
         {
+          dataFlag: 'describeParams',
           title: '邮件内容',
           subTitle: '内容栏',
           tool: [
@@ -55,6 +76,7 @@ export default {
           valueMaxLength: 50
         },
         {
+          dataFlag: 'btnParams',
           title: '按钮',
           subTitle: '按钮',
           tool: [
@@ -67,12 +89,71 @@ export default {
           ]
         }
       ]
-      // tool: ['fontSize', 'fontColor', 'fontLineH', 'fontFamily', 'borderRadius', 'bgColor', 'fontPosition']
     }
   },
+  created() {
+  },
   mounted() {
+    if (!Array.isArray(this.data)) {
+      this.dataEcho()
+    } else {
+      this.showFlag = true
+    }
   },
   methods: {
+    // 数据回显
+    dataEcho() {
+      this.titleParams = this.data.titleParams
+      this.imgParams = this.data.imgParams
+      this.describeParams = this.data.describeParams
+      this.btnParams = this.data.btnParams
+      this.toolList.map(item => {
+        item.echoData = Object.assign({}, this.data[item.dataFlag])
+        delete item.echoData.originalData
+        item.tool = this.data[item.dataFlag].originalData
+        return item
+      })
+      this.$nextTick(() => {
+        const imgDom = document.querySelector('#uploadImg')
+        const imgPosition = this.data.imgParams.position
+        if (imgPosition) {
+          imgDom.style.top = imgPosition.top + 'px'
+          imgDom.style.left = imgPosition.left + 'px'
+        }
+        drag(imgDom, document.querySelector('#max'), res => {
+          this.imgParams.position = res
+        })
+        const titleDom = document.querySelector('#title')
+        const titlePosition = this.data.titleParams.position
+        if (titlePosition) {
+          titleDom.style.top = titlePosition.top + 'px'
+          titleDom.style.left = titlePosition.left + 'px'
+        }
+        drag(titleDom, document.querySelector('#max'), res => {
+          this.imgParams.position = res
+        })
+        const describeDom = document.querySelector('#describe')
+        const describePosition = this.data.describeParams.position
+        if (describePosition) {
+          describeDom.style.top = describePosition.top + 'px'
+          describeDom.style.left = describePosition.left + 'px'
+        }
+        drag(describeDom, document.querySelector('#max'), res => {
+          this.imgParams.position = res
+        })
+        const btnDom = document.querySelector('#btn')
+        const btnPosition = this.data.btnParams.position
+        if (btnPosition) {
+          btnDom.style.top = btnPosition.top + 'px'
+          btnDom.style.left = btnPosition.left + 'px'
+        }
+        drag(btnDom, document.querySelector('#max'), res => {
+          this.imgParams.position = res
+        })
+        this.showFlag = true
+      })
+    },
+    // 传回父组件需要提交缓存的数据
     makePreview() {
       const params = {
         titleParams: this.titleParams,
@@ -80,20 +161,33 @@ export default {
         describeParams: this.describeParams,
         btnParams: this.btnParams
       }
-      console.log(params)
+      console.log(params, 'params')
+      for (const data in params) {
+        if (params[data].show !== false) {
+          this.$message({
+            message: '请编辑主题',
+            type: 'warning'
+          })
+          return false
+        }
+      }
+      return params
     },
+    // 上传图片
     uploadImg() {
       this.$nextTick(() => {
-        console.log(111, 222)
-        drag(document.querySelector('#uploadImg'), document.querySelector('#max'), function(res) {
+        this.imgParams.show = false
+        drag(document.querySelector('#uploadImg'), document.querySelector('#max'), res => {
           this.imgParams.position = res
         })
       })
     },
-    setTitleData(data) {
+    // 设置样式 组合数据
+    setStyleData(data) {
       switch (data.toolIndex) {
         case 0:
           this.titleParams = data
+          console.log(this.titleParams.originalData, '12212112')
           this.$nextTick(() => {
             drag(document.querySelector('#title'), document.querySelector('#max'), res => {
               this.titleParams.position = res
@@ -117,7 +211,6 @@ export default {
           })
           break
       }
-      console.log(data)
     }
   }
 }
@@ -125,32 +218,33 @@ export default {
 
 <style lang="scss" scoped>
 .mail-three-box {
+  margin-bottom: 20px;
   display: flex;
   .content-left {
     border-left: 1px solid #dedede;
     border-right: 1px solid #dedede;
     padding: 30px 30px 0;
-    .upload-img{
+    .upload-img {
       position: relative;
-      .btn{
+      .btn {
         width: 321px;
         height: 40px;
         background: rgba(237, 245, 243, 0.39);
-        border: 1px solid #80D6C4;
+        border: 1px solid #80d6c4;
         border-radius: 8px;
         font-size: 14px;
         line-height: 40px;
-        color: #49BBA2;
+        color: #49bba2;
         cursor: pointer;
         text-align: center;
       }
-      .upload{
+      .upload {
         position: absolute;
-        top:0;
-        left:0;
+        top: 0;
+        left: 0;
         opacity: 0.00001;
-        ::v-deep{
-          .el-upload{
+        ::v-deep {
+          .el-upload {
             width: 320px;
             height: 40px;
           }

src/modules/market-tools/views/Mail.vue

@@ -2,7 +2,7 @@
   <div>
     <ToolCard class="main_content">
       <Step :activeStep="activeStep" class="pt50-pl60" />
-      <div>
+      <div style="flex:1;">
         <MailStepOne
           v-if="activeStep === 0"
           class="pt-50"
@@ -19,7 +19,8 @@
           @getTime="getTime"
           ref="mailStepTwo"
         />
-        <MailStepThree v-if="activeStep === 2" />
+        <MailStepThree :data="stepThreeData" ref="mailStepThree" v-if="activeStep === 2" />
+        <MailStepFour class="step-four" v-if="activeStep === 3"></MailStepFour>
         <div class="main_content_btn">
           <div class="step_prev step_btn" @click="handlePrev" v-if="activeStep > 0">上一步</div>
           <div class="step_next step_btn" @click="handleNext" v-if="activeStep >= 0 && activeStep < 2">下一步</div>
@@ -40,19 +41,22 @@ import MailStepOne from '../components/mail/MailStepOne.vue'
 import Step from '@/components/base/Step.vue'
 import MailStepTwo from '../components/mail/MailStepTwo.vue'
 import MailStepThree from '../components/mail/MailStepThree.vue'
+import MailStepFour from '../components/mail/MailStepFour.vue'
 export default {
   components: {
     ToolCard,
     MailStepOne,
     Step,
     MailStepTwo,
-    MailStepThree
+    MailStepThree,
+    MailStepFour
   },
   data() {
     return {
       activeStep: 0,
       stepOneList: [],
       stepTwoList: [],
+      stepThreeData: {},
       time: '',
       caseId: '',
       times: '',
@@ -69,7 +73,8 @@ export default {
     },
     // 上一步
     handlePrev() {
-      this.handleStep(2)
+      this.activeStep--
+      // this.handleStep(2)
     },
     // 下一步
     handleNext() {
@@ -93,13 +98,14 @@ export default {
         commit_report: [
           { stepOneList: this.stepOneList },
           { form: this.stepTwoList },
-          { time: this.time, time2: this.time2 }
+          { time: this.time, time2: this.time2 },
+          { stepThreeData: this.stepThreeData }
         ]
       }
       cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
         this.caseId = res.data.id
         if (val === 2) {
-          this.activeStep--
+          this.activeStep++
         } else {
           this.activeStep++
         }
@@ -107,7 +113,8 @@ export default {
     },
     // 预览
     handlePreview() {
-      this.activeStep++
+      this.stepThreeData = this.$refs.mailStepThree.makePreview()
+      this.handleStep(2)
     },
     handlePlan() {},
     // 获取步骤信息回显
@@ -133,6 +140,8 @@ export default {
             this.stepTwoList = answerList[0].answer.commit_report[1].form || stepTwo
             this.time = answerList[0].answer.commit_report[2].time || this.times
             this.time2 = answerList[0].answer.commit_report[2].time2 || this.times2
+            this.stepThreeData = answerList[0].answer.commit_report[3].stepThreeData || {}
+            console.log(this.stepThreeData, '213')
           } else {
             this.initStepList()
           }
@@ -154,7 +163,6 @@ export default {
     if (this.$route.query.type) {
       this.getReportDetail(this.$route.query.id)
     } else {
-      // this.initStepList()
       this.checkRecord()
     }
   }
@@ -203,4 +211,10 @@ export default {
 .pt-50 {
   padding-top: 50px;
 }
+.step-four {
+  padding: 42px 35px;
+  flex: 1;
+  border-left: 1px solid #dedede;
+  border-bottom: 1px solid #dedede;
+}
 </style>