<!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>
<h
3 id="storeName">商家名称</h
3>
<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
(&#
39;storeId&#
39;
) || &#
39;0&#
39;
);
if
(storeId === 0
) {
alert
(&#
39;订单信息错误&#
39;
);
window
.location
.href = &#
39;shopcart
.html&#
39;;
return;
}
// 获取店铺数据
const store = getStoreById
(storeId
);
// 生鲜果蔬专区特殊处理
let storeName = &#
39;&#
39;;
let deliveryFee = 0;
if
(storeId === 999
) {
// 生鲜果蔬专区
storeName = &#
39;生鲜果蔬专区&#
39;;
deliveryFee = 5; // 设置配送费
} else if
(!store
) {
alert
(&#
39;店铺不存在&#
39;
);
window
.location
.href = &#
39;shopcart
.html&#
39;;
return;
} else {
storeName = store
.name;
deliveryFee = store
.deliveryFee;
}
// 获取购物车中该店铺的商品
const storeItems = cart
.getItemsByStore
(storeId
);
if
(storeItems
.length === 0
) {
alert
(&#
39;购物车为空&#
39;
);
if
(storeId === 999
) {
window
.location
.href = &#
39;fresh
.html&#
39;;
} else {
window
.location
.href = &#
39;shop
.html?id=&#
39; + storeId;
}
return;
}
// 更新地址选择链接
$
(&#
39;#addressSelectLink&#
39;
).attr
(&#
39;href&#
39;, &#
39;address-select
.html?from=order-confirm&storeId=&#
39; + storeId
);
// 渲染收货地址
function renderSelectedAddress
() {
const selectedAddressEl = $
(&#
39;#selectedAddress&#
39;
);
const defaultAddress = addressManager
.getDefaultAddress
();
// 调试信息
console
.log
(&#
39;地址管理器:&#
39;, addressManager
);
console
.log
(&#
39;默认地址:&#
39;, 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>
`
);
}
}
// 渲染店铺名称
$
(&#
39;#storeName&#
39;
).text
(storeName
);
// 渲染配送费
$
(&#
39;#deliveryFee&#
39;
).text
(&#
39;￥&#
39; + deliveryFee
);
// 渲染订单商品
let orderItemsHtml = &#
39;&#
39;;
let subtotal = 0;
storeItems
.forEach
(item => {
const itemTotal = item
.price * item
.quantity;
subtotal += itemTotal;
orderItemsHtml += `
<li>
<div class="goods">
<img src="${item
.image
.replace(&#
39;images/&#
39;, &#
39;
../images/&#
39;
)}">
<p>${item
.name} x ${item
.quantity}</p>
</div>
<p>￥${formatPrice
(itemTotal
)}</p>
</li>
`;
}
);
$
(&#
39;#orderItems&#
39;
).html
(orderItemsHtml
);
// 计算总价（商品小计 + 配送费）
const total = subtotal + deliveryFee;
$
(&#
39;#totalPrice&#
39;
).text
(`总计：${formatPrice
(total
)} 元`
);
// 支付按钮点击事件
$
(&#
39;#paymentBtn&#
39;
).on
(&#
39;click&#
39;, function
() {
// 检查是否有收货地址
const defaultAddress = addressManager
.getDefaultAddress
();
if
(!defaultAddress
) {
alert
(&#
39;请先添加收货地址&#
39;
);
window
.location
.href = &#
39;address-select
.html?from=order-confirm&storeId=&#
39; + 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 = &#
39;payment
.html?orderId=&#
39; + newOrder
.id;
}
);
// 初始化页面
renderSelectedAddress
();
}
);
</script>
<style>
</style>
</body>
</html>按部分解释代码 一部分一部分 每一行解释 并解释他的设计逻辑
扫一扫
7701
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
