huahuibao/app/platform/views/goods/add.php

<?php use common\widgets\UeditorWidget; ?>
		<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" id="goods-data-form">
								<input type="hidden" name="_csrf" value="<?= Yii::$app->request->csrfToken ?>" />

								<div class="form-group">
									<label class="col-sm-2 control-label">*名称：</label>
									<div class="col-sm-10">
										<input type="text" class="form-control" name="goodsName" 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="price" 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="sold" placeholder="可自定义销售量，实际销售量会在此基础上累加">
										<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" class="form-control" name="material" placeholder="">
										<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" class="form-control" name="representative" 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">
											封面[550x550]：
											<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="margin-left:16px;width:157px;height:174px;float:left;display:inline-block;float:left;">
											图Ⅰ[800x800]：
											<div style="width:141px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="/images/nopicture.png" name="shopImg1" style="width:128px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:;" class="a-upload">
											<input type="file"  accept="image/*"  id="shopImg1" value="" />选择图片
											</a>
											<input type="hidden" name="shopImg1" value="" />
										</div>

										<div style="margin-left:16px;width:157px;height:174px;float:left;display:inline-block;float:left;">
											图Ⅱ[800x800]：
											<div style="width:141px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="/images/nopicture.png" name="shopImg2" style="width:128px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:;" class="a-upload">
											<input type="file"  accept="image/*"  id="shopImg2" value="" />选择图片
											</a>
											<input type="hidden" name="shopImg2" value="" />
										</div>

										<div style="margin-left:16px;width:157px;height:174px;float:left;display:inline-block;float:left;">
											图Ⅲ[800x800]：
											<div style="width:141px;height:110px;display:inline-block;margin-bottom:3px;">
											<img src="/images/nopicture.png" name="shopImg3" style="width:128px;height:110px;" class="img-thumbnail" />
											</div>
											<a href="javascript:;" class="a-upload">
											<input type="file"  accept="image/*"  id="shopImg3" value="" />选择图片
											</a>
											<input type="hidden" name="shopImg3" value="" />
										</div>
										<div style="clear:both;margin-left:228px;"><p></p></div>
									</div>								
								</div>

                                <div class="form-group-separator"></div>
								
								<div class="form-group price-area">
                                    <label class="col-sm-2 control-label">价格选项：</label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-2">
                                            <input type="radio" name="priceType" data-type='single' value='single' checked="checked"> 单种价格
                                        </div>
                                        <div class="col-sm-2">
                                            <input type="radio" name="priceType" data-type='multi' value='multi'> 多种价格
                                        </div>
                                    </div>
                                </div>

                                <div class="form-group">
                                    <label class="col-sm-2 control-label">价格：</label>
                                    <div class="single-price-area">
                                        <div class="col-sm-10" style="color:#555">
                                            <div class="form-group">
                                                <div class="col-sm-10">
                                                    <input type="text" name="price" class="form-control" value="" >
                                                    <p></p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="multi-price-area" style="display:none; color:#555;">
                                        <div class="col-sm-10">
                                            <div class="form-group">
                                                <div class="col-sm-10">
                                                    名称：<input type="text" name="goodTitle[]" class="form-control" style="width:300px;display:inline-block;" placeholder="">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;价格：<input type="text" name="multiPrice[]" class="form-control" style="width:100px;display:inline-block;" placeholder="">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;<img src="" alt="">
                                                    &nbsp;&nbsp;<button type="button" class="btn btn-sm btn-white" style="display:none;margin-top:5px;">上传图片</button>
                                                </div>

                                            </div>
                                            <div class="form-group">
                                                <div class="col-sm-10">
                                                    名称：<input type="text" name="goodTitle[]" class="form-control" style="width:300px;display:inline-block;" placeholder="">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;价格：<input type="text" name="multiPrice[]" class="form-control" style="width:100px;display:inline-block;" placeholder="">
                                                    &nbsp;&nbsp;&nbsp;&nbsp;<img src="" alt="">
                                                    &nbsp;&nbsp;<button type="button" class="btn btn-sm btn-white" style="display:none;margin-top:5px;">上传图片</button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                        <div class="col-sm-10">
                                            <label class="col-sm-2 control-label"></label>
                                            <div class="col-sm-8" style="margin-left: 35px;">
                                                <button type="button" class="btn btn-turquoise add-price-btn"><li class="fa-plus"></li> 增加价格</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group price-area">
                                    <label class="col-sm-2 control-label">运费：</label>
                                    <div class="col-sm-10">
                                        <div class="col-sm-2">
                                            <input type="radio" name="isCharge" value='1' checked="checked"> 按距离收费
                                        </div>
                                        <div class="col-sm-2">
                                            <input type="radio" name="isCharge" value='0'> 免运费
                                        </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">
										<?= 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 category-area">
    									<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-separator"></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>
//alert($(".form-group .category-id").length);

//添加商品验证流程
var goodsName = $("input[name=goodsName]");
var price = $("input[name=price]");
var sold = $("input[name=sold]");
var material = $("input[name=material]");
var representative = $(":input[name=representative]");
var cover = $(":input[name=cover]");
var shopImg1 = $(":input[name=shopImg1]");
var shopImg2 = $(":input[name=shopImg2]");
var shopImg3 = $(":input[name=shopImg3]");
var content = $("textarea[name=content]");

var needValidate = [goodsName,price,sold,material,representative];

//添加商品验证流程
addSubmit();
function addSubmit()
{
	var verifyStatus = true;

	setStats(goodsName, '请填写商品名称', function(val, mess){
		var info=[false, mess];
		if(val.length <= 0){
			info[1] = '请填写商品名称';
		}else if(getLength(val) >=0 && getLength(val) <=40){
			info[0] = true;
			info[1] = '填写正确';					
		}else{
			info[0] = false;
		}
		return info;
	});

	var priceType = $('.price-area input:radio[name=priceType]:checked').attr('data-type');
    if(priceType == 'single'){
        setStats(price, '请填写价格', function(val, mess){
            var info=[false, mess];
            if(isNotNull(val) == false || isNaN(val)){
                info[1] = '请填写价格';
            }else{
                info[0] = true;
            }
            return info;
        });
    }else{
        var units = $('.multi-price-area .col-sm-10').find('.form-group');

        units.each(function(e){
            var title = $(this).find('.form-control').eq(0).val();
            var price = $(this).find('.form-control').eq(1).val();
            
            if($.trim(title) == ''){
                xhPopMsg('价格项: 名称不为空', 2500);
                verifyStatus = false;
                return;
            }

            if($.trim(price) == ''){
                xhPopMsg('价格项: 有价格未填写', 2500);
                verifyStatus = false;
                return;
            }
            if(isNaN(price)){
                xhPopMsg('价格项: 价格必须为数字', 2500);
                verifyStatus = false;
                return;
            }
        });

        var singlePriceObj = $('.single-price-area input[name=price]');
        singlePriceObj.attr('addStatus', 'yes');
		singlePriceObj.siblings('p').removeClass('help-error-mention').html('');
    }

	setStats(sold, '请填写售量', function(val, mess){
		var info=[false, mess];
		if(isNotNull(val) == false || isNaN(val)){
			info[1] = '请填写售量';
		}else{
			info[0] = true;
		}
		return info;
	});

	setStats(material, '请填写花材', function(val, mess){
		var info=[false, mess];
		if(getLength(val) >=0){
			info[0] = true;
			info[1] = '填写正确';					
		}else{
			info[1] = '请填写花材';
		}
		return info;
	});
	
	setStats(representative, '请填写花语', function(val, mess){
		var info=[false, mess];
		if(getLength(val) >=0){
			info[0] = true;
			info[1] = '填写正确';					
		}else{
			info[1] = '请填写花语';
		}
		return info;
	});

	setStats(shopImg1, '请填写上传图片', 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(val.length > 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'){
			alert('表单已经提交成功，不允许重复提交');
			return;//表单已经提交成功，不允许重复提交
		}

		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;
			}
		}

		//封面 图片1判断
		if(isNotNull(shopImg1.val()) == false || isNotNull(cover.val()) == false){
			shopImg1.parent().parent().find('p').addClass('help-error-mention').html('封面和图Ⅰ必须上传');
			verifyStatus = false;
		}else{
			shopImg1.parent().parent().find('p').removeClass('help-error-mention').html('');
		}

		//确认有没选择分类
		var checkNum = $(".form-group .category-area :checkbox: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 newCategoryId	= [];
			$(":input[name=categoryId]:checked").each(function(){
				var thisCId = $(this).val();
				newCategoryId.push(thisCId);
			});*/
			/*var data = "goodsName="+goodsName.val()+"&price="+price.val()+"&sold="+sold.val()+"&representative="+representative.val();
			data += "&cover="+cover.val()+"&shopImg1="+shopImg1.val()+"&shopImg2="+shopImg2.val()+"&material="+material.val();
			data += "&content="+content.val()+"&shopImg3="+shopImg3.val();
			data += "&_csrf=<?= Yii::$app->request->csrfToken ?>&status="+statusValue+"&categoryId="+newCategoryId.join(',');*/
			var data = $('#goods-data-form').serialize();
		
			$.ajax({
				type:"POST",
				url:'/goods/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='/goods/list';
						},1400);
					}else{
                        xhPopMsg(data.msg,1300);
                    }
				}
			});
		}
	}
}

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: 800,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		  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-goods-img', // 这个地址做了跨域处理，可以用于实际调试
        	    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) {
            // 处理失败会执行
            //console.log(err);
            alert(err);
        }).always(function () {
            // 不管是成功失败，都会执行
        });
});


document.querySelector('#shopImg1').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: 800,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		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-goods-img', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=shopImg1]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='shopImg1']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});


document.querySelector('#shopImg2').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: 800,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		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-goods-img', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=shopImg2]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='shopImg2']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});

document.querySelector('#shopImg3').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: 800,// 图片最大不超过的宽度，默认为原图宽度，高度不设时会适应宽度。
		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-goods-img', // 这个地址做了跨域处理，可以用于实际调试
        	    data: rst.formData,
        	    processData: false,
        	    contentType: false,
        	    type: 'POST',
        	    dataType:'json',
        	    success: function (data) {
					$("img[name=shopImg3]").attr('src','<?= Yii::$app->params['imgUrl']; ?>'+data.url);
					$("input[name='shopImg3']").val(data.url);
        	    }
        	});
        })
        .catch(function (err) {
            // 处理失败会执行
        })
        .always(function () {
            // 不管是成功失败，都会执行
        });
});

function delPrice(obj){
    obj.closest('.form-group').remove();
}

$(function(){
    //增加价格按钮事件
    $('.add-price-btn').on('click', function(){
        var unitNum = $(this).closest('.form-group').find('.multi-price-area .col-sm-10').eq(0).find('.form-group').length;
        if(unitNum > 9){
            xhPopMsg('价格最多只可设置10个', 2500);
            return;
        }

        var content = '<div class="form-group"><div class="col-sm-10">名称：<input type="text" name="goodTitle[]" class="form-control" style="width:300px;display:inline-block;" placeholder="">&nbsp;&nbsp;&nbsp;&nbsp;价格：<input type="text" name="multiPrice[]" class="form-control" style="width:100px;display:inline-block;" placeholder="">&nbsp;&nbsp;&nbsp;&nbsp;<img src="" alt="">&nbsp;&nbsp;<button type="button" class="btn btn-sm btn-white" style="display:none;margin-top:5px;">上传图片</button>&nbsp;&nbsp;&nbsp;&nbsp;<button class="btn btn-sm btn-pink" onclick="delPrice(this)" style="margin-top:5px;"><li class="fa-remove">删除</li></button></div></div>';
        $(this).closest('.form-group').find('.multi-price-area .col-sm-10').eq(0).find('.form-group').last().after(content);
    });

    //价格选项事件
    $('.price-area input:radio[name=priceType]').on('change', function(){
        var type = $(this).attr('data-type');
        if(type == 'single'){
            $('.single-price-area').show();
            $('.multi-price-area').hide();
        }else{
            $('.multi-price-area').show();
            $('.single-price-area').hide();

            var singlePriceObj = $('.single-price-area input[name=price]');
        	singlePriceObj.attr('addStatus', 'yes');
			singlePriceObj.siblings('p').removeClass('help-error-mention').html('');
        }
    })
});
</script>