445 行
19 KiB
HTML
可执行文件
445 行
19 KiB
HTML
可执行文件
<!doctype html>
|
||
<html lang="zh">
|
||
<!--[1.0.92]-->
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport"
|
||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||
<title>模板选择</title>
|
||
<link rel="stylesheet" href="__PUBLIC__/css/css-comment.css">
|
||
<link rel="stylesheet" type="text/css" href="__PUBLIC__/layui-v2.4.3/layui/css/layui.css"/>
|
||
<style>
|
||
#app {
|
||
box-sizing: border-box;
|
||
padding: 30px;
|
||
}
|
||
|
||
.chooseWrap {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.chooseList {
|
||
width: 300px;
|
||
box-sizing: border-box;
|
||
padding: 15px 25px;
|
||
border: 1px solid #f1f1f1;
|
||
-webkit-border-radius: 5px;
|
||
-moz-border-radius: 5px;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 1px 1px #f1f1f1;
|
||
margin: 10px;
|
||
}
|
||
.chooseList:hover{
|
||
border: 1px solid #2FA9F1;
|
||
box-shadow: 0 0 1px 1px #2FA9F1;
|
||
transition: all 0.2s linear;
|
||
}
|
||
.chooseList .list-ul {
|
||
border-bottom: 1px solid #ddd;
|
||
padding-bottom: 15px;
|
||
margin-bottom: 15px;
|
||
line-height: 23px;
|
||
font-size: 12px;
|
||
height: 170px;
|
||
}
|
||
.radio_inner {
|
||
display: block;
|
||
margin: 10px 0;
|
||
text-align: center;
|
||
}
|
||
.choose_inner {
|
||
width: 100%;
|
||
line-height: 36px;
|
||
|
||
}
|
||
.choose_inner input{
|
||
box-sizing: border-box;
|
||
padding: 3px 5px;
|
||
width: 100%;
|
||
font-size: 12px;
|
||
border: 1px solid #ddd;
|
||
}
|
||
.chooseBtn {
|
||
box-sizing: border-box;
|
||
padding: 8px 15px;
|
||
background: #2FA9F1;
|
||
color: #fff;
|
||
font-size: 12px;
|
||
border-radius: 3px;
|
||
/*margin:15px auto 5px;*/
|
||
border:none;
|
||
outline: none;
|
||
}
|
||
.templateTip {
|
||
background: #f1f1f1;
|
||
box-sizing: border-box;
|
||
padding: 15px ;
|
||
-webkit-border-radius: 2px;
|
||
-moz-border-radius: 2px;
|
||
border-radius: 2px;
|
||
font-size: 14px;
|
||
}
|
||
.template_number {
|
||
padding: 0;
|
||
font-size: 12px;
|
||
}
|
||
.list {
|
||
display: flex;
|
||
justify-content:space-around;
|
||
align-items: center;
|
||
flex-direction: row;
|
||
margin: 10px 0;
|
||
}
|
||
.status {
|
||
width: 52px;
|
||
height: 22px;
|
||
border-radius: 13px;
|
||
font-size: 13px;
|
||
border: 1px solid #ccc;
|
||
/*margin: 0 auto;*/
|
||
cursor: pointer;
|
||
position: relative;
|
||
transition: 0.3s;
|
||
}
|
||
.isOpen {
|
||
background-color: #2FA9F1;
|
||
border-color: #2FA9F1;
|
||
}
|
||
|
||
.isOpen:before {
|
||
content: '开启';
|
||
color: white;
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 3px;
|
||
transform: scale(0.9);
|
||
}
|
||
.isOpen:after{
|
||
content: '';
|
||
background-color: white;
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 30px;
|
||
border-radius: 50%;
|
||
transform: scale(0.9);
|
||
}
|
||
.isClose:before {
|
||
content: '关闭';
|
||
color: #aaa;
|
||
position: absolute;
|
||
top: 4px;
|
||
left: 20px;
|
||
transform: scale(0.9);
|
||
}
|
||
.isClose:after {
|
||
content: '';
|
||
background-color: #bbb;
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
top: 3px;
|
||
left: 5px;
|
||
border-radius: 50%;
|
||
transform: scale(0.9);
|
||
}
|
||
[v-cloak]{
|
||
display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="app" v-cloak>
|
||
<p class="templateTip">请在“微信公众平台”选择行业为：“IT科技 - 互联网|电子商务”，搜索标题为：“{{keyword}}”，添加模板编号为：“xxxxxxxxxxxxxxx”的模板。</p>
|
||
<blockquote class="layui-elem-quote layui-quote-nm">
|
||
<p>1.变量{shopname}将替换成门店名称或商户名称(如：测试门店)。例：谢谢惠顾，{shopname}祝你生活愉快！</p>
|
||
<p>2.变量{vipname}将替换成会员名称(如：张三)。例：尊敬的{vipname},你已成功激活会员卡：</p>
|
||
<p>3.变量{phone}将替换成会员手机号(如：13400000000)。例：您用{phone}的手机手机号注册了本店的会员：</p>
|
||
<p>4.变量只用于模板标题或注释部分！</p>
|
||
</blockquote>
|
||
<div class="chooseWrap">
|
||
<div class="chooseList" v-for="(item,index) in template_list">
|
||
<ul class="list-ul">
|
||
<li class="choose_inner">
|
||
<input type="text" :style="{color:item.titlecolor?item.titlecolor:'#000000'}" name="template_title" placeholder="输入模板标题" v-model="item.template_title" autocomplete="off">
|
||
</li>
|
||
<li v-if="item.keyword1 && item.keyword1[0]">{{item.keyword1[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword1[1]}}</span></li>
|
||
<li v-if="item.keyword2 && item.keyword2[0]">{{item.keyword2[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword2[1]}}</span></li>
|
||
<li v-if="item.keyword3 && item.keyword3[0]">{{item.keyword3[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword3[1]}}</span></li>
|
||
<li v-if="item.keyword4 && item.keyword4[0]">{{item.keyword4[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword4[1]}}</span></li>
|
||
<li v-if="item.keyword5 && item.keyword5[0]">{{item.keyword5[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword5[1]}}</span></li>
|
||
<li v-if="item.keyword6 && item.keyword6[0]">{{item.keyword6[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword6[1]}}</span></li>
|
||
<li v-if="item.keyword7 && item.keyword7[0]">{{item.keyword7[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword7[1]}}</span></li>
|
||
<li v-if="item.keyword8 && item.keyword8[0]">{{item.keyword8[0]}}：<span :style="{color:item.bodycolor?item.bodycolor:'#000000'}">{{item.keyword8[1]}}</span></li>
|
||
<li class="choose_inner">
|
||
<input type="text" :style="{color:item.remarkcolor?item.remarkcolor:'#000000'}" name="template_remark" placeholder="输入模板备注" v-model="item.template_remark" autocomplete="off">
|
||
</li>
|
||
</ul>
|
||
<p class="template_number">模板编号：{{item.template_number}}</p>
|
||
<div class="choose_inner">
|
||
<input type="text" name="template_id" placeholder="输入模板id" v-model="item.template_id" autocomplete="off">
|
||
</div>
|
||
<div class="list">
|
||
<div class="status isOpen" v-if="item.is_use==1" @click="close_template(index)"></div>
|
||
<div class="status isClose" v-else @click="open_template(index)"></div>
|
||
<button class="chooseBtn" @click="edit_templatecolor(index)">颜色</button>
|
||
<button class="chooseBtn" @click="edit_template(index)">保存</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style="display: none;" id="setcolor">
|
||
<ul class="list-ul">
|
||
<form class="layui-form" action="">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">标题区</label>
|
||
<div class="layui-input-inline" style="width: 120px;">
|
||
<input type="text" value="" placeholder="请选择标题颜色" disabled class="layui-input" id="titlecolor-form-input">
|
||
</div>
|
||
<div class="layui-inline">
|
||
<div id="titlecolor-form"></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">内容区</label>
|
||
<div class="layui-input-inline" style="width: 120px;">
|
||
<input type="text" value="" placeholder="请选择内容颜色" disabled class="layui-input" id="bodycolor-form-input">
|
||
</div>
|
||
<div class="layui-inline">
|
||
<div id="bodycolor-form"></div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">备注区</label>
|
||
<div class="layui-input-inline" style="width: 120px;">
|
||
<input type="text" value="" placeholder="请选择备注颜色" disabled class="layui-input" id="remarkcolor-form-input">
|
||
</div>
|
||
<div class="layui-inline">
|
||
<div id="remarkcolor-form"></div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</ul>
|
||
</div>
|
||
</body>
|
||
<script src="__PUBLIC__/vue/js/vue2.5.16.js"></script>
|
||
<script src="__PUBLIC__/jquery/js/jquery-3.2.1.min.js"></script>
|
||
<script type="text/javascript" src="__PUBLIC__/layui-v2.4.3/layui/layui.js"></script>
|
||
<script>
|
||
layui.use(['layer','colorpicker'], function(){
|
||
var layer = layui.layer;
|
||
var colorpicker = layui.colorpicker;
|
||
|
||
var model = {:I('get.model')};
|
||
var app = new Vue({
|
||
el: "#app",
|
||
data: {
|
||
template_list: [],
|
||
keyword: '',
|
||
model:model,
|
||
editindex:-1,
|
||
titlecolor:"#000000",
|
||
bodycolor:'#000000',
|
||
remarkcolor:'#000000',
|
||
click_one:true,
|
||
},
|
||
methods: { // 调用方法
|
||
get_template:function(){ // 获取模板列表
|
||
var that = this;
|
||
switch (this.model) {
|
||
case 1:that.keyword = '激活';break;
|
||
case 2:that.keyword = '充值';break;
|
||
case 3:that.keyword = '消费';break;
|
||
case 4:that.keyword = '业务生效通知';break;
|
||
case 5:that.keyword = '退款';break;
|
||
default:that.keyword = '激活';
|
||
}
|
||
$.post("{:U('get_template')}", {model: model}, function (res) {
|
||
that.template_list = res.template_list;
|
||
});
|
||
},
|
||
|
||
edit_template:function(index){ // 编辑保存
|
||
var that = this;
|
||
var template_data = this.template_list[index];
|
||
var dispose = that.dispose(template_data);
|
||
if(dispose == true){
|
||
$.ajax({
|
||
url: "{:U('edit_template')}",
|
||
type: "post",
|
||
data: {
|
||
model:this.model,
|
||
id:template_data.id,
|
||
template_title:template_data.template_title,
|
||
template_remark:template_data.template_remark,
|
||
template_id:template_data.template_id,
|
||
titlecolor:template_data.titlecolor,
|
||
bodycolor:template_data.bodycolor,
|
||
remarkcolor:template_data.remarkcolor,
|
||
},
|
||
success:function (res) {
|
||
if(res.status == 1){
|
||
layer.msg(res.msg,{icon:1,time:1200},function () {
|
||
that.get_template();
|
||
});
|
||
}else{
|
||
layer.msg(res.msg,{icon:7,time:1200});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
open_template:function (index) { // 启用模板
|
||
var that = this;
|
||
if(that.click_one == true){
|
||
var template_data = this.template_list[index];
|
||
var dispose = that.dispose(template_data);
|
||
if(dispose == true) {
|
||
that.click_one = false;
|
||
$.ajax({
|
||
url: "{:U('open_template')}",
|
||
type: "post",
|
||
data: {
|
||
model: this.model,
|
||
id: template_data.id,
|
||
template_title:template_data.template_title,
|
||
template_remark:template_data.template_remark,
|
||
template_id:template_data.template_id,
|
||
titlecolor:template_data.titlecolor,
|
||
bodycolor:template_data.bodycolor,
|
||
remarkcolor:template_data.remarkcolor,
|
||
},
|
||
success: function (res) {
|
||
if (res.status == 1) {
|
||
layer.msg(res.msg, {icon: 1, time: 1200}, function () {
|
||
that.click_one = true;
|
||
that.get_template();
|
||
});
|
||
} else {
|
||
layer.msg(res.msg, {icon: 2, time: 1200});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
},
|
||
|
||
close_template:function (index) { // 关闭
|
||
var that = this;
|
||
if(that.click_one == true){
|
||
var id = this.template_list[index].id;
|
||
that.click_one = false;
|
||
$.ajax({
|
||
url: "{:U('close_template')}",
|
||
type: "post",
|
||
data: {
|
||
model:this.model,
|
||
id:id,
|
||
},
|
||
success:function (res) {
|
||
if(res.status == 1){
|
||
layer.msg(res.msg,{icon:1,time:1200},function () {
|
||
that.click_one = true;
|
||
that.get_template();
|
||
});
|
||
}else{
|
||
layer.msg(res.msg,{icon:2,time:1200});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
},
|
||
|
||
dispose:function(template_data){
|
||
if(!template_data.template_title){
|
||
layer.msg('请输入模板标题',{icon:7,time:1200});
|
||
return false;
|
||
}
|
||
if(!template_data.template_remark){
|
||
layer.msg('请输入模板备注',{icon:7,time:1200});
|
||
return false;
|
||
}
|
||
if(!template_data.template_id) {
|
||
layer.msg('请输入模板ID',{icon:7,time:1200});
|
||
return false;
|
||
}
|
||
return true;
|
||
},
|
||
edit_templatecolor:function (index) {
|
||
this.editindex = index;
|
||
var template_data = this.template_list[index];
|
||
var titlecolor=template_data.titlecolor,
|
||
bodycolor=template_data.bodycolor,
|
||
remarkcolor=template_data.remarkcolor;
|
||
$('#titlecolor-form-input').val(titlecolor);
|
||
$('#bodycolor-form-input').val(bodycolor);
|
||
$('#remarkcolor-form-input').val(remarkcolor);
|
||
//表单赋值
|
||
colorpicker.render({
|
||
elem: '#titlecolor-form'
|
||
,predefine: true
|
||
,color:titlecolor
|
||
,colors: ['#000000','#009688','#22ab49','#1E9FFF','#fcbb09','#f80808'] //自定义预定义颜色项
|
||
,done: function(color){
|
||
$('#titlecolor-form-input').val(color);
|
||
app.titlecolor = color;
|
||
}
|
||
});
|
||
//表单赋值
|
||
colorpicker.render({
|
||
elem: '#bodycolor-form'
|
||
,predefine: true
|
||
,color:bodycolor
|
||
,colors: ['#000000','#009688','#22ab49','#1E9FFF','#fcbb09','#f80808'] //自定义预定义颜色项
|
||
,done: function(color){
|
||
$('#bodycolor-form-input').val(color);
|
||
app.bodycolor = color;
|
||
}
|
||
});
|
||
//表单赋值
|
||
colorpicker.render({
|
||
elem: '#remarkcolor-form'
|
||
,predefine: true
|
||
,color:remarkcolor
|
||
,colors: ['#000000','#009688','#22ab49','#1E9FFF','#fcbb09','#f80808'] //自定义预定义颜色项
|
||
,done: function(color){
|
||
$('#remarkcolor-form-input').val(color);
|
||
app.remarkcolor = color;
|
||
}
|
||
});
|
||
layer.open({
|
||
type: 1,
|
||
content: $('#setcolor'),
|
||
btn:['确定'],
|
||
btnAlign:'center'
|
||
});
|
||
}
|
||
},
|
||
created: function () { // 加载数据
|
||
this.get_template();
|
||
},
|
||
watch:{
|
||
titlecolor:function (n,o) {
|
||
if(n){
|
||
this.template_list[this.editindex]['titlecolor'] = n;
|
||
}
|
||
},
|
||
bodycolor:function (n,o) {
|
||
if(n){
|
||
this.template_list[this.editindex]['bodycolor'] = n;
|
||
}
|
||
},
|
||
remarkcolor:function (n,o) {
|
||
if(n){
|
||
this.template_list[this.editindex]['remarkcolor'] = n;
|
||
}
|
||
}
|
||
}
|
||
})
|
||
});
|
||
</script>
|
||
</html> |