551 行
22 KiB
HTML
可执行文件
551 行
22 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<style>
|
|
#templateApp {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
|
|
.template-list-tabs {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.template-list-title {
|
|
line-height: 48px;
|
|
padding: 0 20px;
|
|
color: #333;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.template-list-title .el-icon-delete {
|
|
font-size: 18px;
|
|
color: #c0c4cc;
|
|
}
|
|
|
|
.template-list-title .el-input {
|
|
margin-right: 30px;
|
|
font-size: 13px;
|
|
color: #000;
|
|
}
|
|
|
|
.template-list {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px 5px;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.template-list-left {
|
|
width: 100px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.template-list-right {
|
|
flex: 1;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.template-bottom-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 20px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.template-line {
|
|
border-top: 1px solid #ebeef5;
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.template-bottom-line {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.template-bottom-line > span {
|
|
color: #333;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.template-input-box {
|
|
flex: 1;
|
|
}
|
|
|
|
.template-list-box {
|
|
width: 376px;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
transition: .3s;
|
|
margin: 5px;
|
|
}
|
|
|
|
.template-list-box:hover {
|
|
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
|
|
}
|
|
|
|
.template-list-icon-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 5px;
|
|
transition: 0.1s;
|
|
}
|
|
|
|
.el-icon-zoom-in:before, .el-icon-zoom-out:before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.el-icon-arrow-down:before, .el-icon-arrow-up:before {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.template-list-style .el-input__inner {
|
|
height: 28px;
|
|
line-height: 28px;
|
|
border-top: none;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.template-list-font-big .el-input__inner {
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.el-input__inner {
|
|
padding: 0 10px;
|
|
}
|
|
|
|
.add-template-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.add-template-box .el-button {
|
|
font-size: 60px;
|
|
color: #c0c4cc;
|
|
}
|
|
</style>
|
|
<div id="templateApp" v-cloak>
|
|
<div style="margin:20px;">
|
|
<el-collapse accordion>
|
|
<el-collapse-item>
|
|
<template slot="title">
|
|
<el-button size="small" type="text">设置须知>>></el-button>
|
|
</template>
|
|
<div style="color: #666">
|
|
<div>1. 请在“微信公众平台|小程序”进入“模板消息”菜单栏，添加模板编号为：以下模板编号的模板。</div>
|
|
<div>2. 关键词名称仅仅是一个描述作用，推送中还是以小程序后台您所选择模板列表里的名称为准，请按照小程序后台的模板填写</div>
|
|
<div>3. 选择值是选择关键词名称对应的您想要推送时显示的值</div>
|
|
<div>4. 以下排序主要是考虑到每个商家选择的模板排序不同而生，请按照小程序后台您所选择的顺序排序，否则将会导致值对应不上名称哦</div>
|
|
<div>5. 因受小程序模板限制，放大的内容只能是一行，不能多行放大，并且每个模板的关键词最多只能添加10个</div>
|
|
<div>6. 每种通知类型我们将默认给出一个模板供您参考，您可以选择去小程序后台添加使用该模板，也可以选择其他模板</div>
|
|
<div>7. 每种通知类型的模板只能开启一个，想要使用服务通知编辑完千万别忘了开启并点击保存哦</div>
|
|
</div>
|
|
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
<div v-loading="loading"
|
|
element-loading-text="模板获取中..."
|
|
element-loading-spinner="el-icon-loading"
|
|
style="display: flex;flex-wrap: wrap;">
|
|
<template v-for="(listA, index) in template_list">
|
|
<div class="template-list-tabs">
|
|
<div class="template-list-box">
|
|
<div class="template-list-title">
|
|
<el-input v-model="listA.fields_json.title" placeholder="模板标识" size="mini"></el-input>
|
|
<el-button type="text" icon="el-icon-delete"
|
|
@click="delTemplate(index)"></el-button>
|
|
</div>
|
|
<div class="template-list-title">
|
|
<el-select v-model="listA.type" size="mini"
|
|
placeholder="选择类型"
|
|
:clearable="true" filterable
|
|
@change="selectType(index)">
|
|
<el-option
|
|
v-for="typeVal in typeArr"
|
|
:value-key="typeVal.k"
|
|
:key="typeVal.k"
|
|
:label="typeVal.v"
|
|
:value="typeVal.k">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<template v-for="(listB,j) in listA.fields_json.keyword_list">
|
|
<div class="template-list template-list-style" style="font-size:14px">
|
|
<div class="template-list-left">
|
|
<el-input size="mini" v-model="listB.title" placeholder="关键词名称"></el-input>
|
|
</div>
|
|
<div class="template-list-left">
|
|
<el-input size="mini" v-model="listB.key" placeholder="thing1"></el-input>
|
|
</div>
|
|
<div class="template-list-right">
|
|
<el-select v-model="listB.field" size="mini" placeholder="选择值"
|
|
:clearable="true" filterable
|
|
@change="selectFields($event)">
|
|
<el-option
|
|
v-for="field in fieldsList[listA.type]"
|
|
:value-key="field.field"
|
|
:key="field.field"
|
|
:label="field.name"
|
|
:disabled="jumpFields(listB,j,field.field)"
|
|
:value="field.field">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="template-list-icon-box">
|
|
<el-button icon="el-icon-delete" type="text"
|
|
@click="delField(index,j)"></el-button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="template-list" style="color: #333;">
|
|
<el-button :disabled="listA.fields_json.keyword_list.length>=10" size="mini"
|
|
icon="el-icon-plus" type="primary" plain
|
|
@click="addFieldList(index)">添加
|
|
</el-button>
|
|
</div>
|
|
<div class="template-list">
|
|
<div class="template-list-left" style="color: #333;">模板ID</div>
|
|
<div class="template-input-box">
|
|
<el-input v-model="listA.model_id" size="mini"></el-input>
|
|
</div>
|
|
</div>
|
|
<div class="template-bottom-flex" style="margin-bottom: 20px;">
|
|
<div class="template-bottom-line">
|
|
<span>状态</span>
|
|
<el-switch v-model="listA.status"
|
|
active-value="1"
|
|
inactive-value="0"
|
|
:active-text="listA.status==1?'开启':'关闭'"
|
|
:active-color="listA.status==1?'#409EFF':'#dcdfe6'"
|
|
@change="changeStatus(listA.id,listA.status,listA.type)"></el-switch>
|
|
</div>
|
|
<div>
|
|
<el-button size="mini" type="primary" @click="save(index)">保存</el-button>
|
|
<el-button size="mini" type="primary" @click="pushTest(index)">测试</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="add-template-box">
|
|
<el-button icon="el-icon-plus" @click="addTemplate"></el-button>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-dialog :modal-append-to-body="false" style="width: 800px;margin:auto" title="测试推送" :visible.sync="vipInfo">
|
|
<div class="dialog-details-first">
|
|
<template>
|
|
<div style="display: flex;">
|
|
<el-input
|
|
size="small"
|
|
style="margin-right: 20px;"
|
|
class="el-input-remote"
|
|
v-model="vipPhone"
|
|
placeholder="请输入小程序用户的会员手机号">
|
|
</el-input>
|
|
<el-button type="primary" plain @click="pushNews" size="small">发送</el-button>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</el-dialog>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var templateApp = new Vue({
|
|
el: "#templateApp",
|
|
data: {
|
|
vipInfo: false,
|
|
vipPhone: '',
|
|
template_list: [],
|
|
loading: true,
|
|
keyword: '',
|
|
typeArr: {$typeArr},
|
|
fieldsList: {$fieldsList},
|
|
temp_model: {
|
|
type: '',
|
|
id: 0,
|
|
status: 0,
|
|
fields_json: {
|
|
title: '',
|
|
first: '',
|
|
remark: '',
|
|
keyword_list: []
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
//推送消息
|
|
pushNews: function () {
|
|
var that = this;
|
|
var vipPhone = that.vipPhone;
|
|
var index = that.index;
|
|
if (!that.vipPhone) {
|
|
return that.$message.error("请输入小程序用户的会员手机号");
|
|
}
|
|
if (index === '') {
|
|
return that.$message.error("参数错误,请刷新重试");
|
|
}
|
|
$.ajax({
|
|
url: "{:U('pushNews')}",
|
|
type: "post",
|
|
data: {
|
|
vipPhone: vipPhone,
|
|
type: this.template_list[index].type,
|
|
},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.$message.success(res.message);
|
|
} else {
|
|
that.$message.error(res.message);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//测试
|
|
pushTest: function (index) {
|
|
this.vipInfo = true;
|
|
this.index = index;
|
|
},
|
|
//添加模板
|
|
addTemplate: function () {
|
|
var obj = JSON.parse(JSON.stringify(this.temp_model));
|
|
obj.typeArr = this.typeArr;
|
|
this.template_list.push(obj);
|
|
},
|
|
//判断字段是否可选
|
|
jumpFields: function (listB, index, jumpField) {
|
|
for (var i = 0; i < listB.length; i++) {
|
|
if (i != index && listB[i].field == jumpField) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
//选择字段
|
|
selectFields: function (e) {
|
|
console.log(e);
|
|
},
|
|
//修改状态
|
|
changeStatus: function (id, status, type) {
|
|
if (id != 0) {
|
|
$.ajax({
|
|
url: "{:U('saveState')}",
|
|
type: "post",
|
|
data: {
|
|
id: id,
|
|
status: status,
|
|
type: type
|
|
},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
type: 'success',
|
|
message: res.msg,
|
|
duration: 1000
|
|
})
|
|
} else {
|
|
this.$message({
|
|
type: 'error',
|
|
message: res.msg,
|
|
duration: 1000
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
//添加模板字段
|
|
addFieldList: function (index) {
|
|
var obj = {
|
|
title: '',
|
|
key: '',
|
|
field: '',
|
|
};
|
|
this.template_list[index].fields_json.keyword_list.push(obj);
|
|
},
|
|
//删除模板字段
|
|
delField: function (index, _index, __index) {
|
|
this.template_list[index].fields_json.keyword_list.splice(_index, 1);
|
|
},
|
|
//删除整个模板
|
|
delTemplate: function (index) {
|
|
if (this.template_list[index].id == 0) {
|
|
this.template_list.splice(index, 1);
|
|
} else {
|
|
this.$confirm("确认删除该模板吗？", "删除提示", {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
this.$loading({
|
|
lock: true,
|
|
text: '删除中，请等待',
|
|
spinner: 'el-icon-loading',
|
|
background: 'rgba(255, 255, 255, 0.7)'
|
|
});
|
|
$.ajax({
|
|
url: "{:U('deleteTemplate')}", //图片上传出来的url，返回的是图片上传后的路径，http格式
|
|
type: "POST",
|
|
data: {
|
|
id: this.template_list[index].id
|
|
},
|
|
success: (res) => {
|
|
this.$loading().close();
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1000,
|
|
onClose: () => {
|
|
this.template_list.splice(index, 1);
|
|
}
|
|
});
|
|
} else {
|
|
this.$message({message: res.msg, type: 'error'});
|
|
}
|
|
},
|
|
error: () => {
|
|
this.$loading().close();
|
|
this.$message({message: '系统发生错误', type: 'error'});
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
this.$loading().close();
|
|
})
|
|
}
|
|
},
|
|
//保存
|
|
save: function (index) {
|
|
var item = this.template_list[index];
|
|
if (!item.type) {
|
|
this.$message({
|
|
message: '请选择模板类型',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (item.fields_json.title == '') {
|
|
this.$message({
|
|
message: '请输入模板标识',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (item.model_id == undefined) {
|
|
this.$message({
|
|
message: '请输入模板ID',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (item.fields_json.keyword_list.length <= 0) {
|
|
this.$message({
|
|
message: '请添加字段',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
for (var i = 0; i < item.fields_json.keyword_list.length; i++) {
|
|
if (item.fields_json.keyword_list[i].key == '') {
|
|
this.$message({
|
|
message: '请输入模板键名',
|
|
type: 'warning',
|
|
duration: 1500
|
|
});
|
|
return;
|
|
}
|
|
if (item.fields_json.keyword_list[i].field == '') {
|
|
this.$message({
|
|
message: '请选择推送内容',
|
|
type: 'warning',
|
|
duration: 1500
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
$.ajax({
|
|
url: "{:U('updateSet')}",
|
|
data: item,
|
|
type: 'post',
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
this.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1500,
|
|
});
|
|
if (res.id && !item.id) {
|
|
this.template_list[index].id = res.id;
|
|
}
|
|
} else {
|
|
this.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
},
|
|
error: () => {
|
|
this.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
})
|
|
},
|
|
//选择模板类型
|
|
selectType: function (i) {
|
|
this.template_list[i].fields_json.keyword_list = [];
|
|
},
|
|
},
|
|
created: function () {
|
|
$.ajax({
|
|
url: "{:U('getModelList')}",
|
|
type: 'post',
|
|
data: {},
|
|
success: (res) => {
|
|
if (res.status == 1) {
|
|
for (var i = 0; i < res.template_list.length; i++) {
|
|
res.template_list[i].typeArr = this.typeArr;
|
|
}
|
|
this.template_list = res.template_list;
|
|
this.loading = false;
|
|
} else {
|
|
this.loading = false;
|
|
this.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
},
|
|
error: () => {
|
|
this.loading = false;
|
|
this.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
})
|
|
}
|
|
});
|
|
</script> |