Skip to content

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

update

上级 2a2c1b2b
隐藏空白字符变更
内嵌 并排
正在显示 包含 137 行增加 和 154 行删除
src/components/base/StepTab.vue
浏览文件 @ 79418788
...@@ -33,11 +33,12 @@ export default { ...@@ -33,11 +33,12 @@ export default {
props: { props: {
tabList: { tabList: {
type: Array type: Array
} },
index: { type: Number }
}, },
data() { data() {
return { return {
activeTab: 0 activeTab: this.index || 0
} }
}, },
methods: { methods: {
......
src/modules/market-tools/components/mail/MailStepFour.vue
浏览文件 @ 79418788
<template> <template>
<div class="four-box"> <div class="four-box">
<div class="card" v-for="(item, index) in data.one" :key="index"> <div class="card" v-for="(item, index) in data.stepOne" :key="index">
<div class="title">{{ item.cardTitle }}</div> <div class="title">{{ item.cardTitle }}</div>
<div class="ul-list"> <div class="ul-list">
<div class="li" v-for="(cItem, cIndex) in item.form.personAttribute" :key="cIndex + 'c'"> <div class="li" v-for="(cItem, cIndex) in item.form.personAttribute" :key="cIndex + 'c'">
...@@ -13,16 +13,38 @@ ...@@ -13,16 +13,38 @@
</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">计划类型：{{ data.stepTwo.index ? '条件触发' : '单次触发' }}</div>
</div>
<template v-if="data.stepTwo.index">
<div class="li" v-for="(item, index) in data.stepTwo.list[0].form.triggerList" :key="index">
<div class="icon"></div>
<div class="text">当用户做过
{{ item.list.find(i => i.value === item.triggerValue).label }}
对目标用户进行触达</div>
</div>
</template>
<template v-else>
<div class="li">
<div class="icon"></div>
<div class="text">触发时间：{{ data.stepTwo.date }} {{ data.stepTwo.time }}</div>
</div>
</template>
</div>
</div>
<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 class="bg"></div>
<div class="card-dom"> <div class="card-dom">
<div class="title" :style="`${getPosition(data.three.titleParams.position)}${data.three.titleParams.style}`">{{ data.three.titleParams.textValue }}</div> <div class="title" :style="`${getPosition(data.stepThree.titleParams.position)}${data.stepThree.titleParams.style}`">{{ data.stepThree.titleParams.textValue }}</div>
<div class="describe" :style="`${getPosition(data.three.describeParams.position)}${data.three.describeParams.style}`">{{ data.three.describeParams.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.three.btnParams.position)}${data.three.btnParams.style}`">{{ data.three.btnParams.textValue }}</div> <div class="btn" :style="`${getPosition(data.stepThree.btnParams.position)}${data.stepThree.btnParams.style}`">{{ data.stepThree.btnParams.textValue }}</div>
<!-- {{ data.three.imgParams.position }} --> <div class="img" :style="`background: url(${data.stepThree.imgParams.url});background-size:cover;${getPosition(data.stepThree.imgParams.position)}`"></div>
<div class="img" :style="`background: url(${data.three.imgParams.url});background-size:cover;${getPosition(data.three.imgParams.position)}`"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -97,6 +119,7 @@ export default { ...@@ -97,6 +119,7 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
.four-box { .four-box {
margin-bottom: 20px;
.card { .card {
background: rgba(250, 250, 250, 0.39); background: rgba(250, 250, 250, 0.39);
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
......
src/modules/market-tools/components/mail/MailStepOne.vue
浏览文件 @ 79418788
<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/mail/MailStepThree.vue
浏览文件 @ 79418788
...@@ -161,7 +161,6 @@ export default { ...@@ -161,7 +161,6 @@ export default {
describeParams: this.describeParams, describeParams: this.describeParams,
btnParams: this.btnParams btnParams: this.btnParams
} }
console.log(params, 'params')
for (const data in params) { for (const data in params) {
if (params[data].show !== false) { if (params[data].show !== false) {
this.$message({ this.$message({
......
src/modules/market-tools/components/mail/MailStepTwo.vue
浏览文件 @ 79418788
<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">
在 &nbsp;&nbsp; 在 &nbsp;&nbsp;
<el-date-picker v-model="times" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd"> <el-date-picker v-model="data.date" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
</el-date-picker> </el-date-picker>
&nbsp;&nbsp; &nbsp;&nbsp;
<el-time-picker v-model="times2" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss"> <el-time-picker v-model="data.time" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
</el-time-picker> </el-time-picker>
&nbsp;&nbsp;对目标用户进行触达 &nbsp;&nbsp;对目标用户进行触达
</div> </div>
<div v-if="showIndex === 1"> <div v-if="data.index == 1">
<StepTodoList :form="stepTwoList" /> <StepTodoList :form="data.list" />
</div> </div>
</template> </template>
</StepTab> </StepTab>
...@@ -27,23 +27,11 @@ import StepTodoList from './StepTodoList.vue' ...@@ -27,23 +27,11 @@ import StepTodoList from './StepTodoList.vue'
export default { export default {
components: { StepTab, StepTodoList }, components: { StepTab, StepTodoList },
props: { props: {
stepTwoList: { data: { type: Object }
type: Array
},
time: {
type: String
},
time2: {
type: String
}
}, },
data() { data() {
return { return {
times: '',
times2: '',
caseId: '',
showIndex: 0,
// tab切换列表 // tab切换列表
tabList: [ tabList: [
{ {
...@@ -56,43 +44,29 @@ export default { ...@@ -56,43 +44,29 @@ export default {
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png', iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
tabName: '条件触发' tabName: '条件触发'
} }
], ]
activeIndexName: ''
} }
}, },
mounted() {
this.times = this.time
this.times2 = this.time2
},
methods: { methods: {
handleTab(index) { handleTab(index) {
this.showIndex = index this.data.index = index
}, },
handleStepTwo() { handleStepTwo() {
this.$emit('getTime', this.times, this.times2)
if (this.showIndex === 0) {
this.activeIndexName = '单次触发'
} else {
this.activeIndexName = '条件触发'
}
this.$emit('getShowIndex', this.activeIndexName)
let flag = true let flag = true
if (this.showIndex === 1) { if (this.data.index === 1) {
this.stepTwoList[0].form.triggerList.forEach(item => { this.data.list[0].form.triggerList.forEach(item => {
if (item.triggerValue === '') { if (item.triggerValue === '') {
flag = false flag = false
} }
}) })
} else if (this.showIndex === 0) { }
if (this.times === '' || this.times2 === '') { if (this.data.index === 0) {
if (this.data.date === '' || this.data.time === '') {
flag = false flag = false
} }
} }
if (!flag) { !flag && this.$message.warning('请完善改步骤后才能进入下一步')
this.$message.warning('请完善改步骤后才能进入下一步')
}
return flag return flag
} }
} }
......
src/modules/market-tools/components/mobileSms/SmsStepThree.vue
浏览文件 @ 79418788
...@@ -3,23 +3,32 @@ ...@@ -3,23 +3,32 @@
<div class="content-left"> <div class="content-left">
<div class="card-textarea"> <div class="card-textarea">
<div class="title">推送标题</div> <div class="title">推送标题</div>
<textarea placeholder="请输入"></textarea> <textarea v-model="form.title" placeholder="请输入"></textarea>
</div> </div>
<div class="card-textarea"> <div class="card-textarea">
<div class="title">推送内容</div> <div class="title">推送内容</div>
<textarea placeholder="请输入"></textarea> <textarea v-model="form.content" placeholder="请输入"></textarea>
</div> </div>
</div> </div>
<div class="content-right"> <div class="content-right">
<div class="right-box"> <div class="right-box">
<div class="text">{{ `【${form.title}】${form.content}` }}</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default {} export default {
data() {
return {
form: {
title: '',
content: ''
}
}
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
...@@ -61,12 +70,25 @@ export default {} ...@@ -61,12 +70,25 @@ export default {}
width: 588px; width: 588px;
padding: 55px 0; padding: 55px 0;
box-sizing: border-box; box-sizing: border-box;
.right-box{ .right-box {
margin: 0 auto; margin: 0 auto;
width: 236px; width: 236px;
height: 474px; height: 474px;
background: url(https://webapp-pub.ezijing.com/x-training-new/phone-sms.png); background: url(https://webapp-pub.ezijing.com/x-training-new/phone-sms.png);
background-size: 100% 100%; 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;
}
} }
} }
} }
......
src/modules/market-tools/views/Mail.vue
浏览文件 @ 79418788
...@@ -3,29 +3,14 @@ ...@@ -3,29 +3,14 @@
<ToolCard class="main_content"> <ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" /> <Step :activeStep="activeStep" class="pt50-pl60" />
<div style="flex: 1"> <div style="flex: 1">
<MailStepOne <MailStepOne v-if="activeStep === 0" class="pt-50" :data="form.stepOne" ref="mailStepOne" />
v-if="activeStep === 0" <MailStepTwo v-if="activeStep === 1" class="pt-50" :data="form.stepTwo" ref="mailStepTwo" />
class="pt-50" <MailStepThree :data="form.stepThree" ref="mailStepThree" v-if="activeStep === 2" />
:activeStep="activeStep" <MailStepFour :data="form" class="step-four" v-if="activeStep === 3"></MailStepFour>
:stepOneList="stepOneList"
ref="mailStepOne"
/>
<MailStepTwo
v-if="activeStep === 1"
class="pt-50"
:stepTwoList="stepTwoList"
:time="time"
:time2="time2"
@getTime="getTime"
@getShowIndex="getShowIndex"
ref="mailStepTwo"
/>
<MailStepThree :data="stepThreeData" ref="mailStepThree" v-if="activeStep === 2" />
<MailStepFour :data="{ one: stepOneList, two: stepTwoList, three: stepThreeData, time: { t1: time, t2: time2 } }" class="step-four" v-if="activeStep === 3"></MailStepFour>
<div class="main_content_btn"> <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>
...@@ -36,7 +21,7 @@ ...@@ -36,7 +21,7 @@
<script> <script>
import stepOne from '@/utils/stepOne' import stepOne from '@/utils/stepOne'
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 MailStepOne from '../components/mail/MailStepOne.vue' import MailStepOne from '../components/mail/MailStepOne.vue'
import Step from '@/components/base/Step.vue' import Step from '@/components/base/Step.vue'
...@@ -54,81 +39,85 @@ export default { ...@@ -54,81 +39,85 @@ export default {
}, },
data() { data() {
return { return {
// 所有步骤的数据
form: {
stepOne: stepOne,
stepTwo: {
index: 0,
list: stepTwo,
date: '',
time: ''
},
stepThree: {}
},
// 当前步骤的索引
activeStep: 0, activeStep: 0,
stepOneList: [], // 答题id
stepTwoList: [], caseId: ''
stepThreeData: {},
time: '',
caseId: '',
times: '',
times2: '',
time2: '',
activeIndexName: ''
} }
}, },
methods: { methods: {
getShowIndex(name) {
this.activeIndexName = name
},
// 获取第二步时间
getTime(val, val2) {
this.time = val
this.time2 = val2
},
// 上一步 // 上一步
handlePrev() { handlePrev() {
this.activeStep-- this.activeStep--
}, },
// 下一步 // 下一步
handleNext() { handleNext() {
if (this.activeStep === 0) { // 找到对应步骤，调用组件内部方法检查未填
if (this.$refs.mailStepOne.handleStepOne()) { switch (this.activeStep) {
// 保存步骤信息 case 0:
this.handleStep(0) this.$refs.mailStepOne.handleStepOne() && this.handleStep()
} break
} else if (this.activeStep === 1) { case 1:
if (this.$refs.mailStepTwo.handleStepTwo()) { this.$refs.mailStepTwo.handleStepTwo() && this.handleStep()
this.handleStep(1) break
} case 2:
if (this.$refs.mailStepThree.makePreview() !== false) {
this.form.stepThree = this.$refs.mailStepThree.makePreview()
this.handleStep()
}
break
} }
}, },
//
// 保存步骤信息 // 保存步骤信息
handleStep(val) { handleStep() {
const reports = { const reports = {
activeStep: parseInt(val), activeStep: this.activeStep + 1,
type: 2, type: 2,
commit_report: [ commit_report: this.form
{ stepOneList: this.stepOneList },
{ form: this.stepTwoList },
{ time: this.time, time2: this.time2 },
{ stepThreeData: this.stepThreeData }
]
} }
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
this.activeStep++ this.activeStep++
}) })
}, },
// 预览 // 提交
handlePreview() { handlePlan() {
const isData = this.$refs.mailStepThree.makePreview() const reports = {
if (isData !== false) { id: this.caseId || this.$route.query.id,
this.stepThreeData = this.$refs.mailStepThree.makePreview() reports: JSON.stringify({
this.handleStep(2) type: 2,
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 === 2) { if (res.data.detail.answer.type === 2) {
this.activeStep = res.data.detail.answer.activeStep this.activeStep = res.data.detail.answer.activeStep
this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList this.form = res.data.detail.answer.commit_report
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
} }
}) })
}, },
...@@ -136,34 +125,13 @@ export default { ...@@ -136,34 +125,13 @@ 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 === 2) const answerList = res.data.items.find(item => item.type === 2)
if (res.data.items.length && answerList.length) { this.activeStep = answerList.answer.activeStep || 0
this.activeStep = answerList[0].answer.activeStep if (Object.keys(answerList).length) {
this.stepOneList = answerList[0].answer.commit_report[0].stepOneList || stepOne this.form = answerList.answer.commit_report
if (answerList[0].answer.commit_report[1].form.length) {
this.stepTwoList = answerList[0].answer.commit_report[1].form
} else {
this.stepTwoList = stepTwo
}
this.time = answerList[0].answer.commit_report[2].time || this.times
this.time2 = answerList[0].answer.commit_report[2].time2 || this.times2
this.stepThreeData = answerList[0].answer.commit_report[3].stepThreeData || {}
console.log(this.stepThreeData, '213')
} else {
this.initStepList()
} }
} else {
this.initStepList()
} }
}) })
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne
this.stepTwoList = stepTwo
this.time = this.times
this.time2 = this.times2
} }
}, },
mounted() { mounted() {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论