ruoyi
/
RuoYi
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

活动管理-抽奖活动管理

This commit is contained in:
xu0625 2021-04-08 10:42:02 +08:00
parent c9dc851d5b
commit f15eb2306a
2 changed files with 565 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

570
sino-activity/src/main/resources/templates/activity/info/add.html
View File

@ -74,6 +74,125 @@
display: inline-block; display: inline-block;
font-size: 15px; font-size: 15px;
} }
/* 配置收集信息*/
.drawTotalPri {
text-align: center;
position: absolute;
top: 10%;
font-size: 37px;
left: 0;
color: #F00;
width: 100%;
}
.drawDescribePri{
text-align: center;
position: absolute;
top: 25%;
font-size: 20px;
left: 0;
color: #F00;
width: 100%;
}
.drawTextPri{
text-align: center;
position: absolute;
top: 50%;
font-size: 15px;
left: 0;
color: #F00;
width: 100%;
}
.drawText2Pri{
text-align: center;
position: absolute;
top: 55%;
font-size: 10px;
left: 0;
color: #F00;
width: 80%;
}
.drawText3Pri{
text-align: center;
position: absolute;
top: 60%;
font-size: 20px;
left: 0;
color: #F00;
width: 100%;
}
.drawbtnPri {
text-align: center;
position: absolute;
top: 88%;
font-size: 20px;
color: #F00;
left: 0px;
width: 100%;
}
/* 配置分享信息*/
.drawShareTitlePri {
text-align: center;
position: absolute;
top: 40%;
font-size: 20px;
left: 28%;
color: #F00;
width: 100%;
}
.drawShareDescribePri {
text-align: center;
position: absolute;
top: 50%;
font-size: 10px;
left: 25%;
color: #F00;
width: 100%;
}
.drawShareImgPic {
text-align: center;
position: absolute;
top: 50%;
font-size: 37px;
left: 35%;
color: #F00;
width: 100%;
}
.drawShareImg2Pic{
text-align: center;
position: absolute;
top: 40%;
font-size: 37px;
left: 30%;
color: #F00;
width: 100%;
}
/* 关注二维码*/
.drawCodeImgPic{
text-align: center;
position: absolute;
top: 50%;
font-size: 37px;
left: 0%;
color: #F00;
width: 100%;
}
.drawQrCodePri{
text-align: center;
position: absolute;
top: 70%;
font-size: 25px;
left: 0%;
color: #F00;
width: 100%;
}
</style> </style>
<body class="white-bg"> <body class="white-bg">
@ -82,7 +201,7 @@
<div id="smartwizard"> <div id="smartwizard">
<ul class="nav"> <ul class="nav">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#step-1"> 基本信息 </a> <a class="nav-link" href="#step-1"> 基本信息 </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
@ -95,17 +214,17 @@
<a class="nav-link" href="#step-4"> 选择玩法 </a> <a class="nav-link" href="#step-4"> 选择玩法 </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#step-4"> 配置收集信息 </a> <a class="nav-link" href="#step-5"> 配置收集信息 </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#step-4"> 配置分享信息 </a> <a class="nav-link" href="#step-6"> 配置分享信息 </a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link" href="#step-4"> 关注二维码 </a> <a class="nav-link" href="#step-7"> 关注二维码 </a>
</li> </li>
</ul> </ul>
<div class="tab-content" style="height: 610px;"> <div class="tab-content" style="height: 610px;">
<div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1"> <div id="step-1" class="tab-pane" role="tabpanel" aria-labelledby="step-1">
<div> <div>
<form class="form form-horizontal m-t"> <form class="form form-horizontal m-t">
<h4 class="form-header h4">第1步-基本信息</h4> <h4 class="form-header h4">第1步-基本信息</h4>
@ -422,9 +541,323 @@
</div> </div>
</div> </div>
</div> </div>
<div id="step-5" class="tab-pane" role="tabpanel" aria-labelledby="step-5">
<div style="height: 610px">
<form class="form form-horizontal m-t">
<div class="leftarea">
<h4 class="form-header h4">第五步-配置收集信息</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 id="title" name="title" placeholder="例如：客户姓名" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</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 id="describe" name="describe" placeholder="例如：客户手机号" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</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 id="agreement" name="agreement" height="100px" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="col-sm-4 control-label is-required">背景图片：</label>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput"
style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-white btn-file"><span
class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
<input type="file" id="picture"></span>
<a href="#" class="btn btn-white fileinput-exists"
data-dismiss="fileinput">清除</a>
</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 id="btn" name="btn" placeholder="自定义按钮" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</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="btnLink" placeholder="按钮跳转链接" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)" >
</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">
<label class="checkbox-inline">
<input type="checkbox" name="name" id="name" onclick="updateText(this)">姓名</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="phone" id="phone" onclick="updateText(this)">手机号</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="sex" id="sex" onclick="updateText(this)">性别</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="address" id="address" onclick="updateText(this)">地址</input>
</label>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="col-sm-4 control-label ">代理人信息：</label>
<div class="col-sm-8">
<label class="checkbox-inline">
<input type="checkbox" name="agentName" id="agentName" onclick="updateText(this)">代理人姓名</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="agentPhone" id="agentPhone" onclick="updateText(this)">代理人手机号</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="agentSex" id="agentSex" onclick="updateText(this)">代理人性别</input>
</label>
<label class="checkbox-inline">
<input type="checkbox" name="agentNumber" id="agentNumber" onclick="updateText(this)">代理人工号</input>
</label>
</div>
</div>
</div>
</div>
</div>
<div class="rightarea">
<h4 class="form-header h4">效果图</h4>
<div style="position: relative;text-align:center">
<img id="imgPri" src="../../img/shj.jpg" width="380" height="500">
<span class="drawTotalPri" id="titlePri">标题</span>
<span class="drawDescribePri" id="describePri">描述</span>
<span class="drawTextPri">请填写您的基本信息</span>
<div class="drawText2Pri">
<input type="checkbox">
<span id="agreementPri">信息页文本协议提示</span>
</div>
<div class="drawText3Pri">
<div>
<input placeholder="姓名" name="name" type="hidden" id="namePri">
</div>
<div>
<input placeholder="手机号" name="phone" type="hidden" id="phonePri">
</div>
<div>
<input placeholder="性别" name="sex" height="10px" type="hidden" id="sexPri">
</div>
<div>
<input placeholder="地址" name="address" type="hidden" id="addressPri">
</div>
<div>
<input placeholder="代理人姓名" name="agentName" type="hidden" id="agentNamePri">
</div>
<div>
<input placeholder="代理人手机号" name="agentPhone" type="hidden" id="agentPhonePri">
</div>
<div>
<input placeholder="代理人性别" name="agentSex" type="hidden" id="agentSexPri">
</div>
<div>
<input placeholder="代理人地址" name="agentNumber" type="hidden" id="agentNumberPri">
</div>
</div>
<span class="drawbtnPri">
<a id="btnPri" class="btn btn-success btn-xs ">自定义按钮</a>
</span>
</div>
</div>
</form>
</div>
</div>
<div id="step-6" class="tab-pane" role="tabpanel" aria-labelledby="step-6">
<div style="height: 610px">
<form class="form form-horizontal m-t">
<div class="leftarea">
<h4 class="form-header h4">第六步-配置分享信息</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 id="shareConnect" name="shareConnect" placeholder="例如：http://XX" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</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 id="shareTitle" name="shareTitle" placeholder="例如：2021XX客户节" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</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 id="shareDescribe" name="shareDescribe" placeholder="例如：参与活动，赢大奖" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="col-sm-4 control-label is-required">分享图片：</label>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput"
style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-white btn-file"><span
class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
<input type="file" id="shareImg"></span>
<a href="#" class="btn btn-white fileinput-exists"
data-dismiss="fileinput">清除</a>
</div>
</div>
</div>
</div>
</div>
<div class="rightarea">
<h4 class="form-header h4">效果图</h4>
<div style="height: 210px">
<div class="drawShareImg2Pic">
<img id="ss" src="../../img/shj.jpg" width="254" height="142">
</div>
<div class="drawShareImgPic">
<img id="shareImgPic" src="../../img/shj.jpg" width="50" height="50">
</div>
<div>
<span class="drawShareTitlePri" id="shareTitlePri">中国人寿举办活动</span>
</div>
<span class="drawShareDescribePri" id="shareDescribePri">分享必得奖品</span>
</div>
</div>
</form>
</div>
</div>
<div id="step-7" class="tab-pane" role="tabpanel" aria-labelledby="step-7">
<div style="height: 610px">
<form class="form form-horizontal m-t">
<div class="leftarea">
<h4 class="form-header h4">第七步-关注二维码</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 id="qrCode" name="qrCode" placeholder="例如：扫描二维码参加活动" class="form-control" type="text"
maxlength="30" onkeyup="updatePri(this)">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="col-sm-4 control-label is-required">背景图片：</label>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput"
style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-white btn-file"><span
class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
<input type="file" id="backdropImg"></span>
<a href="#" class="btn btn-white fileinput-exists"
data-dismiss="fileinput">清除</a>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label class="col-sm-4 control-label is-required">二维码图片：</label>
<div class="fileinput fileinput-new" data-provides="fileinput">
<div class="fileinput-preview thumbnail" data-trigger="fileinput"
style="width: 200px; height: 150px;"></div>
<div>
<span class="btn btn-white btn-file"><span
class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span>
<input type="file" id="qrCodeImg"></span>
<a href="#" class="btn btn-white fileinput-exists"
data-dismiss="fileinput">清除</a>
</div>
</div>
</div>
</div>
</div>
<div class="rightarea">
<h4 class="form-header h4">效果图</h4>
<div style="position: relative;text-align:center">
<img id="backdropImgPri" src="../../img/shj.jpg" width="400" height="400">
<div class="drawCodeImgPic">
<img id="qrCodeImgPri" src="../../img/shj.jpg" width="80" height="80">
</div>
<span class="drawQrCodePri" id="qrCodePri">关注二维码</span>
</div>
</div>
</form>
</div>
</div>
</div> </div>
</div> </div>
</form> </form>
</div> </div>
<th:block th:include="include :: footer"/> <th:block th:include="include :: footer"/>
@ -657,6 +1090,20 @@
}); });
</script> </script>
<script th:inline="javascript"> <script th:inline="javascript">
function updateText(val){
var id = val.id;
var boolean = $("#"+id).prop("checked");
if (boolean){
$("#" + id + "Pri").attr('type','text');
}else{
$("#" + id + "Pri").attr('type','hidden');
}
}
function updatePic(val) { function updatePic(val) {
var id = val.id; var id = val.id;
var value = val.value; var value = val.value;
@ -665,6 +1112,117 @@
value = "自定义按钮"+id.charAt(id.length -1); value = "自定义按钮"+id.charAt(id.length -1);
} }
$("#" + id + "Pic").text(value); $("#" + id + "Pic").text(value);
}
function updatePri(val) {
var id = val.id;
var value = val.value;
if (value == null || value == ""&& id.indexOf("btn") != -1){
//默认值
value = "自定义按钮";
}
$("#" + id + "Pri").text(value);
}
//分享图片
$("#qrCodeImg").change(function () {
qrCodeImg(this);
if ($(this).val() != '') {
$("#qrCodeImgPri").attr("src", $(this).val());
}
});
function qrCodeImg(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//$('#prevImg').attr('src', e.target.result);
$("#qrCodeImgPri").attr("src", e.target.result);
//$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
}
reader.readAsDataURL(input.files[0]);
}
}
//分享图片
$("#backdropImg").change(function () {
backdropImg(this);
if ($(this).val() != '') {
$("#backdropImgPri").attr("src", $(this).val());
}
});
function backdropImg(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//$('#prevImg').attr('src', e.target.result);
$("#backdropImgPri").attr("src", e.target.result);
//$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
}
reader.readAsDataURL(input.files[0]);
}
}
//分享图片
$("#shareImg").change(function () {
shareImg(this);
if ($(this).val() != '') {
$("#shareImgPic").attr("src", $(this).val());
}
});
function shareImg(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//$('#prevImg').attr('src', e.target.result);
$("#shareImgPic").attr("src", e.target.result);
//$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
}
reader.readAsDataURL(input.files[0]);
}
}
$("#picture").change(function () {
btnURL(this);
if ($(this).val() != '') {
// var formData = new FormData();
// formData.append('file', $(this)[0].files[0]);
// $.ajax({
// url: '/path/to/upload',
// type: 'POST',
// data: formData,
// async: false,
// success: function (r) {
// if(r.success) {
// //success work
// }
// },
// cache: false,
// contentType: false,
// processData: false
// });
$("#imgPri").attr("src", $(this).val());
}
});
function btnURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//$('#prevImg').attr('src', e.target.result);
$("#imgPri").attr("src", e.target.result);
//$('#preview').css("background", "url(" + e.target.result +")" + " right top no-repeat");
}
reader.readAsDataURL(input.files[0]);
}
} }
$("#pic").change(function () { $("#pic").change(function () {

2
sino-activity/src/main/resources/templates/activity/info/info.html
View File

@ -35,7 +35,7 @@
</div> </div>
<div class="btn-group-sm" id="toolbar" role="group"> <div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.addFull()" shiro:hasPermission="activity:info:add"> <a class="btn btn-success" onclick="$.operate.addTab()" shiro:hasPermission="activity:info:add">
<i class="fa fa-plus"></i> 添加 <i class="fa fa-plus"></i> 添加
</a> </a>
<a class="btn btn-primary single disabled" onclick="$.operate.editFull()" shiro:hasPermission="activity:info:edit"> <a class="btn btn-primary single disabled" onclick="$.operate.editFull()" shiro:hasPermission="activity:info:edit">