|
|
@@ -0,0 +1,598 @@
|
|
|
+// API 配置
|
|
|
+const API_BASE_URL = 'http://localhost:8086/api';
|
|
|
+
|
|
|
+// 支付二维码图片配置(方便更换)
|
|
|
+// 请将图片复制到 oederFoodVue/images/ 文件夹,然后使用相对路径
|
|
|
+const PAYMENT_QRCODE_IMAGE = 'images/payment-qrcode.jpg';
|
|
|
+
|
|
|
+// 应用状态
|
|
|
+const state = {
|
|
|
+ cart: {}, // { dishId: count } 雪花ID(字符串/数字)唯一键,彻底解决选品关联问题
|
|
|
+ currentCategory: null,
|
|
|
+ selectedDish: null,
|
|
|
+ categories: [],
|
|
|
+ dishes: []
|
|
|
+};
|
|
|
+
|
|
|
+// 工具函数:价格格式化(非数字兜底为0,避免NaN)
|
|
|
+function formatPrice(price) {
|
|
|
+ const num = parseFloat(price);
|
|
|
+ return isNaN(num) ? 0 : num;
|
|
|
+}
|
|
|
+
|
|
|
+// API 调用函数 - 获取分类
|
|
|
+async function fetchCategories() {
|
|
|
+ try {
|
|
|
+ const response = await fetch(`${API_BASE_URL}/categories`);
|
|
|
+ const result = await response.json();
|
|
|
+ if (result.code === 200) {
|
|
|
+ state.categories = result.data || [];
|
|
|
+ if (state.categories.length > 0 && !state.currentCategory) {
|
|
|
+ state.currentCategory = parseInt(state.categories[0].id);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.error('获取分类失败:', result.message);
|
|
|
+ alert('获取分类失败: ' + result.message);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取分类出错:', error);
|
|
|
+ alert('获取分类出错,请检查后端服务是否启动');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// API 调用函数 - 获取菜品
|
|
|
+async function fetchDishes() {
|
|
|
+ try {
|
|
|
+ const response = await fetch(`${API_BASE_URL}/dishes`);
|
|
|
+ const result = await response.json();
|
|
|
+ if (result.code === 200) {
|
|
|
+ state.dishes = result.data || [];
|
|
|
+ } else {
|
|
|
+ console.error('获取菜品失败:', result.message);
|
|
|
+ alert('获取菜品失败: ' + result.message);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('获取菜品出错:', error);
|
|
|
+ alert('获取菜品出错,请检查后端服务是否启动');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 初始化
|
|
|
+async function init() {
|
|
|
+ // 加载提示
|
|
|
+ document.getElementById('dishContainer').innerHTML = '<div style="text-align:center;padding:40px;color:#999;">加载中...</div>';
|
|
|
+ // 并行请求数据,提升速度
|
|
|
+ await Promise.all([fetchCategories(), fetchDishes()]);
|
|
|
+ // 渲染页面
|
|
|
+ renderCategories();
|
|
|
+ renderDishes();
|
|
|
+ bindEvents();
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+// 渲染分类列表
|
|
|
+function renderCategories() {
|
|
|
+ const categoryList = document.getElementById('categoryList');
|
|
|
+ if (state.categories.length === 0) {
|
|
|
+ categoryList.innerHTML = '<div style="padding:20px;text-align:center;color:#999;">暂无分类</div>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ categoryList.innerHTML = state.categories.map(cat => {
|
|
|
+ const catId = cat.id; // 后端返回的字符串ID
|
|
|
+ const currentId = state.currentCategory; // 直接用字符串ID,不转数字
|
|
|
+ return `
|
|
|
+ <div class="category-item ${catId === currentId ? 'active' : ''}" data-id="${catId}">
|
|
|
+ ${cat.categoryName}
|
|
|
+ </div>
|
|
|
+ `}).join('');
|
|
|
+}
|
|
|
+
|
|
|
+// 渲染菜品列表 - 全程字符串ID,无任何parseInt,彻底解决精度丢失/ID不匹配
|
|
|
+function renderDishes() {
|
|
|
+ const dishContainer = document.getElementById('dishContainer');
|
|
|
+ if (state.dishes.length === 0) {
|
|
|
+ dishContainer.innerHTML = '<div style="text-align:center;padding:40px;color:#999;">暂无菜品</div>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 过滤有菜品的分类:字符串ID严格相等对比,无任何转换
|
|
|
+ const categoriesWithDishes = state.categories.filter(cat =>
|
|
|
+ state.dishes.some(dish => dish.categoryId === cat.id)
|
|
|
+ );
|
|
|
+ if (categoriesWithDishes.length === 0) {
|
|
|
+ dishContainer.innerHTML = '<div style="text-align:center;padding:40px;color:#999;">暂无菜品</div>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 按分类渲染菜品,全程字符串ID,data-id唯一绑定
|
|
|
+ dishContainer.innerHTML = categoriesWithDishes.map(category => {
|
|
|
+ const categoryId = category.id; // 纯字符串分类ID,不做任何转换
|
|
|
+ // 过滤当前分类的菜品:字符串categoryId严格相等对比
|
|
|
+ const dishes = state.dishes.filter(dish => dish.categoryId === categoryId);
|
|
|
+ return `
|
|
|
+ <div class="category-section" id="category-${categoryId}"> <!-- 字符串ID拼接,和点击的ID完全一致 -->
|
|
|
+ <h3 class="category-title">${category.categoryName}</h3>
|
|
|
+ <div class="dish-list">${dishes.map(dish => {
|
|
|
+ const imgUrl = dish.coverImg || 'https://picsum.photos/100/100?text=菜品图片';
|
|
|
+ const description = dish.description || '暂无描述';
|
|
|
+ const tasteFeature = dish.tasteFeature || '美味';
|
|
|
+ const adaptScene = dish.adaptScene || '推荐';
|
|
|
+ const sales = dish.sales || 0;
|
|
|
+ const dishId = dish.id; // 保留雪花ID原始字符串值,不做任何转换
|
|
|
+ const inCart = state.cart[dishId]; // 仅匹配当前dishId的购物车状态
|
|
|
+
|
|
|
+ return `
|
|
|
+ <div class="dish-item ${inCart ? 'in-cart' : ''}" data-id="${dishId}">
|
|
|
+ <img class="dish-img" src="${imgUrl}" alt="${dish.dishName}" onerror="this.src='https://picsum.photos/100/100?text=菜品图片'">
|
|
|
+ <div class="dish-info">
|
|
|
+ <div class="dish-name">${dish.dishName}</div>
|
|
|
+ <div class="dish-desc">${description}</div>
|
|
|
+ <div class="dish-tags">
|
|
|
+ <span class="dish-tag">${tasteFeature}</span>
|
|
|
+ <span class="dish-tag">${adaptScene}</span>
|
|
|
+ </div>
|
|
|
+ <div class="dish-footer">
|
|
|
+ <div>
|
|
|
+ <span class="dish-price">¥${formatPrice(dish.price).toFixed(2)}</span>
|
|
|
+ <span class="dish-sales">月售${sales}</span>
|
|
|
+ </div>
|
|
|
+ <div class="dish-controls">
|
|
|
+ ${inCart ? `
|
|
|
+ <button class="control-btn minus" data-action="minus" data-id="${dishId}">-</button>
|
|
|
+ <span class="dish-count">${inCart}</span>
|
|
|
+ ` : ''}
|
|
|
+ <button class="control-btn plus" data-action="plus" data-id="${dishId}">+</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `}).join('')}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+ }).join('');
|
|
|
+}
|
|
|
+
|
|
|
+// 更新购物车 - 核心:按dishId唯一计算,不混淆
|
|
|
+function updateCart() {
|
|
|
+ // 计算总数量(仅累加当前dishId的数量)
|
|
|
+ const totalCount = Object.values(state.cart).reduce((sum, count) => sum + (Number(count) || 0), 0);
|
|
|
+ // 计算总价(按dishId匹配菜品,精准计算)
|
|
|
+ const totalPrice = Object.entries(state.cart).reduce((sum, [dishId, count]) => {
|
|
|
+ const dish = state.dishes.find(d => d.id === dishId); // 精准匹配dishId
|
|
|
+ return sum + (dish ? formatPrice(dish.price) * (Number(count) || 0) : 0);
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ // 更新购物车角标
|
|
|
+ const cartCountEl = document.getElementById('cartCount');
|
|
|
+ const cartIconEl = document.querySelector('.cart-icon');
|
|
|
+ cartCountEl.textContent = totalCount;
|
|
|
+ totalCount > 0 ? (cartCountEl.classList.add('show'), cartIconEl.classList.add('has-items')) : (cartCountEl.classList.remove('show'), cartIconEl.classList.remove('has-items'));
|
|
|
+
|
|
|
+ // 更新总价和结算按钮
|
|
|
+ document.getElementById('totalPrice').textContent = `¥${totalPrice.toFixed(2)}`;
|
|
|
+ const checkoutBtn = document.getElementById('checkoutBtn');
|
|
|
+
|
|
|
+ // 取消起送门槛,只要有商品就可以结算
|
|
|
+ if (totalCount > 0) {
|
|
|
+ checkoutBtn.disabled = false;
|
|
|
+ checkoutBtn.textContent = `去结算(总计¥${totalPrice.toFixed(2)})`;
|
|
|
+ } else {
|
|
|
+ checkoutBtn.disabled = true;
|
|
|
+ checkoutBtn.textContent = `去结算`;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 局部更新,不重渲染整个列表(性能优化+避免选品关联)
|
|
|
+ renderCartDetail();
|
|
|
+ updateDishCartStatus();
|
|
|
+}
|
|
|
+
|
|
|
+// 局部更新菜品购物车状态 - 核心:按dishId精准更新单个菜品,不影响其他
|
|
|
+function updateDishCartStatus() {
|
|
|
+ document.querySelectorAll('.dish-item').forEach(dishItem => {
|
|
|
+ const dishId = dishItem.dataset.id; // 单独获取每个菜品的dishId
|
|
|
+ const inCart = state.cart[dishId]; // 仅判断当前dishId的购物车状态
|
|
|
+ const controlsDiv = dishItem.querySelector('.dish-controls');
|
|
|
+
|
|
|
+ // 单独更新当前菜品的选中样式
|
|
|
+ inCart ? dishItem.classList.add('in-cart') : dishItem.classList.remove('in-cart');
|
|
|
+ // 单独更新当前菜品的加减按钮
|
|
|
+ if (inCart) {
|
|
|
+ controlsDiv.innerHTML = `
|
|
|
+ <button class="control-btn minus" data-action="minus" data-id="${dishId}">-</button>
|
|
|
+ <span class="dish-count">${inCart}</span>
|
|
|
+ <button class="control-btn plus" data-action="plus" data-id="${dishId}">+</button>
|
|
|
+ `;
|
|
|
+ } else {
|
|
|
+ controlsDiv.innerHTML = `<button class="control-btn plus" data-action="plus" data-id="${dishId}">+</button>`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+}
|
|
|
+
|
|
|
+// 渲染购物车详情 - 按dishId精准展示
|
|
|
+function renderCartDetail() {
|
|
|
+ const cartDetailList = document.getElementById('cartDetailList');
|
|
|
+ const cartItems = Object.entries(state.cart).map(([dishId, count]) => {
|
|
|
+ const dish = state.dishes.find(d => d.id === dishId);
|
|
|
+ return dish ? { ...dish, count } : null;
|
|
|
+ }).filter(Boolean);
|
|
|
+
|
|
|
+ if (cartItems.length === 0) {
|
|
|
+ cartDetailList.innerHTML = '<div style="text-align:center;padding:40px;color:#999;">购物车是空的,快来添加菜品吧~</div>';
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ cartDetailList.innerHTML = cartItems.map(item => `
|
|
|
+ <div class="cart-item">
|
|
|
+ <span class="cart-item-name">${item.dishName}</span>
|
|
|
+ <span class="cart-item-price">¥${formatPrice(item.price).toFixed(2)}</span>
|
|
|
+ <div class="dish-controls">
|
|
|
+ <button class="control-btn minus" data-action="minus" data-id="${item.id}">-</button>
|
|
|
+ <span class="dish-count">${item.count}</span>
|
|
|
+ <button class="control-btn plus" data-action="plus" data-id="${item.id}">+</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ `).join('');
|
|
|
+}
|
|
|
+
|
|
|
+// 更新菜品数量 - 核心:dishId全程唯一,操作仅影响当前菜品
|
|
|
+function updateDishCount(dishId, action) {
|
|
|
+ console.log('=== updateDishCount ===');
|
|
|
+ console.log('dishId:', dishId, 'type:', typeof dishId);
|
|
|
+ console.log('action:', action);
|
|
|
+ console.log('购物车 before:', JSON.stringify(state.cart));
|
|
|
+
|
|
|
+ if (action === 'plus') {
|
|
|
+ state.cart[dishId] = (state.cart[dishId] || 0) + 1;
|
|
|
+ // 首次加购提示
|
|
|
+ if (Object.keys(state.cart).length === 1 && state.cart[dishId] === 1) showCartTip();
|
|
|
+ } else if (action === 'minus') {
|
|
|
+ state.cart[dishId] > 1 ? state.cart[dishId]-- : delete state.cart[dishId];
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('购物车 after:', JSON.stringify(state.cart));
|
|
|
+ console.log('购物车键:', Object.keys(state.cart));
|
|
|
+ console.log('购物车值:', Object.values(state.cart));
|
|
|
+
|
|
|
+ updateCart(); // 仅更新当前菜品相关状态
|
|
|
+}
|
|
|
+
|
|
|
+// 购物车加购提示
|
|
|
+function showCartTip() {
|
|
|
+ const tip = document.getElementById('cartTip');
|
|
|
+ if (tip) {
|
|
|
+ tip.classList.add('show');
|
|
|
+ setTimeout(() => tip.classList.remove('show'), 3000);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 显示菜品详情 - 按dishId精准匹配
|
|
|
+function showDishDetail(dishId) {
|
|
|
+ const dish = state.dishes.find(d => d.id === dishId);
|
|
|
+ if (!dish) return;
|
|
|
+ state.selectedDish = dish;
|
|
|
+
|
|
|
+ const imgUrl = dish.coverImg || 'https://picsum.photos/400/400?text=菜品详情';
|
|
|
+ document.getElementById('dishDetailImg').src = imgUrl;
|
|
|
+ document.getElementById('dishDetailImg').onerror = () => this.src = 'https://picsum.photos/400/400?text=菜品详情';
|
|
|
+ document.getElementById('dishDetailName').textContent = dish.dishName;
|
|
|
+ document.getElementById('dishDetailDesc').textContent = dish.description || '暂无描述';
|
|
|
+ document.getElementById('dishDetailPrice').textContent = formatPrice(dish.price).toFixed(2);
|
|
|
+ document.getElementById('dishDetailTags').innerHTML = `
|
|
|
+ <span class="dish-tag">${dish.tasteFeature || '美味'}</span>
|
|
|
+ <span class="dish-tag">${dish.adaptScene || '推荐'}</span>
|
|
|
+ <span class="dish-tag">月售${dish.sales || 0}</span>
|
|
|
+ `;
|
|
|
+
|
|
|
+ document.getElementById('dishDetailMask').classList.add('show');
|
|
|
+ document.getElementById('dishDetail').classList.add('show');
|
|
|
+}
|
|
|
+
|
|
|
+// 隐藏菜品详情
|
|
|
+function hideDishDetail() {
|
|
|
+ document.getElementById('dishDetailMask').classList.remove('show');
|
|
|
+ document.getElementById('dishDetail').classList.remove('show');
|
|
|
+}
|
|
|
+
|
|
|
+// 切换购物车详情
|
|
|
+function toggleCartDetail() {
|
|
|
+ console.log('=== toggleCartDetail ===');
|
|
|
+ console.log('state.cart:', state.cart);
|
|
|
+ console.log('购物车键:', Object.keys(state.cart));
|
|
|
+ console.log('购物车值:', Object.values(state.cart));
|
|
|
+
|
|
|
+ const totalCount = Object.values(state.cart).reduce((sum, count) => sum + (Number(count) || 0), 0);
|
|
|
+ console.log('总数量:', totalCount);
|
|
|
+
|
|
|
+ if (totalCount === 0) {
|
|
|
+ alert('购物车为空,无法打开~');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const mask = document.getElementById('cartMask');
|
|
|
+ const detail = document.getElementById('cartDetail');
|
|
|
+ mask.classList.contains('show') ? (mask.classList.remove('show'), detail.classList.remove('show')) : (mask.classList.add('show'), detail.classList.add('show'));
|
|
|
+}
|
|
|
+
|
|
|
+// 清空购物车
|
|
|
+function clearCart() {
|
|
|
+ if (confirm('确定要清空购物车吗?清空后将恢复为空~')) {
|
|
|
+ state.cart = {};
|
|
|
+ updateCart();
|
|
|
+ toggleCartDetail();
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 结算功能 - 先显示二维码,支付成功后创建订单
|
|
|
+async function checkout() {
|
|
|
+ const totalPrice = Object.entries(state.cart).reduce((sum, [dishId, count]) => {
|
|
|
+ const dish = state.dishes.find(d => d.id === dishId);
|
|
|
+ return sum + (dish ? formatPrice(dish.price) * (Number(count) || 0) : 0);
|
|
|
+ }, 0);
|
|
|
+
|
|
|
+ // 取消起送门槛检查,只要有商品就可以结算
|
|
|
+ if (totalPrice <= 0) {
|
|
|
+ alert('购物车是空的,请先添加商品~');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 准备订单数据(暂存,支付成功后再提交)
|
|
|
+ const orderData = {
|
|
|
+ items: Object.entries(state.cart).map(([dishId, quantity]) => ({
|
|
|
+ dishId: dishId,
|
|
|
+ quantity: quantity
|
|
|
+ })),
|
|
|
+ totalAmount: totalPrice,
|
|
|
+ deliveryFee: 0,
|
|
|
+ finalAmount: totalPrice,
|
|
|
+ remark: ''
|
|
|
+ };
|
|
|
+
|
|
|
+ // 直接显示支付二维码
|
|
|
+ showPaymentQRCode(orderData);
|
|
|
+}
|
|
|
+
|
|
|
+// 显示支付二维码
|
|
|
+function showPaymentQRCode(orderData) {
|
|
|
+ // 生成临时支付单号用于验证
|
|
|
+ const paymentId = 'PAY' + Date.now();
|
|
|
+
|
|
|
+ // 显示订单信息
|
|
|
+ document.getElementById('payOrderNumber').textContent = paymentId;
|
|
|
+ document.getElementById('payAmount').textContent = `¥${orderData.finalAmount.toFixed(2)}`;
|
|
|
+
|
|
|
+ // 设置二维码图片
|
|
|
+ const qrcodeImage = document.getElementById('qrcodeImage');
|
|
|
+ qrcodeImage.src = PAYMENT_QRCODE_IMAGE;
|
|
|
+ qrcodeImage.onerror = function() {
|
|
|
+ this.src = 'https://via.placeholder.com/200x200/4caf50/ffffff?text=请添加支付二维码';
|
|
|
+ };
|
|
|
+
|
|
|
+ // 显示支付弹窗
|
|
|
+ document.getElementById('paymentMask').classList.add('show');
|
|
|
+ document.getElementById('paymentModal').classList.add('show');
|
|
|
+
|
|
|
+ // 开始轮询支付状态(传入支付单号和订单数据)
|
|
|
+ startPaymentPolling(paymentId, orderData);
|
|
|
+}
|
|
|
+
|
|
|
+// 轮询支付状态
|
|
|
+let paymentPollingTimer = null;
|
|
|
+let pollingCount = 0;
|
|
|
+const MAX_POLLING_COUNT = 60; // 最多轮询60次(2分钟)
|
|
|
+
|
|
|
+function startPaymentPolling(paymentId, orderData) {
|
|
|
+ if (paymentPollingTimer) clearInterval(paymentPollingTimer);
|
|
|
+
|
|
|
+ pollingCount = 0;
|
|
|
+
|
|
|
+ // 每2秒轮询一次支付状态
|
|
|
+ paymentPollingTimer = setInterval(async () => {
|
|
|
+ pollingCount++;
|
|
|
+
|
|
|
+ // 超时处理
|
|
|
+ if (pollingCount > MAX_POLLING_COUNT) {
|
|
|
+ stopPaymentPolling();
|
|
|
+ showPaymentFailure('支付超时,请重新下单');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // 调用后端验证支付状态
|
|
|
+ const response = await fetch(`${API_BASE_URL}/payment/verify?paymentId=${paymentId}`);
|
|
|
+ const result = await response.json();
|
|
|
+
|
|
|
+ if (result.code === 200 && result.data.paid) {
|
|
|
+ // 支付成功,停止轮询
|
|
|
+ stopPaymentPolling();
|
|
|
+
|
|
|
+ // 创建订单
|
|
|
+ await createOrderAfterPayment(orderData);
|
|
|
+ } else if (result.code === 200 && result.data.failed) {
|
|
|
+ // 支付失败
|
|
|
+ stopPaymentPolling();
|
|
|
+ showPaymentFailure('支付失败,请重试');
|
|
|
+ }
|
|
|
+ // 如果是待支付状态,继续轮询
|
|
|
+ } catch (error) {
|
|
|
+ console.error('验证支付状态失败:', error);
|
|
|
+ }
|
|
|
+ }, 2000);
|
|
|
+}
|
|
|
+
|
|
|
+// 支付成功后创建订单
|
|
|
+async function createOrderAfterPayment(orderData) {
|
|
|
+ try {
|
|
|
+ const response = await fetch(`${API_BASE_URL}/orders`, {
|
|
|
+ method: 'POST',
|
|
|
+ headers: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ },
|
|
|
+ body: JSON.stringify(orderData)
|
|
|
+ });
|
|
|
+ const result = await response.json();
|
|
|
+
|
|
|
+ if (result.code === 200) {
|
|
|
+ showPaymentSuccess();
|
|
|
+ } else {
|
|
|
+ showPaymentFailure('订单创建失败: ' + result.message);
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ console.error('创建订单失败:', error);
|
|
|
+ showPaymentFailure('订单创建失败,请联系客服');
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+function stopPaymentPolling() {
|
|
|
+ if (paymentPollingTimer) {
|
|
|
+ clearInterval(paymentPollingTimer);
|
|
|
+ paymentPollingTimer = null;
|
|
|
+ }
|
|
|
+ pollingCount = 0;
|
|
|
+}
|
|
|
+
|
|
|
+// 显示支付失败
|
|
|
+function showPaymentFailure(message) {
|
|
|
+ document.getElementById('paymentStatus').innerHTML = `
|
|
|
+ <div class="status-failure show">
|
|
|
+ <div class="failure-icon">✗</div>
|
|
|
+ <p>${message}</p>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ closePaymentModal();
|
|
|
+ }, 3000);
|
|
|
+}
|
|
|
+
|
|
|
+function showPaymentSuccess() {
|
|
|
+ document.getElementById('paymentStatus').innerHTML = `
|
|
|
+ <div class="status-success show">
|
|
|
+ <div class="success-icon">✓</div>
|
|
|
+ <p>支付成功!</p>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ closePaymentModal();
|
|
|
+ state.cart = {};
|
|
|
+ updateCart();
|
|
|
+
|
|
|
+ const mask = document.getElementById('cartMask');
|
|
|
+ const detail = document.getElementById('cartDetail');
|
|
|
+ mask.classList.remove('show');
|
|
|
+ detail.classList.remove('show');
|
|
|
+
|
|
|
+ alert('支付成功!我们将尽快为您配送~');
|
|
|
+ }, 2000);
|
|
|
+}
|
|
|
+
|
|
|
+function closePaymentModal() {
|
|
|
+ stopPaymentPolling();
|
|
|
+ document.getElementById('paymentMask').classList.remove('show');
|
|
|
+ document.getElementById('paymentModal').classList.remove('show');
|
|
|
+
|
|
|
+ document.getElementById('paymentStatus').innerHTML = `
|
|
|
+ <div class="status-checking">
|
|
|
+ <div class="loading-spinner"></div>
|
|
|
+ <p>等待支付中...</p>
|
|
|
+ </div>
|
|
|
+ `;
|
|
|
+}
|
|
|
+
|
|
|
+// 事件绑定 - 核心:事件委托精准获取当前dishId,不混淆
|
|
|
+function bindEvents() {
|
|
|
+ // 分类切换
|
|
|
+ document.getElementById('categoryList').addEventListener('click', (e) => {
|
|
|
+ const item = e.target.closest('.category-item');
|
|
|
+ if (item) {
|
|
|
+ const categoryId = item.dataset.id;
|
|
|
+ state.currentCategory = categoryId;
|
|
|
+ console.log('=== 分类切换 ===');
|
|
|
+ console.log('目标分类 ID:', categoryId);
|
|
|
+
|
|
|
+ renderCategories();
|
|
|
+ // 【补充】分类切换时建议重新渲染菜品(确保菜品区域和分类同步)
|
|
|
+ renderDishes();
|
|
|
+
|
|
|
+ // 使用 requestAnimationFrame 确保 DOM 完全更新(双重帧足够等待渲染)
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ requestAnimationFrame(() => {
|
|
|
+ // 错误1修复:拼接正确的分类区域ID → category-xxx
|
|
|
+ const section = document.getElementById(`category-${categoryId}`);
|
|
|
+ // 错误2修复:修正滚动容器类名 → .dish-container(和渲染一致)
|
|
|
+ const container = document.querySelector('.dish-container');
|
|
|
+
|
|
|
+ console.log('分类区域元素:', section);
|
|
|
+ console.log('滚动容器:', container);
|
|
|
+
|
|
|
+ if (section && container) {
|
|
|
+ section.scrollIntoView({
|
|
|
+ behavior: 'smooth',
|
|
|
+ block: 'start' // 贴顶显示,体验更好
|
|
|
+ });
|
|
|
+ console.log('滚动成功:已定位到分类 →', `category-${categoryId}`);
|
|
|
+ } else {
|
|
|
+ // 分情况提示错误,方便排查
|
|
|
+ if (!section) {
|
|
|
+ console.warn('滚动失败:未找到分类区域元素,可能该分类无菜品', `ID: category-${categoryId}`);
|
|
|
+ }
|
|
|
+ if (!container) {
|
|
|
+ console.error('滚动失败:未找到菜品滚动容器,请检查类名是否为 .dish-container');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ // 以下是你原有的其他事件逻辑(菜品操作、购物车、详情等),保留不变即可
|
|
|
+ // 菜品操作 - 精准获取当前点击按钮的dishId
|
|
|
+ document.getElementById('dishContainer').addEventListener('click', (e) => {
|
|
|
+ const btn = e.target.closest('.control-btn');
|
|
|
+ if (btn) {
|
|
|
+ e.stopPropagation();
|
|
|
+ const dishId = btn.dataset.id;
|
|
|
+ const action = btn.dataset.action;
|
|
|
+ updateDishCount(dishId, action);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ // 菜品详情
|
|
|
+ const dishItem = e.target.closest('.dish-item');
|
|
|
+ dishItem && showDishDetail(dishItem.dataset.id);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 购物车图标
|
|
|
+ document.getElementById('cartIcon').addEventListener('click', toggleCartDetail);
|
|
|
+ // 购物车遮罩
|
|
|
+ document.getElementById('cartMask').addEventListener('click', toggleCartDetail);
|
|
|
+ // 购物车内部操作
|
|
|
+ document.getElementById('cartDetailList').addEventListener('click', (e) => {
|
|
|
+ const btn = e.target.closest('.control-btn');
|
|
|
+ btn && updateDishCount(btn.dataset.id, btn.dataset.action);
|
|
|
+ });
|
|
|
+
|
|
|
+ // 清空购物车
|
|
|
+ document.getElementById('clearCart').addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ clearCart();
|
|
|
+ });
|
|
|
+ // 结算按钮
|
|
|
+ document.getElementById('checkoutBtn').addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation();
|
|
|
+ checkout();
|
|
|
+ });
|
|
|
+
|
|
|
+ // 菜品详情操作
|
|
|
+ document.getElementById('addToCartBtn').addEventListener('click', () => {
|
|
|
+ state.selectedDish && (updateDishCount(state.selectedDish.id, 'plus'), hideDishDetail());
|
|
|
+ });
|
|
|
+ document.getElementById('closeDetail').addEventListener('click', hideDishDetail);
|
|
|
+ document.getElementById('dishDetailMask').addEventListener('click', hideDishDetail);
|
|
|
+ document.getElementById('dishDetail').addEventListener('click', (e) => e.stopPropagation());
|
|
|
+
|
|
|
+ // 支付弹窗事件
|
|
|
+ document.getElementById('closePayment').addEventListener('click', closePaymentModal);
|
|
|
+ document.getElementById('paymentMask').addEventListener('click', closePaymentModal);
|
|
|
+ document.getElementById('paymentModal').addEventListener('click', (e) => e.stopPropagation());
|
|
|
+}
|
|
|
+
|
|
|
+// 页面加载完成初始化
|
|
|
+document.addEventListener('DOMContentLoaded', init);
|