Skip to content

C
center-message
提交 dfa42d0e authored 作者: lihuihui's avatar lihuihui
浏览文件
操作

update: 新增短信模板

上级 40eb9cc5
隐藏空白字符变更
内嵌 并排
正在显示 包含 1321 行增加 和 143 行删除
.config.dev.js
浏览文件 @ dfa42d0e
module.exports = { module.exports = {
domain: 'dev.ezijing.com', domain: 'dev.ezijing.com',
url: 'https://x-training2.ezijing.com/api', url: 'https://msg.ezijing.com/api',
webpack: { webpack: {
externals: { externals: {
CKEDITOR: 'window.CKEDITOR', CKEDITOR: 'window.CKEDITOR',
......
src/api/common.js
浏览文件 @ dfa42d0e
...@@ -108,6 +108,36 @@ export function addLog(data) { ...@@ -108,6 +108,36 @@ export function addLog(data) {
export function getLogList(params) { export function getLogList(params) {
return httpRequest.get('/api/message/v1/system/logs', { params }) return httpRequest.get('/api/message/v1/system/logs', { params })
} }
/**
* 短信模板列表
*/
export function getSmsTempList(params) {
return httpRequest.get('/api/message/admin/v1/sms/templates', { params })
}
/**
* 短信模板创建
*/
export function creatSmsTemp(params) {
return httpRequest.post('/api/message/admin/v1/sms/template', params)
}
/**
* 删除消息模板列表
*/
export function deleteSmsTemp(id) {
return httpRequest.delete(`/api/message/admin/v1/sms/${id}/template`)
}
/**
* 消息模板详情
*/
export function getSmsTempDetail(id) {
return httpRequest.get(`/api/message/admin/v1/sms/${id}/template`)
}
/**
* 消息模板编辑
*/
export function editSmsTemp(id, params) {
return httpRequest.put(`/api/message/admin/v1/sms/${id}/template`, params)
}
// export function uploadFile(data) { // export function uploadFile(data) {
// return httpRequest.post('/api/lms/util/upload-file', data, { // return httpRequest.post('/api/lms/util/upload-file', data, {
// headers: { 'Content-Type': 'multipart/form-data' } // headers: { 'Content-Type': 'multipart/form-data' }
......
src/components/layout/aside.vue
浏览文件 @ dfa42d0e
<template> <template>
<div class="app-aside"> <div class="app-aside">
<img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" alt="" class="logo"> <img src="http://zws-imgs-pub.oss-cn-beijing.aliyuncs.com/static/ezijing/logo/ezijing-logo.svg" class="logo" />
<el-menu :router="true" :default-active="$route.path" class="menu"> <el-menu :router="true" :default-active="$route.path" class="menu">
<template v-for="(item, index) in defaultMenus"> <template v-for="(item, index) in defaultMenus">
<el-submenu :index="item.path" :key="index" v-if="item.children"> <el-submenu v-if="item.children" :index="item.path" :key="index">
<template slot="title"> <template slot="title">
<i :class="item.icon"></i>
<span>{{ item.title }}</span> <span>{{ item.title }}</span>
</template> </template>
<el-menu-item v-for="(subitem, index) in item.children" :index="subitem.path" :key="index"> <el-menu-item v-for="(subitem, index) in item.children" :index="subitem.path" :key="index">
{{ subitem.title }} {{ subitem.title }}
</el-menu-item> </el-menu-item>
</el-submenu> </el-submenu>
<el-menu-item :key="index" :index="item.path" v-else class="menu-box"><div class="icon"></div><span>{{ item.title }}</span></el-menu-item> <el-menu-item v-else :key="index" :index="item.path" class="menu-box"
><div class="icon"></div>
<span><i :class="item.icon"></i>{{ item.title }}</span></el-menu-item
>
</template> </template>
</el-menu> </el-menu>
</div> </div>
...@@ -28,19 +32,38 @@ export default { ...@@ -28,19 +32,38 @@ export default {
defaultMenus: [ defaultMenus: [
{ {
title: '消息看板', title: '消息看板',
path: '/msgView' path: '/msgView',
icon: 'el-icon-menu'
}, },
{ {
title: '消息模板', title: '消息模板',
path: '/msgTemplate' path: '/msgTemplate',
icon: 'el-icon-s-order'
},
{
title: '短信管理',
path: '/sms',
icon: 'el-icon-s-promotion',
children: [
{
title: '短信模板',
path: '/sms/smsTemplate'
},
{
title: '分发短信记录',
path: '/sms/smsRecord'
}
]
}, },
{ {
title: '用户群组', title: '用户群组',
path: '/userGroup' path: '/userGroup',
icon: 'el-icon-s-custom'
}, },
{ {
title: '日志', title: '日志',
path: '/log' path: '/log',
icon: 'el-icon-s-management'
} }
] ]
} }
...@@ -62,84 +85,96 @@ export default { ...@@ -62,84 +85,96 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.logo{ .logo {
width: 156px; width: 156px;
display: block; display: block;
margin: 30px auto; margin: 30px auto;
} }
.menu-box{ .menu-box {
display: flex; display: flex;
align-items: center; align-items: center;
.icon{ // .icon{
margin-right: 20px; // margin-right: 20px;
width: 16px; // width: 16px;
height: 16px; // height: 16px;
} // }
&.is-active{ // &.is-active{
&:nth-child(1){ // &:nth-child(1){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/ead012c5b38a59a49aced67a5c43712c.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/ead012c5b38a59a49aced67a5c43712c.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
&:nth-child(2){ // &:nth-child(2){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/9b7a03ac5fb386c2f4fae65faf9fd11d.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/9b7a03ac5fb386c2f4fae65faf9fd11d.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
&:nth-child(3){ // &:nth-child(3){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/468a25489daba5a8b265bf50a96f4613.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/468a25489daba5a8b265bf50a96f4613.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
&:nth-child(4){ // &:nth-child(4){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/b7770ce952088e4c6e011f132c6c5f7a.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/b7770ce952088e4c6e011f132c6c5f7a.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
} // &:nth-child(5){
&:nth-child(1){ // .icon{
.icon{ // background: url(https://zws-imgs-pub.ezijing.com/static/public/b7770ce952088e4c6e011f132c6c5f7a.png);
background: url(https://zws-imgs-pub.ezijing.com/static/public/74304dd0f8dd0f6d25411314bab951d2.png); // background-size: 100% 100%;
background-size: 100% 100%; // }
} // }
} // }
&:nth-child(2){ // &:nth-child(1){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/02d90bc10b8f413cd8bc07e935cd25e4.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/74304dd0f8dd0f6d25411314bab951d2.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
&:nth-child(3){ // &:nth-child(2){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/910468f96b35d76679aa1480561f2c4b.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/02d90bc10b8f413cd8bc07e935cd25e4.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
&:nth-child(4){ // &:nth-child(3){
.icon{ // .icon{
background: url(https://zws-imgs-pub.ezijing.com/static/public/470a37dc41a32ee58fa08e8da97cb666.png); // background: url(https://zws-imgs-pub.ezijing.com/static/public/910468f96b35d76679aa1480561f2c4b.png);
background-size: 100% 100%; // background-size: 100% 100%;
} // }
} // }
// &:nth-child(4){
// .icon{
// background: url(https://zws-imgs-pub.ezijing.com/static/public/470a37dc41a32ee58fa08e8da97cb666.png);
// background-size: 100% 100%;
// }
// }
// &:nth-child(5){
// .icon{
// background: url(https://zws-imgs-pub.ezijing.com/static/public/470a37dc41a32ee58fa08e8da97cb666.png);
// background-size: 100% 100%;
// }
// }
} }
.app-aside { .app-aside {
padding-top: 16px; padding-top: 16px;
width: 250px; width: 250px;
background-color: #F3F7FC; background-color: #f3f7fc;
.menu { .menu {
border: 0; border: 0;
} }
} }
.el-menu-item{ .el-menu-item {
&.is-active{ &.is-active {
font-weight: bold !important; font-weight: bold !important;
} }
} }
.el-menu{ .el-menu {
background: none !important; background: none !important;
} }
</style> </style>
src/pages/msgTemplate/index.vue
浏览文件 @ dfa42d0e
...@@ -15,69 +15,29 @@ ...@@ -15,69 +15,29 @@
</div> </div>
</div> </div>
<div class="table-box"> <div class="table-box">
<el-table <el-table @selection-change="handleSelectionChange" :data="tableData" tooltip-effect="dark" style="width: 100%">
@selection-change="handleSelectionChange" <el-table-column type="selection" width="55"> </el-table-column>
:data="tableData" <el-table-column align="center" header-align="center" prop="id" label="id" width="180"> </el-table-column>
tooltip-effect="dark" <el-table-column align="center" header-align="center" prop="name" label="名称" width="180"> </el-table-column>
style="width: 100%"> <el-table-column align="center" header-align="center" prop="created_at" label="创建时间" width="180">
<el-table-column
type="selection"
width="55">
</el-table-column> </el-table-column>
<el-table-column <el-table-column align="center" header-align="center" label="通道">
align="center"
header-align="center"
prop="id"
label="id"
width="180">
</el-table-column>
<el-table-column
align="center"
header-align="center"
prop="name"
label="名称"
width="180">
</el-table-column>
<el-table-column
align="center"
header-align="center"
prop="created_at"
label="创建时间"
width="180">
</el-table-column>
<el-table-column
align="center"
header-align="center"
label="通道">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-for="(items, index) in scope.row.templates" :key="index"> <span v-for="(items, index) in scope.row.templates" :key="index">
{{ channelValue(items.channel) }} {{ channelValue(items.channel) }}
</span> </span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column label="操作" align="center" header-align="center">
label="操作"
align="center"
header-align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button class="btn-color" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
class="btn-color" <el-button class="btn-color" type="text" @click="handleDelete(scope.row)">删除</el-button>
type="text"
@click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button
class="btn-color"
type="text"
@click="handleDelete(scope.row)">删除</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</div> </div>
<div class="page-box"> <div class="page-box">
<el-pagination <el-pagination layout="prev, pager, next" @current-change="changePage" :total="totals"> </el-pagination>
layout="prev, pager, next"
@current-change="changePage"
:total="totals">
</el-pagination>
</div> </div>
</div> </div>
</app-container> </app-container>
...@@ -98,8 +58,7 @@ export default { ...@@ -98,8 +58,7 @@ export default {
limit: 10 limit: 10
}, },
totals: 1, totals: 1,
tableData: [ tableData: [],
],
selectItem: [] selectItem: []
} }
}, },
...@@ -130,8 +89,7 @@ export default { ...@@ -130,8 +89,7 @@ export default {
this.page.page = response.data.current_page this.page.page = response.data.current_page
// this.page.lastPage = response.data.last_page // this.page.lastPage = response.data.last_page
}) })
.finally(() => { .finally(() => {})
})
}, },
handleDelete(data) { handleDelete(data) {
api api
...@@ -139,8 +97,7 @@ export default { ...@@ -139,8 +97,7 @@ export default {
.then(response => { .then(response => {
this.getMsgTempList() this.getMsgTempList()
}) })
.finally(() => { .finally(() => {})
})
}, },
handleEdit(i, obj) { handleEdit(i, obj) {
this.$router.push({ this.$router.push({
...@@ -167,10 +124,8 @@ export default { ...@@ -167,10 +124,8 @@ export default {
addLogs(msg) { addLogs(msg) {
api api
.addLog({ description: msg }) .addLog({ description: msg })
.then(response => { .then(response => {})
}) .finally(() => {})
.finally(() => {
})
}, },
deleteTampList() { deleteTampList() {
const arr = [] const arr = []
...@@ -183,8 +138,7 @@ export default { ...@@ -183,8 +138,7 @@ export default {
this.getMsgTempList() this.getMsgTempList()
this.addLogs('删除模板') this.addLogs('删除模板')
}) })
.finally(() => { .finally(() => {})
})
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.selectItem = val this.selectItem = val
...@@ -194,39 +148,39 @@ export default { ...@@ -194,39 +148,39 @@ export default {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.temp-box{ .temp-box {
padding: 0 30px; padding: 0 30px;
.temp-title{ .temp-title {
height: 100px; height: 100px;
align-items: center; align-items: center;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid #f1f1f1;
display: flex; display: flex;
.search{ .search {
display: flex; display: flex;
align-items: center; align-items: center;
span{ span {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
} }
.input{ .input {
width: 240px; width: 240px;
margin: 0 40px 0 20px; margin: 0 40px 0 20px;
} }
} }
} }
.tool-btn{ .tool-btn {
margin-left: auto; margin-left: auto;
} }
.btn{ .btn {
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 14px;
} }
.btn-color{ .btn-color {
font-size: 14px; font-size: 14px;
color: #666 ; color: #666;
} }
} }
.page-box{ .page-box {
display: flex; display: flex;
justify-content: center; justify-content: center;
margin: 20px 0; margin: 20px 0;
......
src/pages/sms/smsRecord/index.vue 0 → 100644
浏览文件 @ dfa42d0e
<template>
<app-container>
<div class="temp-box">
<div class="temp-title">
<div class="search">
<span>名称</span>
<el-input v-model="input" placeholder="请输入模板名称" class="input"></el-input>
<el-button type="primary" class="btn" @click="searchList">搜索</el-button>
</div>
<div class="tool-btn">
<el-button class="btn" @click="createTamp">创建</el-button>
<!-- <el-button class="btn">编辑</el-button> -->
<el-button v-if="selectItem.length" class="btn" @click="deleteTampList">删除</el-button>
<el-button v-else disabled class="btn">删除</el-button>
</div>
</div>
<div class="table-box">
<el-table @selection-change="handleSelectionChange" :data="tableData" tooltip-effect="dark" style="width: 100%">
<el-table-column type="selection" width="55"> </el-table-column>
<el-table-column align="center" header-align="center" prop="id" label="id" width="180"> </el-table-column>
<el-table-column align="center" header-align="center" prop="name" label="名称" width="180"> </el-table-column>
<el-table-column align="center" header-align="center" prop="created_at" label="创建时间" width="180">
</el-table-column>
<el-table-column align="center" header-align="center" label="通道">
<template slot-scope="scope">
<span v-for="(items, index) in scope.row.templates" :key="index">
{{ channelValue(items.channel) }}
</span>
</template>
</el-table-column>
<el-table-column label="操作" align="center" header-align="center">
<template slot-scope="scope">
<el-button class="btn-color" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button class="btn-color" type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="page-box">
<el-pagination layout="prev, pager, next" @current-change="changePage" :total="totals"> </el-pagination>
</div>
</div>
</app-container>
</template>
<script>
import AppContainer from '@/components/AppContainer'
import * as api from '@/api/common.js'
export default {
components: {
AppContainer
},
data() {
return {
input: '',
page: {
page: 1,
limit: 10
},
totals: 1,
tableData: [],
selectItem: []
}
},
mounted() {
this.getMsgTempList(this.page)
},
methods: {
channelValue(n) {
const json = {
0: '默认',
1: '邮件',
2: '短信',
3: '钉钉',
4: '公众号'
}
return json[n]
},
searchList() {
this.getMsgTempList({ name: this.input })
},
getMsgTempList(params) {
api
.getMsgTempList(params)
.then(response => {
this.tableData = response.data.data
this.totals = response.data.total
this.page.page = response.data.current_page
// this.page.page = response.data.current_page
// this.page.lastPage = response.data.last_page
})
.finally(() => {})
},
handleDelete(data) {
api
.deleteTemp(data.id)
.then(response => {
this.getMsgTempList()
})
.finally(() => {})
},
handleEdit(i, obj) {
this.$router.push({
path: '/msgTemplate/detail',
query: {
id: obj.id
}
})
console.log(i, obj)
},
createTamp() {
this.$router.push({
path: '/smsTemplate/detail'
})
},
changePage(n) {
this.page.page = n
this.getMsgTempList(this.page)
},
prevPage() {
this.page.page--
this.getMsgTempList(this.page)
},
addLogs(msg) {
api
.addLog({ description: msg })
.then(response => {})
.finally(() => {})
},
deleteTampList() {
const arr = []
this.selectItem.map(item => {
arr.push(item.id)
})
api
.deleteTampList({ ids: arr.toString() })
.then(response => {
this.getMsgTempList()
this.addLogs('删除模板')
})
.finally(() => {})
},
handleSelectionChange(val) {
this.selectItem = val
console.log(val)
}
}
}
</script>
<style lang="scss" scoped>
.temp-box {
padding: 0 30px;
.temp-title {
height: 100px;
align-items: center;
border-bottom: 1px solid #f1f1f1;
display: flex;
.search {
display: flex;
align-items: center;
span {
font-size: 14px;
color: #333333;
}
.input {
width: 240px;
margin: 0 40px 0 20px;
}
}
}
.tool-btn {
margin-left: auto;
}
.btn {
font-weight: normal;
font-size: 14px;
}
.btn-color {
font-size: 14px;
color: #666;
}
}
.page-box {
display: flex;
justify-content: center;
margin: 20px 0;
}
</style>
src/pages/sms/smsTemplate/components/sendContent.vue 0 → 100644
浏览文件 @ dfa42d0e
<template>
<div>
<div class="send-box" v-if="isPreview">
<div class="left-content">
<div class="write-box">
<div class="write">
<div class="name">消息标题</div>
<el-input v-model="formAll.form1.title" placeholder="请输入内容" class="inp-w"></el-input>
</div>
<div class="write">
<div class="name">消息内容</div>
<el-input
v-if="tabIndex == 0"
class="inp-w inp-h"
type="textarea"
:rows="2"
placeholder="请输入内容"
v-model="formAll.form1.content">
</el-input>
</div>
<div class="write">
<div class="name">短信类型</div>
<el-select v-model="formAll.form1.select" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</div>
</div>
<div class="btn-box">
<div class="content">
<el-button type="primary" @click="nextBtn">下一步</el-button>
</div>
</div>
</div>
<div class="right-content">
<ul class="tab-btn">
<li :class="tabIndex == 0 && 'active'" @click="tabChange(0)"><div>短信</div></li>
</ul>
<ul class="tab-content">
<li>
<div class="cont-box">
<div class="icon"></div>
<div class="content" v-html="formAll.form1.content"></div>
</div>
</li>
</ul>
</div>
</div>
<div class="send-box2" v-else>
<div class="right-content">
<ul class="tab-content">
<li v-show="tabIndex == 0">
<div class="cont-box">
<div class="icon"></div>
<div class="content" v-html="formAll.form1.content"></div>
</div>
</li>
</ul>
<ul class="tab-btn">
<li :class="tabIndex == 0 && 'active'" @click="tabChange(0)"><div>短信</div></li>
</ul>
</div>
<div class="left-content">
<div class="write-box">
<div class="write">
<div class="name">消息标题：</div>
<div class="con-text" v-html="formAll.form1.title"></div>
</div>
<div class="write">
<div class="name">消息内容：</div>
<div class="con-text" v-html="formAll.form1.content"></div>
</div>
</div>
<div class="btn-box">
<div class="content">
<el-button @click="viewPrev">上一步</el-button>
<el-button type="primary" class="colors" icon="el-icon-s-promotion" @click="confirm">确认</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import * as api from '@/api/common.js'
export default {
props: {
form: {
type: Object
}
},
data() {
return {
formAll: {
form1: {
title: '',
content: '',
select: 0
}
},
options: [
{
value: 0,
label: '验证码'
},
{
value: 1,
label: '短信通知'
},
{
value: 2,
label: '推广短信'
},
{
value: 3,
label: '国际/港澳台消息'
}
],
textarea: '',
input: '',
tabIndex: 0,
isPreview: true
}
},
mounted() {
if (this.$router.query.id) {
const conForm = this.formAll.form1
conForm.title = this.form.title
conForm.content = this.form.desc
conForm.select = this.form.template_type
}
},
methods: {
addLog(msg) {
api
.addLog({ description: msg })
.then(response => {
})
.finally(() => {
})
},
tabChange(i) {
this.tabIndex = i
},
nextBtn() {
this.isPreview = false
},
viewPrev() {
this.$emit('clickPrev')
this.isPreview = true
},
confirm() {
const id = this.$route.query.id
const forms = this.formAll.form1
const param = {
title: forms.title,
desc: forms.content,
template_type: forms.select,
payload: '您正在申请手机注册，验证码为：，5分钟内有效！'
}
if (id) {
api
.editSmsTemp(id, param)
.then(response => {
if (response.code === 0) {
this.$message({
message: '编辑成功',
type: 'success'
})
this.addLog('编辑了模板')
this.$router.push({
path: '/sms/smsTemplate'
})
}
})
.finally(() => {
})
} else {
// param.templates = tamp
console.log(param)
api
.creatSmsTemp(param)
.then(response => {
if (response.code === 0) {
this.$message({
message: '创建成功',
type: 'success'
})
this.addLog('创建了模板')
this.$router.push({
path: '/sms/smsTemplate'
})
}
})
.finally(() => {
})
}
}
}
}
</script>
<style lang="scss" scoped>
.colors{
background: #4BE2AB;
border: 1px solid #4BE2AB;
}
.send-box{
display: flex;
.left-content{
position: relative;
margin-right: 30px;
flex: 1;
.btn-box{
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #f1f1f1;
width: 100%;
height: 100px;
display: flex;
align-items: center;
}
.write-box{
.write{
padding-right: 20px;
box-sizing: border-box;
display: flex;
height: 40px;
margin-bottom: 20px;
&:nth-child(1){
margin-top: 30px;
}
&:nth-child(2){
height: 118px;
}
.name{
font-size: 14px;
color: #333333;
line-height: 40px;
margin-right: 20px;
white-space:nowrap;
}
::v-deep {
textarea{
height: 100% !important;
resize:none;
}
}
}
}
}
.right-content{
flex: 1;
height: 430px;
display: flex;
.tab-btn{
width: 38px;
li{
width: 38px;
height: 80px;
border: 1px solid #ccc;
border-right: none;
border-radius: 5px 0 0 5px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.active{
border: none;
background: #F3F7FE;
div{
color: #428AFF;
}
}
div{
width: 15px;
font-size: 14px;
color: #666666;
}
}
}
.tab-content{
flex: 1;
background: #F3F7FE;
display: flex;
align-items: center;
justify-content: center;
li{
width: 201px;
height: 399px;
position: relative;
&:nth-child(1){
background: url(https://zws-imgs-pub.ezijing.com/static/public/744e5209b7369bcdc624a6e45b207771.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 105px;
left: 30px;
.icon{
position: absolute;
bottom: -3px;
left: -3px;
width: 9px;
height: 9px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e10f0460f26d1fa039abb9e8faf26ebf.png);
background-size: 100% 100%;
}
}
.content{
width: 110px;
background: #E9E9EB;
border-radius: 8px;
padding: 5px;
font-size: 8px;
color: #000000;
word-break:break-all;
}
}
&:nth-child(2){
background: url(https://zws-imgs-pub.ezijing.com/static/public/d0f4cd8b3d3115dd926662a59f2381a4.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 86px;
left: 50%;
transform: translateX(-50%);
padding: 10px 7px 0;
box-sizing: border-box;
width: 154px;
background: #FFFFFF;
border-radius: 3px;
}
.debtn{
font-size: 12px;
line-height: 20px;
border-top: 1px solid #f1f1f1;
}
.title{
font-size: 12px;
}
.time{
font-size: 12px;
}
.dec{
font-size: 12px;
margin-top: 10px;
margin-bottom: 20px;
}
}
&:nth-child(3){
background: url(https://zws-imgs-pub.ezijing.com/static/public/b291c69fbd89924a81dc804b86e81908.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 87px;
left: 22px;
.content{
display: flex;
img{
width: 17px;
height: 17px;
}
.right-contents{
margin-left: 4px;
.title{
font-size: 12px;
color: #222222;
line-height: 17px;
}
.cards{
padding: 4px;
width: 109px;
background: #FFFFFF;
border-radius: 5px;
margin-top: 2px;
.tit{
font-size: 7px;
color: #428AFF;
}
.des{
margin-top: 4px;
font-size: 12px;
color: #222222;
line-height: 15px;
}
}
}
}
}
}
&:nth-child(4){
background: url(https://zws-imgs-pub.ezijing.com/static/public/526443eb9450b7c6b03d551ccae3b32d.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 67px;
left: 50%;
transform: translateX(-50%);
width: 152px;
.tit{
font-size: 12px;
font-weight: bold;
color: #222222;
}
.comp{
font-size: 12px;
color: #269342;
margin-top: 3px;
}
.des{
font-size: 12px;
color: #222222;
margin-top: 24px;
}
}
}
}
}
}
}
.send-box2{
display: flex;
.left-content{
position: relative;
// margin-right: 30px;
padding-left: 30px;
flex: 1;
.btn-box{
box-sizing: border-box;
margin-left: 30px;
// margin-right: 30px;
position: absolute;
bottom: 0;
left: 0;
border-top: 1px solid #f1f1f1;
width: 90%;
height: 100px;
display: flex;
align-items: center;
}
.write-box{
.write{
padding-right: 20px;
box-sizing: border-box;
display: flex;
height: 40px;
&:nth-child(1){
margin-top: 30px;
margin-bottom: 20px;
}
&:nth-child(2){
height: 118px;
}
.name{
font-size: 14px;
color: #333333;
line-height: 40px;
// margin-right: 20px;
white-space:nowrap;
}
.con-text{
line-height: 40px;
color: #999;
}
::v-deep {
textarea{
height: 100% !important;
resize:none;
}
}
}
}
}
.right-content{
flex: 1;
height: 430px;
display: flex;
.tab-btn{
width: 38px;
li{
width: 38px;
height: 80px;
border: 1px solid #ccc;
border-left: none;
border-radius: 0 5px 5px 0;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&.active{
border: none;
background: #F3F7FE;
div{
color: #428AFF;
}
}
div{
width: 15px;
font-size: 14px;
color: #666666;
}
}
}
.tab-content{
flex: 1;
background: #F3F7FE;
display: flex;
align-items: center;
justify-content: center;
li{
width: 201px;
height: 399px;
position: relative;
&:nth-child(1){
background: url(https://zws-imgs-pub.ezijing.com/static/public/744e5209b7369bcdc624a6e45b207771.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 105px;
left: 30px;
.icon{
position: absolute;
bottom: -3px;
left: -3px;
width: 9px;
height: 9px;
background: url(https://zws-imgs-pub.ezijing.com/static/public/e10f0460f26d1fa039abb9e8faf26ebf.png);
background-size: 100% 100%;
}
}
.content{
width: 110px;
background: #E9E9EB;
border-radius: 8px;
padding: 5px;
font-size: 8px;
color: #000000;
word-break:break-all;
}
}
&:nth-child(2){
background: url(https://zws-imgs-pub.ezijing.com/static/public/d0f4cd8b3d3115dd926662a59f2381a4.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 86px;
left: 50%;
transform: translateX(-50%);
padding: 10px 7px 0;
box-sizing: border-box;
width: 154px;
background: #FFFFFF;
border-radius: 3px;
}
.debtn{
font-size: 12px;
line-height: 20px;
border-top: 1px solid #f1f1f1;
}
.title{
font-size: 12px;
}
.time{
font-size: 12px;
}
.dec{
font-size: 12px;
margin-top: 10px;
margin-bottom: 20px;
}
}
&:nth-child(3){
background: url(https://zws-imgs-pub.ezijing.com/static/public/b291c69fbd89924a81dc804b86e81908.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 87px;
left: 22px;
.content{
display: flex;
img{
width: 17px;
height: 17px;
}
.right-contents{
margin-left: 4px;
.title{
font-size: 12px;
color: #222222;
line-height: 17px;
}
.cards{
padding: 4px;
width: 109px;
background: #FFFFFF;
border-radius: 5px;
margin-top: 2px;
.tit{
font-size: 7px;
color: #428AFF;
}
.des{
margin-top: 4px;
font-size: 12px;
color: #222222;
line-height: 15px;
}
}
}
}
}
}
&:nth-child(4){
background: url(https://zws-imgs-pub.ezijing.com/static/public/526443eb9450b7c6b03d551ccae3b32d.png);
background-size: 100% 100%;
.cont-box{
position: absolute;
top: 67px;
left: 50%;
transform: translateX(-50%);
width: 152px;
.tit{
font-size: 12px;
font-weight: bold;
color: #222222;
}
.comp{
font-size: 12px;
color: #269342;
margin-top: 3px;
}
.des{
font-size: 12px;
color: #222222;
margin-top: 24px;
}
}
}
}
}
}
}
</style>
src/pages/sms/smsTemplate/detail.vue 0 → 100644
浏览文件 @ dfa42d0e
<template>
<app-container class="relative">
<div class="detail-box">
<div class="flex">
<div class="title-steps">
<el-steps :active="active" finish-status="success">
<el-step title="发送什么内容"></el-step>
<el-step title="概览"></el-step>
</el-steps>
</div>
</div>
<div class="detail-content" v-if="this.$route.query.id">
<template v-if="Object.keys(form).length">
<send-content
:form="form"
@clickPrev="clickPrev"
@clickNext="clickNext"
></send-content>
</template>
</div>
<template v-else>
<send-content
:form="form"
@clickPrev="clickPrev"
@clickNext="clickNext"
></send-content>
</template>
</div>
</app-container>
</template>
<script>
import AppContainer from '@/components/AppContainer'
import sendContent from './components/sendContent'
import * as api from '@/api/common.js'
export default {
components: {
AppContainer,
sendContent
},
data() {
return {
step1: '111',
form: {},
active: 3,
data: {}
}
},
mounted() {
if (this.$route.query.id) {
this.initData()
}
},
methods: {
// in
initData() {
api
.getSmsTempDetail(this.$route.query.id)
.then(response => {
if (response.code === 0) {
this.form = response.data
}
})
.finally(() => {})
},
clickNext() {
this.active++
},
clickPrev() {
this.active--
},
prevBtn() {
console.log(this.active)
if (this.active > 0) {
this.active--
} else {
this.$router.go(-1)
}
},
nextBtn() {
if (this.active === 0) {
this.form.step1 === '' ? this.$message('请填写') : this.active++
} else if (this.active === 1) {
this.form.step2 === '' ? this.$message('请选择') : this.active++
} else if (this.active === 2) {
console.log(this.form.step3.length)
this.form.step3.length === 0 ? this.$message('请选择') : this.active++
}
}
}
}
</script>
<style lang="scss" scoped>
::v-deep {
.app-container-bd {
position: relative;
}
}
.detail-box {
padding: 0 30px 0;
.foot-btn-box {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
height: 100px;
padding: 0 30px;
box-sizing: border-box;
.content {
display: flex;
height: 100%;
align-items: center;
border-top: 1px solid #f1f1f1;
}
}
}
.flex {
display: flex;
align-items: center;
height: 80px;
border-bottom: 1px solid #f1f1f1;
}
.title-steps {
width: 100%;
}
</style>
src/pages/sms/smsTemplate/index.vue 0 → 100644
浏览文件 @ dfa42d0e
<template>
<app-container>
<div class="temp-box">
<div class="temp-title">
<!-- <div class="search">
<span>名称</span>
<el-input v-model="input" placeholder="请输入模板名称" class="input"></el-input>
<el-button type="primary" class="btn" @click="searchList">搜索</el-button>
</div> -->
<div>
<el-button class="btn" @click="createTamp">创建</el-button>
</div>
</div>
<div class="table-box">
<el-table @selection-change="handleSelectionChange" :data="tableData" tooltip-effect="dark" style="width: 100%">
<el-table-column align="center" header-align="center" prop="id" label="id"> </el-table-column>
<el-table-column align="center" header-align="center" prop="title" label="标题">
</el-table-column>
<el-table-column align="center" header-align="center" prop="created_at" label="创建时间">
</el-table-column>
<el-table-column align="center" header-align="center" label="短信类型">
<template slot-scope="scope">
{{ templateTypeValue(scope.row.template_type) }}
</template>
</el-table-column>
<el-table-column label="操作" align="center" header-align="center">
<template slot-scope="scope">
<el-button class="btn-color" type="text" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
<el-button class="btn-color" type="text" @click="handleDelete(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="page-box">
<el-pagination layout="prev, pager, next" @current-change="changePage" :total="totals"> </el-pagination>
</div>
</div>
</app-container>
</template>
<script>
import AppContainer from '@/components/AppContainer'
import * as api from '@/api/common.js'
export default {
components: {
AppContainer
},
data() {
return {
input: '',
page: {
page: 1,
limit: 10
},
totals: 1,
tableData: [],
selectItem: []
}
},
mounted() {
this.getMsgTempList(this.page)
},
methods: {
channelValue(n) {
const json = {
0: '默认',
1: '邮件',
2: '短信',
3: '钉钉',
4: '公众号'
}
return json[n]
},
templateTypeValue(n) {
const val = {
0: '验证码',
1: '短信通知',
2: '推广短信',
3: '国际/港澳台消息'
}
return val[n]
},
searchList() {
this.getMsgTempList({ name: this.input })
},
getMsgTempList(params) {
api
.getSmsTempList(params)
.then(response => {
this.tableData = response.data.data
this.totals = response.data.total
this.page.page = response.data.current_page
this.page.page = response.data.current_page
// this.page.lastPage = response.data.last_page
})
.finally(() => {})
},
handleDelete(data) {
api
.deleteSmsTemp(data.id)
.then(response => {
this.getMsgTempList()
})
.finally(() => {})
},
handleEdit(i, obj) {
this.$router.push({
path: '/smsTemplate/detail',
query: {
id: obj.id
}
})
console.log(i, obj)
},
createTamp() {
this.$router.push({
path: '/smsTemplate/detail'
})
},
changePage(n) {
this.page.page = n
this.getMsgTempList(this.page)
},
prevPage() {
this.page.page--
this.getMsgTempList(this.page)
},
addLogs(msg) {
api
.addLog({ description: msg })
.then(response => {})
.finally(() => {})
},
deleteTampList() {
const arr = []
this.selectItem.map(item => {
arr.push(item.id)
})
api
.deleteTampList({ ids: arr.toString() })
.then(response => {
this.getMsgTempList()
this.addLogs('删除模板')
})
.finally(() => {})
},
handleSelectionChange(val) {
this.selectItem = val
console.log(val)
}
}
}
</script>
<style lang="scss" scoped>
.temp-box {
padding: 0 30px;
.temp-title {
height: 100px;
align-items: center;
border-bottom: 1px solid #f1f1f1;
display: flex;
.search {
display: flex;
align-items: center;
span {
font-size: 14px;
color: #333333;
}
.input {
width: 240px;
margin: 0 40px 0 20px;
}
}
}
.tool-btn {
margin-left: auto;
}
.btn {
font-weight: normal;
font-size: 14px;
}
.btn-color {
font-size: 14px;
color: #666;
}
}
.page-box {
display: flex;
justify-content: center;
margin: 20px 0;
}
</style>
src/router/routes.js
浏览文件 @ dfa42d0e
...@@ -16,7 +16,11 @@ export default [ ...@@ -16,7 +16,11 @@ export default [
/* 用户群组 */ /* 用户群组 */
{ path: '/userGroup', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/userGroup/index') }, { path: '/userGroup', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/userGroup/index') },
/* 日志 */ /* 日志 */
{ path: '/log', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/log/index') } { path: '/log', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/log/index') },
/* 短信管理 */
{ path: '/sms/smsTemplate', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/sms/smsTemplate/index') },
{ path: '/sms/smsRecord', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/sms/smsRecord/index') },
{ path: '/smsTemplate/detail', component: () => import(/* webpackChunkName: "feedback" */ '@/pages/sms/smsTemplate/detail') }
// /* 修改密码 */ // /* 修改密码 */
// { // {
// path: '/account/password', // path: '/account/password',
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论