Files
peko-admin-web/src/views/charge/FirstChargeRewardConfigView.vue

489 lines
24 KiB
Vue
Raw Normal View History

2023-09-19 10:55:46 +08:00
<template>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<div id="toolbar">
<div class="col-sm-12">
<button class="active btn btn-default js-quick-search js-quick-search-1"
data-firstChargeLevelId="1">
第一档
</button>
<button class="btn btn-default js-quick-search js-quick-search-7" data-firstChargeLevelId="2">
第二档
</button>
<button class="btn btn-default js-quick-search js-quick-search-30" data-firstChargeLevelId="3">
第三档
</button>
<button class="btn btn-primary" id="updateLevelInfo">
编辑档位信息
</button>
</div>
<div class="summary col-sm-12">
<div class="col-sm-4">
充值数额<span class="chargeMoney"></span>
</div>
<div class="col-sm-4">
赠礼价格<span class="giveShowPrice"></span>
</div>
<div class="col-sm-4">
<span>当前档位开关</span>
<span class="firstChargeSwitchStatus"></span>
</div>
</div>
<div class="col-sm-12">
<!-- <button class="btn btn-default" id="search">-->
<!-- <i class="glyphicon glyphicon-wrench"></i>查询-->
<!-- </button>-->
<button class="btn btn-primary" id="add">
<i class="glyphicon glyphicon-plus"></i>新增礼包奖励
</button>
</div>
</div>
</div>
<!-- .content -->
<div id="table"></div>
</div>
</section>
<!-- 弹窗 -->
<div class="modal fade" id="worldTypeModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
<div class="modal-title" id="worldTypeModalLabel"></div>
</div>
<div class="modal-body">
<form action="" id="addForm" class="form-horizontal">
<div class="form-group">
<label for="modal_rewardType" class="col-sm-3 control-label">赠礼类型</label>
<div class="col-sm-8">
<select id="modal_rewardType" name="rewardType" class="form-control validate[required]">
<option value="">请选择...</option>
<option value="1">礼物</option>
<option value="2">铭牌</option>
<option value="3">座驾</option>
<option value="4">头饰</option>
2024-04-28 10:26:06 +08:00
<option value="5">额外金币</option>
2023-09-19 10:55:46 +08:00
</select>
</div>
</div>
<input type="hidden" id="modal_id" name="id" />
<div class="form-group">
<label for="modal_rewardId" class="col-sm-3 control-label">奖励id</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,maxSize[10]]" name="rewardId"
id="modal_rewardId" placeholder="请奖励对应id">
</div>
</div>
<div class="form-group">
<label for="modal_rewardDay" class="col-sm-3 control-label">奖励天数</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,custom[integer]]" name="rewardDay"
id="modal_rewardDay" placeholder="头饰、铭牌、座驾输入天数">
</div>
</div>
<div class="form-group">
<label for="modal_rewardNum" class="col-sm-3 control-label">奖励个数</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,custom[integer]]" name="rewardNum"
2024-04-28 10:26:06 +08:00
id="modal_rewardNum" placeholder="礼物、额外金币输入个数">
2023-09-19 10:55:46 +08:00
</div>
</div>
<div class="form-group">
<label for="modal_showText" class="col-sm-3 control-label">显示文本</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,maxSize[10]]" name="showText"
id="modal_showText" placeholder="请输入奖励客户端显示文本">
</div>
</div>
<div class="form-group">
<label for="modal_seqNo" class="col-sm-3 control-label">排序</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,custom[integer]]" name="seqNo"
id="modal_seqNo" placeholder="请输入排序编号,越小越排前">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">显示图片</label>
<div class="col-sm-8">
<img src="" alt="" id="modal_showPir" style="width: 50px; height: 50px;">
<input type="file" id="uploadTagPic" accept="image/*">
<button class="btn btn-success" type="button" id="uploadTagPicBtn">上传</button>
<div class="tips">
<i class="glyphicon glyphicon-info-sign"></i>
<font color="red">请上传图片文件</font>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-primary="addSave" id="save">保存</button>
</div>
</div>
</div>
</div>
<!-- 档位弹窗 -->
<div class="modal fade" id="firstChargeLevelModal" rabindex='-1' role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">x</span>
</button>
<div class="modal-title" id="firstChargeLevelModalLabel"></div>
</div>
<div class="modal-body">
<form action="" id="addLevelSave" class="form-horizontal">
<div class="form-group">
<label for="modal_infoId" class="col-sm-3 control-label">充值数额</label>
<div class="col-sm-8">
<select id="modal_infoId" name="infoId" class="form-control validate[required]">
<option value="">请选择...</option>
<option value="1">0.99美元</option>
<option value="2">4.99美元</option>
<option value="3">13.99美元</option>
</select>
</div>
</div>
<div class="form-group">
<label for="modal_showPrice" class="col-sm-3 control-label">赠礼展示价格</label>
<div class="col-sm-8">
<input type="text" class="form-control validate[required,custom[integer]]" name="showPrice"
id="modal_showPrice" placeholder="清输入赠礼展示价格">
</div>
</div>
<div class="form-group">
<label for="modal_switchStatus" class="col-sm-3 control-label">档位开关</label>
<div class="col-sm-8">
<select id="modal_switchStatus" name="switchStatus" class="form-control validate[required]">
<option value="0">关闭</option>
<option value="1">开启</option>
</select>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-primary="addSave" id="levelSave">保存</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
// 按钮参数
var activeButVal = 1;
export default {
name: "FirstChargeRewardConfigView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'id', title: 'ID', align: 'center', valign: 'middle', width: '10%' },
{ field: 'showText', title: '显示文本', align: 'left', valign: 'middle', width: '10%' },
{
field: 'showPir', title: '显示图片', align: 'left', valign: 'middle', width: '10%',
formatter: function (val, row, index) {
if (null != val && val != '') {
return '<img src="' + val + '" alt="" style="width: 30px; height: 30px;">';
}
return '-';
}
},
{ field: 'type', title: '类型', align: 'center', valign: 'middle', width: '10%' },
{ field: 'rewardId', title: '奖励ID', align: 'center', valign: 'middle', width: '10%' },
{ field: 'rewardName', title: '奖励名称', align: 'center', valign: 'middle', width: '10%' },
{ field: 'giftPrice', title: '礼物价格(钻)', align: 'center', valign: 'middle', width: '10%' },
{ field: 'rewardNum', title: '数量', align: 'center', valign: 'middle', width: '10%' },
{ field: 'rewardDay', title: '可用天数', align: 'center', valign: 'middle', width: '10%' },
{ field: 'seqNo', title: '排序', align: 'center', valign: 'middle', width: '10%' },
{
field: 'tmp', title: '操作', align: 'center', valign: 'middle', width: '10%', formatter: function (val, row, index) {
return '<button id="btnEdit" name="btnEdit" class="btn btn-sm btn-success opt-edit" data-id=' + row.id + '>' +
'<i class="glyphicon glyphicon-edit"></i> 编辑</button>' +
'&nbsp;&nbsp;<button class="btn btn-sm btn-danger opt-remove" data-id=' + row.id +
'><i class="glyphicon glyphicon-remove"></i>删除</button>';
}
}
],
cache: false,
striped: true,
showRefresh: false,
pageSize: 10,
pagination: true,
pageList: [10, 20, 30, 50],
sidePagination: 'server',
queryParamsType: 'undefined',
queryParams: function queryParams(params) {
console.log(params)
console.log(activeButVal)
var param = {
// firstChargeLevelId: $("button").data('firstChargeLevelId'),
firstChargeLevelId: activeButVal,
};
return param;
},
uniqueId: 'id',
toolbar: '#toolbar',
2024-04-22 10:44:52 +08:00
url: '/admin/first/charge/reward/list',
2023-09-19 10:55:46 +08:00
onLoadSuccess: function (res) {
console.log(res)
$('.giveShowPrice').text(res.giveShowPrice);
$('.chargeMoney').text(res.chargeMoney);
$('.firstChargeSwitchStatus').text(res.firstChargeSwitchStatus);
console.log(res.chargeMoney)
console.log('load success');
},
onLoadError: function () {
console.log('load fail');
}
});
//三个按钮时间
$('.js-quick-search').click(function () {
$(this).addClass("active").siblings().removeClass('active');
activeButVal = $(this).attr("data-firstChargeLevelId");
console.log(activeButVal);
TableHelper.doRefresh('#table');
})
$('#btnSearch').on('click', function () {
TableHelper.doRefresh('#table');
})
// 礼包奖励编辑按钮点击事件
$('#table').on('click', '.opt-edit', function () {
clearModal();
var id = $(this).data('id');
$.ajax({
type: "get",
2024-04-22 10:44:52 +08:00
url: "/admin/first/charge/reward/getId",
2023-09-19 10:55:46 +08:00
data: { id: id },
dataType: "json",
success: function (json) {
var data = json.rows[0];
console.log("编辑时候的++++++++++++" + activeButVal)
$('#modal_firstChargeLevelId').val(activeButVal);
$('#modal_id').val(data.id);
$('#modal_rewardId').val(data.rewardId);
$('#modal_rewardType').val(data.rewardType);
$('#modal_rewardDay').val(data.rewardDay);
$('#modal_rewardNum').val(data.rewardNum);
$('#modal_showText').val(data.showText);
$('#modal_seqNo').val(data.seqNo);
$('#modal_showPir').attr('src', data.showPir);
}
});
$('#worldTypeModalLabel').text('编辑分类');
$('#worldTypeModal').modal('show');
});
$("#table").on("click", '.opt-remove', function () {
var id = $(this).attr("data-id");
if (id == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
if (confirm("你确认删除该记录吗? \r\n 删除后再也不能找回,请谨慎操作!")) {
$.ajax({
type: 'post',
2024-04-22 10:44:52 +08:00
url: "/admin/first/charge/reward/delete",
2023-09-19 10:55:46 +08:00
data: { id: 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');
}
}
});
}
});
// 添加事件
$('#add').on('click', function () {
clearModal();
$('#worldTypeModalLabel').text('新增分类');
$('#worldTypeModal').modal('show');
});
// 编辑档位事件
$('#updateLevelInfo').on('click', function () {
$.ajax({
type: 'get',
url: '/admin/first/charge/reward/getLevelInfo',
data: { firstChargeLevelId: activeButVal },
dataType: 'json',
success: function (res) {
var data = res.rows[0];
$('#modal_firstChargeLevelId').val(activeButVal);
$('#modal_switchStatus').val(data.firstChargeStatus);
$('#modal_infoId').val(data.firstChargeInfoId);
$('#modal_showPrice').val(data.giveShowPrice);
}
})
$('#firstChargeLevelModalLabel').text('编辑档位');
$('#firstChargeLevelModal').modal('show');
});
// 保存编辑档位信息
$('#levelSave').on('click', function () {
if ($('#addLevelSave').validationEngine('validate')) {
var param = {};
param.infoId = $('#modal_infoId').val();
param.firstChargeLevelId = activeButVal;
param.showPrice = $('#modal_showPrice').val();
param.switchStatus = $('#modal_switchStatus').val();
$.ajax({
type: 'post',
url: '/admin/first/charge/reward/updateLevelInfo',
data: param,
dataType: 'json',
success: function (res) {
if (res.success == "true") {
$('#worldTypeModal').modal('hide');
$('#tipMsg').text('保存成功');
$('#tipModal').modal('show');
TableHelper.doRefresh('#table')
} else {
$('#tipMsg').text('保存失败,错误码:' + res.msg);
$('#tipModal').modal('show');
}
}
})
}
});
// 保存
$('#save').on('click', function () {
if ($('#addForm').validationEngine('validate')) {
var param = {};
param.id = $('#modal_id').val();
//客户端标签
var showPir = $('#modal_showPir').attr('src');
if (null == showPir || showPir.trim() == '') {
$('#tipMsg').text('失败,标签未上传,请上传标签!');
$('#tipModal').modal('show');
return;
}
param.firstChargeLevelId = activeButVal;
param.showPir = showPir;
param.rewardId = $('#modal_rewardId').val();
param.rewardDay = $('#modal_rewardDay').val();
param.rewardNum = $('#modal_rewardNum').val();
param.showText = $('#modal_showText').val();
param.seqNo = $('#modal_seqNo').val();
param.rewardType = $('#modal_rewardType').val();
$.ajax({
type: 'post',
url: '/admin/first/charge/reward/saveOrUpdate',
data: param,
dataType: 'json',
success: function (res) {
if (res.success == "true") {
$('#worldTypeModal').modal('hide');
$('#tipMsg').text('保存成功');
$('#tipModal').modal('show');
TableHelper.doRefresh('#table')
} else {
$('#tipMsg').text('保存失败,错误码:' + res.msg);
$('#tipModal').modal('show');
}
}
})
}
});
$("#search").on('click', function () {
TableHelper.doRefresh('#table');
});
var chargeStart = $('#createTimeStart').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
});
var chargeEnd = $('#createTimeEnd').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
});
function clearModal() {
$('#addForm')[0].reset();
$('#addForm').validationEngine('hideAll');
$('#modal_id').val('');
$('#modal_showPir').attr('src', '');
}
// 上传标签
$('#uploadTagPicBtn').on('click', function () {
if ($('#uploadTagPic').val() == '') {
$('#tipMsg').text('上传图片为空');
$('#tipModal').modal('show');
return;
}
var options = {
type: 'post',
url: '/admin/upload/img',
dataType: 'json',
success: function (res) {
if (res.path) {
$('#modal_showPir').attr('src', res.path);
} else {
$('#tipMsg').text(res.msg);
$('#tipModal').modal('show');
}
}
}
$('#uploadTagPic').attr('name', 'uploadFile');
$('#uploadPict').attr('name', '');
$('#addForm').ajaxSubmit(options);
});
});
}
},
2023-11-14 17:59:51 +08:00
2023-09-19 10:55:46 +08:00
};
</script>
<style scoped></style>