880 lines
43 KiB
Vue
880 lines
43 KiB
Vue
<template>
|
||
<section class="content">
|
||
<div class="box box-primary">
|
||
<div class="box-body">
|
||
<section class="content-header">
|
||
<h1 id="itemTitle"></h1>
|
||
</section>
|
||
<!-- .content -->
|
||
<div id="table"></div>
|
||
<div id="toolbar">
|
||
配置类型:
|
||
<select name="configType" id="configType" class="input-sm">
|
||
<option value="2">表情图片</option>
|
||
<option value="1">表情Json</option>
|
||
</select>
|
||
表情名称:<input type="text" class="input-sm" name="faceName" id="faceName">
|
||
表情ID:<input type="text" class="input-sm" name="faceId" id="faceId">
|
||
状态:
|
||
<select name="faceStatus" id="faceStatus" class="input-sm">
|
||
<option value="2">--全部--</option>
|
||
<option value="1">显示</option>
|
||
<option value="0">隐藏</option>
|
||
</select>
|
||
类型:
|
||
<select name="selectFaceType" id="selectFaceType" class="input-sm">
|
||
<option value="">--全部--</option>
|
||
<option value="1">普通表情</option>
|
||
<option value="2">贵族表情</option>
|
||
</select>
|
||
<button id="btnSearch" class="btn btn-sm btn-primary">查询</button>
|
||
<button id="btnAddFaceJson" class="btn btn-sm btn-primary">新增FaceJson</button>
|
||
<button id="deletePatch" class="btn btn-sm btn-primary">批量删除</button>
|
||
<button id="updateImgs" class="btn btn-sm btn-primary">批量上传图片</button>
|
||
<button id="updateFaceInfo" class="btn btn-sm btn-primary">保存更新</button>
|
||
<button id="restoreFaceInfo" class="btn btn-sm btn-primary">一键还原</button>
|
||
<br />
|
||
<!--<div class="form-group" id="versionInfo" hidden="true">-->
|
||
<h4 id="version"></h4>
|
||
<!--</div>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<div class=" modal fade" id="faceJsonImgsUpload" tabindex="-1" role="dialog" aria-labelledby="modalLabel1">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabel1">新增表情图片</h4>
|
||
</div>
|
||
<div class="modal-body" style="overflow-y:auto;width: 100%;height: 500px">
|
||
<ul id="bigImg"></ul>
|
||
</div>
|
||
<div class="modal-footer" style="height: 20%">
|
||
<span>上传图片</span>
|
||
<input type="file" name="logoFile1" id="logoFile1" onchange="setImg(this);" style="display:inline;"
|
||
accept="image/*" multiple>
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
<button type="button" class="btn btn-primary" id="addImg">提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="modal fade" id="renameImg" tabindex="-1" role="dialog" aria-labelledby="modalLabel2">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-body">
|
||
<form class="form-horizontal">
|
||
<div class="form-group">
|
||
<label for="img" class="col-sm-3 control-label">图片:</label>
|
||
<div class="col-sm-9">
|
||
<img src="" id="img" style="width:90px;height:60px;" alt="">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="beforeImgName" class="col-sm-3 control-label">原图片名:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control validate[required]" name="beforeImgName"
|
||
id="beforeImgName">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="afterImgName" class="col-sm-3 control-label">重命名:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="afterImgName" id="afterImgName">
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
<div class="modal-footer">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
<button type="button" class="btn btn-primary" id="btnRenameImg">提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="modal fade" id="faceJsonModal" tabindex="-1" role="dialog" aria-labelledby="modalLabe3">
|
||
<div class="modal-dialog" role="document">
|
||
<div class="modal-content">
|
||
<div class="modal-header">
|
||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
|
||
aria-hidden="true">×</span>
|
||
</button>
|
||
<h4 class="modal-title" id="modalLabel3">新增表情配置Item</h4>
|
||
</div>
|
||
<div class="modal-body" style="overflow:auto;width: 100%;max-height: 80%">
|
||
<form class="form-horizontal" id="addForm">
|
||
<input type="hidden" class="form-control" name="jsonConfigType" id="jsonConfigType">
|
||
<div class="form-group">
|
||
<label for="addFaceId" class="col-sm-3 control-label">表情名ID:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control validate[required]" name="addFaceId"
|
||
id="addFaceId">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="addFaceName" class="col-sm-3 control-label">表情名称:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control validate[required]" name="addFaceName"
|
||
id="addFaceName">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pinyin" class="col-sm-3 control-label">表情拼音:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control validate[required]" name="pinyin" id="pinyin">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">表情类型</label>
|
||
<div class="col-sm-9">
|
||
<label class="radio-inline">
|
||
<input name="faceKind" type="radio" id="normalFace" value="1"
|
||
checked="checked">普通</label>
|
||
<label class="radio-inline">
|
||
<input name="faceKind" type="radio" id="vipFace" value="2">贵族</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">审核中表情状态</label>
|
||
<div class="col-sm-9">
|
||
<label class="radio-inline"><input name="luckFace" type="radio" id="isLuckFace"
|
||
value="0" checked>显示</label>
|
||
<label class="radio-inline"><input name="luckFace" type="radio" id="isLuckFaceNo"
|
||
value="1">隐藏</label>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="imageCount" class="col-sm-3 control-label">表情图片总数:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control validate[required]" name="imageCount"
|
||
id="imageCount">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="iconPos" class="col-sm-3 control-label">表情封面图片的index:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="iconPos" id="iconPos">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="animStartPos" class="col-sm-3 control-label">表情开始的index:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="animStartPos" id="animStartPos">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="animEndPos" class="col-sm-3 control-label">表情结束的index:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="animEndPos" id="animEndPos">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="animDuration" class="col-sm-3 control-label">表情的展示的总的时间(毫秒):</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="animDuration" id="animDuration">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="resultCount" class="col-sm-3 control-label">表情结束时候公屏展示结束图片的个数:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="resultCount" id="resultCount">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">表情帧动画结束时候结果图片是否互斥:</label>
|
||
<div class="col-sm-9">
|
||
<label class="radio-inline"><input name="canResultRepeat" type="radio"
|
||
id="canResultRepeat" value="1" checked>不互斥</label>
|
||
<label class="radio-inline"><input name="canResultRepeat" type="radio"
|
||
id="canResultRepeatNo" value="0">互斥</label>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
<div class="form-group">
|
||
<label for="animRepeatCount" class="col-sm-3 control-label">表情帧动画展示的次数:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="canResultRepeatanimRepeatCount"
|
||
id="animRepeatCount">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="resultStartPos" class="col-sm-3 control-label">表情帧动画展示结束，结果图片的开始index:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="resultStartPos" id="resultStartPos">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="resultEndPos" class="col-sm-3 control-label">表情帧动画展示结束，结果图片的结束index:</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="resultEndPos" id="resultEndPos">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form-group">
|
||
<label for="resultDuration" class="col-sm-3 control-label">表情帧动画展示结束，结果图片展示的时间(毫秒):</label>
|
||
<div class="col-sm-9">
|
||
<input type="text" class="form-control" name="resultDuration" id="resultDuration">
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">表情显示类型:</label>
|
||
<div class="col-sm-9">
|
||
<select name="faceType" id="faceType" class="input-sm">
|
||
<option value="1" selected="selected">正常表情，需要在表情面板显示</option>
|
||
<option value="2">功能表情不需要在表情面板显示</option>
|
||
<option value="3">类似一起玩的表情使用</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label class="col-sm-3 control-label">结果图片排列的类型:</label>
|
||
<div class="col-sm-9">
|
||
<select name="displayType" id="displayType" class="input-sm">
|
||
<option value="0" selected="selected">只有一张图片</option>
|
||
<option value="1">紧凑排列</option>
|
||
<option value="2">重叠排列</option>
|
||
<option value="3">并排排列</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
<div class="modal-footer" style="height: 20%">
|
||
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
|
||
<button type="button" class="btn btn-primary" id="addFaceJson">提交</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import TableHelper from '@/utils/bootstrap-table-helper';
|
||
|
||
const NORMAL_FACE = 1; // 普通表情
|
||
const VIP_FACE = 2; // 贵族表情
|
||
|
||
export default {
|
||
name: "FaceJsonAdminView",
|
||
setup() {
|
||
function setImg(obj) {
|
||
var f = $(obj).val();
|
||
if (f == null || f == undefined || f == '') {
|
||
return false;
|
||
}
|
||
var filePaths = $(obj)[0].files;
|
||
var num = filePaths.length;
|
||
var data = new FormData();
|
||
for (var i = 0; i <= num - 1; i++) {
|
||
var file = $(obj)[0].files[i];
|
||
var fileName = file.name;
|
||
if (!/\.(?:png|jpg|bmp|gif|jpeg|PNG|JPG|BMP|GIF|JPEG)$/.test(fileName)) {
|
||
console.log(fileName + '不是图片');
|
||
$("#tipMsg").text(fileName + '不是图片');
|
||
$("#tipModal").modal('show');
|
||
continue;
|
||
}
|
||
var fileNameSplit = fileName.split('_');
|
||
if (fileNameSplit.length < 3) {
|
||
console.log(fileName + '不满足(表情名拼音_表情ID_INDEX.后缀名)的规范');
|
||
$("#tipMsg").text(fileName + '不满足(表情名拼音_表情ID_INDEX.后缀名)的规范');
|
||
$("#tipModal").modal('show');
|
||
continue;
|
||
}
|
||
data.append('file_' + i, file);
|
||
}
|
||
$.ajax({
|
||
type: "POST",
|
||
url: "/admin/faceJson/updateImg",
|
||
data: data,
|
||
cache: false,
|
||
contentType: false, //不可缺
|
||
processData: false, //不可缺
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'false') {
|
||
$("#tipMsg").text(json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
else {
|
||
for (var j = 0; j <= json.length - 1; j++) {
|
||
$("#tipMsg").text("上传成功");
|
||
$("#tipModal").modal('show');
|
||
var path = '/admin/faceJson/getPicInputStream?type=1&picName=' + json[j];
|
||
var info = json[j].split('.');
|
||
var name = info[0];
|
||
var nameSuffix = info[1];
|
||
var div = document.getElementById(json[j]);
|
||
var liId = 'l_' + name + '_' + nameSuffix;
|
||
if (div != null) {
|
||
div.attr("src", path);
|
||
return;
|
||
}
|
||
else {
|
||
var a_hidden = "<li id='" + liId + "'>";
|
||
var img_html = "<img src='" + path + "' width='60' height='60'>";
|
||
var a_html = "<a href='#' onclick='deleteImg(\"" + name + "\",\"" + nameSuffix + "\")'>删除</a>";
|
||
var li_html = "</li>";
|
||
$('#bigImg').append(a_hidden + img_html + ' ' + json[j] + ' ' + a_html + li_html);
|
||
}
|
||
}
|
||
}
|
||
// if (i >= filePaths.length - 1) {
|
||
// $("#logoFile1").val("");
|
||
// }
|
||
}
|
||
});
|
||
}
|
||
|
||
function deleteImg(val, valRes) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/deleteFile",
|
||
data: {
|
||
picName: val + '.' + valRes,
|
||
type: 1,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
var a = 'l_' + val + '_' + valRes;
|
||
$('#' + a).remove();
|
||
$("#logoFile1").val("");
|
||
$("#tipMsg").text("删除成功");
|
||
$("#tipModal").modal('show');
|
||
} else {
|
||
$("#tipMsg").text("删除失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
|
||
}
|
||
});
|
||
}
|
||
window.setImg = setImg;
|
||
window.deleteImg = deleteImg;
|
||
return {
|
||
setImg,
|
||
deleteImg
|
||
};
|
||
},
|
||
created() {
|
||
this.$nextTick(function () {
|
||
this.initData();
|
||
});
|
||
},
|
||
methods: {
|
||
initData() {
|
||
$(function () {
|
||
$('#table').bootstrapTable('destroy');
|
||
$('#table').bootstrapTable({
|
||
columns: [
|
||
{ field: 'tmp', title: 'ID', align: 'center', checkbox: true, width: '5%' },
|
||
{ field: 'id', title: '表情id', align: 'center', width: '5%' },
|
||
{ field: 'name', title: '表情名', align: 'center', width: '5%' },
|
||
{
|
||
field: 'pinyinName',
|
||
title: '表情图片',
|
||
align: 'center',
|
||
width: '10%',
|
||
formatter: function (val, row, index) {
|
||
var info = val.split('.');
|
||
if (info.length > 1) {
|
||
var a = '/admin/faceJson/getPicInputStream?picName=' + val;
|
||
return "<img src='" + a + "' width='40' height='40'>";
|
||
|
||
}
|
||
else {
|
||
return '';
|
||
}
|
||
}
|
||
},
|
||
{ field: 'pinyinName', title: '表情图片名', align: 'center', width: '8%' },
|
||
{
|
||
field: 'isLuckFace',
|
||
title: '表情状态',
|
||
align: 'center',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val) {
|
||
return '隐藏';
|
||
} else {
|
||
return '显示';
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'faceKind',
|
||
title: '表情类型',
|
||
align: 'center',
|
||
width: '5%',
|
||
formatter: function (val, row, index) {
|
||
if (val === VIP_FACE) {
|
||
return '贵族表情'
|
||
} else {
|
||
return '普通表情'
|
||
}
|
||
}
|
||
},
|
||
{
|
||
field: 'pinyinName',
|
||
title: '操作',
|
||
align: 'center',
|
||
width: '15%',
|
||
formatter: function (val, val1, row, index) {
|
||
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + val + '>' +
|
||
'<i class="glyphicon glyphicon-edit"></i>编辑</button>' +
|
||
' <button id="btnDelete" name="btnDelete" class="btn btn-sm btn-danger opt-remove" data-id=' + val +
|
||
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
|
||
}
|
||
}
|
||
],
|
||
cache: false,
|
||
striped: true,
|
||
showRefresh: false,
|
||
pageSize: 20,
|
||
pagination: true,
|
||
pageList: [20, 50, 100, 200, 300, 500],
|
||
search: false,
|
||
sidePagination: "server", //表示服务端请求
|
||
queryParamsType: "undefined",
|
||
queryParams: function queryParams(params) { //设置查询参数
|
||
var param = {
|
||
page: params.pageNumber,
|
||
pageSize: params.pageSize,
|
||
configType: $('#configType').val(),
|
||
faceId: $('#faceId').val(),
|
||
faceName: $('#faceName').val(),
|
||
faceStatus: $('#faceStatus').val(),
|
||
faceKind: $('#selectFaceType').val(),
|
||
};
|
||
return param;
|
||
},
|
||
toolbar: '#toolbar',
|
||
url: '/admin/faceJson/list',
|
||
onLoadSuccess: function (json) { //加载成功时执行
|
||
if (json.code != 200) {
|
||
console.log(json.msg);
|
||
}
|
||
else {
|
||
var version = json.version;
|
||
var fileName = json.fileName;
|
||
$("#version").html('当前版本号: ' + version +
|
||
' 当前文件: ' + fileName);
|
||
}
|
||
|
||
},
|
||
onLoadError: function () { //加载失败时执行
|
||
console.log('加载失败')
|
||
}
|
||
});
|
||
|
||
$("#updateImgs").click(function () {
|
||
var div = document.getElementById("bigImg");
|
||
while (div.hasChildNodes()) {
|
||
div.removeChild(div.firstChild);
|
||
}
|
||
$("#logoFile1").val("");
|
||
$("#faceJsonImgsUpload").modal('show');
|
||
});
|
||
$("#deletePatch").click(function () {
|
||
var rows = $("#table").bootstrapTable("getSelections");
|
||
if (rows.length == 0) {
|
||
alert("请先选择要删除的记录");
|
||
return;
|
||
}
|
||
var idArr = [];
|
||
for (var i = 0; i < rows.length; i++) {
|
||
console.log(rows[i]['pinyinName'])
|
||
idArr.push(rows[i]['pinyinName']);
|
||
}
|
||
if (confirm("你确认批量删除该记录吗?" +
|
||
"\r\n删除后再也不能找回，请谨慎操作！")) {
|
||
$.ajax({
|
||
type: 'post',
|
||
url: "/admin/faceJson/deletePatch",
|
||
data: {
|
||
ids: JSON.stringify(idArr),
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("删除成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("删除失败");
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
$("#updateFaceInfo").click(function () {
|
||
if (confirm("确认更新吗？")) {
|
||
$("#tipMsg").text("正在压缩上传");
|
||
$("#tipModal").modal('show');
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/updateFaceInfo",
|
||
data: {},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("一键更新成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh('#table');
|
||
} else {
|
||
$("#tipMsg").text("一键更新失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
$("#restoreFaceInfo").click(function () {
|
||
if (confirm("确认还原所有操作吗？")) {
|
||
$("#tipMsg").text("正在还原");
|
||
$("#tipModal").modal('show');
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/restoreFaceInfo",
|
||
data: {},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("一键还原成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh('#table');
|
||
} else {
|
||
$("#tipMsg").text("一键还原失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
$("#btnAddFaceJson").click(function () {
|
||
document.getElementById("addForm").reset();
|
||
$("#jsonConfigType").val("1");
|
||
$("#canResultRepeat").prop("checked", true);
|
||
$("#normalFace").prop("checked", true);
|
||
$("#isLuckFace").prop("checked", true);
|
||
$("#addFaceId").attr("disabled", false);
|
||
$("#addFaceName").attr("disabled", false);
|
||
$("#pinyin").attr("disabled", false);
|
||
$("#divNobleId").hide();
|
||
$("#faceJsonModal").modal('show');
|
||
});
|
||
// 查询刷新
|
||
$('#btnSearch').on('click', function () {
|
||
TableHelper.doRefresh('#table');
|
||
});
|
||
|
||
|
||
$("#table").on("click", '.opt-edit', function () {
|
||
var id = $(this).attr("data-id");
|
||
var info = id.split('.');
|
||
if (info.length > 1) {
|
||
var path = '/admin/faceJson/getPicInputStream?picName=' + id;
|
||
$("#img").attr("src", path);
|
||
$("#beforeImgName").val(id);
|
||
$("#afterImgName").val("");
|
||
$('#renameImg').modal('show');
|
||
}
|
||
else {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/getFaceJsonItem",
|
||
data: {
|
||
picName: id,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'false') {
|
||
$("#tipMsg").text(json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
else {
|
||
$("#addFaceId").attr("disabled", true);
|
||
$("#addFaceName").attr("disabled", true);
|
||
$("#pinyin").attr("disabled", true);
|
||
$("#jsonConfigType").val("2");
|
||
$("#addFaceId").val(json.id);
|
||
$("#addFaceName").val(json.name);
|
||
$("#pinyin").val(json.pinyin);
|
||
$("#imageCount").val(json.imageCount);
|
||
$("#iconPos").val(json.iconPos);
|
||
$("#animStartPos").val(json.animStartPos);
|
||
$("#animEndPos").val(json.animEndPos);
|
||
$("#animDuration").val(json.animDuration);
|
||
$("#resultCount").val(json.resultCount);
|
||
$("#animRepeatCount").val(json.animRepeatCount);
|
||
$("#resultStartPos").val(json.resultStartPos);
|
||
$("#resultEndPos").val(json.resultEndPos);
|
||
$("#resultDuration").val(json.resultDuration);
|
||
$("#displayType").val(json.displayType);
|
||
if (json.canResultRepeat == 1) {
|
||
$("#canResultRepeat").prop("checked", true);
|
||
}
|
||
else {
|
||
$("#canResultRepeatNo").prop("checked", true);
|
||
}
|
||
if (json.isLuckFace) {
|
||
$("#isLuckFaceNo").prop("checked", true);
|
||
}
|
||
else {
|
||
$("#isLuckFace").prop("checked", true);
|
||
}
|
||
if (json.faceKind === VIP_FACE) {
|
||
$("#vipFace").prop("checked", true);
|
||
} else {
|
||
$("#normalFace").prop("checked", true);
|
||
}
|
||
$("#faceType").val(json.faceType);
|
||
$("#faceJsonModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
|
||
$("#table").on("click", '.opt-remove', function () {
|
||
var id = $(this).attr("data-id");
|
||
var info = id.split('.');
|
||
if (info.length > 1) {
|
||
if (confirm("确认删除表情图片吗?")) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/deleteFile",
|
||
data: {
|
||
picName: id,
|
||
type: 2,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("删除成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("删除失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
else {
|
||
if (confirm("确认删除表情json吗(相应表情图片也将删除)?")) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/deleteFaceJsonItem",
|
||
data: {
|
||
picName: id,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("删除成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("删除失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
}
|
||
});
|
||
|
||
|
||
$("#addImg").click(function () {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/addImg",
|
||
data: {},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("上传成功");
|
||
$("#tipModal").modal('show');
|
||
$("#faceJsonImgsUpload").modal('hide');
|
||
} else {
|
||
$("#tipMsg").text("上传失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
$("#faceJsonImgsUpload").modal('hide');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
$("#btnRenameImg").click(function () {
|
||
var beforeImgName = $("#beforeImgName").val();
|
||
var afterImgName = $("#afterImgName").val();
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/renameImg",
|
||
data: {
|
||
beforeImgName: beforeImgName,
|
||
afterImgName: afterImgName,
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("重命名成功");
|
||
$("#tipModal").modal('show');
|
||
$("#renameImg").modal('hide');
|
||
TableHelper.doRefresh("#table");
|
||
} else {
|
||
$("#tipMsg").text("重命名失败." + json.msg);
|
||
$("#tipModal").modal('show');
|
||
$("#renameImg").modal('hide');
|
||
}
|
||
}
|
||
});
|
||
});
|
||
|
||
$("#addFaceJson").click(function () {
|
||
var jsonConfigType = $("#jsonConfigType").val();
|
||
var addFaceId = $("#addFaceId").val();
|
||
var addFaceName = $("#addFaceName").val();
|
||
var pinyin = $("#pinyin").val();
|
||
var nobleId = $("#nobleId").val();
|
||
var imageCount = $("#imageCount").val();
|
||
var iconPos = $("#iconPos").val();
|
||
var animStartPos = $("#animStartPos").val();
|
||
var animEndPos = $("#animEndPos").val();
|
||
var animDuration = $("#animDuration").val();
|
||
var resultCount = $("#resultCount").val();
|
||
var animRepeatCount = $("#animRepeatCount").val();
|
||
var resultStartPos = $("#resultStartPos").val();
|
||
var resultEndPos = $("#resultEndPos").val();
|
||
var resultDuration = $("#resultDuration").val();
|
||
var displayType = $("#displayType").val();
|
||
var faceType = $("#faceType").val();
|
||
var canResultRepeat = $('input[name="canResultRepeat"]:checked').val();
|
||
var isLuckFace = $('input[name="luckFace"]:checked').val();
|
||
var isNobleFace = $('input[name="noble"]:checked').val();
|
||
var faceKind = $('input[name="faceKind"]:checked').val();
|
||
console.log(canResultRepeat + '--' + isNobleFace);
|
||
if ($("#addForm").validationEngine('validate')) {
|
||
$.ajax({
|
||
type: "post",
|
||
url: "/admin/faceJson/configFaceJsonSingle?jsonConfigType=" + jsonConfigType,
|
||
data: {
|
||
id: addFaceId,
|
||
name: addFaceName,
|
||
pinyin: pinyin,
|
||
nobleId: nobleId,
|
||
imageCount: imageCount,
|
||
iconPos: iconPos,
|
||
animStartPos: animStartPos,
|
||
animEndPos: animEndPos,
|
||
animDuration: animDuration,
|
||
resultCount: resultCount,
|
||
canResultRepeat: canResultRepeat,
|
||
animRepeatCount: animRepeatCount,
|
||
resultStartPos: resultStartPos,
|
||
resultEndPos: resultEndPos,
|
||
resultDuration: resultDuration,
|
||
displayType: displayType,
|
||
faceType: faceType,
|
||
isLuckFace: isLuckFace,
|
||
isNobleFace: isNobleFace,
|
||
faceKind: faceKind
|
||
},
|
||
dataType: "json",
|
||
success: function (json) {
|
||
if (json.success == 'true') {
|
||
$("#tipMsg").text("保存成功");
|
||
$("#tipModal").modal('show');
|
||
TableHelper.doRefresh("#table");
|
||
$("#faceJsonModal").modal('hide');
|
||
} else {
|
||
$("#tipMsg").text("保存失败," + json.msg);
|
||
$("#tipModal").modal('show');
|
||
// $("#faceJsonModal").modal('hide');
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
})
|
||
}
|
||
},
|
||
|
||
};
|
||
</script>
|
||
|
||
<style scoped>
|
||
.bar1,
|
||
.bar2 {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
label.col-sm-1 {
|
||
padding: 0;
|
||
line-height: 30px;
|
||
text-align: right;
|
||
/*padding-right: 4px;*/
|
||
}
|
||
|
||
label.col-sm-1 {
|
||
padding: 0;
|
||
line-height: 30px;
|
||
text-align: right;
|
||
/*padding-right: 4px;*/
|
||
}
|
||
|
||
input,
|
||
select {
|
||
margin-left: 8px;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
.button-wrapper {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.record {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.record .title {
|
||
font-size: 16px;
|
||
}
|
||
|
||
.toggle-group {
|
||
display: none;
|
||
}
|
||
|
||
.tips {
|
||
font-size: 13px;
|
||
color: red;
|
||
}
|
||
|
||
.opt-group .col-sm-7 {
|
||
text-align: left;
|
||
}
|
||
|
||
/* .modal-body {
|
||
overflow-y: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
scrollbar-width: none;
|
||
height: 500px !important;
|
||
} */
|
||
</style> |