update

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

 <template>
   <div class="main_content">
     <CardList class="box-card" v-for="(item, index) in data" :key="index" :cardList="item" />
-    <!-- <div class="step_next step_btn" @click="handleNext">下一步</div> -->
   </div>
 </template>
 <script>
 import CardList from '@/components/base/CardList.vue'
-// import stepONeStep from '@/utils/stepOne'
-// import { cacheReport } from '../../api'
 export default {
   components: {
     CardList

src/modules/market-tools/components/mobileSms/SmsStepFour.vue

+<template>
+  <div class="four-box">
+    <div class="card" v-for="(item, index) in data.stepOne" :key="index">
+      <div class="title">{{ item.cardTitle }}</div>
+      <div class="ul-list">
+        <div class="li" v-for="(cItem, cIndex) in item.form.personAttribute" :key="cIndex + 'c'">
+          <div class="icon"></div>
+          <div class="text">
+            {{ getPersonalMap(cItem).label }}&nbsp;&nbsp;{{
+              cItem.equalMap.find(i => i.value === cItem.equal).label
+            }}&nbsp;&nbsp;{{ getPersonalMap(cItem).children.find(i => i.value === cItem.range).label }}
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="title">营销方案</div>
+      <div class="ul-list">
+        <div class="li">
+          <div class="icon"></div>
+          <div class="text">
+            计划类型：{{ data.stepTwo.index === 0 ? '单次触发' : data.stepTwo.index === 1 ? '周期触发' : '节日触发' }}
+          </div>
+        </div>
+        <template v-if="data.stepTwo.index === 0">
+          <div class="li">
+            <div class="icon"></div>
+            <div class="text">触发时间：{{ data.stepTwo.triggerDate }}&nbsp;&nbsp;{{ data.stepTwo.triggerTime }}</div>
+          </div>
+        </template>
+        <template v-else-if="data.stepTwo.index === 1">
+          <div class="li">
+            <div class="icon"></div>
+            <div class="text">
+              触发时间：{{ data.stepTwo.time_range[0] }}至{{ data.stepTwo.time_range[1] }}&nbsp;&nbsp;{{
+                data.stepTwo.times_every
+              }}&nbsp;&nbsp;{{ data.stepTwo.times_hour }}
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div class="li">
+            <div class="icon"></div>
+            <div class="text">
+              触发条件：
+              <span v-for="(item, index) in data.stepTwo.solarTermsList" :key="index">{{ item.name }}{{ index != data.stepTwo.solarTermsList.length - 1 ? '，' : '' }}</span>&nbsp;&nbsp;{{ data.stepTwo.times_send }}触发
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+    <div class="card">
+      <div class="title">展示内容</div>
+      <div class="content">
+        <div class="phone-box">
+          <div class="text">{{ `【${data.stepThree.title}】${data.stepThree.content}` }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    data: { type: Object }
+  },
+  mounted() {
+    console.log(this.data, 'data')
+  },
+  methods: {
+    getPersonalMap(item) {
+      return item.personalMap.find(i => i.value === item.personal)
+    },
+    // 获取位置值
+    getPosition(item) {
+      if (item.left && item.top) {
+        return `left: ${item.left}px;top: ${item.top}px;`
+      } else {
+        return item.left ? `left: ${item.left}px;` : item.top ? `top: ${item.top}px;` : ''
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.four-box {
+  margin-bottom: 20px;
+  .card {
+    background: rgba(250, 250, 250, 0.39);
+    border: 1px solid #e8e8e8;
+    border-radius: 16px;
+    margin-bottom: 20px;
+    padding: 20px;
+    .content {
+      height: 500px;
+      position: relative;
+      .phone-box {
+        margin: 0 auto;
+        width: 236px;
+        height: 474px;
+        background: url(https://webapp-pub.ezijing.com/x-training-new/phone-sms.png);
+        background-size: 100% 100%;
+        position: relative;
+        .text {
+          padding: 9px;
+          box-sizing: border-box;
+          background: #e9e9eb;
+          border-radius: 10px;
+          width: 148px;
+          position: absolute;
+          top: 110px;
+          left: 25px;
+          font-size: 9px;
+          color: #333333;
+        }
+      }
+    }
+    .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;
+          min-width: 6px;
+          height: 6px;
+          min-height: 6px;
+          background: rgba(73, 187, 162, 0.39);
+          border-radius: 50%;
+        }
+        .text {
+          font-size: 16px;
+          color: #666666;
+          margin-left: 10px;
+        }
+      }
+    }
+  }
+}
+</style>

src/modules/market-tools/components/mobileSms/SmsStepOne.vue

 <template>
   <div class="main_content">
-    <CardList class="box-card" v-for="(item, index) in stepOneList" :key="index" :cardList="item" />
-    <!-- <div class="step_next step_btn" @click="handleNext">下一步</div> -->
+    <CardList class="box-card" v-for="(item, index) in data" :key="index" :cardList="item" />
   </div>
 </template>
 <script>
 import CardList from '@/components/base/CardList.vue'
-// import stepONeStep from '@/utils/stepOne'
-// import { cacheReport } from '../../api'
 export default {
   components: {
     CardList
   },
   props: {
-    activeStep: {
-      type: Number,
-      default: 0
-    },
-    stepOneList: {
+    data: {
       type: Array
     }
   },
@@ -28,7 +21,7 @@ export default {
     // 下一步
     handleStepOne() {
       let flag = true
-      this.stepOneList.forEach(item =>
+      this.data.forEach(item =>
         item.form.personAttribute.forEach(it => {
           if (it.equal === '' || it.personal === '' || it.range === '') {
             flag = false

src/modules/market-tools/components/mobileSms/SmsStepThree.vue

@@ -3,16 +3,16 @@
     <div class="content-left">
       <div class="card-textarea">
         <div class="title">推送标题</div>
-        <textarea v-model="form.title" placeholder="请输入"></textarea>
+        <textarea v-model="data.title" placeholder="请输入"></textarea>
       </div>
       <div class="card-textarea">
         <div class="title">推送内容</div>
-        <textarea v-model="form.content" placeholder="请输入"></textarea>
+        <textarea v-model="data.content" placeholder="请输入"></textarea>
       </div>
     </div>
     <div class="content-right">
       <div class="right-box">
-        <div class="text">{{ `【${form.title}】${form.content}` }}</div>
+        <div class="text">{{ `【${data.title}】${data.content}` }}</div>
       </div>
     </div>
   </div>
@@ -20,12 +20,21 @@
 
 <script>
 export default {
-  data() {
-    return {
-      form: {
-        title: '',
-        content: ''
+  props: {
+    data: {
+      type: Object
     }
+  },
+  mounted() {
+    console.log(this.data, '23')
+  },
+  methods: {
+    handleStepThree() {
+      if (this.data.title === '' || this.data.content === '') {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+        return false
+      }
+      return true
     }
   }
 }

src/modules/market-tools/components/mobileSms/SmsStepTwo.vue

 <template>
   <div>
-    <StepTab :tabList="tabList" @tabActive="handleTab">
+    <StepTab :tabList="tabList" @tabActive="handleTab" :index="data.index">
       <template #plan_title>计划类型</template>
       <template #trigger_title>触发条件</template>
       <template #trigger_con>
-        <div v-if="showIndex === 0">
+        <div v-if="data.index === 0">
           在 &nbsp;&nbsp;
-          <el-date-picker v-model="triggerDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
+          <el-date-picker v-model="data.triggerDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
           </el-date-picker>
           &nbsp;&nbsp;
           <el-time-picker
-            v-model="triggerTime"
+            v-model="data.triggerTime"
             arrow-control
             placeholder="选择时间"
             size="mini"
@@ -19,29 +19,36 @@
           </el-time-picker>
           &nbsp;&nbsp;对目标用户进行触达
         </div>
-        <div v-if="showIndex === 1">
+        <div v-if="data.index === 1">
           从&nbsp;&nbsp;
           <el-date-picker
-            v-model="time_range"
+            v-model="data.time_range"
             type="daterange"
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期"
+            value-format="yyyy-MM-dd"
           >
           </el-date-picker>
           &nbsp;&nbsp;时间范围内
           <br />
           <br />
           &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
-          <el-select v-model="times_every">
+          <el-select v-model="data.times_every">
             <el-option v-for="it in timesList" :key="it.value" :label="it.label" :value="it.value"> </el-option>
           </el-select>
           &nbsp;&nbsp;&nbsp;
-          <el-time-picker v-model="times_hour" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
+          <el-time-picker
+            v-model="data.times_hour"
+            arrow-control
+            placeholder="选择时间"
+            size="mini"
+            value-format="HH:mm:ss"
+          >
           </el-time-picker>
           发送
         </div>
-        <div v-if="showIndex === 2">
+        <div v-if="data.index === 2">
           <!-- 节气 -->
           <div class="solarTerms">
             <div class="solarTerms_left">
@@ -90,7 +97,7 @@
           <div class="sendMessage">
             在如上日期
             <el-time-picker
-              v-model="times_send"
+              v-model="data.times_send"
               arrow-control
               placeholder="选择时间"
               size="mini"
@@ -109,34 +116,26 @@ import StepTab from '@/components/base/StepTab.vue'
 export default {
   components: { StepTab },
   props: {
-    stepTwoData: {}
+    data: { type: Object }
   },
 
   data() {
     return {
+      // 选项
       timesList: [
         {
-          value: '0',
+          value: '每日',
           label: '每日'
         },
         {
-          value: '1',
+          value: '每周',
           label: '每周'
         },
         {
-          value: '2',
+          value: '每月',
           label: '每月'
         }
       ],
-      triggerDate: '', // 单次触发 触发日期
-      triggerTime: '', // 单次触发 触发时间
-      time_range: [], // 周期触发 触发时间范围
-      times_every: '', // 周期触发 触发周期
-      times_hour: '', //  周期触发  触发时间
-      times_send: '', // 节日触发 触发时间
-      caseId: '',
-      showIndex: 0,
-      showIndexName: '',
       // tab切换列表
       tabList: [
         {
@@ -155,17 +154,18 @@ export default {
           tabName: '节日触发'
         }
       ],
+      // 节气
       festivalList: [
-        { id: '0', name: '元旦', isActive: false },
-        { id: '1', name: '情人节', isActive: false },
-        { id: '2', name: '愚人节', isActive: false },
-        { id: '3', name: '复活节', isActive: false },
-        { id: '4', name: '母亲节', isActive: false },
-        { id: '5', name: '父亲节', isActive: false },
-        { id: '6', name: '感恩节', isActive: false },
-        { id: '7', name: '万圣节', isActive: false },
-        { id: '8', name: '元旦节', isActive: false },
-        { id: '9', name: '小满', isActive: false }
+        { id: '00', name: '元旦', isActive: false },
+        { id: '11', name: '情人节', isActive: false },
+        { id: '22', name: '愚人节', isActive: false },
+        { id: '33', name: '复活节', isActive: false },
+        { id: '44', name: '母亲节', isActive: false },
+        { id: '55', name: '父亲节', isActive: false },
+        { id: '66', name: '感恩节', isActive: false },
+        { id: '77', name: '万圣节', isActive: false },
+        { id: '88', name: '元旦节', isActive: false },
+        { id: '99', name: '小满', isActive: false }
       ],
       solarTermsList: [
         { id: '0', name: '小寒', isActive: false },
@@ -206,17 +206,25 @@ export default {
     }
   },
   mounted() {
-    this.festivalList = this.stepTwoData.festivalList.length ? this.stepTwoData.festivalList : this.festivalList
-    this.solarTermsList = this.stepTwoData.solarTermsList.length ? this.stepTwoData.solarTermsList : this.solarTermsList
-    this.triggerDate = this.stepTwoData.triggerDate
-    this.triggerTime = this.stepTwoData.triggerTime
-    this.time_range = this.stepTwoData.time_range
-    this.times_every = this.stepTwoData.times_every
-    this.times_hour = this.stepTwoData.times_hour
-    this.times_send = this.stepTwoData.times_send
+    this.setSolarTerms()
   },
-
   methods: {
+    setSolarTerms() {
+      if (this.data.index === 2) {
+        this.festivalList.map(item => {
+          if (this.data.solarTermsList.find(i => i.id === item.id)) {
+            item.isActive = true
+          }
+          return item
+        })
+        this.solarTermsList.map(item => {
+          if (this.data.solarTermsList.find(i => i.id === item.id)) {
+            item.isActive = true
+          }
+          return item
+        })
+      }
+    },
     // 全选节气
     handleSelectAllSolar() {
       if (this.checkAllSolar) {
@@ -228,6 +236,7 @@ export default {
           item.isActive = true
         })
       }
+      this.solarTermsChange()
     },
     // 全选节日
     handleSelectAllFes() {
@@ -240,48 +249,49 @@ export default {
           item.isActive = true
         })
       }
+      this.solarTermsChange()
     },
     // 是否选择节气
     handleItemSolarActive(item) {
       item.isActive = !item.isActive
+      this.solarTermsChange()
     },
     // 是否选择节日
     handleItemFesActive(item) {
       item.isActive = !item.isActive
+      this.solarTermsChange()
+    },
+    solarTermsChange() {
+      this.data.solarTermsList = []
+      this.festivalList.forEach(item => {
+        item.isActive && this.data.solarTermsList.push(item)
+      })
+      this.solarTermsList.forEach(item => {
+        item.isActive && this.data.solarTermsList.push(item)
+      })
     },
     // tab切换
     handleTab(index) {
-      this.showIndex = index
+      this.data.index = index
+      this.setSolarTerms()
     },
     // 进去下一步之前的判断
     handleStepTwo() {
-      this.$emit('getShowIndex', this.showIndex)
-
-      const stepTwoData = {
-        triggerDate: this.triggerDate,
-        triggerTime: this.triggerTime,
-        time_range: this.time_range,
-        times_every: this.times_every,
-        times_hour: this.times_hour,
-        times_send: this.times_send,
-        solarTermsList: this.solarTermsList,
-        festivalList: this.festivalList
-      }
-
-      this.$emit('getTime', stepTwoData)
-      console.log(this.time_range[0], this.time_range[1], this.times_every, '--000', this.times_send, '----')
-      if (this.showIndex === 0 && (this.triggerDate === '' || this.triggerTime === '')) {
+      if (this.data.index === 0 && (this.data.triggerDate === '' || this.data.triggerTime === '')) {
         this.$message.warning('请完善改步骤后才能进入下一步')
         return false
       } else if (
-        this.showIndex === 1 &&
-        (this.time_range[0] === '' || this.time_range[1] === '' || this.times_every === '' || this.times_hour === '')
+        this.data.index === 1 &&
+        (this.data.time_range[0] === '' ||
+          this.data.time_range[1] === '' ||
+          this.data.times_every === '' ||
+          this.data.times_hour === '')
       ) {
         this.$message.warning('请完善改步骤后才能进入下一步')
         return false
       } else if (
-        this.showIndex === 2 &&
-        (this.times_send === null ||
+        this.data.index === 2 &&
+        (this.data.times_send === null ||
           this.festivalList.filter(item => item.isActive === false).length === this.festivalList.length ||
           this.solarTermsList.filter(item => item.isActive === false).length === this.solarTermsList.length)
       ) {

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

@@ -2,27 +2,15 @@
   <div>
     <ToolCard class="main_content">
       <Step :activeStep="activeStep" class="pt50-pl60" />
-      <div>
-        <SmsStepOne
-          v-if="activeStep === 0"
-          class="pt-50"
-          :activeStep="activeStep"
-          :stepOneList="stepOneList"
-          ref="mailStepOne"
-        />
-        <SmsStepTwo
-          v-if="activeStep === 1"
-          class="pt-50"
-          ref="mailStepTwo"
-          @getTime="getTime"
-          @getShowIndex="getShowIndex"
-          :stepTwoData="stepTwoData"
-        />
-        <SmsStepThree v-if="activeStep === 2" />
+      <div style="flex: 1">
+        <SmsStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" />
+        <SmsStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
+        <SmsStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
+        <SmsStepFour :data="form" class="step-four" v-if="activeStep === 3" />
         <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>
-          <div class="step_finished step_btn" @click="handlePreview" v-if="activeStep === 2">点击生成预览</div>
+          <div class="step_finished step_btn" @click="handleNext" v-if="activeStep === 2">点击生成预览</div>
           <div class="step_finished step_btn" @click="handlePlan" v-if="activeStep === 3">执行营销计划</div>
         </div>
       </div>
@@ -32,127 +20,130 @@
 
 <script>
 import stepOne from '@/utils/stepOne'
-import { cacheReport, getReportDetail, checkRecord } from '../api'
+import { cacheReport, getReportDetail, checkRecord, submitReport } from '../api'
 import ToolCard from '@/components/base/ToolCard.vue'
 import SmsStepOne from '../components/mobileSms/SmsStepOne.vue'
 import Step from '@/components/base/Step.vue'
 import SmsStepTwo from '../components/mobileSms/SmsStepTwo.vue'
 import SmsStepThree from '../components/mobileSms/SmsStepThree.vue'
+import SmsStepFour from '../components/mobileSms/SmsStepFour.vue'
 export default {
   components: {
     ToolCard,
     SmsStepOne,
     Step,
     SmsStepTwo,
-    SmsStepThree
+    SmsStepThree,
+    SmsStepFour
   },
   data() {
     return {
-      // times: '',
-      activeStep: 2,
-      stepOneList: [],
-      caseId: '',
-      stepTwoData: {
-        triggerDate: '',
-        triggerTime: '',
-        time_range: '',
-        times_every: '',
-        times_hour: '',
-        times_send: '',
-        solarTermsList: [],
-        festivalList: [],
-        showIndex: ''
+      form: {
+        stepOne: stepOne,
+        stepTwo: {
+          index: 0, // 触发类型
+          triggerDate: '', // 单次触发 触发日期
+          triggerTime: '', // 单次触发 触发时间
+          time_range: [], // 周期触发 触发时间范围
+          times_every: '', // 周期触发 触发周期
+          times_hour: '', //  周期触发  触发时间
+          times_send: '', // 节日触发 触发时间
+          solarTermsList: [] // 选中的节日
+        },
+        stepThree: {
+          title: '',
+          content: ''
         }
+      },
+      activeStep: 0,
+      caseId: ''
     }
   },
 
   methods: {
-    getShowIndex(val) {
-      this.showIndex = val
-    },
-    // 获取第二步时间
-    getTime(val) {
-      this.stepTwoData = val
-    },
     // 上一步
     handlePrev() {
-      // if (this.$refs.mailStepTwo.handleStepTwo()) {
-      this.handleStep(2)
-      // }
+      this.activeStep--
     },
-    // 下一步
     handleNext() {
-      if (this.activeStep === 0) {
-        if (this.$refs.mailStepOne.handleStepOne()) {
-          // 保存步骤信息
-          this.handleStep(0)
-        }
-      } else if (this.activeStep === 1) {
-        if (this.$refs.mailStepTwo.handleStepTwo()) {
-          this.handleStep(1)
-        }
+      // 找到对应步骤，调用组件内部方法检查未填
+      switch (this.activeStep) {
+        case 0:
+          this.$refs.stepOne.handleStepOne() && this.handleStep()
+          break
+        case 1:
+          this.$refs.stepTwo.handleStepTwo() && this.handleStep()
+          break
+        case 2:
+          this.$refs.stepThree.handleStepThree() && this.handleStep()
+          break
       }
     },
     // 保存步骤
     handleStep(val) {
       const reports = {
-        activeStep: parseInt(val),
+        activeStep: this.activeStep + 1,
         type: 4,
-        commit_report: [{ stepOneList: this.stepOneList }, { stepTwoData: this.stepTwoData }]
+        commit_report: this.form
       }
+      console.log(reports, 'rep')
       cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
         this.caseId = res.data.id
-        if (val === 2) {
-          this.activeStep--
-        } else {
         this.activeStep++
-        }
       })
     },
     // 预览
     handlePreview() {
       this.activeStep++
     },
-    handlePlan() {},
+    handlePlan() {
+      const reports = {
+        id: this.caseId || this.$route.query.id,
+        reports: JSON.stringify({
+          type: 4,
+          commit_report: this.form
+        })
+      }
+      submitReport(reports).then(res => {
+        if (res.code === 0) {
+          this.$router.push({
+            path: '/works-show/history',
+            query: {
+              type: 3
+            }
+          })
+        }
+      })
+    },
     // 获取步骤信息回显
     getReportDetail(id) {
       getReportDetail(id).then(res => {
-        console.log(res, 'res')
         if (res.data.detail.answer.type === 4) {
           this.activeStep = res.data.detail.answer.activeStep
-          this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
-          this.stepTwoData = res.data.detail.answer.commit_report[1].stepTwoData
+          this.form = res.data.detail.answer.commit_report
         }
       })
     },
     // 验证是否有未完成的答题记录
     checkRecord() {
-      checkRecord(this.$store.state.case.id, 2).then(res => {
+      checkRecord(this.$store.state.case.id, 4).then(res => {
         if (res.data.status === true) {
-          const answerList = res.data.items.filter(item => item.type === 4)
-          if (res.data.items.length && answerList.length) {
-            this.activeStep = answerList[0].answer.activeStep
-            this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
-            this.stepTwoData = answerList[0].answer.commit_report[1].stepTwoData
-          } else {
-            this.initStepList()
+          const answerList = res.data.items.find(item => item.type === 4)
+          this.activeStep = answerList.answer.activeStep || 0
+          if (Object.keys(answerList).length) {
+            this.form = answerList.answer.commit_report
+            console.log(this.form, 'form')
           }
-        } else {
-          this.initStepList()
         }
       })
-    },
-    // 初始化步骤列表
-    initStepList() {
-      this.stepOneList = stepOne
     }
   },
   mounted() {
-    // if (this.$route.query.type) {
-    //   this.getReportDetail(this.$route.query.id)
-    // } else {
-    //   this.checkRecord()
-    // }
+    if (this.$route.query.type) {
+      this.getReportDetail(this.$route.query.id)
+    } else {
+      this.checkRecord()
+    }
   }
 }
 </script>
@@ -200,4 +191,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>