邮件营销 app营销前两步增加

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/components/mail/StepTodoList.vue → src/components/base/StepTodoList.vue

@@ -44,28 +44,15 @@
 
 <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: Object,
+      default: () => {}
     }
   },
+  data() {
+    return {}
+  },
   computed: {
     list() {
       return this.form.triggerList.map(item => {
@@ -92,6 +79,7 @@ export default {
     },
     handleDelete(item, indexB) {
       if (this.form.triggerList.length > 1) {
+        // eslint-disable-next-line vue/no-mutating-props
         this.form.triggerList.splice(indexB, 1)
       } else {
         this.$message.warning('默认至少有一条数据')

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

+<template>
+  <div class="main_content">
+    <CardList class="box-card" v-for="(item, index) in cardList" :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
+    }
+  },
+  data() {
+    return {
+      cardList: []
+    }
+  },
+  created() {
+    this.cardList = stepONeStep
+  },
+  methods: {
+    handleNext() {
+      let flag = false
+      this.cardList.forEach(item =>
+        item.form.personAttribute.forEach(it => {
+          console.log(it, '0000')
+          if (it.equal === '' || it.personal === '' || it.range === '') {
+            flag = true
+            return false
+          }
+        })
+      )
+      if (flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+        return false
+      } else {
+        console.log(this.cardList, '0000')
+        const reports = { type: 1, commit_report: this.cardList }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          console.log(res, 'res111')
+        })
+        this.$emit('getCardList', this.cardList)
+        this.$parent.$parent.handleNext()
+      }
+    }
+  }
+}
+</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;
+  }
+}
+</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="time"
+            type="datetime"
+            placeholder="选择日期时间"
+            default-time="12:00:00"
+          >
+          </el-date-picker
+          >&nbsp;&nbsp;对目标用户进行触达
+        </div>
+        <div v-if="showIndex === 1">
+          <StepTodoList :form="form" />
+        </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 StepTodoList from '@/components/base/StepTodoList.vue'
+import { cacheReport } from '../../api'
+export default {
+  components: { StepTab, StepTodoList },
+
+  data() {
+    return {
+      showIndex: 0,
+      time: '',
+      // 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: '条件触发'
+        }
+      ],
+      // 条件触发列表
+      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' }
+            ]
+          }
+        ]
+      }
+    }
+  },
+  mounted() {
+    console.log(JSON.parse(window.localStorage.getItem('triggerList')), '123')
+    if (JSON.parse(window.localStorage.getItem('triggerList'))) {
+      this.form.triggerList = JSON.parse(window.localStorage.getItem('triggerList'))
+    }
+    if (window.localStorage.getItem('time')) {
+      this.time = window.localStorage.getItem('time')
+    }
+  },
+
+  methods: {
+    handleTab(index) {
+      this.showIndex = index
+    },
+    handlePrev() {
+      this.$parent.$parent.handlePrev()
+    },
+    handleNext() {
+      let flag = false
+      this.form.triggerList.forEach(item => {
+        if (item.triggerValue === '' || this.time === '') {
+          flag = true
+          return false
+        }
+      })
+      if (flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+        return false
+      } else {
+        const reports = { type: 1, commit_report: [{ form: this.form.triggerList }, { time: this.time }] }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          window.localStorage.setItem('triggerList', JSON.stringify(this.form.triggerList))
+          window.localStorage.setItem('time', this.time)
+          this.$emit('getStepTwoInfo', this.form.triggerList, this.time)
+          this.$parent.$parent.handleNext()
+        })
+      }
+    }
+  }
+}
+</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/MailStepOne.vue

 <template>
   <div class="main_content">
     <CardList class="box-card" v-for="(item, index) in cardList" :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
+    }
+  },
   data() {
     return {
       cardList: []
     }
   },
   created() {
+    if (JSON.parse(window.localStorage.getItem('stepONeList'))) {
+      this.cardList = JSON.parse(window.localStorage.getItem('stepONeList'))
+    } else {
       this.cardList = stepONeStep
     }
+  },
+  methods: {
+    handleNext() {
+      let flag = false
+      this.cardList.forEach(item =>
+        item.form.personAttribute.forEach(it => {
+          console.log(it, '0000')
+          if (it.equal === '' || it.personal === '' || it.range === '') {
+            flag = true
+            return false
+          }
+        })
+      )
+      if (flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+        return false
+      } else {
+        console.log(this.$store.state.case.id, '0000')
+        const reports = { type: 1, commit_report: this.cardList }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          console.log(res, 'res111')
+          this.caseId = res.data.id
+          window.localStorage.setItem('stepONeList', JSON.stringify(this.cardList))
+          this.$emit('getCardList', this.cardList)
+          this.$parent.$parent.handleNext()
+        })
+      }
+    }
+  }
 }
 </script>
 <style lang="scss" scoped>
@@ -27,7 +67,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>
@@ -15,15 +15,20 @@
           >&nbsp;&nbsp;对目标用户进行触达
         </div>
         <div v-if="showIndex === 1">
-          <StepTodoList />
+          <StepTodoList :form="form" />
         </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 StepTodoList from './StepTodoList.vue'
+import StepTodoList from '@/components/base/StepTodoList.vue'
+import { cacheReport } from '../../api'
 export default {
   components: { StepTab, StepTodoList },
 
@@ -31,6 +36,7 @@ export default {
     return {
       showIndex: 0,
       time: '',
+      // tab切换列表
       tabList: [
         {
           icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
@@ -42,13 +48,94 @@ export default {
           iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
           tabName: '条件触发'
         }
+      ],
+      // 条件触发列表
+      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' }
             ]
           }
+        ]
+      }
+    }
   },
+  mounted() {
+    console.log(JSON.parse(window.localStorage.getItem('triggerList')), '123')
+    if (JSON.parse(window.localStorage.getItem('triggerList'))) {
+      this.form.triggerList = JSON.parse(window.localStorage.getItem('triggerList'))
+    }
+    if (window.localStorage.getItem('time')) {
+      this.time = window.localStorage.getItem('time')
+    }
+  },
+
   methods: {
     handleTab(index) {
       this.showIndex = index
+    },
+    handlePrev() {
+      this.$parent.$parent.handlePrev()
+    },
+    handleNext() {
+      let flag = false
+      this.form.triggerList.forEach(item => {
+        if (item.triggerValue === '' || this.time === '') {
+          flag = true
+          return false
+        }
+      })
+      if (flag) {
+        this.$message.warning('请完善改步骤后才能进入下一步')
+        return false
+      } else {
+        const reports = { type: 1, commit_report: [{ form: this.form.triggerList }, { time: this.time }] }
+        cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
+          window.localStorage.setItem('triggerList', JSON.stringify(this.form.triggerList))
+          window.localStorage.setItem('time', this.time)
+          this.$emit('getStepTwoInfo', this.form.triggerList, this.time)
+          this.$parent.$parent.handleNext()
+        })
+      }
     }
   }
 }
 </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/index.js

@@ -11,6 +11,10 @@ const routes = [
       {
         path: '/market-tools/mail',
         component: () => import('./views/Mail.vue')
+      },
+      {
+        path: '/market-tools/app',
+        component: () => import('./views/App.vue')
       }
     ]
   }

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

+<template>
+  <div>
+    <ToolCard class="main_content">
+      <Step :activeStep="activeStep" class="pt50-pl60" />
+      <div>
+        <AppStepOne v-show="activeStep === 0" class="pt-50" :activeStep="activeStep" @getCardList="getCardList" />
+        <AppStepTwo v-show="activeStep === 1" class="pt-50" @getStepTwoInfo="getStepTwoInfo" />
+        <div class="step_prev step_btn" @click="handlePrev" v-if="activeStep > 0">上一步</div>
+      </div>
+    </ToolCard>
+  </div>
+</template>
+
+<script>
+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: ''
+    }
+  },
+
+  methods: {
+    // 上一步
+    handlePrev() {
+      this.activeStep--
+    },
+    // 下一步
+    handleNext() {
+      this.activeStep++
+    },
+    // 点击生成预览
+    handlePreview() {},
+    getCardList(val) {
+      this.stepOneList = val
+    },
+    getStepTwoInfo(val, time) {
+      this.stepTwoList = val
+      this.time = time
+    }
+  }
+}
+</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

@@ -65,6 +65,8 @@ export default {
     handleTool() {
       if (this.listIndex === 1) {
         this.$router.push('/market-tools/mail')
+      } else if (this.listIndex === 2) {
+        this.$router.push('/market-tools/app')
       }
     }
   }
@@ -128,6 +130,7 @@ export default {
         font-size: 18px;
         line-height: 32px;
         color: #ffffff;
+        cursor: pointer;
       }
     }
   }

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

@@ -3,13 +3,9 @@
     <ToolCard class="main_content">
       <Step :activeStep="activeStep" class="pt50-pl60" />
       <div>
-        <MailStepOne v-if="activeStep === 0" class="pt-50" />
-        <MailStepTwo v-if="activeStep === 1" class="pt-50" />
-        <div class="main_content_btn">
+        <MailStepOne v-show="activeStep === 0" class="pt-50" :activeStep="activeStep" @getCardList="getCardList" />
+        <MailStepTwo v-show="activeStep === 1" class="pt-50" @getStepTwoInfo="getStepTwoInfo" />
         <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 < 3">下一步</div>
-          <div class="step_finished step_btn" @click="handlePreview" v-if="activeStep === 3">点击生成预览</div>
-        </div>
       </div>
     </ToolCard>
   </div>
@@ -20,7 +16,6 @@ import ToolCard from '@/components/base/ToolCard.vue'
 import MailStepOne from '../components/mail/MailStepOne.vue'
 import Step from '@/components/base/Step.vue'
 import MailStepTwo from '../components/mail/MailStepTwo.vue'
-import { cacheReport } from '../api'
 export default {
   components: {
     ToolCard,
@@ -30,9 +25,13 @@ export default {
   },
   data() {
     return {
-      activeStep: 0
+      activeStep: 0,
+      stepOneList: [],
+      stepTwoList: [],
+      time: ''
     }
   },
+
   methods: {
     // 上一步
     handlePrev() {
@@ -40,14 +39,17 @@ export default {
     },
     // 下一步
     handleNext() {
-      const reports = { type: 1, commit_report: [{ 1: 1 }] }
-      cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
-        console.log(res, 'res111')
-      })
       this.activeStep++
     },
     // 点击生成预览
-    handlePreview() {}
+    handlePreview() {},
+    getCardList(val) {
+      this.stepOneList = val
+    },
+    getStepTwoInfo(val, time) {
+      this.stepTwoList = val
+      this.time = time
+    }
   }
 }
 </script>
@@ -71,6 +73,7 @@ export default {
       color: #ffffff;
       text-align: center;
       margin-right: 10px;
+      cursor: pointer;
       // margin-top: 200px;
     }
     .step_prev {