Skip to content

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

update

上级 bfa2e4da
隐藏空白字符变更
内嵌 并排
正在显示 包含 324 行增加 和 169 行删除
src/modules/market-tools/components/mail/MailStepOne.vue
浏览文件 @ c846cb73
<template>
<div class="main_content">
<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>
<script>
import CardList from '@/components/base/CardList.vue'
// import stepONeStep from '@/utils/stepOne'
// import { cacheReport } from '../../api'
export default {
components: {
CardList
......
src/modules/market-tools/components/mobileSms/SmsStepFour.vue 0 → 100644
浏览文件 @ c846cb73
<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 ? '单次触发' : data.stepTwo.index === 1 ? '周期触发' : '节日触发' }}
</div>
</div>
<template v-if="data.stepTwo.index === 0">
<div class="li">
<div class="icon"></div>
<div class="text">触发时间：{{ data.stepTwo.triggerDate }}&nbsp;&nbsp;{{ data.stepTwo.triggerTime }}</div>
</div>
</template>
<template v-else-if="data.stepTwo.index === 1">
<div class="li">
<div class="icon"></div>
<div class="text">
触发时间：{{ data.stepTwo.time_range[0] }}至{{ data.stepTwo.time_range[1] }}&nbsp;&nbsp;{{
data.stepTwo.times_every
}}&nbsp;&nbsp;{{ data.stepTwo.times_hour }}
</div>
</div>
</template>
<template v-else>
<div class="li">
<div class="icon"></div>
<div class="text">
触发条件：
<span v-for="(item, index) in data.stepTwo.solarTermsList" :key="index">{{ item.name }}{{ index != data.stepTwo.solarTermsList.length - 1 ? '，' : '' }}</span>&nbsp;&nbsp;{{ data.stepTwo.times_send }}触发
</div>
</div>
</template>
</div>
</div>
<div class="card">
<div class="title">展示内容</div>
<div class="content">
<div class="phone-box">
<div class="text">{{ `【${data.stepThree.title}】${data.stepThree.content}` }}</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
props: {
data: { type: Object }
},
mounted() {
console.log(this.data, 'data')
},
methods: {
getPersonalMap(item) {
return item.personalMap.find(i => i.value === item.personal)
},
// 获取位置值
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;` : ''
}
}
}
}
</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;
}
}
}
}
}
</style>
src/modules/market-tools/components/mobileSms/SmsStepOne.vue
浏览文件 @ c846cb73
<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> -->
<CardList class="box-card" v-for="(item, index) in data" :key="index" :cardList="item" />
</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: {
data: {
type: Array
}
},
......@@ -28,7 +21,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
......
src/modules/market-tools/components/mobileSms/SmsStepThree.vue
浏览文件 @ c846cb73
......@@ -3,16 +3,16 @@
<div class="content-left">
<div class="card-textarea">
<div class="title">推送标题</div>
<textarea v-model="form.title" placeholder="请输入"></textarea>
<textarea v-model="data.title" placeholder="请输入"></textarea>
</div>
<div class="card-textarea">
<div class="title">推送内容</div>
<textarea v-model="form.content" placeholder="请输入"></textarea>
<textarea v-model="data.content" placeholder="请输入"></textarea>
</div>
</div>
<div class="content-right">
<div class="right-box">
<div class="text">{{ `【${form.title}】${form.content}` }}</div>
<div class="text">{{ `【${data.title}】${data.content}` }}</div>
</div>
</div>
</div>
......@@ -20,12 +20,21 @@
<script>
export default {
data() {
return {
form: {
title: '',
content: ''
props: {
data: {
type: Object
}
},
mounted() {
console.log(this.data, '23')
},
methods: {
handleStepThree() {
if (this.data.title === '' || this.data.content === '') {
this.$message.warning('请完善改步骤后才能进入下一步')
return false
}
return true
}
}
}
......
src/modules/market-tools/components/mobileSms/SmsStepTwo.vue
浏览文件 @ c846cb73
<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">
<div v-if="data.index === 0">
在 &nbsp;&nbsp;
<el-date-picker v-model="triggerDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
<el-date-picker v-model="data.triggerDate" type="datetime" placeholder="选择日期" value-format="yyyy-MM-dd">
</el-date-picker>
&nbsp;&nbsp;
<el-time-picker
v-model="triggerTime"
v-model="data.triggerTime"
arrow-control
placeholder="选择时间"
size="mini"
......@@ -19,29 +19,36 @@
</el-time-picker>
&nbsp;&nbsp;对目标用户进行触达
</div>
<div v-if="showIndex === 1">
<div v-if="data.index === 1">
从&nbsp;&nbsp;
<el-date-picker
v-model="time_range"
v-model="data.time_range"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
value-format="yyyy-MM-dd"
>
</el-date-picker>
&nbsp;&nbsp;时间范围内
<br />
<br />
&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
<el-select v-model="times_every">
<el-select v-model="data.times_every">
<el-option v-for="it in timesList" :key="it.value" :label="it.label" :value="it.value"> </el-option>
</el-select>
&nbsp;&nbsp;&nbsp;
<el-time-picker v-model="times_hour" arrow-control placeholder="选择时间" size="mini" value-format="HH:mm:ss">
<el-time-picker
v-model="data.times_hour"
arrow-control
placeholder="选择时间"
size="mini"
value-format="HH:mm:ss"
>
</el-time-picker>
发送
</div>
<div v-if="showIndex === 2">
<div v-if="data.index === 2">
<!-- 节气 -->
<div class="solarTerms">
<div class="solarTerms_left">
......@@ -90,7 +97,7 @@
<div class="sendMessage">
在如上日期
<el-time-picker
v-model="times_send"
v-model="data.times_send"
arrow-control
placeholder="选择时间"
size="mini"
......@@ -109,34 +116,26 @@ import StepTab from '@/components/base/StepTab.vue'
export default {
components: { StepTab },
props: {
stepTwoData: {}
data: { type: Object }
},
data() {
return {
// 选项
timesList: [
{
value: '0',
value: '每日',
label: '每日'
},
{
value: '1',
value: '每周',
label: '每周'
},
{
value: '2',
value: '每月',
label: '每月'
}
],
triggerDate: '', // 单次触发 触发日期
triggerTime: '', // 单次触发 触发时间
time_range: [], // 周期触发 触发时间范围
times_every: '', // 周期触发 触发周期
times_hour: '', // 周期触发 触发时间
times_send: '', // 节日触发 触发时间
caseId: '',
showIndex: 0,
showIndexName: '',
// tab切换列表
tabList: [
{
......@@ -155,17 +154,18 @@ export default {
tabName: '节日触发'
}
],
// 节气
festivalList: [
{ id: '0', name: '元旦', isActive: false },
{ id: '1', name: '情人节', isActive: false },
{ id: '2', name: '愚人节', isActive: false },
{ id: '3', name: '复活节', isActive: false },
{ id: '4', name: '母亲节', isActive: false },
{ id: '5', name: '父亲节', isActive: false },
{ id: '6', name: '感恩节', isActive: false },
{ id: '7', name: '万圣节', isActive: false },
{ id: '8', name: '元旦节', isActive: false },
{ id: '9', name: '小满', isActive: false }
{ id: '00', name: '元旦', isActive: false },
{ id: '11', name: '情人节', isActive: false },
{ id: '22', name: '愚人节', isActive: false },
{ id: '33', name: '复活节', isActive: false },
{ id: '44', name: '母亲节', isActive: false },
{ id: '55', name: '父亲节', isActive: false },
{ id: '66', name: '感恩节', isActive: false },
{ id: '77', name: '万圣节', isActive: false },
{ id: '88', name: '元旦节', isActive: false },
{ id: '99', name: '小满', isActive: false }
],
solarTermsList: [
{ id: '0', name: '小寒', isActive: false },
......@@ -206,17 +206,25 @@ export default {
}
},
mounted() {
this.festivalList = this.stepTwoData.festivalList.length ? this.stepTwoData.festivalList : this.festivalList
this.solarTermsList = this.stepTwoData.solarTermsList.length ? this.stepTwoData.solarTermsList : this.solarTermsList
this.triggerDate = this.stepTwoData.triggerDate
this.triggerTime = this.stepTwoData.triggerTime
this.time_range = this.stepTwoData.time_range
this.times_every = this.stepTwoData.times_every
this.times_hour = this.stepTwoData.times_hour
this.times_send = this.stepTwoData.times_send
this.setSolarTerms()
},
methods: {
setSolarTerms() {
if (this.data.index === 2) {
this.festivalList.map(item => {
if (this.data.solarTermsList.find(i => i.id === item.id)) {
item.isActive = true
}
return item
})
this.solarTermsList.map(item => {
if (this.data.solarTermsList.find(i => i.id === item.id)) {
item.isActive = true
}
return item
})
}
},
// 全选节气
handleSelectAllSolar() {
if (this.checkAllSolar) {
......@@ -228,6 +236,7 @@ export default {
item.isActive = true
})
}
this.solarTermsChange()
},
// 全选节日
handleSelectAllFes() {
......@@ -240,48 +249,49 @@ export default {
item.isActive = true
})
}
this.solarTermsChange()
},
// 是否选择节气
handleItemSolarActive(item) {
item.isActive = !item.isActive
this.solarTermsChange()
},
// 是否选择节日
handleItemFesActive(item) {
item.isActive = !item.isActive
this.solarTermsChange()
},
solarTermsChange() {
this.data.solarTermsList = []
this.festivalList.forEach(item => {
item.isActive && this.data.solarTermsList.push(item)
})
this.solarTermsList.forEach(item => {
item.isActive && this.data.solarTermsList.push(item)
})
},
// tab切换
handleTab(index) {
this.showIndex = index
this.data.index = index
this.setSolarTerms()
},
// 进去下一步之前的判断
handleStepTwo() {
this.$emit('getShowIndex', this.showIndex)
const stepTwoData = {
triggerDate: this.triggerDate,
triggerTime: this.triggerTime,
time_range: this.time_range,
times_every: this.times_every,
times_hour: this.times_hour,
times_send: this.times_send,
solarTermsList: this.solarTermsList,
festivalList: this.festivalList
}
this.$emit('getTime', stepTwoData)
console.log(this.time_range[0], this.time_range[1], this.times_every, '--000', this.times_send, '----')
if (this.showIndex === 0 && (this.triggerDate === '' || this.triggerTime === '')) {
if (this.data.index === 0 && (this.data.triggerDate === '' || this.data.triggerTime === '')) {
this.$message.warning('请完善改步骤后才能进入下一步')
return false
} else if (
this.showIndex === 1 &&
(this.time_range[0] === '' || this.time_range[1] === '' || this.times_every === '' || this.times_hour === '')
this.data.index === 1 &&
(this.data.time_range[0] === '' ||
this.data.time_range[1] === '' ||
this.data.times_every === '' ||
this.data.times_hour === '')
) {
this.$message.warning('请完善改步骤后才能进入下一步')
return false
} else if (
this.showIndex === 2 &&
(this.times_send === null ||
this.data.index === 2 &&
(this.data.times_send === null ||
this.festivalList.filter(item => item.isActive === false).length === this.festivalList.length ||
this.solarTermsList.filter(item => item.isActive === false).length === this.solarTermsList.length)
) {
......
src/modules/market-tools/views/MobileSms.vue
浏览文件 @ c846cb73
......@@ -2,27 +2,15 @@
<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"
ref="mailStepTwo"
@getTime="getTime"
@getShowIndex="getShowIndex"
:stepTwoData="stepTwoData"
/>
<SmsStepThree v-if="activeStep === 2" />
<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="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>
......@@ -32,127 +20,130 @@
<script>
import stepOne from '@/utils/stepOne'
import { cacheReport, getReportDetail, checkRecord } from '../api'
import { cacheReport, getReportDetail, checkRecord, submitReport } 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'
import SmsStepThree from '../components/mobileSms/SmsStepThree.vue'
import SmsStepFour from '../components/mobileSms/SmsStepFour.vue'
export default {
components: {
ToolCard,
SmsStepOne,
Step,
SmsStepTwo,
SmsStepThree
SmsStepThree,
SmsStepFour
},
data() {
return {
// times: '',
activeStep: 2,
stepOneList: [],
caseId: '',
stepTwoData: {
triggerDate: '',
triggerTime: '',
time_range: '',
times_every: '',
times_hour: '',
times_send: '',
solarTermsList: [],
festivalList: [],
showIndex: ''
}
form: {
stepOne: stepOne,
stepTwo: {
index: 0, // 触发类型
triggerDate: '', // 单次触发 触发日期
triggerTime: '', // 单次触发 触发时间
time_range: [], // 周期触发 触发时间范围
times_every: '', // 周期触发 触发周期
times_hour: '', // 周期触发 触发时间
times_send: '', // 节日触发 触发时间
solarTermsList: [] // 选中的节日
},
stepThree: {
title: '',
content: ''
}
},
activeStep: 0,
caseId: ''
}
},
methods: {
getShowIndex(val) {
this.showIndex = val
},
// 获取第二步时间
getTime(val) {
this.stepTwoData = val
},
// 上一步
handlePrev() {
// if (this.$refs.mailStepTwo.handleStepTwo()) {
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:
this.$refs.stepThree.handleStepThree() && this.handleStep()
break
}
},
// 保存步骤
handleStep(val) {
const reports = {
activeStep: parseInt(val),
activeStep: this.activeStep + 1,
type: 4,
commit_report: [{ stepOneList: this.stepOneList }, { stepTwoData: this.stepTwoData }]
commit_report: this.form
}
console.log(reports, 'rep')
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() {},
handlePlan() {
const reports = {
id: this.caseId || this.$route.query.id,
reports: JSON.stringify({
type: 4,
commit_report: this.form
})
}
submitReport(reports).then(res => {
if (res.code === 0) {
this.$router.push({
path: '/works-show/history',
query: {
type: 3
}
})
}
})
},
// 获取步骤信息回显
getReportDetail(id) {
getReportDetail(id).then(res => {
console.log(res, '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.stepTwoData = res.data.detail.answer.commit_report[1].stepTwoData
this.form = res.data.detail.answer.commit_report
}
})
},
// 验证是否有未完成的答题记录
checkRecord() {
checkRecord(this.$store.state.case.id, 2).then(res => {
checkRecord(this.$store.state.case.id, 4).then(res => {
if (res.data.status === true) {
const answerList = res.data.items.filter(item => item.type === 4)
if (res.data.items.length && answerList.length) {
this.activeStep = answerList[0].answer.activeStep
this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
this.stepTwoData = answerList[0].answer.commit_report[1].stepTwoData
} else {
this.initStepList()
const answerList = res.data.items.find(item => item.type === 4)
this.activeStep = answerList.answer.activeStep || 0
if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report
console.log(this.form, 'form')
}
} else {
this.initStepList()
}
})
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne
}
},
mounted() {
// if (this.$route.query.type) {
// this.getReportDetail(this.$route.query.id)
// } else {
// this.checkRecord()
// }
if (this.$route.query.type) {
this.getReportDetail(this.$route.query.id)
} else {
this.checkRecord()
}
}
}
</script>
......@@ -200,4 +191,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>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论