<!DOCTYPE html>
|
<html class="x-admin-sm">
|
|
<head>
|
<meta charset="UTF-8">
|
<title>欢迎页面-X-admin2.2</title>
|
<meta name="renderer" content="webkit">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
|
<link rel="stylesheet" href="./css/font.css">
|
<link rel="stylesheet" href="./css/xadmin.css">
|
<script type="text/javascript" src="./lib/layui/layui.js" charset="utf-8"></script>
|
<script type="text/javascript" src="./js/xadmin.js"></script>
|
<script type="text/javascript" src="./js/vue.min.js"></script>
|
<script src="js/http.js" type="text/javascript" charset="utf-8"></script>
|
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
<!--[if lt IE 9]>
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
|
<style>
|
.poster {
|
max-width: 300px;
|
max-height: 300px;
|
}
|
</style>
|
</head>
|
<body>
|
<div class="layui-fluid" id="main">
|
|
|
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
|
<ul class="layui-tab-title">
|
<li class="layui-this">活动内容</li>
|
<li>活动奖品</li>
|
<li>开奖设置</li>
|
<li>广告设置</li>
|
</ul>
|
<div class="layui-tab-content">
|
<div class="layui-tab-item layui-show">
|
<div class="layui-row">
|
<form class="layui-form">
|
<div class="layui-form-item">
|
<label for="L_name" class="layui-form-label">
|
<span class="x-red">*</span>活动名称</label>
|
<div class="layui-input-inline">
|
<input type="text" id="L_name" name="name" lay-verify="username|required"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
<div class="layui-form-item">
|
<label for="L_appName" class="layui-form-label">
|
<span class="x-red">*</span>活动海报</label>
|
<div class="layui-input-inline">
|
|
<div class="layui-upload">
|
<button type="button" class="layui-btn" id="test1">选择图片</button>
|
<div class="layui-upload-list">
|
<img class="layui-upload-img poster" id="poster">
|
</div>
|
</div>
|
|
</div>
|
</div>
|
|
<div class="layui-form-item">
|
<label for="L_desc" class="layui-form-label">
|
活动简介</label>
|
<div class="layui-input-inline">
|
<textarea id="L_desc" name="desc" required="" lay-verify="desc"
|
autocomplete="off" class="layui-textarea"></textarea></div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>最大参与人数</label>
|
<div class="layui-input-inline">
|
<input type="text" name="maxPersonCount" required="" lay-verify="required|number"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>预计开始时间</label>
|
<div class="layui-input-inline">
|
<input type="text" name="preStartTime" required=""
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
预计结束时间</label>
|
<div class="layui-input-inline">
|
<input type="text" name="preFinishTime"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
预计开奖时间</label>
|
<div class="layui-input-inline">
|
<input type="text" name="preOpenTime"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
|
<div class="layui-form-item">
|
<label for="L_remarks" class="layui-form-label"></label>
|
<button class="layui-btn layui-btn-radius layui-btn-normal" id="save"
|
lay-filter="save-activity" lay-submit="">保存
|
</button>
|
</div>
|
</form>
|
</div>
|
|
</div>
|
<div class="layui-tab-item">
|
|
<!--奖品列表 -->
|
|
<form class="layui-form award-form">
|
<div v-for="(item,index) in tempAwardsList">
|
|
|
<div class="layui-form-item">
|
<label for="L_name" class="layui-form-label">
|
<span class="x-red">*</span>奖品名称</label>
|
<div class="layui-input-inline">
|
<input type="text" id="L_name" placeholder="请输入奖品名称" name="name" lay-verify="username|required"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>奖品数量</label>
|
<div class="layui-input-inline">
|
<input type="text" name="maxPersonCount" placeholder="请输入奖品数量" required="" lay-verify="required|number"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>奖品类型</label>
|
<div class="layui-input-inline">
|
<select name="city" lay-verify="required">
|
<option value=""></option>
|
<option value="0">支付宝现金红包</option>
|
</select>
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>红包总金额</label>
|
<div class="layui-input-inline">
|
<input type="text" name="maxPersonCount" placeholder="请输入红包总金额" required="" lay-verify="required|number"
|
autocomplete="off" class="layui-input"></div>
|
</div>
|
|
|
<div class="layui-form-item">
|
<label class="layui-form-label">
|
<span class="x-red">*</span>中奖方式</label>
|
<div class="layui-input-inline">
|
<select name="city" lay-verify="required">
|
<option value=""></option>
|
<option value="0">随机</option>
|
<option value="0">均分</option>
|
</select>
|
</div>
|
</div>
|
|
|
<i @click="delAward(index)" class="layui-icon"></i>
|
|
<hr class="layui-bg-green">
|
|
</div>
|
|
|
<i v-on:click="addAward" class="layui-btn">添加奖项</i>
|
|
<div class="layui-form-item">
|
<label for="L_remarks" class="layui-form-label"></label>
|
<button class="layui-btn layui-btn-radius layui-btn-normal"
|
lay-filter="save-awards" lay-submit="">保存
|
</button>
|
</div>
|
</form>
|
</div>
|
<div class="layui-tab-item">开奖设置</div>
|
<div class="layui-tab-item">广告设置</div>
|
</div>
|
|
<button class="layui-btn layui-btn-warm layui-btn-lg" id="submit" lay-submit="">立即提交</button>
|
</div>
|
|
|
</div>
|
<script>
|
|
var app = new Vue({
|
el: '#main',
|
data: {
|
poster: '',
|
activity: null,
|
awardsList: [],
|
tempAwardsList: [{}],
|
openInfo: null,
|
adInfo: null,
|
uploadPosterUrl: '/admin/upload/image?from=activity'
|
|
},
|
watch: {
|
tempAwardsList: function () {
|
setTimeout(function () {
|
layui.use(['form'], function () {
|
form.render();
|
})
|
});
|
}
|
},
|
methods: {
|
//添加
|
requestAdd: function () {
|
//组装数据
|
if (this.data.awardsList.length == 0) {
|
return;
|
}
|
if (this.data.poster == null || this.data.poster.length == 0) {
|
return;
|
}
|
|
var params = {
|
activity: this.data.activity,
|
awardsList: this.data.awardsList,
|
openInfo: this.data.openInfo,
|
adInfo: this.data.adInfo,
|
}
|
|
|
this.activity.poster = this.data.poster;
|
//发异步，把数据提交给php
|
ksapp.post('/admin/api/app/add', params, function (res) {
|
if (res.code == 0) {
|
layer.alert("增加成功", {
|
icon: 6
|
},
|
function () {
|
//关闭当前frame
|
xadmin.close();
|
// 可以对父窗口进行刷新
|
xadmin.father_reload();
|
});
|
} else {
|
layer.msg(res.msg);
|
}
|
|
}, function (res) {
|
});
|
},
|
//图片上传成功
|
posterUploadSuccess: function (url) {
|
//获取表单的数据
|
app.data.poster = url;
|
app.requestAdd();
|
},
|
|
addAward: function () {
|
this.tempAwardsList.push({});
|
},
|
delAward: function (index) {
|
this.tempAwardsList.splice(index, 1);
|
},
|
//提交
|
submit: function () {
|
$("#poster").trigger("click");
|
}
|
}
|
});
|
|
|
layui.use('upload', function () {
|
var $ = layui.jquery
|
, upload = layui.upload;
|
|
//普通图片上传
|
var uploadInst = upload.render({
|
elem: '#test1',
|
auto: false,
|
url: app.data.uploadPosterUrl,
|
field: 'image',
|
bindAction: '#poster'
|
, choose: function (obj) {
|
//预读本地文件示例，不支持ie8
|
obj.preview(function (index, file, result) {
|
$('#poster').attr('src', result); //图片链接（base64）
|
});
|
},
|
done: function (res, index, upload) { //上传后的回调
|
alert("图片上传成功")
|
app.posterUploadSuccess();
|
},
|
error: function () {
|
layer.alert("图片上传失败", {icon: 6}, null);
|
}
|
});
|
});
|
|
|
//图片上传成功
|
|
var form = null;
|
layui.use(['form', 'layer', 'jquery'],
|
function () {
|
$ = layui.jquery;
|
form = layui.form;
|
layer = layui.layer;
|
|
//自定义验证规则
|
form.verify({
|
username: function (value) {
|
if (value.length < 5) {
|
return '活动名称至少得5个字符啊';
|
}
|
},
|
appcode: [/^([A-Za-z0-9]|\-|_)+$/, '应用标识只能包含 数字、英文字符、_ 、-'],
|
desc: function (value) {
|
if (value != null && value.length > 128) {
|
return '简介最大为128个字符';
|
}
|
},
|
remarks: function (value) {
|
if (value != null && value.length > 128) {
|
return '备注最大为128个字符';
|
}
|
},
|
|
});
|
|
//监听提交
|
//保存活动
|
form.on('submit(save-activity)',
|
function (data) {
|
app.data.activity = data.field;
|
console.log(data.field);
|
return false;
|
});
|
|
//保存奖项
|
form.on('submit(save-awards)',
|
function (data) {
|
alert(JSON.stringify(data.field));
|
app.data.activity = data.field;
|
console.log(data.field);
|
return true;
|
});
|
|
});</script>
|
</body>
|
|
</html>
|
