Files
peko-admin-web/src/views/gamemanage/GameManageChannelTicketView.vue
2024-04-22 10:45:13 +08:00

543 lines
27 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<section class="content">
<div class="box box-primary">
<div class="box-body">
<!-- Content Header (Page header) -->
<section class="content-header">
<h1 id="itemTitle"></h1>
</section>
<!-- .content -->
<section class="content">
<div id="table"></div>
<div id="toolbar">
<button id="ticket-add" class="btn btn-default">
<i class="glyphicon glyphicon-plus"></i>新增门票包
</button>
</div>
</section><!-- .content -->
</div>
</div>
</section>
<div class="modal fade" id="ticketModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<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">&times;</span>
</button>
<h4 class="modal-title" id="modalLabel">新增/编辑渠道门票包</h4>
</div>
<div class="modal-body">
<form class="form-horizontal" id="ticketForm">
<input type="hidden" name="id" id="id" />
<div class="form-group">
<label class="col-sm-3 control-label">门票id</label>
<div class="col-sm-4">
<input type="text" class="form-control validate[required]" name="ticketId" id="ticketId"
placeholder="门票id">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">总张数</label>
<div class="col-sm-4">
<input type="text" class="form-control validate[required]" name="stock" id="stock"
placeholder="总张数">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">每人可领取</label>
<div class="col-sm-4">
<input type="text" class="form-control validate[required]" name="limitNum" id="limitNum"
placeholder="每人可领取张数">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">截止领取时间</label>
<div class="col-sm-4">
<input type="text" class="input-sm form-control datetime validate[required]" name="endTime"
id="endTime" placeholder="选择时间">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">门票包文案</label>
<div class="col-sm-4">
<input type="text" class="form-control validate[required]" name="showText" id="showText"
placeholder="区分文案">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">渠道标</label>
<div class="col-sm-4">
<input type="text" class="form-control validate[required]" name="channel" id="channel"
placeholder="注意与渠道包保持一致">
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">安卓渠道包:</label>
<div class="col-sm-10">
<!-- <img src="" id="picImage" style="width:250px;height:90px;" alt="">-->
<input type="file" id="picUploadFile" name="file" style="margin: auto;">
<button class="btn btn-success" type="button" id="picUploadBtn"
style="margin-left: 117px">上传</button>
<input type="hidden" id="packageUrl" name="packageUrl"
class="form-control validate[required]" />
<span id="picImgInfo" style="color:red;"></span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">门票包链接</label>
<div class="col-sm-3">
<span id="shareUrl">暂未生成链接</span>
</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" id="save">保存</button>
</div>
</div>
</div>
</div>
<div class="modal first fade" id="tipModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">提示信息</h4>
</div>
<div class="modal-body" id="tipMsg"></div>
</div>
</div>
</div>
<!-- 领取用户列表弹窗 -->
<div class="modal fade" id="joinedUserListModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<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">&times;</span>
</button>
<h4 class="modal-title" id="joinedUserListModalTitle"></h4>
</div>
<div class="modal-body">
<div id="joinedUsersTable"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="exportJoinUserList">导出</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
<!-- 注册用户列表弹窗 -->
<div class="modal fade" id="registerUserListModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel">
<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">&times;</span>
</button>
<h4 class="modal-title" id="registerUserListModalTitle"></h4>
</div>
<div class="modal-body">
<div id="registerUsersTable"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="exportRegisterUserList">导出</button>
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
</div>
</div>
</div>
</div>
</template>
<script>
import TableHelper from '@/utils/bootstrap-table-helper';
import Clipboard from '@/assets/plugins/clipboard/js/clipboard.min.js';
export default {
name: "GameManageChannelTicketView",
setup() {
return {};
},
created() {
this.$nextTick(function () {
this.initData();
});
},
methods: {
initData() {
$(function () {
let currShowedReceiveListPackageId;
let currShowedReceiveListChannel;
let pageList = [];
$('#table').bootstrapTable('destroy');
$('#table').bootstrapTable({
columns: [
{ field: 'id', title: 'ID', align: 'center', width: '5%' },
{ field: 'showText', title: '门票包文案', align: 'center', width: '5%' },
{ field: 'endTime', title: '领取截止时间', align: 'center', width: '15%', formatter: formatTime },
{
field: 'status', title: '链接状态', align: 'center', width: '5%', formatter: function (val, row, index) {
if (val == 1) {
return '领取中';
} else if (val == 2) {
return '截止领取';
} else if (val == 3) {
return '已关闭';
}
}
},
{
field: 'tmp', title: '领取情况', align: 'center', width: '15%',
formatter: function (val, row, index) {
var total = row.stock + row.consumeNum
return `${row.consumeNum}/${total}<br><a href="javascript:void()" class="opt-show-received-users" data-id="${row.id}">查看&gt;</a>`
}
},
{
field: 'registerNum', title: '渠道包注册情况', align: 'center', width: '5%',
formatter: function (val, row, index) {
return `${row.registerNum}<br><a href="javascript:void()" class="opt-show-register-users" data-id="${row.channel}">查看&gt;</a>`
}
},
{
field: 'shareUrl', title: '门票包链接', align: 'center', width: '5%', formatter: function (val, row, index) {
return `${row.shareUrl}<br><a class="opt-copy-shareUrl" href="javascript:void()" data-clipboard-text = ${row.shareUrl}>复制链接</a>`
}
},
{
field: '', title: '操作', align: 'center', width: '15%', formatter: function (val, row, index) {
let id = row.id;
const actions = [];
actions.push('<button class="btn btn-sm btn-success opt-edit" data-id=' + id + '>' +
'<i class="glyphicon glyphicon-edit"></i>编辑</button>');
if (row.status == 1) {
actions.push('<button class="btn btn-sm btn-danger opt-change-status" data-id=' + id + ' data-status="0">' +
'<i class="glyphicon glyphicon-edit"></i>关闭链接</button>')
} else if (row.status == 3) {
actions.push('<button class="btn btn-sm btn-warning opt-change-status" disabled="true" data-id=' + id + ' data-status="1">' +
'<i class="glyphicon glyphicon-edit"></i>关闭链接</button>')
}
return actions.join(" ");
}
}
],
cache: false,
striped: true,
showRefresh: true,
pageSize: 10,
pagination: true,
pageList: [1, 10, 20, 30, 50],
search: false,
sidePagination: "server", //表示服务端请求
//设置为undefined可以获取pageNumberpageSizesearchTextsortNamesortOrder
//设置为limit可以获取limit, offset, search, sort, order
queryParamsType: "undefined",
queryParams: function queryParams(params) { //设置查询参数
var param = {
page: params.pageNumber,
pageSize: params.pageSize,
};
return param;
},
toolbar: '#toolbar',
url: '/admin/gamemanage/channelticket/list',
onLoadSuccess: function (data) { //加载成功时执行
console.log("load success", data);
pageList = data;
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
// 关闭链接
$("#table").on("click", '.opt-change-status', function () {
var id = $(this).attr("data-id");
var status = $(this).attr("data-status");
if (id == 'undefined') {
$("#tipMsg").text("id参数有误");
$("#tipModal").modal('show');
return;
}
let tips = '';
if (confirm(`你确认关闭该门票包链接吗?`)) {
$.ajax({
type: 'get',
url: "/admin/gamemanage/channelticket/closeShare",
data: { 'id': id },
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#tipMsg").text(`关闭成功`);
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text(`关闭失败`);
$("#tipModal").modal('show');
}
}
});
}
});
$("#ticket-add").click(function () {
// 打开弹窗
$("#ticketModal").modal('show');
$("#ticketForm")[0].reset();
$('#packageUrl').val('');
$("#picImgInfo").html('');
$("#picUploadFile").val('');
$("#ticketId").val('');
$("#limitNum").val('');
$("#id").val('');
$("#shareUrl").html('暂未生成链接');
$("#ticketId").removeAttr("disabled");
$("#limitNum").removeAttr("disabled");
});
// 上传
$('#picUploadBtn').on('click', function () {
var files = document.getElementById('picUploadFile').files;
console.log("----------files", files)
var data = new FormData();
data.append('file_' + 0, files[0]);
$.ajax({
type: "POST",
url: "/admin/upload/patch",
data: data,
cache: false,
contentType: false, //不可缺
processData: false, //不可缺
dataType: "json",
success: function (json) {
if (json.data) {
console.log(json.data);
// $('#picImage').attr("src", json.path);
$('#packageUrl').val(json.data);
if (json.data != '') {
$("#picImgInfo").html('已上传成功');
} else {
$("#picImgInfo").html('未上传成功');
}
} else {
$("#tipMsg").text(json.message);
$("#tipModal").modal('show');
}
}
});
})
function parseNum(val) {
if (val == undefined || val == 'false' || val == 0) {
return 0;
}
else {
return 1;
}
}
// 编辑
$("#table").on("click", '.opt-edit', function () {
console.log("btnEdit");
var id = $(this).attr("data-id");
$.ajax({
type: "get",
url: "/admin/gamemanage/channelticket/getById",
data: { id: id },
dataType: "json",
success: function (json) {
if (json.code == 200 && json.data) {
$("#id").val(json.data.id);
$("#ticketId").attr("disabled", "disabled");
$("#ticketId").val(json.data.ticketId);
$("#stock").val(json.data.stock);
$("#limitNum").attr("disabled", "disabled");
$("#limitNum").val(json.data.limitNum);
$("#endTime").val(formatTime(json.data.endTime));
$("#showText").val(json.data.showText);
$("#channel").val(json.data.channel);
$("#shareUrl").html(json.data.shareUrl);
// 设置图片
$("#picUploadFile").val('');
$('#packageUrl').val(json.data.packageUrl);
// $('#picImage').attr("src", json.data.picUrl);
if (json.data.packageUrl != '') {
$("#picImgInfo").html('已上传');
} else {
$("#picImgInfo").html('未上传');
}
// 打开编辑弹窗
$("#ticketModal").modal('show');
} else {
$("#tipMsg").text("获取门票包信息出错");
$("#tipModal").modal('show');
}
}
});
});
// 领取详情
$("#table").on("click", '.opt-show-received-users', function () {
var id = $(this).attr("data-id");
console.log('-------------id', id)
currShowedReceiveListPackageId = id
$('#joinedUserListModal #joinedUserListModalTitle').text(`领取情况`)
$('#joinedUsersTable').bootstrapTable('destroy');
$('#joinedUsersTable').bootstrapTable({
columns: [
{ field: 'erbanNo', title: '66号', align: 'center', width: '5%' },
{ field: 'nick', title: '用户昵称', align: 'center', width: '15%' },
{ field: 'createTime', title: '领取时间', align: 'center', width: '15%', formatter: formatTime },
{ field: 'ticketName', title: '领取内容', align: 'center', width: '15%', },
{ field: 'ticketUid', title: '领取门票id', align: 'center', width: '15%', },
],
undefinedText: 0,
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,
packagaId: id,
};
return param;
},
url: '/admin/gamemanage/channelticket/listReceiveRecord',
onLoadSuccess: function () { //加载成功时执行
$("#joinedUserListModal").modal('show');
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
});
// 注册用户详情
$("#table").on("click", '.opt-show-register-users', function () {
var channel = $(this).attr("data-id");
console.log('---------------channel', channel)
currShowedReceiveListChannel = channel
$('#registerUserListModal #registerUserListModalTitle').text(`渠道包注册情况`)
$('#registerUsersTable').bootstrapTable('destroy');
$('#registerUsersTable').bootstrapTable({
columns: [
{ field: 'nick', title: '注册昵称', align: 'center', width: '5%' },
{ field: 'erbanNo', title: '注册ID', align: 'center', width: '15%' },
{ field: 'registerTime', title: '注册时间', align: 'center', width: '15%', formatter: formatTime },
{ field: 'inviteCode', title: '填写的邀请码', align: 'center', width: '15%', },
],
undefinedText: 0,
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,
channel: channel,
};
return param;
},
url: '/admin/gamemanage/channelticket/listRegisterUserByChannel',
onLoadSuccess: function () { //加载成功时执行
$("#registerUserListModal").modal('show');
},
onLoadError: function () { //加载失败时执行
console.log("load fail");
}
});
});
$('.datetime').datetimepicker({
format: 'yyyy-mm-dd hh:ii:00',
autoclose: true
});
// 新增门票包
$("#save").click(function () {
if ($("#ticketForm").validationEngine('validate')) {
$.ajax({
type: "post",
url: "/admin/gamemanage/channelticket/saveOrUpdate",
data: $('#ticketForm').serialize(),
dataType: "json",
success: function (json) {
if (json.code == 200) {
$("#ticketModal").modal('hide');
$("#tipMsg").text("保存成功");
$("#tipModal").modal('show');
TableHelper.doRefresh("#table");
} else {
$("#tipMsg").text("保存失败." + json.msg);
$("#tipModal").modal('show');
}
}
});
}
});
// 复制分享链接
$("#table").on("click", '.opt-copy-shareUrl', function () {
console.log("--------开始复制")
let clipboard = new Clipboard('.opt-copy-shareUrl')
clipboard.on('success', function (e) {
console.log(e);
$("#tipMsg").text("已复制");
$("#tipModal").modal('show');
e.clearSelection();
});
});
function formatTime(val) {
if (val) {
var date = new Date(val);
return date.format('yyyy-MM-dd hh:mm:ss');
} else {
return '';
}
}
// 导出领取用户
$("#exportJoinUserList").on("click", function () {
window.location.href = `/admin/gamemanage/channelticket/exportReceiveRecord?packageId=${currShowedReceiveListPackageId}`
});
// 导出注册用户
$("#exportRegisterUserList").on("click", function () {
window.location.href = `/admin/gamemanage/channelticket/exportRegisterUserByChannel?channel=${currShowedReceiveListChannel}`
});
});
}
},
};
</script>
<style scoped></style>