开发客人卡片打印界面

src/config.js

@@ -1,5 +1,4 @@
 import React from "react";
 
-export const stores_Context = React.createContext();
 export const DATE_FORMAT = "YYYY-MM-DD";
 export const HT_HOST = process.env.NODE_ENV == "production" ? "https://p9axztuwd7x8a7.mycht.cn" : "http://202.103.68.100:890";

src/main.jsx

@@ -16,6 +16,7 @@ import ErrorPage from "@/views/error-page";
 import ReservationNewest from "@/views/reservation/Newest";
 import ReservationDetail from "@/views/reservation/Detail";
 import ReservationPrint from "@/views/reservation/Print";
+import ReservationNameCard from "@/views/reservation/NameCard";
 import FeedbackIndex from "@/views/feedback/Index";
 import FeedbackDetail from "@/views/feedback/Detail";
 
@@ -39,6 +40,7 @@ const router = createBrowserRouter([
       { path: "reservation/newest", element: <ReservationNewest />},
       { path: "reservation/:reservationId", element: <ReservationDetail />},
       { path: "reservation/:reservationId/print", element: <ReservationPrint />},
+      { path: "reservation/:reservationId/name-card", element: <ReservationNameCard />},
       { path: "feedback", element: <FeedbackIndex />},
       { path: "feedback/:feedbackId", element: <FeedbackDetail />},
     ]

src/stores/Reservation.js

@@ -15,7 +15,7 @@ class Reservation {
         {
           key: '1',
           id: '1',
-          referenceNumber: '中华游111029-N111025076',
+          referenceNumber: '111029-N111025076',
           arrivalDate: '2023-04-08',
           pax: '5AD 1CH',
           status: 'Confirm',
@@ -25,7 +25,7 @@ class Reservation {
         {
           key: '2',
           id: '3',
-          referenceNumber: '中华游111029-N111025076',
+          referenceNumber: '111029-N111025076',
           arrivalDate: '2023-04-08',
           pax: '5AD 1CH',
           status: 'Confirm',
@@ -35,13 +35,23 @@ class Reservation {
         {
           key: '3',
           id: '3',
-          referenceNumber: '中华游111029-N111025076',
+          referenceNumber: '111029-N111025076',
           arrivalDate: '2023-05-08',
           pax: '3AD',
           status: 'Confirm',
           reservationDate: '2023-01-08 19:31',
           guide: 'Giffigan',
         },
+        {
+          key: '3',
+          id: '3',
+          referenceNumber: '111029-N111025076',
+          arrivalDate: '2023-05-08',
+          pax: '3AD',
+          status: 'Confirm',
+          reservationDate: '2023-01-08 19:31',
+          guide: 'Laurie Notaro',
+        },
       ];
     });
   }

src/views/reservation/Detail.jsx

@@ -51,21 +51,18 @@ function Detail() {
     <Space direction="vertical" style={{ width: '100%' }}>
     <Row gutter={{ md: 24 }}>
         <Col span={20}>
-      <Title level={4}>Booking Number: 220629-W220420009; Arrival date: 2023-12-15; Guide: Giffigan</Title>
+      <Title level={4}>Reference Number: 220629-W220420009; Arrival date: 2023-12-15; Tour guide: Giffigan</Title>
         </Col>
         <Col span={4}>
-      <Button type="link" onClick={() => navigate('/reservation/newest')}>Return</Button>
+      <Button type="link" onClick={() => navigate('/reservation/newest')}>Back</Button>
         </Col>
       </Row>
       <Row>
         <Col span={2}>
-      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Print Reservation</Button>
+      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/print`)}>Booking information</Button>
         </Col>
         <Col span={2}>
-      <Button type="link" onClick={() => console.info('')}>Print Feedback</Button>
-        </Col>
-        <Col span={2}>
-      <Button type="link" onClick={() => console.info('')}>Print Customer Card</Button>
+      <Button type="link" onClick={() => navigate(`/reservation/${reservationId}/name-card`)}>Name Card</Button>
         </Col>
       </Row>
       <Row gutter={{ md: 24 }}>

src/views/reservation/NameCard.jsx

@@ -0,0 +1,72 @@
+import { useParams, useNavigate } from "react-router-dom";
+import { useEffect } from 'react';
+import { observer } from "mobx-react";
+import { toJS } from "mobx";
+import moment from "moment";
+import { Row, Col, Space, Table, Typography, List, Watermark } from 'antd';
+import { useStore } from '../../stores/StoreContext.js';
+
+const { Title } = Typography;
+
+const itineraryListColumns = [
+  {
+    title: 'Day',
+    dataIndex: 'day',
+    key: 'day',
+  },
+  {
+    title: 'Place & Transport',
+    dataIndex: 'placeTransport',
+    key: 'placeTransport',
+  },
+  {
+    title: 'Today’s Activities',
+    dataIndex: 'todayActivities',
+    key: 'todayActivities',
+  },
+  {
+    title: 'Accommodation',
+    dataIndex: 'accommodation',
+    key: 'accommodation',
+  },
+  {
+    title: 'Meals',
+    dataIndex: 'meals',
+    key: 'meals',
+  },
+];
+
+function NameCard() {
+  const navigate = useNavigate();
+  const { reservationId } = useParams();
+  const { reservationStore } = useStore();
+  const { itineraryList, customerList } = reservationStore;
+
+  useEffect(() => {
+    console.info('Detail.useEffect: ' + reservationId);
+  }, [reservationId]);
+
+  return (
+    <Watermark content={['Global Highlights', 'Discovery Your Way!']}>
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Row gutter={{ md: 24 }}>
+        <Col span={24}>
+          <Title level={1}>Mr. Prasanna Venkatesa</Title>
+        </Col>
+      </Row>
+      <Row gutter={{ md: 24 }}>
+        <Col span={24}>
+          <Title level={1}>Nathan  Group</Title>
+        </Col>
+      </Row>
+      <Row gutter={{ md: 24 }}>
+        <Col span={24}>
+          <Title level={1}>(4 Persons)</Title>
+        </Col>
+      </Row>
+    </Space>
+    </Watermark>
+  );
+}
+
+export default observer(NameCard);

src/views/reservation/Newest.jsx

@@ -80,7 +80,6 @@ function Newest() {
   return (
     <>
       <Modal
-        title="团导游安排预览"
         centered
         open={isModalOpen} onOk={handleOk} onCancel={handleCancel}
       >
@@ -99,7 +98,7 @@ function Newest() {
                     key: 'city'
                   },
                   {
-                    title: 'Guide',
+                    title: 'Tour Guide',
                     dataIndex: 'guide',
                     key: 'guide'
                   }