本文展示了一个模仿知名电商平台的商品评价系统实现，采用HTML、CSS和JavaScript构建界面，利用jQuery和layui框架进行交互和样式设计。系统允许用户对订单中的每个商品进行评分和评论，通过AJAX将数据异步发送至后端保存。
仿某宝订单商品评价
<link rel="stylesheet" href="<%=basePath%>static/plugins/layui-v2.3.0/css/layui.css" />
<script src="<%=basePath%>static/assets/js/jquery-1.11.3.min.js"></script>
<script src="<%=basePath%>static/plugins/jquery/jquery.serializejson.min.js"></script>
<script src="<%=basePath%>static/plugins/layui-v2.3.0/layui.js"></script>
<script type="text/javascript">
$(function(){
layui.use(['rate'], function(){
rate = layui.rate;
layui.each($('.rate'), function (index,elem){
rate.render({
elem: elem,
value:5,
choose: function(value){
$(".sel_"+index).val(value);
}
});
});
});
})
function changeRate(obj, thisIndex){
var rateNum = $(obj).val();
layui.each($('.rate'), function (index,elem){
if(thisIndex == index){
rate.render({
elem: elem,
value: rateNum,
choose: function(value){
$(".sel_"+index).val(value);
}
});
}
});
}
function submitForm(size){
var paramArray=new Array();
for(var i=0;i<size;i++){
var frmjson = $("#frm_"+i).serializeJSON();
paramArray.push(frmjson);
}
console.log(JSON.stringify(paramArray));
$.ajax({
type: 'post',
url: "mall/saveComment.do",
data: JSON.stringify(paramArray),
contentType: 'application/json', //极其重要
dataType:'json',
success: function(data) {
if(data.status==200){
alert("评价成功！");
window.open("personal/center.do?url=mall/orders/list.do&urlId=13");
}else{
alert(data.msg);
}
},
error: function(){
alert("网络异常！");
}
})
}
/**
* form 表单序列化成json (没有用到，备用吧)
*/
function transformToJson(obj) {
var o = {};
var a = $(obj).serializeArray();
$.each(a, function () {
if (o[this.name] !== undefined) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
</script>
页面：
<body id="bod">
<div id="wrap">
<input id="contentId" type="hidden" value="product_list_13" >
<div class="apply">
<div class="heder">
<h3>商品评价</h3>
</div>
<div class='orderInfo'>
<div class="dd">
<a href="javascript:void(0);">订单编号：</a>
<a href="javascript:void(0);">${mallOrder.ordersId }</a>
<a href="javascript:void(0);" style="margin-left: 30px;">商品数量：</a>
<a href="javascript:void(0);">${mallOrder.num }</a>
</div>
</div>
<form id="frm_0" class="frm_box">
<c:forEach items="${mallOrder.list }" begin="0" end="0" var="orderItem">
<div class="body">
<div class="right">
<div class="jieshao">
<div class="img">
<a href="javascript:void(0);">
<img src="${orderItem.cover }" width="120px" height="145px;" alt="${orderItem.goodsName }">
</a>
</div>
<div class="sl">
<a href="javascript:void(0);" style="color: #333333">${orderItem.goodsName }</a>
<a href="javascript:void(0);" style="color: #999999;margin-top: 45px;">数量：${orderItem.goodsNum }</a>
<a href="javascript:void(0);" style="color: #999999">单价：¥${orderItem.goodsPrice }</a>
<a href="javascript:void(0);" style="color: #999999">小计：¥${orderItem.subtotal }</a>
</div>
</div>
</div>
<input type="hidden" name="goodsId" value="${orderItem.goodsId }"/>
<input type="hidden" name="orderId" value="${mallOrder.id }"/>
<div class="left">
<div class="left_1">
<a class="tk" href="javascript:void(0);" style="margin-right: 3px;">商品与描述相符（打分）：</a>
<div class="rate"></div>
<select class="sel_0" tabindex="0" name="score" title="上下键，选评星等级。" onchange="changeRate(this,0)">
<option value="5">5星</option>
<option value="4">4星</option>
<option value="3">3星</option>
<option value="2">2星</option>
<option value="1">1星</option>
</select>
</div>
<div class="tk_je" style="margin-top: 10px;">
<textarea name="content" cols="60" rows="5" maxlength="400" style="border: 1px #ccc solid;padding: 5px;">${replacement.replaceExplain }</textarea>
</div>
</div>
</div>
</c:forEach>
</form>
<c:if test="${fn:length(mallOrder.list) gt 1 }">
<fieldset class="layui-elem-field">
<legend><a href="javascript:void(0);">同一订单里的商品，也评论一下呗!</a></legend>
<div class="layui-field-box">
<c:forEach items="${mallOrder.list }" begin="1" var="orderItem" varStatus="vs">
<form id="frm_${vs.count }" class="frm_box">
<div class="body">
<div class="right" style="width: 360px;">
<div class="jieshao">
<div class="img">
<a href="javascript:void(0);">
<img src="${orderItem.cover }" width="120px" height="145px;" alt="${orderItem.goodsName }">
</a>
</div>
<div class="sl">
<a href="javascript:void(0);" style="color: #333333">${orderItem.goodsName }</a>
<a href="javascript:void(0);" style="color: #999999;margin-top: 45px;">数量：${orderItem.goodsNum }</a>
<a href="javascript:void(0);" style="color: #999999">单价：¥${orderItem.goodsPrice }</a>
<a href="javascript:void(0);" style="color: #999999">小计：¥${orderItem.subtotal }</a>
</div>
</div>
</div>
<input type="hidden" name="goodsId" value="${orderItem.goodsId }"/>
<input type="hidden" name="orderId" value="${mallOrder.id }"/>
<div class="left">
<div class="left_1">
<a class="tk" href="javascript:void(0);" style="margin-right: 3px;">商品与描述相符（打分）：</a>
<div class="rate"></div>
<select class="sel_${vs.count }" tabindex="0" name="score" title="上下键，选评星等级。" onchange="changeRate(this,${vs.count })">
<option value="5">5星</option>
<option value="4">4星</option>
<option value="3">3星</option>
<option value="2">2星</option>
<option value="1">1星</option>
</select>
</div>
<div class="tk_je" style="margin-top: 10px;">
<textarea name="content" cols="60" rows="5" maxlength="400" style="border: 1px #ccc solid;padding: 5px;">${replacement.replaceExplain }</textarea>
</div>
</div>
</div>
</form>
</c:forEach>
</div>
</fieldset>
</c:if>
<div class="btn_submit">
<a href="javascript:submitForm('${fn:length(mallOrder.list)}');">提交</a>
</div>
</div>
</div>
</body>
</html>
contrller：
/**
* 商品评论
*
* @Author : liuzy
* @Date : 2019年8月7日 下午6:06:49
*/
@RequestMapping("/saveComment.do")
@ResponseBody
public SysResult saveComment(HttpServletRequest request, @RequestBody String param) throws Exception{
try {
UserInfo userInfo = TokenUtil.getCookie(request);
List<MallComment> list = JSON.parseArray(param, MallComment.class);
String result = null;
for(MallComment tmp : list){
tmp.setMemberId(userInfo.getMemberId());
if(StringUtils.isEmpty(tmp.getContent())){
tmp.setContent("此用户没有填写评论！");
}else{
result = BaiduContentCensor.isConcatSensitiveWord(tmp.getContent());
if("1".equals(result)) {
return SysResult.fail("评论内容包含敏感词，请修改后提交..");
}
}
tmp.setStatus(1);
}
commentSrv.saveMallComment(list);
return SysResult.success(MsgConstant.SUCCESS);
} catch (Exception e) {
e.printStackTrace();
return SysResult.fail(MsgConstant.FAIL);
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
