樣式
![]()
代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>....</title>
<link rel="stylesheet" rev="stylesheet" href="http://www.qubaobei.com/badmin/city/style/style.css?v=4" type="text/css" />
<link rel="stylesheet" href="//www.qubaobei.com/kadmin/zlmm/static/admin/lib/layui/css/layui.css" id="layui">
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>添加新期數</legend></fieldset>
<div style="margin-top: 20px;">
<form class="layui-form" action="" method="post">
<div class="layui-form-item">
<div class="layui-inline" >
<label class="layui-form-label">期數</label>
<div class="layui-input-inline" style="width: 100px">
<input lay-verify="required|number" name="act_num" id="act_num" placeholder="請輸入期數" autocomplete="off" class="layui-input" style="width: 100px">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline" >
<label class="layui-form-label">帖子ID</label>
<div class="layui-input-inline" style="width: 100px">
<input lay-verify="required|number" name="post_id" id="post_id" placeholder="請輸入id" autocomplete="off" class="layui-input" style="width: 100px">
</div>
<div class="layui-input-inline">
<input type="text" id="post_title" placeholder="自動匹配" readonly="readonly" autocomplete="off" class="layui-input" style="width: 390px">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline" >
<label class="layui-form-label">頂部標題</label>
<div class="layui-input-inline">
<input type="text" lay-verify="required" name="title" placeholder="活動頁頂部標題" autocomplete="off" class="layui-input" style="width: 500px">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline" >
<label class="layui-form-label">分享文案</label>
<div class="layui-input-inline">
<input type="text" lay-verify="required" name="share_txt" placeholder="分享文案" autocomplete="off" class="layui-input" style="width: 500px">
</div>
</div>
</div>
<!-- <div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">話題用戶</label>
<div class="layui-input-inline" style="width: 100px">
<input lay-verify="required|number" id="user_id" name="user_id" autocomplete="off" style="width: 100px" class="layui-input" value="" placeholder="user_id">
</div>
<div class="layui-input-inline">
<input type="text" readonly="readonly" id="nickname" placeholder="自動匹配" class="layui-input" style="width: 150px" value="">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline" >
<label class="layui-form-label">話題標題</label>
<div class="layui-input-inline">
<input type="text" lay-verify="required" name="talk_title" placeholder="活動頁話題欄標題" autocomplete="off" class="layui-input" style="width: 500px">
</div>
</div>
</div> -->
<div class="layui-form-item layui-form-text">
<label class="layui-form-label">本期簡介</label>
<div class="layui-input-block">
<textarea lay-verify="required" name="description" placeholder="請輸入內容" class="layui-textarea" style="width: 500px"></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">背景圖</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="bg_pic_upload">圖片上傳</button>
<blockquote class="" style="margin-top: 5px;">
<div class="layui-upload-list" id="bg_pic"></div>
</blockquote>
</div>
<div class="layui-inline" style="display: none;">
<label class="layui-form-label">背景圖</label>
<div class="layui-upload-list">
<input type="text" id="bg_pic_url" lay-verify="verify_bg_pic" name="bg_pic_url" value="" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">介紹圖</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="intro_pic_upload">圖片上傳</button>
<blockquote class="" style="margin-top: 5px;">
<div class="layui-upload-list" id="intro_pic"></div>
</blockquote>
</div>
<div class="layui-inline" style="display: none;">
<label class="layui-form-label">介紹圖</label>
<div class="layui-upload-list">
<input type="text" id="intro_pic_url" lay-verify="verify_intro_pic" name="intro_pic_url" value="" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">分享圖</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="share_pic_upload">圖片上傳</button>
<blockquote class="" style="margin-top: 5px;">
<div class="layui-upload-list" id="share_pic"></div>
</blockquote>
</div>
<div class="layui-inline" style="display: none;">
<label class="layui-form-label">分享圖</label>
<div class="layui-upload-list">
<input type="text" id="share_pic_url" lay-verify="verify_share_pic" name="share_pic_url" value="" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">輪播圖</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="car_pic_upload">圖片上傳</button>
<blockquote class="" style="margin-top: 5px;">
<div class="layui-upload-list" id="car_pic"></div>
</blockquote>
</div>
<div class="layui-inline" style="display: none;">
<label class="layui-form-label">輪播圖</label>
<div class="layui-upload-list">
<input type="text" id="car_pic_url" lay-verify="verify_car_pic" name="car_pic_url" value="" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">音頻文件</label>
<div class="layui-input-block">
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" id="mp3_upload">音頻上傳</button>
<div class="layui-inline" >
<div class="layui-input-inline">
<audio controls="controls" id="mp3Btn">
</audio>
<input type="text" lay-verify="verify_mp3" name="mp3_url" id="mp3_url" readonly="readonly" placeholder="音頻地址" autocomplete="off" class="layui-input" style="width: 500px;display: none;">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="submit">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
<script src="layui/layui.js"></script>
<script>
layui.use(['element','jquery','form','upload'], function () {
var $ = layui.jquery,
upload = layui.upload,
form = layui.form;
var url = 'sub/yu.php';
//bg_pic上傳
upload.render({
elem: '#bg_pic_upload'
,url: url+'?method=upload&type=images'
,method: 'get'
,acceptMime: 'image/*'
,done: function(res,index){
if(res.code){
$('#bg_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" οnclick="previewImg(this)">')
$('#bg_pic_url').val(res.url)
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
//intro_pic上傳
upload.render({
elem: '#intro_pic_upload'
,url: url+'?method=upload&type=images'
,method: 'get'
,acceptMime: 'image/*'
,done: function(res,index){
if(res.code){
$('#intro_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" οnclick="previewImg(this)">')
$('#intro_pic_url').val(res.url)
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
//share_pic上傳
upload.render({
elem: '#share_pic_upload'
,url: url+'?method=upload&type=images'
,method: 'get'
,acceptMime: 'image/*'
,done: function(res,index){
if(res.code){
$('#share_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" οnclick="previewImg(this)">')
$('#share_pic_url').val(res.url)
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
//share_pic上傳
upload.render({
elem: '#car_pic_upload'
,url: url+'?method=upload&type=images'
,method: 'get'
,acceptMime: 'image/*'
,done: function(res,index){
if(res.code){
$('#car_pic').append('<img src="'+ res.url +'" alt="" width="100" style="float:left;margin-right:5px;" οnclick="previewImg(this)">')
$('#car_pic_url').val(res.url)
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
//音頻上傳
upload.render({
elem: '#mp3_upload'
,url: url+'?method=upload&type=audio'
,method: 'get'
,accept: 'audio'
,acceptMime: 'audio/mp3'
,done: function(res,index){
console.log(res);
if(res.code){
$('#mp3Btn').append('<source src="'+ res.url +'" type="audio/mpeg">')
$('#mp3_url').val(res.url);
}else{
layer.msg(res.msg, {icon: 2});
}
}
});
//失去焦點事件
$('#post_id').blur(function(){
var post_id = $('#post_id').val();
if(post_id){
var data = {'method':'get_bbs_post_info','post_id':post_id};
asynData(url,data,'post_title');
}
});
$('#user_id').blur(function(){
var user_id = $('#user_id').val();
if(user_id){
var data = {'method':'get_user_info','user_id':user_id};
asynData(url,data,'nickname');
}
});
function asynData(url,data,t){
$.post(
url,
data,
function(data){
if(data.ret == 1){
if(t != 'nickname' && t != 'post_title'){
t.val(data.msg);
}else{
$('#'+t).val(data.msg);
}
}else{
var index = layer.alert(data.msg,{icon:2},function(){ layer.close(index);});
}
},'json');
}
form.verify({
verify_intro_pic: function(value, item){ //value：表單的值、item：表單的DOM對象
if(value==''){
return '介紹圖未上傳';
}
},
verify_bg_pic: function(value, item){ //value：表單的值、item：表單的DOM對象
if(value==''){
return '背景圖未上傳';
}
},
verify_share_pic: function(value, item){ //value：表單的值、item：表單的DOM對象
if(value==''){
return '分享圖未上傳';
}
},
verify_car_pic: function(value, item){ //value：表單的值、item：表單的DOM對象
if(value==''){
return '分享圖未上傳';
}
},
verify_mp3: function(value, item){ //value：表單的值、item：表單的DOM對象
if(value==''){
return '音頻資源未上傳';
}
},
});
//監聽提交
form.on('submit(submit)', function(data){
data.field.method = 'insert_act_yu';
//var da = JSON.stringify(data.field);
var da = data.field;
submitR(da);
return false;
});
function submitR(da){
console.log(da);
$.post(
url,
da,
function(obj){
console.log(obj);
if(obj.ret == 1){
var index = layer.msg('添加成功',{time: 1000},function(){
layer.close(index);
// 獲得frame索引
var p_index = parent.layer.getFrameIndex(window.name);
parent.tableReload();
parent.layer.close(p_index);
});
}else{
var index = layer.alert(obj.msg,{icon:2},function(){ layer.close(index);});
}
},'json').error(function(ooo) { console.log(JSON.stringify(ooo)); });
}
//回覆者id獲取信息
window.userData=function(th){
var user_id = $(th).val();
var reply_u = $(th).parent().next().children();
if(user_id){
var data = {'method':'get_user_info','user_id':user_id};
asynData(url,data,reply_u);
}
}
});
</script>
