之前插入 // 需要：店铺详情页、下单页、消费码页、商家中心 // 所有DOM放在#app外面（与marketOverlay同策略） // === 店铺详情覆盖层 === document.addEventListener('DOMContentLoaded', function() { // 店铺详情页DOM（插在merchantApplyPopup之后） var shopHTML = ''; // 下单页 shopHTML += ''; // 消费码页 shopHTML += ''; // 商家中心覆盖层 shopHTML += ''; // 插入DOM var applyPopup = document.getElementById('merchantApplyPopup'); if (applyPopup && applyPopup.nextSibling) { var temp = document.createElement('div'); temp.innerHTML = shopHTML; while (temp.firstChild) { applyPopup.parentNode.insertBefore(temp.firstChild, applyPopup.nextSibling); } } else { document.body.insertAdjacentHTML('beforeend', shopHTML); } }); // === 全局变量 === var shopMerchant = null; var shopItems = []; var orderCart = []; var currentOrder = null; var merchantCenterData = null; // === 店铺详情 === function openShop(merchantId) { var vm = window.__vueApp; if (!vm || !vm.token) { if(typeof vant!=='undefined') vant.showToast('请先登录'); return; } document.getElementById('marketOverlay').style.display = 'none'; document.getElementById('shopOverlay').style.display = 'flex'; document.getElementById('shopContent').innerHTML = ''; document.getElementById('shopBottomBar').style.display = 'none'; fetch('/api/merchants/' + merchantId + '/detail', {headers: {'Authorization': 'Bearer ' + vm.token}}) .then(function(r) { return r.json(); }) .then(function(d) { shopMerchant = d.merchant; shopItems = d.merchant.items || []; document.getElementById('shopTitle').textContent = shopMerchant.name || '店铺'; document.getElementById('shopBottomBar').style.display = 'block'; renderShop(); }) .catch(function() { document.getElementById('shopContent').innerHTML = ''; }); } function renderShop() { var m = shopMerchant; var items = shopItems; var catMap = {eat:'吃🍜',wear:'穿👕',live:'住🏠',use:'用🛒',go:'行🚗'}; var html = ''; // 顶部信息 html += ''; // 商品列表 if (items.length > 0) { html += ''; } else { html += ''; } document.getElementById('shopContent').innerHTML = html; } function filterShopItems(cat) { document.querySelectorAll('.shop-cat-tab').forEach(function(el) { if (el.getAttribute('data-cat') === cat) { el.style.background = '#ff6034'; el.style.color = '#fff'; el.style.fontWeight = '600'; } else { el.style.background = '#f0f0f0'; el.style.color = '#666'; el.style.fontWeight = 'normal'; } }); document.querySelectorAll('.shop-item-card').forEach(function(el) { if (!cat || el.getAttribute('data-category') === cat) { el.style.display = 'flex'; } else { el.style.display = 'none'; } }); } function closeShop() { document.getElementById('shopOverlay').style.display = 'none'; document.getElementById('shopBottomBar').style.display = 'none'; shopMerchant = null; shopItems = []; orderCart = []; } // === 下单 === function addToCart(itemId) { var item = shopItems.find(function(i) { return i.id === itemId; }); if (!item) return; var existing = orderCart.find(function(c) { return c.item_id === itemId; }); if (existing) { existing.quantity += 1; } else { orderCart.push({ item_id: item.id, name: item.name, price: parseFloat(item.price), quantity: 1, specs: item.specs || {} }); } if(typeof vant!=='undefined') vant.showToast(item.name + ' 已加入'); } function startOrder() { if (!orderCart.length) { // 没有选商品也可以下单（直接到店） } document.getElementById('orderOverlay').style.display = 'flex'; renderOrder(); } function renderOrder() { var html = ''; html += ''; // 备注 html += ''; // 提示 html += ''; document.getElementById('orderContent').innerHTML = html; updateOrderTotal(); } function changeQty(idx, delta) { orderCart[idx].quantity += delta; if (orderCart[idx].quantity <= 0) orderCart.splice(idx, 1); renderOrder(); } function updateOrderTotal() { var total = 0; orderCart.forEach(function(it) { total += it.price * it.quantity; }); document.getElementById('orderTotal').textContent = '¥' + total.toFixed(2); } function closeOrderPage() { document.getElementById('orderOverlay').style.display = 'none'; } function submitOrder() { var vm = window.__vueApp; if (!vm || !vm.token) { if(typeof vant!=='undefined') vant.showToast('请先登录'); return; } if (!shopMerchant) return; var items = orderCart.map(function(it) { return { item_id: it.item_id, name: it.name, price: it.price, quantity: it.quantity, specs: it.specs }; }); var remark = ''; var remEl = document.getElementById('orderRemark'); if (remEl) remark = remEl.value.trim(); var btn = document.getElementById('submitOrderBtn'); btn.disabled = true; btn.textContent = '提交中...'; fetch('/api/merchant-orders', { method: 'POST', headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + vm.token}, body: JSON.stringify({ merchant_id: shopMerchant.id, items: items, remark: remark }) }).then(function(r) { return r.json(); }).then(function(d) { btn.disabled = false; btn.textContent = '提交订单'; if (d.error) { if(typeof vant!=='undefined') vant.showToast(d.error); return; } currentOrder = d.order; orderCart = []; closeOrderPage(); closeShop(); showConsumeCode(d.order); }).catch(function() { btn.disabled = false; btn.textContent = '提交订单'; if(typeof vant!=='undefined') vant.showToast('下单失败'); }); } // === 消费码页面 === function showConsumeCode(order) { document.getElementById('consumeCodeOverlay').style.display = 'flex'; currentOrder = order; renderConsumeCode(); } function renderConsumeCode() { var o = currentOrder; if (!o) return; var items = typeof o.items === 'string' ? JSON.parse(o.items) : (o.items || []); var statusMap = {pending:'待到店', confirmed:'已核销', cancelled:'已取消', expired:'已过期'}; var statusColor = {pending:'#ff9800', confirmed:'#07c160', cancelled:'#999', expired:'#999'}; var html = ''; // 消费码大字 html += ''; // 订单状态 html += ''; // 商品明细 if (items.length > 0) { html += ''; } // 备注 if (o.remark) { html += ''; } // 操作按钮 if (o.status === 'pending') { html += '取消订单'; } // 发票按钮（已核销后） if (o.status === 'confirmed') { if (shopMerchant && shopMerchant.support_invoice) { html += '🧾 申请发票'; } // 导出消费清单图片 html += '📄 导出消费清单'; } document.getElementById('consumeCodeContent').innerHTML = html; // 生成二维码 setTimeout(function() { generateQR(o.consume_code); }, 100); } function generateQR(code) { var canvas = document.getElementById('qrCanvas'); if (!canvas) return; // 简易二维码：用方格矩阵模拟（无需外部库） var ctx = canvas.getContext('2d'); var size = 160; var cellSize = 4; var modules = Math.floor(size / cellSize); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, size, size); ctx.fillStyle = '#333'; // 用消费码生成伪随机矩阵 var seed = 0; for (var i = 0; i < code.length; i++) seed += code.charCodeAt(i) * (i + 1); for (var r = 0; r < modules; r++) { for (var c = 0; c < modules; c++) { seed = (seed * 1103515245 + 12345) & 0x7fffffff; if (seed % 3 !== 0) { ctx.fillRect(c * cellSize, r * cellSize, cellSize, cellSize); } } } // 中心写消费码 ctx.fillStyle = '#fff'; ctx.fillRect(size/2-30, size/2-10, 60, 20); ctx.fillStyle = '#ff6034'; ctx.font = 'bold 14px monospace'; ctx.textAlign = 'center'; ctx.fillText(code, size/2, size/2+5); } function closeConsumeCode() { document.getElementById('consumeCodeOverlay').style.display = 'none'; } function cancelOrder(oid) { var vm = window.__vueApp; if (!confirm('确定取消订单？')) return; fetch('/api/merchant-orders/' + oid + '/cancel', { method: 'POST', headers: {'Authorization': 'Bearer ' + vm.token} }).then(function(r) { return r.json(); }).then(function(d) { if (d.error) { if(typeof vant!=='undefined') vant.showToast(d.error); return; } if(typeof vant!=='undefined') vant.showToast('订单已取消'); if (currentOrder) currentOrder.status = 'cancelled'; renderConsumeCode(); }).catch(function() { if(typeof vant!=='undefined') vant.showToast('操作失败'); }); } function requestInvoice(oid) { var title = prompt('发票抬头：'); if (!title) return; var tax_no = prompt('税号（选填）：') || ''; var email = prompt('接收邮箱（选填）：') || ''; var vm = window.__vueApp; fetch('/api/merchant-orders/' + oid + '/invoice', { method: 'POST', headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + vm.token}, body: JSON.stringify({title: title, tax_no: tax_no, email: email}) }).then(function(r) { return r.json(); }).then(function(d) { if (d.error) { if(typeof vant!=='undefined') vant.showToast(d.error); return; } if(typeof vant!=='undefined') vant.showToast('发票申请已提交'); }).catch(function() { if(typeof vant!=='undefined') vant.showToast('申请失败'); }); } function exportReceipt() { // 生成消费清单图片（用canvas绘制） var o = currentOrder; if (!o) return; var items = typeof o.items === 'string' ? JSON.parse(o.items) : (o.items || []); var c = document.createElement('canvas'); c.width = 300; c.height = 400 + items.length * 30; var ctx = c.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = '#333'; ctx.font = 'bold 18px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('卷十息 · 消费清单', 150, 30); ctx.font = '14px sans-serif'; ctx.textAlign = 'left'; ctx.fillText('店名：' + (o.merchant_name || ''), 20, 60); ctx.fillText('订单号：' + o.order_no, 20, 82); ctx.fillText('消费码：' + o.consume_code, 20, 104); ctx.fillText('时间：' + new Date(o.confirmed_at || o.created_at).toLocaleString(), 20, 126); ctx.fillText('─────────────────────', 20, 148); var y = 170; items.forEach(function(it) { ctx.fillText(it.name + ' ×' + it.quantity, 20, y); ctx.textAlign = 'right'; ctx.fillText('¥' + (it.price * it.quantity).toFixed(2), 280, y); ctx.textAlign = 'left'; y += 28; }); ctx.fillText('─────────────────────', 20, y); y += 22; ctx.font = 'bold 16px sans-serif'; ctx.fillText('合计', 20, y); ctx.textAlign = 'right'; ctx.fillText('¥' + parseFloat(o.total_price).toFixed(2), 280, y); ctx.textAlign = 'center'; ctx.font = '12px sans-serif'; ctx.fillStyle = '#999'; y += 24; ctx.fillText('以到店实际价格为准 | 卷十息 · 身边即世界', 150, y); // 下载图片 var link = document.createElement('a'); link.download = '消费清单_' + o.consume_code + '.png'; link.href = c.toDataURL('image/png'); link.click(); } // === 商家中心 === function openMerchantCenter() { var vm = window.__vueApp; if (!vm || !vm.token) { if(typeof vant!=='undefined') vant.showToast('请先登录'); return; } document.getElementById('merchantCenterOverlay').style.display = 'flex'; document.getElementById('merchantCenterContent').innerHTML = ''; fetch('/api/merchant-orders/shop', {headers: {'Authorization': 'Bearer ' + vm.token}}) .then(function(r) { return r.json(); }) .then(function(d) { merchantCenterData = d; renderMerchantCenter(); }) .catch(function(e) { // 不是商家 document.getElementById('merchantCenterContent').innerHTML = ''; }); } function renderMerchantCenter() { var d = merchantCenterData; if (!d || !d.merchant) return; var m = d.merchant; var orders = d.orders || []; var pending = orders.filter(function(o) { return o.status === 'pending'; }); var confirmed = orders.filter(function(o) { return o.status === 'confirmed'; }); var catMap = {eat:'吃🍜',wear:'穿👕',live:'住🏠',use:'用🛒',go:'行🚗'}; var html = ''; // 店铺信息卡片 html += ''; // 核销入口 html += ''; // 待核销订单列表 html += ''; // 已完成订单 html += ''; // 商品管理入口 html += ''; // 电脑端入口 html += ''; document.getElementById('merchantCenterContent').innerHTML = html; } function closeMerchantCenter() { document.getElementById('merchantCenterOverlay').style.display = 'none'; } function copyText(text) { if (navigator.clipboard) { navigator.clipboard.writeText(text).then(function() { if(typeof vant!=='undefined') vant.showToast('已复制'); }); } else { var inp = document.createElement('input'); inp.value = text; document.body.appendChild(inp); inp.select(); document.execCommand('copy'); document.body.removeChild(inp); if(typeof vant!=='undefined') vant.showToast('已复制'); } } function verifyOrder() { var code = document.getElementById('verifyCodeInput').value.trim(); if (!code || code.length !== 6) { if(typeof vant!=='undefined') vant.showToast('请输入6位消费码'); return; } var vm = window.__vueApp; document.getElementById('verifyResult').innerHTML = ''; fetch('/api/merchant-orders/verify', { method: 'POST', headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + vm.token}, body: JSON.stringify({consume_code: code}) }).then(function(r) { return r.json(); }) .then(function(d) { if (d.error) { document.getElementById('verifyResult').innerHTML = ''; return; } var o = d.order; var oItems = typeof o.items === 'string' ? JSON.parse(o.items) : (o.items || []); var html = ''; document.getElementById('verifyResult').innerHTML = html; }) .catch(function() { document.getElementById('verifyResult').innerHTML = ''; }); } function confirmOrderById(oid) { var vm = window.__vueApp; if (!confirm('确认核销此订单？')) return; fetch('/api/merchant-orders/confirm', { method: 'POST', headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + vm.token}, body: JSON.stringify({order_id: oid}) }).then(function(r) { return r.json(); }) .then(function(d) { if (d.error) { if(typeof vant!=='undefined') vant.showToast(d.error); return; } if(typeof vant!=='undefined') vant.showToast('核销成功'); // 刷新商家中心 openMerchantCenter(); }) .catch(function() { if(typeof vant!=='undefined') vant.showToast('核销失败'); }); } function printReceipt(oid) { // 生成消费清单图片供打印 var d = merchantCenterData; if (!d || !d.orders) return; var o = d.orders.find(function(x) { return x.id === oid; }); if (!o) return; var items = typeof o.items === 'string' ? JSON.parse(o.items) : (o.items || []); var c = document.createElement('canvas'); c.width = 300; c.height = 350 + items.length * 30; var ctx = c.getContext('2d'); ctx.fillStyle = '#fff'; ctx.fillRect(0, 0, c.width, c.height); ctx.fillStyle = '#333'; ctx.font = 'bold 18px sans-serif'; ctx.textAlign = 'center'; ctx.fillText('卷十息 · 消费清单', 150, 30); ctx.font = '14px sans-serif'; ctx.textAlign = 'left'; ctx.fillText('店名：' + (d.merchant.name||''), 20, 60); ctx.fillText('消费码：' + o.consume_code, 20, 82); ctx.fillText('用户：' + (o.user_name||''), 20, 104); ctx.fillText('下单时间：' + new Date(o.created_at).toLocaleString(), 20, 126); ctx.fillText('─────────────────────', 20, 148); var y = 170; items.forEach(function(it) { ctx.fillText(it.name + ' ×' + it.quantity, 20, y); ctx.textAlign = 'right'; ctx.fillText('¥' + (it.price*it.quantity).toFixed(2), 280, y); ctx.textAlign = 'left'; y += 28; }); ctx.fillText('─────────────────────', 20, y); y += 22; ctx.font = 'bold 16px sans-serif'; ctx.fillText('合计', 20, y); ctx.textAlign = 'right'; ctx.fillText('¥' + parseFloat(o.total_price).toFixed(2), 280, y); ctx.textAlign = 'center'; ctx.font = '12px sans-serif'; ctx.fillStyle = '#999'; y += 24; ctx.fillText('以到店实际价格为准 | 卷十息', 150, y); var link = document.createElement('a'); link.download = '消费清单_' + o.consume_code + '.png'; link.href = c.toDataURL('image/png'); link.click(); } // 商品管理（简易版） function openItemManager() { var items = shopItems.length ? shopItems : []; var html = ''; html += ''; html += '← 返回商家中心'; document.getElementById('merchantCenterContent').innerHTML = html; // 加载最新商品列表 var vm = window.__vueApp; var mid = merchantCenterData.merchant.id; fetch('/api/merchants/' + mid + '/items', {headers: {'Authorization': 'Bearer ' + vm.token}}) .then(function(r) { return r.json(); }) .then(function(d) { shopItems = d.items || []; // 重新渲染 var listHtml = ''; if (shopItems.length === 0) { listHtml = ''; } shopItems.forEach(function(it) { listHtml += ''; }); var listEl = document.getElementById('itemList'); if (listEl) listEl.innerHTML = listHtml; }); } function addItemForm() { var html = ''; document.getElementById('addItemArea').innerHTML = html; } function submitNewItem() { var vm = window.__vueApp; var mid = merchantCenterData.merchant.id; var name = document.getElementById('newItemName').value.trim(); var price = document.getElementById('newItemPrice').value; var cat = document.getElementById('newItemCat').value.trim(); var desc = document.getElementById('newItemDesc').value.trim(); if (!name) { if(typeof vant!=='undefined') vant.showToast('请输入名称'); return; } if (!price) { if(typeof vant!=='undefined') vant.showToast('请输入价格'); return; } fetch('/api/merchants/' + mid + '/items', { method: 'POST', headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + vm.token}, body: JSON.stringify({name: name, price: price, category: cat, description: desc}) }).then(function(r) { return r.json(); }) .then(function(d) { if (d.error) { if(typeof vant!=='undefined') vant.showToast(d.error); return; } if(typeof vant!=='undefined') vant.showToast('添加成功'); openItemManager(); // 刷新 }) .catch(function() { if(typeof vant!=='undefined') vant.showToast('添加失败'); }); } function deleteItem(iid) { if (!confirm('确定删除？')) return; var vm = window.__vueApp; var mid = merchantCenterData.merchant.id; fetch('/api/merchants/' + mid + '/items/' + iid, { method: 'DELETE', headers: {'Authorization': 'Bearer ' + vm.token} }).then(function(r) { return r.json(); }) .then(function(d) { if(typeof vant!=='undefined') vant.showToast('已删除'); openItemManager(); }) .catch(function() { if(typeof vant!=='undefined') vant.showToast('删除失败'); }); } // === 修改大市场商家卡片：点击进入店铺 === var _origRenderMerchants = renderMerchants; renderMerchants = function() { if (!marketMerchants.length) { document.getElementById('marketList').innerHTML = ''; return; } var catMap = {eat:'吃🍜',wear:'穿👕',live:'住🏠',use:'用🛒',go:'行🚗'}; var html = ''; marketMerchants.forEach(function(m) { var dist = m.distance ? (m.distance < 1000 ? Math.round(m.distance) + 'm' : (m.distance/1000).toFixed(1) + 'km') : ''; html += ''; }); document.getElementById('marketList').innerHTML = html; }; // === 查看我的订单 === function openMyOrders() { var vm = window.__vueApp; if (!vm || !vm.token) { if(typeof vant!=='undefined') vant.showToast('请先登录'); return; } document.getElementById('consumeCodeOverlay').style.display = 'flex'; document.getElementById('consumeCodeContent').innerHTML = ''; fetch('/api/merchant-orders/my', {headers: {'Authorization': 'Bearer ' + vm.token}}) .then(function(r) { return r.json(); }) .then(function(d) { var orders = d.orders || []; var statusMap = {pending:'待到店', confirmed:'已核销', cancelled:'已取消', expired:'已过期'}; var statusColor = {pending:'#ff9800', confirmed:'#07c160', cancelled:'#999', expired:'#999'}; var html = ''; if (orders.length === 0) { html += ''; } orders.forEach(function(o) { var items = typeof o.items === 'string' ? JSON.parse(o.items) : (o.items || []); html += ''; }); document.getElementById('consumeCodeContent').innerHTML = html; }) .catch(function() { document.getElementById('consumeCodeContent').innerHTML = ''; }); }