ruoyi
/
RuoYi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
RuoYi/sino-activity/src/main/resources/templates/activity/info/add.html

538 lines
28 KiB
HTML
Raw Normal View History

活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<th:block th:include="include :: header('创建活动')" />
<th:block th:include="include :: datetimepicker-css" />
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<th:block th:include="include :: jquery-smartwizard-css" />
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-info-add">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div id="smartwizard">
<ul class="nav">
<li class="nav-item">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<a class="nav-link" href="#step-1"> 基本信息 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-2"> 选择UI模板 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-3"> 配置展现内容 </a>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</li>
<li class="nav-item">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<a class="nav-link" href="#step-4"> 选择玩法 </a>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</li>
<li class="nav-item">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<a class="nav-link" href="#step-4"> 配置收集信息 </a>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</li>
<li class="nav-item">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<a class="nav-link" href="#step-4"> 配置分享信息 </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#step-4"> 关注二维码 </a>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</li>
</ul>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<div class="tab-content" style="height: 500px;">
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
<div>
<form class="form form-horizontal m-t">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<h4 class="form-header h4">第1步-基本信息</h4>
活动管理-添加活动
2021-04-02 09:31:03 +08:00
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">活动名称：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
活动管理-添加活动
2021-04-02 09:31:03 +08:00
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">状态：</label>
<div class="col-sm-8">
<select name="STATUS" class="form-control" th:with="type=${@dict.getType('start_stop')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
</div>
活动管理-添加活动
2021-04-02 09:31:03 +08:00
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">消耗对象：</label>
<div class="col-sm-8">
<select name="EXPENO" class="form-control" th:with="type=${@dict.getType('expeType')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
活动管理-添加活动
2021-04-02 09:31:03 +08:00
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">消耗价值：</label>
<div class="col-sm-8">
<input name="EXPENOVALUE" placeholder="消耗价值" class="form-control" type="text" maxlength="30">
</div>
</div>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
</div>
活动管理-添加活动
2021-04-02 09:31:03 +08:00
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">开始时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="STARTTIME" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
活动管理-添加活动
2021-04-02 09:31:03 +08:00
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">结束时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="ENDTIME" class="form-control" placeholder="yyyy-MM-dd HH:mm:ss" type="text">
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
</div>
</form>
</div>
</div>
<div id="step-2" class="tab-pane" role="tabpanel" aria-labelledby="step-2">
<div>
<form class="form form-horizontal m-t">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<h4 class="form-header h4">第2步-选择UI模板</h4>
分格查询字典表 单选按钮
<h4 class="form-header h4">字典表显示字段</h4>
<img src="file://C:/Users/dengyu/Desktop/1.jpg" width="104" height="142">
</form>
</div>
</div>
<div id="step-3" class="tab-pane" role="tabpanel" aria-labelledby="step-3">
<form class="form form-horizontal m-t">
<h4 class="form-header h4">第3步-配置展现内容</h4>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">活动标题：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">活动描述：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">活动描述：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">背景图片：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">自定义按钮1：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">按钮1跳转链接：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">自定义按钮2：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">按钮2跳转链接：</label>
<div class="col-sm-8">
<input name="DRAWNAME" placeholder="活动名称" class="form-control" type="text" maxlength="30">
</div>
</div>
</div>
</div>
</form>
</div>
<div id="step-4" class="tab-pane" role="tabpanel" aria-labelledby="step-4">
<h4 class="form-header h4">活动规则</h4>
<div class="row">
<div class="col-sm-6">
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div class="form-group">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<label class="col-sm-4 control-label is-required">首次中奖配置：</label>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div class="col-sm-8">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<select name="FIRSTFLAG" id="FIRSTFLAG" onchange="firstflag()" class="form-control" th:with="type=${@dict.getType('is_boolean')}">
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
</div>
<div class="col-sm-6">
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div class="form-group">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<label class="col-sm-4 control-label is-required">首次中奖奖品：</label>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div class="col-sm-8">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<select name="FIRSTAWARDPRIZE" class="form-control" id="firstawardprize" disabled >
</select>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
</div>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
</div>
</div>
<div class="row">
<div class="col-sm-6">
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div class="form-group">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<label class="col-sm-4 control-label is-required">时间段抽奖配置：</label>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<div class="col-sm-8">
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<select name="DAILYFLAG" id="DAILYFLAG" onchange="dailyflag()" class="form-control" th:with="type=${@dict.getType('is_boolean')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">时间段限制次数：</label>
<div class="col-sm-8">
<input name="DAILYNUMBER" id="dailynumber" placeholder="时间段限制次数" class="form-control" type="text" maxlength="30" disabled>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
</div>
</div>
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</div>
</div>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">抽奖限制开始时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="DAILYSTARTTIME" id="dailystarttime" class="form-control" placeholder="HH:mm:ss" type="text" disabled>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">抽奖限制结束时间：</label>
<div class="col-sm-8">
<div class="input-group date">
<input name="DAILYENDTIME" id="dailyendtime" class="form-control" placeholder="HH:mm:ss" type="text" disabled>
<span class="input-group-addon"><i class="fa fa-calendar"></i></span>
</div>
</div>
</div>
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</div>
</div>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">抽奖必中配置：</label>
<div class="col-sm-8">
<select name="WILLDRAWFLAG" id="WILLDRAWFLAG" onchange="willdrawflag()" class="form-control" th:with="type=${@dict.getType('is_boolean')}">
<option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}"></option>
</select>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">抽奖必中计数：</label>
<div class="col-sm-8">
<input name="WILLDRAWAWARDNUMBER" id="willdrawawardnumber" placeholder="抽奖必中计数" class="form-control" type="text" maxlength="30" disabled>
</div>
</div>
</div>
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</div>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label is-required">抽奖必中奖品：</label>
<div class="col-sm-8">
<select name="WILLDRAWAWARDPRIZE" class="form-control" id="willdrawawardprize" disabled>
</select>
</div>
</div>
</div>
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</div>
</div>
</div>
</div>
活动管理-添加活动
2021-04-02 10:38:31 +08:00
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</form>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<th:block th:include="include :: jquery-smartwizard-js" />
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
<script th:inline="javascript">
var prefix = ctx + "activity/info"
/**获取奖品及信息列表*/
$(document).ready(function() {
活动管理-抽奖活动管理修改展示效果
2021-03-30 10:27:56 +08:00
var job= "";
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
$.ajax({
url:prefix + "/prizeInfo",
success: function (data) {
for(var i in data){
活动管理-抽奖活动管理修改展示效果
2021-03-30 10:27:56 +08:00
if (job.length==0){
job = "<option value='"+data[i].prizecode+"'>"+data[i].prizename+"</option>"
}
else{
job += "<option value='"+data[i].prizecode+"'>"+data[i].prizename+"</option>"
}
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
}
$("#firstawardprize").html(job);
$("#willdrawawardprize").html(job);
},
error : function(XMLHttpRequest, textStatus, errorThrown) {
alert(errorThrown);
},
async:false //false表示同步
}
);
});
$("#form-info-add").validate({
focusCleanup: true
});
function submitHandler(){
var data = $("#form-info-add").serializeArray();
$.operate.saveModal(prefix+"/add", data);
}
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
//时间段抽奖配置
function dailyflag(){
var DAILYFLAG = $("#DAILYFLAG").val();
if (DAILYFLAG==1){
活动管理-抽奖活动管理修改
2021-04-01 10:17:13 +08:00
$('#dailynumber').removeAttr('disabled');
$('#dailystarttime').removeAttr('disabled');
$('#dailyendtime').removeAttr('disabled');
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
}else if(DAILYFLAG==0){
活动管理-抽奖活动管理修改
2021-04-01 10:17:13 +08:00
$("#dailynumber").attr('disabled','true');
$("#dailystarttime").attr('disabled','true');
$("#dailyendtime").attr('disabled','true');
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
}
}
//抽奖必中配置
function willdrawflag(){
var WILLDRAWFLAG = $("#WILLDRAWFLAG").val();
if (WILLDRAWFLAG==1){
活动管理-抽奖活动管理修改
2021-04-01 10:17:13 +08:00
$('#willdrawawardnumber').removeAttr('disabled');
活动管理-抽奖活动管理增加按钮配置
2021-04-01 09:23:30 +08:00
$('#willdrawawardprize').removeAttr('disabled');
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
}else if(WILLDRAWFLAG==0){
活动管理-抽奖活动管理修改
2021-04-01 10:17:13 +08:00
$("#willdrawawardnumber").attr('disabled','true');
活动管理-抽奖活动管理增加按钮配置
2021-04-01 09:23:30 +08:00
$("#willdrawawardprize").attr('disabled','true');
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
}
}
//首次中奖配置
function firstflag(){
var FIRSTFLAG = $("#FIRSTFLAG").val();
if (FIRSTFLAG==1){
$('#firstawardprize').removeAttr('disabled');
}else if(FIRSTFLAG==0){
$("#firstawardprize").attr('disabled','true');
}
}
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
$("input[name='STARTTIME']").datetimepicker({
活动管理-抽奖活动管理修改内容
2021-03-31 14:55:13 +08:00
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
format: 'yyyy-mm-dd hh:ii:ss'
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
});
$("input[name='ENDTIME']").datetimepicker({
活动管理-抽奖活动管理修改内容
2021-03-31 14:55:13 +08:00
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
format: 'yyyy-mm-dd hh:ii:ss'
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
});
$("input[name='DAILYSTARTTIME']").datetimepicker({
活动管理-抽奖活动管理修改内容
2021-03-31 14:55:13 +08:00
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
format: 'hh:ii:ss'
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
});
$("input[name='DAILYENDTIME']").datetimepicker({
活动管理-抽奖活动管理修改内容
2021-03-31 14:55:13 +08:00
weekStart: 1,
todayBtn: 1,
autoclose: 1,
todayHighlight: 1,
startView: 2,
forceParse: 0,
showMeridian: 1,
活动管理-抽奖活动管理修改
2021-03-31 17:48:27 +08:00
format: 'hh:ii:ss'
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
});
</script>
活动管理-添加活动
2021-04-02 09:28:28 +08:00
<script th:inline="javascript">
$(document).ready(function() {
// 工具栏按钮
var btnFinish = $('<a id="btn-finish"></a>').text('完成')
.addClass('btn btn-info')
.on('click', function(){ submit(); });
var btnCancel = $('<a id="btn-cancel"></a>').text('取消')
.addClass('btn btn-danger')
.on('click', function(){ $('#smartwizard').smartWizard("reset"); });
// 下面两个按钮是为了因为插件默认的是botton,这里换成<a>,也可以选择用样式替换,或者不替换
var btnNext = $('<a id="btn-next"></a>').text('下一步')
.addClass('btn btn-info')
.on('click', function(){ $('#smartwizard').smartWizard("next");});
var btnPrev = $('<a id="btn-prev"></a>').text('上一步')
.addClass('btn btn-success disabled')
.on('click', function(){ $('#smartwizard').smartWizard("prev"); });
// 初始化表单向导组件
$('#smartwizard').smartWizard({
theme: 'dots', // default, arrows, dots, progress
活动管理-添加活动
2021-04-02 10:38:31 +08:00
autoAdjustHeight : true, // 自动调整高度, 默认true
活动管理-添加活动
2021-04-02 09:28:28 +08:00
enableURLhash:false, //开启URL hash,开启后点击浏览器前进后退按钮会执行下一步和上一步操作
transition: {
animation: 'slide-horizontal', // Effect on navigation, none/fade/slide-horizontal/slide-vertical/slide-swing
},
toolbarSettings: {
showNextButton: false,// 因为上面自定义了下一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
showPreviousButton: false,// 因为上面自定义了上一步按钮, 所以隐藏掉插件自带的按钮, 如果不使用自定义按钮, 需要改为true或者去掉该属性
toolbarExtraButtons: [btnCancel,btnPrev,btnNext,btnFinish]// 扩展的按钮集合
}
});
});
// 显示步骤时将触发事件
$("#smartwizard").on("showStep", function(e, anchorObject, stepNumber, stepDirection, stepPosition) {
// 下面按钮是快速操作栏的
$("#prev-btn").removeClass('disabled');
$("#next-btn").removeClass('disabled');
// 下面按钮是工具栏的
$("#btn-prev").removeClass('disabled');
$("#btn-next").removeClass('disabled');
$("#btn-finish").removeClass('disabled');
if(stepPosition === 'first') {
$("#prev-btn").addClass('disabled');// 快速操作栏（演示用）
$("#btn-prev").addClass('disabled');
$("#btn-finish").addClass('disabled');
} else if(stepPosition === 'last') {
$("#next-btn").addClass('disabled');// 快速操作栏（演示用）
$("#btn-next").addClass('disabled');
} else {
$("#prev-btn").removeClass('disabled');// 快速操作栏（演示用）
$("#next-btn").removeClass('disabled');// 快速操作栏（演示用）
$("#btn-prev").removeClass('disabled');
$("#btn-next").removeClass('disabled');
$("#btn-finish").addClass('disabled');
}
});
// 该事件在离开某个步骤之前触发
$("#smartwizard").on("leaveStep", function(e, anchorObject, currentStepNumber, nextStepNumber, stepDirection) {
if(stepDirection == 'forward'){
var form = $("#step-" + (currentStepNumber + 1)).find('.form');
if(form.length > 0){
return form.validate().form();
}
return true;
}
return true;
});
$("#theme-selector").on("change", function() {
// Change theme
var options = {
theme : $(this).val()
};
$('#smartwizard').smartWizard("setOptions", options);
return true;
});
$("#reset-btn").on("click", function() {
// Reset wizard
$('#smartwizard').smartWizard("reset");
return true;
});
$("#prev-btn").on("click", function() {
// Navigate previous
$('#smartwizard').smartWizard("prev");
return true;
});
$("#next-btn").on("click", function() {
// Navigate next
$('#smartwizard').smartWizard("next");
return true;
});
</script>
活动管理-抽奖活动管理
2021-03-30 09:45:17 +08:00
</body>
</html>