let table = null;
|
let util = null;
|
let d = null;
|
let imgType = null;
|
let editor = null;
|
let editorhtml = null;
|
$(function () {
|
layui.use(['table', 'util'], function(){
|
table = layui.table
|
,util = layui.util;
|
|
//第一个实例
|
table.render({
|
elem: '#demo'
|
,url: Feng.ctxPath + "/vipLevel/queryVipLevelList" //数据接口
|
,method: 'post'
|
,page: false //开启分页
|
,cols: [[ //表头
|
{field: 'code', title: 'ID', width: 100}
|
,{field: 'name', title: '等级名称', edit: 'text', width: 100}
|
,{field: 'startValue', title: '成长值最小值', width: 120}
|
,{field: 'endValue', title: '成长值最大值', edit: 'number', width: 120}
|
,{field: 'icon', title: 'icon(28px * 32px)', width: 200, templet: function(d){
|
if(d.icon == ''){
|
return '<button style="height: 25px; width: 60px;line-height: 20px;" onclick="changeImg(\'icon\')">上传</button>'
|
}else{
|
return '<img src="' + d.icon + '" style="width: 100%;" onclick="changeImg(\'icon\')"/>';
|
}
|
}}
|
,{field: 'backgroundImg', title: '卡片底图(672px * 322px)', width: 200, templet: function(d){
|
if(d.backgroundImg == ''){
|
return '<button style="height: 25px; width: 60px;line-height: 20px;" onclick="changeImg(\'backgroundImg\')">上传</button>'
|
}else{
|
return '<img src="' + d.backgroundImg + '" style="width: 100%;" onclick="changeImg(\'backgroundImg\')"/>';
|
}
|
}}
|
,{field: 'fontColor', title: '卡片上字体颜色', event: 'color', width: 150, templet: function(d){
|
return '<input type="color" value="' + d.fontColor + '" onchange="changeColor(this, 1)">';
|
}
|
}
|
,{field: 'progressBarColor', title: '卡片进度条颜色', event: 'color', width: 150, templet: function(d){
|
return '<input type="color" value="' + d.progressBarColor + '" onchange="changeColor(this, 2)">';
|
}
|
},{field: 'firstBack', title: '首页卡片背景</br>(690px * 170px)', width: 200, templet: function(d){
|
if(d.firstBack == ''){
|
return '<button style="height: 25px; width: 60px;line-height: 20px;" onclick="changeImg(\'firstBack\')">上传</button>'
|
}else{
|
return '<img src="' + d.firstBack + '" style="width: 100%;" onclick="changeImg(\'firstBack\')"/>';
|
}
|
}}
|
,{field: 'firstColor', title: '首页卡片上字体颜色', event: 'color', width: 200
|
|
, templet: function(d){
|
return '<input type="color" value="' + d.firstColor + '" onchange="changeColor(this, 3)">';
|
}
|
},{field: 'firstIcon', title: '首页卡片icon</br>(44px * 34px)', width: 200, templet: function(d){
|
if(d.firstIcon == ''){
|
return '<button style="height: 25px; width: 60px;line-height: 20px;" onclick="changeImg(\'firstIcon\')">上传</button>'
|
}else{
|
return '<img src="' + d.firstIcon + '" style="width: 100%;" onclick="changeImg(\'firstIcon\')"/>';
|
}
|
}},{field: 'personBack', title: '个人中心卡片背景</br>(704px * 148px)', width: 200, templet: function(d){
|
if(d.personBack == ''){
|
return '<button style="height: 25px; width: 60px;line-height: 20px;" onclick="changeImg(\'personBack\')">上传</button>'
|
}else{
|
return '<img src="' + d.personBack + '" style="width: 100%;" onclick="changeImg(\'personBack\')"/>';
|
}
|
}}
|
,{field: 'personColor', title: '个人中心卡片上字体颜色', event: 'color', width: 200, templet: function(d){
|
return '<input type="color" value="' + d.personColor + '" onchange="changeColor(this, 4)">';
|
}
|
},{field: 'personIcon', title: '个人中心卡片icon</br>(54px * 48px)', width: 200, templet: function(d){
|
if(d.personIcon == ''){
|
return '<button style="height: 25px; width: 60px;line-height: 20px;" onclick="changeImg(\'personIcon\')">上传</button>'
|
}else{
|
return '<img src="' + d.personIcon + '" style="width: 100%;" onclick="changeImg(\'personIcon\')"/>';
|
}
|
}}
|
,{field: 'updateUser', title: '配置人', width: 100}
|
,{field: 'updateTime', title: '配置时间', width: 190}
|
,{field: '', title: '等级规则和权益页面说明', width: 200, templet: function(d){
|
return '<a href="#" style="color: #0d8ddb;" onclick="showHtml()">去配置</a>';
|
}}
|
,{field: '', title: '操作', width: 100, templet: function(d){
|
return '<a href="#" style="color: red;" onclick="delVipLevel()">删除</a>';
|
}}
|
]]
|
});
|
//监听单元格编辑
|
table.on('edit(test)', function(obj){
|
var value = obj.value //得到修改后的值
|
,data = obj.data //得到所在行所有键值
|
,field = obj.field; //得到字段
|
d = obj.data;
|
if(field == 'name'){
|
d.name = obj.value;
|
changeNmae()
|
}
|
if(field == 'endValue'){
|
d.endValue = obj.value;
|
changeValue()
|
}
|
});
|
//触发行单击事件
|
table.on('row(test)', function(obj){
|
d = obj.data;
|
console.log(obj.tr) //得到当前行元素对象
|
console.log(obj.data) //得到当前行数据
|
});
|
//监听单元格事件
|
table.on('tool(test)', function(obj){
|
var data = obj.data;
|
if(obj.event === 'color'){
|
d = data;
|
}
|
});
|
});
|
|
|
$('#file').on('change', function () {
|
var formData = new FormData() //创建一个forData
|
formData.append('file', $('#file')[0].files[0]) //把file添加进去 name命名为img
|
layer.load(); //上传loading
|
$.ajax({
|
url: Feng.ctxPath + '/uploadUtil/uploadImg',
|
data: formData,
|
type: "POST",
|
async: true,
|
cache: false,
|
contentType: false,
|
processData: false,
|
success: function(res) {
|
layer.closeAll('loading'); //关闭loading
|
$('#file').val('');
|
var data = {id: d.id};
|
if(imgType == 'icon'){
|
data.icon = res
|
}
|
if(imgType == 'backgroundImg'){
|
data.backgroundImg = res
|
}
|
if(imgType == 'firstBack'){
|
data.firstBack = res
|
}
|
if(imgType == 'firstIcon'){
|
data.firstIcon = res
|
}
|
if(imgType == 'personBack'){
|
data.personBack = res
|
}
|
if(imgType == 'personIcon'){
|
data.personIcon = res
|
}
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/editVipLevel", function (data) {
|
if(data.code == 200){
|
Feng.success("编辑成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("编辑失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set(data);
|
ajax.start();
|
}
|
})
|
})
|
|
|
$('#file1').on('change', function () {
|
let file1 = $('#file1')[0].files[0];
|
$('#fileName').text(file1.name);
|
})
|
});
|
|
function changeTime(time){
|
var data = {time: time}
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/editVipLevelTime", function (data) {
|
}, function (data) {
|
Feng.error("编辑失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set("times",time);
|
ajax.start();
|
}
|
function changeColor(e, type) {
|
var c = $(e).val();
|
var data = {id: d.id}
|
if(type == 1){
|
data.fontColor = c;
|
}
|
if(type == 2){
|
data.progressBarColor = c;
|
}
|
if(type == 3){
|
data.firstColor = c;
|
}
|
if(type == 4){
|
data.personColor = c;
|
}
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/editVipLevel", function (data) {
|
if(data.code == 200){
|
Feng.success("编辑成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("编辑失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set(data);
|
ajax.start();
|
}
|
|
function changeNmae() {
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/editVipLevel", function (data) {
|
if(data.code == 200){
|
Feng.success("编辑成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("编辑失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set({
|
id: d.id,
|
name: d.name
|
});
|
ajax.start();
|
}
|
|
|
function changeValue() {
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/editVipLevel", function (data) {
|
if(data.code == 200){
|
Feng.success("编辑成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("编辑失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set({
|
id: d.id,
|
startValue: d.startValue,
|
endValue: d.endValue
|
});
|
ajax.start();
|
}
|
|
|
function changeImg(type) {
|
$('#file').click();
|
imgType = type;
|
}
|
|
|
function delVipLevel() {
|
var operation = function () {
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/delVipLevel", function (data) {
|
if(data.code == 200 ){
|
Feng.success("删除成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("删除失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set("id", d.id);
|
ajax.start();
|
};
|
|
Feng.confirm("是否刪除该等级?", operation);
|
}
|
|
|
/**
|
* 添加数据
|
*/
|
function addVipLevel() {
|
//提交信息
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/addVipLevel", function (data) {
|
if(data.code == 200){
|
Feng.success("添加成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("添加失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set({});
|
ajax.start();
|
}
|
|
|
function showHtml() {
|
const str = '<div class="row" id="editorhtml">\n' +
|
' <div id="editor" type="text/plain" style="min-height:400px;width: 100%;"></div>\n' +
|
' </div>'
|
layer.open({
|
type: 1
|
, title: '等级规则和权益页面说明'
|
, area: ['80%', '90%']
|
, offset: 'auto' //具体配置参考：http://www.layui.com/doc/modules/layer.html#offset
|
, id: 'layerDemo' //防止重复弹出
|
, content: '<div style="padding: 20px">' + str + '</div>'
|
, btn: ['保存', '取消']
|
, btnAlign: 'c' //按钮居中
|
, shade: 0.5 //不显示遮罩
|
, zIndex: -99100
|
, yes: function () {
|
var ajax = new $ax(Feng.ctxPath + "/vipLevel/editVipLevel", function (data) {
|
if(data.code == 200){
|
Feng.success("编辑成功!");
|
table.reload('demo', {});
|
}else{
|
Feng.error(data.msg);
|
}
|
}, function (data) {
|
Feng.error("编辑失败!" + data.responseJSON.message + "!");
|
});
|
ajax.set({
|
id: d.id,
|
hierarchyRule: editor.getContent()
|
});
|
ajax.start();
|
layer.closeAll();
|
},
|
});
|
// UE.delEditor('editor'); //先删除之前实例的对象
|
if(null == editor){
|
editor = UE.getEditor('editor');
|
editor.ready(function() {
|
editor.setContent(d.hierarchyRule)
|
});
|
// 手动指定上传文件调用的接口（不同文件类型不同接口）
|
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
|
UE.Editor.prototype.getActionUrl = function(action) {
|
// 这里很重要，很重要，很重要，要和配置中的imageActionName值一样
|
if(action == 'uploadimage'){
|
// 这里调用后端我们写的图片上传接口
|
return '/ueditor/uploadImageData';
|
}else if(action == 'uploadfile'){
|
return '/ueditor/uploadFileData';
|
}else{
|
return this._bkGetActionUrl.call(this, action);
|
}
|
}
|
editorhtml = $('#editorhtml').html();
|
}else{
|
$('#editorhtml').html(editorhtml);
|
}
|
}
|
|
|
function choiceType(e) {
|
let val = $(e).val();
|
if(val == 'part'){
|
$('#exposureBut').show();
|
}else{
|
$('#exposureBut').hide();
|
}
|
}
|
|
function clickExposure() {
|
$('#file1').click();
|
}
|
|
function saveExposure() {
|
var formData = new FormData() //创建一个forData
|
let f = $('#file1')[0].files;
|
let e = $('#exposure').val();
|
if(e == 'part' && f.length == 0){
|
Feng.error("请先选择上传内容");
|
return
|
}
|
formData.append('file', f[0]) //把file添加进去 name命名为img
|
formData.append('exposure', e) //把file添加进去 name命名为img
|
layer.load(); //上传loading
|
$.ajax({
|
url: Feng.ctxPath + '/vipLevel/saveExposure',
|
data: formData,
|
type: "POST",
|
async: true,
|
cache: false,
|
contentType: false,
|
processData: false,
|
success: function (res) {
|
layer.closeAll('loading'); //关闭loading
|
$('#file1').val('');
|
$('#fileName').text('');
|
if (res.code == 200) {
|
Feng.success("保存成功");
|
} else {
|
Feng.error(res.msg);
|
}
|
}
|
});
|
}
|
