diff --git a/src/前端/src/pages/demandMatched.vue b/src/前端/src/pages/demandMatched.vue
new file mode 100644
index 0000000..e204e7d
--- /dev/null
+++ b/src/前端/src/pages/demandMatched.vue
@@ -0,0 +1,68 @@
+<template>   
+  <div>订单号: {{ orderId }}</div>  
+  <div v-for="(service, index) in services" :key="service.gid" class="service-box">  
+        <p>{{ service.nickname }}</p>  
+        <p>{{ service.endDate }}</p>
+        <!-- 添加一个按钮，并绑定 click 事件处理器 sendServiceId -->  
+        <button @click="sendServiceId(service.gid)">同意</button>  
+    </div>
+</template>  
+  
+<script>  
+import axios from 'axios'; 
+  
+export default {  
+  props: ['orderId'],  
+  data() {  
+    return {  
+      services: [] 
+    };  
+  },
+	methods: {  
+	    async sendServiceId(gid) {  
+	      try {  
+	        // 假设后端API接受gid和did作为POST请求体
+			const orderIdAsInt = parseInt(this.orderId, 10);
+			const gidAsInt = parseInt(gid, 10);
+	        const response = await axios.post('http://192.168.243.35:9000/DemandMatch/confirmed', { did:orderIdAsInt,gid:gidAsInt});  
+	        alert('已同意');  
+	      } catch (error) {  
+	        console.error('Error sending service ID and order ID:', error);  
+	      }  
+	    }  
+	  },
+  async created() {
+    // 在组件创建后立即发送请求  
+    axios.get(`http://192.168.243.35:9000/DemandMatch/confirmedPage?did=${this.orderId}`)
+        .then(response => {
+    		this.services = response.data
+        })
+        .catch(error => {
+          console.error('Error fetching user:', error);
+        });
+  },  
+};  
+</script>  
+  
+<style scoped>  
+/* 样式代码，定义 .service-box 的样式 */
+
+  
+/* 为按钮添加一些样式 */  
+.service-box button {  
+  margin-left: auto; /* 将按钮推到右侧 */  
+}   
+  
+/* 为按钮添加一些样式 */  
+.service-box button {  
+  margin-left: auto; /* 将按钮推到右侧 */  
+}   
+  
+.service-box {  
+  border: 1px solid #ccc;  
+  padding: 10px;  
+  margin-bottom: 10px;  
+  /* 其他样式 */  
+}
+
+</style>
\ No newline at end of file