diff --git a/src/app.config.ts b/src/app.config.ts
index e371740..472a856 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -8,6 +8,7 @@ export default defineAppConfig({
     'pages/user/about/about',
     'pages/user/report/report',
     'pages/user/member/member',
+    'pages/TicketDetail/TicketDetail',
   ],
   window: {
     backgroundTextStyle: 'light',
diff --git a/src/pages/TicketDetail/TicketDetail.config.ts b/src/pages/TicketDetail/TicketDetail.config.ts
new file mode 100644
index 0000000..a9ca517
--- /dev/null
+++ b/src/pages/TicketDetail/TicketDetail.config.ts
@@ -0,0 +1,3 @@
+export default definePageConfig({
+  usingComponents: {},
+});
diff --git a/src/pages/TicketDetail/TicketDetail.scss b/src/pages/TicketDetail/TicketDetail.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/TicketDetail/TicketDetail.tsx b/src/pages/TicketDetail/TicketDetail.tsx
new file mode 100644
index 0000000..ecb8f9b
--- /dev/null
+++ b/src/pages/TicketDetail/TicketDetail.tsx
@@ -0,0 +1,23 @@
+import { Component, ReactNode } from 'react';
+import { View } from '@tarojs/components';
+import { getCurrentInstance } from '@tarojs/runtime';
+import Taro from '@tarojs/taro';
+
+export default class TicketDetail extends Component {
+  state = {
+    id: 0,
+  };
+  componentDidMount(): void {
+    Taro.setNavigationBarTitle({
+      title: '工单详情',
+    });
+    const { router } = getCurrentInstance();
+    const id = router?.params.id;
+    this.setState({
+      id: id,
+    });
+  }
+  render(): ReactNode {
+    return <View>TicketDetail: {this.state.id}</View>;
+  }
+}
diff --git a/src/pages/user/myTicket/myTicket.tsx b/src/pages/user/myTicket/myTicket.tsx
index 6f2385c..059b1ba 100644
--- a/src/pages/user/myTicket/myTicket.tsx
+++ b/src/pages/user/myTicket/myTicket.tsx
@@ -14,6 +14,7 @@ import './myTicket.scss';
 type FixStatus = 1 | 2 | 3 | 4 | 5;
 
 class TicketListItem {
+  id: number;
   brand: string;
   model: string;
   status: FixStatus;
@@ -21,11 +22,13 @@ class TicketListItem {
   iconMap: Map<FixStatus, string>;
 
   constructor(
+    id: number,
     brand: string,
     model: string,
     status: FixStatus,
     createAt: moment.Moment,
   ) {
+    this.id = id;
     this.brand = brand;
     this.model = model;
     this.status = status;
@@ -48,6 +51,11 @@ class TicketListItem {
         extraText={tl.statusMap.get(this.status)}
         arrow='right'
         thumb={this.iconMap.get(this.status)}
+        onClick={() => {
+          Taro.navigateTo({
+            url: '/pages/TicketDetail/TicketDetail?id=' + this.id,
+          });
+        }}
       />
     );
   }
@@ -57,7 +65,7 @@ export default class SettingsPage extends Component {
   state = {
     loading: true,
     success: false,
-    fixList: [new TicketListItem('华硕', '天选3', 3, moment())],
+    fixList: [new TicketListItem(0, '', '', 1, moment())],
   };
 
   componentDidMount(): void {
@@ -82,6 +90,7 @@ export default class SettingsPage extends Component {
           fixList: res.data.data.list.map(
             item =>
               new TicketListItem(
+                item.id,
                 item.device,
                 item.deviceModel,
                 item.status,