@layout("/common/_container.html"){
|
<style>
|
div#basicInfoContent input {
|
pointer-events: none;
|
}
|
select {
|
pointer-events: none;
|
}
|
textarea {
|
pointer-events: none;
|
}
|
</style>
|
<div class="ibox float-e-margins">
|
<div class="ibox-content">
|
<div class="form-horizontal">
|
<div class="row">
|
<div class="col-sm-12">
|
<input type="hidden" id="id" value="${item.id}"/>
|
|
<!-- 活动状态展示区域 -->
|
<div class="form-group">
|
<div class="col-sm-12">
|
@if(item.auditStatus == 0) {
|
<!-- 待审核状态 -->
|
<div class="alert alert-warning" style="margin-bottom: 20px;">
|
<h4><i class="fa fa-clock-o"></i> 等待平台审核</h4>
|
</div>
|
@} else if(item.auditStatus == 2) {
|
<!-- 审核驳回状态 -->
|
<div class="alert alert-danger" style="margin-bottom: 20px;">
|
<h4><i class="fa fa-times-circle"></i> 平台驳回</h4>
|
<p style="margin-top: 10px; font-weight: bold;">驳回原因：${item.rejectReason!'未填写'}</p>
|
@if(isNotEmpty(item.auditTime)) {
|
<p style="margin-top: 5px; color: #666;">审核时间：${item.auditTimeFormat}</p>
|
@}
|
</div>
|
@} else if(item.auditStatus == 1 && item.activityStatus == 0) {
|
<!-- 审核通过等待开始 -->
|
<div class="alert alert-success" style="margin-bottom: 20px;">
|
<h4><i class="fa fa-check-circle"></i> 已通过，等待活动开始</h4>
|
@if(isNotEmpty(item.auditTime)) {
|
<p style="margin-top: 5px; color: #666;">审核时间：${item.auditTimeFormat}</p>
|
@}
|
</div>
|
@} else if(item.auditStatus == 1 && (item.activityStatus == 1 || item.activityStatus == 2 || item.activityStatus == 3)) {
|
<!-- 活动进行中/已结束/已暂停状态，显示Switch -->
|
<div style="margin-bottom: 20px;">
|
<div class="btn-group" role="group" aria-label="活动信息切换">
|
<button type="button" class="btn btn-primary" id="basicInfoBtn" onclick="switchActivityInfo('basic')" style="background-color: #337ab7; color: white;">
|
活动基本信息
|
</button>
|
<button type="button" class="btn btn-default" id="dataInfoBtn" onclick="switchActivityInfo('data')" style="background-color: white; color: black;">
|
活动数据
|
</button>
|
</div>
|
</div>
|
@}
|
</div>
|
</div>
|
|
<!-- 活动基本信息内容区域 -->
|
<div id="basicInfoContent">
|
<div class="form-group">
|
<label class="control-label col-sm-1" for="name" style="text-align: left"><span style="color: red">*</span>活动名称：</label>
|
<div class="col-sm-4">
|
<input type="text" class="form-control" id="name" placeholder="请输入活动名称" maxlength="20" value="${item.name}" required>
|
</div>
|
@if(item.auditStatus == 1 && item.activityStatus == 1) {
|
<!-- 活动进行中时显示二维码 -->
|
<label class="control-label col-sm-1" style="text-align: left">活动二维码：</label>
|
<div class="col-sm-4">
|
<div style="display: flex; align-items: center;">
|
@if(isNotEmpty(item.qrCode)) {
|
<img src="${item.qrCode}" style="width: 60px; height: 60px; border: 1px solid #ddd; margin-right: 10px;" alt="活动二维码" />
|
<button type="button" class="btn btn-sm btn-info" onclick="TCheckCarActivityDetail.openQrPage('${item.qrCode}')">
|
查看活动二维码
|
</button>
|
@} else {
|
<span style="color: #999;">暂无二维码</span>
|
@}
|
</div>
|
</div>
|
@}
|
</div>
|
<div class="form-group">
|
<label class="control-label col-sm-1" for="startTime" style="text-align: left"><span style="color: red">*</span>活动时间范围：</label>
|
<div class="col-sm-4">
|
<input type="text" class="form-control" id="startTime" placeholder="请选择日期范围" value="${item.timeRange}" />
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="control-label col-sm-1" style="text-align: left"><span style="color: red">*</span>活动区域：</label>
|
<div class="col-sm-3">
|
<select class="form-control" id="province" onchange="TCheckCarActivityInfoDlg.provinceChange(this)">
|
<option value="">选择省</option>
|
@for(obj in provinceList){
|
<option value="${obj.provinceCode}" ${item.provinceCode == obj.provinceCode ?
|
'selected' : ''} >${obj.provinceName}</option>
|
@}
|
</select>
|
</div>
|
<div class="col-sm-3">
|
<select class="form-control" id="city" onchange="TCheckCarActivityInfoDlg.cityChange(this)">
|
<option value="">选择市</option>
|
@if(isNotEmpty(cityList)) {
|
@for(obj in cityList){
|
<option value="${obj.cityCode}" ${item.cityCode == obj.cityCode ?
|
'selected' : ''} >${obj.cityName}</option>
|
@}
|
@}
|
</select>
|
</div>
|
<div class="col-sm-3">
|
<select class="form-control" id="area">
|
<option value="">选择区</option>
|
@if(isNotEmpty(areaList)) {
|
@for(obj in areaList){
|
<option value="${obj.areaCode}" ${item.districtCode== obj.areaCode ?
|
'selected' : ''} >${obj.areaName}</option>
|
@}
|
@}
|
</select>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="control-label col-sm-1" for="couponName" style="text-align: left"><span style="color: red">*</span>优惠券名称：</label>
|
<div class="col-sm-4">
|
<input type="text" class="form-control" id="couponName" placeholder="请输入优惠券名称" maxlength="20" value="${item.couponName}" required />
|
</div>
|
<label class="control-label col-sm-1" for="couponNum" style="text-align: left"><span style="color: red">*</span>优惠券数量：</label>
|
<div class="col-sm-4">
|
<input type="number" class="form-control" id="couponNum" placeholder="请输入活动优惠券数量" min="0" value="${item.couponNum}" required />
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="control-label col-sm-1" for="couponAmount" style="text-align: left"><span style="color: red">*</span>优惠券面额：</label>
|
<div class="col-sm-4">
|
<div class="input-group">
|
<input type="number" class="form-control" id="couponAmount" placeholder="请输入优惠券面额" min="0" value="${item.couponAmount}" required>
|
<div class="input-group-addon">元</div>
|
</div>
|
</div>
|
<label class="control-label col-sm-1" for="duration" style="text-align: left"><span style="color: red">*</span>优惠券有效期：</label>
|
<div class="col-sm-4">
|
<div class="input-group">
|
<input type="number" class="form-control" id="duration" placeholder="请输入优惠券有效期" min="0" value="${item.duration}" required>
|
<div class="input-group-addon">天</div>
|
</div>
|
</div>
|
</div>
|
<div class="form-group">
|
<label class="control-label col-sm-1" for="explainContent" style="text-align: left"><span style="color: red">*</span>活动内容说明：</label>
|
</div>
|
<div class="form-group">
|
<div class="col-sm-9 col-sm-offset-1">
|
<textarea type="text/plain" id="explainContent" style="width:100%;height:350px;">${item.explainContent}</textarea>
|
</div>
|
</div>
|
</div>
|
|
<!-- 活动数据内容区域 -->
|
<div id="dataInfoContent" style="display: none;">
|
<!-- 统计数据展示 -->
|
<div class="row">
|
<div class="col-sm-12">
|
<div id="statisticsContainer" style="background-color: #f9f9f9; padding: 20px; margin-bottom: 20px; border-radius: 5px;">
|
<div class="row">
|
<div class="col-sm-2">
|
<div style="text-align: center;">
|
<div style="font-size: 28px; font-weight: bold; color: #2c3e50;" id="totalCoupons">0</div>
|
<div style="color: #7f8c8d;">优惠券总计数量</div>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<div style="text-align: center;">
|
<div style="font-size: 28px; font-weight: bold; color: #27ae60;" id="receivedCoupons">0</div>
|
<div style="color: #7f8c8d;">已领取数量</div>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<div style="text-align: center;">
|
<div style="font-size: 28px; font-weight: bold; color: #e74c3c;" id="remainingCoupons">0</div>
|
<div style="color: #7f8c8d;">剩余数量</div>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<div style="text-align: center;">
|
<div style="font-size: 28px; font-weight: bold; color: #3498db;" id="totalAmount">¥0</div>
|
<div style="color: #7f8c8d;">优惠券总计金额</div>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<div style="text-align: center;">
|
<div style="font-size: 28px; font-weight: bold; color: #f39c12;" id="usedAmount">¥0</div>
|
<div style="color: #7f8c8d;">已使用金额</div>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<div style="text-align: center;">
|
<div style="font-size: 28px; font-weight: bold; color: #9b59b6;" id="unusedAmount">¥0</div>
|
<div style="color: #7f8c8d;">未使用金额</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 优惠券领取记录列表 -->
|
<div class="row">
|
<div class="col-sm-12">
|
<div class="ibox float-e-margins">
|
<div class="ibox-title">
|
<h5>优惠券领取记录</h5>
|
</div>
|
<div class="ibox-content">
|
<!-- 搜索区域 -->
|
<div class="row" style="margin-bottom: 15px;">
|
<div class="col-sm-3">
|
<div class="input-group">
|
<input type="text" class="form-control" id="userPhoneSearch" placeholder="请输入手机号搜索" onkeypress="if(event.keyCode==13) TCheckCarActivityDetail.searchRecords()">
|
<span class="input-group-btn">
|
<button class="btn btn-primary" type="button" onclick="TCheckCarActivityDetail.searchRecords()">
|
<i class="fa fa-search"></i> 搜索
|
</button>
|
</span>
|
</div>
|
</div>
|
<div class="col-sm-2">
|
<button class="btn btn-default" type="button" onclick="TCheckCarActivityDetail.resetSearch()">
|
<i class="fa fa-refresh"></i> 重置
|
</button>
|
</div>
|
</div>
|
<#table id="ActivityRecordsTable"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<div class="row btn-group-m-t">
|
<div class="col-sm-10 col-sm-offset-1">
|
<#button btnCss="normal" name="关闭" id="cancel" icon="fa-eraser" clickFun="TCheckCarActivityInfoDlg.close()"/>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<script src="${ctxPath}/static/modular/system/tCheckCarActivity/tCheckCarActivity_info.js"></script>
|
<script>
|
laydate.render({
|
elem: '#startTime',
|
range: true,
|
trigger: 'click',
|
min: 0
|
});
|
|
// 活动信息切换功能
|
function switchActivityInfo(type) {
|
var basicBtn = document.getElementById('basicInfoBtn');
|
var dataBtn = document.getElementById('dataInfoBtn');
|
var basicInfoContent = document.getElementById('basicInfoContent');
|
var dataInfoContent = document.getElementById('dataInfoContent');
|
|
if (type === 'basic') {
|
// 切换到基本信息
|
basicBtn.className = 'btn btn-primary';
|
basicBtn.style.backgroundColor = '#337ab7';
|
basicBtn.style.color = 'white';
|
|
dataBtn.className = 'btn btn-default';
|
dataBtn.style.backgroundColor = 'white';
|
dataBtn.style.color = 'black';
|
|
if (basicInfoContent) basicInfoContent.style.display = 'block';
|
if (dataInfoContent) dataInfoContent.style.display = 'none';
|
} else if (type === 'data') {
|
// 切换到活动数据
|
dataBtn.className = 'btn btn-primary';
|
dataBtn.style.backgroundColor = '#337ab7';
|
dataBtn.style.color = 'white';
|
|
basicBtn.className = 'btn btn-default';
|
basicBtn.style.backgroundColor = 'white';
|
basicBtn.style.color = 'black';
|
|
if (basicInfoContent) basicInfoContent.style.display = 'none';
|
if (dataInfoContent) dataInfoContent.style.display = 'block';
|
|
//切换到数据页面时加载数据
|
TCheckCarActivityDetail.loadActivityData();
|
}
|
}
|
|
// 详情页面二维码查看对象
|
var TCheckCarActivityDetail = {
|
layerIndex: -1,
|
recordsTable: null,
|
|
/**
|
* 加载活动数据
|
*/
|
loadActivityData: function() {
|
var activityId = $('#id').val();
|
this.loadStatistics(activityId);
|
this.initRecordsTable(activityId);
|
},
|
|
/**
|
* 加载统计数据
|
*/
|
loadStatistics: function(activityId) {
|
var ajax = new $ax(Feng.ctxPath + "/tCheckCarActivity/statistics/" + activityId, function(data) {
|
if (data) {
|
$('#totalCoupons').text(data.totalCoupons || 0);
|
$('#receivedCoupons').text(data.receivedCoupons || 0);
|
$('#remainingCoupons').text(data.remainingCoupons || 0);
|
$('#totalAmount').text('¥' + (data.totalAmount || 0));
|
$('#usedAmount').text('¥' + (data.usedAmount || 0));
|
$('#unusedAmount').text('¥' + (data.unusedAmount || 0));
|
}
|
}, function(data) {
|
Feng.error("加载统计数据失败！");
|
});
|
ajax.start();
|
},
|
|
/**
|
* 初始化记录表格
|
*/
|
initRecordsTable: function(activityId) {
|
var columns = [
|
{field: 'selectItem', radio: true},
|
{title: '用户名', field: 'userName', visible: true, align: 'center', valign: 'middle'},
|
{title: '手机号', field: 'userPhone', visible: true, align: 'center', valign: 'middle'},
|
{title: '领取时间', field: 'receiveTime', visible: true, align: 'center', valign: 'middle'},
|
{title: '当前状态', field: 'status', visible: true, align: 'center', valign: 'middle',
|
formatter: function(value, row, index) {
|
return row.status === 1 ? '已使用' : '未使用';
|
}
|
},
|
{title: '使用时间', field: 'useTime', visible: true, align: 'center', valign: 'middle'},
|
{title: '使用订单号', field: 'checkOrderCode', visible: true, align: 'center', valign: 'middle'}
|
];
|
|
var table = new BSTable("ActivityRecordsTable", "/tCheckCarActivity/records/" + activityId, columns);
|
table.setPaginationType("server");
|
this.recordsTable = table.init();
|
},
|
|
openQrPage: function (qrCode) {
|
// 验证二维码地址
|
if (!qrCode || qrCode.trim() === '') {
|
Feng.error("二维码地址为空！");
|
return;
|
}
|
|
// 构建弹窗HTML内容
|
var qrCodeHtml = '<div style="text-align: center; padding: 20px;">' +
|
'<div id="qrcode-container" style="margin-bottom: 20px;">' +
|
'<img id="qrcode-img" src="' + qrCode + '" style="width: 300px; height: 300px; border: 1px solid #ddd;" alt="二维码" />' +
|
'</div>' +
|
'<button id="download-qr-btn" type="button" class="btn btn-primary" style="margin-top: 10px;">' +
|
'下载二维码图片</button>' +
|
'</div>';
|
|
// 打开弹窗
|
var index = layer.open({
|
type: 1,
|
title: '二维码查看',
|
area: ['400px', '500px'],
|
fix: false,
|
maxmin: true,
|
content: qrCodeHtml,
|
success: function(layero, index) {
|
// 绑定下载按钮事件
|
$('#download-qr-btn').click(function() {
|
TCheckCarActivityDetail.downloadQrCode(qrCode);
|
});
|
|
// 图片加载失败处理
|
$('#qrcode-img').on('error', function() {
|
$(this).attr('alt', '二维码加载失败');
|
$(this).css({'background-color': '#f5f5f5', 'line-height': '300px'});
|
});
|
}
|
});
|
this.layerIndex = index;
|
},
|
downloadQrCode: function(qrCode) {
|
try {
|
if (!qrCode) {
|
Feng.error("二维码地址无效，无法下载！");
|
return;
|
}
|
|
// 创建下载链接
|
var link = document.createElement('a');
|
link.download = '二维码_' + new Date().getTime() + '.png';
|
link.href = qrCode;
|
link.target = '_blank';
|
|
// 触发下载
|
document.body.appendChild(link);
|
link.click();
|
document.body.removeChild(link);
|
|
Feng.success("二维码图片下载成功！");
|
} catch (e) {
|
console.error('下载二维码失败:', e);
|
Feng.error("下载失败！请重试。");
|
}
|
},
|
|
/**
|
* 搜索记录
|
*/
|
searchRecords: function() {
|
if (this.recordsTable) {
|
var userPhone = $('#userPhoneSearch').val();
|
this.recordsTable.refresh({query: {userPhone: userPhone}});
|
}
|
},
|
|
/**
|
* 重置搜索
|
*/
|
resetSearch: function() {
|
$('#userPhoneSearch').val('');
|
if (this.recordsTable) {
|
this.searchRecords();
|
}
|
}
|
};
|
</script>
|
@}
|
