Skip to content

X
x-training-new
提交 4216a061 authored 作者: matian's avatar matian
浏览文件
操作

各模块增加前两步

上级 a2e75801
显示空白字符变更
内嵌 并排
正在显示 包含 1337 行增加 和 110 行删除
src/modules/market-tools/components/app/AppStepOne.vue
浏览文件 @ 4216a061
<template> <template>
<div class="main_content"> <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 class="step_next step_btn" @click="handleNext">下一步</div> -->
</div> </div>
</template> </template>
<script> <script>
import CardList from '@/components/base/CardList.vue' import CardList from '@/components/base/CardList.vue'
import stepONeStep from '@/utils/stepOne' // import stepONeStep from '@/utils/stepOne'
import { cacheReport } from '../../api' // import { cacheReport } from '../../api'
export default { export default {
components: { components: {
CardList CardList
...@@ -16,40 +16,30 @@ export default { ...@@ -16,40 +16,30 @@ export default {
activeStep: { activeStep: {
type: Number, type: Number,
default: 0 default: 0
}
}, },
data() { stepOneList: {
return { type: Array
cardList: []
} }
}, },
created() { data() {
this.cardList = stepONeStep return {}
}, },
methods: { methods: {
handleNext() { // 下一步
let flag = false handleStepOne() {
this.cardList.forEach(item => let flag = true
this.stepOneList.forEach(item =>
item.form.personAttribute.forEach(it => { item.form.personAttribute.forEach(it => {
console.log(it, '0000') console.log(it, '333')
if (it.equal === '' || it.personal === '' || it.range === '') { if (it.equal === '' || it.personal === '' || it.range === '') {
flag = true flag = false
return false
} }
}) })
) )
if (flag) { if (!flag) {
this.$message.warning('请完善改步骤后才能进入下一步') 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()
} }
return flag
} }
} }
} }
...@@ -73,6 +63,7 @@ export default { ...@@ -73,6 +63,7 @@ export default {
cursor: pointer; cursor: pointer;
background: #49bba2; background: #49bba2;
margin: 30px auto; margin: 30px auto;
cursor: pointer;
} }
} }
</style> </style>
src/modules/market-tools/components/app/AppStepTwo.vue
浏览文件 @ 4216a061
...@@ -5,37 +5,48 @@ ...@@ -5,37 +5,48 @@
<template #trigger_title>触发条件</template> <template #trigger_title>触发条件</template>
<template #trigger_con> <template #trigger_con>
<div v-if="showIndex === 0"> <div v-if="showIndex === 0">
在 &nbsp;&nbsp;<el-date-picker 在 &nbsp;&nbsp;
v-model="time" <el-date-picker v-model="times" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
type="datetime" </el-date-picker>
placeholder="选择日期时间" &nbsp;&nbsp;
default-time="12:00:00" <el-time-picker v-model="times2" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
> </el-time-picker>
</el-date-picker &nbsp;&nbsp;对目标用户进行触达
>&nbsp;&nbsp;对目标用户进行触达
</div> </div>
<div v-if="showIndex === 1"> <div v-if="showIndex === 1">
<StepTodoList :form="form" /> <AppTodoList :form="stepTwoList" />
</div> </div>
</template> </template>
</StepTab> </StepTab>
<div class="main_content_btn"> <div class="main_content_btn">
<div class="step_prev step_btn" @click="handlePrev">上一步</div> <!-- <div class="step_prev step_btn" @click="handlePrev">上一步</div>
<div class="step_next step_btn" @click="handleNext">下一步</div> <div class="step_next step_btn" @click="handleNext">下一步</div> -->
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import StepTab from '@/components/base/StepTab.vue' import StepTab from '@/components/base/StepTab.vue'
import StepTodoList from './StepTodoList.vue' import AppTodoList from './AppTodoList.vue'
import { cacheReport } from '../../api'
export default { export default {
components: { StepTab, StepTodoList }, components: { StepTab, AppTodoList },
props: {
stepTwoList: {
type: Array
},
time: {
type: String
},
time2: {
type: String
}
},
data() { data() {
return { return {
times: '',
times2: '',
caseId: '',
showIndex: 0, showIndex: 0,
time: '',
// tab切换列表 // tab切换列表
tabList: [ tabList: [
{ {
...@@ -48,36 +59,14 @@ export default { ...@@ -48,36 +59,14 @@ export default {
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
tabName: '条件触发' 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() { mounted() {
console.log(JSON.parse(window.localStorage.getItem('triggerList')), '123') // console.log(this.time, 'time')
if (JSON.parse(window.localStorage.getItem('triggerList'))) { this.times = this.time
this.form.triggerList = JSON.parse(window.localStorage.getItem('triggerList')) this.times2 = this.time2
} // console.log(this.stepTwoList, '9999')
if (window.localStorage.getItem('time')) {
this.time = window.localStorage.getItem('time')
}
}, },
methods: { methods: {
...@@ -87,26 +76,20 @@ export default { ...@@ -87,26 +76,20 @@ export default {
handlePrev() { handlePrev() {
this.$parent.$parent.handlePrev() this.$parent.$parent.handlePrev()
}, },
handleNext() { handleStepTwo() {
let flag = false console.log(this.times)
this.form.triggerList.forEach(item => { this.$emit('getTime', this.times, this.times2)
if (item.triggerValue === '' || this.time === '') { // this.$emit('getTime', this.times)
flag = true let flag = true
return false this.stepTwoList[0].form.triggerList.forEach(item => {
if (item.triggerValue === '' || this.times === '' || this.times2 === '') {
flag = false
} }
}) })
if (flag) { if (!flag) {
this.$message.warning('请完善改步骤后才能进入下一步') 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()
})
} }
return flag
} }
} }
} }
......
src/modules/market-tools/components/app/StepTodoList.vue → src/modules/market-tools/components/app/AppTodoList.vue
浏览文件 @ 4216a061
...@@ -6,13 +6,13 @@ ...@@ -6,13 +6,13 @@
</div> </div>
<div class="main_con_optionList"> <div class="main_con_optionList">
<div class="optionList_left"> <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_line"></div>
<div class="optionList_left_text">且</div> <div class="optionList_left_text">且</div>
</div> </div>
</div> </div>
<div class="optionList_right"> <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"> <div v-for="(item, indexB) in list" :key="indexB">
<el-form-item> <el-form-item>
<span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="optionList_right_text">当用户做过</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
</el-option> </el-option>
</el-select> </el-select>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<span class="optionList_right_text">出现弹窗</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span class="optionList_right_text">对目标用户进行触达</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<img <img
...@@ -46,18 +46,21 @@ ...@@ -46,18 +46,21 @@
export default { export default {
props: { props: {
form: { form: {
type: Object, type: Array,
default: () => {} default: () => {}
} }
}, },
data() { data() {
return {} return {}
}, },
mounted() {
console.log(this.form, '----')
},
computed: { computed: {
list() { list() {
return this.form.triggerList.map(item => { return this.form[0].form.triggerList.map(item => {
item.list = item.list.map(i => { 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 i
}) })
return item return item
...@@ -67,20 +70,20 @@ export default { ...@@ -67,20 +70,20 @@ export default {
methods: { methods: {
handleAdd() { handleAdd() {
console.log('000') console.log('000')
if (this.form.triggerList.length < this.form.triggerList[0].list.length) { if (this.form[0].form.triggerList.length < this.form[0].form.triggerList[0].list.length) {
const item = Object.assign({}, this.form.triggerList[0]) const item = Object.assign({}, this.form[0].form.triggerList[0])
item.triggerValue = '' item.triggerValue = ''
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
this.form.triggerList.push(item) this.form[0].form.triggerList.push(item)
} else { } else {
this.$message.warning('添加项不能超过下拉选项个数') this.$message.warning('添加项不能超过下拉选项个数')
} }
}, },
handleDelete(item, indexB) { handleDelete(item, indexB) {
if (this.form.triggerList.length > 1) { if (this.form[0].form.triggerList.length > 1) {
// eslint-disable-next-line vue/no-mutating-props // eslint-disable-next-line vue/no-mutating-props
this.form.triggerList.splice(indexB, 1) this.form[0].form.triggerList.splice(indexB, 1)
} else { } else {
this.$message.warning('默认至少有一条数据') this.$message.warning('默认至少有一条数据')
} }
......
src/modules/market-tools/components/mobileSms/SmsStepOne.vue 0 → 100644
浏览文件 @ 4216a061
<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 0 → 100644
浏览文件 @ 4216a061
<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 0 → 100644
浏览文件 @ 4216a061
<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 0 → 100644
浏览文件 @ 4216a061
<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 0 → 100644
浏览文件 @ 4216a061
<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 0 → 100644
浏览文件 @ 4216a061
<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
浏览文件 @ 4216a061
...@@ -19,6 +19,14 @@ const routes = [ ...@@ -19,6 +19,14 @@ const routes = [
{ {
path: '/market-tools/tool', path: '/market-tools/tool',
component: () => import('./views/Tool.vue') 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
浏览文件 @ 4216a061
...@@ -3,15 +3,37 @@ ...@@ -3,15 +3,37 @@
<ToolCard class="main_content"> <ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" /> <Step :activeStep="activeStep" class="pt50-pl60" />
<div> <div>
<AppStepOne v-show="activeStep === 0" class="pt-50" :activeStep="activeStep" @getCardList="getCardList" /> <AppStepOne
<AppStepTwo v-show="activeStep === 1" class="pt-50" @getStepTwoInfo="getStepTwoInfo" /> 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_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> </div>
</ToolCard> </ToolCard>
</div> </div>
</template> </template>
<script> <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 ToolCard from '@/components/base/ToolCard.vue'
import AppStepOne from '../components/app/AppStepOne.vue' import AppStepOne from '../components/app/AppStepOne.vue'
import Step from '@/components/base/Step.vue' import Step from '@/components/base/Step.vue'
...@@ -28,27 +50,117 @@ export default { ...@@ -28,27 +50,117 @@ export default {
activeStep: 0, activeStep: 0,
stepOneList: [], stepOneList: [],
stepTwoList: [], stepTwoList: [],
time: '' time: '',
caseId: '',
times: '',
times2: '',
time2: ''
} }
}, },
methods: { methods: {
// 获取第二步时间
getTime(val, val2) {
this.time = val
this.time2 = val2
},
// 上一步 // 上一步
handlePrev() { 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-- this.activeStep--
})
}
}, },
// 下一步 // 下一步
handleNext() { 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++ this.activeStep++
})
}, },
// 点击生成预览 // 预览
handlePreview() {}, handlePreview() {
getCardList(val) { this.activeStep++
this.stepOneList = val },
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
}
}, },
getStepTwoInfo(val, time) { mounted() {
this.stepTwoList = val console.log(stepOne, 'stepOne2222')
this.time = time if (this.$route.query.type) {
this.getReportDetail(this.$route.query.id)
} else {
this.checkRecord()
} }
} }
} }
......
src/modules/market-tools/views/Index.vue
浏览文件 @ 4216a061
...@@ -67,6 +67,10 @@ export default { ...@@ -67,6 +67,10 @@ export default {
this.$router.push('/market-tools/mail') this.$router.push('/market-tools/mail')
} else if (this.listIndex === 2) { } else if (this.listIndex === 2) {
this.$router.push('/market-tools/app') 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')
} }
} }
} }
...@@ -106,6 +110,7 @@ export default { ...@@ -106,6 +110,7 @@ export default {
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin: 0 10px 10px 0; margin: 0 10px 10px 0;
cursor: pointer;
&.active { &.active {
border: 1px solid #49bba2; border: 1px solid #49bba2;
......
src/modules/market-tools/views/Mail.vue
浏览文件 @ 4216a061
...@@ -70,7 +70,11 @@ export default { ...@@ -70,7 +70,11 @@ export default {
const reports = { const reports = {
activeStep: this.activeStep, activeStep: this.activeStep,
type: 2, type: 2,
commit_report: [{ stepOneList: this.stepOneList }, { form: this.stepTwoList }, { time: this.time }] 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 => { cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
this.caseId = res.data.id this.caseId = res.data.id
...@@ -115,6 +119,7 @@ export default { ...@@ -115,6 +119,7 @@ export default {
// 获取步骤信息回显 // 获取步骤信息回显
getReportDetail(id) { getReportDetail(id) {
getReportDetail(id).then(res => { getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 2) {
this.activeStep = res.data.detail.answer.activeStep this.activeStep = res.data.detail.answer.activeStep
this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
this.time = res.data.detail.answer.commit_report[2].time || '' this.time = res.data.detail.answer.commit_report[2].time || ''
...@@ -122,6 +127,7 @@ export default { ...@@ -122,6 +127,7 @@ export default {
this.stepTwoList = res.data.detail.answer.commit_report[1].form this.stepTwoList = res.data.detail.answer.commit_report[1].form
console.log(this.times, '222') console.log(this.times, '222')
console.log(this.activeStep, 'activeStep', this.stepOneList, '---', '123') console.log(this.activeStep, 'activeStep', this.stepOneList, '---', '123')
}
}) })
}, },
// 验证是否有未完成的答题记录 // 验证是否有未完成的答题记录
...@@ -129,17 +135,27 @@ export default { ...@@ -129,17 +135,27 @@ export default {
checkRecord(this.$store.state.case.id, 2).then(res => { checkRecord(this.$store.state.case.id, 2).then(res => {
console.log(res, 'res000') console.log(res, 'res000')
if (res.data.status === true) { if (res.data.status === true) {
if (res.data.items.length) { const answerList = res.data.items.filter(item => item.type === 2)
this.getReportDetail(res.data.items[0].id) 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 { } else {
this.initStepList()
}
})
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne this.stepOneList = stepOne
this.stepTwoList = stepTwo this.stepTwoList = stepTwo
this.time = this.times this.time = this.times
this.time2 = this.times2 this.time2 = this.times2
console.log(this.times, '111')
}
})
} }
}, },
mounted() { mounted() {
......
src/modules/market-tools/views/MobileSms.vue 0 → 100644
浏览文件 @ 4216a061
<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/WeChat.vue 0 → 100644
浏览文件 @ 4216a061
<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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论