Skip to content

M
marketing
Commit 6c3b19d3 by caoyanzhi
Options

update: 话术列表

parent 8ec20f6a
Showing with 241 additions and 7 deletions
index.html
......@@ -9,8 +9,8 @@
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css">
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css">
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2996579_93aeeozj35q.css"> -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_b36vgmw8y2d.css"> <!--GIC3.0营销-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_b36vgmw8y2d.js"> <!--GIC3.0营销-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_vfjtu9hqyrc.css"> <!--GIC3.0营销-->
<script src="//at.alicdn.com/t/font_3229694_vfjtu9hqyrc.js"></script> <!--GIC3.0营销-->
<!-- <link rel="stylesheet" href="//web-1251519181.file.myqcloud.com/components/element.2.12.0.css"> -->
<!-- element 皮肤 -->
<!-- <link rel="stylesheet" type="text/css" href="http://web-1251519181.file.myqcloud.com/lib/elementUI/theme.1.0.1/index.css"> -->
......
src/service/api/aiApi.js
......@@ -23,3 +23,6 @@ export const stopActivityPlan = params => requests(PREFIX + 'stop-activity-plan'
//重新开启活动计划
export const startActivityPlan = params => requests(PREFIX + 'start-activity-plan', params, true, false, 'get');
export const tempPageStatistics = params => requests('/api-marketing/template/page-statistics', params, true, false, 'post');
export const tempDetail = params => requests('/api-marketing/template/query', params, true, false, 'get');
src/service/api/index.js
......@@ -95,7 +95,7 @@ const pendingRequest = new Map();
*/
const requests = (url, data = {}, contentTypeIsJSON = false, isSilence = false, method = 'POST', alertError = true) => {
let _opts = { method, url };
const _query = {};
// const _query = {};
let _timer = null;
// 如果用户没有开启权限 从参数中删除showSelfFlag
if (!store.state.marketing.openFlag) {
......
src/views/ai/manage.vue
<template>
<div>
话术管理
<div class="message">
<div class="search-bar">
<el-input v-model="search.nameAndId" @change="onSearch" style="width: 260px" type="text" placeholder="请输入话术名称/ID" prefix-icon="el-icon-search" clearable></el-input>
<el-select v-model="search.status" @change="onSearch" style="margin-left: 10px;width: 160px" placeholder="全部状态" clearable>
<el-option v-for="el in statusList" :key="el.value" :value="el.value" :label="el.label"></el-option>
</el-select>
<el-alert title="若需要增加话术，请联系运营经理" style="margin-left: 10px; width: 264px" show-icon :closable="false"></el-alert>
</div>
<div class="temp-list">
<div class="temp-item" v-for="el in tempList" :key="el.aiTemplateId">
<div class="temp-title">{{ el.name }}</div>
<div class="temp-info">
<p class="temp-info-text">话术ID：{{ el.aiTemplateId }}</p>
<p class="temp-info-text">更新时间：{{ el.updateTime | formatDateTimeByType }}</p>
<el-button class="temp-check-btn" type="text" @click="showTempDetail(el)">查看</el-button>
</div>
<div :class="['temp-status', { publish: el.status == -1 || el.status == 0 || el.status == 1 || el.status == 2 || el.status == 3 }, { reject: el.status == 4 }, { published: el.status == 5 }]">
{{ el.status | formatStatus(statusList) }}
</div>
</div>
</div>
<dm-pagination v-if="total > 0" background @size-change="handleSizeChange" @current-change="handleCurrentChange" :total="total" :current-page="search.pageNum" :page-size="search.pageSize" :page-sizes="[20, 40, 60, 80]" layout="total, sizes, prev, pager, next"></dm-pagination>
<div v-if="tempList.length == 0" class="no-data">
<svg aria-hidden="true" width="100" height="100">
<use xlink:href="#icon-zanwuhuashu"></use>
</svg>
<div class="no-data-text">还未创建话术，请联系运营经理创建话术</div>
</div>
<el-dialog :visible.sync="tempDetail.show" @closed="onClosed" width="760px" title="查看话术">
<div class="temp-detail-item" v-for="el in 3" :key="el">
<div class="temp-detail-content">
<div class="temp-detail-title">普通节点</div>
<div class="temp-detail-desc">您好，我是江南布衣集团的首席福利官Rocky（停顿1秒），看到本月是您的生日月，祝您生日快乐呀！（空白2s）您的生日福利包已经准备好咯，本月有专属的生日折扣券和生日礼品福利可以领取呢~我稍后把领取路径发您手机上，记得点击领取一下哦~您的生日礼需要到所属的服务门店凭券直接领取，本月什么时候方便领取一下呢？</div>
</div>
<el-button type="text">播放</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
export default {};
import { tempPageStatistics, tempDetail } from '@/service/api/aiApi.js';
import { formatDateTimeByType } from '@/utils/index.js';
// TODO 渲染话术详情、播放话术录音
// TODO 话术列表接口total字段异常
// TODO 需求文档中话术列表无-1的状态，所以接口是否要过滤掉-1的状态
export default {
name: 'Message',
data() {
return {
tempList: [],
total: 0,
search: {
nameAndId: '', //话术ID/话术名称
brandNames: '', //品牌名称
status: '', //话术状态 0：待发布 1：待审核 2：待录音 3：待上线 4：审核不通过 5：已上线
commonFlag: '', //通用话术 0否 1是 -1 未配置
pageNum: 1,
pageSize: 20
},
statusList: [
{ label: '待发布', value: 0 },
{ label: '待审核', value: 1 },
{ label: '待录音', value: 2 },
{ label: '待上线', value: 3 },
{ label: '审核不通过', value: 4 },
{ label: '已上线', value: 5 }
],
tempDetail: {
show: false,
aiTemplateId: '',
tempData: []
}
};
},
filters: {
formatDateTimeByType,
formatStatus(status, statusList) {
const list = [{ label: '三方删除', value: -1 }, ...statusList];
const state = list.find(el => el.value == status);
return state ? state.label : '--';
}
},
created() {
this.getTempList();
},
methods: {
getTempList() {
tempPageStatistics(this.search).then(res => {
const { list, pageNum, total } = res.result;
this.tempList = list;
this.search.pageNum = pageNum;
this.total = total;
});
},
getTempDetail() {
tempDetail({ aiTemplateId: this.tempDetail.aiTemplateId }).then(res => {
console.log(res);
});
},
onSearch() {
this.handleCurrentChange(1);
},
handleSizeChange(pageSize) {
this.search.pageSize = pageSize;
this.handleCurrentChange(1);
},
handleCurrentChange(pageNum) {
this.search.pageNum = pageNum;
this.getTempList();
},
showTempDetail(temp) {
this.tempDetail.show = true;
this.tempDetail.aiTemplateId = temp.aiTemplateId;
this.getTempDetail();
},
onClosed() {
this.tempDetail.aiTemplateId = '';
this.tempDetail.tempData = [];
}
}
};
</script>
<style></style>
<style lang="scss" scoped>
.message {
padding: 5px 20px 20px;
.search-bar {
display: flex;
justify-content: flex-start;
align-items: center;
}
.no-data {
padding-top: 110px;
text-align: center;
.no-data-text {
margin-top: 32px;
font-size: 14px;
font-weight: 400;
color: #606266;
line-height: 20px;
}
}
.temp-list {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
.temp-item {
position: relative;
margin-top: 20px;
margin-right: 20px;
margin-bottom: 10px;
width: 276px;
height: 150px;
background: #ebecf0;
border-radius: 4px;
.temp-title {
display: flex;
justify-content: flex-start;
align-items: center;
height: 48px;
padding: 0 16px;
background: rgba(47, 84, 235, 0.9);
border-radius: 4px 4px 0px 0px;
font-size: 16px;
font-weight: 500;
color: #fff;
line-height: 22px;
}
.temp-info {
padding: 10px 16px 14px;
text-align: center;
.temp-info-text {
+ .temp-info-text {
margin-top: 4px;
}
text-align: left;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
}
.temp-check-btn {
margin-top: 14px;
}
.temp-status {
position: absolute;
top: 0;
right: 0;
z-index: 1;
display: inline-block;
padding: 2px 8px;
border-radius: 0px 4px 0px 4px;
font-size: 12px;
font-weight: 500;
line-height: 17px;
&.publish {
color: #2f54eb;
background: #dee3fc;
}
&.published {
color: #33af4a;
background: #d6f4dc;
}
&.reject {
color: #f5222d;
background: #fddbdd;
}
}
}
}
}
.temp-detail-item {
padding-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
+ .temp-detail-item {
padding-top: 10px;
border-top: 1px solid #e4e7ed;
}
.temp-detail-content {
.temp-detail-title {
margin-bottom: 8px;
font-size: 14px;
font-weight: 600;
color: #303133;
line-height: 20px;
}
.temp-detail-desc {
width: 650px;
font-size: 14px;
font-weight: 400;
color: #303133;
line-height: 20px;
}
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment