Skip to content

X
x-training-new
提交 91e61ac2 authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update

上级 af8d5b7b
隐藏空白字符变更
内嵌 并排
正在显示 包含 611 行增加 和 189 行删除
src/components/base/EditStyle.vue
浏览文件 @ 91e61ac2
...@@ -3,16 +3,26 @@ ...@@ -3,16 +3,26 @@
<div class="title">{{ title }}</div> <div class="title">{{ title }}</div>
<div class="f-type"> <div class="f-type">
<div class="tit">{{ subTitle }}</div> <div class="tit">{{ subTitle }}</div>
<div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom"> <template v-if="!type">
点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }} <div :class="returnData.show === false ? 'active btn' : 'btn'" @click="handleDom">
</div> 点击{{ returnData.show || returnData.show === undefined ? '创建' : '删除' }}{{ subTitle }}
<el-input </div>
:maxlength="valueMaxLength" <el-input
v-if="returnData.show === false" :maxlength="valueMaxLength"
style="margin-top: 15px" v-if="returnData.show === false"
v-model="returnData.textValue" style="margin-top: 15px"
placeholder="请输入" v-model="returnData.textValue"
></el-input> 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>
<div class="tool-select"> <div class="tool-select">
<div v-for="(item, index) in toolList" :key="index"> <div v-for="(item, index) in toolList" :key="index">
...@@ -62,6 +72,7 @@ ...@@ -62,6 +72,7 @@
<script> <script>
export default { export default {
props: { props: {
type: { type: String },
// 工具框大标题 // 工具框大标题
title: { type: String }, title: { type: String },
// 工具框小标题 // 工具框小标题
......
src/modules/market-tools/components/app/AppStepFour.vue 0 → 100644
浏览文件 @ 91e61ac2
<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>
src/modules/market-tools/components/app/AppStepOne.vue
浏览文件 @ 91e61ac2
<template> <template>
<div class="main_content"> <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 class="step_next step_btn" @click="handleNext">下一步</div> -->
</div> </div>
</template> </template>
...@@ -13,11 +13,7 @@ export default { ...@@ -13,11 +13,7 @@ export default {
CardList CardList
}, },
props: { props: {
activeStep: { data: {
type: Number,
default: 0
},
stepOneList: {
type: Array type: Array
} }
}, },
...@@ -28,7 +24,7 @@ export default { ...@@ -28,7 +24,7 @@ export default {
// 下一步 // 下一步
handleStepOne() { handleStepOne() {
let flag = true let flag = true
this.stepOneList.forEach(item => this.data.forEach(item =>
item.form.personAttribute.forEach(it => { item.form.personAttribute.forEach(it => {
if (it.equal === '' || it.personal === '' || it.range === '') { if (it.equal === '' || it.personal === '' || it.range === '') {
flag = false flag = false
......
src/modules/market-tools/components/app/AppStepThree.vue 0 → 100644
浏览文件 @ 91e61ac2
<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>
src/modules/market-tools/components/app/AppStepTwo.vue
浏览文件 @ 91e61ac2
<template> <template>
<div> <div>
<StepTab :tabList="tabList" @tabActive="handleTab"> <StepTab :tabList="tabList" @tabActive="handleTab" :index="data.index">
<template #plan_title>启动事件</template> <template #plan_title>启动事件</template>
<template #trigger_title>触发事件</template> <template #trigger_title>触发事件</template>
<template #trigger_con> <template #trigger_con>
<div v-if="showIndex === 0"> <div v-if="data.index === 0">
<AppStartUp :form="stepTwoList" /> <AppStartUp :form="data.list" />
</div> </div>
<div v-if="showIndex === 1"> <div v-if="data.index === 1">
<AppTodoList :form="stepTwoList2" /> <AppTodoList :form="data.list2" />
</div> </div>
</template> </template>
</StepTab> </StepTab>
...@@ -22,18 +22,11 @@ import AppStartUp from './AppStartUp.vue' ...@@ -22,18 +22,11 @@ import AppStartUp from './AppStartUp.vue'
export default { export default {
components: { StepTab, AppTodoList, AppStartUp }, components: { StepTab, AppTodoList, AppStartUp },
props: { props: {
stepTwoList2: { data: { type: Object }
type: Array
},
stepTwoList: {
type: Array
}
}, },
data() { data() {
return { return {
caseId: '',
showIndex: 0,
// tab切换列表 // tab切换列表
tabList: [ tabList: [
{ {
...@@ -52,26 +45,32 @@ export default { ...@@ -52,26 +45,32 @@ export default {
methods: { methods: {
handleTab(index) { handleTab(index) {
this.showIndex = index this.data.index = index
}, },
handleStepTwo() { handleStepTwo() {
this.$emit('getShowIndex', this.showIndex)
let flag = true let flag = true
if (this.showIndex === 0) { if (this.data.index === 0) {
this.stepTwoList[0].form.triggerList.forEach(item => { this.data.list.forEach(item => {
if (item.startValue === '') { item.form.triggerList.forEach(cItem => {
flag = false 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 (this.data.index === 1) {
if (item.triggerValue === '') { this.data.list2.forEach(item => {
flag = false item.form.triggerList.forEach(cItem => {
} if (cItem.triggerValue === '') {
flag = false
}
})
}) })
} }
if (!flag) { if (!flag) {
this.$message.warning('请完善改步骤后才能进入下一步') this.$message.warning('请完善改步骤后才能进入下一步')
} }
......
src/modules/market-tools/components/mail/MailStepFour.vue
浏览文件 @ 91e61ac2
...@@ -39,57 +39,17 @@ ...@@ -39,57 +39,17 @@
<div class="card"> <div class="card">
<div class="title">展示内容</div> <div class="title">展示内容</div>
<div class="content"> <div class="content">
<div class="bg"></div> <div style="width: 966.4px;height: 453.88px; position: absolute;top: 38px;left: 50%;transform: translateX(-50%);">
<div class="card-dom"> <div class="bg"></div>
<div class="title" :style="`${getPosition(data.stepThree.titleParams.position)}${data.stepThree.titleParams.style}`">{{ data.stepThree.titleParams.textValue }}</div> <div class="card-dom">
<div class="describe" :style="`${getPosition(data.stepThree.describeParams.position)}${data.stepThree.describeParams.style}`">{{ data.stepThree.describeParams.textValue }}</div> <div class="title" :style="`${getPosition(data.stepThree.titleParams.position)}${data.stepThree.titleParams.style}`">{{ data.stepThree.titleParams.textValue }}</div>
<div class="btn" :style="`${getPosition(data.stepThree.btnParams.position)}${data.stepThree.btnParams.style}`">{{ data.stepThree.btnParams.textValue }}</div> <div class="describe" :style="`${getPosition(data.stepThree.describeParams.position)}${data.stepThree.describeParams.style}`">{{ data.stepThree.describeParams.textValue }}</div>
<div class="img" :style="`background: url(${data.stepThree.imgParams.url});background-size:cover;${getPosition(data.stepThree.imgParams.position)}`"></div> <div class="btn" :style="`${getPosition(data.stepThree.btnParams.position)}${data.stepThree.btnParams.style}`">{{ data.stepThree.btnParams.textValue }}</div>
</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> </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> </div>
</template> </template>
...@@ -107,10 +67,13 @@ export default { ...@@ -107,10 +67,13 @@ export default {
}, },
// 获取位置值 // 获取位置值
getPosition(item) { getPosition(item) {
if (item.left && item.top) { console.log(item, '111')
return `left: ${item.left}px;top: ${item.top}px;` if (item) {
} else { if (item.left && item.top) {
return item.left ? `left: ${item.left}px;` : item.top ? `top: ${item.top}px;` : '' 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 { ...@@ -126,14 +89,15 @@ export default {
border-radius: 16px; border-radius: 16px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 20px; padding: 20px;
position: relative;
.content { .content {
height: 500px; height: 500px;
position: relative; position: relative;
.bg { .bg {
position: absolute; // position: absolute;
top: 38px; // top: 38px;
left: 50%; // left: 50%;
transform: translateX(-50%); // transform: translateX(-50%);
width: 966.4px; width: 966.4px;
height: 453.88px; height: 453.88px;
background: url(https://webapp-pub.ezijing.com/x-training-new/dn-bg.png); background: url(https://webapp-pub.ezijing.com/x-training-new/dn-bg.png);
...@@ -146,8 +110,8 @@ export default { ...@@ -146,8 +110,8 @@ export default {
background: rgba(255, 255, 255, 0.39); background: rgba(255, 255, 255, 0.39);
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12); box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
position: absolute; position: absolute;
top: 195px; top: 155px;
left: 180px; left: 235px;
z-index: 2; z-index: 2;
.title { .title {
width: 140px; width: 140px;
......
src/modules/market-tools/views/App.vue
浏览文件 @ 91e61ac2
<template> <template>
<div> <div>
<ToolCard class="main_content"> <ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" /> <Step :activeStep="activeStep" class="pt50-pl60" v-if="this.$route.query.view != 1"/>
<div> <div style="flex: 1">
<AppStepOne <AppStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" />
v-if="activeStep === 0" <AppStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
class="pt-50" <AppStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
:activeStep="activeStep" <AppStepFour v-if="activeStep === 3" class="step-four" :data="form" />
:stepOneList="stepOneList" <div class="main_content_btn" v-if="this.$route.query.view != 1">
ref="mailStepOne"
/>
<AppStepTwo
v-if="activeStep === 1"
class="pt-50"
:stepTwoList="stepTwoList"
:stepTwoList2="stepTwoList2"
ref="mailStepTwo"
@getShowIndex="getShowIndex"
/>
<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_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 class="step_finished step_btn" @click="handlePlan" v-if="activeStep === 3">执行营销计划</div>
</div> </div>
</div> </div>
...@@ -33,78 +22,102 @@ ...@@ -33,78 +22,102 @@
import stepOne from '@/utils/stepOne' import stepOne from '@/utils/stepOne'
import appStepTwo from '@/utils/appStepTwo' import appStepTwo from '@/utils/appStepTwo'
import stepTwo from '@/utils/stepTwo' 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 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'
import AppStepTwo from '../components/app/AppStepTwo.vue' import AppStepTwo from '../components/app/AppStepTwo.vue'
import AppStepThree from '../components/app/AppStepThree.vue'
import AppStepFour from '../components/app/AppStepFour.vue'
export default { export default {
components: { components: {
ToolCard, ToolCard,
AppStepOne, AppStepOne,
Step, Step,
AppStepTwo AppStepTwo,
AppStepThree,
AppStepFour
}, },
data() { data() {
return { return {
form: {
stepOne: stepOne,
stepTwo: {
index: 0,
list: appStepTwo,
list2: stepTwo
},
stepThree: {}
},
activeStep: 0, activeStep: 0,
stepOneList: [], stepOneList: [],
stepTwoList: [], caseId: ''
stepTwoList2: [],
caseId: '',
showIndex: ''
} }
}, },
methods: { methods: {
getShowIndex(val) {
this.showIndex = val
},
// 上一步 // 上一步
handlePrev() { handlePrev() {
this.handleStep(2) this.activeStep--
}, },
// 下一步 // 下一步
handleNext() { handleNext() {
if (this.activeStep === 0) { // 找到对应步骤，调用组件内部方法检查未填
if (this.$refs.mailStepOne.handleStepOne()) { switch (this.activeStep) {
// 保存步骤信息 case 0:
this.handleStep(0) this.$refs.stepOne.handleStepOne() && this.handleStep()
} break
} else if (this.activeStep === 1) { case 1:
if (this.$refs.mailStepTwo.handleStepTwo()) { this.$refs.stepTwo.handleStepTwo() && this.handleStep()
this.handleStep(1) break
} case 2:
if (this.$refs.stepThree.makePreview() !== false) {
this.form.stepThree = this.$refs.stepThree.makePreview()
this.handleStep()
}
break
} }
}, },
handleStep(val) { handleStep() {
const reports = { const reports = {
activeStep: parseInt(val), activeStep: this.activeStep + 1,
type: 3, 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 => { cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
this.caseId = res.data.id this.caseId = res.data.id
if (val === 2) { this.activeStep++
this.activeStep--
} else {
this.activeStep++
}
}) })
}, },
// 预览 handlePlan() {
handlePreview() { const reports = {
this.activeStep++ 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) {
getReportDetail(id).then(res => { getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 3) { if (res.data.detail.answer.type === 3) {
this.activeStep = res.data.detail.answer.activeStep if (parseInt(this.$route.query.view) === 1) {
this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList this.activeStep = 3
this.stepTwoList = res.data.detail.answer.commit_report[1].form } else {
this.stepTwoList2 = res.data.detail.answer.commit_report[1].form1 this.activeStep = res.data.detail.answer.activeStep
}
this.form = res.data.detail.answer.commit_report
} }
}) })
}, },
...@@ -112,26 +125,14 @@ export default { ...@@ -112,26 +125,14 @@ export default {
checkRecord() { checkRecord() {
checkRecord(this.$store.state.case.id, 2).then(res => { checkRecord(this.$store.state.case.id, 2).then(res => {
if (res.data.status === true) { if (res.data.status === true) {
const answerList = res.data.items.filter(item => item.type === 3) const answerList = res.data.items.find(item => item.type === 3)
if (res.data.items.length && answerList.length) { this.activeStep = answerList.answer.activeStep || 0
this.activeStep = answerList[0].answer.activeStep this.caseId = answerList.id
this.stepOneList = answerList[0].answer.commit_report[0].stepOneList if (Object.keys(answerList).length) {
this.stepTwoList = answerList[0].answer.commit_report[1].form this.form = answerList.answer.commit_report
this.stepTwoList2 = answerList[0].answer.commit_report[1].form1
} else {
this.initStepList()
} }
} else {
this.initStepList()
} }
}) })
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne
this.stepTwoList = appStepTwo
this.stepTwoList2 = stepTwo
} }
}, },
mounted() { mounted() {
...@@ -186,4 +187,10 @@ export default { ...@@ -186,4 +187,10 @@ export default {
.pt-50 { .pt-50 {
padding-top: 50px; padding-top: 50px;
} }
.step-four {
padding: 42px 35px;
flex: 1;
border-left: 1px solid #dedede;
border-bottom: 1px solid #dedede;
}
</style> </style>
src/modules/market-tools/views/Mail.vue
浏览文件 @ 91e61ac2
<template> <template>
<div> <div>
<ToolCard class="main_content"> <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"> <div style="flex: 1">
<MailStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="mailStepOne" /> <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" /> <MailStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" ref="mailStepTwo" />
<MailStepThree :data="form.stepThree" ref="mailStepThree" v-if="activeStep === 2" /> <MailStepThree :data="form.stepThree" ref="mailStepThree" v-if="activeStep === 2" />
<MailStepFour :data="form" class="step-four" v-if="activeStep === 3"></MailStepFour> <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_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_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> <div class="step_finished step_btn" @click="handleNext" v-if="activeStep === 2">点击生成预览</div>
...@@ -116,7 +116,11 @@ export default { ...@@ -116,7 +116,11 @@ export default {
getReportDetail(id) { getReportDetail(id) {
getReportDetail(id).then(res => { getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 2) { 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 this.form = res.data.detail.answer.commit_report
} }
}) })
...@@ -127,6 +131,7 @@ export default { ...@@ -127,6 +131,7 @@ export default {
if (res.data.status === true) { if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 2) const answerList = res.data.items.find(item => item.type === 2)
this.activeStep = answerList.answer.activeStep || 0 this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) { if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report this.form = answerList.answer.commit_report
} }
......
src/modules/market-tools/views/MobileSms.vue
浏览文件 @ 91e61ac2
<template> <template>
<div> <div>
<ToolCard class="main_content"> <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"> <div style="flex: 1">
<SmsStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="stepOne" /> <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" /> <SmsStepTwo v-if="activeStep === 1" class="pt-50" ref="stepTwo" :data="form.stepTwo" />
<SmsStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" /> <SmsStepThree v-if="activeStep === 2" :data="form.stepThree" ref="stepThree" />
<SmsStepFour :data="form" class="step-four" v-if="activeStep === 3" /> <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_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_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> <div class="step_finished step_btn" @click="handleNext" v-if="activeStep === 2">点击生成预览</div>
...@@ -119,7 +119,11 @@ export default { ...@@ -119,7 +119,11 @@ export default {
getReportDetail(id) { getReportDetail(id) {
getReportDetail(id).then(res => { getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 4) { 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 this.form = res.data.detail.answer.commit_report
} }
}) })
...@@ -130,6 +134,7 @@ export default { ...@@ -130,6 +134,7 @@ export default {
if (res.data.status === true) { if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 4) const answerList = res.data.items.find(item => item.type === 4)
this.activeStep = answerList.answer.activeStep || 0 this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) { if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report this.form = answerList.answer.commit_report
console.log(this.form, 'form') console.log(this.form, 'form')
......
src/modules/market-tools/views/WeChat.vue
浏览文件 @ 91e61ac2
<template> <template>
<div> <div>
<ToolCard class="main_content"> <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"> <div style="flex: 1">
<ChatStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="ChatStepOne" /> <ChatStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="ChatStepOne" />
<ChatStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" /> <ChatStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" />
<ChatStepThree v-if="activeStep === 2" :data="form.stepThree" ref="ChatStepThree"/> <ChatStepThree v-if="activeStep === 2" :data="form.stepThree" ref="ChatStepThree"/>
<ChatStepFour :data="form" class="step-four" v-if="activeStep === 3" /> <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_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_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> <div class="step_finished step_btn" @click="handleNext" v-if="activeStep === 2">点击生成预览</div>
...@@ -109,8 +110,13 @@ export default { ...@@ -109,8 +110,13 @@ export default {
// 获取步骤信息回显 // 获取步骤信息回显
getReportDetail(id) { getReportDetail(id) {
getReportDetail(id).then(res => { getReportDetail(id).then(res => {
if (res.data.detail.answer.type === 2) { if (res.data.detail.answer.type === 5) {
this.activeStep = res.data.detail.answer.activeStep 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 this.form = res.data.detail.answer.commit_report
} }
}) })
...@@ -121,6 +127,7 @@ export default { ...@@ -121,6 +127,7 @@ export default {
if (res.data.status === true) { if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 5) const answerList = res.data.items.find(item => item.type === 5)
this.activeStep = answerList.answer.activeStep || 0 this.activeStep = answerList.answer.activeStep || 0
this.caseId = answerList.id
if (Object.keys(answerList).length) { if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report this.form = answerList.answer.commit_report
} }
......
src/modules/works-show/views/List.vue
浏览文件 @ 91e61ac2
...@@ -103,7 +103,7 @@ ...@@ -103,7 +103,7 @@
<script> <script>
import { getProdRecords, getUserRecords, getToolRecords } from '../api' import { getProdRecords, getUserRecords, getToolRecords } from '../api'
import { selectCase } from '@/api/base' import { selectCase } from '@/api/base'
const toolTypeMap = { 1: '抖音' } const toolTypeMap = { 1: '抖音', 2: '邮件', 3: 'App', 4: '移动短信', 5: '微信提醒' }
export default { export default {
data() { data() {
return { return {
...@@ -227,15 +227,15 @@ export default { ...@@ -227,15 +227,15 @@ export default {
const _type = val.is_complete === 1 ? '1' : '0' const _type = val.is_complete === 1 ? '1' : '0'
console.log('111') console.log('111')
if (val.type === 1) { 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) { } 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) { } 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) { } 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) { } 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 break
} }
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论