updates

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

 <template>
   <div class="main_content">
-    <!--  -->
-    <div class="main_content_plan">
-      <!-- 标题 -->
-      <div class="main_content_plan_title">计划类型</div>
-      <!-- tab切换 -->
-      <div class="main_content_plan_tab">
-        <div v-for="(item, index) in tabList" :key="index" @click="handleTab(index)">
-          <div class="tabItem" :class="activeTab === index ? 'tabItem_active' : 'tabItem_inactive'">
-            <img :src="item.icon" v-if="activeTab !== index" />
-            <img :src="item.iconActive" v-else />
-            <div class="tabItem_name">{{ item.tabName }}</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <!-- 触发条件 -->
-    <div class="main_content_trigger">
-      <div class="main_content_trigger_title">触发条件</div>
-      <div class="main_content_trigger_con">
+    <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"
@@ -28,14 +14,22 @@
           </el-date-picker
           >&nbsp;&nbsp;对目标用户进行触达
         </div>
+        <div v-if="showIndex === 1">
+          <StepTodoList />
         </div>
+      </template>
+    </StepTab>
   </div>
 </template>
 <script>
+import StepTab from '@/components/base/StepTab.vue'
+import StepTodoList from './StepTodoList.vue'
 export default {
+  components: { StepTab, StepTodoList },
+
   data() {
     return {
-      activeTab: 0,
+      showIndex: 0,
       time: '',
       tabList: [
         {
@@ -53,80 +47,8 @@ export default {
   },
   methods: {
     handleTab(index) {
-      this.activeTab = index
+      this.showIndex = index
     }
   }
 }
 </script>
-<style lang="scss" scoped>
-.main_content {
-  width: 883px;
-  background: rgba(255, 255, 255, 0.39);
-  border: 1px solid #e8e8e8;
-  opacity: 1;
-  border-radius: 16px;
-  display: flex;
-  flex-direction: column;
-  .main_content_plan {
-    .main_content_plan_title {
-      font-size: 18px;
-      font-weight: 500;
-      color: #333333;
-    }
-    .main_content_plan_tab {
-      display: flex;
-      margin-top: 20px;
-      .tabItem_active {
-        background: #49bba2;
-        color: #ffffff;
-        .tabItem_name {
-          margin-left: 5px;
-          font-size: 16px;
-          color: #ffffff;
-        }
-      }
-      .tabItem_inactive {
-        background: #ffffff;
-        border: 1px solid #cdcdcd;
-        .tabItem_name {
-          margin-left: 5px;
-          font-size: 16px;
-          color: #6d6d71;
-        }
-      }
-      .tabItem {
-        width: 119px;
-        height: 36px;
-        border-radius: 18px;
-        margin-right: 19px;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        img {
-          width: 16px;
-          height: 16px;
-          display: block;
-        }
-        .tabItem_name {
-          margin-left: 5px;
-          font-size: 16px;
-        }
-      }
-    }
-  }
-  .main_content_trigger {
-    margin-top: 40px;
-    .main_content_trigger_title {
-      font-size: 18px;
-      font-weight: 500;
-      color: #333333;
-    }
-    .main_content_trigger_con {
-      font-size: 16px;
-      font-weight: 400;
-      color: #333333;
-      margin-top: 20px;
-    }
-  }
-}
-</style>

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

-<template>
-  <div class="main_content">
-    <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 />
-        </div>
-      </template>
-    </StepTab>
-  </div>
-</template>
-<script>
-import StepTab from '@/components/base/StepTab.vue'
-import StepTodoList from './StepTodoList.vue'
-export default {
-  components: { StepTab, StepTodoList },
-
-  data() {
-    return {
-      showIndex: 0,
-      time: '',
-      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: '条件触发'
-        }
-      ]
-    }
-  },
-  methods: {
-    handleTab(index) {
-      this.showIndex = index
-    }
-  }
-}
-</script>

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

@@ -7,8 +7,8 @@
         <MailStepTwo v-if="activeStep === 1" />
         <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">下一步</div>
-          <div class="step_finished step_btn" @click="handlePreview">点击生成预览</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>
       </div>
     </ToolCard>
@@ -19,7 +19,7 @@
 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/MailStepTwocopy.vue'
+import MailStepTwo from '../components/mail/MailStepTwo.vue'
 export default {
   components: {
     ToolCard,
@@ -58,7 +58,6 @@ export default {
     .step_btn {
       width: 119px;
       height: 32px;
-      background: #49bba2;
       opacity: 1;
       border-radius: 16px;
       font-size: 18px;
@@ -68,6 +67,18 @@ export default {
       margin-right: 10px;
       margin-top: 200px;
     }
+    .step_prev {
+      border: 1px solid #cacaca;
+      background: #fff;
+      color: #ffffff;
+      color: #6d6d71;
+    }
+    .step_next {
+      background: #49bba2;
+    }
+    .step_finished {
+      background: #49bba2;
+    }
   }
 }
 </style>