productoperation.html
其中包括商品信息的添加和商品信息的修改，这个和店铺信息注册和修改用的是一样的
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>SUI Mobile Demo</title>
<meta name="description" content="MSUI: Build mobile apps with simple HTML, CSS, and JS components.">
<meta name="author" content="阿里巴巴国际UED前端">
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<!-- Google Web Fonts -->
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="apple-touch-icon-precomposed" href="/assets/img/apple-touch-icon-114x114.png">
<script>
//ga
</script>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "//hm.baidu.com/hm.js?ba76f8230db5f616edc89ce066670710";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</head>
<body>
<div class="page-group">
<div id="page-layout" class="page">
<header class="bar bar-nav">
<h1 class="title">商品编辑</h1>
</header>
<div class="content">
<div class="list-block">
<ul>
<!-- Text inputs -->
<!--商品名称 text-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">商品名称</div>
<div class="item-input">
<input type="text" id="product_name" placeholder="商品名称">
</div>
</div>
</div>
</li>
<!--商品类别 下拉列表-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-email"></i></div>
<div class="item-inner">
<div class="item-title label">商品类别</div>
<div class="item-input">
<select id="category">
</select>
</div>
</div>
</div>
</li>
<!--优先级 number-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">优先级</div>
<div class="item-input">
<input type="number" id="priority" placeholder="数字越大越靠前">
</div>
</div>
</div>
</li>
<!--原价 number-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">原价</div>
<div class="item-input">
<input type="number" id="normal_price" placeholder="可选">
</div>
</div>
</div>
</li>
<!--现价 number-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">现价</div>
<div class="item-input">
<input type="number" id="promotion_price" placeholder="可选">
</div>
</div>
</div>
</li>
<!--缩略图 上传控件 file-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">缩略图</div>
<div class="item-input">
<input type="file" id="small_img">
</div>
</div>
</div>
</li>
<!--商品详情图片 file-->
<li>
<div class="item-content">
<div class="item-media">
<i class="icon icon-form-email"></i>
</div>
<!--进行事件绑定，每添加一个详情图片，就生成一个新的-->
<div class="item-inner detail-img-div">
<div class="item-title label">商品详情图片</div>
<div class="item-input" id="detail_img">
<input type="file" class="detail_img">
<!--<input type="file" class="detail_img">
<input type="file" class="detail_img">-->
</div>
</div>
</div>
</li>
<!--商品描述 textarea-->
<li class="align-top">
<div class="item-content">
<div class="item-media"><i class="icon icon-form-comment"></i></div>
<div class="item-inner">
<div class="item-title label">商品描述</div>
<div class="item-input">
<textarea id="product_desc" placeholder="商品描述"></textarea>
</div>
</div>
</div>
</li>
<!--验证码 kaptcha-->
<li>
<div class="item-content">
<div class="item-media"><i class="icon icon-form-name"></i></div>
<div class="item-inner">
<div class="item-title label">验证码</div>
<input type="text" id="j_kaptcha" placeholder="验证码">
<div class="item-input">
<img id="kaptcha_img" alt="点击更换" title="点击更换"
onclick="changeVerifyCode(this)" src="../Kaptcha">
</div>
</div>
</div>
</li>
</ul>
</div>
<div class="content-block">
<div class="row">
<div class="col-50"><a href="/shopadmin/productmanagement" class="button button-big button-fill button-danger" id="back">返回商品管理</a></div>
<div class="col-50"><a href="#" class="button button-big button-fill button-success" id="submit">提交</a></div>
</div>
</div>
</div>
</div>
</div>
<script type=\'text/javascript\' src=\'//g.alicdn.com/sj/lib/zepto/zepto.min.js\' charset=\'utf-8\'></script>
<script type=\'text/javascript\' src=\'//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js\' charset=\'utf-8\'></script>
<script type=\'text/javascript\' src=\'//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js\' charset=\'utf-8\'></script>
<script type=\'text/javascript\' src=\'../resources/js/shop/productop.js\' charset=\'utf-8\'></script>
<script type=\'text/javascript\' src=\'../resources/js/common/commons.js\' charset="utf-8"></script>
</body>
</html>
productop.js
用来进行添加商品信息，修改商品信息之前（从数据库读取信息）和之后（想后台提交信息）
以及响应商品信息提交按钮
$(function(){
//通过该方法获取是否传了productId 如果传了shopId，则是对shop进行更新，否则就是进行注册
var productId=getQueryString(\'productId\');
//通过productId获取商品信息的URL
var infoUrl=\'/shopadmin/getproductbyid?productId=\' + productId;
//获取当前店铺设定的商品类别列表的URL
var categoryUrl = \'/shopadmin/getproductcategorylist\';
//修改商品信息时，更新商品信息的URL
var productPostUrl = \'/shopadmin/modifyproduct\';
//由于商品添加和编辑使用的是同一个页面，该标识符用来标明本次是添加还是编辑操作
//true表示修改商品信息，false表示添加商品信息
var isEdit=productId ? true : false;
//通过isEdit来判断是修改商品信息还是添加商品信息，来调用不同的方法
if(isEdit){
//修改商品信息
getInfo(productId);
} else{
//添加商品信息
getCategory();
productPostUrl = \'/shopadmin/addproduct\';
}
//通过传入的productId，查询product的信息，然后获取到js页面中，为后面修改product信息做准备
function getInfo(id){
$.getJSON(infoUrl, function(data){
if(data.success){
//从返回的JSON数据中获取product对象的信息，并赋值给表单
var product = data.product;
$(\'#product_name\').val(product.productName);
$(\'#product_desc\').val(product.productDesc);
$(\'#priority\').val(product.priority);
$(\'#normal_price\').val(product.normalPrice);
$(\'#promotion_price\').val(product.promotionPrice);
//获取原本的商品类别，以及该店铺的所有商品类别列表
var optionHtml = \'\';
var optionArr = data.productCategoryList;
var optionSelected = product.productCategory.productCategoryId;
//生成前端的HTML商品类别列表，并默认选择编辑前的商品类别
optionArr.map(function(item, index){
var isSelect = optionSelected === item.productCategoryId ? \'selected\' : \'\';
optionHtml += \'<option data-value="\'
+ item.productCategoryId + \'"\' + isSelect
+ \'>\' + item.productCategoryName + \'</option>\';
});
$(\'#category\').html(optionHtml);
}
});
}
//为商品添加操作提供该店铺下的所有商品类别列表
function getCategory(){
$.getJSON(categoryUrl, function(data){
if(data.success){
var optionHtml = \'\';
data.productCategoryList.map(function(item, index){
optionHtml += \'<option data-value="\'
+ item.productCategoryId + \'">\'
+ item.productCategoryName
+ \'</option>\';
});
$(\'#category\').html(optionHtml);
}
});
}
//针对商品详情图控件组，若该控件组的最后一个元素发生变化（即上传了图片），
//且控件总数未达到6个，则生成新的一个文件上传控件
$(\'.detail-img-div\').on(\'change\', \'.detail-img:last-child\', function(){
if($(\'.detail_img\').length < 6){
$(\'#detail_img\').append(\'<input type="file" class="detail_img">\');
}
});
//提交按钮，进行商品添加或编辑操作 url根据isEdit来分情况选择
$(\'#submit\').click(function(){
var product = {};
product.productName = $(\'#product_name\').val();
product.productDesc = $(\'#product_desc\').val();
product.priority = $(\'#priority\').val();
product.normalPrice = $(\'#normal_price\').val();
product.promotionPrice = $(\'#promotion_price\').val();
//获取选定商品类别值
product.productCategory = {
productCategoryId : $(\'#category\').find(\'option\').not(
function(){
return !this.selected;
}).data(\'value\')
};
product.productId = productId;
/*获取缩略图输入流*/
var thunmnail = $(\'#small_img\')[0].files[0];
//生成表单对象，用于接收参数并传递给后台，在ajax中传递的参数
var formData = new FormData();
//参数的内容，分别是上面的shop和shop图片
formData.append(\'thumbnail\', thunmnail);
//遍历商品详情图控件，获取里面的文件流
$(\'.detail_img\').map(
function(item, index){
//判断该控件是否已选择了文件
if($(\'.detail_img\')[index].files.length > 0){
//将第i个文件流赋值给key为productImg i 的表单键值对里
formData.append(\'productImg\' + index, $(\'.detail_img\')[index].files[0]);
}
});
//将product json对象转成字符流保存至表单对象key为productStr的键值对里
formData.append(\'productStr\', JSON.stringify(product));
//获取表单里输入的验证码
var verifyCodeActual = $(\'#j_kaptcha\').val();
if(!verifyCodeActual){
$.toast(\'请输入验证码！\');
return;
}
formData.append(\'verifyCodeActual\', verifyCodeActual);
/*使用ajax提交到后台*/
$.ajax({
url:productPostUrl,
type:\'POST\',
data:formData,
contentType:false,
processData:false,
cache:false,
success:function(data){
if(data.success){
$.toast(\'提交成功！\');
/*更换验证码*/
$(\'#kaptcha_img\').click();
} else{
$.toast(\'提交失败！\' + data.errMsg);
$(\'#kaptcha_img\').click();
}
}
});
});
});