323 lines
16 KiB
HTML
323 lines
16 KiB
HTML
<!DOCTYPE html><html lang="zh-CN"><head>
|
|
<meta charset="utf-8">
|
|
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
|
|
<title>补发处理 - 杜康合伙人</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;700&family=Be+Vietnam+Pro:wght@400;500&family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet">
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
"colors": {
|
|
"heritage-red": "#A61D24",
|
|
"primary": "#820012",
|
|
"inverse-primary": "#ffb3ae",
|
|
"on-primary": "#ffffff",
|
|
"secondary": "#735c00",
|
|
"surface-dim": "#dadad8",
|
|
"surface": "#faf9f7",
|
|
"status-blue": "#2A6EBB",
|
|
"primary-fixed-dim": "#ffb3ae",
|
|
"subtle-gray": "#999999",
|
|
"aged-amber": "#FFBF00",
|
|
"on-surface-variant": "#5a413f",
|
|
"tertiary-fixed-dim": "#bec9c2",
|
|
"surface-variant": "#e3e2e0",
|
|
"surface-tint": "#b3272c",
|
|
"on-surface": "#1a1c1b",
|
|
"on-secondary": "#ffffff",
|
|
"on-secondary-container": "#745c00",
|
|
"surface-container-high": "#e9e8e6",
|
|
"on-secondary-fixed": "#241a00",
|
|
"error-container": "#ffdad6",
|
|
"primary-container": "#a61d24",
|
|
"inverse-surface": "#2f3130",
|
|
"tertiary-container": "#4e5852",
|
|
"outline-variant": "#e2bebc",
|
|
"on-tertiary": "#ffffff",
|
|
"secondary-container": "#fed65b",
|
|
"surface-container-highest": "#e3e2e0",
|
|
"primary-fixed": "#ffdad7",
|
|
"surface-bright": "#faf9f7",
|
|
"ink-black": "#1A1A1A",
|
|
"error": "#ba1a1a",
|
|
"surface-container": "#efeeec",
|
|
"surface-container-lowest": "#ffffff",
|
|
"success-green": "#2D6A4F",
|
|
"on-error": "#ffffff",
|
|
"on-secondary-fixed-variant": "#574500",
|
|
"on-primary-fixed-variant": "#910817",
|
|
"inverse-on-surface": "#f1f1ef",
|
|
"on-error-container": "#93000a",
|
|
"on-background": "#1a1c1b",
|
|
"outline": "#8d706e",
|
|
"on-primary-fixed": "#410004",
|
|
"tertiary": "#37413b",
|
|
"on-tertiary-container": "#c2cdc6",
|
|
"secondary-fixed-dim": "#e9c349",
|
|
"on-tertiary-fixed": "#141e19",
|
|
"surface-container-low": "#f4f3f1",
|
|
"secondary-fixed": "#ffe088",
|
|
"on-tertiary-fixed-variant": "#3f4943",
|
|
"background": "#faf9f7",
|
|
"tertiary-fixed": "#dae5dd",
|
|
"on-primary-container": "#ffb9b4"
|
|
},
|
|
"borderRadius": {
|
|
"DEFAULT": "0.25rem",
|
|
"lg": "0.5rem",
|
|
"xl": "0.75rem",
|
|
"full": "9999px"
|
|
},
|
|
"spacing": {
|
|
"margin-page": "20px",
|
|
"gutter-card": "12px",
|
|
"stack-lg": "32px",
|
|
"stack-md": "16px",
|
|
"stack-sm": "4px",
|
|
"base": "8px"
|
|
},
|
|
"fontFamily": {
|
|
"body-lg": ["Be Vietnam Pro"],
|
|
"headline-lg": ["Manrope"],
|
|
"body-md": ["Be Vietnam Pro"],
|
|
"coupon-amount": ["Manrope"],
|
|
"headline-xl": ["Manrope"],
|
|
"headline-md": ["Manrope"],
|
|
"label-md": ["Inter"],
|
|
"headline-lg-mobile": ["Manrope"]
|
|
},
|
|
"fontSize": {
|
|
"body-lg": ["16px", {"lineHeight": "24px", "fontWeight": "400"}],
|
|
"headline-lg": ["24px", {"lineHeight": "32px", "fontWeight": "600"}],
|
|
"body-md": ["14px", {"lineHeight": "20px", "fontWeight": "400"}],
|
|
"coupon-amount": ["28px", {"lineHeight": "28px", "fontWeight": "700"}],
|
|
"headline-xl": ["32px", {"lineHeight": "40px", "letterSpacing": "-0.02em", "fontWeight": "700"}],
|
|
"headline-md": ["18px", {"lineHeight": "26px", "fontWeight": "600"}],
|
|
"label-md": ["12px", {"lineHeight": "16px", "letterSpacing": "0.05em", "fontWeight": "500"}],
|
|
"headline-lg-mobile": ["20px", {"lineHeight": "28px", "fontWeight": "600"}]
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
vertical-align: middle;
|
|
}
|
|
.stepper-line {
|
|
height: 2px;
|
|
flex-grow: 1;
|
|
background-color: #E3E2E0;
|
|
margin: 0 8px;
|
|
}
|
|
.stepper-line.active {
|
|
background-color: #A61D24;
|
|
}
|
|
.glass-header {
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
.reshipment-list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.safe-bottom {
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-surface text-on-surface font-body-md selection:bg-heritage-red/20">
|
|
<!-- Top AppBar -->
|
|
<header class="fixed top-0 left-0 w-full z-50 flex justify-between items-center px-margin-page h-16 bg-surface shadow-sm glass-header">
|
|
<div class="flex items-center gap-4">
|
|
<button class="active:opacity-70 transition-all duration-200">
|
|
<span class="material-symbols-outlined text-heritage-red">arrow_back</span>
|
|
</button>
|
|
<h1 class="font-headline-lg-mobile text-headline-lg-mobile text-heritage-red font-bold">补发处理</h1>
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<span class="material-symbols-outlined text-on-surface-variant">notifications</span>
|
|
</div>
|
|
</header>
|
|
<main class="pt-16 pb-24 min-h-screen">
|
|
<!-- Alert Banner -->
|
|
<div class="bg-aged-amber/10 border-b border-aged-amber/20 px-margin-page py-3 flex items-center gap-3">
|
|
<span class="material-symbols-outlined text-aged-amber" style="font-variation-settings: 'FILL' 1;">warning</span>
|
|
<p class="font-label-md text-label-md text-secondary font-semibold">您有 2 笔补发订单待配送</p>
|
|
</div>
|
|
<!-- Reshipment List -->
|
|
<div class="reshipment-list px-margin-page space-y-stack-md mt-stack-md overflow-y-auto">
|
|
<!-- Card 1: 待配送 -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-5 border border-heritage-red/5">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="px-2 py-1 bg-heritage-red/10 text-heritage-red rounded text-[10px] font-bold tracking-wider">补发订单</span>
|
|
<div class="flex items-center gap-1 text-subtle-gray">
|
|
<span class="w-2 h-2 rounded-full bg-subtle-gray"></span>
|
|
<span class="font-label-md text-label-md">待配送</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-subtle-gray text-xs mb-1">原订单号</div>
|
|
<div class="flex justify-between items-center group active:opacity-60 transition-opacity">
|
|
<span class="font-headline-md text-headline-md text-on-surface decoration-heritage-red underline-offset-4 decoration-1">DK202310248892</span>
|
|
<span class="material-symbols-outlined text-subtle-gray text-sm">open_in_new</span>
|
|
</div>
|
|
</div>
|
|
<!-- Product Summary -->
|
|
<div class="flex items-center gap-4 py-4 border-y border-surface-variant/50 mb-4">
|
|
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex-shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="A professional, high-quality studio photograph of a premium Chinese baijiu bottle, Dukang Yuxiang brand, showcasing its intricate traditional calligraphy and elegant red and gold label. The lighting is dramatic and moody, reflecting luxury and heritage modernist aesthetics, with a soft blur in the background to emphasize the product craftsmanship." src="https://lh3.googleusercontent.com/aida-public/AB6AXuCneYI8F6gqPymDCR0WdAEMCNo-3EdTHZ65Esr4aGk_0sgAaNi8eY7rEHLluFugd419a_IY05ir6_ri9NFmQKT2cMA3PBtVKTSp1k8blQlvRLgzwLcQYFnlLPGn8gBVDUIHcsHezIBxBGna_1CGv7cj_3SqCvnfpX5P22v0Jc9X7CrQn-B1630uyVkj2Vz5HY3_rB9cJrXRT66Ml460fcoBnGgJL1wOIS_ZiYdrratBdYvneZy_FnoZexdznvJr56BQcYrX-TktvQA">
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h4 class="font-headline-md text-headline-md text-on-surface">杜康御享 52度</h4>
|
|
<div class="flex justify-between items-center mt-1">
|
|
<p class="text-subtle-gray font-label-md">500ml / 瓶</p>
|
|
<span class="font-bold text-on-surface">x 1</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Delivery Address -->
|
|
<div class="mb-4 space-y-2">
|
|
<div class="flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-heritage-red text-lg">location_on</span>
|
|
<div>
|
|
<div class="font-bold text-on-surface">张建设 <span class="ml-2 font-normal text-subtle-gray">138****5566</span></div>
|
|
<p class="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">河南省洛阳市瀍河回族区启明南路208号杜康专卖店</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- HQ Note -->
|
|
<div class="bg-surface-container-low rounded-lg p-3 mb-6 flex gap-2">
|
|
<span class="material-symbols-outlined text-subtle-gray text-lg">info</span>
|
|
<p class="text-xs text-on-surface-variant leading-relaxed">
|
|
<span class="font-bold">总部备注:</span> 原订单物流损毁，系统已核实，申请补发。请合伙人尽快核实库存并配送。
|
|
</p>
|
|
</div>
|
|
<!-- Stepper -->
|
|
<div class="flex items-center justify-between px-4 mb-8">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-heritage-red">待配送</span>
|
|
</div>
|
|
<div class="stepper-line"></div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full border-2 border-surface-variant bg-surface flex items-center justify-center">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-surface-variant"></div>
|
|
</div>
|
|
<span class="text-[10px] text-subtle-gray">配送中</span>
|
|
</div>
|
|
<div class="stepper-line"></div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full border-2 border-surface-variant bg-surface flex items-center justify-center">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-surface-variant"></div>
|
|
</div>
|
|
<span class="text-[10px] text-subtle-gray">已完成</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-full h-12 bg-heritage-red text-white font-bold rounded-xl active:scale-[0.98] transition-transform shadow-lg shadow-heritage-red/20">
|
|
开始配送
|
|
</button>
|
|
</div>
|
|
<!-- Card 2: 配送中 -->
|
|
<div class="bg-surface-container-lowest rounded-xl shadow-[0px_4px_20px_rgba(166,29,36,0.05)] p-5 border border-heritage-red/5">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<span class="px-2 py-1 bg-heritage-red/10 text-heritage-red rounded text-[10px] font-bold tracking-wider">补发订单</span>
|
|
<div class="flex items-center gap-1 text-status-blue">
|
|
<span class="w-2 h-2 rounded-full bg-status-blue animate-pulse"></span>
|
|
<span class="font-label-md text-label-md">配送中</span>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-subtle-gray text-xs mb-1">原订单号</div>
|
|
<div class="flex justify-between items-center">
|
|
<span class="font-headline-md text-headline-md text-on-surface">DK202310247711</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4 py-4 border-y border-surface-variant/50 mb-4">
|
|
<div class="w-16 h-16 rounded-lg bg-surface-container overflow-hidden flex-shrink-0">
|
|
<img class="w-full h-full object-cover" data-alt="Close-up of a premium spirits bottle label, highlighting artistic Chinese characters for 'Dukang'. The aesthetic is minimalist yet deeply grounded in tradition, with warm ambient lighting reflecting off glass surfaces. Neutral earth tones and deep red accents dominate the color palette, maintaining a high-end editorial feel." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBHwDNucrskKb3nV72Cv2WeNeJYhETjxXqsaYaLKepFv3ttQULuBWP2zjbYShEXIKGvtX06XAgd1QWAjaVzg1EFAUGEYI545HGpuAXsU7eoLJkKFtOej7UWa8a1bp8JHXttH23LRy3SD-St3TbgHV-Qc_nC6GP5GVal8xJ4ZCZmKyDQWGbjQ29IZ_481KPZyY9ImbbT4HkoUpndemjBKWb24nWwocDs68aYOpWX4Q3yYBVt2DofGMwfLrNyHU3lCF7vvcf5UUI45uU">
|
|
</div>
|
|
<div class="flex-grow">
|
|
<h4 class="font-headline-md text-headline-md text-on-surface">杜康老酒 1972</h4>
|
|
<div class="flex justify-between items-center mt-1">
|
|
<p class="text-subtle-gray font-label-md">500ml / 瓶</p>
|
|
<span class="font-bold text-on-surface">x 2</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mb-4 space-y-2">
|
|
<div class="flex items-start gap-2">
|
|
<span class="material-symbols-outlined text-heritage-red text-lg">location_on</span>
|
|
<div>
|
|
<div class="font-bold text-on-surface">李秋月 <span class="ml-2 font-normal text-subtle-gray">159****2234</span></div>
|
|
<p class="text-body-md text-on-surface-variant mt-0.5 leading-relaxed">河南省郑州市管城回族区商都路31号红星美凯龙旗舰店</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-surface-container-low rounded-lg p-3 mb-6 flex gap-2">
|
|
<span class="material-symbols-outlined text-subtle-gray text-lg">info</span>
|
|
<p class="text-xs text-on-surface-variant leading-relaxed">
|
|
<span class="font-bold">总部备注:</span> 门店自提漏发，需合伙人送货上门以作补偿。
|
|
</p>
|
|
</div>
|
|
<!-- Stepper Active -->
|
|
<div class="flex items-center justify-between px-4 mb-8">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white text-[14px]" style="font-variation-settings: 'FILL' 1;">check</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-heritage-red">待配送</span>
|
|
</div>
|
|
<div class="stepper-line active"></div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full bg-heritage-red flex items-center justify-center">
|
|
<span class="material-symbols-outlined text-white text-[14px]" style="font-variation-settings: 'FILL' 0;">local_shipping</span>
|
|
</div>
|
|
<span class="text-[10px] font-bold text-heritage-red">配送中</span>
|
|
</div>
|
|
<div class="stepper-line"></div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-6 h-6 rounded-full border-2 border-surface-variant bg-surface flex items-center justify-center">
|
|
<div class="w-1.5 h-1.5 rounded-full bg-surface-variant"></div>
|
|
</div>
|
|
<span class="text-[10px] text-subtle-gray">已完成</span>
|
|
</div>
|
|
</div>
|
|
<button class="w-full h-12 bg-success-green text-white font-bold rounded-xl active:scale-[0.98] transition-transform shadow-lg shadow-success-green/10">
|
|
确认送达
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
<!-- Bottom Navigation Shell -->
|
|
|
|
<script>
|
|
// Simple Interaction logic
|
|
document.querySelectorAll('button').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const text = this.innerText.trim();
|
|
if (text === '开始配送') {
|
|
// Update UI state mock
|
|
this.classList.remove('bg-heritage-red');
|
|
this.classList.add('bg-success-green');
|
|
this.innerText = '配送中...';
|
|
setTimeout(() => {
|
|
this.innerText = '确认送达';
|
|
}, 500);
|
|
} else if (text === '确认送达') {
|
|
this.classList.replace('bg-success-green', 'bg-subtle-gray');
|
|
this.innerText = '配送完成';
|
|
this.disabled = true;
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
|
|
</body></html> |