提交 6d83ad83 authored 作者: lihuihui's avatar lihuihui
......@@ -30,22 +30,14 @@
</template>
<script>
export default {
props: {
tabList: {
type: Array
}
},
data() {
return {
activeTab: 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: '条件触发'
}
]
activeTab: 0
}
},
methods: {
......
<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>
<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>
</div>
<!-- 触发条件 -->
<div class="main_content_trigger">
<div class="main_content_trigger_title">触发条件</div>
<div class="main_content_trigger_con">
&nbsp;&nbsp;<el-date-picker
v-model="time"
type="datetime"
placeholder="选择日期时间"
default-time="12:00:00"
>
</el-date-picker
>&nbsp;&nbsp;对目标用户进行触达
</div>
</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>
<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>
......@@ -15,7 +15,7 @@
<el-form :inline="true" :model="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"
......@@ -26,10 +26,14 @@
>
</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>
<el-button type="text" @click="handleDelete(item, indexB)" icon="el-icon-close"></el-button>
<img
src="https://webapp-pub.ezijing.com/x-training-new/btn_del.png"
@click="handleDelete(item, indexB)"
/>
</el-form-item>
</div>
</el-form>
......@@ -136,6 +140,11 @@ export default {
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;
......
......@@ -6,9 +6,9 @@
<MailStepOne v-if="activeStep === 0" class="pt-50"/>
<MailStepTwo v-if="activeStep === 1" class="pt-50"/>
<div class="main_content_btn">
<div class="step_prev step_btn" @click="handlePrev" :disabled="activeStep === 0">上一步</div>
<div class="step_next step_btn" @click="handleNext">下一步</div>
<div class="step_finished step_btn" @click="handlePreview">点击生成预览</div>
<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>
</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,
......@@ -59,7 +59,6 @@ export default {
.step_btn {
width: 119px;
height: 32px;
background: #49bba2;
opacity: 1;
border-radius: 16px;
font-size: 18px;
......@@ -69,6 +68,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;
}
}
}
.pt50-pl60{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论