记得上下班打卡 | git大法好，push需谨慎

Skip to content

L
liquidnet-bus-v1
Commit d825f921 authored by dongchun's avatar dongchun
Browse files
Options

新增转盘创建页面

parent 9a34e43b
Show whitespace changes
Inline Side-by-side
Showing with 548 additions and 10 deletions
liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/sweet/integralActivity/form.html
View file @ d825f921
......@@ -2,21 +2,559 @@
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
<th:block th:include="include :: header('添加活动')"/>
<th:block th:include="include :: bootstrap-fileinput-css" />
<style>
.layui-form {
padding: 20px;
}
.main_type, .money, .scope_application, .sendType,.phoneNumber,.playMethod {
margin-bottom: 20px;
}
.phoneNumber,.playMethod {
display: none;
}
.labelName {
display: inline-block;
width: 100px;
text-align: right;
}
input {
border: 1px solid #ddd;
border-radius: 4px;
background: transparent;
outline: none;
padding-left: 5px;
height: 30px;
}
.main_type .form-control.kv-fileinput-caption {
height: 42px !important;
}
.prompt {
margin-left: 100px !important;
}
.main_type input, .sendType input,.playMethod input {
margin-top: -2px;
margin-right: 5px;
}
.main_type span, .sendType span, .playMethod span {
margin-right: 12px;
line-height: 28px;
}
.layui-form .money input {
width: 60px;
}
.changeData .dataOne {
margin-bottom: 20px;
}
.changeData .dataOne p {
margin: 12px 0 0 20px;
color: #ccc;
}
.changeData .dataOne input {
width: 60px;
}
.main_bottom .describe, .main_bottom .sendTime {
margin-bottom: 20px;
}
.describe,.main_type {
display: flex;
}
.sendTime {
display: flex;
}
.sendTime input {
margin-top: -6px;
margin-right: 5px;
}
.bottom_btn {
width: 25%;
text-align: center;
}
select {
border: 1px solid #ddd;
border-radius: 4px;
background: transparent;
outline: none;
height: 30px;
width: 200px;
}
.required {
font-style: normal;
color: red;
}
.ibox-content {
border-style: none;
border-width: 0px;
}
.main_type .file-footer-buttons .kv-file-remove {
display: none !important;
}
.selectScore {
display: flex;
align-items: center;
}
.selectScore p {
margin: 0;
}
.selectScore button {
margin: 0 12px;
}
.selectScore span {
color: #ccc;
}
.scoreTable {
margin-bottom: 12px;
}
</style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
<form class="form-horizontal m" id="form-post-add">
<form id="form-user-add" class="layui-form">
<div>
基础信息
</div>
<div class="main_type">
<span class="labelName"><i class="required">*</i>活动名称：</span>
<div class="layui-input-block" style="display: flex">
<input type="text" id="ActivityName" autocomplete="off" class="layui-input" placeholder="请输入名称">
</div>
</div>
<div class="main_type">
<span class="labelName"><i class="required">*</i>活动类型：</span>
<div class="layui-input-block" style="display: flex">
<input type="text" id="ActivityType" autocomplete="off" class="layui-input" value="转盘" disabled placeholder="请输入类型">
</div>
</div>
<input id="ceshi" class="scoreFile" type="file" name="scoreFile" style="display: none;">
<div class="main_type">
<span class="labelName"><i class="required">*</i>banner图：</span>
<div class="layui-input-block" style="display: flex;flex-direction: column;">
<img id="viewImg" src="" alt="" style="max-height:242px;">
<div class="ibox-content">
<div class="form-group">
<label class="col-sm-2 control-label is-required">标题：</label>
<div class="col-sm-10">
<input class="form-control" type="text" name="activityTitle" required>
<div class="file-loading">
<input id="fileinput" type="file" name="file" data-browse-on-zone-click="true" data-theme="fas">
</div>
</div>
</div>
</div>
</div>
<div class="main_type">
<span class="labelName"><i class="required">*</i>所需积分：</span>
<div class="layui-input-block" style="display: flex">
<input type="text" id="integral" autocomplete="off" class="layui-input" placeholder="请输入所需积分">
</div>
</div>
<div class="sendType">
<div style="display: flex;align-items: center;">
<span class="labelName"><i class="required">*</i>活动时间：</span>
<div class="layui-input-block" style="display: flex">
<input type="radio" value="0" name="sendType" checked><span>长期</span>
<input type="radio" value="1" name="sendType"><span>选择开始结束时间</span>
<div class="selectTime">
<input type="text" class="layui-input" id="startTime" placeholder="请选择起始时间">
<span>~</span>
<input type="text" class="layui-input" id="endTime" placeholder="请选择结束时间">
</div>
</div>
</div>
</div>
<div class="selectScore">
<p><i class="required">*</i>选择商品</p>
<!-- <button type="button" class="btn btn-primary" onclick="addColumn()">新增商品</button>
<span>最多可上传6个</span> -->
</div>
<!-- <img src="img/select.png" alt=""> -->
<div class="scoreTable">
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 select-table table-striped">
<table id="bootstrap-table"></table>
</div>
</div>
</div>
</div>
<div class="main_bottom">
<div class="describe">
<span class="labelName">
<i class="required">*</i>活动规则：
</span>
<textarea id="activityRule" class="form-control" style="min-height: 160px;"></textarea>
</div>
<div class="sendTime">
<span class="labelName"><i class="required">*</i>是否上线：</span>
<div class="layui-input-block" style="display: flex">
<input type="radio" name="online" value="1" checked><span>未上线</span>
<input type="radio" name="online" value="2" ><span>已上线</span>
</div>
</div>
<div class="sendTime">
<span class="labelName"><i class="required">*</i>快递费用：</span>
<div class="layui-input-block" style="display: flex">
<input type="radio" name="sex" value="1" checked><span>包邮</span>
<input type="radio" name="sex" value="2" ><span>到付</span>
<span style="margin-right:12px;"><p>输入金额</p></span>
</div>
<input type="text" id="courierMoney" autocomplete="off" class="layui-input" placeholder="请输入金额">
</div>
<div class="bottom_btn">
<!-- <button type="button" class="layui-btn btn btn-primary" lay-filter="formDemo" onclick="create()">创建代金券</button> -->
<button type="button" class="btn btn-primary" onclick="create()">创建</button>
</div>
</div>
</form>
</div>
</form>
<th:block th:include="include :: footer"/>
<script th:src="@{/js/jquery.tmpl.js}"></script>
<th:block th:include="include :: bootstrap-fileinput-js" />
<script type="text/javascript">
var prefix = ctx + "sweet/sweetIntegralActivity";
let showIndex = null;
// 初始化数据, 可以由后台传过来
var data = []; // 表格内数据集合
let activityName = ''; // 活动名称
let activityType = ''; // 活动类型
let timeType = '1'; // 活动时间类型
let startTime = ''; // 开始时间
let endTime = ''; // 结束时间
let activityRule = ''; // 活动规则
let courierType = '1'; // 快递类型
let courierMoney = ''; // 快递费用
let showPicture = ''; // banner
let online = '1'; // 是否上线
var options = {
data: data,
pagination: false,
showSearch: false,
showRefresh: false,
showToggle: false,
showColumns: false,
sidePagination: "client",
columns: [
{
field: 'index',
align: 'center',
title: "序号",
formatter: function (value, row, index) {
return index+1;
}
},
{
field: 'prizeTitle',
align: 'center',
title: '奖品名称',
formatter: function(value, row, index) {
let str = '';
if (data[index].prizeTitle) {
str = "<input id='prizeTitle"+index+"' class='form-control' type='text' name='' value='"+data[index].name+"'>"
} else {
str = "<input id='prizeTitle"+index+"' class='form-control' type='text' name='' value=''>"
}
var html = $.common.sprintf(str, index, value);
return html;
}
},
{
field: 'prizeImg',
align: 'center',
title: '商品图片',
formatter: function(value, row, index) { //
let str = '';
if (data[index].prizeImg) {
str = `<img id="showPic${index}" onclick=upFile(${index}) src="${data[index].prizeImg}" alt="" style="max-height:50px;">`
} else {
str = `<img id="showPic${index}" onclick=upFile(${index}) src="${value}" alt="点击上传" style="max-height:50px;">`
}
var html = $.common.sprintf(str, index, value);
return html;
}
},
{
field: 'prizeType',
align: 'center',
title: '奖品类型',
formatter: function(value, row, index) {
let arr = ['积分', '代金券', '满减券', '优先购买', '实物', '谢谢惠顾'];
let str = '';
arr.forEach((item,i)=> {
if (i == data[index].prizeType) {
str += `<option value="${i}" selected>${item}</option>`
} else {
str += `<option value="${i}">${item}</option>`
}
})
let dom = `<select id='prizeType${index}' class='form-control' name=''>
${str}
</select>`
return dom;
}
},
{
field: 'winningProbability',
align: 'center',
title: '概率',
formatter: function(value, row, index) {
let str = '';
if (data[index].winningProbability) {
str = `<input id='winningProbability${index}' class='form-control' type='text' name='' value='${data[index].winningProbability}'>`
} else {
str = `<input id='winningProbability${index}' class='form-control' type='text' name='' value=''>`
}
var html = $.common.sprintf(str, index, value);
return html;
}
},
{
field: 'prizeNum',
align: 'center',
title: '数量',
formatter: function(value, row, index) {
let str = '';
if (data[index].prizeNum) {
str = `<input id='prizeNum${index}' class='form-control' type='text' name='' value='${data[index].prizeNum}'>`
} else {
str = `<input id='prizeNum${index}' class='form-control' type='text' name='' value=''>`
}
var html = $.common.sprintf(str, index, value);
return html;
}
},
{
field: 'winnersNum',
align: 'center',
title: '中奖人数',
formatter: function(value, row, index) {
let str = '';
if (data[index].winnersNum) {
str = `<input id='winnersNum${index}' class='form-control' type='text' name='' value='${data[index].winnersNum}'>`
} else {
str = `<input id='winnersNum${index}' class='form-control' type='text' name='' value=''>`
}
var html = $.common.sprintf(str, index, value);
return html;
}
},
{
field: 'send',
align: 'center',
title: '已发出',
formatter: function(value, row, index) {
if (value) {
return value;
} else {
return '-'
}
}
},
{
field: 'residue',
align: 'center',
title: '奖品剩余',
formatter: function(value, row, index) {
if (value) {
return value
} else {
return '-'
}
}
}
]
};
$(function() {
let obj = {
prizeTitle: "",
prizeImg: "",
winnersNum: "",
send: "",
prizeType: "",
winningProbability: "",
residue: "",
prizeNum: ""
};
for( var i = 0; i < 12; i++) {
data.push(obj)
}
$.table.init(options);
});
$("input[name=sendType]").change((e)=>{
timeType = e.target.value;
})
$("input[name=sex]").change((e)=>{
courierType = e.target.value;
})
$("input[name=online]").change((e)=>{
online = e.target.value;
})
function addColumn() {
if (data.length >= 6) {
return layer.msg('最多可上传6个商品！')
}
if (data.length > 0) {
data = data.map((item,index) => {
item.name = $('#prizeTitle'+index).val()
item.winnersNum = $('#winnersNum'+index).val()
item.send = $('#send'+index).val()
item.type = $('#prizeType'+index).val()
item.winningProbability = $('#winningProbability'+index).val()
item.residue = $('#residue'+index).val()
item.prizeNum = $('#prizeNum'+index).val()
return item
})
}
console.log(data, 'data')
var row = {
prizeTitle: "",
prizeImg: "",
winnersNum: "",
send: "",
type: "",
winningProbability: "",
residue: "",
prizeNum: ""
}
data.push(row)
row.prizeImg = 'https://img.zhengzai.tv/other/2021/10/26/17bf7fdea070448aa28d6e86506e4f6d.png';
$("#" + table.options.id).bootstrapTable('insertRow', {
index: data.length, // 你想插入到哪，0表示第一行
row: row
})
console.log(data)
}
function upFile(e) {
showIndex = e;
$("#ceshi").click();
}
$("#ceshi").change((e) => {
console.log(e)
if (!e.target.files[0]) {
return
}
var formData = new FormData();
formData.append("file", e.target.files[0]);
$.ajax({
url: "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload",//路径是你控制器中上传图片的方法，下面controller里面我会写到
data: formData,
cache: false,
contentType: false,
processData: false,
type: 'POST',
success: function (res) {
$("#showPic"+showIndex).attr('src','https://img.zhengzai.tv/' + res.data.ossPath)
console.log(res, res.data.ossPath,showIndex, data[showIndex], '????1')
data[showIndex].prizeImg = 'https://img.zhengzai.tv/' + res.data.ossPath;
console.log(res, res.data.ossPath, '????2')
// $summernote.summernote('insertImage', 'https://img.zhengzai.tv/' + data.data.ossPath)
}
});
})
$("#fileinput").fileinput({
'theme': 'explorer-fas',
'uploadUrl': "https://devplatform.zhengzai.tv/platform/basicServices/alOss/upload",
"uploadExtraData": {
"pathName" : "banner",
"buckType" : 1
},
autoReplace: true,
showCaption: false,
showPreview: false,
showRemove: false,
showUpload: false,
showCancel: false,
showClose: false,
autoReplace: true,
dropZoneTitle: "请上传文件",
maxFileCount: 1
}).on("filebatchselected", function (event, files) { //默认上传
$(this).fileinput("upload");
})
.on("fileuploaded", function (event, data) { //上传回调事件
showPicture = 'https://img.zhengzai.tv/' + data.response.data.ossPath;
$("#viewImg").attr('src', showPicture)
})
function create() {
/**
* let activityType = ''; // 活动类型
let timeType = ''; // 活动时间类型
let startTime = ''; // 开始时间
let endTime = ''; // 结束时间
let activityRule = ''; // 活动规则
let courierType = ''; // 快递类型
let courierMoney = ''; // 快递费用
*
*
* {
prizeTitle: "",
prizeImg: "",
winnersNum: "",
send: "",
prizeType: "",
winningProbability: "",
residue: "",
prizeNum: ""
},
* **/
console.log(!$("#ActivityName").val(),!$("#ActivityType").val(),!$("#courierMoney").val(),!showPicture,!$("#integral").val(),!$("#activityRule").val(),$("#viewImg").attr('src'))
if (!$("#ActivityName").val() || !$("#ActivityType").val() || !$("#courierMoney").val() || !showPicture || !$("#integral").val() || !$("#activityRule").val() || !$("#viewImg").attr('src')) {
return layer.msg('请将必填信息填写完整！')
}
if (timeType == 2) {
console.log(timeType, '?????')
if (!$("#startTime").val() || !$("#endTIme").val()) {
return layer.msg('请选择时间！')
}
}
let flag = false;
console.log($("#prizeTitle"+1).val())
data = data.map((item,index)=>{
if (!$("#prizeTitle"+index).val()||!$("#showPic"+index).attr('src')||!$("#winnersNum"+index).val()||!$("#prizeType"+index).val()||!$("#winningProbability"+index).val()||!$("#prizeNum"+index).val()) {
flag = true
} else {
item.prizeTitle = $("#prizeTitle"+index).val();
item.prizeImg = $("#showPic"+index).attr('src');
item.winnersNum = $("#winnersNum"+index).val();
item.prizeType = $("#prizeType"+index).val();
item.winningProbability = $("#winningProbability"+index).val();
item.prizeNum = $("#prizeNum"+index).val();
}
return item;
})
if (flag) {
return layer.msg('请将表格内容填写完整！')
}
let datas = {
activityImg: showPicture,
activityNum: $("#integral").val(),
activityRules: $("#activityRule").val(),
activityTitle: $("#ActivityName").val(),
activityType: 1,
expressFeeType: courierType,
integralActivityId: '',
endTime: $("#endTime").val(),
isOnline: online,
prizeList: data,
startTime: $("#startTime").val(),
timeType: timeType
}
$.ajax({
type: 'post',
url: '/sweet/integralActivity/create',
contentType: "application/json;charset=UTF-8",
data: JSON.stringify(datas),
success:function(res) {
layer.msg('' + res);
if (res.code != undefined && res.code != web_status.SUCCESS) {
$.modal.alertWarning(res.msg);
return [];
} else if (res.code == web_status.SUCCESS) {
$.operate.successTabCallback(res);
closeItem();
}
}
})
console.log(data, $("#" + table.options.id).bootstrapTable('getData'),$("#type0").val(), '???')
}
</script>
</body>
</html>
\ No newline at end of file
liquidnet-bus-client/liquidnet-client-admin/liquidnet-client-admin-web/src/main/resources/templates/zhengzai/sweet/integralActivity/list.html
View file @ d825f921
......@@ -26,7 +26,7 @@
</div>
<div class="btn-group-sm" id="toolbar" role="group">
<a class="btn btn-success" onclick="$.operate.add()" shiro:hasPermission="sweet:integralActivity:create">
<a class="btn btn-success" onclick="$.operate.addTab(1)" shiro:hasPermission="sweet:integralActivity:create">
<i class="fa fa-plus"></i> 添加
</a>
</div>
......@@ -52,7 +52,7 @@
$(function () {
var options = {
url: prefix + "/list",
updateUrl: prefix + "/formView", // /update/{id}
updateUrl: prefix + "/formView?id={id}", // /update/{id}
createUrl: prefix + "/formView",
detailUrl: "/sweet/IntegralActivityDraw/listView/{id}",
exportUrl: "/sweet/IntegralActivityDraw/export",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment