Skip to content

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

各模块增加前两步

上级 a2e75801
隐藏空白字符变更
内嵌 并排
正在显示 包含 1349 行增加 和 122 行删除
src/modules/market-tools/components/app/AppStepOne.vue
浏览文件 @ 4216a061
<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>
<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'
// import stepONeStep from '@/utils/stepOne'
// import { cacheReport } from '../../api'
export default {
components: {
CardList
......@@ -16,40 +16,30 @@ export default {
activeStep: {
type: Number,
default: 0
},
stepOneList: {
type: Array
}
},
data() {
return {
cardList: []
}
},
created() {
this.cardList = stepONeStep
return {}
},
methods: {
handleNext() {
let flag = false
this.cardList.forEach(item =>
// 下一步
handleStepOne() {
let flag = true
this.stepOneList.forEach(item =>
item.form.personAttribute.forEach(it => {
console.log(it, '0000')
console.log(it, '333')
if (it.equal === '' || it.personal === '' || it.range === '') {
flag = true
return false
flag = false
}
})
)
if (flag) {
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()
}
return flag
}
}
}
......@@ -73,6 +63,7 @@ export default {
cursor: pointer;
background: #49bba2;
margin: 30px auto;
cursor: pointer;
}
}
</style>
src/modules/market-tools/components/app/AppStepTwo.vue
浏览文件 @ 4216a061
......@@ -5,37 +5,48 @@
<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 :form="form" />
<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 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 { cacheReport } from '../../api'
import AppTodoList from './AppTodoList.vue'
export default {
components: { StepTab, StepTodoList },
components: { StepTab, AppTodoList },
props: {
stepTwoList: {
type: Array
},
time: {
type: String
},
time2: {
type: String
}
},
data() {
return {
times: '',
times2: '',
caseId: '',
showIndex: 0,
time: '',
// tab切换列表
tabList: [
{
......@@ -48,36 +59,14 @@ 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')
}
// console.log(this.time, 'time')
this.times = this.time
this.times2 = this.time2
// console.log(this.stepTwoList, '9999')
},
methods: {
......@@ -87,26 +76,20 @@ export default {
handlePrev() {
this.$parent.$parent.handlePrev()
},
handleNext() {
let flag = false
this.form.triggerList.forEach(item => {
if (item.triggerValue === '' || this.time === '') {
flag = true
return false
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) {
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()
})
}
return flag
}
}
}
......
src/modules/market-tools/components/app/StepTodoList.vue → src/modules/market-tools/components/app/AppTodoList.vue
浏览文件 @ 4216a061
......@@ -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;
......@@ -27,7 +27,7 @@
</el-option>
</el-select>
&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>
<img
......@@ -46,18 +46,21 @@
export default {
props: {
form: {
type: Object,
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
......@@ -67,20 +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) {
if (this.form[0].form.triggerList.length > 1) {
// eslint-disable-next-line vue/no-mutating-props
this.form.triggerList.splice(indexB, 1)
this.form[0].form.triggerList.splice(indexB, 1)
} else {
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 = [
{
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
浏览文件 @ 4216a061
......@@ -3,15 +3,37 @@
<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>
<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'
......@@ -28,27 +50,117 @@ export default {
activeStep: 0,
stepOneList: [],
stepTwoList: [],
time: ''
time: '',
caseId: '',
times: '',
times2: '',
time2: ''
}
},
methods: {
// 获取第二步时间
getTime(val, val2) {
this.time = val
this.time2 = val2
},
// 上一步
handlePrev() {
this.activeStep--
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++
},
// 点击生成预览
handlePreview() {},
getCardList(val) {
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()
}
})
},
getStepTwoInfo(val, time) {
this.stepTwoList = val
this.time = time
// 初始化步骤列表
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()
}
}
}
......
src/modules/market-tools/views/Index.vue
浏览文件 @ 4216a061
......@@ -67,6 +67,10 @@ export default {
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')
}
}
}
......@@ -106,6 +110,7 @@ export default {
flex-direction: column;
align-items: center;
margin: 0 10px 10px 0;
cursor: pointer;
&.active {
border: 1px solid #49bba2;
......
src/modules/market-tools/views/Mail.vue
浏览文件 @ 4216a061
......@@ -70,7 +70,11 @@ export default {
const reports = {
activeStep: this.activeStep,
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 => {
this.caseId = res.data.id
......@@ -115,13 +119,15 @@ export default {
// 获取步骤信息回显
getReportDetail(id) {
getReportDetail(id).then(res => {
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')
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')
}
})
},
// 验证是否有未完成的答题记录
......@@ -129,17 +135,27 @@ export default {
checkRecord(this.$store.state.case.id, 2).then(res => {
console.log(res, 'res000')
if (res.data.status === true) {
if (res.data.items.length) {
this.getReportDetail(res.data.items[0].id)
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.stepOneList = stepOne
this.stepTwoList = stepTwo
this.time = this.times
this.time2 = this.times2
console.log(this.times, '111')
this.initStepList()
}
})
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne
this.stepTwoList = stepTwo
this.time = this.times
this.time2 = this.times2
}
},
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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论