767 行
33 KiB
HTML
可执行文件
767 行
33 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<style>
|
|
.chooseWrap {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.chooseList {
|
|
background: #f1f1f1;
|
|
width: 200px;
|
|
height: 80px;
|
|
line-height: 80px;
|
|
text-align: center;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
a, .a {
|
|
color: #01AAED !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chooseList {
|
|
margin: 15px;
|
|
}
|
|
|
|
[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: 460px;
|
|
border: 1px solid #ebeef5;
|
|
border-radius: 4px;
|
|
transition: .3s;
|
|
margin: 5px 5px 20px;
|
|
}
|
|
|
|
.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;
|
|
width: 138px;
|
|
}
|
|
|
|
.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="MarkApp" v-cloak>
|
|
<div class="layui-tab layui-tab-card">
|
|
<ul class="layui-tab-title">
|
|
<li class="layui-this">最新版设置</li>
|
|
<li>新版设置</li>
|
|
<li>旧版设置</li>
|
|
</ul>
|
|
<div class="layui-tab-content">
|
|
<div class="layui-tab-item layui-show">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">新版模板消息(通知)设置</div>
|
|
<div class="layui-card-body" style="padding: 20px 0">
|
|
<div v-loading="loading"
|
|
element-loading-text="模板获取中..."
|
|
element-loading-spinner="el-icon-loading"
|
|
style="display: flex;flex-wrap: wrap;">
|
|
<template v-for="(listA, i) in template_list">
|
|
<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(i)"></el-button>
|
|
</div>
|
|
<div class="template-list-title">
|
|
<el-select v-model="listA.type" size="mini"
|
|
placeholder="选择类型"
|
|
:clearable="true" filterable
|
|
@change="selectType(i)">
|
|
<el-option
|
|
v-for="typeVal in listA.typeArr"
|
|
:value-key="typeVal.k"
|
|
:key="typeVal.k"
|
|
:label="typeVal.v"
|
|
:value="typeVal.k">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<div class="template-list">
|
|
<el-input size="mini" v-model="listA.fields_json.first"
|
|
placeholder="first"></el-input>
|
|
<el-color-picker size="small"
|
|
v-model="listA.fields_json.first_color"></el-color-picker>
|
|
</div>
|
|
<template v-for="(listB,j) in listA.fields_json.keyword_list">
|
|
<div class="template-list template-list-style">
|
|
<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="keyword"></el-input>
|
|
</div>
|
|
<div class="template-list-right">
|
|
<el-select v-model="listB.value" size="mini"
|
|
placeholder="选择值"
|
|
:clearable="true" filterable
|
|
@change="selectFields($event)">
|
|
<el-option
|
|
v-for="field in fieldsArr[listA.type]"
|
|
:label="field.name"
|
|
:value="field.field"
|
|
:disabled="jumpFields(listB,j,field.field)"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
<el-color-picker size="small" v-model="listB.color"></el-color-picker>
|
|
<div class="template-list-icon-box">
|
|
<el-button icon="el-icon-delete" type="text"
|
|
@click="delField(i,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(i)">添加
|
|
</el-button>
|
|
</div>
|
|
<div class="template-list">
|
|
<el-input size="mini" v-model="listA.fields_json.remark"
|
|
placeholder="remark"></el-input>
|
|
<el-color-picker size="small"
|
|
v-model="listA.fields_json.remark_color"></el-color-picker>
|
|
</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="saveState(listA.id,listA.status,listA.type)"></el-switch>
|
|
</div>
|
|
<div>
|
|
<el-button size="mini" type="primary" @click="save(i)">
|
|
保存
|
|
</el-button>
|
|
<el-button size="mini" type="primary" @click="testPush(i)">
|
|
测试
|
|
</el-button>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<div class="add-template-box">
|
|
<el-button icon="el-icon-plus"
|
|
@click="addTemplate"></el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">新版模板消息(通知)设置</div>
|
|
<div class="layui-card-body">
|
|
<div>
|
|
<ul class="chooseWrap">
|
|
<li class="chooseList" v-for="(item,index) in choose">
|
|
<if condition="$authArr['mark_detail'] eq true">
|
|
<div class="a" @click="tosetmark(item.model,item.type)">{{item.type}}</div>
|
|
<else/>
|
|
<div class="a">{{item.type}}</div>
|
|
</if>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-tab-item">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header">旧版模板消息(通知)设置</div>
|
|
<div class="layui-card-body">
|
|
<input type="hidden" name="id" value="{$info.id}" id="id">
|
|
<table class="layui-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>类型</th>
|
|
<th>模板消息编码</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
<tr>
|
|
<td>会员卡激活</td>
|
|
<td>{$info['vip_mark']}</td>
|
|
<td>
|
|
<if condition="$authArr['mark_set'] eq true">
|
|
<el-button size="mini"
|
|
type="text"
|
|
onclick="changeOldMarkModel('会员卡激活','vip_mark','{$info.vip_mark}')">
|
|
修改
|
|
</el-button>
|
|
</if>
|
|
</td>
|
|
|
|
</tr>
|
|
<tr>
|
|
<td>会员卡充值</td>
|
|
<td>{$info['recharge_mark']}</td>
|
|
<td>
|
|
<if condition="$authArr['mark_set'] eq true">
|
|
<el-button size="mini"
|
|
type="text"
|
|
onclick="changeOldMarkModel('会员卡充值','recharge_mark','{$info.recharge_mark}')">
|
|
修改
|
|
</el-button>
|
|
</if>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td>会员消费</td>
|
|
<td>{$info['pay_mark']}</td>
|
|
<td>
|
|
<if condition="$authArr['mark_set'] eq true">
|
|
<el-button size="mini"
|
|
type="text"
|
|
onclick="changeOldMarkModel('会员消费','pay_mark','{$info.pay_mark}')">
|
|
修改
|
|
</el-button>
|
|
</if>
|
|
</td>
|
|
</tr>
|
|
<!--<tr>-->
|
|
<!--<td>会员卡积分变更</td>-->
|
|
<!--<td>{$info['integral_mark']}</td>-->
|
|
<!--<td><a href="javascript:;" class="changemark" data-title="会员卡积分变更" data-type1="integral_mark" data-msg="{$info['integral_mark']}">修改</a></td>-->
|
|
<!--</tr>-->
|
|
<tr>
|
|
<td>优惠券发放</td>
|
|
<td>{$info['launchcoupon_mark']}</td>
|
|
<td>
|
|
<if condition="$authArr['mark_set'] eq true">
|
|
<el-button size="mini"
|
|
type="text"
|
|
onclick="changeOldMarkModel('优惠券发放','launchcoupon_mark','{$info.launchcoupon_mark}')">
|
|
修改
|
|
</el-button>
|
|
</if>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-dialog :modal-append-to-body="false" title="测试推送" style="width: 800px;margin:auto;" :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>
|
|
//修改旧模板参数
|
|
function changeOldMarkModel(title, type, msg) {
|
|
console.log(msg);
|
|
top.layer.open({
|
|
type: 2,
|
|
title: "<span class='a'>" + title + '</span>设置',
|
|
shade: 0,
|
|
area: ['50%', '260px'],
|
|
content: "{:U('Retail/Mark/mark_set')}" + "?type=" + type + "&msg=" + msg + "&id=" + $('#id').val(),
|
|
resize: false,
|
|
move: true,
|
|
offset: 'center',
|
|
end: function () {
|
|
MenuApp.refreshWindow();
|
|
//location.reload();
|
|
}
|
|
});
|
|
};
|
|
layui.use(['layer', 'element', 'table'], function () {
|
|
var layer = layui.layer;
|
|
new Vue({
|
|
el: "#MarkApp",
|
|
data: {
|
|
vipPhone: '',
|
|
index: '', //下标
|
|
vipInfo: false,
|
|
typeArr: {$typeArr},
|
|
fieldsArr: {$fieldsArr},
|
|
template_list: [],
|
|
loading: true,
|
|
keyword: '',
|
|
fieldsList: [],
|
|
temp_model: {
|
|
type: '',
|
|
id: 0,
|
|
status: 0,
|
|
fields_json: {
|
|
title: '',
|
|
first: '',
|
|
remark: '',
|
|
keyword_list: []
|
|
}
|
|
},
|
|
choose: [
|
|
{
|
|
type: "会员卡激活",
|
|
model: 1,
|
|
},
|
|
{
|
|
type: "会员卡充值",
|
|
model: 2,
|
|
},
|
|
{
|
|
type: "会员消费",
|
|
model: 3,
|
|
},
|
|
{
|
|
type: "优惠劵发放",
|
|
model: 4,
|
|
},
|
|
{
|
|
type: "退款通知",
|
|
model: 5,
|
|
}]
|
|
},
|
|
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);
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//测试推送
|
|
testPush: function (i) {
|
|
this.vipInfo = true;
|
|
this.index = i;
|
|
},
|
|
tosetmark: function (model, type) {
|
|
layer.open({
|
|
type: 2,
|
|
title: "<span class='a'>" + type + '</span> 模板设置',
|
|
area: ['calc(100% - 160px)', 'calc(100% - 65px)'],
|
|
offset: 'rb',
|
|
content: "{:U('Retail/Mark/mark_detail')}" + "?model=" + model, //iframe的url
|
|
resize: false,
|
|
move: false,
|
|
offset: 'rb',
|
|
shade: 0,
|
|
});
|
|
},
|
|
//添加模板
|
|
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) {
|
|
|
|
},
|
|
//修改状态
|
|
changeStatus: function (index, _index) {
|
|
var template_list = JSON.parse(JSON.stringify(this.template_list));
|
|
var flag = false;
|
|
for (var i = 0; i < template_list[index].list.length; i++) {
|
|
if (i != _index && template_list[index].list[i].status == 1) {
|
|
flag = true;
|
|
template_list[index].list[i].status = '0';
|
|
break;
|
|
}
|
|
}
|
|
if (flag) {
|
|
this.template_list = [];
|
|
this.template_list = template_list;
|
|
}
|
|
},
|
|
//添加模板字段
|
|
addFieldList: function (index) {
|
|
var obj = {
|
|
title: '',
|
|
key: '',
|
|
value: ''
|
|
};
|
|
this.template_list[index].fields_json.keyword_list.push(obj);
|
|
},
|
|
//删除模板字段
|
|
delField: function (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 {
|
|
var that = this;
|
|
this.$confirm("确认删除该模板吗？", "删除提示", {
|
|
confirmButtonText: '删除',
|
|
cancelButtonText: '取消',
|
|
type: 'info'
|
|
}).then(() => {
|
|
that.$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: that.template_list[index].id
|
|
},
|
|
success: function (res) {
|
|
that.$loading().close();
|
|
if (res.status == 1) {
|
|
that.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1000,
|
|
onClose: function () {
|
|
that.template_list.splice(index, 1);
|
|
}
|
|
});
|
|
} else {
|
|
that.$message({message: res.msg, type: 'error'});
|
|
}
|
|
},
|
|
error: function () {
|
|
that.$loading().close();
|
|
that.$message({message: '系统发生错误', type: 'error'});
|
|
}
|
|
});
|
|
}).catch(() => {
|
|
that.$loading().close();
|
|
})
|
|
}
|
|
},
|
|
//保存
|
|
save: function (index) {
|
|
var that = this;
|
|
var item = this.template_list[index];
|
|
if (!item.type) {
|
|
that.$message({
|
|
message: '请选择模板类型',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (item.fields_json.title == '') {
|
|
that.$message({
|
|
message: '请输入模板标识',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (item.model_id == undefined) {
|
|
that.$message({
|
|
message: '请输入模板ID',
|
|
type: 'warning',
|
|
duration: 1000
|
|
});
|
|
return;
|
|
}
|
|
if (item.fields_json.keyword_list.length <= 0) {
|
|
that.$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 == '') {
|
|
that.$message({
|
|
message: '请输入模板键名',
|
|
type: 'warning',
|
|
duration: 1500
|
|
});
|
|
return;
|
|
}
|
|
if (item.fields_json.keyword_list[i].value == '') {
|
|
that.$message({
|
|
message: '请选择推送内容',
|
|
type: 'warning',
|
|
duration: 1500
|
|
});
|
|
return;
|
|
}
|
|
}
|
|
$.ajax({
|
|
url: "{:U('updateSet')}",
|
|
data: item,
|
|
type: 'post',
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.$message({
|
|
message: res.msg,
|
|
type: 'success',
|
|
duration: 1000,
|
|
onClose: function () {
|
|
if (res.id && !item.id) {
|
|
that.template_list[index].id = res.id;
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
that.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
},
|
|
error: function () {
|
|
that.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
})
|
|
},
|
|
//选择模板类型
|
|
selectType: function (i) {
|
|
var that = this;
|
|
that.template_list[i].fields_json.keyword_list = [];
|
|
},
|
|
//修改模板类型
|
|
saveState: function (id, status, type) {
|
|
if (id != 0) {
|
|
var that = this;
|
|
$.ajax({
|
|
url: "{:U('saveState')}",
|
|
type: "post",
|
|
data: {
|
|
id: id,
|
|
status: status,
|
|
type: type
|
|
},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.$message({
|
|
type: 'success',
|
|
message: res.msg,
|
|
duration: 1000
|
|
})
|
|
} else {
|
|
that.$message({
|
|
type: 'error',
|
|
message: res.msg,
|
|
duration: 1000
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
},
|
|
created: function () {
|
|
var that = this;
|
|
$.ajax({
|
|
url: "{:U('getModelList')}",
|
|
type: 'post',
|
|
data: {},
|
|
success: function (res) {
|
|
if (res.status == 1) {
|
|
that.template_list = res.template_list;
|
|
that.$nextTick(function () {
|
|
for (var i = 0; i < res.template_list.length; i++) {
|
|
that.template_list[i].typeArr = that.typeArr;
|
|
}
|
|
that.loading = false;
|
|
})
|
|
} else {
|
|
that.loading = false;
|
|
that.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
},
|
|
error: function () {
|
|
that.loading = false;
|
|
that.$message({
|
|
message: res.msg ? res.msg : '请求出错了',
|
|
type: 'error',
|
|
duration: 1500,
|
|
});
|
|
}
|
|
})
|
|
}
|
|
})
|
|
})
|
|
</script> |