|
<!doctype html>
|
<html xmlns:th="http://www.thymeleaf.org" xmlns:matrix="http://www.w3.org/1999/xhtml">
|
<head>
|
<meta charset="utf-8">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta
|
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
|
name="viewport"/>
|
<title th:text="${session.userInfo.shopName }"></title>
|
|
<!-- Set render engine for 360 browser -->
|
<meta name="renderer" content="webkit">
|
|
<!-- No Baidu Siteapp-->
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
|
|
<!-- Add to homescreen for Chrome on Android -->
|
<meta name="mobile-web-app-capable" content="yes">
|
|
|
<!-- Add to homescreen for Safari on iOS -->
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
<meta name="apple-mobile-web-app-title" content="Amaze UI"/>
|
|
|
<meta name="msapplication-TileColor" content="#0e90d2">
|
<script type="text/javascript"
|
th:src="@{/js/plugin/jquery-2.1.4.min.js}"></script>
|
<script type="text/javascript"
|
th:src="@{/js/systools/DDMBase.js}"></script>
|
<link rel="stylesheet"
|
th:href="@{/plugin/amazingUI/css/amazeui.min.css}">
|
<link rel="stylesheet"
|
th:href="@{/plugin/amazingUI/css/app.css}">
|
<link rel="stylesheet" type="text/css"
|
th:href="@{/css/dingPersonalCar.css}" >
|
|
</head>
|
<style>
|
.foot-c {
|
background: #999
|
}
|
|
.am-navbar .am-navbar-nav {
|
padding-left: 0;
|
}
|
|
.am-header-right a {
|
color: #fff;
|
}
|
</style>
|
<script th:if="${session.CURRENT_CUSTOMER eq null}">
|
|
MTools.redirect(basePath + "/admin/redirect/hive/mobile/order-search");
|
|
</script>
|
<body>
|
<!-- 购物车页面 -->
|
<!-- 头部开始 -->
|
<header data-am-widget="header" class="am-header color-w back-m1">
|
<div class="am-header-left am-header-nav">
|
<a th:href="@{/admin/redirect/hive/mobile/order?foot=4}" class=""> <i
|
class="am-header-icon am-icon-chevron-left"></i>
|
</a>
|
</div>
|
|
<h1 class="am-header-title">
|
<a href="#title-link" class=""> 我的购物车 </a>
|
</h1>
|
|
<div class="am-header-right am-header-nav">
|
<a id="clearCar"> 清空 </a>
|
</div>
|
</header>
|
<!-- 头部结束 -->
|
|
|
<!-- 购物车表单开始 -->
|
<div class="main main1" id="carItemsBox">
|
<div class="empty-car" th:if="${session.SHOPPING_CAR} eq null or ${#lists.size(session.SHOPPING_CAR)} eq 0">
|
<p id="empty-car">购物车空空的~</p>
|
<p>
|
<a th:href="@{/admin/redirect/hive/mobile/order-list}"> 马上去选购! </a>
|
</p>
|
</div>
|
<form th:if="${session.SHOPPING_CAR} ne null and ${#lists.size(session.SHOPPING_CAR)} ne 0" class="am-form am-form-horizontal" action=""
|
id="dataform"
|
onsubmit="javascripr:return false;">
|
<!-- <input class="am-form-field am-input-sm" type="text" placeholder="">
|
<br/> -->
|
<div data-am-widget="list_news"
|
class="am-list-news am-list-news-default">
|
|
<div class="am-list-news-bd">
|
<ul class="am-list">
|
<!--缩略图在标题右边-->
|
<!-- 如果是商品 -->
|
<li th:each="item,flag:${session.SHOPPING_CAR}"
|
class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
|
<div class=" am-u-sm-2 am-list-thumb am-checkbox">
|
<label class="am-checkbox">
|
<input type="checkbox" onclick="caculateMoney()" th:isF="${item.isFree}"
|
th:name="'carItems['+${flag.index}+'].id'"
|
th:value="${item.id}" class="check" data-am-ucheck>
|
|
</label>
|
<!-- 增加隐藏域名 -->
|
|
|
<input type="hidden" th:name="'carItems['+${flag.index}+'].type'" th:value="${item.type}">
|
<input type="hidden" th:name="'carItems['+${flag.index}+'].isFree'"
|
th:value="${item.isFree }">
|
<input type="hidden" th:name="'carItems['+${flag.index}+'].goodsId'"
|
th:value="${item.goodsId}">
|
</div>
|
|
<div class=" am-u-sm-10 am-list-main am-list-item-thumb-left">
|
|
<h3 class="am-list-item-hd">
|
<span th:text="${item.shoppingGoods.name }"> </span>
|
<br/>
|
<span>价格<strong class="color-r" th:text="${item.shoppingGoods.sealPice }"></strong></span>
|
<span th:if="${item.isFree eq '是'}">【赠】 </span>
|
</h3>
|
<div class="am-list-item-text">
|
<div class="am-input-group am-input-group-primary">
|
<a class="am-input-group-label reduce">
|
<i class="am-header-icon am-icon-minus"></i>
|
</a>
|
<input th:name="'carItems['+${flag.index}+'].count'" type="tel"
|
id="num" class="am-form-field " th:value="${item.count }"/>
|
<a class="am-input-group-label add">
|
<i class="am-header-icon am-icon-plus"></i>
|
</a>
|
</div>
|
</div>
|
|
</div>
|
</li>
|
|
<li class="am-g am-list-item-desced am-list-item-thumbed am-list-item-thumb-right">
|
<div class=" am-u-sm-2 am-list-thumb am-checkbox">
|
<label class="am-checkbox">
|
<input type="checkbox" onclick="sellectAll(this)" class="check" data-am-ucheck>
|
</label>
|
</div>
|
<div class=" am-u-sm-10 am-list-main am-list-item-thumb-left">
|
<h3 class="am-list-item-hd"> <span>全选</span><br/> </h3>
|
</div>
|
</li>
|
</ul>
|
</div>
|
<div>
|
|
|
|
</div>
|
|
|
<div class="ps">
|
<textarea name="remark" class=" border " clos="100"
|
rows="2" warp="virtual" placeholder="备注信息"></textarea>
|
</div>
|
|
|
<div data-am-widget="navbar" class="am-navbar am-cf am-navbar-default back-m1" id="">
|
<ul class="am-navbar-nav am-cf am-avg-sm-3 back-m1">
|
<li class="foot-c">
|
<a href="" class="">
|
<span class="">共<span id="goodsNum">0</span>件商品</span>
|
</a>
|
</li>
|
<li class="foot-c ">
|
<a href="###" class="">
|
|
<span class="">合计:¥<strong id="orderTotalMoney">0</strong></span>
|
|
</a>
|
</li>
|
<li class="back-m1">
|
<a href="###" onclick="myForm.submit()">
|
<span class="">下单</span>
|
|
</a>
|
</li>
|
|
</ul>
|
</div>
|
|
|
</div>
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
<!-- 购物车表单结束 -->
|
<!-- 弹出 -->
|
<div class="am-modal am-modal-confirm" tabindex="-1" id="my-confirm">
|
<div class="am-modal-dialog">
|
<div class="am-modal-hd">提示</div>
|
<div class="am-modal-bd">你确定要清空购物车吗？</div>
|
<div class="am-modal-footer">
|
<span class="am-modal-btn" data-am-modal-cancel>取消</span> <span
|
class="am-modal-btn" data-am-modal-confirm>确定</span>
|
</div>
|
</div>
|
</div>
|
<script th:src="@{/plugin/amazingUI/js/handlebars.min.js}"></script>
|
<script th:src="@{/plugin/amazingUI/js/amazeui.widgets.helper.js}"></script>
|
<!-- index js -->
|
<script type="text/javascript">
|
$(function () {
|
$(".select2").select2({'width': '100%'});
|
MTools.autoFullSelect();
|
//数量
|
$(".add").bind("click", function () {
|
if ($(this).prev().val() >= 0) {
|
$(this).prev().val(parseInt($(this).prev().val()) + 1);
|
}
|
caculateMoney();
|
});
|
$(".reduce").bind("click", function () {
|
if ($(this).next().val() > 1) {
|
$(this).next().val(parseInt($(this).next().val()) - 1);
|
}
|
caculateMoney();
|
});
|
});
|
|
function sellectAll(node) {
|
//
|
var checked=node.checked;
|
$(".am-ucheck-checkbox").each(function(){
|
this.checked=checked;
|
});
|
caculateMoney();
|
|
}
|
//下单
|
var myForm = MForm.initForm({
|
invokeUrl: basePath + "/admin/order/addOrder",
|
isvalid: false,
|
afterSubmit: function (loj) {
|
var msg = '';
|
if (loj.attr("result").status == '200') {
|
msg = '下单成功';
|
layer.open({
|
shade: false,
|
content: msg,
|
className: 'showBox',
|
time: 1,
|
end: function (elem) {
|
MTools.redirect(basePath + "/admin/redirect/hive/mobile/order?foot=4");
|
}
|
});
|
}
|
}
|
});
|
|
/* 弹出JS */
|
$(function () {
|
$('#clearCar').on('click', function () {
|
$('#my-confirm').modal({
|
relatedTarget: this,
|
onConfirm: function (options) {
|
//请求服务器清空session
|
$.AjaxProxy().invoke(
|
basePath + "/admin/shoppingCar/clearShoppingCar",
|
function (loj) {
|
location.reload();
|
})
|
},
|
});
|
//清空列表
|
});
|
});
|
|
function caculateMoney() {
|
// 找到所有被选中的元素
|
var money = 0.00;
|
var goodsNum = 0;
|
$("input:checked").each(function (i) {
|
var _this = $(this);
|
var freeFlag = _this.attr("isF");
|
if (freeFlag == '否') {
|
m = parseFloat(_this.parent().parent().next('div').find('strong').html());
|
n = parseInt(_this.parent().parent().next('div').find('#num').val());
|
money += m * n;
|
goodsNum += n;
|
}
|
});
|
console.log(money);
|
$("#orderTotalMoney").html(money);
|
$("#goodsNum").html($("input:checked").length);
|
}
|
</script>
|
</body>
|
</html>
|
