Merge branch 'master' of https://gitlab.ezijing.com/webapp/x-training-new

.eslintrc.js

@@ -4,7 +4,9 @@ module.exports = {
   },
   extends: ['plugin:vue/essential', 'standard'],
   rules: {
+    'vue/no-mutating-props': 'off', // 暂时关闭
     'vue/comment-directive': 'off',
+    'vue/multi-word-component-names': 'off',
     'space-before-function-paren': 'off'
   }
 }

src/components/base/CardList.vue

@@ -4,13 +4,8 @@
     <el-card class="box_card">
       <div slot="header" class="clearfix">
         <span>{{ cardList.cardTitle }}</span>
-        <div style="display: flex" class="box_card_add">
-          <img
-            src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png"
-            alt=""
-            @click="handleAdd"
-            class="box_card_add_btn"
-          />
+        <div style="display: flex" class="box_card_add" @click="handleAdd">
+          <img src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png" alt="" class="box_card_add_btn" />
           <div class="box_card_add_text">添加</div>
         </div>
       </div>
@@ -57,6 +52,7 @@
               </el-form-item>
               <el-form-item>
                 <img
+                  class="optionList_right_del"
                   src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
                   @click="handleDelete(item, indexB)"
                 />
@@ -81,7 +77,6 @@ export default {
       return this.cardList.form.personAttribute.map(item => {
         item.personalMap = item.personalMap.map(i => {
           i.disabled = !!this.cardList.form.personAttribute.find(item => item.personal === i.value)
-          console.log(item.personal, i.value)
           return i
         })
         return item
@@ -89,7 +84,7 @@ export default {
     }
   },
   methods: {
-    // // 增加
+    // 增加
     handleAdd() {
       if (this.cardList.form.personAttribute.length < this.cardList.form.personAttribute[0].personalMap.length) {
         const item = Object.assign({}, this.cardList.form.personAttribute[0])
@@ -104,7 +99,6 @@ export default {
     },
     // 删除
     handleDelete(item, indexB) {
-      // console.log(item, 'item11')
       if (this.cardList.form.personAttribute.length > 1) {
         // eslint-disable-next-line vue/no-mutating-props
         this.cardList.form.personAttribute.splice(indexB, 1)
@@ -124,7 +118,7 @@ export default {
     .box_card_add {
       float: right;
       padding-right: 104px;
-
+      cursor: pointer;
       .box_card_add_text {
         font-size: 14px;
         font-weight: 400;
@@ -170,6 +164,7 @@ export default {
             width: 12px;
             height: 12px;
             opacity: 1;
+            cursor: pointer;
           }
         }
       }
@@ -179,5 +174,6 @@ export default {
 ::v-deep .el-card {
   border-radius: 16px;
   width: 826px;
+  margin-bottom: 30px;
 }
 </style>

src/modules/market-tools/api.js

@@ -17,7 +17,7 @@ export function submitReport(data) {
 // 保存营销工具记录
 export function cacheReport(id, data) {
   return httpRequest.post(`/api/xtraining/api/v1/answer/${id}/save-marketing-record`, data, {
-    headers: { 'Content-Type': 'application/json' }
+    headers: { 'Content-Type': 'application/json;charset=UTF-8' }
   })
 }
 
@@ -28,7 +28,11 @@ export function getReportDetail(id) {
 
 // 验证是否有未完成的答题记录
 export function checkRecord(id, type) {
-  return httpRequest.post(`/api/xtraining/api/v1/answer/${id}/check-record/${type}`, {}, {
+  return httpRequest.post(
+    `/api/xtraining/api/v1/answer/${id}/check-record/${type}`,
+    {},
+    {
       headers: { 'Content-Type': 'application/json' }
-  })
+    }
+  )
 }

src/modules/market-tools/components/DouYin.vue

@@ -23,7 +23,7 @@
       </div>
       <div class="step-content2" v-show="stepsIndex === 1">
         <div class="form-box">
-          <el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false ">
+          <el-form ref="form" :model="form" label-width="80px" :disabled="$route.query.type == 1 ? true : false">
             <el-form-item label="标题">
               <el-input v-model="form.title" placeholder="请输入内容"></el-input>
             </el-form-item>
@@ -62,7 +62,9 @@
         <el-button type="primary" @click="prevBtn" v-if="stepsIndex != 0">上一步</el-button>
         <el-button v-if="stepsIndex == 0" type="primary" @click="registerNextBtn">下一步</el-button>
         <el-button v-if="stepsIndex == 1" type="primary" @click="formNextBtn">下一步</el-button>
-        <el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1">完成</el-button>
+        <el-button type="primary" @click="submitReport" v-if="stepsIndex == 2 && $route.query.type != 1"
+          >完成</el-button
+        >
       </div>
     </div>
   </div>
@@ -109,8 +111,7 @@ export default {
     },
     // 验证是否有未完成的答题记录
     checkRecord() {
-      checkRecord(this.cases.id, 2)
-        .then(res => {
+      checkRecord(this.cases.id, 2).then(res => {
         if (res.data.items.length) {
           this.getReportDetail(res.data.items[0].id)
         }
@@ -256,8 +257,7 @@ export default {
       dom.left = sty.l
       this.registerText = sty.text
     },
-    input(url) {
-    }
+    input(url) {}
   }
 }
 </script>

src/modules/market-tools/components/app/AppStepOne.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> -->
+  </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: {
+      type: Array
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 下一步
+    handleStepOne() {
+      let flag = true
+      this.stepOneList.forEach(item =>
+        item.form.personAttribute.forEach(it => {
+          console.log(it, '333')
+          if (it.equal === '' || it.personal === '' || it.range === '') {
+            flag = false
+          }
+        })
+      )
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main_content {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  .box-card {
+    min-width: 520px;
+  }
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    cursor: pointer;
+    background: #49bba2;
+    margin: 30px auto;
+    cursor: pointer;
+  }
+}
+</style>

src/modules/market-tools/components/app/AppStepTwo.vue

+<template>
+  <div>
+    <StepTab :tabList="tabList" @tabActive="handleTab">
+      <template #plan_title>计划类型</template>
+      <template #trigger_title>触发条件</template>
+      <template #trigger_con>
+        <div v-if="showIndex === 0">
+          在 &nbsp;&nbsp;
+          <el-date-picker v-model="times" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
+          </el-date-picker>
+          &nbsp;&nbsp;
+          <el-time-picker v-model="times2" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
+          </el-time-picker>
+          &nbsp;&nbsp;对目标用户进行触达
+        </div>
+        <div v-if="showIndex === 1">
+          <AppTodoList :form="stepTwoList" />
+        </div>
+      </template>
+    </StepTab>
+    <div class="main_content_btn">
+      <!-- <div class="step_prev step_btn" @click="handlePrev">上一步</div>
+      <div class="step_next step_btn" @click="handleNext">下一步</div> -->
+    </div>
+  </div>
+</template>
+<script>
+import StepTab from '@/components/base/StepTab.vue'
+import AppTodoList from './AppTodoList.vue'
+export default {
+  components: { StepTab, AppTodoList },
+  props: {
+    stepTwoList: {
+      type: Array
+    },
+    time: {
+      type: String
+    },
+    time2: {
+      type: String
+    }
+  },
+
+  data() {
+    return {
+      times: '',
+      times2: '',
+      caseId: '',
+      showIndex: 0,
+      // tab切换列表
+      tabList: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
+          tabName: '单次触发'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
+          tabName: '条件触发'
+        }
+      ]
+    }
+  },
+  mounted() {
+    // console.log(this.time, 'time')
+    this.times = this.time
+    this.times2 = this.time2
+    // console.log(this.stepTwoList, '9999')
+  },
+
+  methods: {
+    handleTab(index) {
+      this.showIndex = index
+    },
+    handlePrev() {
+      this.$parent.$parent.handlePrev()
+    },
+    handleStepTwo() {
+      console.log(this.times)
+      this.$emit('getTime', this.times, this.times2)
+      // this.$emit('getTime', this.times)
+      let flag = true
+      this.stepTwoList[0].form.triggerList.forEach(item => {
+        if (item.triggerValue === '' || this.times === '' || this.times2 === '') {
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main_content_btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 36px;
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    opacity: 1;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  .step_prev {
+    border: 1px solid #cacaca;
+    background: #fff;
+    color: #ffffff;
+    color: #6d6d71;
+  }
+  .step_next {
+    background: #49bba2;
+  }
+}
+</style>

src/modules/market-tools/components/app/AppTodoList.vue

+<template>
+  <div class="main_con">
+    <div class="main_con_add" @click="handleAdd">
+      <img src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png" alt="" />
+      添加
+    </div>
+    <div class="main_con_optionList">
+      <div class="optionList_left">
+        <div v-for="item in form[0].form.triggerList.length - 1" :key="item">
+          <div class="optionList_left_line"></div>
+          <div class="optionList_left_text">且</div>
+        </div>
+      </div>
+      <div class="optionList_right">
+        <el-form :inline="true" :model="form[0].form">
+          <div v-for="(item, indexB) in list" :key="indexB">
+            <el-form-item>
+              <span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <el-select v-model="item.triggerValue">
+                <el-option
+                  v-for="it in item.list"
+                  :key="it.value"
+                  :label="it.label"
+                  :value="it.value"
+                  :disabled="it.disabled"
+                >
+                </el-option>
+              </el-select>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <span class="optionList_right_text">对目标用户进行触达</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            </el-form-item>
+            <el-form-item>
+              <img
+                src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
+                @click="handleDelete(item, indexB)"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    form: {
+      type: Array,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    console.log(this.form, '----')
+  },
+  computed: {
+    list() {
+      return this.form[0].form.triggerList.map(item => {
+        item.list = item.list.map(i => {
+          i.disabled = !!this.form[0].form.triggerList.find(item => item.triggerValue === i.value)
+          return i
+        })
+        return item
+      })
+    }
+  },
+  methods: {
+    handleAdd() {
+      console.log('000')
+      if (this.form[0].form.triggerList.length < this.form[0].form.triggerList[0].list.length) {
+        const item = Object.assign({}, this.form[0].form.triggerList[0])
+        item.triggerValue = ''
+
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.push(item)
+      } else {
+        this.$message.warning('添加项不能超过下拉选项个数')
+      }
+    },
+    handleDelete(item, indexB) {
+      if (this.form[0].form.triggerList.length > 1) {
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.splice(indexB, 1)
+      } else {
+        this.$message.warning('默认至少有一条数据')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_con {
+  display: flex;
+  flex-direction: column;
+  .main_con_add {
+    align-self: flex-end;
+    padding: 0 130px 30px 0;
+  }
+  .main_con_optionList {
+    display: flex;
+    .optionList_left {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      .optionList_left_line {
+        width: 0px;
+        height: 85px;
+        border: 1px solid #c5c5c5;
+        opacity: 1;
+      }
+      .optionList_left_text {
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        background: #fff;
+        border: 1px solid #c5c5c5;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 25px;
+        color: #49bba2;
+        margin-left: -12px;
+        margin-top: -60px;
+      }
+    }
+    .optionList_right {
+      margin-left: 16px;
+      .el-form-item {
+        padding-top: 0;
+        .optionList_right_text {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+        }
+        .optionList_right_del {
+          width: 12px;
+          height: 12px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>

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

 <template>
   <div class="main_content">
-    <CardList class="box-card" v-for="(item, index) in cardList" :key="index" :cardList="item" />
+    <CardList class="box-card" v-for="(item, index) in stepOneList" :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 stepONeStep from '@/utils/stepOne'
+// import { cacheReport } from '../../api'
 export default {
   components: {
     CardList
   },
-  data() {
-    return {
-      cardList: []
+  props: {
+    activeStep: {
+      type: Number,
+      default: 0
+    },
+    stepOneList: {
+      type: Array
     }
   },
-  created() {
-    this.cardList = stepONeStep
+  data() {
+    return {}
+  },
+  methods: {
+    // 下一步
+    handleStepOne() {
+      let flag = true
+      this.stepOneList.forEach(item =>
+        item.form.personAttribute.forEach(it => {
+          console.log(it, '333')
+          if (it.equal === '' || it.personal === '' || it.range === '') {
+            flag = false
+          }
+        })
+      )
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
   }
 }
 </script>
@@ -27,7 +51,19 @@ export default {
   flex-direction: column;
   .box-card {
     min-width: 520px;
-    margin-bottom: 30px;
+  }
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    cursor: pointer;
+    background: #49bba2;
+    margin: 30px auto;
+    cursor: pointer;
   }
 }
 </style>

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

 <template>
-  <div class="main_content">
+  <div>
     <StepTab :tabList="tabList" @tabActive="handleTab">
       <template #plan_title>计划类型</template>
       <template #trigger_title>触发条件</template>
       <template #trigger_con>
         <div v-if="showIndex === 0">
-          在 &nbsp;&nbsp;<el-date-picker
-            v-model="time"
-            type="datetime"
-            placeholder="选择日期时间"
-            default-time="12:00:00"
-          >
-          </el-date-picker
-          >&nbsp;&nbsp;对目标用户进行触达
+          在 &nbsp;&nbsp;
+          <el-date-picker v-model="times" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
+          </el-date-picker>
+          &nbsp;&nbsp;
+          <el-time-picker v-model="times2" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
+          </el-time-picker>
+          &nbsp;&nbsp;对目标用户进行触达
         </div>
         <div v-if="showIndex === 1">
-          <StepTodoList />
+          <StepTodoList :form="stepTwoList" />
         </div>
       </template>
     </StepTab>
+    <div class="main_content_btn">
+      <!-- <div class="step_prev step_btn" @click="handlePrev">上一步</div>
+      <div class="step_next step_btn" @click="handleNext">下一步</div> -->
+    </div>
   </div>
 </template>
 <script>
@@ -26,11 +29,25 @@ import StepTab from '@/components/base/StepTab.vue'
 import StepTodoList from './StepTodoList.vue'
 export default {
   components: { StepTab, StepTodoList },
+  props: {
+    stepTwoList: {
+      type: Array
+    },
+    time: {
+      type: String
+    },
+    time2: {
+      type: String
+    }
+  },
 
   data() {
     return {
+      times: '',
+      times2: '',
+      caseId: '',
       showIndex: 0,
-      time: '',
+      // tab切换列表
       tabList: [
         {
           icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
@@ -45,10 +62,63 @@ export default {
       ]
     }
   },
+  mounted() {
+    // console.log(this.time, 'time')
+    this.times = this.time
+    this.times2 = this.time2
+    // console.log(this.stepTwoList, '9999')
+  },
+
   methods: {
     handleTab(index) {
       this.showIndex = index
+    },
+    handlePrev() {
+      this.$parent.$parent.handlePrev()
+    },
+    handleStepTwo() {
+      console.log(this.times)
+      this.$emit('getTime', this.times, this.times2)
+      // this.$emit('getTime', this.times)
+      let flag = true
+      this.stepTwoList[0].form.triggerList.forEach(item => {
+        if (item.triggerValue === '' || this.times === '' || this.times2 === '') {
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+.main_content_btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 36px;
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    opacity: 1;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  .step_prev {
+    border: 1px solid #cacaca;
+    background: #fff;
+    color: #ffffff;
+    color: #6d6d71;
+  }
+  .step_next {
+    background: #49bba2;
+  }
+}
+</style>

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

@@ -6,13 +6,13 @@
     </div>
     <div class="main_con_optionList">
       <div class="optionList_left">
-        <div v-for="item in form.triggerList.length - 1" :key="item">
+        <div v-for="item in form[0].form.triggerList.length - 1" :key="item">
           <div class="optionList_left_line"></div>
           <div class="optionList_left_text">且</div>
         </div>
       </div>
       <div class="optionList_right">
-        <el-form :inline="true" :model="form">
+        <el-form :inline="true" :model="form[0].form">
           <div v-for="(item, indexB) in list" :key="indexB">
             <el-form-item>
               <span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
@@ -44,33 +44,23 @@
 
 <script>
 export default {
-  data() {
-    return {
+  props: {
     form: {
-        triggerList: [
-          {
-            triggerValue: '',
-            list: [
-              { value: '0', label: '启动APP' },
-              { value: '1', label: '用户登录' },
-              { value: '2', label: '购买基金商品' },
-              { value: '3', label: '购买理财产品' },
-              { value: '4', label: '购买保险产品' },
-              { value: '5', label: '浏览基金产品' },
-              { value: '6', label: '浏览理财产品' },
-              { value: '7', label: '浏览保险产品' },
-              { value: '8', label: '关闭APP' }
-            ]
-          }
-        ]
-      }
+      type: Array,
+      default: () => {}
     }
   },
+  data() {
+    return {}
+  },
+  mounted() {
+    console.log(this.form, '----')
+  },
   computed: {
     list() {
-      return this.form.triggerList.map(item => {
+      return this.form[0].form.triggerList.map(item => {
         item.list = item.list.map(i => {
-          i.disabled = !!this.form.triggerList.find(item => item.triggerValue === i.value)
+          i.disabled = !!this.form[0].form.triggerList.find(item => item.triggerValue === i.value)
           return i
         })
         return item
@@ -80,19 +70,20 @@ export default {
   methods: {
     handleAdd() {
       console.log('000')
-      if (this.form.triggerList.length < this.form.triggerList[0].list.length) {
-        const item = Object.assign({}, this.form.triggerList[0])
+      if (this.form[0].form.triggerList.length < this.form[0].form.triggerList[0].list.length) {
+        const item = Object.assign({}, this.form[0].form.triggerList[0])
         item.triggerValue = ''
 
         // eslint-disable-next-line vue/no-mutating-props
-        this.form.triggerList.push(item)
+        this.form[0].form.triggerList.push(item)
       } else {
         this.$message.warning('添加项不能超过下拉选项个数')
       }
     },
     handleDelete(item, indexB) {
-      if (this.form.triggerList.length > 1) {
-        this.form.triggerList.splice(indexB, 1)
+      if (this.form[0].form.triggerList.length > 1) {
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.splice(indexB, 1)
       } else {
         this.$message.warning('默认至少有一条数据')
       }

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> -->
+  </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: {
+      type: Array
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 下一步
+    handleStepOne() {
+      let flag = true
+      this.stepOneList.forEach(item =>
+        item.form.personAttribute.forEach(it => {
+          console.log(it, '333')
+          if (it.equal === '' || it.personal === '' || it.range === '') {
+            flag = false
+          }
+        })
+      )
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main_content {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  .box-card {
+    min-width: 520px;
+  }
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    cursor: pointer;
+    background: #49bba2;
+    margin: 30px auto;
+    cursor: pointer;
+  }
+}
+</style>

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

+<template>
+  <div>
+    <StepTab :tabList="tabList" @tabActive="handleTab">
+      <template #plan_title>计划类型</template>
+      <template #trigger_title>触发条件</template>
+      <template #trigger_con>
+        <div v-if="showIndex === 0">
+          在 &nbsp;&nbsp;
+          <el-date-picker v-model="times" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
+          </el-date-picker>
+          &nbsp;&nbsp;
+          <el-time-picker v-model="times2" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
+          </el-time-picker>
+          &nbsp;&nbsp;对目标用户进行触达
+        </div>
+        <div v-if="showIndex === 1">
+          <SmsTodoList :form="stepTwoList" />
+        </div>
+      </template>
+    </StepTab>
+    <div class="main_content_btn">
+      <!-- <div class="step_prev step_btn" @click="handlePrev">上一步</div>
+      <div class="step_next step_btn" @click="handleNext">下一步</div> -->
+    </div>
+  </div>
+</template>
+<script>
+import StepTab from '@/components/base/StepTab.vue'
+import SmsTodoList from './SmsTodoList.vue'
+export default {
+  components: { StepTab, SmsTodoList },
+  props: {
+    stepTwoList: {
+      type: Array
+    },
+    time: {
+      type: String
+    },
+    time2: {
+      type: String
+    }
+  },
+
+  data() {
+    return {
+      times: '',
+      times2: '',
+      caseId: '',
+      showIndex: 0,
+      // tab切换列表
+      tabList: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
+          tabName: '单次触发'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
+          tabName: '条件触发'
+        }
+      ]
+    }
+  },
+  mounted() {
+    // console.log(this.time, 'time')
+    this.times = this.time
+    this.times2 = this.time2
+    // console.log(this.stepTwoList, '9999')
+  },
+
+  methods: {
+    handleTab(index) {
+      this.showIndex = index
+    },
+    handlePrev() {
+      this.$parent.$parent.handlePrev()
+    },
+    handleStepTwo() {
+      console.log(this.times)
+      this.$emit('getTime', this.times, this.times2)
+      // this.$emit('getTime', this.times)
+      let flag = true
+      this.stepTwoList[0].form.triggerList.forEach(item => {
+        if (item.triggerValue === '' || this.times === '' || this.times2 === '') {
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main_content_btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 36px;
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    opacity: 1;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  .step_prev {
+    border: 1px solid #cacaca;
+    background: #fff;
+    color: #ffffff;
+    color: #6d6d71;
+  }
+  .step_next {
+    background: #49bba2;
+  }
+}
+</style>

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

+<template>
+  <div class="main_con">
+    <div class="main_con_add" @click="handleAdd">
+      <img src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png" alt="" />
+      添加
+    </div>
+    <div class="main_con_optionList">
+      <div class="optionList_left">
+        <div v-for="item in form[0].form.triggerList.length - 1" :key="item">
+          <div class="optionList_left_line"></div>
+          <div class="optionList_left_text">且</div>
+        </div>
+      </div>
+      <div class="optionList_right">
+        <el-form :inline="true" :model="form[0].form">
+          <div v-for="(item, indexB) in list" :key="indexB">
+            <el-form-item>
+              <span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <el-select v-model="item.triggerValue">
+                <el-option
+                  v-for="it in item.list"
+                  :key="it.value"
+                  :label="it.label"
+                  :value="it.value"
+                  :disabled="it.disabled"
+                >
+                </el-option>
+              </el-select>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <span class="optionList_right_text">对目标用户进行触达</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            </el-form-item>
+            <el-form-item>
+              <img
+                src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
+                @click="handleDelete(item, indexB)"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    form: {
+      type: Array,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    console.log(this.form, '----')
+  },
+  computed: {
+    list() {
+      return this.form[0].form.triggerList.map(item => {
+        item.list = item.list.map(i => {
+          i.disabled = !!this.form[0].form.triggerList.find(item => item.triggerValue === i.value)
+          return i
+        })
+        return item
+      })
+    }
+  },
+  methods: {
+    handleAdd() {
+      console.log('000')
+      if (this.form[0].form.triggerList.length < this.form[0].form.triggerList[0].list.length) {
+        const item = Object.assign({}, this.form[0].form.triggerList[0])
+        item.triggerValue = ''
+
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.push(item)
+      } else {
+        this.$message.warning('添加项不能超过下拉选项个数')
+      }
+    },
+    handleDelete(item, indexB) {
+      if (this.form[0].form.triggerList.length > 1) {
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.splice(indexB, 1)
+      } else {
+        this.$message.warning('默认至少有一条数据')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_con {
+  display: flex;
+  flex-direction: column;
+  .main_con_add {
+    align-self: flex-end;
+    padding: 0 130px 30px 0;
+  }
+  .main_con_optionList {
+    display: flex;
+    .optionList_left {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      .optionList_left_line {
+        width: 0px;
+        height: 85px;
+        border: 1px solid #c5c5c5;
+        opacity: 1;
+      }
+      .optionList_left_text {
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        background: #fff;
+        border: 1px solid #c5c5c5;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 25px;
+        color: #49bba2;
+        margin-left: -12px;
+        margin-top: -60px;
+      }
+    }
+    .optionList_right {
+      margin-left: 16px;
+      .el-form-item {
+        padding-top: 0;
+        .optionList_right_text {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+        }
+        .optionList_right_del {
+          width: 12px;
+          height: 12px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>

src/modules/market-tools/components/weChat/ChatStepOne.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> -->
+  </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: {
+      type: Array
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    // 下一步
+    handleStepOne() {
+      let flag = true
+      this.stepOneList.forEach(item =>
+        item.form.personAttribute.forEach(it => {
+          console.log(it, '333')
+          if (it.equal === '' || it.personal === '' || it.range === '') {
+            flag = false
+          }
+        })
+      )
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main_content {
+  display: flex;
+  align-items: flex-start;
+  flex-direction: column;
+  .box-card {
+    min-width: 520px;
+  }
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    cursor: pointer;
+    background: #49bba2;
+    margin: 30px auto;
+    cursor: pointer;
+  }
+}
+</style>

src/modules/market-tools/components/weChat/ChatStepTwo.vue

+<template>
+  <div>
+    <StepTab :tabList="tabList" @tabActive="handleTab">
+      <template #plan_title>计划类型</template>
+      <template #trigger_title>触发条件</template>
+      <template #trigger_con>
+        <div v-if="showIndex === 0">
+          在 &nbsp;&nbsp;
+          <el-date-picker v-model="times" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
+          </el-date-picker>
+          &nbsp;&nbsp;
+          <el-time-picker v-model="times2" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
+          </el-time-picker>
+          &nbsp;&nbsp;对目标用户进行触达
+        </div>
+        <div v-if="showIndex === 1">
+          <ChatTodoList :form="stepTwoList" />
+        </div>
+      </template>
+    </StepTab>
+    <div class="main_content_btn">
+      <!-- <div class="step_prev step_btn" @click="handlePrev">上一步</div>
+      <div class="step_next step_btn" @click="handleNext">下一步</div> -->
+    </div>
+  </div>
+</template>
+<script>
+import StepTab from '@/components/base/StepTab.vue'
+import ChatTodoList from './ChatTodoList.vue'
+export default {
+  components: { StepTab, ChatTodoList },
+  props: {
+    stepTwoList: {
+      type: Array
+    },
+    time: {
+      type: String
+    },
+    time2: {
+      type: String
+    }
+  },
+
+  data() {
+    return {
+      times: '',
+      times2: '',
+      caseId: '',
+      showIndex: 0,
+      // tab切换列表
+      tabList: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
+          tabName: '单次触发'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
+          tabName: '条件触发'
+        }
+      ]
+    }
+  },
+  mounted() {
+    // console.log(this.time, 'time')
+    this.times = this.time
+    this.times2 = this.time2
+    // console.log(this.stepTwoList, '9999')
+  },
+
+  methods: {
+    handleTab(index) {
+      this.showIndex = index
+    },
+    handlePrev() {
+      this.$parent.$parent.handlePrev()
+    },
+    handleStepTwo() {
+      console.log(this.times)
+      this.$emit('getTime', this.times, this.times2)
+      // this.$emit('getTime', this.times)
+      let flag = true
+      this.stepTwoList[0].form.triggerList.forEach(item => {
+        if (item.triggerValue === '' || this.times === '' || this.times2 === '') {
+          flag = false
+        }
+      })
+      if (!flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+      }
+      return flag
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.main_content_btn {
+  display: flex;
+  justify-content: center;
+  margin-top: 36px;
+  .step_btn {
+    width: 119px;
+    height: 32px;
+    opacity: 1;
+    border-radius: 16px;
+    font-size: 18px;
+    line-height: 32px;
+    color: #ffffff;
+    text-align: center;
+    margin-right: 10px;
+    cursor: pointer;
+  }
+  .step_prev {
+    border: 1px solid #cacaca;
+    background: #fff;
+    color: #ffffff;
+    color: #6d6d71;
+  }
+  .step_next {
+    background: #49bba2;
+  }
+}
+</style>

src/modules/market-tools/components/weChat/ChatTodoList.vue

+<template>
+  <div class="main_con">
+    <div class="main_con_add" @click="handleAdd">
+      <img src="https://webapp-pub.ezijing.com/x-training-new/bg_add.png" alt="" />
+      添加
+    </div>
+    <div class="main_con_optionList">
+      <div class="optionList_left">
+        <div v-for="item in form[0].form.triggerList.length - 1" :key="item">
+          <div class="optionList_left_line"></div>
+          <div class="optionList_left_text">且</div>
+        </div>
+      </div>
+      <div class="optionList_right">
+        <el-form :inline="true" :model="form[0].form">
+          <div v-for="(item, indexB) in list" :key="indexB">
+            <el-form-item>
+              <span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <el-select v-model="item.triggerValue">
+                <el-option
+                  v-for="it in item.list"
+                  :key="it.value"
+                  :label="it.label"
+                  :value="it.value"
+                  :disabled="it.disabled"
+                >
+                </el-option>
+              </el-select>
+              &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+              <span class="optionList_right_text">对目标用户进行触达</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+            </el-form-item>
+            <el-form-item>
+              <img
+                src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
+                @click="handleDelete(item, indexB)"
+              />
+            </el-form-item>
+          </div>
+        </el-form>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    form: {
+      type: Array,
+      default: () => {}
+    }
+  },
+  data() {
+    return {}
+  },
+  mounted() {
+    console.log(this.form, '----')
+  },
+  computed: {
+    list() {
+      return this.form[0].form.triggerList.map(item => {
+        item.list = item.list.map(i => {
+          i.disabled = !!this.form[0].form.triggerList.find(item => item.triggerValue === i.value)
+          return i
+        })
+        return item
+      })
+    }
+  },
+  methods: {
+    handleAdd() {
+      console.log('000')
+      if (this.form[0].form.triggerList.length < this.form[0].form.triggerList[0].list.length) {
+        const item = Object.assign({}, this.form[0].form.triggerList[0])
+        item.triggerValue = ''
+
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.push(item)
+      } else {
+        this.$message.warning('添加项不能超过下拉选项个数')
+      }
+    },
+    handleDelete(item, indexB) {
+      if (this.form[0].form.triggerList.length > 1) {
+        // eslint-disable-next-line vue/no-mutating-props
+        this.form[0].form.triggerList.splice(indexB, 1)
+      } else {
+        this.$message.warning('默认至少有一条数据')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_con {
+  display: flex;
+  flex-direction: column;
+  .main_con_add {
+    align-self: flex-end;
+    padding: 0 130px 30px 0;
+  }
+  .main_con_optionList {
+    display: flex;
+    .optionList_left {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      .optionList_left_line {
+        width: 0px;
+        height: 85px;
+        border: 1px solid #c5c5c5;
+        opacity: 1;
+      }
+      .optionList_left_text {
+        border-radius: 50%;
+        width: 25px;
+        height: 25px;
+        background: #fff;
+        border: 1px solid #c5c5c5;
+        text-align: center;
+        font-size: 14px;
+        font-weight: 400;
+        line-height: 25px;
+        color: #49bba2;
+        margin-left: -12px;
+        margin-top: -60px;
+      }
+    }
+    .optionList_right {
+      margin-left: 16px;
+      .el-form-item {
+        padding-top: 0;
+        .optionList_right_text {
+          font-size: 16px;
+          font-weight: 400;
+          color: #333333;
+        }
+        .optionList_right_del {
+          width: 12px;
+          height: 12px;
+          opacity: 1;
+        }
+      }
+    }
+  }
+}
+</style>

src/modules/market-tools/index.js

@@ -11,6 +11,22 @@ const routes = [
       {
         path: '/market-tools/mail',
         component: () => import('./views/Mail.vue')
+      },
+      {
+        path: '/market-tools/app',
+        component: () => import('./views/App.vue')
+      },
+      {
+        path: '/market-tools/tool',
+        component: () => import('./views/Tool.vue')
+      },
+      {
+        path: '/market-tools/sms',
+        component: () => import('./views/MobileSms.vue')
+      },
+      {
+        path: '/market-tools/weChat',
+        component: () => import('./views/WeChat.vue')
       }
     ]
   }

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

+<template>
+  <div>
+    <ToolCard class="main_content">
+      <Step :activeStep="activeStep" class="pt50-pl60" />
+      <div>
+        <AppStepOne
+          v-if="activeStep === 0"
+          class="pt-50"
+          :activeStep="activeStep"
+          :stepOneList="stepOneList"
+          ref="mailStepOne"
+        />
+        <AppStepTwo
+          v-if="activeStep === 1"
+          class="pt-50"
+          :stepTwoList="stepTwoList"
+          :time="time"
+          :time2="time2"
+          @getTime="getTime"
+          ref="mailStepTwo"
+        />
+        <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="handlePlan" v-if="activeStep === 3">执行营销计划</div>
+        </div>
+      </div>
+    </ToolCard>
+  </div>
+</template>
+
+<script>
+import stepOne from '@/utils/stepOne'
+import stepTwo from '@/utils/stepTwo'
+import { cacheReport, getReportDetail, checkRecord } from '../api'
+import ToolCard from '@/components/base/ToolCard.vue'
+import AppStepOne from '../components/app/AppStepOne.vue'
+import Step from '@/components/base/Step.vue'
+import AppStepTwo from '../components/app/AppStepTwo.vue'
+export default {
+  components: {
+    ToolCard,
+    AppStepOne,
+    Step,
+    AppStepTwo
+  },
+  data() {
+    return {
+      activeStep: 0,
+      stepOneList: [],
+      stepTwoList: [],
+      time: '',
+      caseId: '',
+      times: '',
+      times2: '',
+      time2: ''
+    }
+  },
+
+  methods: {
+    // 获取第二步时间
+    getTime(val, val2) {
+      this.time = val
+      this.time2 = val2
+    },
+    // 上一步
+    handlePrev() {
+      if (this.$refs.mailStepTwo.handleStepTwo()) {
+        const reports = {
+          activeStep: this.activeStep,
+          type: 3,
+          commit_report: [
+            { stepOneList: this.stepOneList },
+            { form: this.stepTwoList },
+            { time: this.time, time2: this.time2 }
+          ]
+        }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          this.caseId = res.data.id
+          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)
+        }
+      }
+    },
+    handleStep(val) {
+      const reports = {
+        activeStep: parseInt(val),
+        type: 3,
+        commit_report: [
+          { stepOneList: this.stepOneList },
+          { form: this.stepTwoList },
+          { time: this.times, time2: this.times2 }
+        ]
+      }
+      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+        this.caseId = res.data.id
+        this.activeStep++
+      })
+    },
+    // 预览
+    handlePreview() {
+      this.activeStep++
+    },
+    handlePlan() {},
+    // 获取步骤信息回显
+    getReportDetail(id) {
+      getReportDetail(id).then(res => {
+        if (res.data.detail.answer.type === 3) {
+          this.activeStep = res.data.detail.answer.activeStep
+          this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
+          this.time = res.data.detail.answer.commit_report[2].time || ''
+          this.time2 = res.data.detail.answer.commit_report[2].time2 || ''
+          this.stepTwoList = res.data.detail.answer.commit_report[1].form
+        }
+      })
+    },
+    // 验证是否有未完成的答题记录
+    checkRecord() {
+      checkRecord(this.$store.state.case.id, 2).then(res => {
+        console.log(res, 'res000')
+        if (res.data.status === true) {
+          const answerList = res.data.items.filter(item => item.type === 3)
+          if (res.data.items.length && answerList.length) {
+            this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
+            this.stepTwoList = answerList[0].answer.commit_report[1].form
+            this.time = answerList[0].answer.commit_report[2].time || ''
+            this.time2 = answerList[0].answer.commit_report[2].time2 || ''
+          } else {
+            this.initStepList()
+          }
+        } else {
+          this.initStepList()
+        }
+      })
+    },
+    // 初始化步骤列表
+
+    initStepList() {
+      this.stepOneList = stepOne
+      this.stepTwoList = stepTwo
+      this.time = this.times
+      this.time2 = this.times2
+    }
+  },
+  mounted() {
+    console.log(stepOne, 'stepOne2222')
+    if (this.$route.query.type) {
+      this.getReportDetail(this.$route.query.id)
+    } else {
+      this.checkRecord()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_content {
+  display: flex;
+  // padding: 42px 39px 52px 63px;
+  // overflow: scroll;
+  .main_content_btn {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 70px;
+    .step_btn {
+      width: 119px;
+      height: 32px;
+      opacity: 1;
+      border-radius: 16px;
+      font-size: 18px;
+      line-height: 32px;
+      color: #ffffff;
+      text-align: center;
+      margin-right: 10px;
+      cursor: pointer;
+      // margin-top: 200px;
+    }
+    .step_prev {
+      border: 1px solid #cacaca;
+      background: #fff;
+      color: #ffffff;
+      color: #6d6d71;
+    }
+    .step_next {
+      background: #49bba2;
+    }
+    .step_finished {
+      background: #49bba2;
+    }
+  }
+}
+.pt50-pl60 {
+  padding: 50px 0 0 60px;
+}
+.pt-50 {
+  padding-top: 50px;
+}
+</style>

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

@@ -31,7 +31,7 @@
 export default {
   data() {
     return {
-      listIndex: 2,
+      listIndex: 0,
       list: [
         {
           icon: 'https://webapp-pub.ezijing.com/x-training-new/tool_video.png',
@@ -65,6 +65,12 @@ export default {
     handleTool() {
       if (this.listIndex === 1) {
         this.$router.push('/market-tools/mail')
+      } else if (this.listIndex === 2) {
+        this.$router.push('/market-tools/app')
+      } else if (this.listIndex === 3) {
+        this.$router.push('/market-tools/sms')
+      } else if (this.listIndex === 4) {
+        this.$router.push('/market-tools/weChat')
       }
     }
   }
@@ -104,6 +110,7 @@ export default {
           flex-direction: column;
           align-items: center;
           margin: 0 10px 10px 0;
+          cursor: pointer;
 
           &.active {
             border: 1px solid #49bba2;
@@ -128,6 +135,7 @@ export default {
         font-size: 18px;
         line-height: 32px;
         color: #ffffff;
+        cursor: pointer;
       }
     }
   }

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

 <template>
   <div>
     <ToolCard class="main_content">
-      <Step :activeStep="activeStep" class="pt50-pl60"/>
+      <Step :activeStep="activeStep" class="pt50-pl60" />
       <div>
-        <MailStepOne v-if="activeStep === 0" class="pt-50"/>
-        <MailStepTwo v-if="activeStep === 1" class="pt-50"/>
+        <MailStepOne
+          v-if="activeStep === 0"
+          class="pt-50"
+          :activeStep="activeStep"
+          :stepOneList="stepOneList"
+          ref="mailStepOne"
+        />
+        <MailStepTwo
+          v-if="activeStep === 1"
+          class="pt-50"
+          :stepTwoList="stepTwoList"
+          :time="time"
+          :time2="time2"
+          @getTime="getTime"
+          ref="mailStepTwo"
+        />
         <MailStepThree v-if="activeStep === 2"/>
         <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 >= 1 || activeStep < 3">下一步</div>
-          <div class="step_finished step_btn" @click="handlePreview" v-if="activeStep === 3">点击生成预览</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="handlePlan" v-if="activeStep === 3">执行营销计划</div>
         </div>
       </div>
     </ToolCard>
@@ -17,6 +32,9 @@
 </template>
 
 <script>
+import stepOne from '@/utils/stepOne'
+import stepTwo from '@/utils/stepTwo'
+import { cacheReport, getReportDetail, checkRecord } from '../api'
 import ToolCard from '@/components/base/ToolCard.vue'
 import MailStepOne from '../components/mail/MailStepOne.vue'
 import Step from '@/components/base/Step.vue'
@@ -32,20 +50,123 @@ export default {
   },
   data() {
     return {
-      activeStep: 2
+      activeStep: 0,
+      stepOneList: [],
+      stepTwoList: [],
+      time: '',
+      caseId: '',
+      times: '',
+      times2: '',
+      time2: ''
     }
   },
+
   methods: {
+    // 获取第二步时间
+    getTime(val, val2) {
+      this.time = val
+      this.time2 = val2
+    },
     // 上一步
     handlePrev() {
+      if (this.$refs.mailStepTwo.handleStepTwo()) {
+        const reports = {
+          activeStep: this.activeStep,
+          type: 2,
+          commit_report: [
+            { stepOneList: this.stepOneList },
+            { form: this.stepTwoList },
+            { time: this.time, time2: this.time2 }
+          ]
+        }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          this.caseId = res.data.id
           this.activeStep--
+        })
+        console.log(this.stepOneList, 'this.stepOneList')
+      }
     },
     // 下一步
     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)
+        }
+      }
+    },
+    handleStep(val) {
+      const reports = {
+        activeStep: parseInt(val),
+        type: 2,
+        commit_report: [
+          { stepOneList: this.stepOneList },
+          { form: this.stepTwoList },
+          { time: this.times, time2: this.times2 }
+        ]
+      }
+      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+        this.caseId = res.data.id
+        this.activeStep++
+      })
+    },
+    // 预览
+    handlePreview() {
       this.activeStep++
     },
-    // 点击生成预览
-    handlePreview() {}
+    handlePlan() {},
+    // 获取步骤信息回显
+    getReportDetail(id) {
+      getReportDetail(id).then(res => {
+        if (res.data.detail.answer.type === 2) {
+          this.activeStep = res.data.detail.answer.activeStep
+          this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
+          this.time = res.data.detail.answer.commit_report[2].time || ''
+          this.time2 = res.data.detail.answer.commit_report[2].time2 || ''
+          this.stepTwoList = res.data.detail.answer.commit_report[1].form
+          console.log(this.times, '222')
+          console.log(this.activeStep, 'activeStep', this.stepOneList, '---', '123')
+        }
+      })
+    },
+    // 验证是否有未完成的答题记录
+    checkRecord() {
+      checkRecord(this.$store.state.case.id, 2).then(res => {
+        console.log(res, 'res000')
+        if (res.data.status === true) {
+          const answerList = res.data.items.filter(item => item.type === 2)
+          if (res.data.items.length && answerList.length) {
+            this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
+            this.stepTwoList = answerList[0].answer.commit_report[1].form
+            this.time = answerList[0].answer.commit_report[2].time || ''
+            this.time2 = answerList[0].answer.commit_report[2].time2 || ''
+          } else {
+            this.initStepList()
+          }
+        } else {
+          this.initStepList()
+        }
+      })
+    },
+    // 初始化步骤列表
+
+    initStepList() {
+      this.stepOneList = stepOne
+      this.stepTwoList = stepTwo
+      this.time = this.times
+      this.time2 = this.times2
+    }
+  },
+  mounted() {
+    if (this.$route.query.type) {
+      this.getReportDetail(this.$route.query.id)
+    } else {
+      this.checkRecord()
+    }
   }
 }
 </script>
@@ -58,7 +179,7 @@ export default {
   .main_content_btn {
     display: flex;
     justify-content: center;
-    padding-bottom:70px;
+    padding-bottom: 70px;
     .step_btn {
       width: 119px;
       height: 32px;
@@ -69,6 +190,7 @@ export default {
       color: #ffffff;
       text-align: center;
       margin-right: 10px;
+      cursor: pointer;
       // margin-top: 200px;
     }
     .step_prev {
@@ -85,10 +207,10 @@ export default {
     }
   }
 }
-.pt50-pl60{
+.pt50-pl60 {
   padding: 50px 0 0 60px;
 }
-.pt-50{
+.pt-50 {
   padding-top: 50px;
 }
 </style>

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

+<template>
+  <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"
+          :stepTwoList="stepTwoList"
+          :time="time"
+          :time2="time2"
+          @getTime="getTime"
+          ref="mailStepTwo"
+        />
+        <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="handlePlan" v-if="activeStep === 3">执行营销计划</div>
+        </div>
+      </div>
+    </ToolCard>
+  </div>
+</template>
+
+<script>
+import stepOne from '@/utils/stepOne'
+import stepTwo from '@/utils/stepTwo'
+import { cacheReport, getReportDetail, checkRecord } 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'
+export default {
+  components: {
+    ToolCard,
+    SmsStepOne,
+    Step,
+    SmsStepTwo
+  },
+  data() {
+    return {
+      activeStep: 0,
+      stepOneList: [],
+      stepTwoList: [],
+      time: '',
+      caseId: '',
+      times: '',
+      times2: '',
+      time2: ''
+    }
+  },
+
+  methods: {
+    // 获取第二步时间
+    getTime(val, val2) {
+      this.time = val
+      this.time2 = val2
+    },
+    // 上一步
+    handlePrev() {
+      if (this.$refs.mailStepTwo.handleStepTwo()) {
+        const reports = {
+          activeStep: this.activeStep,
+          type: 4,
+          commit_report: [
+            { stepOneList: this.stepOneList },
+            { form: this.stepTwoList },
+            { time: this.time, time2: this.time2 }
+          ]
+        }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          this.caseId = res.data.id
+          this.activeStep--
+        })
+        console.log(this.stepOneList, 'this.stepOneList')
+      }
+    },
+    // 下一步
+    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)
+        }
+      }
+    },
+    // 保存步骤
+    handleStep(val) {
+      const reports = {
+        activeStep: parseInt(val),
+        type: 4,
+        commit_report: [
+          { stepOneList: this.stepOneList },
+          { form: this.stepTwoList },
+          { time: this.times, time2: this.times2 }
+        ]
+      }
+      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+        this.caseId = res.data.id
+        this.activeStep++
+      })
+    },
+    // 预览
+    handlePreview() {
+      this.activeStep++
+    },
+    handlePlan() {},
+    // 获取步骤信息回显
+    getReportDetail(id) {
+      getReportDetail(id).then(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.time = res.data.detail.answer.commit_report[2].time || ''
+          this.time2 = res.data.detail.answer.commit_report[2].time2 || ''
+          this.stepTwoList = res.data.detail.answer.commit_report[1].form
+          console.log(this.times, '222')
+          console.log(this.activeStep, 'activeStep', this.stepOneList, '---', '123')
+        }
+      })
+    },
+    // 验证是否有未完成的答题记录
+    checkRecord() {
+      checkRecord(this.$store.state.case.id, 2).then(res => {
+        console.log(res, 'res000')
+        if (res.data.status === true) {
+          const answerList = res.data.items.filter(item => item.type === 4)
+          console.log(answerList, 'answerList')
+          if (res.data.items.length && answerList.length) {
+            this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
+            this.stepTwoList = answerList[0].answer.commit_report[1].form
+            this.time = answerList[0].answer.commit_report[2].time || ''
+            this.time2 = answerList[0].answer.commit_report[2].time2 || ''
+          } else {
+            this.initStepList()
+          }
+        } else {
+          this.initStepList()
+        }
+      })
+    },
+    // 初始化步骤列表
+    initStepList() {
+      this.stepOneList = stepOne
+      this.stepTwoList = stepTwo
+      this.time = this.times
+      this.time2 = this.times2
+    }
+  },
+  mounted() {
+    if (this.$route.query.type) {
+      this.getReportDetail(this.$route.query.id)
+    } else {
+      this.checkRecord()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_content {
+  display: flex;
+  // padding: 42px 39px 52px 63px;
+  // overflow: scroll;
+  .main_content_btn {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 70px;
+    .step_btn {
+      width: 119px;
+      height: 32px;
+      opacity: 1;
+      border-radius: 16px;
+      font-size: 18px;
+      line-height: 32px;
+      color: #ffffff;
+      text-align: center;
+      margin-right: 10px;
+      cursor: pointer;
+      // margin-top: 200px;
+    }
+    .step_prev {
+      border: 1px solid #cacaca;
+      background: #fff;
+      color: #ffffff;
+      color: #6d6d71;
+    }
+    .step_next {
+      background: #49bba2;
+    }
+    .step_finished {
+      background: #49bba2;
+    }
+  }
+}
+.pt50-pl60 {
+  padding: 50px 0 0 60px;
+}
+.pt-50 {
+  padding-top: 50px;
+}
+</style>

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

+<template>
+  <div class="tool-box">
+    <ul class="left-nav">
+      <li
+        @click="selectList(index)"
+        v-for="(item, index) in list"
+        :key="index"
+        :class="listIndex === index ? 'active' : ''"
+      >
+        <div class="icon-box">
+          <img :src="listIndex === index ? item.iconActive : item.icon" />
+        </div>
+        <div class="text">{{ item.text }}</div>
+      </li>
+    </ul>
+    <div class="right-content">
+      <dou-yin></dou-yin>
+    </div>
+  </div>
+</template>
+
+<script>
+// import Email from '../components/Email.vue'
+import DouYin from '../components/DouYin.vue'
+export default {
+  components: { DouYin },
+  data() {
+    return {
+      listIndex: 9,
+      list: [
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
+          text: '搜索引擎优化'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon2.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon1.png',
+          text: '搜索引擎营销'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon3.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon-a3.png',
+          text: '视频营销'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon4.png',
+          text: '社交媒体营销'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon5.png',
+          text: '智能推荐'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon6.png',
+          text: '数字化广告'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon7.png',
+          text: '电子邮件营销'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon8.png',
+          text: 'SOLOMO'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon9.png',
+          text: '移动营销'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon10.png',
+          text: 'APP营销'
+        },
+        {
+          icon: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
+          iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tool-icon11.png',
+          text: '全渠道营销'
+        }
+      ]
+    }
+  },
+  methods: {
+    selectList(n) {
+      if (n === 2) return
+      this.$message('暂未开通')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tool-box {
+  display: flex;
+  padding: 25px 30px 30px;
+  .left-nav {
+    width: 264px;
+    height: 684px;
+    background: url(https://webapp-pub.ezijing.com/x-training-new/nav-bg.png);
+    background-size: 100% 100%;
+    padding-top: 18px;
+    box-sizing: border-box;
+    li {
+      width: 220px;
+      height: 58px;
+      display: flex;
+      align-items: center;
+      margin: 0 auto;
+      cursor: pointer;
+      &.active {
+        background: #68b8a4;
+        .text {
+          color: #fff;
+        }
+      }
+      .icon-box {
+        width: 50px;
+        margin-left: 40px;
+      }
+      .text {
+        font-size: 14px;
+        color: #666666;
+      }
+    }
+  }
+  .right-content {
+    flex: 1;
+    background: #fff;
+    margin-left: 30px;
+    padding: 30px;
+    box-sizing: border-box;
+  }
+}
+</style>

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

+<template>
+  <div>
+    <ToolCard class="main_content">
+      <Step :activeStep="activeStep" class="pt50-pl60" />
+      <div>
+        <ChatStepOne
+          v-if="activeStep === 0"
+          class="pt-50"
+          :activeStep="activeStep"
+          :stepOneList="stepOneList"
+          ref="mailStepOne"
+        />
+        <ChatStepTwo
+          v-if="activeStep === 1"
+          class="pt-50"
+          :stepTwoList="stepTwoList"
+          :time="time"
+          :time2="time2"
+          @getTime="getTime"
+          ref="mailStepTwo"
+        />
+        <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="handlePlan" v-if="activeStep === 3">执行营销计划</div>
+        </div>
+      </div>
+    </ToolCard>
+  </div>
+</template>
+
+<script>
+import stepOne from '@/utils/stepOne'
+import stepTwo from '@/utils/stepTwo'
+import { cacheReport, getReportDetail, checkRecord } from '../api'
+import ToolCard from '@/components/base/ToolCard.vue'
+import ChatStepOne from '../components/weChat/ChatStepOne.vue'
+import Step from '@/components/base/Step.vue'
+import ChatStepTwo from '../components/weChat/ChatStepTwo.vue'
+export default {
+  components: {
+    ToolCard,
+    ChatStepOne,
+    Step,
+    ChatStepTwo
+  },
+  data() {
+    return {
+      activeStep: 0,
+      stepOneList: [],
+      stepTwoList: [],
+      time: '',
+      caseId: '',
+      times: '',
+      times2: '',
+      time2: ''
+    }
+  },
+
+  methods: {
+    // 获取第二步时间
+    getTime(val, val2) {
+      this.time = val
+      this.time2 = val2
+    },
+    // 上一步
+    handlePrev() {
+      if (this.$refs.mailStepTwo.handleStepTwo()) {
+        const reports = {
+          activeStep: this.activeStep,
+          type: 5,
+          commit_report: [
+            { stepOneList: this.stepOneList },
+            { form: this.stepTwoList },
+            { time: this.time, time2: this.time2 }
+          ]
+        }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          this.caseId = res.data.id
+          this.activeStep--
+        })
+        console.log(this.stepOneList, 'this.stepOneList')
+      }
+    },
+    // 下一步
+    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)
+        }
+      }
+    },
+    handleStep(val) {
+      const reports = {
+        activeStep: parseInt(val),
+        type: 5,
+        commit_report: [
+          { stepOneList: this.stepOneList },
+          { form: this.stepTwoList },
+          { time: this.times, time2: this.times2 }
+        ]
+      }
+      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+        this.caseId = res.data.id
+        this.activeStep++
+      })
+    },
+    // 预览
+    handlePreview() {
+      this.activeStep++
+    },
+    handlePlan() {},
+    // 获取步骤信息回显
+    getReportDetail(id) {
+      getReportDetail(id).then(res => {
+        if (res.data.detail.answer.type === 5) {
+          this.activeStep = res.data.detail.answer.activeStep
+          this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
+          this.time = res.data.detail.answer.commit_report[2].time || ''
+          this.time2 = res.data.detail.answer.commit_report[2].time2 || ''
+          this.stepTwoList = res.data.detail.answer.commit_report[1].form
+          console.log(this.times, '222')
+          console.log(this.activeStep, 'activeStep', this.stepOneList, '---', '123')
+        }
+      })
+    },
+    // 验证是否有未完成的答题记录
+    checkRecord() {
+      checkRecord(this.$store.state.case.id, 2).then(res => {
+        console.log(res, 'res000')
+        if (res.data.status === true) {
+          const answerList = res.data.items.filter(item => item.type === 5)
+          if (res.data.items.length && answerList.length) {
+            this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
+            this.stepTwoList = answerList[0].answer.commit_report[1].form
+            this.time = answerList[0].answer.commit_report[2].time || ''
+            this.time2 = answerList[0].answer.commit_report[2].time2 || ''
+          } else {
+            this.initStepList()
+          }
+        } else {
+          this.initStepList()
+        }
+      })
+    },
+    // 初始化步骤列表
+
+    initStepList() {
+      this.stepOneList = stepOne
+      this.stepTwoList = stepTwo
+      this.time = this.times
+      this.time2 = this.times2
+    }
+  },
+  mounted() {
+    if (this.$route.query.type) {
+      this.getReportDetail(this.$route.query.id)
+    } else {
+      this.checkRecord()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.main_content {
+  display: flex;
+  // padding: 42px 39px 52px 63px;
+  // overflow: scroll;
+  .main_content_btn {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 70px;
+    .step_btn {
+      width: 119px;
+      height: 32px;
+      opacity: 1;
+      border-radius: 16px;
+      font-size: 18px;
+      line-height: 32px;
+      color: #ffffff;
+      text-align: center;
+      margin-right: 10px;
+      cursor: pointer;
+      // margin-top: 200px;
+    }
+    .step_prev {
+      border: 1px solid #cacaca;
+      background: #fff;
+      color: #ffffff;
+      color: #6d6d71;
+    }
+    .step_next {
+      background: #49bba2;
+    }
+    .step_finished {
+      background: #49bba2;
+    }
+  }
+}
+.pt50-pl60 {
+  padding: 50px 0 0 60px;
+}
+.pt-50 {
+  padding-top: 50px;
+}
+</style>

src/modules/works-show/views/List.vue

@@ -2,63 +2,99 @@
   <div class="history">
     <el-tabs v-model="tabActive" type="card" @tab-click="handleTabClick">
       <el-tab-pane label="产品分析报告" name="1">
-        <el-table :data="prod.data" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
+        <el-table
+          :data="prod.data"
+          style="width: 100%"
+          :header-row-style="{ background: '#ededed', color: '#4d4d4d' }"
+          :header-cell-style="{ background: 'transparent' }"
+        >
           <el-table-column type="index" :index="prod.tableIndex" label="序号" width="50" />
           <el-table-column prop="case_info.name" label="案例名称" min-width="160" />
-          <el-table-column prop="score" label="分数" min-width="120" >
+          <el-table-column prop="score" label="分数" min-width="120">
             <template slot-scope="scope">
-              {{scope.row.is_complete ? parseInt(scope.row.score) : ''}}
+              {{ scope.row.is_complete ? parseInt(scope.row.score) : '' }}
             </template>
           </el-table-column>
           <el-table-column prop="updated_at" label="保存时间" min-width="160" />
           <el-table-column label="操作" width="100">
             <template slot-scope="scope">
-              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.is_complete ? '查看' : '继续完成'}}</el-button>
+              <el-button @click="handleClick(scope.row)" type="text" size="small">{{
+                scope.row.is_complete ? '查看' : '继续完成'
+              }}</el-button>
             </template>
           </el-table-column>
         </el-table>
         <div class="pagination">
-          <el-pagination :current-page.sync="prod.page" layout="prev, pager, next" :total="prod.total" @current-change="fetchProdRecords"></el-pagination>
+          <el-pagination
+            :current-page.sync="prod.page"
+            layout="prev, pager, next"
+            :total="prod.total"
+            @current-change="fetchProdRecords"
+          ></el-pagination>
         </div>
       </el-tab-pane>
       <el-tab-pane label="用户分析报告" name="2">
-        <el-table :data="user.data" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
+        <el-table
+          :data="user.data"
+          style="width: 100%"
+          :header-row-style="{ background: '#ededed', color: '#4d4d4d' }"
+          :header-cell-style="{ background: 'transparent' }"
+        >
           <el-table-column type="index" :index="user.tableIndex" label="序号" width="50" />
           <el-table-column prop="case_info.name" label="案例名称" min-width="160" />
-          <el-table-column prop="score" label="分数" min-width="120" >
+          <el-table-column prop="score" label="分数" min-width="120">
             <template slot-scope="scope">
-              {{scope.row.is_complete ? parseInt(scope.row.score)  : ''}}
+              {{ scope.row.is_complete ? parseInt(scope.row.score) : '' }}
             </template>
           </el-table-column>
           <el-table-column prop="updated_at" label="保存时间" min-width="160" />
           <el-table-column label="操作" width="100">
             <template slot-scope="scope">
-              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.is_complete ? '查看' : '继续完成'}}</el-button>
+              <el-button @click="handleClick(scope.row)" type="text" size="small">{{
+                scope.row.is_complete ? '查看' : '继续完成'
+              }}</el-button>
             </template>
           </el-table-column>
         </el-table>
         <div class="pagination">
-          <el-pagination :current-page.sync="user.page" layout="prev, pager, next" :total="user.total" @current-change="fetchUserRecords"></el-pagination>
+          <el-pagination
+            :current-page.sync="user.page"
+            layout="prev, pager, next"
+            :total="user.total"
+            @current-change="fetchUserRecords"
+          ></el-pagination>
         </div>
       </el-tab-pane>
       <el-tab-pane label="营销工具使用" name="3">
-        <el-table :data="tool.data" style="width: 100%" :header-row-style="{background:'#ededed',color:'#4d4d4d'}" :header-cell-style="{background: 'transparent'}">
+        <el-table
+          :data="tool.data"
+          style="width: 100%"
+          :header-row-style="{ background: '#ededed', color: '#4d4d4d' }"
+          :header-cell-style="{ background: 'transparent' }"
+        >
           <el-table-column type="index" :index="tool.tableIndex" label="序号" width="50" />
           <el-table-column prop="case_info.name" label="案例名称" min-width="160" />
-          <el-table-column prop="type" label="类型" min-width="120" >
+          <el-table-column prop="type" label="类型" min-width="120">
             <template slot-scope="scope">
-              {{scope.row.type | toolTypeFilter}}
+              {{ scope.row.type | toolTypeFilter }}
             </template>
           </el-table-column>
           <el-table-column prop="updated_at" label="保存时间" min-width="160" />
           <el-table-column label="操作" width="100">
             <template slot-scope="scope">
-              <el-button @click="handleClick(scope.row)" type="text" size="small">{{scope.row.is_complete ? '查看' : '继续完成'}}</el-button>
+              <el-button @click="handleClick(scope.row)" type="text" size="small">{{
+                scope.row.is_complete ? '查看' : '继续完成'
+              }}</el-button>
             </template>
           </el-table-column>
         </el-table>
         <div class="pagination">
-          <el-pagination :current-page.sync="tool.page" layout="prev, pager, next" :total="tool.total" @current-change="fetchToolRecords"></el-pagination>
+          <el-pagination
+            :current-page.sync="tool.page"
+            layout="prev, pager, next"
+            :total="tool.total"
+            @current-change="fetchToolRecords"
+          ></el-pagination>
         </div>
       </el-tab-pane>
     </el-tabs>
@@ -112,8 +148,7 @@ export default {
     this.fetchToolRecords()
   },
   methods: {
-    handleTabClick() {
-    },
+    handleTabClick() {},
     handleClick(val) {
       if (this.case.id === val.case_info.id) {
         this.handleNav(val)
@@ -183,11 +218,14 @@ export default {
           break
         case '2':
           const type = val.is_complete === 1 ? '3' : '1'
+          console.log('000')
+
           this.$router.push({ path: '/user-study', query: { id: val.id, type } })
           break
         case '3':
           const _type = val.is_complete === 1 ? '1' : '0'
-          this.$router.push({ path: '/market-tools/tool', query: { id: val.id, type: _type } })
+          console.log('111')
+          this.$router.push({ path: '/market-tools/mail', query: { id: val.id, type: _type } })
           break
       }
     }
@@ -195,19 +233,19 @@ export default {
 }
 </script>
 <style scoped>
-.history{
-  width:1160px;
-  padding-bottom:40px;
+.history {
+  width: 1160px;
+  padding-bottom: 40px;
   /* height:calc(100vh - 86px); */
-  margin:30px auto;
-  background:#fff;
-  padding:10px 30px;
+  margin: 30px auto;
+  background: #fff;
+  padding: 10px 30px;
 }
-.history ::v-deep.el-table .el-table__cell.gutter{
-  background:#ededed;
+.history ::v-deep.el-table .el-table__cell.gutter {
+  background: #ededed;
 }
-.pagination{
-  padding-top:7px;
-  text-align:right;
+.pagination {
+  padding-top: 7px;
+  text-align: right;
 }
 </style>

src/utils/stepTwo.js

+const triggerList = [
+  {
+    form: {
+      triggerList: [
+        {
+          triggerValue: '',
+          list: [
+            { value: '0', label: '启动APP' },
+            { value: '1', label: '用户登录' },
+            { value: '2', label: '购买基金商品' },
+            { value: '3', label: '购买理财产品' },
+            { value: '4', label: '购买保险产品' },
+            { value: '5', label: '浏览基金产品' },
+            { value: '6', label: '浏览理财产品' },
+            { value: '7', label: '浏览保险产品' },
+            { value: '8', label: '关闭APP' }
+          ]
+        }
+      ]
+    }
+  }
+]
+export default triggerList