fastapi+angular外卖系统

说明：

fastapi+angular外卖系统

1.美食分类（粥，粉，面，炸鸡，炒菜，西餐，奶茶等等）

2.商家列表 （kfc，兰州拉面，湘菜馆，早餐店，重庆小面，潮汕砂锅粥，蜜雪冰城等等）

商家item：

商家店名，评分，月销量，人均价格，起送价格，配送费价格，店铺位置，商家标签，商家分类

3.商家详情页

商家店名，评分，月销量

菜品分类（比如炒饭，拉面，盖饭，单人套餐，双人套餐，米线，酒水饮料）

菜品列表

菜品item：

菜品名，评分，月销量，菜品标签，菜品分类，菜品价格

显示评价列表，包括用户评分和评价内容

商家详情，包括店铺位置，商家联系电话，营业时间，订餐注意事项，店铺政策

4.结算页

填写用户名，用户联系电话，收货地址，

商品详细清单 店铺名，菜品名，购买数量，菜品单价，配送费，打包费，总金额，提交订单功能

5.订单详情页

订单单号，订单状态（已完成，已退款，待接单，待配送），店铺名称，菜品名称，购买数量，菜品单价，配送费，打包费，总金额

配送信息，订单下单时间，配送完成时间，配送地址，骑手名，骑手联系电话，支付方式，备注信息等等

6.评价表

用户对菜品的评价

效果图：

json:

/* Merchant List Endpoint - GET http://localhost:8000/merchants */
{
    "data": [
        {
            "id": 7,
            "name": "Haidilao Hot Pot",
            "rating": 4.9,
            "monthly_sales": 4000,
            "avg_price": 80.0,
            "min_order_price": 50.0,
            "delivery_fee": 0.0,
            "location": "3F Food Court",
            "tags": "Hot Pot,24/7",
            "contact_phone": "13800138444",
            "business_hours": "24/7",
            "notice": "Free delivery",
            "policy": "Service first",
            "categories": "Hot Pot"
        },
        // Other merchants follow similar pattern...
    ]
}

/* Food Categories Endpoint - GET http://localhost:8000/categories */
{
    "data": [
        {"id": 7, "name": "Bubble Tea"},
        {"id": 10, "name": "Japanese"},
        {"id": 8, "name": "Hot Pot"},
        // Other categories...
    ]
}

/* Merchant Details - GET http://localhost:8000/merchants/1 */
{
    "merchant": {
        "id": 1,
        "name": "KFC",
        "rating": 4.5,
        "monthly_sales": 2000,
        "avg_price": 35.0,
        "min_order_price": 20.0,
        "delivery_fee": 5.0,
        "location": "People's Square, City Center",
        "tags": "Fast Food,24/7",
        "contact_phone": "13800138000",
        "business_hours": "07:00-23:00",
        "notice": "Order during business hours",
        "policy": "Unconditional refund"
    },
    "categories": [
        {
            "id": 1,
            "name": "Fried Chicken Meals",
            "dishes": "[{\"id\": 1, \"name\": \"Spicy Chicken Burger Meal\", \"tags\": \"Popular\", \"price\": 35.00, \"sales\": 800, \"rating\": 4.50}]"
        }
    ],
    "reviews": [
        {
            "rating": 4.8,
            "content": "The burger was delicious!",
            "review_time": "2024-03-01T13:00:00",
            "dish_name": "Spicy Chicken Burger Meal"
        }
    ]
}

/* Create Order - POST http://localhost:8000/orders */
Request Body:
{
    "customer_name": "Wang Xiaoming",
    "customer_phone": "13800138000",
    "delivery_address": "No.123 Zhangjiang Road, Pudong, Shanghai",
    "merchant_id": 1,
    "payment_method": "Alipay",
    "items": [
        {"dish_id": 1, "quantity": 2, "price": 35.00},
        {"dish_id": 2, "quantity": 1, "price": 40.00}
    ],
    "note": "Need invoice, no chili please"
}

Response:
{"order_id": 14}

/* Order Details - GET http://localhost:8000/orders/1 */
{
    "order": {
        "id": 1,
        "customer_name": "Zhang San",
        "status": "Completed",
        "payment_method": "WeChat Pay",
        "merchant_name": "KFC"
    },
    "items": [
        {"dish_name": "Spicy Chicken Burger Meal", "quantity": 2},
        {"dish_name": "Orleans Wings Meal", "quantity": 1}
    ]
}

/* Dish Reviews - GET http://localhost:8000/dishes/1/reviews */
[
    {
        "rating": 4.8,
        "content": "Perfectly crispy chicken!",
        "review_time": "2024-03-01T13:00:00",
        "quantity": 2
    }
]

网络请求： C:\Users\wangrusheng\WebstormProjects\untitled4\src\app\services\merchant.service.ts

// merchant.service.ts
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class MerchantService {
  private apiUrl = 'http://localhost:8000';

  constructor(private http: HttpClient) { }

  getCategories(): Observable<any> {
    return this.http.get(`${this.apiUrl}/categories`);
  }

  getMerchants(categoryId?: number, page = 1, sortBy = 'rating'): Observable<any> {
    const params: any = {
      page: page.toString(),
      sort_by: sortBy
    };
    if (categoryId) params.category_id = categoryId.toString();

    return this.http.get(`${this.apiUrl}/merchants`, { params });
  }

  getMerchantDetail(id: number): Observable<any> {
    console.log("getMerchantDetail",id)
    return this.http.get(`${this.apiUrl}/merchants/${id}`);
  }

  createOrder(orderData: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/orders`, orderData);
  }

  getOrderDetail(id: number): Observable<any> {
    return this.http.get(`${this.apiUrl}/orders/${id}`);
  }

  submitReview(reviewData: any): Observable<any> {
    return this.http.post(`${this.apiUrl}/reviews`, reviewData);
  }
}

step1:sql

-- 1. 美食分类表
CREATE TABLE category (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(50) NOT NULL UNIQUE
);

select *from category

-- 2. 商家表
CREATE TABLE merchant (
    id INT PRIMARY KEY AUTO_INCREMENT,
    name VARCHAR(100) NOT NULL,
    rating DECIMAL(3,2) DEFAULT 0.00,
    monthly_sales INT DEFAULT 0,
    avg_price DECIMAL(8,2) DEFAULT 0.00,
    min_order_price DECIMAL(8,2) DEFAULT 0.00,
    delivery_fee DECIMAL(8,2) DEFAULT 0.00,
    location VARCHAR(255),
    tags VARCHAR(255),
    contact_phone VARCHAR(20),
    business_hours VARCHAR(100),
    notice TEXT,
    policy TEXT
);

-- 商家分类关联表
CREATE TABLE merchant_category (
    merchant_id INT,
    category_id INT,
    PRIMARY KEY (merchant_id, category_id),
    FOREIGN KEY (merchant_id) REFERENCES merchant(id),
    FOREIGN KEY (category_id) REFERENCES category(id)
);

-- 3. 菜品分类表
CREATE TABLE dish_category (
    id INT PRIMARY KEY AUTO_INCREMENT,
    merchant_id INT NOT NULL,
    name VARCHAR(50) NOT NULL,
    FOREIGN KEY (merchant_id) REFERENCES merchant(id)
);

-- 4. 菜品表
CREATE TABLE dish (
    id INT PRIMARY KEY AUTO_INCREMENT,
    merchant_id INT NOT NULL,
    category_id INT NOT NULL,
    name VARCHAR(100) NOT NULL,
    rating DECIMAL(3,2) DEFAULT 0.00,
    monthly_sales INT DEFAULT 0,
    tags VARCHAR(255),
    price DECIMAL(8,2) NOT NULL,
    FOREIGN KEY (merchant_id) REFERENCES merchant(id),
    FOREIGN KEY (category_id) REFERENCES dish_category(id)
);

-- 5. 订单表
CREATE TABLE `order` (
    id INT PRIMARY KEY AUTO_INCREMENT,
    customer_name VARCHAR(100) NOT NULL,
    customer_phone VARCHAR(20) NOT NULL,
    delivery_address VARCHAR(255) NOT NULL,
    merchant_id INT NOT NULL,
    total_amount DECIMAL(10,2) NOT NULL,
    delivery_fee DECIMAL(8,2) DEFAULT 0.00,
    packing_fee DECIMAL(8,2) DEFAULT 0.00,
    status ENUM('已完成','已退款','待接单','待配送') DEFAULT '待接单',
    order_time DATETIME NOT NULL,
    complete_time DATETIME,
    rider_name VARCHAR(100),
    rider_phone VARCHAR(20),
    payment_method VARCHAR(50),
    note TEXT,
    FOREIGN KEY (merchant_id) REFERENCES merchant(id)
);


select *from db_school.order;

-- 6. 订单明细表
CREATE TABLE order_item (
    id INT PRIMARY KEY AUTO_INCREMENT,
    order_id INT NOT NULL,
    dish_id INT NOT NULL,
    quantity INT NOT NULL,
    price DECIMAL(8,2) NOT NULL,
    FOREIGN KEY (order_id) REFERENCES `order`(id),
    FOREIGN KEY (dish_id) REFERENCES dish(id)
);

-- 7. 评价表
CREATE TABLE review (
    id INT PRIMARY KEY AUTO_INCREMENT,
    order_item_id INT NOT NULL UNIQUE,
    rating DECIMAL(3,2) NOT NULL,
    content TEXT,
    review_time DATETIME NOT NULL,
    FOREIGN KEY (order_item_id) REFERENCES order_item(id)
);

-- Insert food categories
INSERT INTO category (name) VALUES
('Porridge'),('Rice Noodles'),('Noodles'),('Fried Chicken'),('Stir-Fry'),('Western Food'),('Bubble Tea');

INSERT INTO category (name) VALUES
('Hot Pot'), ('BBQ'), ('Japanese Cuisine');


-- Insert merchant data
INSERT INTO merchant (name, rating, monthly_sales, avg_price, min_order_price, delivery_fee, location, tags, contact_phone, business_hours, notice, policy) VALUES
('KFC', 4.5, 2000, 35.00, 20.00, 5.00, 'People''s Square, City Center', 'Fast Food,24/7 Service', '13800138000', '07:00-23:00', 'Please order during business hours', 'Unconditional refund'),
('Lanzhou Beef Noodles', 4.7, 1500, 20.00, 15.00, 3.00, '100 Zhongshan Road', 'Noodles,Halal', '13900139000', '08:00-22:00', 'Advance reservation recommended', 'Free packaging'),
('Mixue Ice Cream & Tea', 4.6, 3000, 10.00, 0.00, 0.00, '50 Jiefang Road', 'Bubble Tea,Desserts', '13700137000', '09:00-22:00', 'Minimum order ¥10', 'Made fresh');

-- Additional merchants...
INSERT INTO merchant (name, rating, monthly_sales, avg_price, min_order_price, delivery_fee, location, tags, contact_phone, business_hours, notice, policy) VALUES
('McDonald''s', 4.6, 2500, 30.00, 20.00, 4.00, '5 Commercial Street', 'Fast Food,Burgers', '13800138111', '07:00-23:30', '24/7 delivery', 'Coupons accepted'),
('Pizza Hut', 4.4, 1800, 50.00, 30.00, 6.00, 'City Center Plaza', 'Pizza,Western Food', '13800138222', '10:00-22:00', 'Happy Hour deals', 'Utensils provided'),
('Starbucks', 4.7, 3000, 35.00, 0.00, 5.00, '1F Shopping Mall', 'Coffee,Desserts', '13800138333', '08:00-21:00', 'Takeaway discounts', 'Eco-cup discount'),
('Haidilao Hot Pot', 4.9, 4000, 80.00, 50.00, 0.00, '3F Food Court', 'Hot Pot,24/7', '13800138444', '24/7', 'Free delivery', 'Service first'),
('Shaxian Snacks', 4.3, 1200, 15.00, 10.00, 2.00, 'Community Street', 'Snacks,Economy', '13800138555', '06:30-22:00', 'Large portions', 'Free rice refill'),
('Zhen Gongfu', 4.5, 1500, 25.00, 15.00, 3.00, 'Near Train Station', 'Fast Food,Steamed Dishes', '13800138666', '09:00-21:00', 'Quick service', 'Self-pickup available'),
('Burger King', 4.6, 2000, 40.00, 25.00, 5.00, 'Block B Commercial Area', 'Burgers,Fries', '13800138777', '08:00-24:00', 'King Meal deals', 'Reward points');

-- Special noodle merchants
INSERT INTO merchant (name, rating, monthly_sales, avg_price, min_order_price, delivery_fee, location, tags, contact_phone, business_hours, notice, policy)
VALUES (
    'Liuzhou Luosifen',
    4.8,
    1800,
    18.00,
    15.00,
    2.50,
    'No.8 Food Street',
    'Luosifen,Authentic',
    '13811112222',
    '09:00-22:00',
    'Customizable spiciness',
    'Free extra bamboo shoots'
);

-- Link categories (assuming Rice Noodles category_id=2)
INSERT INTO merchant_category (merchant_id, category_id)
VALUES
    ((SELECT id FROM merchant WHERE name='Liuzhou Luosifen'), 2),
    ((SELECT id FROM merchant WHERE name='Nanning Old Friend Noodles'), 2);

-- Insert dish categories
INSERT INTO dish_category (merchant_id, name) VALUES
(1,'Fried Chicken Meals'),(1,'Burger Meals'),
(2,'Signature Noodles'),(2,'Rice Bowls'),
(3,'Classic Bubble Tea'),(3,'Summer Specials');

-- Insert dishes
INSERT INTO dish (merchant_id, category_id, name, rating, monthly_sales, tags, price) VALUES
(1,1,'Spicy Chicken Burger Meal',4.5,800,'Popular',35.00),
(1,2,'Orleans Wings Meal',4.6,600,'New',40.00),
(2,3,'Beef Noodles',4.8,500,'Signature',18.00),
(2,4,'Braised Beef Rice Bowl',4.7,300,'Recommended',22.00),
(3,5,'Pearl Milk Tea',4.7,1500,'Classic',8.00),
(3,6,'Strawberry Sundae',4.8,1000,'Seasonal',6.00);

-- Insert orders
INSERT INTO `order` (customer_name, customer_phone, delivery_address, merchant_id, total_amount, delivery_fee, packing_fee, status, order_time, payment_method) VALUES
('Zhang San','13800001111','Tech Park Building 1',1,77.00,5.00,2.00,'Completed','2024-03-01 12:00:00','WeChat Pay'),
('Li Si','13900002222','University Dorm 3',2,40.00,3.00,1.00,'Pending Delivery','2024-03-02 18:30:00','Alipay');

-- Insert reviews
INSERT INTO review (order_item_id, rating, content, review_time) VALUES
(1,4.8,'Burgers were delicious!','2024-03-01 13:00:00'),
(3,4.9,'Very authentic noodles','2024-03-02 19:00:00');

step2:fastapi

from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
import pymysql.cursors
from typing import List, Optional
from pydantic import BaseModel
from datetime import datetime
app = FastAPI()

# CORS配置
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 数据库配置（根据实际情况修改）
DB_CONFIG = {
    'host': 'localhost',
    'user': 'root',
    'password': '123456',
    'db': 'db_school',
    'charset': 'utf8mb4',
    'cursorclass': pymysql.cursors.DictCursor
}

# 基础数据模型
class Category(BaseModel):
    id: int
    name: str

class MerchantBase(BaseModel):
    name: str
    rating: float
    monthly_sales: int
    avg_price: float

# API 请求模型
class CreateOrderItem(BaseModel):
    dish_id: int
    quantity: int
    price: float

class CreateOrder(BaseModel):
    customer_name: str
    customer_phone: str
    delivery_address: str
    merchant_id: int
    items: List[CreateOrderItem]
    payment_method: str
    note: Optional[str] = None

def db_query(query: str, params=None, fetch_one=False):
    try:
        connection = pymysql.connect(**DB_CONFIG)
        with connection.cursor() as cursor:
            cursor.execute(query, params)
            result = cursor.fetchone() if fetch_one else cursor.fetchall()
        connection.commit()
        connection.close()
        return result
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))



# 1. 获取所有美食分类
@app.get("/categories")
async def get_categories():
    """获取所有美食分类"""
    query = "SELECT id, name FROM category"
    return {"data": db_query(query)}


# 2. 商家列表接口
@app.get("/merchants")
async def get_merchants(
        category_id: Optional[int] = None,
        page: int = 1,
        page_size: int = 10,
        sort_by: str = 'rating'
):
    """获取商家列表（支持分类筛选和排序）"""
    offset = (page - 1) * page_size
    base_query = """
        SELECT m.*, GROUP_CONCAT(c.name) AS categories 
        FROM merchant m
        LEFT JOIN merchant_category mc ON m.id = mc.merchant_id
        LEFT JOIN category c ON mc.category_id = c.id
    """
    where = []
    params = []

    if category_id:
        where.append("mc.category_id = %s")
        params.append(category_id)

    if where:
        base_query += " WHERE " + " AND ".join(where)

    base_query += " GROUP BY m.id"

    # 排序逻辑
    sort_columns = {
        'rating': 'm.rating DESC',
        'sales': 'm.monthly_sales DESC',
        'price': 'm.avg_price ASC'
    }
    order_by = sort_columns.get(sort_by, 'm.rating DESC')
    base_query += f" ORDER BY {order_by} LIMIT %s OFFSET %s"

    params.extend([page_size, offset])
    return {"data": db_query(base_query, params)}


# 3. 商家详情
@app.get("/merchants/{merchant_id}")
async def get_merchant_detail(merchant_id: int):
    """获取商家详细信息"""
    # 商家基本信息
    merchant = db_query("SELECT * FROM merchant WHERE id = %s", (merchant_id,), True)
    if not merchant:
        raise HTTPException(404, "商家不存在")

    # 菜品分类及菜品
    categories = db_query("""
    SELECT dc.id, dc.name, 
    (SELECT JSON_ARRAYAGG(
        JSON_OBJECT('id',d.id,'name',d.name,'price',d.price,
                    'rating',d.rating,'sales',d.monthly_sales,'tags',d.tags)
    ) FROM dish d WHERE d.category_id = dc.id) AS dishes
    FROM dish_category dc WHERE dc.merchant_id = %s
    """, (merchant_id,))

    # 评价
    reviews = db_query("""
    SELECT r.rating, r.content, r.review_time, d.name AS dish_name
    FROM review r
    JOIN order_item oi ON r.order_item_id = oi.id
    JOIN dish d ON oi.dish_id = d.id
    WHERE d.merchant_id = %s ORDER BY r.review_time DESC LIMIT 10
    """, (merchant_id,))

    return {
        "merchant": merchant,
        "categories": categories,
        "reviews": reviews
    }


# 4. 创建订单接口
@app.post("/orders")
async def create_order(order_data: CreateOrder):
    """创建新订单"""
    connection = pymysql.connect(**DB_CONFIG)
    try:
        with connection.cursor() as cursor:
            # 计算总金额
            total = sum(item.price * item.quantity for item in order_data.items)

            # 获取商家配送费
            cursor.execute("SELECT delivery_fee, min_order_price FROM merchant WHERE id = %s",
                           (order_data.merchant_id,))
            merchant_info = cursor.fetchone()
            if not merchant_info:
                raise HTTPException(status_code=404, detail="Merchant not found")

            if total < merchant_info['min_order_price']:
                raise HTTPException(
                    status_code=400,
                    detail=f"订单金额需达到{merchant_info['min_order_price']}元"
                )

            # 创建订单
            order_query = """
                INSERT INTO `order` (
                    customer_name, customer_phone, delivery_address,
                    merchant_id, total_amount, delivery_fee, 
                    status, order_time, payment_method, note
                ) VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)
            """
            order_params = (
                order_data.customer_name,
                order_data.customer_phone,
                order_data.delivery_address,
                order_data.merchant_id,
                total,
                merchant_info['delivery_fee'],
                '待接单',
                datetime.now(),
                order_data.payment_method,
                order_data.note
            )
            cursor.execute(order_query, order_params)
            order_id = cursor.lastrowid

            # 创建订单明细
            for item in order_data.items:
                cursor.execute("""
                    INSERT INTO order_item 
                    (order_id, dish_id, quantity, price)
                    VALUES (%s,%s,%s,%s)
                """, (order_id, item.dish_id, item.quantity, item.price))

            connection.commit()
            return {"order_id": order_id}
    except Exception as e:
        connection.rollback()
        raise HTTPException(status_code=500, detail=str(e))
    finally:
        connection.close()

# 5. 订单详情接口
@app.get("/orders/{order_id}")
async def get_order_detail(order_id: int):
    """获取订单详情"""
    order_query = """
        SELECT o.*, m.name AS merchant_name 
        FROM `order` o
        JOIN merchant m ON o.merchant_id = m.id
        WHERE o.id = %s
    """
    order = db_query(order_query, (order_id,), fetch_one=True)
    if not order:
        raise HTTPException(status_code=404, detail="订单不存在")

    items_query = """
        SELECT oi.*, d.name AS dish_name 
        FROM order_item oi
        JOIN dish d ON oi.dish_id = d.id
        WHERE oi.order_id = %s
    """
    items = db_query(items_query, (order_id,))

    return {"order": order, "items": items}

# 6. 获取菜品评价
@app.get("/dishes/{dish_id}/reviews")
async def get_dish_reviews(dish_id: int):
    """获取菜品评价"""
    return db_query("""
    SELECT r.rating, r.content, r.review_time, oi.quantity 
    FROM review r
    JOIN order_item oi ON r.order_item_id = oi.id
    WHERE oi.dish_id = %s
    ORDER BY r.review_time DESC
    """, (dish_id,))

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

step3:商家列表 C:\Users\wangrusheng\WebstormProjects\untitled4\src\app\merchants-list\merchants-list.component.html

import { Component, OnInit } from '@angular/core';

import { MerchantService} from '../services/merchant.service';
import {NgForOf, NgIf} from '@angular/common';
import {RouterLink} from '@angular/router';


@Component({
  selector: 'app-merchants-list',
  imports: [
    NgForOf,
    NgIf,
    RouterLink
  ],
  templateUrl: './merchants-list.component.html',
  styleUrl: './merchants-list.component.css'
})
export class MerchantsListComponent  implements OnInit {
  categories: any[] = [];
  merchants: any[] = [];
  selectedCategoryId: number | null = null;
  isLoading = false;

  constructor(private merchantService: MerchantService) { }

  ngOnInit() {
    this.loadCategories();
    this.loadMerchants(); // 初始加载全部商家
  }

  // 加载分类数据
  loadCategories() {
    this.merchantService.getCategories().subscribe(res => {
      this.categories = res.data;
    });
  }

  // 加载商家数据
  loadMerchants(categoryId?: number) {
    this.isLoading = true;
    this.merchantService.getMerchants(categoryId).subscribe({
      next: (res) => {
        this.merchants = res.data;
        this.isLoading = false;
      },
      error: () => {
        this.isLoading = false;
        alert('加载商家失败，请重试');
      }
    });
  }

  // 分类选择处理
  selectCategory(categoryId: number | null) {
    this.selectedCategoryId = categoryId;
    this.loadMerchants(categoryId ?? undefined);
  }
}
<!-- takeout.component.html -->
<div class="container">
  <!-- 左侧分类导航 -->
  <div class="categories-sidebar">
    <h3>美食分类</h3>
    <ul>
      <li
        *ngFor="let category of categories"
        [class.active]="selectedCategoryId === category.id"
        (click)="selectCategory(category.id)">
        {{category.name}}
      </li>
      <li
        [class.active]="!selectedCategoryId"
        (click)="selectCategory(null)">
        全部商家
      </li>
    </ul>
  </div>

  <!-- 右侧商家列表 -->
  <div class="merchant-list">
    <!-- 加载状态 -->
    <div *ngIf="isLoading" class="loading">加载中...</div>

    <!-- 商家列表 -->
    <div *ngFor="let merchant of merchants" class="merchant-card">
      <div class="merchant-header">
        <h3>{{merchant.name}}</h3>
        <span class="rating">{{merchant.rating}} ★</span>
      </div>

      <div class="merchant-info">
        <div class="meta">
          <span>月售 {{merchant.monthly_sales}}</span>
          <span>起送 ¥{{merchant.min_order_price}}</span>
          <span>配送 ¥{{merchant.delivery_fee}}</span>
        </div>
        <a [routerLink]="['/merchants-detail', merchant.id]" class="detail-link">查看详情</a>

        <div class="tags">
          <span *ngFor="let tag of merchant.tags.split(',')">{{tag}}</span>
        </div>
      </div>
    </div>
  </div>
</div>
/* takeout.component.css */
.container {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 20px;
}

.categories-sidebar {
  background: #f5f5f5;
  padding: 15px;
  border-radius: 8px;
}

.categories-sidebar ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-sidebar li {
  padding: 10px;
  cursor: pointer;
  border-radius: 4px;
  margin-bottom: 5px;
  transition: all 0.2s;
}

.categories-sidebar li:hover {
  background: #eee;
}

.categories-sidebar li.active {
  background: #007bff;
  color: white;
}

.merchant-list {
  display: grid;
  gap: 15px;
}

.merchant-card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.merchant-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.rating {
  color: #ffd700;
  font-weight: bold;
}

.meta span {
  margin-right: 15px;
  color: #666;
}

.tags span {
  display: inline-block;
  background: #f0f0f0;
  padding: 4px 8px;
  border-radius: 4px;
  margin: 5px 5px 0 0;
  font-size: 0.9em;
}

.loading {
  text-align: center;
  padding: 20px;
  color: #666;
}

step4:商家详情 C:\Users\wangrusheng\WebstormProjects\untitled4\src\app\merchants-detail\merchants-detail.component.css

// merchants-detail.component.ts
import { Component, OnInit } from '@angular/core';
import {ActivatedRoute, RouterLink} from '@angular/router';
import { MerchantService } from '../services/merchant.service';
import { DatePipe, NgFor, NgIf } from '@angular/common';

@Component({
  selector: 'app-merchants-detail',
  standalone: true,
  imports: [NgIf, NgFor, DatePipe, RouterLink],
  templateUrl: './merchants-detail.component.html',
  styleUrls: ['./merchants-detail.component.css']
})
export class MerchantsDetailComponent implements OnInit {
  merchantDetail: any;
  isLoading = true;
  errorMessage = '';

  constructor(
    private route: ActivatedRoute,
    private merchantService: MerchantService
  ) { }

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    if (id) {
      this.loadMerchantDetail(+id);
    } else {
      this.errorMessage = '无效的商家ID';
      this.isLoading = false;
    }
  }

  loadMerchantDetail(id: number) {
    this.merchantService.getMerchantDetail(id).subscribe({
      next: (res) => {
        this.merchantDetail = {
          ...res,
          categories: res.categories.map((cat: any) => ({
            ...cat,
            dishes: JSON.parse(cat.dishes)
          }))
        };
        this.isLoading = false;
      },
      error: (err) => {
        this.errorMessage = '加载商家详情失败，请稍后重试';
        this.isLoading = false;
      }
    });
  }

  getRatingStars(rating: number): string {
    return '★'.repeat(Math.round(rating));
  }
}

<!-- merchants-detail.component.html -->
<div class="merchant-container">
  <!-- 加载状态 -->
  <div *ngIf="isLoading" class="loading">加载中...</div>

  <!-- 错误提示 -->
  <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>

  <!-- 商家详情内容 -->
  <div *ngIf="merchantDetail" class="merchant-content">
    <!-- 商家基本信息 -->
    <section class="merchant-info">
      <h1>{{ merchantDetail.merchant.name }}</h1>
      <div class="stats">
        <span class="rating">
          {{ getRatingStars(merchantDetail.merchant.rating) }}
          <em>({{ merchantDetail.merchant.rating }})</em>
        </span>
        <span>月售 {{ merchantDetail.merchant.monthly_sales }}</span>
        <span>人均 ¥{{ merchantDetail.merchant.avg_price }}</span>
      </div>

      <div class="details">
        <div class="detail-item">
          <label>起送价:</label>
          <span>¥{{ merchantDetail.merchant.min_order_price }}</span>
        </div>
        <div class="detail-item">
          <label>配送费:</label>
          <span>¥{{ merchantDetail.merchant.delivery_fee }}</span>
        </div>
        <div class="detail-item">
          <label>营业时间:</label>
          <span>{{ merchantDetail.merchant.business_hours }}</span>
        </div>
        <div class="detail-item">
          <label>联系电话:</label>
          <a href="tel:{{ merchantDetail.merchant.contact_phone }}">
            {{ merchantDetail.merchant.contact_phone }}
          </a>
        </div>
        <div class="detail-item">
          <label>地址:</label>
          <address>{{ merchantDetail.merchant.location }}</address>
        </div>
      </div>

      <div class="tags">
        <span *ngFor="let tag of merchantDetail.merchant.tags.split(',')"
              class="tag">
          {{ tag }}
        </span>
      </div>
    </section>

    <!-- 菜品分类 -->

    <!-- merchants-detail.component.html -->
    <section *ngFor="let category of merchantDetail.categories" class="menu-category">
      <h2>{{ category.name }}</h2>
      <div class="dishes">
        <div *ngFor="let dish of category.dishes" class="dish-card">
          <!-- 其他菜品信息 -->
          <div class="dish-info">
            <h3>{{ dish.name }}</h3>
            <div class="dish-meta">
              <span class="price">¥{{ dish.price }}</span>
              <span class="sales">月售 {{ dish.sales }}</span>
              <span class="dish-rating">
                {{ getRatingStars(dish.rating) }}
              </span>
            </div>
            <div class="dish-tags">
              <span *ngFor="let tag of dish.tags.split(',')"
                    class="tag">
                {{ tag }}
              </span>
            </div>
          <button class="book-button"
                  [routerLink]="['/merchants-order']"
                  [state]="{
                orderData: {
                  dish: dish,
                  merchant: merchantDetail.merchant
                }
              }">
            立即购买
          </button>
        </div>
      </div>
      </div>
    </section>


    <!-- 用户评价 -->
    <section class="reviews">
      <h2>用户评价 ({{ merchantDetail.reviews.length }})</h2>
      <div *ngFor="let review of merchantDetail.reviews" class="review-card">
        <div class="review-header">
          <span class="rating">{{ getRatingStars(review.rating) }}</span>
          <span class="dish">{{ review.dish_name }}</span>
          <time [title]="review.review_time | date:'long'">
            {{ review.review_time | date:'yyyy-MM-dd HH:mm' }}
          </time>
        </div>
        <p class="content">{{ review.content }}</p>
      </div>
    </section>
  </div>
</div>


/* merchants-detail.component.css */
.merchant-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 1.2rem;
}

.error {
  color: #dc3545;
}

.merchant-content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  padding: 24px;
}

.merchant-info h1 {
  color: #333;
  margin-bottom: 16px;
}

.stats {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
  color: #666;
}

.rating {
  color: #ffd700;
  font-size: 1.2em;
}
.rating em {
  color: #666;
  font-style: normal;
  font-size: 0.9em;
  margin-left: 8px;
}

.details {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #eee;
}

.detail-item label {
  color: #999;
}

.tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tag {
  background: #f0f0f0;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.9em;
  color: #666;
}

/* 菜品分类样式 */
.menu-category {
  margin: 32px 0;
  border-top: 2px solid #eee;
  padding-top: 24px;
}

.menu-category h2 {
  color: #444;
  margin-bottom: 16px;
}

.dishes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.dish-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  transition: transform 0.2s;
}

.dish-card:hover {
  transform: translateY(-2px);
}

.dish-meta {
  display: flex;
  gap: 12px;
  margin: 8px 0;
  color: #666;
}

.price {
  color: #e4393c;
  font-weight: bold;
}

.dish-rating {
  color: #ffd700;
}

/* 评价样式 */
.reviews {
  margin-top: 40px;
}

.review-card {
  padding: 16px;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
}

.review-header {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 8px;
  color: #666;
}

.review-header time {
  font-size: 0.9em;
  color: #999;
}

.content {
  color: #333;
  line-height: 1.6;
}

step5:立即购买C:\Users\wangrusheng\WebstormProjects\untitled4\src\app\merchants-order\merchants-order.component.css

// merchants-order.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
import {Location, NgIf} from '@angular/common';
import { MerchantService } from '../services/merchant.service';

// 类型定义
interface Dish {
  id: number;
  name: string;
  price: number;
  // 其他字段根据实际API响应添加
}

interface Merchant {
  id: number;
  name: string;
  delivery_fee: number;
  location: string;
  // 其他字段根据实际API响应添加
}

interface OrderState {
  orderData: {
    dish: Dish;
    merchant: Merchant;
  };
}

@Component({
  selector: 'app-merchants-order',
  templateUrl: './merchants-order.component.html',
  imports: [
    ReactiveFormsModule,
    NgIf
  ],
  styleUrls: ['./merchants-order.component.css']
})
export class MerchantsOrderComponent implements OnInit {
  orderForm: FormGroup;
  selectedDish?: Dish;
  merchant?: Merchant;
  loading = false;

  constructor(
    private fb: FormBuilder,
    private location: Location,
    private router: Router,
    private route: ActivatedRoute,
    private merchantService: MerchantService
  ) {
    this.orderForm = this.fb.group({
      customer_name: ['', [Validators.required, Validators.minLength(2)]],
      customer_phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]],
      delivery_address: ['', [Validators.required, Validators.minLength(5)]],
      payment_method: ['alipay', Validators.required],
      note: [''],
      quantity: [1, [Validators.required, Validators.min(1), Validators.max(10)]]
    });
  }

  ngOnInit(): void {
    this.handleRouteState();
    this.setupFormListeners();
  }

  private handleRouteState(): void {
    const state = this.location.getState() as OrderState;
    console.log('路由状态:', state);

    if (state?.orderData?.dish && state?.orderData?.merchant) {
      this.selectedDish = state.orderData.dish;
      this.merchant = state.orderData.merchant;
      this.initFormWithFallbackData();
    } else {
      console.warn('无效的路由状态，尝试通过参数加载');
      this.loadFromQueryParams();
    }
  }

  private loadFromQueryParams(): void {
    this.route.queryParams.subscribe(params => {
      if (params['merchantId'] && params['dishId']) {
        this.merchantService.getMerchantDetail(params['merchantId']).subscribe({
          next: merchant => {
            this.merchant = merchant;
            this.selectedDish = this.findDishInCategories(merchant.categories, params['dishId']);
            if (!this.selectedDish) {
              this.redirectToMerchantList();
            }
          },
          error: () => this.redirectToMerchantList()
        });
      } else {
        this.redirectToMerchantList();
      }
    });
  }

  private findDishInCategories(categories: any[], dishId: string): Dish | undefined {
    for (const category of categories) {
      const dishes = JSON.parse(category.dishes);
      const found = dishes.find((d: any) => d.id === +dishId);
      if (found) return found;
    }
    return undefined;
  }

  private initFormWithFallbackData(): void {
    this.orderForm.patchValue({
      delivery_address: this.merchant?.location || ''
    });
  }

  private setupFormListeners(): void {
    this.orderForm.get('quantity')?.valueChanges.subscribe(value => {
      if (value > 10) {
        this.orderForm.get('quantity')?.setValue(10);
      }
    });
  }

  get totalAmount(): string {
    if (!this.selectedDish || !this.merchant) return '0.00';
    const quantity = this.orderForm.get('quantity')?.value || 1;
    return (this.selectedDish.price * quantity + this.merchant.delivery_fee).toFixed(2);
  }

  onSubmit(): void {
    if (this.orderForm.invalid || !this.selectedDish || !this.merchant) return;

    const orderData = {
      ...this.orderForm.value,
      merchant_id: this.merchant.id,
      items: [{
        dish_id: this.selectedDish.id,
        quantity: this.orderForm.value.quantity,
        price: this.selectedDish.price
      }]
    };

    this.loading = true;
    this.merchantService.createOrder(orderData).subscribe({
      next: (res) => {
        this.router.navigate(['/merchants-order-detail', res.order_id]);
        this.loading = false;
      },
      error: (err) => {
        console.error('订单提交失败:', err);
        alert(`提交失败: ${err.error?.detail || '服务器错误'}`);
        this.loading = false;
      }
    });
  }

  private redirectToMerchantList(): void {
    this.router.navigate(['/merchants'], {
      queryParamsHandling: 'preserve'
    });
  }
}

<!-- merchants-order.component.html -->
<div class="order-container">
  <h2>确认订单</h2>

  <form *ngIf="merchant && selectedDish" [formGroup]="orderForm" (ngSubmit)="onSubmit()">
    <!-- 商家信息 -->
    <div class="merchant-info">
      <h3>{{ merchant.name }}</h3>
      <p>{{ merchant.location }}</p>
    </div>

    <!-- 商品信息 -->
    <div class="dish-info">
      <h4>{{ selectedDish.name }}</h4>
      <div class="price-quantity">
        <span class="price">¥{{ selectedDish.price }}</span>
        <div class="quantity-control">
          <label>数量：</label>
          <input type="number" formControlName="quantity" min="1">
        </div>
      </div>
    </div>

    <!-- 订单表单 -->
    <div class="form-section">
      <div class="form-group">
        <label>收货人姓名</label>
        <input type="text" formControlName="customer_name">
        <div *ngIf="orderForm.get('customer_name')?.errors?.['required']" class="error">
          姓名不能为空
        </div>
      </div>

      <div class="form-group">
        <label>联系电话</label>
        <input type="tel" formControlName="customer_phone">
        <div *ngIf="orderForm.get('customer_phone')?.errors?.['required']" class="error">
          电话不能为空
        </div>
        <div *ngIf="orderForm.get('customer_phone')?.errors?.['pattern']" class="error">
          请输入有效的手机号
        </div>
      </div>

      <div class="form-group">
        <label>配送地址</label>
        <textarea formControlName="delivery_address"></textarea>
        <div *ngIf="orderForm.get('delivery_address')?.errors?.['required']" class="error">
          地址不能为空
        </div>
      </div>

      <div class="form-group">
        <label>支付方式</label>
        <select formControlName="payment_method">
          <option value="alipay">支付宝</option>
          <option value="wechat">微信支付</option>
          <option value="cash">货到付款</option>
        </select>
      </div>

      <div class="form-group">
        <label>备注</label>
        <textarea formControlName="note"></textarea>
      </div>
    </div>

    <!-- 费用汇总 -->
    <div class="price-summary">
      <div class="summary-item">
        <span>商品总额：</span>
<!--        <span>¥{{ (selectedDish.price * orderForm.value.quantity).toFixed(2) }}</span>-->
      </div>
      <div class="summary-item">
        <span>配送费：</span>
        <span>¥{{ merchant.delivery_fee }}</span>
      </div>
      <div class="summary-item total">
        <span>总计：</span>
        <span>¥{{ totalAmount }}</span>
      </div>
    </div>

    <button type="submit" [disabled]="orderForm.invalid || loading" class="submit-btn">
      {{ loading ? '提交中...' : '提交订单' }}
    </button>
  </form>
</div>


.order-container {
  max-width: 600px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.merchant-info {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.dish-info {
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.error {
  color: #dc3545;
  font-size: 0.9em;
  margin-top: 5px;
}

.price-summary {
  margin-top: 20px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 4px;
}

.summary-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.total {
  font-weight: bold;
  font-size: 1.1em;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  background: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 20px;
}

.submit-btn:disabled {
  background: #6c757d;
  cursor: not-allowed;
}

step6:订单详情C:\Users\wangrusheng\WebstormProjects\untitled4\src\app\merchants-order-detail\merchants-order-detail.component.css

// merchants-order-detail.component.ts
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MerchantService } from '../services/merchant.service';
import { DatePipe, CurrencyPipe, NgIf, NgFor } from '@angular/common';

interface OrderItem {
  id: number;
  dish_name: string;
  quantity: number;
  price: number;
}

interface OrderDetail {
  id: number;
  customer_name: string;
  customer_phone: string;
  delivery_address: string;
  total_amount: number;
  delivery_fee: number;
  packing_fee: number;
  status: string;
  order_time: string;
  complete_time: string | null;
  rider_name: string | null;
  rider_phone: string | null;
  payment_method: string;
  note: string | null;
  merchant_name: string;
}

@Component({
  selector: 'app-merchants-order-detail',
  standalone: true,
  imports: [NgIf, NgFor, DatePipe, CurrencyPipe],
  templateUrl: './merchants-order-detail.component.html',
  styleUrls: ['./merchants-order-detail.component.css']
})
export class MerchantsOrderDetailComponent implements OnInit {
  orderId!: number;
  orderId2!: number;

  order!: OrderDetail;
  items: OrderItem[] = [];
  isLoading = true;
  errorMessage = '';

  constructor(
    private route: ActivatedRoute,
    private router: Router,
    private merchantService: MerchantService
  ) {}

  ngOnInit(): void {
    this.route.params.subscribe(params => {
      this.orderId = +params['order_id'];
      this.orderId2 = params['order_id'];
      console.log('从路由获取的order_id:', this.orderId+"==="+this.orderId2);

      this.loadOrderDetail();
    });
  }

  loadOrderDetail(): void {
    this.isLoading = true;
    this.merchantService.getOrderDetail(this.orderId).subscribe({
      next: (res) => {
        this.order = res.order;
        this.items = res.items;
        this.isLoading = false;
      },
      error: (err) => {
        console.error('加载失败:', err);
        this.errorMessage = '无法加载订单详情，请稍后重试';
        this.isLoading = false;
      }
    });
  }

  getStatusClass(): string {
    switch(this.order.status) {
      case '已完成': return 'status-completed';
      case '待接单': return 'status-pending';
      case '配送中': return 'status-delivering';
      default: return 'status-default';
    }
  }
}

<!-- merchants-order-detail.component.html -->
<div class="order-detail-container">
  <!-- 加载状态 -->
  <div *ngIf="isLoading" class="loading">加载中...</div>

  <!-- 错误提示 -->
  <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>

  <!-- 订单详情 -->
  <div *ngIf="order" class="order-content">
    <!-- 订单头信息 -->
    <div class="order-header">
      <h2>订单号：{{ order.id }}</h2>
      <span [class]="getStatusClass()">{{ order.status }}</span>
    </div>

    <!-- 基本信息 -->
    <div class="section">
      <h3>订单信息</h3>
      <div class="info-grid">
        <div class="info-item">
          <label>下单时间：</label>
          <span>{{ order.order_time | date:'yyyy-MM-dd HH:mm' }}</span>
        </div>
        <div class="info-item">
          <label>商家名称：</label>
          <span>{{ order.merchant_name }}</span>
        </div>
        <div class="info-item">
          <label>支付方式：</label>
          <span>{{ order.payment_method }}</span>
        </div>
      </div>
    </div>

    <!-- 商品清单 -->
    <div class="section">
      <h3>商品清单</h3>
      <table class="item-table">
        <thead>
        <tr>
          <th>商品名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>小计</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let item of items">
          <td>{{ item.dish_name }}</td>
          <td>{{ item.price | currency:'CNY':'symbol':'1.2-2' }}</td>
          <td>{{ item.quantity }}</td>
          <td>{{ item.price * item.quantity | currency:'CNY':'symbol':'1.2-2' }}</td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 费用明细 -->
    <div class="section">
      <h3>费用明细</h3>
      <div class="fee-details">
        <div class="fee-item">
          <span>商品总额：</span>
          <span>{{ order.total_amount - order.delivery_fee - order.packing_fee | currency:'CNY':'symbol':'1.2-2' }}</span>
        </div>
        <div class="fee-item">
          <span>配送费：</span>
          <span>{{ order.delivery_fee | currency:'CNY':'symbol':'1.2-2' }}</span>
        </div>
        <div class="fee-item">
          <span>包装费：</span>
          <span>{{ order.packing_fee | currency:'CNY':'symbol':'1.2-2' }}</span>
        </div>
        <div class="fee-item total">
          <span>实付金额：</span>
          <span>{{ order.total_amount | currency:'CNY':'symbol':'1.2-2' }}</span>
        </div>
      </div>
    </div>

    <!-- 配送信息 -->
    <div class="section">
      <h3>配送信息</h3>
      <div class="delivery-info">
        <p>收货人：{{ order.customer_name }}</p>
        <p>联系电话：{{ order.customer_phone }}</p>
        <p>配送地址：{{ order.delivery_address }}</p>
        <div *ngIf="order.rider_name" class="rider-info">
          <p>骑手：{{ order.rider_name }}</p>
          <p>骑手电话：{{ order.rider_phone }}</p>
        </div>
      </div>
    </div>

    <!-- 备注信息 -->
    <div *ngIf="order.note" class="section">
      <h3>订单备注</h3>
      <p class="note">{{ order.note }}</p>
    </div>
  </div>
</div>

/* merchants-order-detail.component.css */
.order-detail-container {
  max-width: 1200px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.loading, .error {
  text-align: center;
  padding: 40px;
  font-size: 1.2rem;
}

.error {
  color: #dc3545;
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.section {
  margin-bottom: 30px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 6px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 15px;
}

.item-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.item-table th,
.item-table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid #eee;
}

.item-table th {
  background: #f8f9fa;
}

.fee-details {
  max-width: 400px;
}

.fee-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.fee-item.total {
  font-weight: bold;
  border-top: 1px solid #eee;
  padding-top: 10px;
  font-size: 1.1em;
}

.note {
  color: #666;
  line-height: 1.6;
}

/* 状态标签样式 */
.status-completed { color: #28a745; }
.status-pending { color: #ffc107; }
.status-delivering { color: #17a2b8; }
.status-default { color: #6c757d; }

end