<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf
-8">
<meta name="viewport"
content="width=device
-width, initial
-scale=1, maximum
-scale=1.0, user
-scalable=0,shrink
-to
-fit=no, viewport
-fit=cover">
<meta name="keywords"
content="蓝桥到家">
<meta name="description" itemprop="description"
content="生鲜副食、饮品乳品、鲜花蛋糕">
<meta
http-equiv="X
-UA
-Compatible"
content="ie=edge">
<title>确认订单</title>
<link rel="stylesheet" type="text/css" href="../styles/reset.css" />
<link rel="stylesheet" type="text/css" href="../styles/iconfont/iconfont.css" />
<link rel="stylesheet" type="text/css" href="../styles/order
-confirm.css" />
<link rel="stylesheet" type="text/css" href="../styles/common.css" />
<script type="text/javascript" src="../js/common.js"></script>
<script type="text/javascript" src="../js/zepto.min.js"></script>
<script type="text/javascript" src="../js/data.js"></script>
</head>
<body>
<div class="wrap">
<!
-- 头部 start
-->
<header class="header_bar">
<a href="shopcart.html">
<div class="header_bar_back"></div>
</a>
<div class="header_bar_title">确认订单</div>
</header>
<!
-- 头部 end
-->
<div class="container">
<!
-- 订单信息 start
-->
<div class="order
-address">
<h5>配送至：</h5>
<a id="addressSelectLink" href="#">
<div class="address" id="selectedAddress">
<!
-- 地址信息将通过JavaScript动态生成
-->
</div>
</a>
</div>
<h3 id="storeName">商家名称</h3>
<ul class="order
-detail" id="orderItems">
<!
-- 订单商品将通过JavaScript动态生成
-->
</ul>
<div class="order
-cost">
<p>配送费</p>
<p id="deliveryFee">￥0</p>
</div>
<!
-- 合计部分
-->
<div class="total">
<div class="total
-left" id="totalPrice">
总计：0 元
</div>
<div class="total
-right" id="paymentBtn">
去支付
</div>
</div>
<!
-- 订单信息 end
-->
</div>
</div>
<script>
$(function() {
// 检查用户是否已登录
if (!checkLogin()) return;
// 获取店铺ID
const urlParams = new URLSearchParams(window.location.search);
const storeId = parseInt(urlParams.get('storeId') || '0');
if (storeId === 0) {
alert('订单信息错误');
window.location.href = 'shopcart.html';
return;
}
// 获取店铺数据
const store = getStoreById(storeId);
// 生鲜果蔬专区特殊处理
let storeName = '';
let deliveryFee = 0;
if (storeId === 999) {
// 生鲜果蔬专区
storeName = '生鲜果蔬专区';
deliveryFee = 5; // 设置配送费
} else if (!store) {
alert('店铺不存在');
window.location.href = 'shopcart.html';
return;
} else {
storeName = store.name;
deliveryFee = store.deliveryFee;
}
// 获取购物车中该店铺的商品
const storeItems = cart.getItemsByStore(storeId);
if (storeItems.length === 0) {
alert('购物车为空');
if (storeId === 999) {
window.location.href = 'fresh.html';
} else {
window.location.href = 'shop.html?id=' + storeId;
}
return;
}
// 更新地址选择链接
$('#addressSelectLink').attr('href', 'address
-select.html?from=order
-confirm&storeId=' + storeId);
// 渲染收货地址
function renderSelectedAddress() {
const selectedAddressEl = $('#selectedAddress');
const defaultAddress = addressManager.getDefaultAddress();
// 调试信息
console.log('地址管理器:', addressManager);
console.log('默认地址:', defaultAddress);
if (defaultAddress) {
selectedAddressEl.html(`
<div class="address
-content">
<div class="address
-info">
<p class="address
-detail">${defaultAddress.province}${defaultAddress.city}${defaultAddress.district}${defaultAddress.detail}</p>
<p class="address
-contact">${defaultAddress.name} ${defaultAddress.phone}</p>
</div>
<div class="address
-arrow">
<span class="iconfont icon
-youjiantou"></span>
</div>
</div>
`);
} else {
selectedAddressEl.html(`
<div class="address
-content">
<div class="address
-info">
<p class="address
-placeholder">请选择收货地址</p>
</div>
<div class="address
-arrow">
<span class="iconfont icon
-youjiantou"></span>
</div>
</div>
`);
}
}
// 渲染店铺名称
$('#storeName').text(storeName);
// 渲染配送费
$('#deliveryFee').text('￥' + deliveryFee);
// 渲染订单商品
let orderItemsHtml = '';
let subtotal = 0;
storeItems.forEach(item => {
const itemTotal = item.price * item.quantity;
subtotal += itemTotal;
orderItemsHtml += `
<li>
<div class="goods">
<img src="${item.image.replace('images/', '../images/')}">
<p>${item.name} x ${item.quantity}</p>
</div>
<p>￥${formatPrice(itemTotal)}</p>
</li>
`;
});
$('#orderItems').html(orderItemsHtml);
// 计算总价（商品小计 + 配送费）
const total = subtotal + deliveryFee;
$('#totalPrice').text(`总计：${formatPrice(total)} 元`);
// 支付按钮点击事件
$('#paymentBtn').on('click', function() {
// 检查是否有收货地址
const defaultAddress = addressManager.getDefaultAddress();
if (!defaultAddress) {
alert('请先添加收货地址');
window.location.href = 'address
-select.html?from=order
-confirm&storeId=' + storeId;
return;
}
// 保存订单信息到本地存储
const currentUser = JSON.parse(localStorage.getItem("currentUser"));
const orderKey = `orders_${currentUser.phone}`;
const existingOrders = JSON.parse(localStorage.getItem(orderKey) || "[]");
const newOrder = {
id: new Date().getTime(),
storeId: storeId,
storeName: storeName,
items: storeItems,
subtotal: subtotal,
deliveryFee: deliveryFee,
total: total,
status: "待支付",
createTime: new Date().toLocaleString(),
address: defaultAddress
};
existingOrders.push(newOrder);
localStorage.setItem(orderKey, JSON.stringify(existingOrders));
// 清空该店铺的购物车
storeItems.forEach(item => {
cart.updateQuantity(storeId, item.productId, 0);
});
// 跳转到支付页面
window.location.href = 'payment.html?orderId=' + newOrder.id;
});
// 初始化页面
renderSelectedAddress();
});
</script>
<style>
</style>
</body>
</html>按部分解释代码 一部分一部分 每一行解释 并解释他的设计逻辑
本文介绍了HTML中HTTP-Equiv元标签的各种用途，包括设定字符集、缓存控制、页面过期时间等，并详细解释了这些标签如何帮助浏览器更有效地处理网页内容。
扫一扫
442
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
