init
This commit is contained in:
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"name": "@dukang/domain",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"dev": "tsc --watch",
|
||||
"test": "vitest run",
|
||||
"lint": "echo ok"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.4.5",
|
||||
"vitest": "^1.6.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import { describe, expect, it } from 'vitest';
|
||||
import {
|
||||
calcBenefitAmount,
|
||||
calcRedeemSettleAmount,
|
||||
validateMinPurchase,
|
||||
validateRedeemAmount,
|
||||
allocateBenefitCoupons,
|
||||
calcBenefitSummary,
|
||||
} from './index';
|
||||
|
||||
describe('calcBenefitAmount', () => {
|
||||
it('uses benefitAmount when set', () => {
|
||||
expect(calcBenefitAmount({ price: 599, benefitAmount: 200 })).toBe(200);
|
||||
});
|
||||
|
||||
it('falls back to price', () => {
|
||||
expect(calcBenefitAmount({ price: 599 })).toBe(599);
|
||||
});
|
||||
});
|
||||
|
||||
describe('validateMinPurchase', () => {
|
||||
it('local requires 2 bottles', () => {
|
||||
expect(validateMinPurchase('LOCAL', 1, 2, 6).ok).toBe(false);
|
||||
expect(validateMinPurchase('LOCAL', 2, 2, 6).ok).toBe(true);
|
||||
});
|
||||
|
||||
it('cross city requires 6 bottles', () => {
|
||||
expect(validateMinPurchase('CROSS_CITY', 5, 2, 6).ok).toBe(false);
|
||||
expect(validateMinPurchase('CROSS_CITY', 6, 2, 6).ok).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
describe('validateRedeemAmount', () => {
|
||||
it('rejects over balance or 500', () => {
|
||||
expect(validateRedeemAmount(100, 50).ok).toBe(true);
|
||||
expect(validateRedeemAmount(100, 501).ok).toBe(false);
|
||||
expect(validateRedeemAmount(50, 60).ok).toBe(false);
|
||||
expect(validateRedeemAmount(100, 0).ok).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('calcRedeemSettleAmount', () => {
|
||||
it('applies settlement rate', () => {
|
||||
expect(calcRedeemSettleAmount(100, 0.6)).toBe(60);
|
||||
});
|
||||
});
|
||||
|
||||
describe('allocateBenefitCoupons', () => {
|
||||
const coupons = [
|
||||
{ id: '1', balance: 300, createdAt: 1 },
|
||||
{ id: '2', balance: 400, createdAt: 2 },
|
||||
];
|
||||
|
||||
it('allocates FIFO across coupons', () => {
|
||||
const result = allocateBenefitCoupons(coupons, 500);
|
||||
expect(result.ok).toBe(true);
|
||||
if (result.ok) {
|
||||
expect(result.allocations).toEqual([
|
||||
{ couponId: '1', amount: 300 },
|
||||
{ couponId: '2', amount: 200 },
|
||||
]);
|
||||
}
|
||||
});
|
||||
|
||||
it('rejects when total balance insufficient', () => {
|
||||
expect(allocateBenefitCoupons(coupons, 800).ok).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('calcBenefitSummary', () => {
|
||||
it('caps max redeem by total and limit', () => {
|
||||
expect(calcBenefitSummary([300, 400])).toEqual({
|
||||
totalBalance: 700,
|
||||
maxRedeemAmount: 500,
|
||||
activeCouponCount: 2,
|
||||
});
|
||||
expect(calcBenefitSummary([100])).toEqual({
|
||||
totalBalance: 100,
|
||||
maxRedeemAmount: 100,
|
||||
activeCouponCount: 1,
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,126 @@
|
||||
export interface ProductPricing {
|
||||
price: number;
|
||||
benefitAmount?: number | null;
|
||||
}
|
||||
|
||||
export function calcBenefitAmount(product: ProductPricing): number {
|
||||
return product.benefitAmount ?? product.price;
|
||||
}
|
||||
|
||||
export function validateMinPurchase(
|
||||
deliveryType: 'LOCAL' | 'CROSS_CITY',
|
||||
quantity: number,
|
||||
localMinQty: number,
|
||||
crossMinQty: number,
|
||||
): { ok: boolean; message?: string } {
|
||||
const min = deliveryType === 'LOCAL' ? localMinQty : crossMinQty;
|
||||
if (quantity < min) {
|
||||
return {
|
||||
ok: false,
|
||||
message:
|
||||
deliveryType === 'LOCAL'
|
||||
? `同城配送至少购买 ${min} 瓶`
|
||||
: `跨城配送至少购买 ${min} 瓶（1箱）`,
|
||||
};
|
||||
}
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
export function validateRedeemAmount(
|
||||
balance: number,
|
||||
amount: number,
|
||||
maxAmount = 500,
|
||||
): { ok: boolean; message?: string } {
|
||||
if (amount <= 0) return { ok: false, message: '核销金额必须大于 0' };
|
||||
if (amount > balance) return { ok: false, message: '核销金额不能超过可用余额' };
|
||||
if (amount > maxAmount) return { ok: false, message: `单次核销不能超过 ¥${maxAmount}` };
|
||||
return { ok: true };
|
||||
}
|
||||
|
||||
export interface BenefitCouponBalance {
|
||||
id: string;
|
||||
balance: number;
|
||||
createdAt: number;
|
||||
}
|
||||
|
||||
/** FIFO 跨多张权益券分配核销金额（购酒按单发券，展示为总余额） */
|
||||
export function allocateBenefitCoupons(
|
||||
coupons: BenefitCouponBalance[],
|
||||
amount: number,
|
||||
maxAmount = 500,
|
||||
): { ok: true; allocations: Array<{ couponId: string; amount: number }> } | { ok: false; message: string } {
|
||||
const active = coupons
|
||||
.filter((c) => c.balance > 0)
|
||||
.sort((a, b) => a.createdAt - b.createdAt);
|
||||
const totalBalance = active.reduce((sum, c) => sum + c.balance, 0);
|
||||
const check = validateRedeemAmount(totalBalance, amount, maxAmount);
|
||||
if (!check.ok) return { ok: false, message: check.message! };
|
||||
|
||||
let remaining = amount;
|
||||
const allocations: Array<{ couponId: string; amount: number }> = [];
|
||||
for (const coupon of active) {
|
||||
if (remaining <= 0) break;
|
||||
const take = Math.min(coupon.balance, remaining);
|
||||
allocations.push({ couponId: coupon.id, amount: take });
|
||||
remaining = Math.round((remaining - take) * 100) / 100;
|
||||
}
|
||||
|
||||
if (remaining > 0) {
|
||||
return { ok: false, message: '权益余额不足' };
|
||||
}
|
||||
|
||||
return { ok: true, allocations };
|
||||
}
|
||||
|
||||
export function calcBenefitSummary(
|
||||
balances: number[],
|
||||
maxAmount = 500,
|
||||
): { totalBalance: number; maxRedeemAmount: number; activeCouponCount: number } {
|
||||
const totalBalance = Math.round(balances.reduce((sum, b) => sum + b, 0) * 100) / 100;
|
||||
return {
|
||||
totalBalance,
|
||||
maxRedeemAmount: Math.min(maxAmount, totalBalance),
|
||||
activeCouponCount: balances.length,
|
||||
};
|
||||
}
|
||||
|
||||
export function calcRedeemSettleAmount(amount: number, settlementRate: number): number {
|
||||
return Math.round(amount * settlementRate * 100) / 100;
|
||||
}
|
||||
|
||||
export function generateUserNo(): string {
|
||||
const suffix = Math.floor(10000000 + Math.random() * 90000000);
|
||||
return `DK${suffix}`;
|
||||
}
|
||||
|
||||
export function generateOrderNo(): string {
|
||||
const now = new Date();
|
||||
const y = now.getFullYear();
|
||||
const m = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const d = String(now.getDate()).padStart(2, '0');
|
||||
const rand = String(Math.floor(Math.random() * 100000)).padStart(5, '0');
|
||||
return `DK${y}${m}${d}${rand}`;
|
||||
}
|
||||
|
||||
export function generateCouponNo(): string {
|
||||
return `BC${Date.now()}${Math.floor(Math.random() * 1000)}`;
|
||||
}
|
||||
|
||||
export function generateRedeemNo(): string {
|
||||
return `RD${Date.now()}${Math.floor(Math.random() * 1000)}`;
|
||||
}
|
||||
|
||||
export function orderTabToStatuses(tab: string): string[] | undefined {
|
||||
switch (tab) {
|
||||
case 'pending_pay':
|
||||
return ['PENDING_PAY'];
|
||||
case 'pending_ship':
|
||||
return ['PENDING_SHIP', 'OUT_WAREHOUSE'];
|
||||
case 'pending_receive':
|
||||
return ['SHIPPING', 'PENDING_RECEIVE'];
|
||||
case 'completed':
|
||||
return ['COMPLETED'];
|
||||
default:
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vitest/config';
|
||||
|
||||
export default defineConfig({
|
||||
test: {
|
||||
globals: false,
|
||||
},
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"name": "@dukang/shared-types",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"main": "./dist/index.js",
|
||||
"types": "./dist/index.d.ts",
|
||||
"scripts": {
|
||||
"build": "tsc",
|
||||
"dev": "tsc --watch",
|
||||
"lint": "echo ok"
|
||||
},
|
||||
"devDependencies": {
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
export interface ApiResponse<T = unknown> {
|
||||
code: number;
|
||||
message: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
export interface PaginatedData<T> {
|
||||
list: T[];
|
||||
total: number;
|
||||
page: number;
|
||||
pageSize: number;
|
||||
}
|
||||
|
||||
export interface JwtPayload {
|
||||
sub: string;
|
||||
actorType: string;
|
||||
actorId: string;
|
||||
clientApp: string;
|
||||
}
|
||||
|
||||
export interface LoginResult {
|
||||
accessToken: string;
|
||||
refreshToken: string;
|
||||
actorType: string;
|
||||
actorId: string;
|
||||
user?: Record<string, unknown>;
|
||||
store?: Record<string, unknown>;
|
||||
partner?: Record<string, unknown>;
|
||||
}
|
||||
@@ -0,0 +1,21 @@
|
||||
export interface AppConfig {
|
||||
mockSms: boolean;
|
||||
mockSmsCode: string;
|
||||
mockPay: boolean;
|
||||
mockDeliveryAuto: boolean;
|
||||
autoApproveStore: boolean;
|
||||
}
|
||||
|
||||
export function loadAppConfig(env?: Record<string, string | undefined>): AppConfig {
|
||||
const e =
|
||||
env ??
|
||||
(globalThis as { process?: { env: Record<string, string | undefined> } }).process?.env ??
|
||||
{};
|
||||
return {
|
||||
mockSms: e.MOCK_SMS !== 'false',
|
||||
mockSmsCode: e.MOCK_SMS_CODE ?? '123456',
|
||||
mockPay: e.MOCK_PAY !== 'false',
|
||||
mockDeliveryAuto: e.MOCK_DELIVERY_AUTO !== 'false',
|
||||
autoApproveStore: e.AUTO_APPROVE_STORE !== 'false',
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
export enum ClientApp {
|
||||
USER_MINI = 'USER_MINI',
|
||||
USER_H5 = 'USER_H5',
|
||||
PARTNER_MINI = 'PARTNER_MINI',
|
||||
PARTNER_H5 = 'PARTNER_H5',
|
||||
HQ_MINI = 'HQ_MINI',
|
||||
SHOP_H5 = 'SHOP_H5',
|
||||
}
|
||||
|
||||
export enum ActorType {
|
||||
USER = 'USER',
|
||||
STORE = 'STORE',
|
||||
PARTNER = 'PARTNER',
|
||||
HQ = 'HQ',
|
||||
}
|
||||
|
||||
export enum SmsScene {
|
||||
USER_LOGIN = 'USER_LOGIN',
|
||||
STORE_LOGIN = 'STORE_LOGIN',
|
||||
PARTNER_LOGIN = 'PARTNER_LOGIN',
|
||||
HQ_LOGIN = 'HQ_LOGIN',
|
||||
BIND_PHONE = 'BIND_PHONE',
|
||||
PARTNER_STAFF_ADD = 'PARTNER_STAFF_ADD',
|
||||
}
|
||||
|
||||
export enum OrderStatus {
|
||||
PENDING_PAY = 'PENDING_PAY',
|
||||
PENDING_SHIP = 'PENDING_SHIP',
|
||||
OUT_WAREHOUSE = 'OUT_WAREHOUSE',
|
||||
SHIPPING = 'SHIPPING',
|
||||
PENDING_RECEIVE = 'PENDING_RECEIVE',
|
||||
COMPLETED = 'COMPLETED',
|
||||
CANCELLED = 'CANCELLED',
|
||||
REFUNDING = 'REFUNDING',
|
||||
REFUNDED = 'REFUNDED',
|
||||
}
|
||||
|
||||
export enum OrderTab {
|
||||
ALL = 'all',
|
||||
PENDING_PAY = 'pending_pay',
|
||||
PENDING_SHIP = 'pending_ship',
|
||||
PENDING_RECEIVE = 'pending_receive',
|
||||
COMPLETED = 'completed',
|
||||
}
|
||||
|
||||
export enum DeliveryType {
|
||||
LOCAL = 'LOCAL',
|
||||
CROSS_CITY = 'CROSS_CITY',
|
||||
}
|
||||
|
||||
export enum AromaType {
|
||||
QINGXIANG = 'QINGXIANG',
|
||||
JIANGXIANG = 'JIANGXIANG',
|
||||
NONGXIANG = 'NONGXIANG',
|
||||
}
|
||||
|
||||
export enum StoreStatus {
|
||||
OPEN = 'OPEN',
|
||||
PAUSED = 'PAUSED',
|
||||
CLOSED = 'CLOSED',
|
||||
}
|
||||
|
||||
export enum BenefitCouponStatus {
|
||||
ACTIVE = 'ACTIVE',
|
||||
USED_UP = 'USED_UP',
|
||||
VOID = 'VOID',
|
||||
}
|
||||
|
||||
export const CLIENT_APP_ACTOR_MAP: Record<ClientApp, ActorType> = {
|
||||
[ClientApp.USER_MINI]: ActorType.USER,
|
||||
[ClientApp.USER_H5]: ActorType.USER,
|
||||
[ClientApp.PARTNER_MINI]: ActorType.PARTNER,
|
||||
[ClientApp.PARTNER_H5]: ActorType.PARTNER,
|
||||
[ClientApp.HQ_MINI]: ActorType.HQ,
|
||||
[ClientApp.SHOP_H5]: ActorType.STORE,
|
||||
};
|
||||
|
||||
export const REDEEM_MAX_AMOUNT = 500;
|
||||
export const REDEEM_TOKEN_TTL_SECONDS = 300;
|
||||
@@ -0,0 +1,3 @@
|
||||
export * from './enums';
|
||||
export * from './api';
|
||||
export * from './config';
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2020",
|
||||
"module": "commonjs",
|
||||
"declaration": true,
|
||||
"outDir": "./dist",
|
||||
"rootDir": "./src",
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"skipLibCheck": true
|
||||
},
|
||||
"include": ["src/**/*"]
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
{
|
||||
"name": "@dukang/shared-ui",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"type": "module",
|
||||
"exports": {
|
||||
"./tokens.css": "./src/tokens.css",
|
||||
"./base.css": "./src/base.css",
|
||||
"./BrandLogo": "./src/BrandLogo.tsx",
|
||||
"./PageHeader": "./src/PageHeader.tsx",
|
||||
"./CouponBadge": "./src/CouponBadge.tsx",
|
||||
"./OrderStatusTabs": "./src/OrderStatusTabs.tsx",
|
||||
"./AppImage": "./src/AppImage.tsx"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^18.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/react": "^18.3.3",
|
||||
"react": "^18.3.1",
|
||||
"typescript": "^5.4.5"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import { useEffect, useState, type ImgHTMLAttributes } from 'react';
|
||||
|
||||
type AppImageProps = Omit<ImgHTMLAttributes<HTMLImageElement>, 'src'> & {
|
||||
src?: string | null;
|
||||
wrapperClassName?: string;
|
||||
fit?: 'cover' | 'contain';
|
||||
};
|
||||
|
||||
export default function AppImage({
|
||||
src,
|
||||
alt = '',
|
||||
className = '',
|
||||
wrapperClassName = '',
|
||||
fit = 'cover',
|
||||
...rest
|
||||
}: AppImageProps) {
|
||||
const [loaded, setLoaded] = useState(false);
|
||||
const [failed, setFailed] = useState(false);
|
||||
const hasSrc = Boolean(src);
|
||||
|
||||
useEffect(() => {
|
||||
setLoaded(false);
|
||||
setFailed(!src);
|
||||
}, [src]);
|
||||
|
||||
const showPlaceholder = !hasSrc || failed || !loaded;
|
||||
|
||||
return (
|
||||
<div className={`app-image${wrapperClassName ? ` ${wrapperClassName}` : ''}`}>
|
||||
{showPlaceholder && (
|
||||
<div className="app-image-placeholder" aria-hidden>
|
||||
{hasSrc && !failed ? (
|
||||
<span className="app-image-spinner" />
|
||||
) : (
|
||||
<span className="material-symbols-outlined app-image-fallback-icon">image</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hasSrc && !failed && (
|
||||
<img
|
||||
{...rest}
|
||||
src={src!}
|
||||
alt={alt}
|
||||
className={`app-image-img app-image-img--${fit}${loaded ? ' is-loaded' : ''}${className ? ` ${className}` : ''}`}
|
||||
onLoad={() => setLoaded(true)}
|
||||
onError={() => {
|
||||
setFailed(true);
|
||||
setLoaded(false);
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,18 @@
|
||||
import AppImage from './AppImage';
|
||||
|
||||
type BrandLogoProps = {
|
||||
className?: string;
|
||||
size?: 'default' | 'lg';
|
||||
};
|
||||
|
||||
export default function BrandLogo({ className = '', size = 'default' }: BrandLogoProps) {
|
||||
const sizeClass = size === 'lg' ? 'brand-logo--lg' : '';
|
||||
return (
|
||||
<AppImage
|
||||
src="/logo.png"
|
||||
alt="杜康好客"
|
||||
wrapperClassName={`brand-logo ${sizeClass} ${className}`.trim()}
|
||||
fit="contain"
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,12 @@
|
||||
type CouponBadgeProps = {
|
||||
amount: number | string;
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export default function CouponBadge({ amount, className = '' }: CouponBadgeProps) {
|
||||
return (
|
||||
<span className={`coupon-badge ${className}`.trim()}>
|
||||
¥{amount}餐券
|
||||
</span>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
type Tab = { key: string; label: string };
|
||||
|
||||
type OrderStatusTabsProps = {
|
||||
tabs: Tab[];
|
||||
active: string;
|
||||
onChange: (key: string) => void;
|
||||
};
|
||||
|
||||
export default function OrderStatusTabs({ tabs, active, onChange }: OrderStatusTabsProps) {
|
||||
return (
|
||||
<nav className="order-status-tabs">
|
||||
{tabs.map((t) => (
|
||||
<button
|
||||
key={t.key}
|
||||
type="button"
|
||||
className={`order-status-tab${active === t.key ? ' active' : ''}`}
|
||||
onClick={() => onChange(t.key)}
|
||||
>
|
||||
{t.label}
|
||||
</button>
|
||||
))}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
type PageHeaderProps = {
|
||||
title: string;
|
||||
onBack?: () => void;
|
||||
backLabel?: string;
|
||||
right?: React.ReactNode;
|
||||
};
|
||||
|
||||
export default function PageHeader({ title, onBack, backLabel = '←', right }: PageHeaderProps) {
|
||||
return (
|
||||
<header className="page-header">
|
||||
<div className="page-header-side">
|
||||
{onBack ? (
|
||||
<button type="button" className="back-btn" onClick={onBack} aria-label="返回">
|
||||
{backLabel}
|
||||
</button>
|
||||
) : (
|
||||
<span className="page-header-spacer" />
|
||||
)}
|
||||
</div>
|
||||
<div className="app-page-title page-header-title">{title}</div>
|
||||
<div className="page-header-side page-header-side--right">{right ?? <span className="page-header-spacer" />}</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,698 @@
|
||||
@import './tokens.css';
|
||||
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
background: var(--color-background);
|
||||
color: var(--color-on-surface);
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
button, input, select, textarea { font: inherit; }
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-family: 'Material Symbols Outlined';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
|
||||
/* Typography */
|
||||
.headline-lg {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.headline-md {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
.body-md {
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.label-md {
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.text-muted { color: var(--color-subtle-gray); }
|
||||
.text-variant { color: var(--color-on-surface-variant); }
|
||||
.text-primary { color: var(--color-heritage-red); }
|
||||
.text-success { color: var(--color-success-green); }
|
||||
|
||||
.amount-lg {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 24px;
|
||||
font-weight: 700;
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
.amount-xl {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
/* Layout */
|
||||
.page { min-height: 100vh; padding-bottom: 80px; background: var(--color-background); }
|
||||
.page-no-tab { min-height: 100vh; background: var(--color-background); }
|
||||
|
||||
/* Brand logo */
|
||||
.brand-logo {
|
||||
height: 36px;
|
||||
width: auto;
|
||||
min-width: 36px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.brand-logo--lg {
|
||||
height: 48px;
|
||||
min-width: 48px;
|
||||
}
|
||||
|
||||
.brand-logo .app-image-img.is-loaded {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.brand-logo--center {
|
||||
margin: 0 auto 24px;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: var(--space-md) var(--space-page);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: var(--color-heritage-red);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 三端统一页面顶栏标题 */
|
||||
.app-page-title {
|
||||
margin: 0;
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: var(--color-heritage-red);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.app-page-header {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 50;
|
||||
height: 56px;
|
||||
padding: 0 var(--space-page);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-background);
|
||||
box-shadow: 0 1px 0 rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
|
||||
.app-page-header--fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.app-page-header-action {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: var(--space-page);
|
||||
border: none;
|
||||
background: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-heritage-red);
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
.app-page-header-action--end {
|
||||
left: auto;
|
||||
right: var(--space-page);
|
||||
}
|
||||
|
||||
.app-page-header-action:active {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.header-city { color: var(--color-heritage-red); font-size: 14px; }
|
||||
|
||||
.back-btn {
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 4px;
|
||||
color: var(--color-heritage-red);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Cards */
|
||||
.card {
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--space-gutter) var(--space-page);
|
||||
padding: var(--space-md);
|
||||
box-shadow: var(--shadow-card);
|
||||
border: var(--border-card);
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
border: none;
|
||||
border-radius: var(--radius-md);
|
||||
padding: 12px 24px;
|
||||
cursor: pointer;
|
||||
font-family: var(--font-label);
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
letter-spacing: 0.05em;
|
||||
transition: opacity 0.2s, transform 0.1s;
|
||||
}
|
||||
|
||||
.btn:active { transform: scale(0.98); }
|
||||
|
||||
.btn-primary {
|
||||
background: var(--color-heritage-red);
|
||||
color: var(--color-on-primary);
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-heritage-red);
|
||||
color: var(--color-heritage-red);
|
||||
}
|
||||
|
||||
.btn-block { width: 100%; display: block; text-align: center; }
|
||||
|
||||
.btn-pill {
|
||||
border-radius: var(--radius-full);
|
||||
padding: 6px 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.form-group { margin-bottom: var(--space-md); }
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 6px;
|
||||
color: var(--color-on-surface-variant);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select,
|
||||
.form-group textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--color-outline-variant);
|
||||
border-radius: var(--radius-md);
|
||||
background: var(--color-card);
|
||||
color: var(--color-on-surface);
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus,
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 1px rgba(130, 0, 18, 0.2);
|
||||
}
|
||||
|
||||
/* Badges & status */
|
||||
.benefit-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-aged-amber);
|
||||
color: var(--color-on-secondary-container);
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.status-tag {
|
||||
font-size: 13px;
|
||||
color: var(--color-heritage-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.status-open {
|
||||
padding: 2px 6px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(45, 106, 79, 0.1);
|
||||
color: var(--color-success-green);
|
||||
font-family: var(--font-label);
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
/* Tabs */
|
||||
.tabs {
|
||||
display: flex;
|
||||
background: var(--color-card);
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 12px 4px;
|
||||
font-size: 14px;
|
||||
color: var(--color-subtle-gray);
|
||||
border-bottom: 2px solid transparent;
|
||||
}
|
||||
|
||||
.tab.active {
|
||||
color: var(--color-heritage-red);
|
||||
border-bottom-color: var(--color-heritage-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Tabbar (legacy) */
|
||||
.tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid rgba(141, 112, 110, 0.3);
|
||||
box-shadow: var(--shadow-tabbar);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.tabbar-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
font-size: 12px;
|
||||
color: var(--color-subtle-gray);
|
||||
}
|
||||
|
||||
.tabbar-item.active { color: var(--color-heritage-red); }
|
||||
|
||||
/* App tabbar (Material icons) */
|
||||
.app-tabbar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
padding: 8px 16px calc(8px + env(safe-area-inset-bottom, 0px));
|
||||
background: var(--color-surface);
|
||||
border-top: 1px solid rgba(141, 112, 110, 0.3);
|
||||
box-shadow: var(--shadow-tabbar);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.app-tabbar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 4px 16px;
|
||||
border-radius: 8px;
|
||||
color: var(--color-subtle-gray);
|
||||
text-decoration: none;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
|
||||
.app-tabbar-item.active { color: var(--color-heritage-red); }
|
||||
.app-tabbar-item:active { transform: scale(0.9); }
|
||||
|
||||
.app-tabbar-icon { font-size: 24px; line-height: 1; }
|
||||
|
||||
.app-tabbar-label {
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 16px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* Auth page */
|
||||
.auth-page {
|
||||
min-height: 100vh;
|
||||
padding: 48px var(--space-page) var(--space-page);
|
||||
background: var(--color-background);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.auth-subtitle {
|
||||
color: var(--color-subtle-gray);
|
||||
margin-bottom: var(--space-lg);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.auth-msg {
|
||||
color: var(--color-heritage-red);
|
||||
margin-bottom: 12px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Mine profile */
|
||||
.profile-avatar {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-heritage-red);
|
||||
color: var(--color-on-primary);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
font-family: var(--font-headline);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.menu-link {
|
||||
display: block;
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
}
|
||||
|
||||
.menu-link:last-child { border-bottom: none; }
|
||||
|
||||
.page-actions { padding: var(--space-md) var(--space-page); }
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 48px var(--space-md);
|
||||
color: var(--color-subtle-gray);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Shop-specific */
|
||||
.shop-header-card {
|
||||
background: var(--color-heritage-red);
|
||||
color: var(--color-on-primary);
|
||||
border-radius: var(--radius-lg);
|
||||
margin: var(--space-page);
|
||||
padding: 20px;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.scan-btn {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: 50%;
|
||||
background: var(--color-aged-amber);
|
||||
border: 4px solid var(--color-card);
|
||||
margin: 24px auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40px;
|
||||
cursor: pointer;
|
||||
box-shadow: var(--shadow-card);
|
||||
}
|
||||
|
||||
.coupon-highlight {
|
||||
margin-top: 12px;
|
||||
padding: 12px;
|
||||
background: var(--color-secondary-container);
|
||||
border-radius: var(--radius-md);
|
||||
color: var(--color-on-secondary-container);
|
||||
}
|
||||
|
||||
.code-box {
|
||||
word-break: break-all;
|
||||
font-family: monospace;
|
||||
font-size: 18px;
|
||||
background: var(--color-surface-container-low);
|
||||
padding: 16px;
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.line-2-clamp {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Page header */
|
||||
.page-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 56px;
|
||||
padding: 0 var(--space-page);
|
||||
background: var(--color-surface);
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 40;
|
||||
}
|
||||
|
||||
.page-header-side {
|
||||
width: 64px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.page-header-side--right {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.page-header-spacer {
|
||||
width: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.page-header-title {
|
||||
font-family: var(--font-headline);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 26px;
|
||||
color: var(--color-heritage-red);
|
||||
text-align: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* Coupon badge (ticket notch) */
|
||||
.coupon-badge {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: var(--color-aged-amber);
|
||||
color: var(--color-on-secondary-container);
|
||||
padding: 4px 12px;
|
||||
border-radius: 2px;
|
||||
font-family: var(--font-label);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.coupon-badge::before,
|
||||
.coupon-badge::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: var(--color-card);
|
||||
border-radius: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.coupon-badge::before { left: -4px; }
|
||||
.coupon-badge::after { right: -4px; }
|
||||
|
||||
/* Order status tabs */
|
||||
.order-status-tabs {
|
||||
display: flex;
|
||||
overflow-x: auto;
|
||||
background: var(--color-card);
|
||||
border-bottom: 1px solid var(--color-surface-container);
|
||||
scrollbar-width: none;
|
||||
}
|
||||
|
||||
.order-status-tabs::-webkit-scrollbar { display: none; }
|
||||
|
||||
.order-status-tab {
|
||||
flex-shrink: 0;
|
||||
border: none;
|
||||
background: none;
|
||||
padding: 12px 16px;
|
||||
font-family: var(--font-label);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--color-subtle-gray);
|
||||
border-bottom: 2px solid transparent;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-status-tab.active {
|
||||
color: var(--color-heritage-red);
|
||||
border-bottom-color: var(--color-heritage-red);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* Modal overlay */
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.4);
|
||||
backdrop-filter: blur(4px);
|
||||
z-index: 200;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-sheet {
|
||||
width: 100%;
|
||||
max-width: 480px;
|
||||
background: var(--color-card);
|
||||
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
|
||||
padding: var(--space-page);
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.modal-grabber {
|
||||
width: 40px;
|
||||
height: 4px;
|
||||
background: var(--color-surface-container-highest);
|
||||
border-radius: var(--radius-full);
|
||||
margin: 0 auto 16px;
|
||||
}
|
||||
|
||||
.tag-reship {
|
||||
display: inline-block;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius-sm);
|
||||
background: rgba(42, 110, 187, 0.1);
|
||||
color: var(--color-status-blue);
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* App image loading / placeholder */
|
||||
.app-image {
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
background: var(--color-surface-container-low);
|
||||
}
|
||||
|
||||
.app-image--fill {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.app-image-img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
.app-image-img--cover {
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.app-image-img--contain {
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.app-image-img.is-loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.app-image-placeholder {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: var(--color-surface-container-low);
|
||||
color: var(--color-outline);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.app-image-fallback-icon {
|
||||
font-size: 32px;
|
||||
opacity: 0.45;
|
||||
}
|
||||
|
||||
.app-image-spinner {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid var(--color-outline-variant);
|
||||
border-top-color: var(--color-heritage-red);
|
||||
border-radius: 50%;
|
||||
animation: app-image-spin 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes app-image-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,50 @@
|
||||
/* Dukang Hospitality Heritage — design tokens from pages/stitch_4_1.0/DESIGN.md */
|
||||
:root {
|
||||
--color-surface: #faf9f7;
|
||||
--color-surface-dim: #dadad8;
|
||||
--color-surface-container-low: #f4f3f1;
|
||||
--color-surface-container: #efeeec;
|
||||
--color-surface-container-highest: #e3e2e0;
|
||||
--color-on-surface: #1a1c1b;
|
||||
--color-on-surface-variant: #5a413f;
|
||||
--color-outline: #8d706e;
|
||||
--color-outline-variant: #e2bebc;
|
||||
|
||||
--color-primary: #820012;
|
||||
--color-on-primary: #ffffff;
|
||||
--color-heritage-red: #a61d24;
|
||||
--color-on-primary-container: #ffb9b4;
|
||||
|
||||
--color-secondary: #735c00;
|
||||
--color-secondary-container: #fed65b;
|
||||
--color-on-secondary-container: #745c00;
|
||||
--color-aged-amber: #ffbf00;
|
||||
|
||||
--color-success-green: #2d6a4f;
|
||||
--color-status-blue: #2a6ebb;
|
||||
--color-subtle-gray: #999999;
|
||||
--color-ink-black: #1a1a1a;
|
||||
|
||||
--color-error: #ba1a1a;
|
||||
--color-background: #faf9f7;
|
||||
--color-card: #ffffff;
|
||||
|
||||
--font-headline: 'Manrope', 'PingFang SC', sans-serif;
|
||||
--font-body: 'Be Vietnam Pro', 'PingFang SC', sans-serif;
|
||||
--font-label: 'Inter', 'PingFang SC', sans-serif;
|
||||
|
||||
--radius-sm: 0.25rem;
|
||||
--radius-md: 0.75rem;
|
||||
--radius-lg: 1rem;
|
||||
--radius-xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
--space-page: 20px;
|
||||
--space-gutter: 12px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 32px;
|
||||
|
||||
--shadow-card: 0 4px 20px rgba(166, 29, 36, 0.05);
|
||||
--shadow-tabbar: 0 -4px 20px rgba(0, 0, 0, 0.06);
|
||||
--border-card: 1px solid rgba(166, 29, 36, 0.05);
|
||||
}
|
||||
Reference in New Issue
Block a user