提交 91e61ac2 authored 作者: lihuihui's avatar lihuihui

update

上级 af8d5b7b
......@@ -3,16 +3,26 @@
<div class="title">{{ title }}</div>
<div class="f-type">
<div class="tit">{{ subTitle }}</div>
<div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom">
点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }}
</div>
<el-input
:maxlength="valueMaxLength"
v-if="returnData.show === false"
style="margin-top: 15px"
v-model="returnData.textValue"
placeholder="请输入"
></el-input>
<template v-if="!type">
<div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom">
点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }}
</div>
<el-input
:maxlength="valueMaxLength"
v-if="returnData.show === false"
style="margin-top: 15px"
v-model="returnData.textValue"
placeholder="请输入"
></el-input>
</template>
<template v-else>
<el-input
:maxlength="valueMaxLength"
style="margin-top: 15px"
v-model="returnData.textValue"
placeholder="请输入"
></el-input>
</template>
</div>
<div class="tool-select">
<div v-for="(item, index) in toolList" :key="index">
......@@ -62,6 +72,7 @@
<script>
export default {
props: {
type: { type: String },
// 工具框大标题
title: { type: String },
// 工具框小标题
......
<template>
<div class="four-box">
<div class="card" v-for="(item, index) in data.stepOne" :key="index">
<div class="title">{{ item.cardTitle }}</div>
<div class="ul-list">
<div class="li" v-for="(cItem, cIndex) in item.form.personAttribute" :key="cIndex + 'c'">
<div class="icon"></div>
<div class="text">
{{ getPersonalMap(cItem).label }}&nbsp;&nbsp;{{
cItem.equalMap.find(i => i.value === cItem.equal).label
}}&nbsp;&nbsp;{{ getPersonalMap(cItem).children.find(i => i.value === cItem.range).label }}
</div>
</div>
</div>
</div>
<div class="card">
<div class="title">营销方案</div>
<div class="ul-list">
<div class="li">
<div class="icon"></div>
<div class="text">
计划类型:{{ data.stepTwo.index === 0 ? '单次触发' : '条件触发' }}
</div>
</div>
<div class="li" v-for="(item, index) in getStepTwoValue()" :key="index">
<div class="icon"></div>
<div class="text">
{{ item }}
</div>
</div>
</div>
</div>
<div class="card">
<div class="title">展示内容</div>
<div class="phone-box">
<div class="card-content">
<div class="img" :style="`background-image:url(${data.stepThree.imgParams.url});`"></div>
<div class="title" :style="data.stepThree.titleParams.style">{{ data.stepThree.titleParams.textValue || '请输入' }}</div>
<div class="desc" :style="data.stepThree.describeParams.style">{{ data.stepThree.describeParams.textValue || '请输入' }}</div>
<div class="btn" :style="data.stepThree.btnParams.style">{{ data.stepThree.btnParams.textValue || '请输入' }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Object }
},
mounted() {
this.getStepTwoValue()
},
methods: {
getPersonalMap(item) {
return item.personalMap.find(i => i.value === item.personal)
},
// 获取位置值
getStepTwoValue() {
const arr = []
const data = this.data.stepTwo
if (!data.index) {
this.data.stepTwo.list[0].form.triggerList.forEach(item => {
if (item.startValue === 'start') {
arr.push('当用户做过启动App后出现弹窗')
} else {
const d = item.personalMap.find(i => i.value === 'trigger').children.find(i => i.value === item.triggerValue)
arr.push(`当用户做过指定App页${d.label}出现弹窗 `)
}
})
} else {
this.data.stepTwo.list2[0].form.triggerList.forEach(item => {
arr.push(`当用户做过 ${item.list.find(i => i.value === item.triggerValue).label} 对目标用户进行触达`)
})
}
return arr
}
}
}
</script>
<style lang="scss" scoped>
.four-box {
margin-bottom: 20px;
.card {
background: rgba(250, 250, 250, 0.39);
border: 1px solid #e8e8e8;
border-radius: 16px;
margin-bottom: 20px;
padding: 20px;
.content {
height: 500px;
position: relative;
.phone-box {
margin: 0 auto;
width: 236px;
height: 474px;
background: url(https://webapp-pub.ezijing.com/x-training-new/phone-sms.png);
background-size: 100% 100%;
position: relative;
.text {
padding: 9px;
box-sizing: border-box;
background: #e9e9eb;
border-radius: 10px;
width: 148px;
position: absolute;
top: 110px;
left: 25px;
font-size: 9px;
color: #333333;
}
}
}
.title {
font-size: 18px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
.ul-list {
padding-top: 20px;
.li {
display: flex;
align-items: center;
margin-bottom: 15px;
.icon {
width: 6px;
min-width: 6px;
height: 6px;
min-height: 6px;
background: rgba(73, 187, 162, 0.39);
border-radius: 50%;
}
.text {
font-size: 16px;
color: #666666;
margin-left: 10px;
}
}
}
}
}
.phone-box{
margin: 0 auto;
width: 236px;
height: 474px;
background: url(https://webapp-pub.ezijing.com/x-training-new/phone-app.png);
background-size: 100% 100%;
position: relative;
.card-content{
width: 164px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 1);
border-radius: 6px;
.img{
height: 87px;
background-size:100% 100%;
}
.title{
padding: 15px 0 5px;
font-size: 14px;
font-weight: bold;
line-height: 20px;
color: #333333;
text-align: center;
}
.desc{
width: 137px;
font-size: 12px;
line-height: 20px;
color: #6D6D71;
margin: 0 auto;
}
.btn{
width: 137px;
background: #49BBA2;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 12px;
margin: 22px auto 12px;
color:#fff;
}
}
}
</style>
<template>
<div class="main_content">
<CardList class="box-card" v-for="(item, index) in stepOneList" :key="index" :cardList="item" />
<CardList class="box-card" v-for="(item, index) in data" :key="index" :cardList="item" />
<!-- <div class="step_next step_btn" @click="handleNext">下一步</div> -->
</div>
</template>
......@@ -13,11 +13,7 @@ export default {
CardList
},
props: {
activeStep: {
type: Number,
default: 0
},
stepOneList: {
data: {
type: Array
}
},
......@@ -28,7 +24,7 @@ export default {
// 下一步
handleStepOne() {
let flag = true
this.stepOneList.forEach(item =>
this.data.forEach(item =>
item.form.personAttribute.forEach(it => {
if (it.equal === '' || it.personal === '' || it.range === '') {
flag = false
......
<template>
<div class="mail-three-box">
<div class="content-left">
<template v-if="showFlag">
<edit-style
v-for="(item, index) in toolList"
:key="index"
v-bind="item"
@data="setStyleData"
:toolIndex="index"
></edit-style>
<div class="upload-img">
<div class="btn">上传图片</div>
<UploadImage class="upload" style="width: 50px" v-model="imgParams.url" @input="uploadImg"></UploadImage>
</div>
</template>
</div>
<div class="content-right">
<div class="phone-box">
<div class="card-content">
<div class="img" :style="`background-image:url(${imgParams.url});`"></div>
<div class="title" :style="titleParams.style">{{ titleParams.textValue || '请输入' }}</div>
<div class="desc" :style="describeParams.style">{{ describeParams.textValue || '请输入' }}</div>
<div class="btn" :style="btnParams.style">{{ btnParams.textValue || '请输入' }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
import UploadImage from '@/components/upload/UploadImage.vue'
import EditStyle from '@/components/base/EditStyle.vue'
export default {
components: { EditStyle, UploadImage },
props: ['data'],
data() {
return {
showFlag: false,
imgParams: { url: '' },
titleParams: {},
describeParams: {},
btnParams: {},
toolList: [
{
type: 'input',
dataFlag: 'titleParams',
title: '推送标题',
subTitle: '标题栏',
tool: [
{ name: 'fontSize', value: '14px' },
{ name: 'fontColor', value: '#333333' },
{ name: 'fontLineH', value: '20px' },
{ name: 'fontFamily' }
]
},
{
type: 'input',
dataFlag: 'describeParams',
title: '推送内容',
subTitle: '内容栏',
tool: [
{ name: 'fontSize', value: '12px' },
{ name: 'fontColor', value: '#6D6D71' },
{ name: 'fontLineH', value: '20px' },
{ name: 'fontFamily' }
]
},
{
type: 'input',
dataFlag: 'btnParams',
title: '按钮',
subTitle: '按钮',
tool: [
{ name: 'borderRadius', value: '4px' },
{ name: 'bgColor', value: '#49BBA2' },
{ name: 'fontSize', value: '12px' },
{ name: 'fontColor', value: '#fff' },
{ name: 'fontLineH', value: '20px' },
{ name: 'fontPosition' }
]
}
]
}
},
created() {
},
mounted() {
if (Object.keys(this.data).length) {
this.dataEcho()
} else {
this.showFlag = true
}
},
methods: {
// 数据回显
dataEcho() {
this.titleParams = this.data.titleParams
this.imgParams = this.data.imgParams
this.describeParams = this.data.describeParams
this.btnParams = this.data.btnParams
this.toolList.map(item => {
item.echoData = Object.assign({}, this.data[item.dataFlag])
delete item.echoData.originalData
item.tool = this.data[item.dataFlag].originalData
return item
})
this.showFlag = true
},
// 传回父组件需要提交缓存的数据
makePreview() {
const params = {
titleParams: this.titleParams,
imgParams: this.imgParams,
describeParams: this.describeParams,
btnParams: this.btnParams
}
for (const data in params) {
if (params[data].textValue === '' || this.imgParams.url === '') {
this.$message({
message: '请编辑主题',
type: 'warning'
})
return false
}
}
return params
},
// 上传图片
uploadImg() {},
// 设置样式 组合数据
setStyleData(data) {
switch (data.toolIndex) {
case 0:
this.titleParams = data
break
case 1:
this.describeParams = data
break
case 2:
this.btnParams = data
break
}
}
}
}
</script>
<style lang="scss" scoped>
.mail-three-box {
margin-bottom: 20px;
display: flex;
.content-left {
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
padding: 30px 30px 0;
.upload-img {
position: relative;
.btn {
width: 321px;
height: 40px;
background: rgba(237, 245, 243, 0.39);
border: 1px solid #80d6c4;
border-radius: 8px;
font-size: 14px;
line-height: 40px;
color: #49bba2;
cursor: pointer;
text-align: center;
}
.upload {
position: absolute;
top: 0;
left: 0;
opacity: 0.00001;
::v-deep {
.el-upload {
width: 320px;
height: 40px;
}
}
}
}
}
.content-right {
width: 588px;
padding-top: 95px;
box-sizing: border-box;
.phone-box{
margin: 0 auto;
width: 236px;
height: 474px;
background: url(https://webapp-pub.ezijing.com/x-training-new/phone-app.png);
background-size: 100% 100%;
position: relative;
.card-content{
width: 164px;
position: absolute;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
background: rgba(255, 255, 255, 1);
border-radius: 6px;
.img{
height: 87px;
background-size:100% 100%;
}
.title{
padding: 15px 0 5px;
font-size: 14px;
font-weight: bold;
line-height: 20px;
color: #333333;
text-align: center;
}
.desc{
width: 137px;
font-size: 12px;
line-height: 20px;
color: #6D6D71;
margin: 0 auto;
}
.btn{
width: 137px;
background: #49BBA2;
border-radius: 4px;
text-align: center;
line-height: 20px;
font-size: 12px;
margin: 22px auto 12px;
color:#fff;
}
}
}
}
}
</style>
<template>
<div>
<StepTab :tabList="tabList" @tabActive="handleTab">
<StepTab :tabList="tabList" @tabActive="handleTab" :index="data.index">
<template #plan_title>启动事件</template>
<template #trigger_title>触发事件</template>
<template #trigger_con>
<div v-if="showIndex === 0">
<AppStartUp :form="stepTwoList" />
<div v-if="data.index === 0">
<AppStartUp :form="data.list" />
</div>
<div v-if="showIndex === 1">
<AppTodoList :form="stepTwoList2" />
<div v-if="data.index === 1">
<AppTodoList :form="data.list2" />
</div>
</template>
</StepTab>
......@@ -22,18 +22,11 @@ import AppStartUp from './AppStartUp.vue'
export default {
components: { StepTab, AppTodoList, AppStartUp },
props: {
stepTwoList2: {
type: Array
},
stepTwoList: {
type: Array
}
data: { type: Object }
},
data() {
return {
caseId: '',
showIndex: 0,
// tab切换列表
tabList: [
{
......@@ -52,26 +45,32 @@ export default {
methods: {
handleTab(index) {
this.showIndex = index
this.data.index = index
},
handleStepTwo() {
this.$emit('getShowIndex', this.showIndex)
let flag = true
if (this.showIndex === 0) {
this.stepTwoList[0].form.triggerList.forEach(item => {
if (item.startValue === '') {
flag = false
}
if (this.data.index === 0) {
this.data.list.forEach(item => {
item.form.triggerList.forEach(cItem => {
if (cItem.startValue === '') {
flag = false
} else {
if (cItem.startValue === 'trigger' && cItem.triggerValue === '') {
flag = false
}
}
})
})
} else if (this.showIndex === 1) {
this.stepTwoList2[0].form.triggerList.forEach(item => {
if (item.triggerValue === '') {
flag = false
}
}
if (this.data.index === 1) {
this.data.list2.forEach(item => {
item.form.triggerList.forEach(cItem => {
if (cItem.triggerValue === '') {
flag = false
}
})
})
}
if (!flag) {
this.$message.warning('请完善改步骤后才能进入下一步')
}
......
......@@ -39,57 +39,17 @@
<div class="card">
<div class="title">展示内容</div>
<div class="content">
<div class="bg"></div>
<div class="card-dom">
<div class="title" :style="`${getPosition(data.stepThree.titleParams.position)}${data.stepThree.titleParams.style}`">{{ data.stepThree.titleParams.textValue }}</div>
<div class="describe" :style="`${getPosition(data.stepThree.describeParams.position)}${data.stepThree.describeParams.style}`">{{ data.stepThree.describeParams.textValue }}</div>
<div class="btn" :style="`${getPosition(data.stepThree.btnParams.position)}${data.stepThree.btnParams.style}`">{{ data.stepThree.btnParams.textValue }}</div>
<div class="img" :style="`background: url(${data.stepThree.imgParams.url});background-size:cover;${getPosition(data.stepThree.imgParams.position)}`"></div>
</div>
</div>
</div>
<!-- <div class="card">
<div class="title">营销方案</div>
<div class="ul-list">
<div class="li">
<div class="icon"></div>
<div class="text">计划类型:单次触发</div>
</div>
<div class="li">
<div class="icon"></div>
<div class="text">触发时间:2022-2-11 10:00:00</div>
</div>
<div class="li">
<div class="icon"></div>
<div class="text">计划类型:条件触发</div>
</div>
<div class="li">
<div class="icon"></div>
<div class="text">条件1</div>
</div>
<div class="li">
<div class="icon"></div>
<div class="text">条件2</div>
<div style="width: 966.4px;height: 453.88px; position: absolute;top: 38px;left: 50%;transform: translateX(-50%);">
<div class="bg"></div>
<div class="card-dom">
<div class="title" :style="`${getPosition(data.stepThree.titleParams.position)}${data.stepThree.titleParams.style}`">{{ data.stepThree.titleParams.textValue }}</div>
<div class="describe" :style="`${getPosition(data.stepThree.describeParams.position)}${data.stepThree.describeParams.style}`">{{ data.stepThree.describeParams.textValue }}</div>
<div class="btn" :style="`${getPosition(data.stepThree.btnParams.position)}${data.stepThree.btnParams.style}`">{{ data.stepThree.btnParams.textValue }}</div>
<div class="img" :style="`background: url(${data.stepThree.imgParams.url});background-size:cover;${getPosition(data.stepThree.imgParams.position)}`"></div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="title">营销方案</div>
<div class="ul-list">
<div class="li">
<div class="icon"></div>
<div class="text">计划类型:条件触发</div>
</div>
<div class="li">
<div class="icon"></div>
<div class="text">条件1</div>
</div>
<div class="li">
<div class="icon"></div>
<div class="text">条件2</div>
</div>
</div>
</div> -->
</div>
</template>
......@@ -107,10 +67,13 @@ export default {
},
// 获取位置值
getPosition(item) {
if (item.left && item.top) {
return `left: ${item.left}px;top: ${item.top}px;`
} else {
return item.left ? `left: ${item.left}px;` : item.top ? `top: ${item.top}px;` : ''
console.log(item, '111')
if (item) {
if (item.left && item.top) {
return `left: ${item.left}px;top: ${item.top}px;`
} else {
return item.left ? `left: ${item.left}px;` : item.top ? `top: ${item.top}px;` : ''
}
}
}
}
......@@ -126,14 +89,15 @@ export default {
border-radius: 16px;
margin-bottom: 20px;
padding: 20px;
position: relative;
.content {
height: 500px;
position: relative;
.bg {
position: absolute;
top: 38px;
left: 50%;
transform: translateX(-50%);
// position: absolute;
// top: 38px;
// left: 50%;
// transform: translateX(-50%);
width: 966.4px;
height: 453.88px;
background: url(https://webapp-pub.ezijing.com/x-training-new/dn-bg.png);
......@@ -146,8 +110,8 @@ export default {
background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
position: absolute;
top: 195px;
left: 180px;
top: 155px;
left: 235px;
z-index: 2;
.title {
width: 140px;
......
<template>
<div>
<ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" />
<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"
:stepTwoList2="stepTwoList2"
ref="mailStepTwo"
@getShowIndex="getShowIndex"
/>
<div class="main_content_btn">
<Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
<div style="flex: 1">
<AppStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" />
<AppStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
<AppStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
<AppStepFour v-if="activeStep === 3" class="step-four" :data="form" />
<div class="main_content_btn" v-if="this.$route.query.view != 1">
<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="handleNext" v-if="activeStep === 2">点击生成预览</div>
<div class="step_finished step_btn" @click="handlePlan" v-if="activeStep === 3">执行营销计划</div>
</div>
</div>
......@@ -33,78 +22,102 @@
import stepOne from '@/utils/stepOne'
import appStepTwo from '@/utils/appStepTwo'
import stepTwo from '@/utils/stepTwo'
import { cacheReport, getReportDetail, checkRecord } from '../api'
import { cacheReport, getReportDetail, checkRecord, submitReport } from '../api'
import ToolCard from '@/components/base/ToolCard.vue'
import AppStepOne from '../components/app/AppStepOne.vue'
import Step from '@/components/base/Step.vue'
import AppStepTwo from '../components/app/AppStepTwo.vue'
import AppStepThree from '../components/app/AppStepThree.vue'
import AppStepFour from '../components/app/AppStepFour.vue'
export default {
components: {
ToolCard,
AppStepOne,
Step,
AppStepTwo
AppStepTwo,
AppStepThree,
AppStepFour
},
data() {
return {
form: {
stepOne: stepOne,
stepTwo: {
index: 0,
list: appStepTwo,
list2: stepTwo
},
stepThree: {}
},
activeStep: 0,
stepOneList: [],
stepTwoList: [],
stepTwoList2: [],
caseId: '',
showIndex: ''
caseId: ''
}
},
methods: {
getShowIndex(val) {
this.showIndex = val
},
// 上一步
handlePrev() {
this.handleStep(2)
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)
}
// 找到对应步骤,调用组件内部方法检查未填
switch (this.activeStep) {
case 0:
this.$refs.stepOne.handleStepOne() && this.handleStep()
break
case 1:
this.$refs.stepTwo.handleStepTwo() && this.handleStep()
break
case 2:
if (this.$refs.stepThree.makePreview() !== false) {
this.form.stepThree = this.$refs.stepThree.makePreview()
this.handleStep()
}
break
}
},
handleStep(val) {
handleStep() {
const reports = {
activeStep: parseInt(val),
activeStep: this.activeStep + 1,
type: 3,
commit_report: [{ stepOneList: this.stepOneList }, { form: this.stepTwoList, form1: this.stepTwoList2 }]
commit_report: this.form
}
cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
this.caseId = res.data.id
if (val === 2) {
this.activeStep--
} else {
this.activeStep++
}
this.activeStep++
})
},
// 预览
handlePreview() {
this.activeStep++
handlePlan() {
const reports = {
id: this.caseId || this.$route.query.id,
reports: JSON.stringify({
type: 3,
commit_report: this.form
})
}
submitReport(reports).then(res => {
if (res.code === 0) {
this.$router.push({
path: '/works-show/history',
query: {
type: 3
}
})
}
})
},
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.stepTwoList = res.data.detail.answer.commit_report[1].form
this.stepTwoList2 = res.data.detail.answer.commit_report[1].form1
if (parseInt(this.$route.query.view) === 1) {
this.activeStep = 3
} else {
this.activeStep = res.data.detail.answer.activeStep
}
this.form = res.data.detail.answer.commit_report
}
})
},
......@@ -112,26 +125,14 @@ export default {
checkRecord() {
checkRecord(this.$store.state.case.id, 2).then(res => {
if (res.data.status === true) {
const answerList = res.data.items.filter(item => item.type === 3)
if (res.data.items.length && answerList.length) {
this.activeStep = answerList[0].answer.activeStep
this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
this.stepTwoList = answerList[0].answer.commit_report[1].form
this.stepTwoList2 = answerList[0].answer.commit_report[1].form1
} else {
this.initStepList()
const answerList = res.data.items.find(item => item.type === 3)
this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report
}
} else {
this.initStepList()
}
})
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne
this.stepTwoList = appStepTwo
this.stepTwoList2 = stepTwo
}
},
mounted() {
......@@ -186,4 +187,10 @@ export default {
.pt-50 {
padding-top: 50px;
}
.step-four {
padding: 42px 35px;
flex: 1;
border-left: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
</style>
<template>
<div>
<ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" />
<Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
<div style="flex: 1">
<MailStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="mailStepOne" />
<MailStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" ref="mailStepTwo" />
<MailStepThree :data="form.stepThree" ref="mailStepThree" v-if="activeStep === 2" />
<MailStepFour :data="form" class="step-four" v-if="activeStep === 3"></MailStepFour>
<div class="main_content_btn">
<div class="main_content_btn" v-if="this.$route.query.view != 1">
<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="handleNext" v-if="activeStep === 2">点击生成预览</div>
......@@ -116,7 +116,11 @@ export default {
getReportDetail(id) {
getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 2) {
this.activeStep = res.data.detail.answer.activeStep
if (parseInt(this.$route.query.view) === 1) {
this.activeStep = 3
} else {
this.activeStep = res.data.detail.answer.activeStep
}
this.form = res.data.detail.answer.commit_report
}
})
......@@ -127,6 +131,7 @@ export default {
if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 2)
this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report
}
......
<template>
<div>
<ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" />
<Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
<div style="flex: 1">
<SmsStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" />
<SmsStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
<SmsStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
<SmsStepFour :data="form" class="step-four" v-if="activeStep === 3" />
<div class="main_content_btn">
<div class="main_content_btn" v-if="this.$route.query.view != 1">
<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="handleNext" v-if="activeStep === 2">点击生成预览</div>
......@@ -119,7 +119,11 @@ export default {
getReportDetail(id) {
getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 4) {
this.activeStep = res.data.detail.answer.activeStep
if (parseInt(this.$route.query.view) === 1) {
this.activeStep = 3
} else {
this.activeStep = res.data.detail.answer.activeStep
}
this.form = res.data.detail.answer.commit_report
}
})
......@@ -130,6 +134,7 @@ export default {
if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 4)
this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report
console.log(this.form, 'form')
......
<template>
<div>
<ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" />
<Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
<div style="flex: 1">
<ChatStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="ChatStepOne" />
<ChatStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" />
<ChatStepThree v-if="activeStep === 2" :data="form.stepThree" ref="ChatStepThree"/>
<ChatStepFour :data="form" class="step-four" v-if="activeStep === 3" />
<div class="main_content_btn">
{{ activeStep }}
<div class="main_content_btn" v-if="this.$route.query.view != 1">
<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="handleNext" v-if="activeStep === 2">点击生成预览</div>
......@@ -109,8 +110,13 @@ export default {
// 获取步骤信息回显
getReportDetail(id) {
getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 2) {
this.activeStep = res.data.detail.answer.activeStep
if (res.data.detail.answer.type === 5) {
console.log(parseInt(this.$route.query.view), '123')
if (parseInt(this.$route.query.view) === 1) {
this.activeStep = 3
} else {
this.activeStep = res.data.detail.answer.activeStep
}
this.form = res.data.detail.answer.commit_report
}
})
......@@ -121,6 +127,7 @@ export default {
if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 5)
this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report
}
......
......@@ -103,7 +103,7 @@
<script>
import { getProdRecords, getUserRecords, getToolRecords } from '../api'
import { selectCase } from '@/api/base'
const toolTypeMap = { 1: '抖音' }
const toolTypeMap = { 1: '抖音', 2: '邮件', 3: 'App', 4: '移动短信', 5: '微信提醒' }
export default {
data() {
return {
......@@ -227,15 +227,15 @@ export default {
const _type = val.is_complete === 1 ? '1' : '0'
console.log('111')
if (val.type === 1) {
this.$router.push({ path: '/market-tools/douYin', query: { id: val.id, type: _type } })
this.$router.push({ path: '/market-tools/douYin', query: { id: val.id, type: _type, view: val.is_complete } })
} else if (val.type === 2) {
this.$router.push({ path: '/market-tools/mail', query: { id: val.id, type: _type } })
this.$router.push({ path: '/market-tools/mail', query: { id: val.id, type: _type, view: val.is_complete } })
} else if (val.type === 3) {
this.$router.push({ path: '/market-tools/app', query: { id: val.id, type: _type } })
this.$router.push({ path: '/market-tools/app', query: { id: val.id, type: _type, view: val.is_complete } })
} else if (val.type === 4) {
this.$router.push({ path: '/market-tools/sms', query: { id: val.id, type: _type } })
this.$router.push({ path: '/market-tools/sms', query: { id: val.id, type: _type, view: val.is_complete } })
} else if (val.type === 5) {
this.$router.push({ path: '/market-tools/weChat', query: { id: val.id, type: _type } })
this.$router.push({ path: '/market-tools/weChat', query: { id: val.id, type: _type, view: val.is_complete } })
}
break
}
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论