749 lines
25 KiB
HTML
749 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>订单详情</title>
|
||
<style>
|
||
* {
|
||
margin: 0;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
body {
|
||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
|
||
background-color: #f7f7f7;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
.header {
|
||
background-color: #013820;
|
||
color: white;
|
||
padding: 15px 20px;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.back-btn {
|
||
width: 24px;
|
||
height: 24px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.title-text {
|
||
flex: 1;
|
||
margin: 0 10px;
|
||
}
|
||
|
||
.contact-icon {
|
||
width: 20px;
|
||
height: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.content {
|
||
padding: 10px;
|
||
}
|
||
|
||
.card {
|
||
background-color: white;
|
||
border-radius: 8px;
|
||
padding: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.shop-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.shop-info {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.shop-icon {
|
||
width: 11px;
|
||
height: 10px;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
.shop-name {
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
color: #1f1f1f;
|
||
margin-right: 7px;
|
||
}
|
||
|
||
.market-name {
|
||
font-size: 11px;
|
||
color: #575859;
|
||
}
|
||
|
||
.arrow-right {
|
||
width: 4px;
|
||
height: 7px;
|
||
}
|
||
|
||
.product-list {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.product-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.product-left {
|
||
display: flex;
|
||
}
|
||
|
||
.product-img {
|
||
width: 46px;
|
||
height: 46px;
|
||
border-radius: 8px;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
background: linear-gradient(135deg, #e0e0e0 0%, #f5f5f5 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 24px;
|
||
border: 1px solid #ddd;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.product-info {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 2px;
|
||
color: #808080;
|
||
}
|
||
|
||
.product-name {
|
||
font-size: 13px;
|
||
color: #1f1f1f;
|
||
}
|
||
|
||
.product-spec {
|
||
font-size: 10px;
|
||
}
|
||
|
||
.product-right {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
color: #ff6300;
|
||
}
|
||
|
||
.product-right .label {
|
||
font-size: 13px;
|
||
}
|
||
|
||
.product-right .price {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.divider {
|
||
height: 1px;
|
||
background-color: #ededed;
|
||
margin: 15px 0;
|
||
}
|
||
|
||
.price-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.price-label {
|
||
font-size: 13px;
|
||
color: #1f1f1f;
|
||
}
|
||
|
||
.price-value {
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.price-value.discount {
|
||
color: #ff6300;
|
||
}
|
||
|
||
.total-price {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.total-price .label {
|
||
font-size: 13px;
|
||
color: #1f1f1f;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.toggle-icon {
|
||
width: 4px;
|
||
height: 7px;
|
||
margin-left: 8px;
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.toggle-icon.up {
|
||
transform: rotate(-90deg);
|
||
}
|
||
|
||
.total-price .value {
|
||
font-size: 19px;
|
||
color: #ff6300;
|
||
}
|
||
|
||
.section-title {
|
||
font-size: 13px;
|
||
font-weight: bold;
|
||
color: #1f1f1f;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.info-row {
|
||
display: flex;
|
||
margin: 10px 0;
|
||
}
|
||
|
||
.info-label {
|
||
width: 85px;
|
||
font-size: 13px;
|
||
color: #808080;
|
||
}
|
||
|
||
.info-value {
|
||
width: calc(100% - 85px);
|
||
font-size: 13px;
|
||
color: #1f1f1f;
|
||
}
|
||
|
||
.copy-btn {
|
||
color: #808080;
|
||
margin-left: 8px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.copy-btn:hover {
|
||
color: #013820;
|
||
}
|
||
|
||
.footer {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: white;
|
||
padding: 15px 25px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
gap: 15px;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.btn {
|
||
padding: 10px 25px;
|
||
border-radius: 4px;
|
||
border: 1px solid;
|
||
font-size: 14px;
|
||
cursor: pointer;
|
||
transition: all 0.3s;
|
||
min-width: 85px;
|
||
text-align: center;
|
||
}
|
||
|
||
.btn-primary {
|
||
background-color: #013820;
|
||
color: white;
|
||
border-color: #013820;
|
||
}
|
||
|
||
.btn-primary:hover {
|
||
background-color: #025530;
|
||
}
|
||
|
||
.btn-info {
|
||
background-color: white;
|
||
color: #013820;
|
||
border-color: #dcdcdc;
|
||
}
|
||
|
||
.btn-info:hover {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.hidden {
|
||
display: none;
|
||
}
|
||
|
||
.view-all {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 10px 0;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.view-all-text {
|
||
font-size: 11px;
|
||
color: #808080;
|
||
}
|
||
|
||
.view-all .arrow {
|
||
width: 4px;
|
||
height: 7px;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.arrow.down {
|
||
transform: rotate(90deg);
|
||
}
|
||
|
||
.arrow.up {
|
||
transform: rotate(-90deg);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="header">
|
||
<span class="back-btn" onclick="goBack()">◀</span>
|
||
<span class="title-text" id="pageTitle">订单详情</span>
|
||
<span class="contact-icon" onclick="contactMerchant()">💬</span>
|
||
</div>
|
||
|
||
<div class="content">
|
||
<!-- 店铺和商品信息 -->
|
||
<div class="card">
|
||
<div id="shopOrdersContainer">
|
||
<!-- 动态生成店铺订单 -->
|
||
</div>
|
||
|
||
<div class="divider"></div>
|
||
|
||
<!-- 价格明细 -->
|
||
<div id="priceDetail" class="hidden">
|
||
<!-- 动态生成价格明细 -->
|
||
</div>
|
||
|
||
<div class="total-price">
|
||
<div class="label" onclick="togglePriceDetail()">
|
||
实付款
|
||
<span class="toggle-icon" id="toggleIcon">›</span>
|
||
</div>
|
||
<div class="value">
|
||
¥<span id="totalMoney">0.00</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="footer" style="position: relative; padding: 15px 0; margin-top: 15px;">
|
||
<button class="btn btn-info" id="refundBtn" onclick="applyRefund()">申请售后</button>
|
||
<button class="btn btn-primary" onclick="contactMerchant()">联系商家</button>
|
||
<button class="btn btn-primary" id="callBtn" onclick="callMerchant()">致电商家</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 配送信息 -->
|
||
<div class="card">
|
||
<div class="section-title">配送信息</div>
|
||
<div class="info-row">
|
||
<div class="info-label">配送方式</div>
|
||
<div class="info-value" id="deliveryType">同城配送</div>
|
||
</div>
|
||
<div class="info-row" id="pickAddressRow" class="hidden">
|
||
<div class="info-label">自提点地址</div>
|
||
<div class="info-value" id="pickAddress"></div>
|
||
</div>
|
||
<div class="info-row" id="expressCompanyRow" class="hidden">
|
||
<div class="info-label">快递公司</div>
|
||
<div class="info-value" id="expressCompany"></div>
|
||
</div>
|
||
<div class="info-row" id="expressNoRow" class="hidden">
|
||
<div class="info-label">快递单号</div>
|
||
<div class="info-value">
|
||
<span id="expressNo"></span>
|
||
<span class="copy-btn" onclick="copyText('expressNo')">复制</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">收货地址</div>
|
||
<div class="info-value" id="receiverInfo">
|
||
<div id="receiverAddress"></div>
|
||
<div id="receiverContact"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 订单信息 -->
|
||
<div class="card">
|
||
<div class="section-title">订单信息</div>
|
||
<div class="info-row">
|
||
<div class="info-label">订单备注</div>
|
||
<div class="info-value" id="orderRemark">无</div>
|
||
</div>
|
||
<div class="info-row" style="cursor: pointer;" onclick="copyText('unitOrderNo')">
|
||
<div class="info-label">订单编号</div>
|
||
<div class="info-value" id="unitOrderNo"></div>
|
||
</div>
|
||
<div class="info-row">
|
||
<div class="info-label">下单时间</div>
|
||
<div class="info-value" id="createTime"></div>
|
||
</div>
|
||
<div class="info-row" id="preSaleStageRow" class="hidden">
|
||
<div class="info-label">预售状态</div>
|
||
<div class="info-value" id="preSaleStage"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script>
|
||
// 从URL获取订单编号
|
||
function getQueryParam(name) {
|
||
const urlParams = new URLSearchParams(window.location.search);
|
||
return urlParams.get(name);
|
||
}
|
||
|
||
const unitOrderNo = getQueryParam('unitOrderNo');
|
||
|
||
// 模拟订单详情数据
|
||
const mockOrderDetail = {
|
||
unitOrderNo: unitOrderNo || 'ORDER20250116001',
|
||
unitType: 2,
|
||
status: 1,
|
||
refundStatus: 0,
|
||
orderCategory: 1,
|
||
marketName: '大妈集市',
|
||
marketId: '1001',
|
||
shopId: '2001',
|
||
totalMoney: 88.50,
|
||
productMoney: 80.00,
|
||
packageMoney: 2.00,
|
||
deliveryMoney: 8.00,
|
||
couponMoney: 1.50,
|
||
dispatchMoney: 0,
|
||
dispatchMode: 0,
|
||
deliveryType: 1, // 0:自提 1:同城配送 2:全国快递
|
||
pickAddress: '',
|
||
expressCompany: '',
|
||
expressNo: '',
|
||
receiver: {
|
||
poi: '北京市朝阳区某某小区',
|
||
detail: '1号楼2单元302',
|
||
receiverName: '张三',
|
||
receiverPhone: '13800138000'
|
||
},
|
||
remark: '请尽快配送',
|
||
createTime: '2025-01-16 10:30:00',
|
||
contactPhone: '400-123-4567',
|
||
shopOrders: [
|
||
{
|
||
shopName: '新鲜蔬菜店',
|
||
shopId: '2001',
|
||
products: [
|
||
{
|
||
productId: '3001',
|
||
productName: '新鲜白菜',
|
||
productImg: '🥬',
|
||
productSpecName: '500g/份',
|
||
originPrice: 5.00,
|
||
finalPrice: 4.50,
|
||
productCount: 2
|
||
},
|
||
{
|
||
productId: '3002',
|
||
productName: '有机西红柿',
|
||
productImg: '🍅',
|
||
productSpecName: '1kg/份',
|
||
originPrice: 12.00,
|
||
finalPrice: 11.50,
|
||
productCount: 3
|
||
},
|
||
{
|
||
productId: '3003',
|
||
productName: '新鲜土豆',
|
||
productImg: '🥔',
|
||
productSpecName: '500g/份',
|
||
originPrice: 6.00,
|
||
finalPrice: 5.50,
|
||
productCount: 1
|
||
},
|
||
{
|
||
productId: '3004',
|
||
productName: '农家黄瓜',
|
||
productImg: '🥒',
|
||
productSpecName: '500g/份',
|
||
originPrice: 8.00,
|
||
finalPrice: 7.50,
|
||
productCount: 2
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
|
||
let showAllProducts = false;
|
||
let showPriceDetail = false;
|
||
|
||
// 初始化页面
|
||
function init() {
|
||
renderOrderDetail(mockOrderDetail);
|
||
}
|
||
|
||
// 渲染订单详情
|
||
function renderOrderDetail(order) {
|
||
// 设置标题
|
||
const title = getOrderTitle(order);
|
||
document.getElementById('pageTitle').textContent = title;
|
||
|
||
// 设置总价
|
||
document.getElementById('totalMoney').textContent = order.totalMoney.toFixed(2);
|
||
|
||
// 渲染店铺订单
|
||
const shopOrdersContainer = document.getElementById('shopOrdersContainer');
|
||
shopOrdersContainer.innerHTML = order.shopOrders.map((shopOrder, shopIndex) => {
|
||
const productCount = shopOrder.products.length;
|
||
const displayProducts = showAllProducts ? shopOrder.products : shopOrder.products.slice(0, 3);
|
||
const remainingProducts = showAllProducts ? [] : shopOrder.products.slice(3);
|
||
|
||
return `
|
||
<div class="shop-order">
|
||
<div class="shop-header">
|
||
<div class="shop-info">
|
||
<span class="shop-icon">🏪</span>
|
||
<span class="shop-name">${shopOrder.shopName}</span>
|
||
<span class="market-name">(${order.marketName})</span>
|
||
</div>
|
||
<span class="arrow-right">›</span>
|
||
</div>
|
||
<div class="product-list">
|
||
${displayProducts.map(product => `
|
||
<div class="product-item">
|
||
<div class="product-left">
|
||
<div class="product-img" onclick="toProduct('${product.productId}')">${product.productImg}</div>
|
||
<div class="product-info">
|
||
<div class="product-name">${product.productName}</div>
|
||
<div class="product-spec">规格：${product.productSpecName}</div>
|
||
<div class="product-spec">单价：¥${product.originPrice.toFixed(2)}</div>
|
||
<div class="product-spec">数量：${product.productCount}</div>
|
||
</div>
|
||
</div>
|
||
<div class="product-right">
|
||
<span class="label">实付</span>
|
||
<span class="price">¥${product.finalPrice.toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
${productCount > 3 && !showAllProducts ? `
|
||
<div class="view-all" onclick="toggleProducts()">
|
||
<span class="view-all-text">查看全部</span>
|
||
<span class="arrow down">›</span>
|
||
</div>
|
||
` : ''}
|
||
${remainingProducts.length > 0 && showAllProducts ? `
|
||
${remainingProducts.map(product => `
|
||
<div class="product-item">
|
||
<div class="product-left">
|
||
<div class="product-img" onclick="toProduct('${product.productId}')">${product.productImg}</div>
|
||
<div class="product-info">
|
||
<div class="product-name">${product.productName}</div>
|
||
<div class="product-spec">规格：${product.productSpecName}</div>
|
||
<div class="product-spec">单价：¥${product.originPrice.toFixed(2)}</div>
|
||
<div class="product-spec">数量：${product.productCount}</div>
|
||
</div>
|
||
</div>
|
||
<div class="product-right">
|
||
<span class="label">实付</span>
|
||
<span class="price">¥${product.finalPrice.toFixed(2)}</span>
|
||
</div>
|
||
</div>
|
||
`).join('')}
|
||
` : ''}
|
||
${showAllProducts && productCount > 3 ? `
|
||
<div class="view-all" onclick="toggleProducts()">
|
||
<span class="view-all-text">收起全部</span>
|
||
<span class="arrow up">›</span>
|
||
</div>
|
||
` : ''}
|
||
</div>
|
||
</div>
|
||
`;
|
||
}).join('');
|
||
|
||
// 渲染价格明细
|
||
const priceDetailHtml = `
|
||
${order.orderCategory === 1 ? `
|
||
<div class="price-row">
|
||
<div class="price-label">商品金额</div>
|
||
<div class="price-value">¥${order.productMoney.toFixed(2)}</div>
|
||
</div>
|
||
` : ''}
|
||
<div class="price-row">
|
||
<div class="price-label">包装费</div>
|
||
<div class="price-value">¥${order.packageMoney.toFixed(2)}</div>
|
||
</div>
|
||
${order.dispatchMode === 1 ? `
|
||
<div class="price-row">
|
||
<div class="price-label">调度费(多店铺)</div>
|
||
<div class="price-value">¥${order.dispatchMoney.toFixed(2)}</div>
|
||
</div>
|
||
` : ''}
|
||
<div class="price-row">
|
||
<div class="price-label">配送费</div>
|
||
<div class="price-value">¥${order.deliveryMoney.toFixed(2)}</div>
|
||
</div>
|
||
<div class="price-row">
|
||
<div class="price-label">优惠券</div>
|
||
<div class="price-value discount">-¥${order.couponMoney.toFixed(2)}</div>
|
||
</div>
|
||
`;
|
||
document.getElementById('priceDetail').innerHTML = priceDetailHtml;
|
||
|
||
// 配送信息
|
||
const deliveryTypeText = order.deliveryType === 0 ? '自提' :
|
||
order.deliveryType === 1 ? '同城配送' : '全国快递';
|
||
document.getElementById('deliveryType').textContent = deliveryTypeText;
|
||
|
||
if (order.deliveryType === 0 && order.pickAddress) {
|
||
document.getElementById('pickAddressRow').classList.remove('hidden');
|
||
document.getElementById('pickAddress').textContent = order.pickAddress;
|
||
}
|
||
|
||
if (order.deliveryType === 2) {
|
||
if (order.expressCompany) {
|
||
document.getElementById('expressCompanyRow').classList.remove('hidden');
|
||
document.getElementById('expressCompany').textContent = order.expressCompany;
|
||
}
|
||
if (order.expressNo) {
|
||
document.getElementById('expressNoRow').classList.remove('hidden');
|
||
document.getElementById('expressNo').textContent = order.expressNo;
|
||
}
|
||
}
|
||
|
||
document.getElementById('receiverAddress').textContent =
|
||
order.receiver.poi + order.receiver.detail;
|
||
document.getElementById('receiverContact').textContent =
|
||
order.receiver.receiverName + ' ' + order.receiver.receiverPhone;
|
||
|
||
// 订单信息
|
||
document.getElementById('orderRemark').textContent = order.remark || '无';
|
||
document.getElementById('unitOrderNo').textContent = order.unitOrderNo;
|
||
document.getElementById('createTime').textContent = order.createTime;
|
||
|
||
// 显示/隐藏申请售后按钮
|
||
if (order.refundStatus === 0 && order.status < 5) {
|
||
document.getElementById('refundBtn').classList.remove('hidden');
|
||
} else {
|
||
document.getElementById('refundBtn').classList.add('hidden');
|
||
}
|
||
|
||
// 显示/隐藏致电商家按钮
|
||
if (!order.contactPhone) {
|
||
document.getElementById('callBtn').classList.add('hidden');
|
||
}
|
||
}
|
||
|
||
// 获取订单标题
|
||
function getOrderTitle(order) {
|
||
const { status, refundStatus } = order;
|
||
|
||
if (refundStatus === -2) {
|
||
return '申请退款中';
|
||
}
|
||
|
||
switch (status) {
|
||
case 0: return '待付款';
|
||
case 1: return '待发货';
|
||
case 2: return '已取货';
|
||
case 3: return '待收货';
|
||
case 5: return '已完成';
|
||
case 6: return '已取消';
|
||
case 7: return '退款中';
|
||
case 8: return '已退款';
|
||
default: return '订单详情';
|
||
}
|
||
}
|
||
|
||
// 切换商品显示
|
||
function toggleProducts() {
|
||
showAllProducts = !showAllProducts;
|
||
renderOrderDetail(mockOrderDetail);
|
||
}
|
||
|
||
// 切换价格明细
|
||
function togglePriceDetail() {
|
||
showPriceDetail = !showPriceDetail;
|
||
const priceDetail = document.getElementById('priceDetail');
|
||
const toggleIcon = document.getElementById('toggleIcon');
|
||
|
||
if (showPriceDetail) {
|
||
priceDetail.classList.remove('hidden');
|
||
toggleIcon.classList.add('up');
|
||
} else {
|
||
priceDetail.classList.add('hidden');
|
||
toggleIcon.classList.remove('up');
|
||
}
|
||
}
|
||
|
||
// 返回上一页
|
||
function goBack() {
|
||
window.history.back();
|
||
}
|
||
|
||
// 跳转到商品详情
|
||
function toProduct(productId) {
|
||
console.log('跳转到商品详情:', productId);
|
||
}
|
||
|
||
// 联系商家
|
||
function contactMerchant() {
|
||
console.log('联系商家');
|
||
alert('打开聊天窗口');
|
||
}
|
||
|
||
// 致电商家
|
||
function callMerchant() {
|
||
if (mockOrderDetail.contactPhone) {
|
||
window.location.href = `tel:${mockOrderDetail.contactPhone}`;
|
||
}
|
||
}
|
||
|
||
// 申请售后
|
||
function applyRefund() {
|
||
console.log('申请售后');
|
||
window.location.href = `refund-standalone.html?unitOrderNo=${mockOrderDetail.unitOrderNo}`;
|
||
}
|
||
|
||
// 复制文本
|
||
function copyText(elementId) {
|
||
const text = document.getElementById(elementId).textContent;
|
||
navigator.clipboard.writeText(text).then(() => {
|
||
alert('复制成功');
|
||
}).catch(() => {
|
||
alert('复制失败');
|
||
});
|
||
}
|
||
|
||
// 页面加载完成后初始化
|
||
document.addEventListener('DOMContentLoaded', init);
|
||
</script>
|
||
</body>
|
||
</html>
|