huahuibao/app/admin/views/article/add.php

<?php use common\widgets\UeditorWidget; ?>

<script src="/js/mobiscroll/mobiscroll.core-2.5.2.js" type="text/javascript"></script>
<script src="/js/mobiscroll/mobiscroll.core-2.5.2-zh.js" type="text/javascript"></script>
<link href="/css/mobiscroll/mobiscroll.core-2.5.2.css" rel="stylesheet" type="text/css" />
<link href="/css/mobiscroll/mobiscroll.animation-2.5.2.css" rel="stylesheet" type="text/css" />
<script src="/js/mobiscroll/mobiscroll.datetime-2.5.1.js" type="text/javascript"></script>
<script src="/js/mobiscroll/mobiscroll.datetime-2.5.1-zh.js" type="text/javascript"></script>
<!-- S 可根据自己喜好引入样式风格文件 -->
<script src="/js/mobiscroll/mobiscroll.android-ics-2.5.2.js" type="text/javascript"></script>
<link href="/css/mobiscroll/mobiscroll.android-ics-2.5.2.css" rel="stylesheet" type="text/css" />
<!-- E 可根据自己喜好引入样式风格文件 -->
			            
			<div class="page-title">
				
				<div class="title-env">
					<h1 class="title">添加文章</h1>
				</div>

					<div class="breadcrumb-env">
						<ol class="breadcrumb bc-1">
							<li>
								<a href="/"><i class="fa-home"></i>Home</a>
							</li>
							<li>
								<a href="javascript:void(0)">商城管理</a>
							</li>
							<li class="active">
								<strong>文章管理</strong>
							</li>
						</ol>
					</div>
				</div>

			<div class="row">
				<div class="col-sm-12">
					
					<div class="panel panel-default">

						<div class="panel-body">
							
							<form role="form" class="form-horizontal">
								
								<div class="form-group">
									<label class="col-sm-2 control-label">*标题：</label>
									
									<div class="col-sm-10">
										<input type="text" class="form-control" name="title" placeholder="">
										<p></p>
									</div>
								</div>
								
								<div class="form-group">
									<label class="col-sm-2 control-label">阅读量：</label>
									<div class="col-sm-10">
										<input type="tel" class="form-control" name="viewNum" placeholder="选填，默认为0，实际阅读量会在此基础上累加">
										<p></p>
									</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-1">创建时间：</label>
									
									<div class="col-sm-10">
										<input type="text" id="appDateTime" class="form-control" name="createTime" placeholder="请选择，没有选择默认为当前时间">
										<p></p>
									</div>
								</div>

								<div class="form-group-separator"></div>

								<div class="form-group">
									<label class="col-sm-2 control-label">图片：</label>
									<div>
										<div style="margin-left:16px;width:113px;height:174px;float:left;display:inline-block">
											封面[ 手机竖拍 ]：
											<div style="width:97px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="/images/nopicture.png" name="cover" style="width:97px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:;" class="a-upload">
											<input type="file" id="cover" accept="image/*" value="" />选择图片
											</a>
											<input type="hidden" name="cover" value="" />
										</div>

										<div style="clear:both;margin-left:228px;"><p></p></div>
									</div>								
								</div>
								<div class="form-group-separator"></div>							
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-3">*摘要：</label>
									<div class="col-sm-10">
										<textarea name="summary" class="form-control"></textarea>
										<p></p>
									</div>
								</div>
								<div class="form-group-separator"></div>							
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-3">*内容：</label>
									<div class="col-sm-10">
										
										<?= UeditorWidget::widget(['name' => 'content','content' => '']); ?>
										<p></p>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group">
									<label class="col-sm-2 control-label">*所属分类</label>
									<div class="col-sm-10">
									<div  style="border:1px solid #CCC;padding-left:8px;border-radius:4px;">
<?php
if(!empty($categoryList)){
	foreach($categoryList as $clKey => $clVal){
		if(!empty($clVal['child'])){
			echo '<label class="checkbox-inline" style="padding-left:0px;">'.$clVal['categoryName'].'</label><p>';
			foreach($clVal['child'] as $ccKey => $ccVal)
			{
echo '&nbsp;&nbsp;&nbsp;|-- <label class="checkbox-inline"><input name="categoryId" value="'.$ccVal['id'].'" type="checkbox">'.$ccVal['categoryName'].'</label>';
			}
			echo '</p>';
		}else{
echo '<label class="checkbox-inline"><input name="categoryId" value="'.$clVal['id'].'" type="checkbox">'.$clVal['categoryName'].'</label><p></p>';
		}
	}
}
?>
							</div>
							<p name="categoryIdMention"></p>
							</div>
								</div>
								<div class="form-group">
									<label class="col-sm-2 control-label" for="field-4">*文章状态</label>
									<div class="col-sm-10">									
										<div class="radio-inline">
											<label>
												<input type="radio" name="status" checked value="0">
												上线
											</label>
										</div>
										<div class="radio-inline">
											<label>
												<input type="radio" name="status" value="1">
												下线
											</label>
										</div>
									</div>
								</div>
								<div class="form-group-separator"></div>
								<div class="form-group" style="text-align:center;">
									<button type="button" onclick="addSubmit('click',this)" class="btn btn-info btn-single">确认</button>
									<button type="button" onclick="history.go(-1);" class="btn btn-info btn-single">返回</button>
								</div>								
							</form>						
						</div>
					</div>
				</div>
			</div>

<!-- footer -->
<?php 
use backend\widgets\FooterWidget;
?>
<?= FooterWidget::widget()?>
<!-- footer -->

<script src="/js/lrz/dist/lrz.bundle.js"></script>

<script>

//添加文章验证流程
var title = $("input[name=title]");
var viewNum = $("input[name=viewNum]");
var createTime = $("input[name=createTime]");
var cover = $(":input[name=cover]");
var summary = $("textarea[name=summary]");
var content = $("textarea[name=content]");

var needValidate = [title,summary];

//添加文章验证流程
addSubmit();
function addSubmit()
{
	
	setStats(title, '请填写文章标题', function(val, mess){
		var info=[false, mess];
		if(isNotNull(val) == false){
			info[1] = '请填写文章标题';
		}else if(getLength(val) >=0 && getLength(val) <=40){
			info[0] = true;
			info[1] = '填写正确';					
		}else{
			info[0] = false;
		}
		return info;
	});


	setStats(summary, '请填写摘要', function(val, mess){
		var info=[false, mess];
		if(getLength(val) > 0){
			info[0] = true;
			info[1] = '填写正确';					
		}else{
			info[1] = '请填写摘要';
		}
		return info;
	});
	
	setStats(content, '请填写简介！', function(val, mess){
		var info=[false, mess];
		if(getLength(val) > 0){
			info[0] = true;
			info[1] = '填写正确';					
		}else{
			info[1] = '请填写简介！';
		}
		return info;
	});
	
	if(arguments[0] == 'click'){//用户点击提交

		var submitButton = arguments[1];//获取提交按钮对象
		var submitButtonObj = $(submitButton);
		if(submitButtonObj.attr('submitStatus') == 'yes'){
			xhPopMsg('提交中……，请稍等',1000);
			return;//表单已经提交成功，不允许重复提交
		}

		var verifyStatus = true;

		for(var m=0;m<needValidate.length;m++){
			var singleObj = needValidate[m];
			if(singleObj.attr('addStatus') == undefined){
				singleObj.blur();
			}
			if(singleObj.attr('addStatus') == 'no'){
				verifyStatus = false;
				continue;
			}
		}
		
		//简介的判断
//		if(isNotNull(content.val()) == false){
//			content.siblings('p').addClass('help-error-mention').html('请填写简介哈');
//			verifyStatus = false;
//		}else{
//			content.siblings('p').removeClass('help-error-mention').html('');
//		}

		//确认有没选择分类
		var checkNum = $(":input[name=categoryId]:checked").length;
		if(parseInt(checkNum) < 1){
			$("p[name=categoryIdMention]").addClass('help-error-mention').html('请选择分类');
			verifyStatus = false;
		}else{
			$("p[name=categoryIdMention]").removeClass('help-error-mention').html('');
		}

		if(verifyStatus){

			var statusValue = $('input:radio[name=status]:checked').val();//文章状态

			var categoryVal = '';
			$(":input[name=categoryId]:checked").each(function(){
				categoryVal += $(this).val()+',';
			});
			var data = "title="+title.val()+"&viewNum="+viewNum.val();
			data += "&cover="+cover.val()+"&createTime="+createTime.val();
			data += "&content="+content.val()+"&summary="+summary.val();
			data += "&_csrf=<?= Yii::$app->request->csrfToken ?>&status="+statusValue+"&categoryId="+categoryVal;
			
			$.ajax({type:"POST",url:'/article/save-add',data:data,dataType:'json',async:false,success:function(data){
					if(data.code == 'A0001'){
						submitButtonObj.attr('submitStatus','yes');
						xhPopMsg(data.msg,1300);//调用定时浮层  XXX毫秒后消失
						setTimeout(function(){
							window.location.href='/article/list';
						},1400);
					}
				}
			});
		}
	}
}

function setStats(obj,mess,check)
{
	obj.focus(function(){
		$(this).removeAttr('addStatus');
		$(this).siblings('p').removeClass('help-error-mention').html('');
		$(this).parent().parent().removeClass("has-success").removeClass('has-error');
	});

	obj.blur(function(){
		var objVal = obj.val();
		var info = check(objVal,mess);
		if(info[0]){
			$(this).attr('addStatus','yes');
			$(this).siblings('p').removeClass('help-error-mention').html('');
			$(this).parent().parent().addClass("has-success").removeClass("has-error");
		}else{
			$(this).attr('addStatus','no');
			$(this).siblings('p').addClass('help-error-mention').html(info[1]);
			$(this).parent().parent().addClass("has-error").removeClass("has-success");
		}
	});
}

document.querySelector('#cover').addEventListener('change', function () {
	//参数说明 https://github.com/think2011/localResizeIMG/wiki/2.-%E5%8F%82%E6%95%B0%E6%96%87%E6%A1%A3
	lrz(this.files[0],{
		width: 500,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		fieldName:'Filedata',//文件名
		quality:1,//图片质量 0.1 - 1
		})
        .then(function (rst) {
            // 处理成功会执行
        	rst.formData.append('fileLen', rst.fileLen);
        	rst.formData.append('_csrf', '<?= Yii::$app->request->csrfToken?>');
        	$.ajax({
        		//url: '/main/img', // 这个地址做了跨域处理，可以用于实际调试
        	    url: '/upload/upload-file', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=cover]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='cover']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});


//选择创建时间
$(function () {
	var currYear	= (new Date()).getFullYear();	
	var opt			={};
	opt.date		= {preset : 'date'};
	opt.datetime	= {preset : 'datetime'};
	opt.time		= {preset : 'time'};
	opt.default		= {
		theme: 'android-ics light', //皮肤样式
        display: 'modal', //显示方式 
        mode: 'scroller', //日期选择模式
		lang:'zh',
		dateFormat: 'yy-mm-dd',
        showNow: true,
        nowText: "今天",
        startYear:currYear - 10, //开始年份
        endYear:currYear + 10 //结束年份
	};
  	var optDateTime = $.extend(opt['datetime'], opt['default']);
    $("#appDateTime").mobiscroll(optDateTime).datetime(optDateTime);
});

</script>