fastapi+angular外卖系统

阐明：
fastapi+angular外卖系统
1.美食分类（粥，粉，面，炸鸡，炒菜，西餐，奶茶等等）
2.商家列表 （kfc，兰州拉面，湘菜馆，早餐店，重庆小面，潮汕砂锅粥，蜜雪冰城等等）
商家item：
商家店名，评分，月销量，人均价格，起送价格，配送费价格，店肆位置，商家标签，商家分类
3.商家详情页
商家店名，评分，月销量
菜品分类（比如炒饭，拉面，盖饭，单人套餐，双人套餐，米线，酒水饮料）
菜品列表
菜品item：
菜品名，评分，月销量，菜品标签，菜品分类，菜品价格
显示评价列表，包括用户评分和评价内容
商家详情，包括店肆位置，商家联系电话，业务时间，订餐留意事项，店肆政策
4.结算页
填写用户名，用户联系电话，收货地点，
商品具体清单 店肆名，菜品名，购买数量，菜品单价，配送费，打包费，总金额，提交订单功能
5.订单详情页
订单单号，订单状态（已完成，已退款，待接单，待配送），店肆名称，菜品名称，购买数量，菜品单价，配送费，打包费，总金额
配送信息，订单下单时间，配送完成时间，配送地点，骑手名，骑手联系电话，支付方式，备注信息等等
6.评价表
用户对菜品的评价
效果图：

json:

1. /* Merchant List Endpoint - GET http://localhost:8000/merchants */
2. {
3.     "data": [
4.         {
5.             "id": 7,
6.             "name": "Haidilao Hot Pot",
7.             "rating": 4.9,
8.             "monthly_sales": 4000,
9.             "avg_price": 80.0,
10.             "min_order_price": 50.0,
11.             "delivery_fee": 0.0,
12.             "location": "3F Food Court",
13.             "tags": "Hot Pot,24/7",
14.             "contact_phone": "13800138444",
15.             "business_hours": "24/7",
16.             "notice": "Free delivery",
17.             "policy": "Service first",
18.             "categories": "Hot Pot"
19.         },
20.         // Other merchants follow similar pattern...
21.     ]
22. }
24. /* Food Categories Endpoint - GET http://localhost:8000/categories */
25. {
26.     "data": [
27.         {"id": 7, "name": "Bubble Tea"},
28.         {"id": 10, "name": "Japanese"},
29.         {"id": 8, "name": "Hot Pot"},
30.         // Other categories...
31.     ]
32. }
34. /* Merchant Details - GET http://localhost:8000/merchants/1 */
35. {
36.     "merchant": {
37.         "id": 1,
38.         "name": "KFC",
39.         "rating": 4.5,
40.         "monthly_sales": 2000,
41.         "avg_price": 35.0,
42.         "min_order_price": 20.0,
43.         "delivery_fee": 5.0,
44.         "location": "People's Square, City Center",
45.         "tags": "Fast Food,24/7",
46.         "contact_phone": "13800138000",
47.         "business_hours": "07:00-23:00",
48.         "notice": "Order during business hours",
49.         "policy": "Unconditional refund"
50.     },
51.     "categories": [
52.         {
53.             "id": 1,
54.             "name": "Fried Chicken Meals",
55.             "dishes": "[{"id": 1, "name": "Spicy Chicken Burger Meal", "tags": "Popular", "price": 35.00, "sales": 800, "rating": 4.50}]"
56.         }
57.     ],
58.     "reviews": [
59.         {
60.             "rating": 4.8,
61.             "content": "The burger was delicious!",
62.             "review_time": "2024-03-01T13:00:00",
63.             "dish_name": "Spicy Chicken Burger Meal"
64.         }
65.     ]
66. }
68. /* Create Order - POST http://localhost:8000/orders */
69. Request Body:
70. {
71.     "customer_name": "Wang Xiaoming",
72.     "customer_phone": "13800138000",
73.     "delivery_address": "No.123 Zhangjiang Road, Pudong, Shanghai",
74.     "merchant_id": 1,
75.     "payment_method": "Alipay",
76.     "items": [
77.         {"dish_id": 1, "quantity": 2, "price": 35.00},
78.         {"dish_id": 2, "quantity": 1, "price": 40.00}
79.     ],
80.     "note": "Need invoice, no chili please"
81. }
83. Response:
84. {"order_id": 14}
86. /* Order Details - GET http://localhost:8000/orders/1 */
87. {
88.     "order": {
89.         "id": 1,
90.         "customer_name": "Zhang San",
91.         "status": "Completed",
92.         "payment_method": "WeChat Pay",
93.         "merchant_name": "KFC"
94.     },
95.     "items": [
96.         {"dish_name": "Spicy Chicken Burger Meal", "quantity": 2},
97.         {"dish_name": "Orleans Wings Meal", "quantity": 1}
98.     ]
99. }
101. /* Dish Reviews - GET http://localhost:8000/dishes/1/reviews */
102. [
103.     {
104.         "rating": 4.8,
105.         "content": "Perfectly crispy chicken!",
106.         "review_time": "2024-03-01T13:00:00",
107.         "quantity": 2
108.     }
109. ]

复制代码

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

1. // merchant.service.ts
2. import { Injectable } from '@angular/core';
3. import { HttpClient } from '@angular/common/http';
4. import { Observable } from 'rxjs';
6. @Injectable({
7.   providedIn: 'root'
8. })
9. export class MerchantService {
10.   private apiUrl = 'http://localhost:8000';
12.   constructor(private http: HttpClient) { }
14.   getCategories(): Observable<any> {
15.     return this.http.get(`${this.apiUrl}/categories`);
16.   }
18.   getMerchants(categoryId?: number, page = 1, sortBy = 'rating'): Observable<any> {
19.     const params: any = {
20.       page: page.toString(),
21.       sort_by: sortBy
22.     };
23.     if (categoryId) params.category_id = categoryId.toString();
25.     return this.http.get(`${this.apiUrl}/merchants`, { params });
26.   }
28.   getMerchantDetail(id: number): Observable<any> {
29.     console.log("getMerchantDetail",id)
30.     return this.http.get(`${this.apiUrl}/merchants/${id}`);
31.   }
33.   createOrder(orderData: any): Observable<any> {
34.     return this.http.post(`${this.apiUrl}/orders`, orderData);
35.   }
37.   getOrderDetail(id: number): Observable<any> {
38.     return this.http.get(`${this.apiUrl}/orders/${id}`);
39.   }
41.   submitReview(reviewData: any): Observable<any> {
42.     return this.http.post(`${this.apiUrl}/reviews`, reviewData);
43.   }
44. }

复制代码

step1:sql

2. -- 1. 美食分类表
3. CREATE TABLE category (
4.     id INT PRIMARY KEY AUTO_INCREMENT,
5.     name VARCHAR(50) NOT NULL UNIQUE
6. );
8. select *from category
10. -- 2. 商家表
11. CREATE TABLE merchant (
12.     id INT PRIMARY KEY AUTO_INCREMENT,
13.     name VARCHAR(100) NOT NULL,
14.     rating DECIMAL(3,2) DEFAULT 0.00,
15.     monthly_sales INT DEFAULT 0,
16.     avg_price DECIMAL(8,2) DEFAULT 0.00,
17.     min_order_price DECIMAL(8,2) DEFAULT 0.00,
18.     delivery_fee DECIMAL(8,2) DEFAULT 0.00,
19.     location VARCHAR(255),
20.     tags VARCHAR(255),
21.     contact_phone VARCHAR(20),
22.     business_hours VARCHAR(100),
23.     notice TEXT,
24.     policy TEXT
25. );
27. -- 商家分类关联表
28. CREATE TABLE merchant_category (
29.     merchant_id INT,
30.     category_id INT,
31.     PRIMARY KEY (merchant_id, category_id),
32.     FOREIGN KEY (merchant_id) REFERENCES merchant(id),
33.     FOREIGN KEY (category_id) REFERENCES category(id)
34. );
36. -- 3. 菜品分类表
37. CREATE TABLE dish_category (
38.     id INT PRIMARY KEY AUTO_INCREMENT,
39.     merchant_id INT NOT NULL,
40.     name VARCHAR(50) NOT NULL,
41.     FOREIGN KEY (merchant_id) REFERENCES merchant(id)
42. );
44. -- 4. 菜品表
45. CREATE TABLE dish (
46.     id INT PRIMARY KEY AUTO_INCREMENT,
47.     merchant_id INT NOT NULL,
48.     category_id INT NOT NULL,
49.     name VARCHAR(100) NOT NULL,
50.     rating DECIMAL(3,2) DEFAULT 0.00,
51.     monthly_sales INT DEFAULT 0,
52.     tags VARCHAR(255),
53.     price DECIMAL(8,2) NOT NULL,
54.     FOREIGN KEY (merchant_id) REFERENCES merchant(id),
55.     FOREIGN KEY (category_id) REFERENCES dish_category(id)
56. );
58. -- 5. 订单表
59. CREATE TABLE `order` (
60.     id INT PRIMARY KEY AUTO_INCREMENT,
61.     customer_name VARCHAR(100) NOT NULL,
62.     customer_phone VARCHAR(20) NOT NULL,
63.     delivery_address VARCHAR(255) NOT NULL,
64.     merchant_id INT NOT NULL,
65.     total_amount DECIMAL(10,2) NOT NULL,
66.     delivery_fee DECIMAL(8,2) DEFAULT 0.00,
67.     packing_fee DECIMAL(8,2) DEFAULT 0.00,
68.     status ENUM('已完成','已退款','待接单','待配送') DEFAULT '待接单',
69.     order_time DATETIME NOT NULL,
70.     complete_time DATETIME,
71.     rider_name VARCHAR(100),
72.     rider_phone VARCHAR(20),
73.     payment_method VARCHAR(50),
74.     note TEXT,
75.     FOREIGN KEY (merchant_id) REFERENCES merchant(id)
76. );
79. select *from db_school.order;
81. -- 6. 订单明细表
82. CREATE TABLE order_item (
83.     id INT PRIMARY KEY AUTO_INCREMENT,
84.     order_id INT NOT NULL,
85.     dish_id INT NOT NULL,
86.     quantity INT NOT NULL,
87.     price DECIMAL(8,2) NOT NULL,
88.     FOREIGN KEY (order_id) REFERENCES `order`(id),
89.     FOREIGN KEY (dish_id) REFERENCES dish(id)
90. );
92. -- 7. 评价表
93. CREATE TABLE review (
94.     id INT PRIMARY KEY AUTO_INCREMENT,
95.     order_item_id INT NOT NULL UNIQUE,
96.     rating DECIMAL(3,2) NOT NULL,
97.     content TEXT,
98.     review_time DATETIME NOT NULL,
99.     FOREIGN KEY (order_item_id) REFERENCES order_item(id)
100. );
102. -- Insert food categories
103. INSERT INTO category (name) VALUES
104. ('Porridge'),('Rice Noodles'),('Noodles'),('Fried Chicken'),('Stir-Fry'),('Western Food'),('Bubble Tea');
106. INSERT INTO category (name) VALUES
107. ('Hot Pot'), ('BBQ'), ('Japanese Cuisine');
110. -- Insert merchant data
111. INSERT INTO merchant (name, rating, monthly_sales, avg_price, min_order_price, delivery_fee, location, tags, contact_phone, business_hours, notice, policy) VALUES
112. ('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'),
113. ('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'),
114. ('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');
116. -- Additional merchants...
117. INSERT INTO merchant (name, rating, monthly_sales, avg_price, min_order_price, delivery_fee, location, tags, contact_phone, business_hours, notice, policy) VALUES
118. ('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'),
119. ('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'),
120. ('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'),
121. ('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'),
122. ('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'),
123. ('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'),
124. ('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');
126. -- Special noodle merchants
127. INSERT INTO merchant (name, rating, monthly_sales, avg_price, min_order_price, delivery_fee, location, tags, contact_phone, business_hours, notice, policy)
128. VALUES (
129.     'Liuzhou Luosifen',
130.     4.8,
131.     1800,
132.     18.00,
133.     15.00,
134.     2.50,
135.     'No.8 Food Street',
136.     'Luosifen,Authentic',
137.     '13811112222',
138.     '09:00-22:00',
139.     'Customizable spiciness',
140.     'Free extra bamboo shoots'
141. );
143. -- Link categories (assuming Rice Noodles category_id=2)
144. INSERT INTO merchant_category (merchant_id, category_id)
145. VALUES
146.     ((SELECT id FROM merchant WHERE name='Liuzhou Luosifen'), 2),
147.     ((SELECT id FROM merchant WHERE name='Nanning Old Friend Noodles'), 2);
149. -- Insert dish categories
150. INSERT INTO dish_category (merchant_id, name) VALUES
151. (1,'Fried Chicken Meals'),(1,'Burger Meals'),
152. (2,'Signature Noodles'),(2,'Rice Bowls'),
153. (3,'Classic Bubble Tea'),(3,'Summer Specials');
155. -- Insert dishes
156. INSERT INTO dish (merchant_id, category_id, name, rating, monthly_sales, tags, price) VALUES
157. (1,1,'Spicy Chicken Burger Meal',4.5,800,'Popular',35.00),
158. (1,2,'Orleans Wings Meal',4.6,600,'New',40.00),
159. (2,3,'Beef Noodles',4.8,500,'Signature',18.00),
160. (2,4,'Braised Beef Rice Bowl',4.7,300,'Recommended',22.00),
161. (3,5,'Pearl Milk Tea',4.7,1500,'Classic',8.00),
162. (3,6,'Strawberry Sundae',4.8,1000,'Seasonal',6.00);
164. -- Insert orders
165. INSERT INTO `order` (customer_name, customer_phone, delivery_address, merchant_id, total_amount, delivery_fee, packing_fee, status, order_time, payment_method) VALUES
166. ('Zhang San','13800001111','Tech Park Building 1',1,77.00,5.00,2.00,'Completed','2024-03-01 12:00:00','WeChat Pay'),
167. ('Li Si','13900002222','University Dorm 3',2,40.00,3.00,1.00,'Pending Delivery','2024-03-02 18:30:00','Alipay');
169. -- Insert reviews
170. INSERT INTO review (order_item_id, rating, content, review_time) VALUES
171. (1,4.8,'Burgers were delicious!','2024-03-01 13:00:00'),
172. (3,4.9,'Very authentic noodles','2024-03-02 19:00:00');

复制代码

step2:fastapi

1. from fastapi import FastAPI, HTTPException
2. from fastapi.middleware.cors import CORSMiddleware
3. import pymysql.cursors
4. from typing import List, Optional
5. from pydantic import BaseModel
6. from datetime import datetime
7. app = FastAPI()
9. # CORS配置
10. app.add_middleware(
11.     CORSMiddleware,
12.     allow_origins=["*"],
13.     allow_credentials=True,
14.     allow_methods=["*"],
15.     allow_headers=["*"],
16. )
18. # 数据库配置（根据实际情况修改）
19. DB_CONFIG = {
20.     'host': 'localhost',
21.     'user': 'root',
22.     'password': '123456',
23.     'db': 'db_school',
24.     'charset': 'utf8mb4',
25.     'cursorclass': pymysql.cursors.DictCursor
26. }
28. # 基础数据模型
29. class Category(BaseModel):
30.     id: int
31.     name: str
33. class MerchantBase(BaseModel):
34.     name: str
35.     rating: float
36.     monthly_sales: int
37.     avg_price: float
39. # API 请求模型
40. class CreateOrderItem(BaseModel):
41.     dish_id: int
42.     quantity: int
43.     price: float
45. class CreateOrder(BaseModel):
46.     customer_name: str
47.     customer_phone: str
48.     delivery_address: str
49.     merchant_id: int
50.     items: List[CreateOrderItem]
51.     payment_method: str
52.     note: Optional[str] = None
54. def db_query(query: str, params=None, fetch_one=False):
55.     try:
56.         connection = pymysql.connect(**DB_CONFIG)
57.         with connection.cursor() as cursor:
58.             cursor.execute(query, params)
59.             result = cursor.fetchone() if fetch_one else cursor.fetchall()
60.         connection.commit()
61.         connection.close()
62.         return result
63.     except Exception as e:
64.         raise HTTPException(status_code=500, detail=str(e))
68. # 1. 获取所有美食分类
69. @app.get("/categories")
70. async def get_categories():
71.     """获取所有美食分类"""
72.     query = "SELECT id, name FROM category"
73.     return {"data": db_query(query)}
76. # 2. 商家列表接口
77. @app.get("/merchants")
78. async def get_merchants(
79.         category_id: Optional[int] = None,
80.         page: int = 1,
81.         page_size: int = 10,
82.         sort_by: str = 'rating'
83. ):
84.     """获取商家列表（支持分类筛选和排序）"""
85.     offset = (page - 1) * page_size
86.     base_query = """
87.         SELECT m.*, GROUP_CONCAT(c.name) AS categories
88.         FROM merchant m
89.         LEFT JOIN merchant_category mc ON m.id = mc.merchant_id
90.         LEFT JOIN category c ON mc.category_id = c.id
91.     """
92.     where = []
93.     params = []
95.     if category_id:
96.         where.append("mc.category_id = %s")
97.         params.append(category_id)
99.     if where:
100.         base_query += " WHERE " + " AND ".join(where)
102.     base_query += " GROUP BY m.id"
104.     # 排序逻辑
105.     sort_columns = {
106.         'rating': 'm.rating DESC',
107.         'sales': 'm.monthly_sales DESC',
108.         'price': 'm.avg_price ASC'
109.     }
110.     order_by = sort_columns.get(sort_by, 'm.rating DESC')
111.     base_query += f" ORDER BY {order_by} LIMIT %s OFFSET %s"
113.     params.extend([page_size, offset])
114.     return {"data": db_query(base_query, params)}
117. # 3. 商家详情
118. @app.get("/merchants/{merchant_id}")
119. async def get_merchant_detail(merchant_id: int):
120.     """获取商家详细信息"""
121.     # 商家基本信息
122.     merchant = db_query("SELECT * FROM merchant WHERE id = %s", (merchant_id,), True)
123.     if not merchant:
124.         raise HTTPException(404, "商家不存在")
126.     # 菜品分类及菜品
127.     categories = db_query("""
128.     SELECT dc.id, dc.name,
129.     (SELECT JSON_ARRAYAGG(
130.         JSON_OBJECT('id',d.id,'name',d.name,'price',d.price,
131.                     'rating',d.rating,'sales',d.monthly_sales,'tags',d.tags)
132.     ) FROM dish d WHERE d.category_id = dc.id) AS dishes
133.     FROM dish_category dc WHERE dc.merchant_id = %s
134.     """, (merchant_id,))
136.     # 评价
137.     reviews = db_query("""
138.     SELECT r.rating, r.content, r.review_time, d.name AS dish_name
139.     FROM review r
140.     JOIN order_item oi ON r.order_item_id = oi.id
141.     JOIN dish d ON oi.dish_id = d.id
142.     WHERE d.merchant_id = %s ORDER BY r.review_time DESC LIMIT 10
143.     """, (merchant_id,))
145.     return {
146.         "merchant": merchant,
147.         "categories": categories,
148.         "reviews": reviews
149.     }
152. # 4. 创建订单接口
153. @app.post("/orders")
154. async def create_order(order_data: CreateOrder):
155.     """创建新订单"""
156.     connection = pymysql.connect(**DB_CONFIG)
157.     try:
158.         with connection.cursor() as cursor:
159.             # 计算总金额
160.             total = sum(item.price * item.quantity for item in order_data.items)
162.             # 获取商家配送费
163.             cursor.execute("SELECT delivery_fee, min_order_price FROM merchant WHERE id = %s",
164.                            (order_data.merchant_id,))
165.             merchant_info = cursor.fetchone()
166.             if not merchant_info:
167.                 raise HTTPException(status_code=404, detail="Merchant not found")
169.             if total < merchant_info['min_order_price']:
170.                 raise HTTPException(
171.                     status_code=400,
172.                     detail=f"订单金额需达到{merchant_info['min_order_price']}元"
173.                 )
175.             # 创建订单
176.             order_query = """
177.                 INSERT INTO `order` (
178.                     customer_name, customer_phone, delivery_address,
179.                     merchant_id, total_amount, delivery_fee,
180.                     status, order_time, payment_method, note
181.                 ) VALUES (%s,%s,%s,%s,%s,%s,%s,%s,%s,%s)
182.             """
183.             order_params = (
184.                 order_data.customer_name,
185.                 order_data.customer_phone,
186.                 order_data.delivery_address,
187.                 order_data.merchant_id,
188.                 total,
189.                 merchant_info['delivery_fee'],
190.                 '待接单',
191.                 datetime.now(),
192.                 order_data.payment_method,
193.                 order_data.note
194.             )
195.             cursor.execute(order_query, order_params)
196.             order_id = cursor.lastrowid
198.             # 创建订单明细
199.             for item in order_data.items:
200.                 cursor.execute("""
201.                     INSERT INTO order_item
202.                     (order_id, dish_id, quantity, price)
203.                     VALUES (%s,%s,%s,%s)
204.                 """, (order_id, item.dish_id, item.quantity, item.price))
206.             connection.commit()
207.             return {"order_id": order_id}
208.     except Exception as e:
209.         connection.rollback()
210.         raise HTTPException(status_code=500, detail=str(e))
211.     finally:
212.         connection.close()
214. # 5. 订单详情接口
215. @app.get("/orders/{order_id}")
216. async def get_order_detail(order_id: int):
217.     """获取订单详情"""
218.     order_query = """
219.         SELECT o.*, m.name AS merchant_name
220.         FROM `order` o
221.         JOIN merchant m ON o.merchant_id = m.id
222.         WHERE o.id = %s
223.     """
224.     order = db_query(order_query, (order_id,), fetch_one=True)
225.     if not order:
226.         raise HTTPException(status_code=404, detail="订单不存在")
228.     items_query = """
229.         SELECT oi.*, d.name AS dish_name
230.         FROM order_item oi
231.         JOIN dish d ON oi.dish_id = d.id
232.         WHERE oi.order_id = %s
233.     """
234.     items = db_query(items_query, (order_id,))
236.     return {"order": order, "items": items}
238. # 6. 获取菜品评价
239. @app.get("/dishes/{dish_id}/reviews")
240. async def get_dish_reviews(dish_id: int):
241.     """获取菜品评价"""
242.     return db_query("""
243.     SELECT r.rating, r.content, r.review_time, oi.quantity
244.     FROM review r
245.     JOIN order_item oi ON r.order_item_id = oi.id
246.     WHERE oi.dish_id = %s
247.     ORDER BY r.review_time DESC
248.     """, (dish_id,))
250. if __name__ == "__main__":
251.     import uvicorn
252.     uvicorn.run(app, host="0.0.0.0", port=8000)

复制代码

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

1. import { Component, OnInit } from '@angular/core';
3. import { MerchantService} from '../services/merchant.service';
4. import {NgForOf, NgIf} from '@angular/common';
5. import {RouterLink} from '@angular/router';
8. @Component({
9.   selector: 'app-merchants-list',
10.   imports: [
11.     NgForOf,
12.     NgIf,
13.     RouterLink
14.   ],
15.   templateUrl: './merchants-list.component.html',
16.   styleUrl: './merchants-list.component.css'
17. })
18. export class MerchantsListComponent  implements OnInit {
19.   categories: any[] = [];
20.   merchants: any[] = [];
21.   selectedCategoryId: number | null = null;
22.   isLoading = false;
24.   constructor(private merchantService: MerchantService) { }
26.   ngOnInit() {
27.     this.loadCategories();
28.     this.loadMerchants(); // 初始加载全部商家
29.   }
31.   // 加载分类数据
32.   loadCategories() {
33.     this.merchantService.getCategories().subscribe(res => {
34.       this.categories = res.data;
35.     });
36.   }
38.   // 加载商家数据
39.   loadMerchants(categoryId?: number) {
40.     this.isLoading = true;
41.     this.merchantService.getMerchants(categoryId).subscribe({
42.       next: (res) => {
43.         this.merchants = res.data;
44.         this.isLoading = false;
45.       },
46.       error: () => {
47.         this.isLoading = false;
48.         alert('加载商家失败，请重试');
49.       }
50.     });
51.   }
53.   // 分类选择处理
54.   selectCategory(categoryId: number | null) {
55.     this.selectedCategoryId = categoryId;
56.     this.loadMerchants(categoryId ?? undefined);
57.   }
58. }
59. <!-- takeout.component.html -->
60. <div class="container">
61.   <!-- 左侧分类导航 -->
62.   <div class="categories-sidebar">
63.     <h3>美食分类</h3>
64.     <ul>
65.       <li
66.         *ngFor="let category of categories"
67.         [class.active]="selectedCategoryId === category.id"
68.         (click)="selectCategory(category.id)">
69.         {{category.name}}
70.       </li>
71.       <li
72.         [class.active]="!selectedCategoryId"
73.         (click)="selectCategory(null)">
74.         全部商家
75.       </li>
76.     </ul>
77.   </div>
79.   <!-- 右侧商家列表 -->
80.   <div class="merchant-list">
81.     <!-- 加载状态 -->
82.     <div *ngIf="isLoading" class="loading">加载中...</div>
84.     <!-- 商家列表 -->
85.     <div *ngFor="let merchant of merchants" class="merchant-card">
86.       <div class="merchant-header">
87.         <h3>{{merchant.name}}</h3>
88.         <span class="rating">{{merchant.rating}} ★</span>
89.       </div>
91.       <div class="merchant-info">
92.         <div class="meta">
93.           <span>月售 {{merchant.monthly_sales}}</span>
94.           <span>起送 ¥{{merchant.min_order_price}}</span>
95.           <span>配送 ¥{{merchant.delivery_fee}}</span>
96.         </div>
97.         <a [routerLink]="['/merchants-detail', merchant.id]" class="detail-link">查看详情</a>
99.         <div class="tags">
100.           <span *ngFor="let tag of merchant.tags.split(',')">{{tag}}</span>
101.         </div>
102.       </div>
103.     </div>
104.   </div>
105. </div>
106. /* takeout.component.css */
107. .container {
108.   display: grid;
109.   grid-template-columns: 200px 1fr;
110.   gap: 20px;
111.   padding: 20px;
112. }
114. .categories-sidebar {
115.   background: #f5f5f5;
116.   padding: 15px;
117.   border-radius: 8px;
118. }
120. .categories-sidebar ul {
121.   list-style: none;
122.   padding: 0;
123.   margin: 0;
124. }
126. .categories-sidebar li {
127.   padding: 10px;
128.   cursor: pointer;
129.   border-radius: 4px;
130.   margin-bottom: 5px;
131.   transition: all 0.2s;
132. }
134. .categories-sidebar li:hover {
135.   background: #eee;
136. }
138. .categories-sidebar li.active {
139.   background: #007bff;
140.   color: white;
141. }
143. .merchant-list {
144.   display: grid;
145.   gap: 15px;
146. }
148. .merchant-card {
149.   padding: 20px;
150.   border: 1px solid #ddd;
151.   border-radius: 8px;
152. }
154. .merchant-header {
155.   display: flex;
156.   justify-content: space-between;
157.   align-items: center;
158.   margin-bottom: 10px;
159. }
161. .rating {
162.   color: #ffd700;
163.   font-weight: bold;
164. }
166. .meta span {
167.   margin-right: 15px;
168.   color: #666;
169. }
171. .tags span {
172.   display: inline-block;
173.   background: #f0f0f0;
174.   padding: 4px 8px;
175.   border-radius: 4px;
176.   margin: 5px 5px 0 0;
177.   font-size: 0.9em;
178. }
180. .loading {
181.   text-align: center;
182.   padding: 20px;
183.   color: #666;
184. }

复制代码

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

1. // merchants-detail.component.ts
2. import { Component, OnInit } from '@angular/core';
3. import {ActivatedRoute, RouterLink} from '@angular/router';
4. import { MerchantService } from '../services/merchant.service';
5. import { DatePipe, NgFor, NgIf } from '@angular/common';
7. @Component({
8.   selector: 'app-merchants-detail',
9.   standalone: true,
10.   imports: [NgIf, NgFor, DatePipe, RouterLink],
11.   templateUrl: './merchants-detail.component.html',
12.   styleUrls: ['./merchants-detail.component.css']
13. })
14. export class MerchantsDetailComponent implements OnInit {
15.   merchantDetail: any;
16.   isLoading = true;
17.   errorMessage = '';
19.   constructor(
20.     private route: ActivatedRoute,
21.     private merchantService: MerchantService
22.   ) { }
24.   ngOnInit() {
25.     const id = this.route.snapshot.paramMap.get('id');
26.     if (id) {
27.       this.loadMerchantDetail(+id);
28.     } else {
29.       this.errorMessage = '无效的商家ID';
30.       this.isLoading = false;
31.     }
32.   }
34.   loadMerchantDetail(id: number) {
35.     this.merchantService.getMerchantDetail(id).subscribe({
36.       next: (res) => {
37.         this.merchantDetail = {
38.           ...res,
39.           categories: res.categories.map((cat: any) => ({
40.             ...cat,
41.             dishes: JSON.parse(cat.dishes)
42.           }))
43.         };
44.         this.isLoading = false;
45.       },
46.       error: (err) => {
47.         this.errorMessage = '加载商家详情失败，请稍后重试';
48.         this.isLoading = false;
49.       }
50.     });
51.   }
53.   getRatingStars(rating: number): string {
54.     return '★'.repeat(Math.round(rating));
55.   }
56. }
58. <!-- merchants-detail.component.html -->
59. <div class="merchant-container">
60.   <!-- 加载状态 -->
61.   <div *ngIf="isLoading" class="loading">加载中...</div>
63.   <!-- 错误提示 -->
64.   <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>
66.   <!-- 商家详情内容 -->
67.   <div *ngIf="merchantDetail" class="merchant-content">
68.     <!-- 商家基本信息 -->
69.     <section class="merchant-info">
70.       <h1>{{ merchantDetail.merchant.name }}</h1>
71.       <div class="stats">
72.         <span class="rating">
73.           {{ getRatingStars(merchantDetail.merchant.rating) }}
74.           <em>({{ merchantDetail.merchant.rating }})</em>
75.         </span>
76.         <span>月售 {{ merchantDetail.merchant.monthly_sales }}</span>
77.         <span>人均 ¥{{ merchantDetail.merchant.avg_price }}</span>
78.       </div>
80.       <div class="details">
81.         <div class="detail-item">
82.           <label>起送价:</label>
83.           <span>¥{{ merchantDetail.merchant.min_order_price }}</span>
84.         </div>
85.         <div class="detail-item">
86.           <label>配送费:</label>
87.           <span>¥{{ merchantDetail.merchant.delivery_fee }}</span>
88.         </div>
89.         <div class="detail-item">
90.           <label>营业时间:</label>
91.           <span>{{ merchantDetail.merchant.business_hours }}</span>
92.         </div>
93.         <div class="detail-item">
94.           <label>联系电话:</label>
95.           <a href="tel:{{ merchantDetail.merchant.contact_phone }}">
96.             {{ merchantDetail.merchant.contact_phone }}
97.           </a>
98.         </div>
99.         <div class="detail-item">
100.           <label>地址:</label>
101.           <address>{{ merchantDetail.merchant.location }}</address>
102.         </div>
103.       </div>
105.       <div class="tags">
106.         <span *ngFor="let tag of merchantDetail.merchant.tags.split(',')"
107.               class="tag">
108.           {{ tag }}
109.         </span>
110.       </div>
111.     </section>
113.     <!-- 菜品分类 -->
115.     <!-- merchants-detail.component.html -->
116.     <section *ngFor="let category of merchantDetail.categories" class="menu-category">
117.       <h2>{{ category.name }}</h2>
118.       <div class="dishes">
119.         <div *ngFor="let dish of category.dishes" class="dish-card">
120.           <!-- 其他菜品信息 -->
121.           <div class="dish-info">
122.             <h3>{{ dish.name }}</h3>
123.             <div class="dish-meta">
124.               <span class="price">¥{{ dish.price }}</span>
125.               <span class="sales">月售 {{ dish.sales }}</span>
126.               <span class="dish-rating">
127.                 {{ getRatingStars(dish.rating) }}
128.               </span>
129.             </div>
130.             <div class="dish-tags">
131.               <span *ngFor="let tag of dish.tags.split(',')"
132.                     class="tag">
133.                 {{ tag }}
134.               </span>
135.             </div>
136.           <button class="book-button"
137.                   [routerLink]="['/merchants-order']"
138.                   [state]="{
139.                 orderData: {
140.                   dish: dish,
141.                   merchant: merchantDetail.merchant
142.                 }
143.               }">
144.             立即购买
145.           </button>
146.         </div>
147.       </div>
148.       </div>
149.     </section>
152.     <!-- 用户评价 -->
153.     <section class="reviews">
154.       <h2>用户评价 ({{ merchantDetail.reviews.length }})</h2>
155.       <div *ngFor="let review of merchantDetail.reviews" class="review-card">
156.         <div class="review-header">
157.           <span class="rating">{{ getRatingStars(review.rating) }}</span>
158.           <span class="dish">{{ review.dish_name }}</span>
159.           <time [title]="review.review_time | date:'long'">
160.             {{ review.review_time | date:'yyyy-MM-dd HH:mm' }}
161.           </time>
162.         </div>
163.         <p class="content">{{ review.content }}</p>
164.       </div>
165.     </section>
166.   </div>
167. </div>
170. /* merchants-detail.component.css */
171. .merchant-container {
172.   max-width: 1200px;
173.   margin: 20px auto;
174.   padding: 20px;
175. }
177. .loading, .error {
178.   text-align: center;
179.   padding: 40px;
180.   font-size: 1.2rem;
181. }
183. .error {
184.   color: #dc3545;
185. }
187. .merchant-content {
188.   background: #fff;
189.   border-radius: 8px;
190.   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
191.   padding: 24px;
192. }
194. .merchant-info h1 {
195.   color: #333;
196.   margin-bottom: 16px;
197. }
199. .stats {
200.   display: flex;
201.   gap: 20px;
202.   margin-bottom: 24px;
203.   color: #666;
204. }
206. .rating {
207.   color: #ffd700;
208.   font-size: 1.2em;
209. }
210. .rating em {
211.   color: #666;
212.   font-style: normal;
213.   font-size: 0.9em;
214.   margin-left: 8px;
215. }
217. .details {
218.   display: grid;
219.   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
220.   gap: 16px;
221.   margin-bottom: 24px;
222. }
224. .detail-item {
225.   display: flex;
226.   justify-content: space-between;
227.   padding: 8px 0;
228.   border-bottom: 1px solid #eee;
229. }
231. .detail-item label {
232.   color: #999;
233. }
235. .tags {
236.   display: flex;
237.   gap: 8px;
238.   flex-wrap: wrap;
239. }
241. .tag {
242.   background: #f0f0f0;
243.   padding: 4px 12px;
244.   border-radius: 12px;
245.   font-size: 0.9em;
246.   color: #666;
247. }
249. /* 菜品分类样式 */
250. .menu-category {
251.   margin: 32px 0;
252.   border-top: 2px solid #eee;
253.   padding-top: 24px;
254. }
256. .menu-category h2 {
257.   color: #444;
258.   margin-bottom: 16px;
259. }
261. .dishes {
262.   display: grid;
263.   grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
264.   gap: 20px;
265. }
267. .dish-card {
268.   border: 1px solid #eee;
269.   border-radius: 8px;
270.   padding: 16px;
271.   transition: transform 0.2s;
272. }
274. .dish-card:hover {
275.   transform: translateY(-2px);
276. }
278. .dish-meta {
279.   display: flex;
280.   gap: 12px;
281.   margin: 8px 0;
282.   color: #666;
283. }
285. .price {
286.   color: #e4393c;
287.   font-weight: bold;
288. }
290. .dish-rating {
291.   color: #ffd700;
292. }
294. /* 评价样式 */
295. .reviews {
296.   margin-top: 40px;
297. }
299. .review-card {
300.   padding: 16px;
301.   border: 1px solid #eee;
302.   border-radius: 8px;
303.   margin-bottom: 16px;
304. }
306. .review-header {
307.   display: flex;
308.   gap: 12px;
309.   align-items: center;
310.   margin-bottom: 8px;
311.   color: #666;
312. }
314. .review-header time {
315.   font-size: 0.9em;
316.   color: #999;
317. }
319. .content {
320.   color: #333;
321.   line-height: 1.6;
322. }

复制代码

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

1. // merchants-order.component.ts
2. import { Component, OnInit } from '@angular/core';
3. import { Router, ActivatedRoute } from '@angular/router';
4. import {FormBuilder, FormGroup, ReactiveFormsModule, Validators} from '@angular/forms';
5. import {Location, NgIf} from '@angular/common';
6. import { MerchantService } from '../services/merchant.service';
8. // 类型定义
9. interface Dish {
10.   id: number;
11.   name: string;
12.   price: number;
13.   // 其他字段根据实际API响应添加
14. }
16. interface Merchant {
17.   id: number;
18.   name: string;
19.   delivery_fee: number;
20.   location: string;
21.   // 其他字段根据实际API响应添加
22. }
24. interface OrderState {
25.   orderData: {
26.     dish: Dish;
27.     merchant: Merchant;
28.   };
29. }
31. @Component({
32.   selector: 'app-merchants-order',
33.   templateUrl: './merchants-order.component.html',
34.   imports: [
35.     ReactiveFormsModule,
36.     NgIf
37.   ],
38.   styleUrls: ['./merchants-order.component.css']
39. })
40. export class MerchantsOrderComponent implements OnInit {
41.   orderForm: FormGroup;
42.   selectedDish?: Dish;
43.   merchant?: Merchant;
44.   loading = false;
46.   constructor(
47.     private fb: FormBuilder,
48.     private location: Location,
49.     private router: Router,
50.     private route: ActivatedRoute,
51.     private merchantService: MerchantService
52.   ) {
53.     this.orderForm = this.fb.group({
54.       customer_name: ['', [Validators.required, Validators.minLength(2)]],
55.       customer_phone: ['', [Validators.required, Validators.pattern(/^1[3-9]\d{9}$/)]],
56.       delivery_address: ['', [Validators.required, Validators.minLength(5)]],
57.       payment_method: ['alipay', Validators.required],
58.       note: [''],
59.       quantity: [1, [Validators.required, Validators.min(1), Validators.max(10)]]
60.     });
61.   }
63.   ngOnInit(): void {
64.     this.handleRouteState();
65.     this.setupFormListeners();
66.   }
68.   private handleRouteState(): void {
69.     const state = this.location.getState() as OrderState;
70.     console.log('路由状态:', state);
72.     if (state?.orderData?.dish && state?.orderData?.merchant) {
73.       this.selectedDish = state.orderData.dish;
74.       this.merchant = state.orderData.merchant;
75.       this.initFormWithFallbackData();
76.     } else {
77.       console.warn('无效的路由状态，尝试通过参数加载');
78.       this.loadFromQueryParams();
79.     }
80.   }
82.   private loadFromQueryParams(): void {
83.     this.route.queryParams.subscribe(params => {
84.       if (params['merchantId'] && params['dishId']) {
85.         this.merchantService.getMerchantDetail(params['merchantId']).subscribe({
86.           next: merchant => {
87.             this.merchant = merchant;
88.             this.selectedDish = this.findDishInCategories(merchant.categories, params['dishId']);
89.             if (!this.selectedDish) {
90.               this.redirectToMerchantList();
91.             }
92.           },
93.           error: () => this.redirectToMerchantList()
94.         });
95.       } else {
96.         this.redirectToMerchantList();
97.       }
98.     });
99.   }
101.   private findDishInCategories(categories: any[], dishId: string): Dish | undefined {
102.     for (const category of categories) {
103.       const dishes = JSON.parse(category.dishes);
104.       const found = dishes.find((d: any) => d.id === +dishId);
105.       if (found) return found;
106.     }
107.     return undefined;
108.   }
110.   private initFormWithFallbackData(): void {
111.     this.orderForm.patchValue({
112.       delivery_address: this.merchant?.location || ''
113.     });
114.   }
116.   private setupFormListeners(): void {
117.     this.orderForm.get('quantity')?.valueChanges.subscribe(value => {
118.       if (value > 10) {
119.         this.orderForm.get('quantity')?.setValue(10);
120.       }
121.     });
122.   }
124.   get totalAmount(): string {
125.     if (!this.selectedDish || !this.merchant) return '0.00';
126.     const quantity = this.orderForm.get('quantity')?.value || 1;
127.     return (this.selectedDish.price * quantity + this.merchant.delivery_fee).toFixed(2);
128.   }
130.   onSubmit(): void {
131.     if (this.orderForm.invalid || !this.selectedDish || !this.merchant) return;
133.     const orderData = {
134.       ...this.orderForm.value,
135.       merchant_id: this.merchant.id,
136.       items: [{
137.         dish_id: this.selectedDish.id,
138.         quantity: this.orderForm.value.quantity,
139.         price: this.selectedDish.price
140.       }]
141.     };
143.     this.loading = true;
144.     this.merchantService.createOrder(orderData).subscribe({
145.       next: (res) => {
146.         this.router.navigate(['/merchants-order-detail', res.order_id]);
147.         this.loading = false;
148.       },
149.       error: (err) => {
150.         console.error('订单提交失败:', err);
151.         alert(`提交失败: ${err.error?.detail || '服务器错误'}`);
152.         this.loading = false;
153.       }
154.     });
155.   }
157.   private redirectToMerchantList(): void {
158.     this.router.navigate(['/merchants'], {
159.       queryParamsHandling: 'preserve'
160.     });
161.   }
162. }
164. <!-- merchants-order.component.html -->
165. <div class="order-container">
166.   <h2>确认订单</h2>
168.   <form *ngIf="merchant && selectedDish" [formGroup]="orderForm" (ngSubmit)="onSubmit()">
169.     <!-- 商家信息 -->
170.     <div class="merchant-info">
171.       <h3>{{ merchant.name }}</h3>
172.       <p>{{ merchant.location }}</p>
173.     </div>
175.     <!-- 商品信息 -->
176.     <div class="dish-info">
177.       <h4>{{ selectedDish.name }}</h4>
178.       <div class="price-quantity">
179.         <span class="price">¥{{ selectedDish.price }}</span>
180.         <div class="quantity-control">
181.           <label>数量：</label>
182.           <input type="number" formControlName="quantity" min="1">
183.         </div>
184.       </div>
185.     </div>
187.     <!-- 订单表单 -->
188.     <div class="form-section">
189.       <div class="form-group">
190.         <label>收货人姓名</label>
191.         <input type="text" formControlName="customer_name">
192.         <div *ngIf="orderForm.get('customer_name')?.errors?.['required']" class="error">
193.           姓名不能为空
194.         </div>
195.       </div>
197.       <div class="form-group">
198.         <label>联系电话</label>
199.         <input type="tel" formControlName="customer_phone">
200.         <div *ngIf="orderForm.get('customer_phone')?.errors?.['required']" class="error">
201.           电话不能为空
202.         </div>
203.         <div *ngIf="orderForm.get('customer_phone')?.errors?.['pattern']" class="error">
204.           请输入有效的手机号
205.         </div>
206.       </div>
208.       <div class="form-group">
209.         <label>配送地址</label>
210.         <textarea formControlName="delivery_address"></textarea>
211.         <div *ngIf="orderForm.get('delivery_address')?.errors?.['required']" class="error">
212.           地址不能为空
213.         </div>
214.       </div>
216.       <div class="form-group">
217.         <label>支付方式</label>
218.         <select formControlName="payment_method">
219.           <option value="alipay">支付宝</option>
220.           <option value="wechat">微信支付</option>
221.           <option value="cash">货到付款</option>
222.         </select>
223.       </div>
225.       <div class="form-group">
226.         <label>备注</label>
227.         <textarea formControlName="note"></textarea>
228.       </div>
229.     </div>
231.     <!-- 费用汇总 -->
232.     <div class="price-summary">
233.       <div class="summary-item">
234.         <span>商品总额：</span>
235. <!--        <span>¥{{ (selectedDish.price * orderForm.value.quantity).toFixed(2) }}</span>-->
236.       </div>
237.       <div class="summary-item">
238.         <span>配送费：</span>
239.         <span>¥{{ merchant.delivery_fee }}</span>
240.       </div>
241.       <div class="summary-item total">
242.         <span>总计：</span>
243.         <span>¥{{ totalAmount }}</span>
244.       </div>
245.     </div>
247.     <button type="submit" [disabled]="orderForm.invalid || loading" class="submit-btn">
248.       {{ loading ? '提交中...' : '提交订单' }}
249.     </button>
250.   </form>
251. </div>
254. .order-container {
255.   max-width: 600px;
256.   margin: 20px auto;
257.   padding: 20px;
258.   background: #fff;
259.   border-radius: 8px;
260.   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
261. }
263. .merchant-info {
264.   margin-bottom: 20px;
265.   padding-bottom: 15px;
266.   border-bottom: 1px solid #eee;
267. }
269. .dish-info {
270.   margin-bottom: 20px;
271. }
273. .form-group {
274.   margin-bottom: 15px;
275. }
277. .form-group label {
278.   display: block;
279.   margin-bottom: 5px;
280.   font-weight: bold;
281. }
283. .form-group input,
284. .form-group textarea,
285. .form-group select {
286.   width: 100%;
287.   padding: 8px;
288.   border: 1px solid #ddd;
289.   border-radius: 4px;
290. }
292. .error {
293.   color: #dc3545;
294.   font-size: 0.9em;
295.   margin-top: 5px;
296. }
298. .price-summary {
299.   margin-top: 20px;
300.   padding: 15px;
301.   background: #f8f9fa;
302.   border-radius: 4px;
303. }
305. .summary-item {
306.   display: flex;
307.   justify-content: space-between;
308.   margin-bottom: 10px;
309. }
311. .total {
312.   font-weight: bold;
313.   font-size: 1.1em;
314. }
316. .submit-btn {
317.   width: 100%;
318.   padding: 12px;
319.   background: #007bff;
320.   color: white;
321.   border: none;
322.   border-radius: 4px;
323.   cursor: pointer;
324.   margin-top: 20px;
325. }
327. .submit-btn:disabled {
328.   background: #6c757d;
329.   cursor: not-allowed;
330. }

复制代码

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

1. // merchants-order-detail.component.ts
2. import { Component, OnInit } from '@angular/core';
3. import { ActivatedRoute, Router } from '@angular/router';
4. import { MerchantService } from '../services/merchant.service';
5. import { DatePipe, CurrencyPipe, NgIf, NgFor } from '@angular/common';
7. interface OrderItem {
8.   id: number;
9.   dish_name: string;
10.   quantity: number;
11.   price: number;
12. }
14. interface OrderDetail {
15.   id: number;
16.   customer_name: string;
17.   customer_phone: string;
18.   delivery_address: string;
19.   total_amount: number;
20.   delivery_fee: number;
21.   packing_fee: number;
22.   status: string;
23.   order_time: string;
24.   complete_time: string | null;
25.   rider_name: string | null;
26.   rider_phone: string | null;
27.   payment_method: string;
28.   note: string | null;
29.   merchant_name: string;
30. }
32. @Component({
33.   selector: 'app-merchants-order-detail',
34.   standalone: true,
35.   imports: [NgIf, NgFor, DatePipe, CurrencyPipe],
36.   templateUrl: './merchants-order-detail.component.html',
37.   styleUrls: ['./merchants-order-detail.component.css']
38. })
39. export class MerchantsOrderDetailComponent implements OnInit {
40.   orderId!: number;
41.   orderId2!: number;
43.   order!: OrderDetail;
44.   items: OrderItem[] = [];
45.   isLoading = true;
46.   errorMessage = '';
48.   constructor(
49.     private route: ActivatedRoute,
50.     private router: Router,
51.     private merchantService: MerchantService
52.   ) {}
54.   ngOnInit(): void {
55.     this.route.params.subscribe(params => {
56.       this.orderId = +params['order_id'];
57.       this.orderId2 = params['order_id'];
58.       console.log('从路由获取的order_id:', this.orderId+"==="+this.orderId2);
60.       this.loadOrderDetail();
61.     });
62.   }
64.   loadOrderDetail(): void {
65.     this.isLoading = true;
66.     this.merchantService.getOrderDetail(this.orderId).subscribe({
67.       next: (res) => {
68.         this.order = res.order;
69.         this.items = res.items;
70.         this.isLoading = false;
71.       },
72.       error: (err) => {
73.         console.error('加载失败:', err);
74.         this.errorMessage = '无法加载订单详情，请稍后重试';
75.         this.isLoading = false;
76.       }
77.     });
78.   }
80.   getStatusClass(): string {
81.     switch(this.order.status) {
82.       case '已完成': return 'status-completed';
83.       case '待接单': return 'status-pending';
84.       case '配送中': return 'status-delivering';
85.       default: return 'status-default';
86.     }
87.   }
88. }
90. <!-- merchants-order-detail.component.html -->
91. <div class="order-detail-container">
92.   <!-- 加载状态 -->
93.   <div *ngIf="isLoading" class="loading">加载中...</div>
95.   <!-- 错误提示 -->
96.   <div *ngIf="errorMessage" class="error">{{ errorMessage }}</div>
98.   <!-- 订单详情 -->
99.   <div *ngIf="order" class="order-content">
100.     <!-- 订单头信息 -->
101.     <div class="order-header">
102.       <h2>订单号：{{ order.id }}</h2>
103.       <span [class]="getStatusClass()">{{ order.status }}</span>
104.     </div>
106.     <!-- 基本信息 -->
107.     <div class="section">
108.       <h3>订单信息</h3>
109.       <div class="info-grid">
110.         <div class="info-item">
111.           <label>下单时间：</label>
112.           <span>{{ order.order_time | date:'yyyy-MM-dd HH:mm' }}</span>
113.         </div>
114.         <div class="info-item">
115.           <label>商家名称：</label>
116.           <span>{{ order.merchant_name }}</span>
117.         </div>
118.         <div class="info-item">
119.           <label>支付方式：</label>
120.           <span>{{ order.payment_method }}</span>
121.         </div>
122.       </div>
123.     </div>
125.     <!-- 商品清单 -->
126.     <div class="section">
127.       <h3>商品清单</h3>
128.       <table class="item-table">
129.         <thead>
130.         <tr>
131.           <th>商品名称</th>
132.           <th>单价</th>
133.           <th>数量</th>
134.           <th>小计</th>
135.         </tr>
136.         </thead>
137.         <tbody>
138.         <tr *ngFor="let item of items">
139.           <td>{{ item.dish_name }}</td>
140.           <td>{{ item.price | currency:'CNY':'symbol':'1.2-2' }}</td>
141.           <td>{{ item.quantity }}</td>
142.           <td>{{ item.price * item.quantity | currency:'CNY':'symbol':'1.2-2' }}</td>
143.         </tr>
144.         </tbody>
145.       </table>
146.     </div>
148.     <!-- 费用明细 -->
149.     <div class="section">
150.       <h3>费用明细</h3>
151.       <div class="fee-details">
152.         <div class="fee-item">
153.           <span>商品总额：</span>
154.           <span>{{ order.total_amount - order.delivery_fee - order.packing_fee | currency:'CNY':'symbol':'1.2-2' }}</span>
155.         </div>
156.         <div class="fee-item">
157.           <span>配送费：</span>
158.           <span>{{ order.delivery_fee | currency:'CNY':'symbol':'1.2-2' }}</span>
159.         </div>
160.         <div class="fee-item">
161.           <span>包装费：</span>
162.           <span>{{ order.packing_fee | currency:'CNY':'symbol':'1.2-2' }}</span>
163.         </div>
164.         <div class="fee-item total">
165.           <span>实付金额：</span>
166.           <span>{{ order.total_amount | currency:'CNY':'symbol':'1.2-2' }}</span>
167.         </div>
168.       </div>
169.     </div>
171.     <!-- 配送信息 -->
172.     <div class="section">
173.       <h3>配送信息</h3>
174.       <div class="delivery-info">
175.         <p>收货人：{{ order.customer_name }}</p>
176.         <p>联系电话：{{ order.customer_phone }}</p>
177.         <p>配送地址：{{ order.delivery_address }}</p>
178.         <div *ngIf="order.rider_name" class="rider-info">
179.           <p>骑手：{{ order.rider_name }}</p>
180.           <p>骑手电话：{{ order.rider_phone }}</p>
181.         </div>
182.       </div>
183.     </div>
185.     <!-- 备注信息 -->
186.     <div *ngIf="order.note" class="section">
187.       <h3>订单备注</h3>
188.       <p class="note">{{ order.note }}</p>
189.     </div>
190.   </div>
191. </div>
193. /* merchants-order-detail.component.css */
194. .order-detail-container {
195.   max-width: 1200px;
196.   margin: 20px auto;
197.   padding: 20px;
198.   background: #fff;
199.   border-radius: 8px;
200.   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
201. }
203. .loading, .error {
204.   text-align: center;
205.   padding: 40px;
206.   font-size: 1.2rem;
207. }
209. .error {
210.   color: #dc3545;
211. }
213. .order-header {
214.   display: flex;
215.   justify-content: space-between;
216.   align-items: center;
217.   margin-bottom: 20px;
218.   padding-bottom: 15px;
219.   border-bottom: 1px solid #eee;
220. }
222. .section {
223.   margin-bottom: 30px;
224.   padding: 15px;
225.   background: #f8f9fa;
226.   border-radius: 6px;
227. }
229. .info-grid {
230.   display: grid;
231.   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
232.   gap: 15px;
233. }
235. .item-table {
236.   width: 100%;
237.   border-collapse: collapse;
238.   margin-top: 10px;
239. }
241. .item-table th,
242. .item-table td {
243.   padding: 12px;
244.   text-align: left;
245.   border-bottom: 1px solid #eee;
246. }
248. .item-table th {
249.   background: #f8f9fa;
250. }
252. .fee-details {
253.   max-width: 400px;
254. }
256. .fee-item {
257.   display: flex;
258.   justify-content: space-between;
259.   margin-bottom: 10px;
260. }
262. .fee-item.total {
263.   font-weight: bold;
264.   border-top: 1px solid #eee;
265.   padding-top: 10px;
266.   font-size: 1.1em;
267. }
269. .note {
270.   color: #666;
271.   line-height: 1.6;
272. }
274. /* 状态标签样式 */
275. .status-completed { color: #28a745; }
276. .status-pending { color: #ffc107; }
277. .status-delivering { color: #17a2b8; }
278. .status-default { color: #6c757d; }

复制代码

end

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。