Skip to content

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

营销工具微信

上级 c846cb73
隐藏空白字符变更
内嵌 并排
正在显示 包含 426 行增加 和 61 行删除
src/modules/market-tools/components/weChat/ChatStepFour.vue 0 → 100644
浏览文件 @ a367354a
<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">
<div class="icon"></div>
<div class="text">
触发条件：立刻对目标用户进行触达
</div>
</div>
</div>
</div>
<div class="card">
<div class="title">展示内容</div>
<div class="right-box">
<div class="card-msg">
<div class="top">
<div class="title">用户登录提醒</div>
<div class="phone-content">
<div class="lable">标题：</div>
<div class="value">{{ data.stepThree.title}}</div>
</div>
<div class="phone-content">
<div class="lable">内容：</div>
<div class="value">{{data.stepThree.content }}</div>
</div>
</div>
<div class="btn">
<div class="text">详情</div>
<div class="el-icon-arrow-right"></div>
</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;
}
}
}
}
}
.right-box {
margin: 0 auto;
width: 236px;
height: 474px;
background: url(https://webapp-pub.ezijing.com/x-training-new/phone-wxgzh.png);
background-size: 100% 100%;
position: relative;
.card-msg{
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 188px;
background: rgba(255, 255, 255, .4);
opacity: 1;
border-radius: 2px;
.btn{
height: 26px;
border-top: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
.text{
font-size: 10px;
color: #333333;
line-height: 100%;
}
}
.top{
padding: 10px;
}
.title{
font-size: 12px;
line-height: 100%;
color: #333333;
}
.phone-content{
display: flex;
margin-top: 5px;
.lable{
min-width: 38px;
font-size: 10px;
color: #999999;
}
.value{
font-size: 10px;
color: #333333;
}
}
}
}
</style>
src/modules/market-tools/components/weChat/ChatStepOne.vue
浏览文件 @ a367354a
<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>
......@@ -12,11 +12,7 @@ export default {
CardList
},
props: {
activeStep: {
type: Number,
default: 0
},
stepOneList: {
data: {
type: Array
}
},
......@@ -27,7 +23,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/weChat/ChatStepThree.vue 0 → 100644
浏览文件 @ a367354a
<template>
<div class="sms-three-box">
<div class="content-left">
<div class="card-textarea">
<div class="title">推送标题</div>
<textarea v-model="data.title" placeholder="请输入"></textarea>
</div>
<div class="card-textarea">
<div class="title">推送内容</div>
<textarea v-model="data.content" placeholder="请输入"></textarea>
</div>
</div>
<div class="content-right">
<div class="right-box">
<div class="card-msg">
<div class="top">
<div class="title">用户登录提醒</div>
<div class="content">
<div class="lable">标题：</div>
<div class="value">{{ data.title}}</div>
</div>
<div class="content">
<div class="lable">内容：</div>
<div class="value">{{data.content }}</div>
</div>
</div>
<div class="btn">
<div class="text">详情</div>
<div class="el-icon-arrow-right"></div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
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
}
}
}
</script>
<style lang="scss" scoped>
.sms-three-box {
margin-bottom: 20px;
display: flex;
.content-left {
border-left: 1px solid #dedede;
border-right: 1px solid #dedede;
padding: 30px 30px 0;
.card-textarea {
width: 320px;
background: rgba(248, 248, 248, 0.39);
border-radius: 16px;
padding: 23px;
margin-bottom: 30px;
.title {
text-align: center;
margin-bottom: 23px;
font-size: 18px;
font-weight: bold;
line-height: 100%;
color: #333333;
}
textarea {
width: 100%;
height: 91px;
background: rgba(255, 255, 255, 0.39);
border: 1px solid #efefef;
border-radius: 6px;
padding: 10px 15px;
color: #333333;
font-size: 14px;
resize: none;
}
}
}
.content-right {
width: 588px;
padding: 55px 0;
box-sizing: border-box;
.right-box {
margin: 0 auto;
width: 236px;
height: 474px;
background: url(https://webapp-pub.ezijing.com/x-training-new/phone-wxgzh.png);
background-size: 100% 100%;
position: relative;
.card-msg{
position: absolute;
top: 70px;
left: 50%;
transform: translateX(-50%);
width: 188px;
background: rgba(255, 255, 255, .4);
opacity: 1;
border-radius: 2px;
.btn{
height: 26px;
border-top: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px;
.text{
font-size: 10px;
color: #333333;
line-height: 100%;
}
}
.top{
padding: 10px;
}
.title{
font-size: 12px;
line-height: 100%;
color: #333333;
}
.content{
display: flex;
margin-top: 5px;
.lable{
min-width: 38px;
font-size: 10px;
color: #999999;
}
.value{
font-size: 10px;
color: #333333;
}
}
}
}
}
}
</style>
src/modules/market-tools/components/weChat/ChatStepTwo.vue
浏览文件 @ a367354a
......@@ -4,8 +4,8 @@
<template #plan_title>计划类型</template>
<template #trigger_title>触发条件</template>
<template #trigger_con>
<div v-if="showIndex === 0">立刻对目标用户进行触达</div>
<div v-if="showIndex === 1">立刻对目标用户进行触达</div>
<div v-if="data.index === 0">立刻对目标用户进行触达</div>
<div v-if="data.index === 1">立刻对目标用户进行触达</div>
</template>
</StepTab>
<div class="main_content_btn"></div>
......@@ -15,22 +15,23 @@
import StepTab from '@/components/base/StepTab.vue'
export default {
components: { StepTab },
props: {
data: { type: Object }
},
data() {
return {
caseId: '',
showIndex: 0,
// tab切换列表
tabList: [
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon11.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon12.png',
tabName: '单次触发'
tabName: '登录提醒'
},
{
icon: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon21.png',
iconActive: 'https://webapp-pub.ezijing.com/x-training-new/tab_icon22.png',
tabName: '条件触发'
tabName: '交易提醒'
}
]
}
......@@ -38,7 +39,7 @@ export default {
methods: {
handleTab(index) {
this.showIndex = index
this.data.index = index
}
}
}
......
src/modules/market-tools/views/MobileSms.vue
浏览文件 @ a367354a
......@@ -126,7 +126,7 @@ export default {
},
// 验证是否有未完成的答题记录
checkRecord() {
checkRecord(this.$store.state.case.id, 4).then(res => {
checkRecord(this.$store.state.case.id, 2).then(res => {
if (res.data.status === true) {
const answerList = res.data.items.find(item => item.type === 4)
this.activeStep = answerList.answer.activeStep || 0
......
src/modules/market-tools/views/WeChat.vue
浏览文件 @ a367354a
......@@ -2,19 +2,15 @@
<div>
<ToolCard class="main_content">
<Step :activeStep="activeStep" class="pt50-pl60" />
<div>
<ChatStepOne
v-if="activeStep === 0"
class="pt-50"
:activeStep="activeStep"
:stepOneList="stepOneList"
ref="mailStepOne"
/>
<ChatStepTwo v-if="activeStep === 1" class="pt-50" />
<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">
<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>
......@@ -24,20 +20,32 @@
<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 ChatStepOne from '../components/weChat/ChatStepOne.vue'
import Step from '@/components/base/Step.vue'
import ChatStepTwo from '../components/weChat/ChatStepTwo.vue'
import ChatStepThree from '../components/weChat/ChatStepThree.vue'
import ChatStepFour from '../components/weChat/ChatStepFour.vue'
export default {
components: {
ToolCard,
ChatStepOne,
Step,
ChatStepTwo
ChatStepTwo,
ChatStepThree,
ChatStepFour
},
data() {
return {
form: {
stepOne: stepOne,
stepTwo: { index: 0 },
stepThree: {
title: '',
content: ''
}
},
activeStep: 0,
stepOneList: [],
caseId: ''
......@@ -47,32 +55,28 @@ export default {
methods: {
// 上一步
handlePrev() {
const reports = {
activeStep: this.activeStep,
type: 5,
commit_report: [{ stepOneList: this.stepOneList }, { form: this.stepTwoList }]
}
cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
this.caseId = res.data.id
this.activeStep--
})
this.activeStep--
},
// 下一步
handleNext() {
if (this.activeStep === 0) {
if (this.$refs.mailStepOne.handleStepOne()) {
// 保存步骤信息
this.handleStep(0)
}
} else if (this.activeStep === 1) {
this.handleStep(1)
// 找到对应步骤，调用组件内部方法检查未填
switch (this.activeStep) {
case 0:
this.$refs.ChatStepOne.handleStepOne() && this.handleStep()
break
case 1:
this.handleStep()
break
case 2:
this.$refs.ChatStepThree.handleStepThree() && this.handleStep()
break
}
},
handleStep(val) {
handleStep() {
const reports = {
activeStep: parseInt(val),
activeStep: this.activeStep + 1,
type: 5,
commit_report: [{ stepOneList: this.stepOneList }]
commit_report: this.form
}
cacheReport(this.$store.state.case.id, { reports: JSON.stringify(reports) }).then(res => {
this.caseId = res.data.id
......@@ -83,13 +87,31 @@ export default {
handlePreview() {
this.activeStep++
},
handlePlan() {},
handlePlan() {
const reports = {
id: this.caseId || this.$route.query.id,
reports: JSON.stringify({
type: 5,
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 => {
if (res.data.detail.answer.type === 5) {
if (res.data.detail.answer.type === 2) {
this.activeStep = res.data.detail.answer.activeStep
this.stepOneList = res.data.detail.answer.commit_report[0].stepOneList
this.form = res.data.detail.answer.commit_report
}
})
},
......@@ -97,21 +119,13 @@ 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 === 5)
if (res.data.items.length && answerList.length) {
this.activeStep = answerList[0].answer.activeStep
this.stepOneList = answerList[0].answer.commit_report[0].stepOneList
} else {
this.initStepList()
const answerList = res.data.items.find(item => item.type === 5)
this.activeStep = answerList.answer.activeStep || 0
if (Object.keys(answerList).length) {
this.form = answerList.answer.commit_report
}
} else {
this.initStepList()
}
})
},
// 初始化步骤列表
initStepList() {
this.stepOneList = stepOne
}
},
mounted() {
......@@ -166,4 +180,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 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论