diff --git a/src/api/scm/addReserveDiningApi.js b/src/api/scm/addReserveDiningApi.js
new file mode 100644
index 0000000..b7e4186
--- /dev/null
+++ b/src/api/scm/addReserveDiningApi.js
@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 保存就餐商品信息
+export function saveReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.saveReserveGoods',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取就餐参数列表
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传文件
+export function uploadFile(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadFile',
+      method: 'post',
+      data,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取文件下载URL
+export function getFileUrl(fileId) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/callComponent/download/getFile/file',
+      method: 'get',
+      params: {
+        fileId,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/addReserveServiceApi.js b/src/api/scm/addReserveServiceApi.js
new file mode 100644
index 0000000..b8c58a5
--- /dev/null
+++ b/src/api/scm/addReserveServiceApi.js
@@ -0,0 +1,82 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+/**
+ * 保存预约服务信息
+ * @param {Object} data 服务信息
+ * @returns {Promise}
+ */
+export function saveReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.saveReserveGoods',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取预约参数列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function listReserveParams(params = {}) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params: {
+        page: 1,
+        row: 100,
+        communityId: getCommunityId(),
+        ...params
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 上传文件
+ * @param {FormData} formData 文件表单数据
+ * @returns {Promise}
+ */
+export function uploadFile(formData) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadFile',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取文件下载URL
+ * @param {String} fileId 文件ID
+ * @returns {String} 文件下载URL
+ */
+export function getFileUrl(fileId) {
+  return `/callComponent/download/getFile/file?fileId=${fileId}&communityId=${getCommunityId()}&time=${new Date().getTime()}`
+}
\ No newline at end of file
diff --git a/src/api/scm/doDiningApi.js b/src/api/scm/doDiningApi.js
new file mode 100644
index 0000000..4b5b535
--- /dev/null
+++ b/src/api/scm/doDiningApi.js
@@ -0,0 +1,135 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取预约商品列表
+export function listReserveGoods(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveGoods',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询业主就餐记录
+export function queryOwnerDining(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerDining',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 执行就餐
+export function doDining(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserveOrder.doDining',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存预约商品订单
+export function saveReserveGoodsOrder(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserveOrder.saveReserveGoodsOrder',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除预约商品
+export function deleteReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.deleteReserveGoods',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预约参数
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/editReserveDiningApi.js b/src/api/scm/editReserveDiningApi.js
new file mode 100644
index 0000000..cd78f52
--- /dev/null
+++ b/src/api/scm/editReserveDiningApi.js
@@ -0,0 +1,84 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 更新预订餐饮商品
+export function updateReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/reserve.updateReserveGoods',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预订参数列表
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    const defaultParams = {
+      page: 1,
+      row: 100,
+      communityId: getCommunityId()
+    }
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params: Object.assign(defaultParams, params)
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预订餐饮商品列表
+export function listReserveGoods(params) {
+  return new Promise((resolve, reject) => {
+    const defaultParams = {
+      page: 1,
+      row: 1,
+      communityId: getCommunityId()
+    }
+    request({
+      url: '/reserve.listReserveGoods',
+      method: 'get',
+      params: Object.assign(defaultParams, params)
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传图片
+export function uploadImage(data) {
+  return new Promise((resolve, reject) => {
+    const formData = new FormData()
+    formData.append('uploadFile', data.file)
+    formData.append('communityId', getCommunityId())
+
+    request({
+      url: 'uploadFile',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/editReserveServiceApi.js b/src/api/scm/editReserveServiceApi.js
new file mode 100644
index 0000000..ad60a5c
--- /dev/null
+++ b/src/api/scm/editReserveServiceApi.js
@@ -0,0 +1,107 @@
+import request from '@/utils/request'
+
+/**
+ * 更新预约服务信息
+ * @param {Object} data 服务信息
+ * @returns {Promise}
+ */
+export function updateReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.updateReserveGoods',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取预约参数列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取预约服务列表
+ * @param {Object} params 查询参数
+ * @returns {Promise}
+ */
+export function listReserveGoods(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveGoods',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 上传文件
+ * @param {FormData} formData 文件表单数据
+ * @returns {Promise}
+ */
+export function uploadFile(formData) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadFile',
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+/**
+ * 获取文件下载URL
+ * @param {String} fileId 文件ID
+ * @returns {Promise}
+ */
+export function getFileUrl(fileId) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/callComponent/download/getFile/file',
+      method: 'get',
+      params: {
+        fileId,
+        communityId: -1
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/ownerDiningApi.js b/src/api/scm/ownerDiningApi.js
new file mode 100644
index 0000000..ed86777
--- /dev/null
+++ b/src/api/scm/ownerDiningApi.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 查询业主就餐记录
+export function queryOwnerReserveGoods(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwnerReserveGoods',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/reserveCatalogManageApi.js b/src/api/scm/reserveCatalogManageApi.js
index 721e91a..052de07 100644
--- a/src/api/scm/reserveCatalogManageApi.js
+++ b/src/api/scm/reserveCatalogManageApi.js
@@ -4,12 +4,13 @@ import { getCommunityId } from '@/api/community/communityApi'
 // 获取预约目录列表
 export function listReserveCatalog(params) {
   return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
     request({
       url: '/reserve.listReserveCatalog',
       method: 'get',
       params: {
         ...params,
-        communityId: getCommunityId()
+        communityId
       }
     }).then(response => {
       const res = response.data
@@ -23,12 +24,13 @@ export function listReserveCatalog(params) {
 // 添加预约目录
 export function saveReserveCatalog(data) {
   return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
     request({
       url: '/reserve.saveReserveCatalog',
       method: 'post',
       data: {
         ...data,
-        communityId: getCommunityId()
+        communityId
       }
     }).then(response => {
       const res = response.data
@@ -42,12 +44,13 @@ export function saveReserveCatalog(data) {
 // 更新预约目录
 export function updateReserveCatalog(data) {
   return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
     request({
       url: '/reserve.updateReserveCatalog',
       method: 'post',
       data: {
         ...data,
-        communityId: getCommunityId()
+        communityId
       }
     }).then(response => {
       const res = response.data
@@ -61,12 +64,13 @@ export function updateReserveCatalog(data) {
 // 删除预约目录
 export function deleteReserveCatalog(data) {
   return new Promise((resolve, reject) => {
+    const communityId = getCommunityId()
     request({
       url: '/reserve.deleteReserveCatalog',
       method: 'post',
       data: {
         ...data,
-        communityId: getCommunityId()
+        communityId
       }
     }).then(response => {
       const res = response.data
diff --git a/src/api/scm/reserveConfirmApi.js b/src/api/scm/reserveConfirmApi.js
new file mode 100644
index 0000000..84b6646
--- /dev/null
+++ b/src/api/scm/reserveConfirmApi.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 获取核销订单列表
+export function listReserveGoodsConfirmOrder(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserveOrder.listReserveGoodsConfirmOrder',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 核销预约订单
+export function saveReserveGoodsConfirmOrder(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserveOrder.saveReserveGoodsConfirmOrder',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/reserveDiningManageApi.js b/src/api/scm/reserveDiningManageApi.js
new file mode 100644
index 0000000..8250b08
--- /dev/null
+++ b/src/api/scm/reserveDiningManageApi.js
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取预约就餐列表
+export function listReserveGoods(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveGoods',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预约目录列表
+export function listReserveCatalog(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveCatalog',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预约参数
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存预约订单
+export function saveReserveGoodsOrder(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserveOrder.saveReserveGoodsOrder',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除预约商品
+export function deleteReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.deleteReserveGoods',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/reserveOrderApi.js b/src/api/scm/reserveOrderApi.js
new file mode 100644
index 0000000..1bebb77
--- /dev/null
+++ b/src/api/scm/reserveOrderApi.js
@@ -0,0 +1,38 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取预约订单列表
+export function listReserveGoodsOrder(params) {
+  return new Promise((resolve, reject) => {
+    const defaultParams = {
+      communityId: getCommunityId(),
+      ...params
+    }
+    request({
+      url: '/reserveOrder.listReserveGoodsOrder',
+      method: 'get',
+      params: defaultParams
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 取消预约订单
+export function cancelReserveOrder(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserveOrder.cancelReserveOrder',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/reserveParamsManageApi.js b/src/api/scm/reserveParamsManageApi.js
new file mode 100644
index 0000000..42ee7d2
--- /dev/null
+++ b/src/api/scm/reserveParamsManageApi.js
@@ -0,0 +1,81 @@
+import request from '@/utils/request'
+
+// 获取预约参数列表
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加预约参数
+export function saveReserveParams(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.saveReserveParams',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新预约参数
+export function updateReserveParams(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.updateReserveParams',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除预约参数
+export function deleteReserveParams(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.deleteReserveParams',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新预约开放时间
+export function updateReserveParamsOpenTime(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.updateReserveParamsOpenTime',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/reserveServiceManageApi.js b/src/api/scm/reserveServiceManageApi.js
new file mode 100644
index 0000000..22db304
--- /dev/null
+++ b/src/api/scm/reserveServiceManageApi.js
@@ -0,0 +1,87 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取预约服务列表
+export function listReserveGoods(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/reserve.listReserveGoods',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预约目录列表
+export function listReserveCatalog(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/reserve.listReserveCatalog',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取预约参数
+export function listReserveParams(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/reserve.listReserveParams',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 保存预约订单
+export function saveReserveGoodsOrder(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/reserveOrder.saveReserveGoodsOrder',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除预约服务
+export function deleteReserveGoods(data) {
+  return new Promise((resolve, reject) => {
+    data.communityId = getCommunityId()
+    request({
+      url: '/reserve.deleteReserveGoods',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/scm/addReserveCatalog.vue b/src/components/scm/addReserveCatalog.vue
index 4b01681..f5fe4a5 100644
--- a/src/components/scm/addReserveCatalog.vue
+++ b/src/components/scm/addReserveCatalog.vue
@@ -12,57 +12,57 @@
       label-width="120px"
     >
       <el-form-item
-        :label="$t('reserveCatalogManage.add.name')"
+        :label="$t('reserveCatalogManage.form.name')"
         prop="name"
       >
         <el-input
           v-model="formData.name"
-          :placeholder="$t('reserveCatalogManage.add.namePlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.namePlaceholder')"
         />
       </el-form-item>
       <el-form-item
-        :label="$t('reserveCatalogManage.add.sort')"
+        :label="$t('reserveCatalogManage.form.sort')"
         prop="sort"
       >
         <el-input
           v-model="formData.sort"
-          :placeholder="$t('reserveCatalogManage.add.sortPlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.sortPlaceholder')"
         />
       </el-form-item>
       <el-form-item
-        :label="$t('reserveCatalogManage.add.type')"
+        :label="$t('reserveCatalogManage.form.type')"
         prop="type"
       >
         <el-select
           v-model="formData.type"
-          :placeholder="$t('reserveCatalogManage.add.typePlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.typePlaceholder')"
           style="width:100%"
         >
           <el-option
-            :label="$t('reserveCatalogManage.add.typeOption1')"
+            :label="$t('reserveCatalogManage.form.typeOptions.dining')"
             value="1001"
           />
           <el-option
-            :label="$t('reserveCatalogManage.add.typeOption2')"
+            :label="$t('reserveCatalogManage.form.typeOptions.service')"
             value="2002"
           />
         </el-select>
       </el-form-item>
       <el-form-item
-        :label="$t('reserveCatalogManage.add.state')"
+        :label="$t('reserveCatalogManage.form.state')"
         prop="state"
       >
         <el-select
           v-model="formData.state"
-          :placeholder="$t('reserveCatalogManage.add.statePlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.statePlaceholder')"
           style="width:100%"
         >
           <el-option
-            :label="$t('reserveCatalogManage.add.stateOption1')"
+            :label="$t('reserveCatalogManage.form.stateOptions.show')"
             value="1001"
           />
           <el-option
-            :label="$t('reserveCatalogManage.add.stateOption2')"
+            :label="$t('reserveCatalogManage.form.stateOptions.hide')"
             value="2002"
           />
         </el-select>
@@ -115,10 +115,10 @@ export default {
   },
   methods: {
     open() {
-      this.formData.communityId = getCommunityId()
       this.visible = true
+      this.formData.communityId = getCommunityId()
       this.$nextTick(() => {
-        this.$refs.form.resetFields()
+        this.$refs.form && this.$refs.form.resetFields()
       })
     },
     handleClose() {
@@ -133,7 +133,7 @@ export default {
             this.visible = false
             this.$emit('success')
           } catch (error) {
-            this.$message.error(this.$t('reserveCatalogManage.add.error'))
+            this.$message.error(error.message || this.$t('reserveCatalogManage.add.error'))
           }
         }
       })
diff --git a/src/components/scm/addReserveDiningPerson.vue b/src/components/scm/addReserveDiningPerson.vue
new file mode 100644
index 0000000..69d4ac1
--- /dev/null
+++ b/src/components/scm/addReserveDiningPerson.vue
@@ -0,0 +1,205 @@
+<template>
+  <el-dialog :title="$t('addReserveDiningPerson.reserveDining')" :visible.sync="visible" width="70%"
+    @close="closeDialog">
+    <el-form :model="form" label-width="120px" ref="form">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.personName')" prop="personName" required>
+            <el-input v-model="form.personName"
+              :placeholder="$t('addReserveDiningPerson.personNamePlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.personTel')" prop="personTel" required>
+            <el-input v-model="form.personTel"
+              :placeholder="$t('addReserveDiningPerson.personTelPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.payWay')" prop="payWay" required>
+            <el-select v-model="form.payWay" :placeholder="$t('addReserveDiningPerson.payWayPlaceholder')"
+              style="width:100%">
+              <el-option :label="$t('addReserveDiningPerson.cash')" value="1"></el-option>
+              <el-option :label="$t('addReserveDiningPerson.wechat')" value="2"></el-option>
+              <el-option :label="$t('addReserveDiningPerson.alipay')" value="3"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.quantity')" prop="quantity" required>
+            <el-select v-model="form.quantity" :placeholder="$t('addReserveDiningPerson.quantityPlaceholder')"
+              @change="_computeMoney" style="width:100%">
+              <el-option v-for="item in form.hoursMaxQuantity" :key="item"
+                :label="`${item}${$t('addReserveDiningPerson.unit')}`" :value="item"></el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.receivableAmount')" prop="receivableAmount" required>
+            <el-input v-model="form.receivableAmount"
+              :placeholder="$t('addReserveDiningPerson.receivableAmountPlaceholder')" disabled></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.receivedAmount')" prop="receivedAmount" required>
+            <el-input v-model="form.receivedAmount"
+              :placeholder="$t('addReserveDiningPerson.receivedAmountPlaceholder')"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.appointmentTime')" prop="appointmentTime" required>
+            <el-date-picker v-model="form.appointmentTime" type="datetime"
+              :placeholder="$t('addReserveDiningPerson.appointmentTimePlaceholder')"
+              style="width:100%"></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveDiningPerson.openTime')" prop="openTime" required>
+            <el-select v-model="form.openTime" :placeholder="$t('addReserveDiningPerson.openTimePlaceholder')"
+              style="width:100%">
+              <template v-for="item in form.openTimes">
+                <el-option v-if="item.isOpen === 'Y'" :key="item.hours"
+                  :label="`${item.hours}${$t('addReserveDiningPerson.hour')}`" :value="item.hours"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item :label="$t('addReserveDiningPerson.remark')" prop="remark" required>
+        <el-input type="textarea" v-model="form.remark"
+          :placeholder="$t('addReserveDiningPerson.remarkPlaceholder')"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="save">{{ $t('common.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { saveReserveGoodsOrder, listReserveParams } from '@/api/scm/doDiningApi'
+
+export default {
+  name: 'AddReserveDiningPerson',
+  data() {
+    return {
+      visible: false,
+      form: {
+        goodsId: '',
+        paramsId: '',
+        personName: '',
+        personTel: '',
+        appointmentTime: '',
+        receivableAmount: '',
+        receivedAmount: '',
+        payWay: '',
+        state: 'S',
+        remark: '',
+        openTime: '',
+        price: 0.0,
+        hoursMaxQuantity: 1,
+        quantity: 1,
+        type: '1001',
+        openTimes: [],
+        times: [],
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.resetForm()
+      Object.assign(this.form, params)
+      this.form.hoursMaxQuantity = parseInt(params.hoursMaxQuantity)
+      this._computeMoney()
+      this._listReserveParams()
+      this.visible = true
+    },
+    closeDialog() {
+      this.visible = false
+      this.$refs.form.resetFields()
+    },
+    resetForm() {
+      this.form = {
+        goodsId: '',
+        paramsId: '',
+        personName: '',
+        personTel: '',
+        appointmentTime: '',
+        receivableAmount: '',
+        receivedAmount: '',
+        payWay: '',
+        state: 'S',
+        remark: '',
+        openTime: '',
+        price: 0.0,
+        hoursMaxQuantity: 1,
+        quantity: 1,
+        type: '1001',
+        openTimes: [],
+        times: [],
+        communityId: ''
+      }
+    },
+    save() {
+      this.$refs.form.validate(valid => {
+        if (!valid) return
+
+        this.form.communityId = getCommunityId()
+        this.form.times = [{
+          hours: this.form.openTime,
+          quantity: this.form.quantity
+        }]
+
+        saveReserveGoodsOrder(this.form)
+          .then(response => {
+            if (response.code === 0) {
+              this.$message.success(this.$t('common.saveSuccess'))
+              this.closeDialog()
+              this.$emit('success')
+            } else {
+              this.$message.error(response.msg)
+            }
+          })
+          .catch(error => {
+            console.error('请求失败:', error)
+          })
+      })
+    },
+    _listReserveParams() {
+      const params = {
+        page: 1,
+        row: 1,
+        communityId: getCommunityId(),
+        paramsId: this.form.paramsId
+      }
+
+      listReserveParams(params)
+        .then(response => {
+          this.form.openTimes = response.data[0].openTimes
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    _computeMoney() {
+      const money = parseFloat(this.form.price) * parseFloat(this.form.quantity)
+      this.form.receivableAmount = money.toFixed(2)
+      this.form.receivedAmount = money.toFixed(2)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/addReserveParams.vue b/src/components/scm/addReserveParams.vue
new file mode 100644
index 0000000..6094628
--- /dev/null
+++ b/src/components/scm/addReserveParams.vue
@@ -0,0 +1,215 @@
+<template>
+  <el-dialog
+    :title="$t('reserveParamsManage.addTitle')"
+    :visible.sync="visible"
+    width="70%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item
+        :label="$t('reserveParamsManage.name')"
+        prop="name"
+      >
+        <el-input
+          v-model="formData.name"
+          :placeholder="$t('reserveParamsManage.namePlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.paramWay')"
+        prop="paramWay"
+      >
+        <el-select
+          v-model="formData.paramWay"
+          :placeholder="$t('reserveParamsManage.paramWayPlaceholder')"
+          style="width: 100%"
+          @change="handleParamWayChange"
+        >
+          <el-option
+            :label="$t('reserveParamsManage.day')"
+            value="1"
+          />
+          <el-option
+            :label="$t('reserveParamsManage.week')"
+            value="2"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        v-if="formData.paramWay === '1'"
+        :label="$t('reserveParamsManage.days')"
+        prop="days"
+      >
+        <el-checkbox-group v-model="formData.days">
+          <el-checkbox
+            v-for="day in 31"
+            :key="day"
+            :label="day"
+          >
+            {{ day }}{{ $t('reserveParamsManage.dayUnit') }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item
+        v-if="formData.paramWay === '2'"
+        :label="$t('reserveParamsManage.weekdays')"
+        prop="workdays"
+      >
+        <el-checkbox-group v-model="formData.workdays">
+          <el-checkbox
+            v-for="(weekday, index) in weekdays"
+            :key="index"
+            :label="index + 1"
+          >
+            {{ weekday }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.startTime')"
+        prop="startTime"
+      >
+        <el-time-picker
+          v-model="formData.startTime"
+          :placeholder="$t('reserveParamsManage.startTimePlaceholder')"
+          value-format="HH:mm:ss"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.maxQuantity')"
+        prop="maxQuantity"
+      >
+        <el-input-number
+          v-model="formData.maxQuantity"
+          :min="1"
+          :placeholder="$t('reserveParamsManage.maxQuantityPlaceholder')"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.hoursMaxQuantity')"
+        prop="hoursMaxQuantity"
+      >
+        <el-input-number
+          v-model="formData.hoursMaxQuantity"
+          :min="1"
+          :placeholder="$t('reserveParamsManage.hoursMaxQuantityPlaceholder')"
+          style="width: 100%"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { saveReserveParams } from '@/api/scm/reserveParamsManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddReserveParams',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        name: '',
+        paramWay: '',
+        days: [],
+        workdays: [],
+        startTime: '',
+        maxQuantity: '',
+        hoursMaxQuantity: '',
+        communityId: ''
+      },
+      weekdays: [
+        this.$t('common.monday'),
+        this.$t('common.tuesday'),
+        this.$t('common.wednesday'),
+        this.$t('common.thursday'),
+        this.$t('common.friday'),
+        this.$t('common.saturday'),
+        this.$t('common.sunday')
+      ],
+      rules: {
+        name: [
+          { required: true, message: this.$t('reserveParamsManage.nameRequired'), trigger: 'blur' }
+        ],
+        paramWay: [
+          { required: true, message: this.$t('reserveParamsManage.paramWayRequired'), trigger: 'change' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('reserveParamsManage.startTimeRequired'), trigger: 'change' }
+        ],
+        maxQuantity: [
+          { required: true, message: this.$t('reserveParamsManage.maxQuantityRequired'), trigger: 'blur' }
+        ],
+        hoursMaxQuantity: [
+          { required: true, message: this.$t('reserveParamsManage.hoursMaxQuantityRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.formData.communityId = getCommunityId()
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+    },
+    handleParamWayChange(val) {
+      if (val === '1') {
+        this.formData.days = Array.from({ length: 31 }, (_, i) => i + 1)
+        this.formData.workdays = []
+      } else {
+        this.formData.workdays = Array.from({ length: 7 }, (_, i) => i + 1)
+        this.formData.days = []
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            const params = {
+              ...this.formData,
+              paramWayText: this.formData.paramWay === '1' 
+                ? this.formData.days.join(',') 
+                : this.formData.workdays.join(',')
+            }
+            await saveReserveParams(params)
+            this.$message.success(this.$t('common.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('common.addFailed'))
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/addReserveServicePerson.vue b/src/components/scm/addReserveServicePerson.vue
new file mode 100644
index 0000000..7f3bbe8
--- /dev/null
+++ b/src/components/scm/addReserveServicePerson.vue
@@ -0,0 +1,225 @@
+<template>
+  <el-dialog :title="$t('addReserveServicePerson.reserveService')" :visible.sync="dialogVisible" width="70%"
+    @close="handleClose">
+    <el-form :model="form" :rules="rules" ref="form" label-width="120px">
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.personName')" prop="personName">
+            <el-input v-model="form.personName" :placeholder="$t('addReserveServicePerson.personNamePlaceholder')">
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.personTel')" prop="personTel">
+            <el-input v-model="form.personTel" :placeholder="$t('addReserveServicePerson.personTelPlaceholder')">
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.payWay')" prop="payWay">
+            <el-select v-model="form.payWay" :placeholder="$t('addReserveServicePerson.payWayPlaceholder')"
+              style="width:100%">
+              <el-option :label="$t('addReserveServicePerson.cash')" value="1">
+              </el-option>
+              <el-option :label="$t('addReserveServicePerson.wechat')" value="2">
+              </el-option>
+              <el-option :label="$t('addReserveServicePerson.alipay')" value="3">
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.receivableAmount')">
+            <el-input v-model="form.receivableAmount" disabled
+              :placeholder="$t('addReserveServicePerson.receivableAmountPlaceholder')">
+            </el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.receivedAmount')" prop="receivedAmount">
+            <el-input v-model="form.receivedAmount"
+              :placeholder="$t('addReserveServicePerson.receivedAmountPlaceholder')">
+            </el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.appointmentTime')" prop="appointmentTime">
+            <el-date-picker v-model="form.appointmentTime" type="date"
+              :placeholder="$t('addReserveServicePerson.appointmentTimePlaceholder')" style="width:100%">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('addReserveServicePerson.openTime')" prop="openTime">
+            <el-select v-model="form.openTime" :placeholder="$t('addReserveServicePerson.openTimePlaceholder')"
+              style="width:100%">
+              <template v-for="(item, index) in form.openTimes">  
+                <el-option v-if="item.isOpen == 'Y'" :key="index" :label="item.hours + $t('addReserveServicePerson.hour')"
+                  :value="item.hours">
+                </el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-form-item :label="$t('addReserveServicePerson.remark')" prop="remark">
+        <el-input type="textarea" :rows="3" v-model="form.remark"
+          :placeholder="$t('addReserveServicePerson.remarkPlaceholder')">
+        </el-input>
+      </el-form-item>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleSubmit">{{ $t('common.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveReserveGoodsOrder, listReserveParams } from '@/api/scm/reserveServiceManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddReserveServicePerson',
+  data() {
+    return {
+      dialogVisible: false,
+      form: {
+        goodsId: '',
+        paramsId: '',
+        personName: '',
+        personTel: '',
+        appointmentTime: '',
+        receivableAmount: '',
+        receivedAmount: '',
+        payWay: '',
+        state: 'S',
+        remark: '',
+        openTime: '',
+        price: 0.0,
+        hoursMaxQuantity: 1,
+        quantity: 1,
+        type: '2002',
+        openTimes: [],
+        communityId: '',
+        times: []
+      },
+      rules: {
+        personName: [
+          { required: true, message: this.$t('addReserveServicePerson.personNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('addReserveServicePerson.personNameMaxLength'), trigger: 'blur' }
+        ],
+        personTel: [
+          { required: true, message: this.$t('addReserveServicePerson.personTelRequired'), trigger: 'blur' },
+          { max: 11, message: this.$t('addReserveServicePerson.personTelMaxLength'), trigger: 'blur' }
+        ],
+        appointmentTime: [
+          { required: true, message: this.$t('addReserveServicePerson.appointmentTimeRequired'), trigger: 'blur' }
+        ],
+        receivableAmount: [
+          { required: true, message: this.$t('addReserveServicePerson.receivableAmountRequired'), trigger: 'blur' }
+        ],
+        receivedAmount: [
+          { required: true, message: this.$t('addReserveServicePerson.receivedAmountRequired'), trigger: 'blur' }
+        ],
+        payWay: [
+          { required: true, message: this.$t('addReserveServicePerson.payWayRequired'), trigger: 'change' }
+        ],
+        remark: [
+          { required: true, message: this.$t('addReserveServicePerson.remarkRequired'), trigger: 'blur' }
+        ],
+        openTime: [
+          { required: true, message: this.$t('addReserveServicePerson.openTimeRequired'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.resetForm()
+      Object.assign(this.form, data)
+      this.form.communityId = getCommunityId()
+      this._computeMoney()
+      this._listReserveParams()
+      this.dialogVisible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    resetForm() {
+      this.form = {
+        goodsId: '',
+        paramsId: '',
+        personName: '',
+        personTel: '',
+        appointmentTime: '',
+        receivableAmount: '',
+        receivedAmount: '',
+        payWay: '',
+        state: 'S',
+        remark: '',
+        openTime: '',
+        price: 0.0,
+        hoursMaxQuantity: 1,
+        quantity: 1,
+        type: '2002',
+        openTimes: [],
+        communityId: '',
+        times: []
+      }
+    },
+    async _listReserveParams() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          communityId: this.form.communityId,
+          paramsId: this.form.paramsId
+        }
+        const { data } = await listReserveParams(params)
+        if (data && data.length > 0) {
+          this.form.openTimes = data[0].openTimes
+        }
+      } catch (error) {
+        console.error('获取预约参数失败:', error)
+      }
+    },
+    _computeMoney() {
+      const money = parseFloat(this.form.price) * parseFloat(this.form.quantity)
+      this.form.receivableAmount = money.toFixed(2)
+      this.form.receivedAmount = money.toFixed(2)
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            this.form.times = [{
+              hours: this.form.openTime,
+              quantity: this.form.quantity
+            }]
+
+            await saveReserveGoodsOrder(this.form)
+            this.$message.success(this.$t('common.saveSuccess'))
+            this.dialogVisible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('保存预约服务失败:', error)
+            this.$message.error(this.$t('common.saveFailed'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/deleteReserveCatalog.vue b/src/components/scm/deleteReserveCatalog.vue
index 7356ac9..663cd9b 100644
--- a/src/components/scm/deleteReserveCatalog.vue
+++ b/src/components/scm/deleteReserveCatalog.vue
@@ -6,15 +6,14 @@
     @close="handleClose"
   >
     <div class="delete-content">
-      <p>{{ $t('reserveCatalogManage.delete.confirmText1') }}</p>
+      <p>{{ $t('reserveCatalogManage.delete.confirmText') }}</p>
       <p class="delete-name">{{ formData.name }}</p>
-      <p>{{ $t('reserveCatalogManage.delete.confirmText2') }}</p>
     </div>
     <span slot="footer" class="dialog-footer">
       <el-button @click="visible = false">
         {{ $t('common.cancel') }}
       </el-button>
-      <el-button type="primary" @click="handleSubmit">
+      <el-button type="primary" @click="handleConfirm" :loading="loading">
         {{ $t('common.confirm') }}
       </el-button>
     </span>
@@ -30,6 +29,7 @@ export default {
   data() {
     return {
       visible: false,
+      loading: false,
       formData: {
         catalogId: '',
         name: '',
@@ -38,13 +38,13 @@ export default {
     }
   },
   methods: {
-    open(row) {
+    open(data) {
+      this.visible = true
       this.formData = {
-        catalogId: row.catalogId,
-        name: row.name,
+        catalogId: data.catalogId,
+        name: data.name,
         communityId: getCommunityId()
       }
-      this.visible = true
     },
     handleClose() {
       this.formData = {
@@ -52,15 +52,22 @@ export default {
         name: '',
         communityId: ''
       }
+      this.loading = false
     },
-    async handleSubmit() {
+    async handleConfirm() {
       try {
-        await deleteReserveCatalog(this.formData)
+        this.loading = true
+        await deleteReserveCatalog({
+          catalogId: this.formData.catalogId,
+          communityId: this.formData.communityId
+        })
         this.$message.success(this.$t('reserveCatalogManage.delete.success'))
         this.visible = false
         this.$emit('success')
       } catch (error) {
-        this.$message.error(this.$t('reserveCatalogManage.delete.error'))
+        this.$message.error(error.message || this.$t('reserveCatalogManage.delete.error'))
+      } finally {
+        this.loading = false
       }
     }
   }
@@ -75,6 +82,6 @@ export default {
 .delete-name {
   font-weight: bold;
   color: #f56c6c;
-  margin: 10px 0;
+  margin-top: 10px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/scm/deleteReserveDining.vue b/src/components/scm/deleteReserveDining.vue
new file mode 100644
index 0000000..184646c
--- /dev/null
+++ b/src/components/scm/deleteReserveDining.vue
@@ -0,0 +1,69 @@
+<template>
+  <el-dialog
+    :title="$t('common.confirmOperation')"
+    :visible.sync="visible"
+    width="30%"
+    @close="closeDialog"
+  >
+    <div class="text-center">
+      <p>{{ $t('deleteReserveDining.confirmDelete') }}</p>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDialog">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="confirmDelete">{{ $t('common.confirmDelete') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { deleteReserveGoods } from '@/api/scm/doDiningApi'
+
+export default {
+  name: 'DeleteReserveDining',
+  data() {
+    return {
+      visible: false,
+      form: {
+        goodsId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.form = Object.assign({}, params)
+      this.form.communityId = getCommunityId()
+      this.visible = true
+    },
+    closeDialog() {
+      this.visible = false
+      this.form = {
+        goodsId: '',
+        communityId: ''
+      }
+    },
+    confirmDelete() {
+      deleteReserveGoods(this.form)
+        .then(response => {
+          if (response.code === 0) {
+            this.$message.success(this.$t('common.deleteSuccess'))
+            this.closeDialog()
+            this.$emit('success')
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/deleteReserveOrderPerson.vue b/src/components/scm/deleteReserveOrderPerson.vue
new file mode 100644
index 0000000..8be49cd
--- /dev/null
+++ b/src/components/scm/deleteReserveOrderPerson.vue
@@ -0,0 +1,57 @@
+<template>
+  <el-dialog
+    :title="$t('reserveOrder.cancelAppointment')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <el-form>
+      <el-form-item :label="$t('reserveOrder.confirmCancel')">
+        <span>{{ currentRow.orderId }}</span>
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="handleConfirm" :loading="loading">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { cancelReserveOrder } from '@/api/scm/reserveOrderApi'
+
+export default {
+  name: 'DeleteReserveOrderPerson',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      currentRow: {}
+    }
+  },
+  methods: {
+    open(row) {
+      this.currentRow = { ...row }
+      this.visible = true
+    },
+    handleClose() {
+      this.currentRow = {}
+    },
+    async handleConfirm() {
+      try {
+        this.loading = true
+        await cancelReserveOrder({ orderId: this.currentRow.orderId })
+        this.$message.success(this.$t('reserveOrder.cancelSuccess'))
+        this.$emit('success')
+        this.visible = false
+      } catch (error) {
+        this.$message.error(this.$t('reserveOrder.cancelError'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/deleteReserveParams.vue b/src/components/scm/deleteReserveParams.vue
new file mode 100644
index 0000000..68b0983
--- /dev/null
+++ b/src/components/scm/deleteReserveParams.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog
+    :title="$t('reserveParamsManage.deleteTitle')"
+    :visible.sync="visible"
+    width="500px"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <el-alert
+        type="warning"
+        :title="$t('reserveParamsManage.deleteConfirm')"
+        :description="$t('reserveParamsManage.deleteTip')"
+        show-icon
+        :closable="false"
+      />
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="danger" @click="handleConfirm" :loading="loading">
+        {{ $t('common.confirmDelete') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteReserveParams } from '@/api/scm/reserveParamsManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteReserveParams',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      currentRow: {
+        paramsId: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.visible = true
+      this.currentRow = {
+        paramsId: row.paramsId,
+        communityId: getCommunityId()
+      }
+    },
+    async handleConfirm() {
+      try {
+        this.loading = true
+        await deleteReserveParams(this.currentRow)
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleClose() {
+      this.currentRow = {
+        paramsId: '',
+        communityId: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  margin-bottom: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/editReserveCatalog.vue b/src/components/scm/editReserveCatalog.vue
index 5b2c98d..77e80a9 100644
--- a/src/components/scm/editReserveCatalog.vue
+++ b/src/components/scm/editReserveCatalog.vue
@@ -12,57 +12,57 @@
       label-width="120px"
     >
       <el-form-item
-        :label="$t('reserveCatalogManage.edit.name')"
+        :label="$t('reserveCatalogManage.form.name')"
         prop="name"
       >
         <el-input
           v-model="formData.name"
-          :placeholder="$t('reserveCatalogManage.edit.namePlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.namePlaceholder')"
         />
       </el-form-item>
       <el-form-item
-        :label="$t('reserveCatalogManage.edit.sort')"
+        :label="$t('reserveCatalogManage.form.sort')"
         prop="sort"
       >
         <el-input
           v-model="formData.sort"
-          :placeholder="$t('reserveCatalogManage.edit.sortPlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.sortPlaceholder')"
         />
       </el-form-item>
       <el-form-item
-        :label="$t('reserveCatalogManage.edit.type')"
+        :label="$t('reserveCatalogManage.form.type')"
         prop="type"
       >
         <el-select
           v-model="formData.type"
-          :placeholder="$t('reserveCatalogManage.edit.typePlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.typePlaceholder')"
           style="width:100%"
         >
           <el-option
-            :label="$t('reserveCatalogManage.edit.typeOption1')"
+            :label="$t('reserveCatalogManage.form.typeOptions.dining')"
             value="1001"
           />
           <el-option
-            :label="$t('reserveCatalogManage.edit.typeOption2')"
+            :label="$t('reserveCatalogManage.form.typeOptions.service')"
             value="2002"
           />
         </el-select>
       </el-form-item>
       <el-form-item
-        :label="$t('reserveCatalogManage.edit.state')"
+        :label="$t('reserveCatalogManage.form.state')"
         prop="state"
       >
         <el-select
           v-model="formData.state"
-          :placeholder="$t('reserveCatalogManage.edit.statePlaceholder')"
+          :placeholder="$t('reserveCatalogManage.form.statePlaceholder')"
           style="width:100%"
         >
           <el-option
-            :label="$t('reserveCatalogManage.edit.stateOption1')"
+            :label="$t('reserveCatalogManage.form.stateOptions.show')"
             value="1001"
           />
           <el-option
-            :label="$t('reserveCatalogManage.edit.stateOption2')"
+            :label="$t('reserveCatalogManage.form.stateOptions.hide')"
             value="2002"
           />
         </el-select>
@@ -118,15 +118,12 @@ export default {
     }
   },
   methods: {
-    open(row) {
+    open(data) {
+      this.visible = true
       this.formData = {
-        ...row,
+        ...data,
         communityId: getCommunityId()
       }
-      this.visible = true
-      this.$nextTick(() => {
-        this.$refs.form.clearValidate()
-      })
     },
     handleClose() {
       this.$refs.form.resetFields()
@@ -140,7 +137,7 @@ export default {
             this.visible = false
             this.$emit('success')
           } catch (error) {
-            this.$message.error(this.$t('reserveCatalogManage.edit.error'))
+            this.$message.error(error.message || this.$t('reserveCatalogManage.edit.error'))
           }
         }
       })
diff --git a/src/components/scm/editReserveParams.vue b/src/components/scm/editReserveParams.vue
new file mode 100644
index 0000000..b80851f
--- /dev/null
+++ b/src/components/scm/editReserveParams.vue
@@ -0,0 +1,222 @@
+<template>
+  <el-dialog
+    :title="$t('reserveParamsManage.editTitle')"
+    :visible.sync="visible"
+    width="70%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-form-item
+        :label="$t('reserveParamsManage.name')"
+        prop="name"
+      >
+        <el-input
+          v-model="formData.name"
+          :placeholder="$t('reserveParamsManage.namePlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.paramWay')"
+        prop="paramWay"
+      >
+        <el-select
+          v-model="formData.paramWay"
+          :placeholder="$t('reserveParamsManage.paramWayPlaceholder')"
+          style="width: 100%"
+          @change="handleParamWayChange"
+        >
+          <el-option
+            :label="$t('reserveParamsManage.day')"
+            value="1"
+          />
+          <el-option
+            :label="$t('reserveParamsManage.week')"
+            value="2"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        v-if="formData.paramWay === '1'"
+        :label="$t('reserveParamsManage.days')"
+        prop="days"
+      >
+        <el-checkbox-group v-model="formData.days">
+          <el-checkbox
+            v-for="day in 31"
+            :key="day"
+            :label="day"
+          >
+            {{ day }}{{ $t('reserveParamsManage.dayUnit') }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item
+        v-if="formData.paramWay === '2'"
+        :label="$t('reserveParamsManage.weekdays')"
+        prop="workdays"
+      >
+        <el-checkbox-group v-model="formData.workdays">
+          <el-checkbox
+            v-for="(weekday, index) in weekdays"
+            :key="index"
+            :label="index + 1"
+          >
+            {{ weekday }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.startTime')"
+        prop="startTime"
+      >
+        <el-time-picker
+          v-model="formData.startTime"
+          :placeholder="$t('reserveParamsManage.startTimePlaceholder')"
+          value-format="HH:mm:ss"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.maxQuantity')"
+        prop="maxQuantity"
+      >
+        <el-input-number
+          v-model="formData.maxQuantity"
+          :min="1"
+          :placeholder="$t('reserveParamsManage.maxQuantityPlaceholder')"
+          style="width: 100%"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('reserveParamsManage.hoursMaxQuantity')"
+        prop="hoursMaxQuantity"
+      >
+        <el-input-number
+          v-model="formData.hoursMaxQuantity"
+          :min="1"
+          :placeholder="$t('reserveParamsManage.hoursMaxQuantityPlaceholder')"
+          style="width: 100%"
+        />
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.cancel') }}
+      </el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateReserveParams } from '@/api/scm/reserveParamsManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditReserveParams',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        paramsId: '',
+        name: '',
+        paramWay: '',
+        days: [],
+        workdays: [],
+        startTime: '',
+        maxQuantity: '',
+        hoursMaxQuantity: '',
+        communityId: ''
+      },
+      weekdays: [
+        this.$t('common.monday'),
+        this.$t('common.tuesday'),
+        this.$t('common.wednesday'),
+        this.$t('common.thursday'),
+        this.$t('common.friday'),
+        this.$t('common.saturday'),
+        this.$t('common.sunday')
+      ],
+      rules: {
+        name: [
+          { required: true, message: this.$t('reserveParamsManage.nameRequired'), trigger: 'blur' }
+        ],
+        paramWay: [
+          { required: true, message: this.$t('reserveParamsManage.paramWayRequired'), trigger: 'change' }
+        ],
+        startTime: [
+          { required: true, message: this.$t('reserveParamsManage.startTimeRequired'), trigger: 'change' }
+        ],
+        maxQuantity: [
+          { required: true, message: this.$t('reserveParamsManage.maxQuantityRequired'), trigger: 'blur' }
+        ],
+        hoursMaxQuantity: [
+          { required: true, message: this.$t('reserveParamsManage.hoursMaxQuantityRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.visible = true
+      this.formData = {
+        ...row,
+        days: row.paramWay === '1' ? row.paramWayText.split(',').map(Number) : [],
+        workdays: row.paramWay === '2' ? row.paramWayText.split(',').map(Number) : [],
+        communityId: getCommunityId()
+      }
+    },
+    handleParamWayChange(val) {
+      if (val === '1') {
+        this.formData.days = this.formData.days.length 
+          ? this.formData.days 
+          : Array.from({ length: 31 }, (_, i) => i + 1)
+        this.formData.workdays = []
+      } else {
+        this.formData.workdays = this.formData.workdays.length 
+          ? this.formData.workdays 
+          : Array.from({ length: 7 }, (_, i) => i + 1)
+        this.formData.days = []
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            const params = {
+              ...this.formData,
+              paramWayText: this.formData.paramWay === '1' 
+                ? this.formData.days.join(',') 
+                : this.formData.workdays.join(',')
+            }
+            await updateReserveParams(params)
+            this.$message.success(this.$t('common.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('common.editFailed'))
+          }
+        }
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/editReserveParamsOpenTime.vue b/src/components/scm/editReserveParamsOpenTime.vue
new file mode 100644
index 0000000..ca015b2
--- /dev/null
+++ b/src/components/scm/editReserveParamsOpenTime.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+    :title="$t('reserveParamsManage.setTimeTitle')"
+    :visible.sync="visible"
+    width="80%"
+    @close="handleClose"
+  >
+    <el-row :gutter="20">
+      <el-col
+        v-for="(item, index) in formData.openTimes"
+        :key="index"
+        :span="6"
+        class="time-item"
+      >
+        <div class="time-wrapper">
+          <span class="time-label">{{ item.hours }}{{ $t('reserveParamsManage.hour') }}</span>
+          <el-select
+            v-model="item.isOpen"
+            :placeholder="$t('reserveParamsManage.selectStatus')"
+            @change="handleStatusChange(item)"
+          >
+            <el-option
+              :label="$t('reserveParamsManage.canReserve')"
+              value="Y"
+            />
+            <el-option
+              :label="$t('reserveParamsManage.cannotReserve')"
+              value="N"
+            />
+          </el-select>
+        </div>
+      </el-col>
+    </el-row>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">
+        {{ $t('common.close') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { updateReserveParamsOpenTime } from '@/api/scm/reserveParamsManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditReserveParamsOpenTime',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        openTimes: []
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.visible = true
+      this.formData.openTimes = row.openTimes.map(item => ({
+        ...item,
+        paramsId: row.paramsId,
+        communityId: getCommunityId()
+      }))
+    },
+    async handleStatusChange(item) {
+      try {
+        await updateReserveParamsOpenTime(item)
+        this.$message.success(this.$t('common.updateSuccess'))
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('common.updateFailed'))
+      }
+    },
+    handleClose() {
+      this.formData.openTimes = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.time-item {
+  margin-bottom: 20px;
+}
+
+.time-wrapper {
+  display: flex;
+  align-items: center;
+}
+
+.time-label {
+  width: 60px;
+  margin-right: 10px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/uploadImageUrl.vue b/src/components/scm/uploadImageUrl.vue
new file mode 100644
index 0000000..bb30101
--- /dev/null
+++ b/src/components/scm/uploadImageUrl.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="upload-image-container">
+    <div v-for="(image, index) in photos" :key="index" class="image-item">
+      <el-image
+        :src="image"
+        fit="cover"
+        style="width: 100px; height: 100px"
+        :preview-src-list="photos"
+      >
+        <div slot="error" class="image-slot">
+          <i class="el-icon-picture-outline"></i>
+        </div>
+      </el-image>
+      <i
+        class="el-icon-delete remove-icon"
+        @click="removeImage(image)"
+      ></i>
+    </div>
+    
+    <div
+      v-if="photos.length < imageCount"
+      class="upload-button"
+      @click="triggerUpload"
+    >
+      <i class="el-icon-plus"></i>
+    </div>
+    
+    <input
+      type="file"
+      ref="fileInput"
+      accept="image/*"
+      hidden
+      @change="handleFileChange"
+    />
+  </div>
+</template>
+
+<script>
+import { uploadFile } from '@/api/scm/editReserveServiceApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'UploadImageUrl',
+  props: {
+    imageCount: {
+      type: Number,
+      default: 1
+    }
+  },
+  data() {
+    return {
+      photos: [], // 用于显示的图片数组(base64)
+      photosUrl: [], // 用于传递给父组件的图片数组({fileId, url})
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    notifyPhotos(photos) {
+      this.photos = []
+      this.photosUrl = []
+      
+      photos.forEach(photo => {
+        if (photo.indexOf('base64,') > -1) {
+          this.photos.push(photo)
+          return
+        }
+        
+        if (photo.indexOf('http') > -1) {
+          this.photos.push(photo)
+          this.photosUrl.push({ url: photo })
+          return
+        }
+        
+        const url = `/callComponent/download/getFile/file?fileId=${photo}&communityId=-1`
+        this.photos.push(url)
+        this.photosUrl.push({ fileId: photo, url })
+      })
+    },
+    triggerUpload() {
+      this.$refs.fileInput.click()
+    },
+    async handleFileChange(event) {
+      const files = event.target.files
+      if (!files || files.length === 0) return
+      
+      const file = files[0]
+      if (file.size > 2 * 1024 * 1024) {
+        this.$message.error(this.$t('uploadImage.sizeLimit'))
+        return
+      }
+      
+      // 预览图片
+      const reader = new FileReader()
+      reader.onload = (e) => {
+        this.photos.push(e.target.result)
+        this.$emit('notify-upload-cover-image', this.photosUrl)
+      }
+      reader.readAsDataURL(file)
+      
+      // 上传图片
+      try {
+        const formData = new FormData()
+        formData.append('uploadFile', file)
+        formData.append('communityId', this.communityId)
+        
+        const { data } = await uploadFile(formData)
+        this.photosUrl.push(data)
+        this.$emit('notify-upload-cover-image', this.photosUrl)
+      } catch (error) {
+        console.error('上传失败:', error)
+        this.$message.error(this.$t('uploadImage.uploadError'))
+      } finally {
+        event.target.value = null
+      }
+    },
+    removeImage(image) {
+      const index = this.photos.indexOf(image)
+      if (index > -1) {
+        this.photos.splice(index, 1)
+        this.photosUrl.splice(index, 1)
+        this.$emit('notify-upload-cover-image', this.photosUrl)
+      }
+    },
+    clearImages() {
+      this.photos = []
+      this.photosUrl = []
+      this.$emit('notify-upload-cover-image', this.photosUrl)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-image-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  
+  .image-item {
+    position: relative;
+    width: 100px;
+    height: 100px;
+    
+    .remove-icon {
+      position: absolute;
+      top: -10px;
+      right: -10px;
+      color: #f56c6c;
+      font-size: 18px;
+      cursor: pointer;
+      background: white;
+      border-radius: 50%;
+      z-index: 1;
+      
+      &:hover {
+        color: #f78989;
+      }
+    }
+  }
+  
+  .upload-button {
+    width: 100px;
+    height: 100px;
+    border: 1px dashed #dcdfe6;
+    border-radius: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    color: #909399;
+    font-size: 24px;
+    
+    &:hover {
+      border-color: #409eff;
+      color: #409eff;
+    }
+  }
+  
+  .image-slot {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    background: #f5f7fa;
+    color: #909399;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/scmI18n.js b/src/i18n/scmI18n.js
index 33d5343..42fd018 100644
--- a/src/i18n/scmI18n.js
+++ b/src/i18n/scmI18n.js
@@ -10,6 +10,17 @@ import { messages as integralGiftDetailManageMessages } from '../views/scm/integ
 import { messages as communityIntegralMessages } from '../views/scm/communityIntegralLang'
 import { messages as goldMessages } from '../views/scm/goldLang'
 import { messages as reserveCatalogManageMessages } from '../views/scm/reserveCatalogManageLang'
+import { messages as reserveParamsManageMessages } from '../views/scm/reserveParamsManageLang'
+import { messages as reserveDiningManageMessages } from '../views/scm/reserveDiningManageLang'
+import { messages as reserveServiceManageMessages } from '../views/scm/reserveServiceManageLang'
+import { messages as addReserveDiningMessages } from '../views/scm/addReserveDiningLang'
+import { messages as editReserveDiningMessages } from '../views/scm/editReserveDiningLang'
+import { messages as doDiningMessages } from '../views/scm/doDiningLang'
+import { messages as addReserveServiceMessages } from '../views/scm/addReserveServiceLang'
+import { messages as ownerDiningMessages } from '../views/scm/ownerDiningLang'
+import { messages as editReserveServiceMessages } from '../views/scm/editReserveServiceLang'
+import { messages as reserveOrderMessages } from '../views/scm/reserveOrderLang'
+import { messages as reserveConfirmMessages } from '../views/scm/reserveConfirmLang'
 
 export const messages = {
     en: {
@@ -26,6 +37,17 @@ export const messages = {
         ...communityIntegralMessages.en,
         ...goldMessages.en,
         ...reserveCatalogManageMessages.en,
+        ...reserveParamsManageMessages.en,
+        ...reserveDiningManageMessages.en,
+        ...reserveServiceManageMessages.en,
+        ...addReserveDiningMessages.en,
+        ...editReserveDiningMessages.en,
+        ...doDiningMessages.en,
+        ...addReserveServiceMessages.en,
+        ...ownerDiningMessages.en,
+        ...editReserveServiceMessages.en,
+        ...reserveOrderMessages.en,
+        ...reserveConfirmMessages.en,
     },  
     zh: {
         ...couponMarketMessages.zh,
@@ -40,5 +62,16 @@ export const messages = {
         ...communityIntegralMessages.zh,
         ...goldMessages.zh,
         ...reserveCatalogManageMessages.zh,
+        ...reserveParamsManageMessages.zh,
+        ...reserveDiningManageMessages.zh,
+        ...reserveServiceManageMessages.zh,
+        ...addReserveDiningMessages.zh,
+        ...editReserveDiningMessages.zh,
+        ...doDiningMessages.zh,
+        ...addReserveServiceMessages.zh,
+        ...ownerDiningMessages.zh,
+        ...editReserveServiceMessages.zh,
+        ...reserveOrderMessages.zh,
+        ...reserveConfirmMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/scmRouter.js b/src/router/scmRouter.js
index ac42740..49716a3 100644
--- a/src/router/scmRouter.js
+++ b/src/router/scmRouter.js
@@ -59,4 +59,64 @@ export default [
         name: '/pages/reserve/reserveCatalogManage',
         component: () => import('@/views/scm/reserveCatalogManageList.vue')
     },
+    {
+        path: '/pages/reserve/reserveParamsManage',
+        name: '/pages/reserve/reserveParamsManage',
+        component: () => import('@/views/scm/reserveParamsManageList.vue')
+    },
+    {
+        path: '/pages/reserve/reserveDiningManage',
+        name: '/pages/reserve/reserveDiningManage',
+        component: () => import('@/views/scm/reserveDiningManageList.vue')
+    },
+    {
+        path: '/pages/reserve/reserveServiceManage',
+        name: '/pages/reserve/reserveServiceManage',
+        component: () => import('@/views/scm/reserveServiceManageList.vue')
+    },
+    {
+        path: '/views/scm/addReserveDining',
+        name: '/views/scm/addReserveDining',
+        component: () => import('@/views/scm/addReserveDiningList.vue')
+    },
+    {
+        path: '/views/scm/editReserveDining',
+        name: '/views/scm/editReserveDining',
+        component: () => import('@/views/scm/editReserveDiningList.vue')
+    },
+    {
+        path: '/views/scm/doDining',
+        name: '/views/scm/doDining',
+        component: () => import('@/views/scm/doDiningList.vue')
+    },
+    {
+        path: '/views/scm/addReserveService',
+        name: '/views/scm/addReserveService',
+        component: () => import('@/views/scm/addReserveServiceList.vue')
+    },
+    {
+        path: '/views/scm/ownerDining',
+        name: '/views/scm/ownerDining',
+        component: () => import('@/views/scm/ownerDiningList.vue')
+    },
+    {
+        path: '/views/scm/reserveCatalogManage',
+        name: '/views/scm/reserveCatalogManage',
+        component: () => import('@/views/scm/reserveCatalogManageList.vue')
+    },
+    {
+        path: '/views/scm/editReserveService',
+        name: '/views/scm/editReserveService',
+        component: () => import('@/views/scm/editReserveServiceList.vue')
+    },
+    {
+        path: '/pages/reserve/reserveOrder',
+        name: '/pages/reserve/reserveOrder',
+        component: () => import('@/views/scm/reserveOrderList.vue')
+    },
+    {
+        path:'/pages/reserve/reserveConfirm',
+        name:'/pages/reserve/reserveConfirm',
+        component: () => import('@/views/scm/reserveConfirmList.vue')
+        },
 ]
\ No newline at end of file
diff --git a/src/views/scm/addReserveDiningLang.js b/src/views/scm/addReserveDiningLang.js
new file mode 100644
index 0000000..2a2dd18
--- /dev/null
+++ b/src/views/scm/addReserveDiningLang.js
@@ -0,0 +1,62 @@
+export const messages = {
+  en: {
+    addReserveDining: {
+      title: 'Add Dining Product',
+      goodsName: 'Name',
+      goodsNamePlaceholder: 'Required, please enter name',
+      paramsId: 'Parameter',
+      paramsIdPlaceholder: 'Required, please select parameter',
+      price: 'Price',
+      pricePlaceholder: 'Required, please enter price',
+      sort: 'Sort',
+      sortPlaceholder: 'Required, please enter sort',
+      startDate: 'Start Date',
+      startDatePlaceholder: 'Required, please select start date',
+      endDate: 'End Date',
+      endDatePlaceholder: 'Required, please select end date',
+      imgUrl: 'Product Cover',
+      state: 'Status',
+      statePlaceholder: 'Required, please select status',
+      stateOff: 'Off Shelf',
+      stateOn: 'On Shelf',
+      goodsDesc: 'Product Description',
+      goodsDescPlaceholder: 'Required, please enter product description',
+      content: 'Product Details',
+      contentPlaceholder: 'Required, please enter product details'
+    },
+    uploadImage: {
+      fileSizeLimit: 'Image size cannot exceed 2MB',
+      uploadFailed: 'Image upload failed'
+    }
+  },
+  zh: {
+    addReserveDining: {
+      title: '添加就餐商品',
+      goodsName: '名称',
+      goodsNamePlaceholder: '必填，请填写名称',
+      paramsId: '参数',
+      paramsIdPlaceholder: '必填，请选择参数',
+      price: '单价',
+      pricePlaceholder: '必填，请填写单价',
+      sort: '排序',
+      sortPlaceholder: '必填，请填写排序',
+      startDate: '开始时间',
+      startDatePlaceholder: '必填，请填写开始时间',
+      endDate: '结束时间',
+      endDatePlaceholder: '必填，请填写结束时间',
+      imgUrl: '产品封面',
+      state: '状态',
+      statePlaceholder: '必填，请选择状态',
+      stateOff: '未上架',
+      stateOn: '上架',
+      goodsDesc: '商品简介',
+      goodsDescPlaceholder: '必填，请填写商品简介',
+      content: '商品详情',
+      contentPlaceholder: '必填，请输入商品描述'
+    },
+    uploadImage: {
+      fileSizeLimit: '图片大小不能超过2MB',
+      uploadFailed: '图片上传失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/addReserveDiningList.vue b/src/views/scm/addReserveDiningList.vue
new file mode 100644
index 0000000..f3ca8e3
--- /dev/null
+++ b/src/views/scm/addReserveDiningList.vue
@@ -0,0 +1,205 @@
+<template>
+  <div class="add-reserve-dining-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('addReserveDining.title') }}</span>
+      </div>
+      <el-form ref="form" :model="addReserveDiningInfo" label-width="120px" label-position="right">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.goodsName')" prop="goodsName">
+              <el-input v-model="addReserveDiningInfo.goodsName"
+                :placeholder="$t('addReserveDining.goodsNamePlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.paramsId')" prop="paramsId">
+              <el-select v-model="addReserveDiningInfo.paramsId"
+                :placeholder="$t('addReserveDining.paramsIdPlaceholder')" style="width:100%">
+                <el-option v-for="(item, index) in addReserveDiningInfo.reserveParamss" :key="index" :label="item.name"
+                  :value="item.paramsId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.price')" prop="price">
+              <el-input v-model="addReserveDiningInfo.price" :placeholder="$t('addReserveDining.pricePlaceholder')" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.sort')" prop="sort">
+              <el-input v-model="addReserveDiningInfo.sort" :placeholder="$t('addReserveDining.sortPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.startDate')" prop="startDate">
+              <el-date-picker v-model="addReserveDiningInfo.startDate" type="date" value-format="yyyy-MM-dd"
+                :placeholder="$t('addReserveDining.startDatePlaceholder')" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.endDate')" prop="endDate">
+              <el-date-picker v-model="addReserveDiningInfo.endDate" type="date" value-format="yyyy-MM-dd"
+                :placeholder="$t('addReserveDining.endDatePlaceholder')" style="width:100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.imgUrl')" prop="imgUrl">
+
+                <upload-image-url ref="uploadImage" :limit="1" @notifyUploadCoverImage="handleImageChange" />
+
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveDining.state')" prop="state">
+              <el-select v-model="addReserveDiningInfo.state" :placeholder="$t('addReserveDining.statePlaceholder')"
+                style="width:100%">
+                <el-option :label="$t('addReserveDining.stateOff')" value="1001" />
+                <el-option :label="$t('addReserveDining.stateOn')" value="2002" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addReserveDining.goodsDesc')" prop="goodsDesc">
+              <el-input v-model="addReserveDiningInfo.goodsDesc" type="textarea" :rows="3"
+                :placeholder="$t('addReserveDining.goodsDescPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addReserveDining.content')">
+              <div class="editor-wrapper">
+                <rich-text-editor ref="richTextEditor" v-model="addReserveDiningInfo.content" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24" class="text-right">
+            <el-button type="warning" @click="goBack">
+              {{ $t('common.cancel') }}
+            </el-button>
+            <el-button type="primary" @click="saveReserveDiningInfo">
+              {{ $t('common.save') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import { saveReserveGoods, listReserveParams } from '@/api/scm/addReserveDiningApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import RichTextEditor from "@/components/editor/RichTextEditor";
+
+export default {
+  name: 'AddReserveDining',
+  components: {
+    UploadImageUrl,
+    RichTextEditor
+  },
+  data() {
+    return {
+      addReserveDiningInfo: {
+        goodsId: '',
+        goodsName: '',
+        goodsDesc: '',
+        type: '1001',
+        paramsId: '',
+        price: '',
+        sort: '',
+        state: '',
+        startDate: '',
+        endDate: '',
+        imgUrl: '',
+        catalogId: '',
+        content: '',
+        reserveParamss: []
+      }
+    }
+  },
+  created() {
+    this.addReserveDiningInfo.catalogId = this.$route.query.catalogId
+    this.listReserveParamss()
+    this.initGoodsContent()
+  },
+  methods: {
+    goBack() {
+      this.$router.go(-1)
+    },
+    handleImageChange(images) {
+      this.addReserveDiningInfo.imgUrl = images.length > 0 ? images[0] : ''
+    },
+    async saveReserveDiningInfo() {
+      try {
+        if (!this.validateForm()) {
+          return
+        }
+
+        this.addReserveDiningInfo.communityId = getCommunityId()
+        const response = await saveReserveGoods(this.addReserveDiningInfo)
+
+        if (response.code === 0) {
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.goBack()
+        } else {
+          this.$message.error(response.msg)
+        }
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(this.$t('common.saveFailed'))
+      }
+    },
+    validateForm() {
+      // 这里应该添加表单验证逻辑
+      return true
+    },
+    async listReserveParamss() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: getCommunityId()
+        }
+        const response = await listReserveParams(params)
+        this.addReserveDiningInfo.reserveParamss = response.data
+      } catch (error) {
+        console.error('获取参数列表失败:', error)
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-reserve-dining-container {
+  padding: 20px;
+
+  .editor-wrapper {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/addReserveServiceLang.js b/src/views/scm/addReserveServiceLang.js
new file mode 100644
index 0000000..7294d14
--- /dev/null
+++ b/src/views/scm/addReserveServiceLang.js
@@ -0,0 +1,82 @@
+export const messages = {
+  en: {
+    addReserveService: {
+      title: 'Add Service',
+      name: 'Name',
+      namePlaceholder: 'Required, please enter name',
+      params: 'Parameters',
+      paramsPlaceholder: 'Required, please select parameters',
+      price: 'Service Fee',
+      pricePlaceholder: 'Required, please enter service fee',
+      sort: 'Sort',
+      sortPlaceholder: 'Required, please enter sort order',
+      startDate: 'Start Date',
+      startDatePlaceholder: 'Required, please select start date',
+      endDate: 'End Date',
+      endDatePlaceholder: 'Required, please select end date',
+      coverImage: 'Service Cover',
+      state: 'Status',
+      statePlaceholder: 'Required, please select status',
+      stateOff: 'Off Shelf',
+      stateOn: 'On Shelf',
+      goodsDesc: 'Service Description',
+      goodsDescPlaceholder: 'Required, please enter service description',
+      content: 'Service Details',
+      saveSuccess: 'Service saved successfully',
+      saveFailed: 'Failed to save service',
+      nameRequired: 'Name is required',
+      paramsRequired: 'Parameters is required',
+      priceRequired: 'Service fee is required',
+      sortRequired: 'Sort order is required',
+      startDateRequired: 'Start date is required',
+      endDateRequired: 'End date is required',
+      coverImageRequired: 'Service cover is required',
+      stateRequired: 'Status is required',
+      goodsDescRequired: 'Service description is required'
+    },
+    uploadImage: {
+      fileSizeLimit: 'Image size cannot exceed 2MB',
+      uploadFailed: 'Image upload failed'
+    }
+  },
+  zh: {
+    addReserveService: {
+      title: '添加服务',
+      name: '名称',
+      namePlaceholder: '必填，请填写名称',
+      params: '参数',
+      paramsPlaceholder: '必填，请选择参数',
+      price: '上门费',
+      pricePlaceholder: '必填，请填写上门费',
+      sort: '排序',
+      sortPlaceholder: '必填，请填写排序',
+      startDate: '开始时间',
+      startDatePlaceholder: '必填，请填写开始时间',
+      endDate: '结束时间',
+      endDatePlaceholder: '必填，请填写结束时间',
+      coverImage: '服务封面',
+      state: '状态',
+      statePlaceholder: '必填，请选择状态',
+      stateOff: '未上架',
+      stateOn: '上架',
+      goodsDesc: '商品简介',
+      goodsDescPlaceholder: '必填，请填写商品简介',
+      content: '商品详情',
+      saveSuccess: '服务保存成功',
+      saveFailed: '服务保存失败',
+      nameRequired: '名称不能为空',
+      paramsRequired: '参数不能为空',
+      priceRequired: '上门费不能为空',
+      sortRequired: '排序不能为空',
+      startDateRequired: '开始时间不能为空',
+      endDateRequired: '结束时间不能为空',
+      coverImageRequired: '服务封面不能为空',
+      stateRequired: '状态不能为空',
+      goodsDescRequired: '商品简介不能为空'
+    },
+    uploadImage: {
+      fileSizeLimit: '图片大小不能超过2MB',
+      uploadFailed: '图片上传失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/addReserveServiceList.vue b/src/views/scm/addReserveServiceList.vue
new file mode 100644
index 0000000..eb6c75e
--- /dev/null
+++ b/src/views/scm/addReserveServiceList.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="add-reserve-service-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('addReserveService.title') }}</span>
+      </div>
+      <el-form ref="form" :model="addReserveServiceInfo" label-width="120px" label-position="right">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.name')" prop="goodsName">
+              <el-input v-model="addReserveServiceInfo.goodsName" :placeholder="$t('addReserveService.namePlaceholder')"
+                clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.params')" prop="paramsId">
+              <el-select v-model="addReserveServiceInfo.paramsId"
+                :placeholder="$t('addReserveService.paramsPlaceholder')" style="width:100%">
+                <el-option v-for="(item, index) in addReserveServiceInfo.reserveParamss" :key="index" :label="item.name"
+                  :value="item.paramsId" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.price')" prop="price">
+              <el-input v-model="addReserveServiceInfo.price" :placeholder="$t('addReserveService.pricePlaceholder')"
+                clearable />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.sort')" prop="sort">
+              <el-input v-model="addReserveServiceInfo.sort" :placeholder="$t('addReserveService.sortPlaceholder')"
+                clearable />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.startDate')" prop="startDate">
+              <el-date-picker v-model="addReserveServiceInfo.startDate" type="date" value-format="yyyy-MM-dd"
+                :placeholder="$t('addReserveService.startDatePlaceholder')" style="width:100%" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.endDate')" prop="endDate">
+              <el-date-picker v-model="addReserveServiceInfo.endDate" type="date" value-format="yyyy-MM-dd"
+                :placeholder="$t('addReserveService.endDatePlaceholder')" style="width:100%" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.coverImage')" prop="imgUrl">
+              <upload-image-url ref="uploadImage" :limit="1" @notifyUploadCoverImage="handleImageChange" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('addReserveService.state')" prop="state">
+              <el-select v-model="addReserveServiceInfo.state" :placeholder="$t('addReserveService.statePlaceholder')"
+                style="width:100%">
+                <el-option :label="$t('addReserveService.stateOff')" value="1001" />
+                <el-option :label="$t('addReserveService.stateOn')" value="2002" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addReserveService.goodsDesc')" prop="goodsDesc">
+              <el-input v-model="addReserveServiceInfo.goodsDesc" type="textarea" :rows="3"
+                :placeholder="$t('addReserveService.goodsDescPlaceholder')" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24">
+            <el-form-item :label="$t('addReserveService.content')">
+              <div class="editor-wrapper">
+                <rich-text-editor ref="richTextEditor" v-model="addReserveServiceInfo.content" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row>
+          <el-col :span="24" class="text-right">
+            <el-button type="warning" @click="handleCancel">
+              {{ $t('common.cancel') }}
+            </el-button>
+            <el-button type="primary" @click="handleSubmit">
+              {{ $t('common.save') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { saveReserveGoods, listReserveParams } from '@/api/scm/addReserveServiceApi'
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import RichTextEditor from "@/components/editor/RichTextEditor";
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddReserveService',
+  components: {
+    UploadImageUrl,
+    RichTextEditor
+  },
+  data() {
+    return {
+      addReserveServiceInfo: {
+        goodsId: '',
+        goodsName: '',
+        goodsDesc: '',
+        type: '2002',
+        paramsId: '',
+        price: '',
+        sort: '',
+        state: '',
+        startDate: '',
+        endDate: '',
+        imgUrl: '',
+        catalogId: '',
+        content: '',
+        reserveParamss: [],
+        communityId: getCommunityId()
+      }
+    }
+  },
+  created() {
+    this.addReserveServiceInfo.catalogId = this.$route.query.catalogId
+    this.loadReserveParams()
+  },
+  methods: {
+    async loadReserveParams() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.addReserveServiceInfo.communityId
+        }
+        const { data } = await listReserveParams(params)
+        this.addReserveServiceInfo.reserveParamss = data
+      } catch (error) {
+        console.error('Failed to load reserve params:', error)
+        this.$message.error(this.$t('addReserveService.loadParamsFailed'))
+      }
+    },
+    handleImageChange(images) {
+      this.addReserveServiceInfo.imgUrl = images.length > 0 ? images[0] : ''
+    },
+    validateForm() {
+      const requiredFields = [
+        'goodsName',
+        'paramsId',
+        'price',
+        'sort',
+        'startDate',
+        'endDate',
+        'imgUrl',
+        'state',
+        'goodsDesc',
+        'content'
+      ]
+
+      for (const field of requiredFields) {
+        if (!this.addReserveServiceInfo[field]) {
+          this.$message.error(this.$t(`addReserveService.${field}Required`))
+          return false
+        }
+      }
+
+      return true
+    },
+    async handleSubmit() {
+      if (!this.validateForm()) return
+
+      try {
+        const response = await saveReserveGoods(this.addReserveServiceInfo)
+        if (response.code === 0) {
+          this.$message.success(this.$t('addReserveService.saveSuccess'))
+          this.$router.go(-1)
+        } else {
+          this.$message.error(response.msg)
+        }
+      } catch (error) {
+        console.error('Failed to save reserve service:', error)
+        this.$message.error(this.$t('addReserveService.saveFailed'))
+      }
+    },
+    handleCancel() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.add-reserve-service-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .editor-wrapper {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/doDiningLang.js b/src/views/scm/doDiningLang.js
new file mode 100644
index 0000000..0dce3e7
--- /dev/null
+++ b/src/views/scm/doDiningLang.js
@@ -0,0 +1,98 @@
+export const messages = {
+  en: {
+    doDining: {
+      selectGoods: 'Select Goods',
+      scanQrCode: 'Please scan QR code',
+      dining: 'Dining',
+      diningRecords: 'Dining Records',
+      selectStartTime: 'Select start time',
+      selectEndTime: 'Select end time',
+      enterOwnerName: 'Enter owner name',
+      enterDinerName: 'Enter diner name',
+      diningTime: 'Dining Time',
+      goods: 'Goods',
+      owner: 'Owner',
+      diner: 'Diner',
+      dinerPhone: 'Diner Phone',
+      orderNo: 'Order No',
+      remark: 'Remark'
+    },
+    addReserveDiningPerson: {
+      reserveDining: 'Reserve Dining',
+      personName: 'Person Name',
+      personNamePlaceholder: 'Required, please enter person name',
+      personTel: 'Person Tel',
+      personTelPlaceholder: 'Required, please enter person tel',
+      payWay: 'Pay Way',
+      payWayPlaceholder: 'Please select pay way',
+      cash: 'Cash',
+      wechat: 'WeChat',
+      alipay: 'Alipay',
+      quantity: 'Quantity',
+      quantityPlaceholder: 'Please select quantity',
+      unit: 'unit',
+      receivableAmount: 'Receivable Amount',
+      receivableAmountPlaceholder: 'Required, please enter receivable amount',
+      receivedAmount: 'Received Amount',
+      receivedAmountPlaceholder: 'Required, please enter received amount',
+      appointmentTime: 'Appointment Time',
+      appointmentTimePlaceholder: 'Required, please select appointment time',
+      openTime: 'Open Time',
+      openTimePlaceholder: 'Please select open time',
+      hour: 'hour',
+      remark: 'Remark',
+      remarkPlaceholder: 'Required, please enter remark'
+    },
+    deleteReserveDining: {
+      confirmDelete: 'Confirm to delete reserve dining?'
+    }
+  },
+  zh: {
+    doDining: {
+      selectGoods: '选择商品',
+      scanQrCode: '请用扫码枪扫二维码',
+      dining: '就餐',
+      diningRecords: '就餐记录',
+      selectStartTime: '请选择开始时间',
+      selectEndTime: '请选择结束时间',
+      enterOwnerName: '请输入业主名称',
+      enterDinerName: '请输入就餐人',
+      diningTime: '就餐时间',
+      goods: '商品',
+      owner: '业主',
+      diner: '就餐人',
+      dinerPhone: '就餐电话',
+      orderNo: '订单编号',
+      remark: '备注'
+    },
+    addReserveDiningPerson: {
+      reserveDining: '预约就餐',
+      personName: '预约人',
+      personNamePlaceholder: '必填，请填写预约人',
+      personTel: '预约电话',
+      personTelPlaceholder: '必填，请填写预约电话',
+      payWay: '支付方式',
+      payWayPlaceholder: '请选择支付方式',
+      cash: '现金',
+      wechat: '微信',
+      alipay: '支付宝',
+      quantity: '预约数量',
+      quantityPlaceholder: '请选择预约数量',
+      unit: '个',
+      receivableAmount: '应收金额',
+      receivableAmountPlaceholder: '必填，请填写应收金额',
+      receivedAmount: '实收金额',
+      receivedAmountPlaceholder: '必填，请填写实收金额',
+      appointmentTime: '预约日期',
+      appointmentTimePlaceholder: '必填，请选择预约日期',
+      openTime: '预约时间',
+      openTimePlaceholder: '请选择预约时间',
+      hour: '时',
+      remark: '备注',
+      remarkPlaceholder: '必填，请填写备注'
+    },
+    deleteReserveDining: {
+      confirmDelete: '确定删除预约就餐?'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/doDiningList.vue b/src/views/scm/doDiningList.vue
new file mode 100644
index 0000000..8efcbb7
--- /dev/null
+++ b/src/views/scm/doDiningList.vue
@@ -0,0 +1,355 @@
+<template>
+  <div class="do-dining-container">
+    <el-row :gutter="20">
+      <el-col :span="4" class="bg-white">
+        <div class="margin-sm">{{ $t('doDining.selectGoods') }}</div>
+        <div class="flex justify-start flex-wrap">
+          <div v-for="reserveDining in doDiningInfo.reserveDinings" :key="reserveDining.goodsId" class="margin-right-xs margin-bottom-xs">
+            <div 
+              class="vc-border border-radius padding-xs cursor-pointer"
+              :class="{'vc-reserve-active': doDiningInfo.goodsId == reserveDining.goodsId}"
+              @click="_chooseDining(reserveDining)"
+            >
+              <div>
+                <el-image 
+                  style="width: 60px; height: 60px; border-radius: 5px;"
+                  :src="reserveDining.imgUrl || '/img/noPhoto.jpg'"
+                  fit="cover"
+                ></el-image>
+              </div>
+              <div class="text-center margin-top-xs">
+                {{ reserveDining.goodsName }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <el-row :gutter="20">
+          <el-col :span="6"></el-col>
+          <el-col :span="12">
+            <el-input 
+              v-model="doDiningInfo.qrCode" 
+              :placeholder="$t('doDining.scanQrCode')"
+              @keyup.enter.native="_doDining()"
+              id="qrCode"
+            ></el-input>
+          </el-col>
+          <el-col :span="6">
+            <el-button type="primary" @click="_doDining()" style="width:100%">
+              {{ $t('doDining.dining') }}
+            </el-button>
+          </el-col>
+        </el-row>
+
+        <el-row class="margin-top">
+          <el-col :span="24">
+            <el-card>
+              <div slot="header" class="clearfix">
+                <span>{{ $t('doDining.diningRecords') }}</span>
+              </div>
+              <el-row :gutter="20">
+                <el-col :span="4">
+                  <el-date-picker
+                    v-model="doDiningInfo.conditions.startDate"
+                    type="datetime"
+                    :placeholder="$t('doDining.selectStartTime')"
+                    style="width:100%"
+                  ></el-date-picker>
+                </el-col>
+                <el-col :span="4">
+                  <el-date-picker
+                    v-model="doDiningInfo.conditions.endDate"
+                    type="datetime"
+                    :placeholder="$t('doDining.selectEndTime')"
+                    style="width:100%"
+                  ></el-date-picker>
+                </el-col>
+                <el-col :span="4">
+                  <el-input
+                    v-model="doDiningInfo.conditions.nameLike"
+                    :placeholder="$t('doDining.enterOwnerName')"
+                  ></el-input>
+                </el-col>
+                <el-col :span="4">
+                  <el-input
+                    v-model="doDiningInfo.conditions.dinerName"
+                    :placeholder="$t('doDining.enterDinerName')"
+                  ></el-input>
+                </el-col>
+                <el-col :span="4">
+                  <el-button type="primary" @click="_queryData()">
+                    <i class="el-icon-search"></i>
+                    {{ $t('common.search') }}
+                  </el-button>
+                  <el-button @click="_exportExcel()">
+                    <i class="el-icon-download"></i>
+                    {{ $t('common.export') }}
+                  </el-button>
+                </el-col>
+              </el-row>
+
+              <el-table
+                :data="doDiningInfo.orders"
+                style="width: 100%"
+                border
+                class="margin-top"
+              >
+                <el-table-column
+                  prop="createTime"
+                  :label="$t('doDining.diningTime')"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="goodsName"
+                  :label="$t('doDining.goods')"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="ownerName"
+                  :label="$t('doDining.owner')"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="personName"
+                  :label="$t('doDining.diner')"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="personTel"
+                  :label="$t('doDining.dinerPhone')"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="orderId"
+                  :label="$t('doDining.orderNo')"
+                  align="center"
+                ></el-table-column>
+                <el-table-column
+                  prop="remark"
+                  :label="$t('doDining.remark')"
+                  align="center"
+                ></el-table-column>
+              </el-table>
+
+              <el-pagination
+                :current-page.sync="page.current"
+                :page-sizes="[10, 20, 30, 50]"
+                :page-size="page.size"
+                :total="page.total"
+                layout="total, sizes, prev, pager, next, jumper"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                class="margin-top"
+              ></el-pagination>
+            </el-card>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+    <add-reserve-dining-person ref="addReserveDiningPerson"></add-reserve-dining-person>
+    <delete-reserve-dining ref="deleteReserveDining"></delete-reserve-dining>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { 
+  listReserveGoods,
+  queryOwnerDining,
+  exportData,
+  doDining
+} from '@/api/scm/doDiningApi'
+import AddReserveDiningPerson from '@/components/scm/addReserveDiningPerson'
+import DeleteReserveDining from '@/components/scm/deleteReserveDining'
+
+export default {
+  name: 'DoDiningList',
+  components: {
+    AddReserveDiningPerson,
+    DeleteReserveDining
+  },
+  data() {
+    return {
+      communityId: '',
+      doDiningInfo: {
+        reserveDinings: [],
+        orders: [],
+        total: 0,
+        records: 1,
+        goodsId: '',
+        moreCondition: false,
+        qrCode: '',
+        conditions: {
+          goodsName: '',
+          startDate: '',
+          endDate: '',
+          ownerName: '',
+          dinerName: '',
+          communityId: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      focusInterval: null
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.doDiningInfo.conditions.communityId = this.communityId
+    this._listReserveDinings(1, 200)
+    this._listReserveConfirms(this.page.current, this.page.size)
+  },
+  mounted() {
+    document.getElementById("qrCode").focus()
+    this.focusInterval = setInterval(() => {
+      document.getElementById("qrCode").focus()
+    }, 5000)
+  },
+  beforeDestroy() {
+    if (this.focusInterval) {
+      clearInterval(this.focusInterval)
+    }
+  },
+  methods: {
+    _listReserveDinings(_page, _rows) {
+      const params = {
+        page: _page,
+        row: _rows,
+        communityId: this.communityId
+      }
+      listReserveGoods(params)
+        .then(response => {
+          this.doDiningInfo.reserveDinings = response.data
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    _chooseDining(_dining) {
+      this.doDiningInfo.goodsId = _dining.goodsId
+      document.getElementById("qrCode").focus()
+    },
+    _doDining() {
+      const data = {
+        communityId: this.communityId,
+        goodsId: this.doDiningInfo.goodsId,
+        qrCode: this.doDiningInfo.qrCode
+      }
+
+      doDining(data)
+        .then(response => {
+          this.doDiningInfo.qrCode = ''
+          if (response.code !== 0) {
+            this.$message.error(response.msg)
+            return
+          }
+          this._listReserveConfirms(this.page.current, this.page.size)
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+          this.doDiningInfo.qrCode = ''
+        })
+    },
+    _listReserveConfirms(_page, _rows) {
+      const params = {
+        page: _page,
+        row: _rows,
+        ...this.doDiningInfo.conditions
+      }
+      queryOwnerDining(params)
+        .then(response => {
+          this.doDiningInfo.total = response.total
+          this.doDiningInfo.records = response.records
+          this.doDiningInfo.orders = response.data
+          this.page.total = response.records
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    _queryData() {
+      this.page.current = 1
+      this._listReserveConfirms(this.page.current, this.page.size)
+    },
+    _exportExcel() {
+      const params = {
+        ...this.doDiningInfo.conditions,
+        pagePath: 'doDining'
+      }
+      exportData(params)
+        .then(response => {
+          if (response.code === 0) {
+            this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+          }
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listReserveConfirms(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listReserveConfirms(val, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.do-dining-container {
+  padding: 20px;
+  .vc-reserve-active {
+    border: 1px solid #409EFF;
+    background-color: #f5f7fa;
+  }
+  .margin-sm {
+    margin: 10px 0;
+  }
+  .margin-top {
+    margin-top: 20px;
+  }
+  .margin-right-xs {
+    margin-right: 5px;
+  }
+  .margin-bottom-xs {
+    margin-bottom: 5px;
+  }
+  .padding-xs {
+    padding: 5px;
+  }
+  .border-radius {
+    border-radius: 4px;
+  }
+  .vc-border {
+    border: 1px solid #ebeef5;
+  }
+  .text-center {
+    text-align: center;
+  }
+  .flex {
+    display: flex;
+  }
+  .justify-start {
+    justify-content: flex-start;
+  }
+  .flex-wrap {
+    flex-wrap: wrap;
+  }
+  .bg-white {
+    background-color: #fff;
+    padding: 10px;
+    border-radius: 4px;
+  }
+  .cursor-pointer {
+    cursor: pointer;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/editReserveDiningLang.js b/src/views/scm/editReserveDiningLang.js
new file mode 100644
index 0000000..97833fb
--- /dev/null
+++ b/src/views/scm/editReserveDiningLang.js
@@ -0,0 +1,94 @@
+export const messages = {
+  en: {
+    editReserveDining: {
+      title: 'Edit Dining Product',
+      goodsName: 'Name',
+      requiredGoodsName: 'Required, please enter name',
+      params: 'Parameters',
+      requiredParams: 'Required, please select parameters',
+      price: 'Price',
+      requiredPrice: 'Required, please enter price',
+      sort: 'Sort',
+      requiredSort: 'Required, please enter sort',
+      startDate: 'Start Date',
+      requiredStartDate: 'Required, please select start date',
+      endDate: 'End Date',
+      requiredEndDate: 'Required, please select end date',
+      coverImage: 'Product Cover',
+      state: 'Status',
+      requiredState: 'Required, please select status',
+      stateNotOnShelf: 'Not On Shelf',
+      stateOnShelf: 'On Shelf',
+      goodsDesc: 'Product Description',
+      requiredGoodsDesc: 'Required, please enter product description',
+      content: 'Product Details',
+      requiredContent: 'Required, please enter product details',
+      validate: {
+        goodsName: 'Name cannot be empty',
+        paramsId: 'Please select parameters',
+        price: 'Price cannot be empty',
+        sort: 'Sort cannot be empty',
+        startDate: 'Please select start date',
+        endDate: 'Please select end date',
+        imgUrl: 'Please upload product cover',
+        state: 'Please select status',
+        goodsDesc: 'Product description cannot be empty',
+        content: 'Product details cannot be empty'
+      },
+      fetchParamsError: 'Failed to get parameters',
+      fetchGoodsError: 'Failed to get product information'
+    },
+    uploadImage: {
+      validate: {
+        size: 'Image size cannot exceed 2MB'
+      },
+      uploadError: 'Image upload failed'
+    }
+  },
+  zh: {
+    editReserveDining: {
+      title: '编辑就餐商品',
+      goodsName: '名称',
+      requiredGoodsName: '必填，请填写名称',
+      params: '参数',
+      requiredParams: '必填，请选择参数',
+      price: '单价',
+      requiredPrice: '必填，请填写单价',
+      sort: '排序',
+      requiredSort: '必填，请填写排序',
+      startDate: '开始时间',
+      requiredStartDate: '必填，请填写开始时间',
+      endDate: '结束时间',
+      requiredEndDate: '必填，请填写结束时间',
+      coverImage: '产品封面',
+      state: '状态',
+      requiredState: '必填，请选择状态',
+      stateNotOnShelf: '未上架',
+      stateOnShelf: '上架',
+      goodsDesc: '商品简介',
+      requiredGoodsDesc: '必填，请填写商品简介',
+      content: '商品详情',
+      requiredContent: '必填，请输入商品详情',
+      validate: {
+        goodsName: '名称不能为空',
+        paramsId: '请选择参数',
+        price: '单价不能为空',
+        sort: '排序不能为空',
+        startDate: '请选择开始时间',
+        endDate: '请选择结束时间',
+        imgUrl: '请上传产品封面',
+        state: '请选择状态',
+        goodsDesc: '商品简介不能为空',
+        content: '商品详情不能为空'
+      },
+      fetchParamsError: '获取参数失败',
+      fetchGoodsError: '获取商品信息失败'
+    },
+    uploadImage: {
+      validate: {
+        size: '图片大小不能超过2MB'
+      },
+      uploadError: '图片上传失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/editReserveDiningList.vue b/src/views/scm/editReserveDiningList.vue
new file mode 100644
index 0000000..945e069
--- /dev/null
+++ b/src/views/scm/editReserveDiningList.vue
@@ -0,0 +1,270 @@
+<template>
+  <div class="edit-reserve-dining-container">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>{{ $t('editReserveDining.title') }}</span>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-form label-width="120px" label-position="right">
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.goodsName')">
+                  <el-input v-model="editReserveDiningInfo.goodsName"
+                    :placeholder="$t('editReserveDining.requiredGoodsName')" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.params')">
+                  <el-select v-model="editReserveDiningInfo.paramsId" style="width:100%"
+                    :placeholder="$t('editReserveDining.requiredParams')">
+                    <el-option v-for="(item, index) in editReserveDiningInfo.reserveParamss" :key="index"
+                      :label="item.name" :value="item.paramsId" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.price')">
+                  <el-input v-model="editReserveDiningInfo.price"
+                    :placeholder="$t('editReserveDining.requiredPrice')" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.sort')">
+                  <el-input v-model="editReserveDiningInfo.sort" :placeholder="$t('editReserveDining.requiredSort')" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.startDate')">
+                  <el-date-picker v-model="editReserveDiningInfo.startDate" type="datetime" style="width:100%"
+                    :placeholder="$t('editReserveDining.requiredStartDate')" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.endDate')">
+                  <el-date-picker v-model="editReserveDiningInfo.endDate" type="datetime" style="width:100%"
+                    :placeholder="$t('editReserveDining.requiredEndDate')" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.coverImage')">
+                  <upload-image-url ref="uploadImage" :limit="1" 
+                    :default-images="[editReserveDiningInfo.imgUrl]"
+                    @notifyUploadCoverImage="handleImageChange" />
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('editReserveDining.state')">
+                  <el-select v-model="editReserveDiningInfo.state" style="width:100%"
+                    :placeholder="$t('editReserveDining.requiredState')">
+                    <el-option :label="$t('editReserveDining.stateNotOnShelf')" value="1001" />
+                    <el-option :label="$t('editReserveDining.stateOnShelf')" value="2002" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-form-item :label="$t('editReserveDining.goodsDesc')">
+                  <el-input v-model="editReserveDiningInfo.goodsDesc" type="textarea" :rows="3"
+                    :placeholder="$t('editReserveDining.requiredGoodsDesc')" />
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="24">
+                <el-form-item :label="$t('editReserveDining.content')">
+                  <div class="editor-wrapper">
+                    <rich-text-editor ref="richTextEditor" v-model="editReserveDiningInfo.content" />
+                  </div>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row :gutter="20">
+              <el-col :span="24" class="text-right">
+                <el-button type="warning" @click="handleCancel">
+                  {{ $t('common.cancel') }}
+                </el-button>
+                <el-button type="primary" @click="saveReserveDiningInfo">
+                  {{ $t('common.save') }}
+                </el-button>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import RichTextEditor from "@/components/editor/RichTextEditor";
+import { updateReserveGoods, listReserveParams, listReserveGoods } from '@/api/scm/editReserveDiningApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditReserveDining',
+  components: {
+    UploadImageUrl,
+    RichTextEditor
+  },
+  data() {
+    return {
+      editReserveDiningInfo: {
+        goodsId: '',
+        goodsName: '',
+        goodsDesc: '',
+        type: '1001',
+        paramsId: '',
+        price: '',
+        sort: '',
+        state: '',
+        startDate: '',
+        endDate: '',
+        imgUrl: '',
+        catalogId: '',
+        content: '',
+        reserveParamss: [],
+        communityId: getCommunityId()
+      }
+    }
+  },
+  created() {
+    this.editReserveDiningInfo.goodsId = this.$route.query.goodsId
+    this.listReserveParamss()
+    this.listReserveDinings()
+  },
+  methods: {
+    handleImageChange(images) {
+      this.editReserveDiningInfo.imgUrl = images.length > 0 ? images[0] : ''
+    },
+    validateForm() {
+      if (!this.editReserveDiningInfo.goodsName) {
+        this.$message.error(this.$t('editReserveDining.validate.goodsName'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.paramsId) {
+        this.$message.error(this.$t('editReserveDining.validate.paramsId'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.price) {
+        this.$message.error(this.$t('editReserveDining.validate.price'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.sort) {
+        this.$message.error(this.$t('editReserveDining.validate.sort'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.startDate) {
+        this.$message.error(this.$t('editReserveDining.validate.startDate'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.endDate) {
+        this.$message.error(this.$t('editReserveDining.validate.endDate'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.imgUrl) {
+        this.$message.error(this.$t('editReserveDining.validate.imgUrl'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.state) {
+        this.$message.error(this.$t('editReserveDining.validate.state'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.goodsDesc) {
+        this.$message.error(this.$t('editReserveDining.validate.goodsDesc'))
+        return false
+      }
+      if (!this.editReserveDiningInfo.content) {
+        this.$message.error(this.$t('editReserveDining.validate.content'))
+        return false
+      }
+      return true
+    },
+    async saveReserveDiningInfo() {
+      if (!this.validateForm()) {
+        return
+      }
+
+      try {
+        const res = await updateReserveGoods(this.editReserveDiningInfo)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.$router.go(-1)
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('common.saveError'))
+      }
+    },
+    async listReserveParamss() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.editReserveDiningInfo.communityId
+        }
+        const res = await listReserveParams(params)
+        this.editReserveDiningInfo.reserveParamss = res.data
+      } catch (error) {
+        this.$message.error(this.$t('editReserveDining.fetchParamsError'))
+      }
+    },
+    async listReserveDinings() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          goodsId: this.editReserveDiningInfo.goodsId,
+          communityId: this.editReserveDiningInfo.communityId
+        }
+        const res = await listReserveGoods(params)
+        if (res.data && res.data.length > 0) {
+          Object.assign(this.editReserveDiningInfo, res.data[0])
+          this.$refs.richTextEditor.setContent(this.editReserveDiningInfo.content)
+          this.$refs.uploadImage.setImages([this.editReserveDiningInfo.imgUrl])
+        }
+      } catch (error) {
+        this.$message.error(this.$t('editReserveDining.fetchGoodsError'))
+      }
+    },
+    handleCancel() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-reserve-dining-container {
+  padding: 20px;
+
+  .el-card {
+    margin-bottom: 20px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .editor-wrapper {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/editReserveServiceLang.js b/src/views/scm/editReserveServiceLang.js
new file mode 100644
index 0000000..4890973
--- /dev/null
+++ b/src/views/scm/editReserveServiceLang.js
@@ -0,0 +1,62 @@
+export const messages = {
+  en: {
+    editReserveService: {
+      title: 'Edit Service',
+      goodsName: 'Name',
+      goodsNamePlaceholder: 'Required, please enter name',
+      params: 'Parameters',
+      paramsPlaceholder: 'Required, please select parameters',
+      price: 'Service Fee',
+      pricePlaceholder: 'Required, please enter service fee',
+      sort: 'Sort',
+      sortPlaceholder: 'Required, please enter sort',
+      state: 'Status',
+      statePlaceholder: 'Required, please select status',
+      stateOff: 'Off Shelf',
+      stateOn: 'On Shelf',
+      startDate: 'Start Date',
+      startDatePlaceholder: 'Required, please select start date',
+      endDate: 'End Date',
+      endDatePlaceholder: 'Required, please select end date',
+      imgUrl: 'Cover Image',
+      goodsDesc: 'Description',
+      goodsDescPlaceholder: 'Required, please enter description',
+      content: 'Content',
+      contentPlaceholder: 'Required, please enter content'
+    },
+    uploadImage: {
+      sizeLimit: 'Image size cannot exceed 2MB',
+      uploadError: 'Upload failed'
+    }
+  },
+  zh: {
+    editReserveService: {
+      title: '编辑服务',
+      goodsName: '名称',
+      goodsNamePlaceholder: '必填，请填写名称',
+      params: '参数',
+      paramsPlaceholder: '必填，请选择参数',
+      price: '上门费',
+      pricePlaceholder: '必填，请填写上门费',
+      sort: '排序',
+      sortPlaceholder: '必填，请填写排序',
+      state: '状态',
+      statePlaceholder: '必填，请选择状态',
+      stateOff: '未上架',
+      stateOn: '上架',
+      startDate: '开始时间',
+      startDatePlaceholder: '必填，请填写开始时间',
+      endDate: '结束时间',
+      endDatePlaceholder: '必填，请填写结束时间',
+      imgUrl: '产品封面',
+      goodsDesc: '商品简介',
+      goodsDescPlaceholder: '必填，请填写商品简介',
+      content: '商品详情',
+      contentPlaceholder: '必填，请输入商品描述'
+    },
+    uploadImage: {
+      sizeLimit: '图片大小不能超过2MB',
+      uploadError: '上传失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/editReserveServiceList.vue b/src/views/scm/editReserveServiceList.vue
new file mode 100644
index 0000000..37b6b9f
--- /dev/null
+++ b/src/views/scm/editReserveServiceList.vue
@@ -0,0 +1,294 @@
+<template>
+  <div class="edit-reserve-service-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('editReserveService.title') }}</span>
+      </div>
+
+      <el-form ref="form" :model="editReserveServiceInfo" label-width="120px" label-position="right">
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('editReserveService.goodsName')" prop="goodsName">
+              <el-input
+                v-model="editReserveServiceInfo.goodsName"
+                :placeholder="$t('editReserveService.goodsNamePlaceholder')"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.params')" prop="paramsId">
+              <el-select
+                v-model="editReserveServiceInfo.paramsId"
+                :placeholder="$t('editReserveService.paramsPlaceholder')"
+                style="width:100%"
+              >
+                <el-option
+                  v-for="(item,index) in editReserveServiceInfo.reserveParamss"
+                  :key="index"
+                  :label="item.name"
+                  :value="item.paramsId"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.price')" prop="price">
+              <el-input
+                v-model="editReserveServiceInfo.price"
+                :placeholder="$t('editReserveService.pricePlaceholder')"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.sort')" prop="sort">
+              <el-input
+                v-model="editReserveServiceInfo.sort"
+                :placeholder="$t('editReserveService.sortPlaceholder')"
+                clearable
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.state')" prop="state">
+              <el-select
+                v-model="editReserveServiceInfo.state"
+                :placeholder="$t('editReserveService.statePlaceholder')"
+                style="width:100%"
+              >
+                <el-option
+                  :label="$t('editReserveService.stateOff')"
+                  value="1001"
+                />
+                <el-option
+                  :label="$t('editReserveService.stateOn')"
+                  value="2002"
+                />
+              </el-select>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.startDate')" prop="startDate">
+              <el-date-picker
+                v-model="editReserveServiceInfo.startDate"
+                type="datetime"
+                :placeholder="$t('editReserveService.startDatePlaceholder')"
+                style="width:100%"
+              />
+            </el-form-item>
+          </el-col>
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.endDate')" prop="endDate">
+              <el-date-picker
+                v-model="editReserveServiceInfo.endDate"
+                type="datetime"
+                :placeholder="$t('editReserveService.endDatePlaceholder')"
+                style="width:100%"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-form-item :label="$t('editReserveService.imgUrl')" prop="imgUrl">
+              <upload-image-url
+                ref="uploadImage"
+                :limit="1"
+                :default-images="[editReserveServiceInfo.imgUrl]"
+                @notifyUploadCoverImage="handleImageChange"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('editReserveService.goodsDesc')" prop="goodsDesc">
+              <el-input
+                v-model="editReserveServiceInfo.goodsDesc"
+                type="textarea"
+                :placeholder="$t('editReserveService.goodsDescPlaceholder')"
+                :rows="3"
+              />
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24">
+            <el-form-item :label="$t('editReserveService.content')">
+              <div class="editor-wrapper">
+                <rich-text-editor ref="richTextEditor" v-model="editReserveServiceInfo.content" />
+              </div>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="24" class="text-right">
+            <el-button type="warning" @click="handleCancel">
+              {{ $t('common.cancel') }}
+            </el-button>
+            <el-button type="primary" @click="handleSave">
+              {{ $t('common.save') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-form>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import RichTextEditor from "@/components/editor/RichTextEditor";
+import { updateReserveGoods, listReserveParams, listReserveGoods } from '@/api/scm/editReserveServiceApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditReserveServiceList',
+  components: {
+    UploadImageUrl,
+    RichTextEditor
+  },
+  data() {
+    return {
+      editReserveServiceInfo: {
+        goodsId: '',
+        goodsName: '',
+        goodsDesc: '',
+        type: '1001',
+        paramsId: '',
+        price: '',
+        sort: '',
+        state: '',
+        startDate: '',
+        endDate: '',
+        imgUrl: '',
+        catalogId: '',
+        content: '',
+        reserveParamss: []
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.editReserveServiceInfo.goodsId = this.$route.query.goodsId
+    this.listReserveParamss()
+    this.listReserveServices()
+  },
+  methods: {
+    handleImageChange(images) {
+      this.editReserveServiceInfo.imgUrl = images.length > 0 ? images[0] : ''
+    },
+    async listReserveParamss() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { data } = await listReserveParams(params)
+        this.editReserveServiceInfo.reserveParamss = data
+      } catch (error) {
+        console.error('获取参数列表失败:', error)
+        this.$message.error(this.$t('editReserveService.loadParamsFailed'))
+      }
+    },
+    async listReserveServices() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          goodsId: this.editReserveServiceInfo.goodsId,
+          communityId: this.communityId
+        }
+        const { data } = await listReserveGoods(params)
+        if (data && data.length > 0) {
+          Object.assign(this.editReserveServiceInfo, data[0])
+          this.$refs.richTextEditor.setContent(this.editReserveServiceInfo.content)
+          this.$refs.uploadImage.setImages([this.editReserveServiceInfo.imgUrl])
+
+        }
+      } catch (error) {
+        console.error('获取服务详情失败:', error)
+        this.$message.error(this.$t('editReserveService.loadServiceFailed'))
+      }
+    },
+    validateForm() {
+      const requiredFields = [
+        'goodsName',
+        'paramsId',
+        'price',
+        'sort',
+        'startDate',
+        'endDate',
+        'imgUrl',
+        'state',
+        'goodsDesc',
+        'content'
+      ]
+
+      for (const field of requiredFields) {
+        if (!this.editReserveServiceInfo[field]) {
+          this.$message.error(this.$t(`editReserveService.${field}Required`))
+          return false
+        }
+      }
+      return true
+    },
+    async handleSave() {
+      try {
+        if (!this.validateForm()) return
+
+        this.editReserveServiceInfo.communityId = this.communityId
+        const { code, msg } = await updateReserveGoods(this.editReserveServiceInfo)
+        
+        if (code === 0) {
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.$router.go(-1)
+        } else {
+          this.$message.error(msg)
+        }
+      } catch (error) {
+        console.error('保存失败:', error)
+        this.$message.error(this.$t('common.saveError'))
+      }
+    },
+    handleCancel() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.edit-reserve-service-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .text-right {
+    text-align: right;
+  }
+
+  .editor-wrapper {
+    border: 1px solid #dcdfe6;
+    border-radius: 4px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/ownerDiningLang.js b/src/views/scm/ownerDiningLang.js
new file mode 100644
index 0000000..11e4944
--- /dev/null
+++ b/src/views/scm/ownerDiningLang.js
@@ -0,0 +1,52 @@
+export const messages = {
+  en: {
+    ownerDining: {
+      search: {
+        title: 'Search Conditions',
+        startDate: 'Select start date',
+        endDate: 'Select end date',
+        nameLike: 'Enter owner name',
+        link: 'Enter owner phone'
+      },
+      list: {
+        title: 'Owner Dining Records'
+      },
+      table: {
+        startDate: 'Start Date',
+        endDate: 'End Date',
+        name: 'Owner Name',
+        link: 'Phone',
+        goodsName: 'Goods',
+        frequency: 'Frequency'
+      },
+      fetchError: 'Failed to fetch data',
+      exportSuccess: 'Export successful',
+      exportError: 'Export failed'
+    }
+  },
+  zh: {
+    ownerDining: {
+      search: {
+        title: '查询条件',
+        startDate: '请选择开始时间',
+        endDate: '请选择结束时间',
+        nameLike: '请输入业主名称',
+        link: '请选择业主手机号'
+      },
+      list: {
+        title: '业主就餐'
+      },
+      table: {
+        startDate: '开始时间',
+        endDate: '结束时间',
+        name: '业主名称',
+        link: '手机号',
+        goodsName: '商品',
+        frequency: '就餐次数'
+      },
+      fetchError: '获取数据失败',
+      exportSuccess: '导出成功',
+      exportError: '导出失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/ownerDiningList.vue b/src/views/scm/ownerDiningList.vue
new file mode 100644
index 0000000..e4a1111
--- /dev/null
+++ b/src/views/scm/ownerDiningList.vue
@@ -0,0 +1,228 @@
+<template>
+  <div class="owner-dining-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="text-left">
+        <span>{{ $t('ownerDining.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-date-picker
+            v-model="searchForm.startDate"
+            type="date"
+            :placeholder="$t('ownerDining.search.startDate')"
+            style="width: 100%"
+            value-format="yyyy-MM-dd"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-date-picker
+            v-model="searchForm.endDate"
+            type="date"
+            :placeholder="$t('ownerDining.search.endDate')"
+            style="width: 100%"
+            value-format="yyyy-MM-dd"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-input
+            v-model="searchForm.nameLike"
+            :placeholder="$t('ownerDining.search.nameLike')"
+            clearable
+            style="width: 100%"
+          />
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary" @click="handleSearch">
+            {{ $t('common.search') }}
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20" style="margin-top: 15px">
+        <el-col :span="6">
+          <el-input
+            v-model="searchForm.link"
+            :placeholder="$t('ownerDining.search.link')"
+            clearable
+            style="width: 100%"
+          />
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('ownerDining.list.title') }}</span>
+        <div style="float: right">
+          <el-button type="primary" size="small" @click="handleExport">
+            {{ $t('common.export') }}
+          </el-button>
+          <el-button type="default" size="small" @click="goBack">
+            {{ $t('common.back') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="startDate"
+          :label="$t('ownerDining.table.startDate')"
+          align="center"
+        />
+        <el-table-column
+          prop="endDate"
+          :label="$t('ownerDining.table.endDate')"
+          align="center"
+        />
+        <el-table-column
+          prop="name"
+          :label="$t('ownerDining.table.name')"
+          align="center"
+        />
+        <el-table-column
+          prop="link"
+          :label="$t('ownerDining.table.link')"
+          align="center"
+        />
+        <el-table-column
+          prop="goodsName"
+          :label="$t('ownerDining.table.goodsName')"
+          align="center"
+        />
+        <el-table-column
+          prop="frequency"
+          :label="$t('ownerDining.table.frequency')"
+          align="center"
+        />
+      </el-table>
+
+      <el-pagination
+        :current-page.sync="page.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { queryOwnerReserveGoods, exportData } from '@/api/scm/ownerDiningApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'OwnerDiningList',
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        startDate: '',
+        endDate: '',
+        nameLike: '',
+        link: '',
+        communityId: ''
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.initDate()
+    this.searchForm.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    initDate() {
+      const date = new Date()
+      const month = date.getMonth() + 1
+      const newMonth = month < 10 ? `0${month}` : month
+      
+      this.searchForm.startDate = `${date.getFullYear()}-${newMonth}-01`
+      
+      date.setMonth(date.getMonth() + 1)
+      const nextMonth = date.getMonth() + 1
+      const newNextMonth = nextMonth < 10 ? `0${nextMonth}` : nextMonth
+      this.searchForm.endDate = `${date.getFullYear()}-${newNextMonth}-01`
+    },
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await queryOwnerReserveGoods(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('ownerDining.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    async handleExport() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          pagePath: 'ownerDining'
+        }
+        await exportData(params)
+        this.$message.success(this.$t('ownerDining.exportSuccess'))
+      } catch (error) {
+        this.$message.error(this.$t('ownerDining.exportError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.owner-dining-container {
+  padding: 20px;
+  
+  .search-wrapper {
+    margin-bottom: 20px;
+  }
+  
+  .list-wrapper {
+    margin-top: 20px;
+  }
+  
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/reserveCatalogManageLang.js b/src/views/scm/reserveCatalogManageLang.js
index 5286d97..9fc4455 100644
--- a/src/views/scm/reserveCatalogManageLang.js
+++ b/src/views/scm/reserveCatalogManageLang.js
@@ -5,72 +5,73 @@ export const messages = {
         title: 'Search Conditions',
         namePlaceholder: 'Please enter name',
         typePlaceholder: 'Please select type',
-        typeOption1: 'Reservation Dining',
-        typeOption2: 'Reservation Service'
+        typeOptions: {
+          all: 'All',
+          dining: 'Reservation Dining',
+          service: 'Reservation Service'
+        }
       },
       list: {
         title: 'Reservation Catalog List'
       },
       table: {
         type: 'Type',
-        type1: 'Reservation Dining',
-        type2: 'Reservation Service',
         name: 'Name',
         sort: 'Sort',
         state: 'Status',
-        state1: 'Show',
-        state2: 'Hide',
-        createTime: 'Create Time'
+        createTime: 'Create Time',
+        typeOptions: {
+          dining: 'Reservation Dining',
+          service: 'Reservation Service'
+        },
+        stateOptions: {
+          show: 'Show',
+          hide: 'Hide'
+        }
       },
-      add: {
-        title: 'Add Reservation Catalog',
-        name: 'Name',
-        namePlaceholder: 'Required, please enter name',
+      form: {
+        name: 'Catalog Name',
         sort: 'Sort',
-        sortPlaceholder: 'Required, please enter sort',
         type: 'Type',
-        typePlaceholder: 'Required, please select type',
-        typeOption1: 'Reservation Dining',
-        typeOption2: 'Reservation Service',
         state: 'Status',
+        namePlaceholder: 'Required, please enter catalog name',
+        sortPlaceholder: 'Required, please enter sort number',
+        typePlaceholder: 'Required, please select type',
         statePlaceholder: 'Required, please select status',
-        stateOption1: 'Show',
-        stateOption2: 'Hide',
+        typeOptions: {
+          dining: 'Reservation Dining',
+          service: 'Reservation Service'
+        },
+        stateOptions: {
+          show: 'Show',
+          hide: 'Hide'
+        }
+      },
+      validate: {
+        nameRequired: 'Catalog name is required',
+        nameMaxLength: 'Catalog name cannot exceed 128 characters',
+        sortRequired: 'Sort is required',
+        sortMaxLength: 'Sort cannot exceed 12 characters',
+        typeRequired: 'Type is required',
+        stateRequired: 'Status is required',
+        catalogIdRequired: 'Catalog ID is required'
+      },
+      add: {
+        title: 'Add Reservation Catalog',
         success: 'Add successfully',
-        error: 'Add failed'
+        error: 'Failed to add'
       },
       edit: {
         title: 'Edit Reservation Catalog',
-        name: 'Name',
-        namePlaceholder: 'Required, please enter name',
-        sort: 'Sort',
-        sortPlaceholder: 'Required, please enter sort',
-        type: 'Type',
-        typePlaceholder: 'Required, please select type',
-        typeOption1: 'Reservation Dining',
-        typeOption2: 'Reservation Service',
-        state: 'Status',
-        statePlaceholder: 'Required, please select status',
-        stateOption1: 'Show',
-        stateOption2: 'Hide',
         success: 'Edit successfully',
-        error: 'Edit failed'
+        error: 'Failed to edit'
       },
       delete: {
         title: 'Delete Confirmation',
-        confirmText1: 'Are you sure to delete the reservation catalog',
-        confirmText2: '? This operation cannot be undone.',
+        confirmText: 'Are you sure to delete this reservation catalog?',
+        name: 'Catalog Name',
         success: 'Delete successfully',
-        error: 'Delete failed'
-      },
-      validate: {
-        nameRequired: 'Name is required',
-        nameMaxLength: 'Name cannot exceed 128 characters',
-        sortRequired: 'Sort is required',
-        sortMaxLength: 'Sort cannot exceed 12 characters',
-        typeRequired: 'Type is required',
-        stateRequired: 'Status is required',
-        catalogIdRequired: 'Catalog ID is required'
+        error: 'Failed to delete'
       },
       fetchError: 'Failed to fetch data'
     }
@@ -81,73 +82,74 @@ export const messages = {
         title: '查询条件',
         namePlaceholder: '请输入名称',
         typePlaceholder: '请选择类型',
-        typeOption1: '预约就餐',
-        typeOption2: '预约服务'
+        typeOptions: {
+          all: '全部',
+          dining: '预约就餐',
+          service: '预约服务'
+        }
       },
       list: {
         title: '预约目录列表'
       },
       table: {
         type: '类型',
-        type1: '预约就餐',
-        type2: '预约服务',
         name: '名称',
         sort: '排序',
         state: '状态',
-        state1: '展示',
-        state2: '不展示',
-        createTime: '创建时间'
+        createTime: '创建时间',
+        typeOptions: {
+          dining: '预约就餐',
+          service: '预约服务'
+        },
+        stateOptions: {
+          show: '展示',
+          hide: '不展示'
+        }
       },
-      add: {
-        title: '添加预约目录',
-        name: '名称',
-        namePlaceholder: '必填，请输入名称',
+      form: {
+        name: '目录名称',
         sort: '排序',
-        sortPlaceholder: '必填，请输入排序',
         type: '类型',
-        typePlaceholder: '必填，请选择类型',
-        typeOption1: '预约就餐',
-        typeOption2: '预约服务',
         state: '状态',
+        namePlaceholder: '必填，请填写预约目录',
+        sortPlaceholder: '必填，请填写排序',
+        typePlaceholder: '必填，请选择类型',
         statePlaceholder: '必填，请选择状态',
-        stateOption1: '展示',
-        stateOption2: '不展示',
+        typeOptions: {
+          dining: '预约就餐',
+          service: '预约服务'
+        },
+        stateOptions: {
+          show: '展示',
+          hide: '不展示'
+        }
+      },
+      validate: {
+        nameRequired: '预约名称不能为空',
+        nameMaxLength: '预约名称不能超过128个字符',
+        sortRequired: '排序不能为空',
+        sortMaxLength: '排序不能超过12个字符',
+        typeRequired: '类型不能为空',
+        stateRequired: '状态不能为空',
+        catalogIdRequired: '编号不能为空'
+      },
+      add: {
+        title: '添加预约目录',
         success: '添加成功',
         error: '添加失败'
       },
       edit: {
         title: '修改预约目录',
-        name: '名称',
-        namePlaceholder: '必填，请输入名称',
-        sort: '排序',
-        sortPlaceholder: '必填，请输入排序',
-        type: '类型',
-        typePlaceholder: '必填，请选择类型',
-        typeOption1: '预约就餐',
-        typeOption2: '预约服务',
-        state: '状态',
-        statePlaceholder: '必填，请选择状态',
-        stateOption1: '展示',
-        stateOption2: '不展示',
         success: '修改成功',
         error: '修改失败'
       },
       delete: {
         title: '删除确认',
-        confirmText1: '确定要删除预约目录',
-        confirmText2: '？此操作不可撤销。',
+        confirmText: '确定删除该预约目录吗？',
+        name: '目录名称',
         success: '删除成功',
         error: '删除失败'
       },
-      validate: {
-        nameRequired: '名称不能为空',
-        nameMaxLength: '名称不能超过128个字符',
-        sortRequired: '排序不能为空',
-        sortMaxLength: '排序不能超过12个字符',
-        typeRequired: '类型不能为空',
-        stateRequired: '状态不能为空',
-        catalogIdRequired: '目录ID不能为空'
-      },
       fetchError: '获取数据失败'
     }
   }
diff --git a/src/views/scm/reserveCatalogManageList.vue b/src/views/scm/reserveCatalogManageList.vue
index 976541b..7b8654e 100644
--- a/src/views/scm/reserveCatalogManageList.vue
+++ b/src/views/scm/reserveCatalogManageList.vue
@@ -7,14 +7,30 @@
       </div>
       <el-row :gutter="20">
         <el-col :span="6">
-          <el-input v-model="searchForm.name" :placeholder="$t('reserveCatalogManage.search.namePlaceholder')"
-            clearable />
+          <el-input
+            v-model="searchForm.name"
+            :placeholder="$t('reserveCatalogManage.search.namePlaceholder')"
+            clearable
+          />
         </el-col>
         <el-col :span="6">
-          <el-select v-model="searchForm.type" :placeholder="$t('reserveCatalogManage.search.typePlaceholder')"
-            style="width:100%">
-            <el-option :label="$t('reserveCatalogManage.search.typeOption1')" value="1001" />
-            <el-option :label="$t('reserveCatalogManage.search.typeOption2')" value="2002" />
+          <el-select
+            v-model="searchForm.type"
+            :placeholder="$t('reserveCatalogManage.search.typePlaceholder')"
+            style="width:100%"
+          >
+            <el-option
+              :label="$t('reserveCatalogManage.search.typeOptions.all')"
+              value=""
+            />
+            <el-option
+              :label="$t('reserveCatalogManage.search.typeOptions.dining')"
+              value="1001"
+            />
+            <el-option
+              :label="$t('reserveCatalogManage.search.typeOptions.service')"
+              value="2002"
+            />
           </el-select>
         </el-col>
         <el-col :span="4">
@@ -29,57 +45,102 @@
     <el-card class="list-wrapper">
       <div slot="header" class="flex justify-between">
         <span>{{ $t('reserveCatalogManage.list.title') }}</span>
-        <el-button type="primary" size="mini" @click="handleAdd">
+        <el-button
+          type="primary"
+          style="float: right;"
+          @click="handleAdd"
+        >
           {{ $t('common.add') }}
         </el-button>
       </div>
 
-      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
-        <el-table-column prop="type" :label="$t('reserveCatalogManage.table.type')" align="center">
+      <el-table
+        v-loading="loading"
+        :data="tableData"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="type"
+          :label="$t('reserveCatalogManage.table.type')"
+          align="center"
+        >
           <template slot-scope="scope">
-            {{ scope.row.type === '1001' ? $t('reserveCatalogManage.table.type1') :
-              $t('reserveCatalogManage.table.type2') }}
+            {{ scope.row.type === '1001' ? $t('reserveCatalogManage.table.typeOptions.dining') : $t('reserveCatalogManage.table.typeOptions.service') }}
           </template>
         </el-table-column>
-        <el-table-column prop="name" :label="$t('reserveCatalogManage.table.name')" align="center" />
-        <el-table-column prop="sort" :label="$t('reserveCatalogManage.table.sort')" align="center" />
-        <el-table-column prop="state" :label="$t('reserveCatalogManage.table.state')" align="center">
+        <el-table-column
+          prop="name"
+          :label="$t('reserveCatalogManage.table.name')"
+          align="center"
+        />
+        <el-table-column
+          prop="sort"
+          :label="$t('reserveCatalogManage.table.sort')"
+          align="center"
+        />
+        <el-table-column
+          prop="state"
+          :label="$t('reserveCatalogManage.table.state')"
+          align="center"
+        >
           <template slot-scope="scope">
-            {{ scope.row.state === '1001' ? $t('reserveCatalogManage.table.state1') :
-              $t('reserveCatalogManage.table.state2') }}
+            {{ scope.row.state === '1001' ? $t('reserveCatalogManage.table.stateOptions.show') : $t('reserveCatalogManage.table.stateOptions.hide') }}
           </template>
         </el-table-column>
-        <el-table-column prop="createTime" :label="$t('reserveCatalogManage.table.createTime')" align="center" />
-        <el-table-column :label="$t('common.operation')" align="center" width="200">
+        <el-table-column
+          prop="createTime"
+          :label="$t('reserveCatalogManage.table.createTime')"
+          align="center"
+        />
+        <el-table-column
+          :label="$t('common.operation')"
+          align="center"
+          width="200"
+        >
           <template slot-scope="scope">
-            <el-button size="mini" type="primary" @click="handleEdit(scope.row)">
+            <el-button
+              size="mini"
+              type="primary"
+              @click="handleEdit(scope.row)"
+            >
               {{ $t('common.edit') }}
             </el-button>
-            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+            <el-button
+              size="mini"
+              type="danger"
+              @click="handleDelete(scope.row)"
+            >
               {{ $t('common.delete') }}
             </el-button>
           </template>
         </el-table-column>
       </el-table>
 
-      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
-        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
-        @current-change="handleCurrentChange" />
+      <el-pagination
+        :current-page="page.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="page.size"
+        :total="page.total"
+        layout="total, sizes, prev, pager, next, jumper"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+      />
     </el-card>
 
     <!-- 子组件 -->
-    <add-reserve-catalog ref="addDialog" @success="handleSuccess" />
-    <edit-reserve-catalog ref="editDialog" @success="handleSuccess" />
-    <delete-reserve-catalog ref="deleteDialog" @success="handleSuccess" />
+    <add-reserve-catalog ref="addReserveCatalog" @success="handleSuccess" />
+    <edit-reserve-catalog ref="editReserveCatalog" @success="handleSuccess" />
+    <delete-reserve-catalog ref="deleteReserveCatalog" @success="handleSuccess" />
   </div>
 </template>
 
 <script>
 import { listReserveCatalog } from '@/api/scm/reserveCatalogManageApi'
-import { getCommunityId } from '@/api/community/communityApi'
 import AddReserveCatalog from '@/components/scm/addReserveCatalog'
 import EditReserveCatalog from '@/components/scm/editReserveCatalog'
 import DeleteReserveCatalog from '@/components/scm/deleteReserveCatalog'
+import { getCommunityId } from '@/api/community/communityApi'
 
 export default {
   name: 'ReserveCatalogManageList',
@@ -131,13 +192,13 @@ export default {
       this.getList()
     },
     handleAdd() {
-      this.$refs.addDialog.open()
+      this.$refs.addReserveCatalog.open()
     },
     handleEdit(row) {
-      this.$refs.editDialog.open(row)
+      this.$refs.editReserveCatalog.open(row)
     },
     handleDelete(row) {
-      this.$refs.deleteDialog.open(row)
+      this.$refs.deleteReserveCatalog.open(row)
     },
     handleSuccess() {
       this.getList()
@@ -160,15 +221,21 @@ export default {
 
   .search-wrapper {
     margin-bottom: 20px;
-  }
 
-  .list-wrapper {
-    margin-bottom: 20px;
+    .el-row {
+      margin-bottom: -20px;
+    }
+
+    .el-col {
+      margin-bottom: 20px;
+    }
   }
 
-  .el-pagination {
-    margin-top: 20px;
-    text-align: right;
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
   }
 }
 </style>
\ No newline at end of file
diff --git a/src/views/scm/reserveConfirmLang.js b/src/views/scm/reserveConfirmLang.js
new file mode 100644
index 0000000..5ad824a
--- /dev/null
+++ b/src/views/scm/reserveConfirmLang.js
@@ -0,0 +1,50 @@
+export const messages = {
+  en: {
+    reserveConfirm: {
+      scanPlaceholder: 'Please scan the QR code',
+      confirm: 'Confirm',
+      result: 'Result',
+      confirmTime: 'Confirm Time',
+      goodsService: 'Goods/Service',
+      quantity: 'Quantity',
+      appointmentDate: 'Appointment Date',
+      appointmentHour: 'Appointment Hour',
+      appointmentPerson: 'Appointment Person',
+      appointmentPhone: 'Appointment Phone',
+      remark: 'Remark',
+      searchCondition: 'Search Condition',
+      personNamePlaceholder: 'Please enter person name',
+      personTelPlaceholder: 'Please enter phone number',
+      appointmentTimePlaceholder: 'Please select appointment time',
+      search: 'Search',
+      orderId: 'Order ID',
+      scanWarning: 'Please scan the QR code',
+      confirmSuccess: 'Confirm success',
+      fetchError: 'Failed to fetch data'
+    }
+  },
+  zh: {
+    reserveConfirm: {
+      scanPlaceholder: '请扫码枪扫码核销',
+      confirm: '核销',
+      result: '核销结果',
+      confirmTime: '核销时间',
+      goodsService: '商品/服务',
+      quantity: '核销数量',
+      appointmentDate: '预约日期',
+      appointmentHour: '预约小时',
+      appointmentPerson: '预约人',
+      appointmentPhone: '预约电话',
+      remark: '备注',
+      searchCondition: '查询条件',
+      personNamePlaceholder: '请输入预约人',
+      personTelPlaceholder: '请输入预约电话',
+      appointmentTimePlaceholder: '请选择预约时间',
+      search: '查询',
+      orderId: '核销订单',
+      scanWarning: '请扫码',
+      confirmSuccess: '核销成功',
+      fetchError: '获取数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/reserveConfirmList.vue b/src/views/scm/reserveConfirmList.vue
new file mode 100644
index 0000000..ee8617d
--- /dev/null
+++ b/src/views/scm/reserveConfirmList.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="reserve-confirm-container">
+    <el-row :gutter="20">
+      <el-col :span="6">
+        <el-card class="box-card">
+          <div class="card-header">
+            <el-input
+              v-model="reserveConfirmInfo.timeId"
+              :placeholder="$t('reserveConfirm.scanPlaceholder')"
+              @keyup.enter.native="confirmReserve"
+              clearable
+            ></el-input>
+            <el-button
+              type="primary"
+              size="small"
+              @click="confirmReserve"
+              class="confirm-btn"
+            >
+              {{ $t('reserveConfirm.confirm') }}
+            </el-button>
+          </div>
+          
+          <div class="result-wrapper">
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.result') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.remark }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.confirmTime') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.createTime }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.goodsService') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.goodsName }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.quantity') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.quantity }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.appointmentDate') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.appointmentTime }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.appointmentHour') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.hours }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.appointmentPerson') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.personName }}</span>
+            </div>
+            <div class="result-item">
+              <span class="label">{{ $t('reserveConfirm.appointmentPhone') }}</span>
+              <span class="value">{{ reserveConfirmInfo.order.personTel }}</span>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+
+      <el-col :span="18">
+        <el-card class="box-card">
+          <div slot="header" class="text-left">
+            <span>{{ $t('reserveConfirm.searchCondition') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-input
+                v-model="reserveConfirmInfo.conditions.personName"
+                :placeholder="$t('reserveConfirm.personNamePlaceholder')"
+                clearable
+              ></el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="reserveConfirmInfo.conditions.personTel"
+                :placeholder="$t('reserveConfirm.personTelPlaceholder')"
+                clearable
+              ></el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="reserveConfirmInfo.conditions.appointmentTime"
+                :placeholder="$t('reserveConfirm.appointmentTimePlaceholder')"
+                clearable
+              ></el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-button
+                type="primary"
+                @click="queryReserveConfirm"
+                icon="el-icon-search"
+              >
+                {{ $t('reserveConfirm.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="box-card table-wrapper">
+          <el-table
+            :data="reserveConfirmInfo.orders"
+            border
+            style="width: 100%"
+            v-loading="loading"
+          >
+            <el-table-column
+              prop="orderId"
+              :label="$t('reserveConfirm.orderId')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="goodsName"
+              :label="$t('reserveConfirm.goodsService')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="quantity"
+              :label="$t('reserveConfirm.quantity')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="appointmentTime"
+              :label="$t('reserveConfirm.appointmentDate')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="hours"
+              :label="$t('reserveConfirm.appointmentHour')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="personName"
+              :label="$t('reserveConfirm.appointmentPerson')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="personTel"
+              :label="$t('reserveConfirm.appointmentPhone')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="createTime"
+              :label="$t('reserveConfirm.confirmTime')"
+              align="center"
+            ></el-table-column>
+            <el-table-column
+              prop="remark"
+              :label="$t('reserveConfirm.remark')"
+              align="center"
+            ></el-table-column>
+          </el-table>
+
+          <el-pagination
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+            :current-page="page.current"
+            :page-sizes="[10, 20, 30, 50]"
+            :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="page.total"
+            class="pagination-wrapper"
+          ></el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { listReserveGoodsConfirmOrder, saveReserveGoodsConfirmOrder } from '@/api/scm/reserveConfirmApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ReserveConfirmList',
+  data() {
+    return {
+      loading: false,
+      reserveConfirmInfo: {
+        orders: [],
+        order: {
+          remark: '',
+          appointmentTime: '',
+          createTime: '',
+          hours: '',
+          spaceName: '',
+          personName: '',
+          personTel: '',
+          quantity: '',
+          goodsName: ''
+        },
+        timeId: '',
+        conditions: {
+          spaceId: '',
+          personName: '',
+          personTel: '',
+          appointmentTime: '',
+          communityId: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.reserveConfirmInfo.conditions.communityId = getCommunityId()
+    this.listReserveConfirms()
+  },
+  methods: {
+    async listReserveConfirms() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.reserveConfirmInfo.conditions,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await listReserveGoodsConfirmOrder(params)
+        this.reserveConfirmInfo.orders = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('reserveConfirm.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async confirmReserve() {
+      if (!this.reserveConfirmInfo.timeId) {
+        this.$message.warning(this.$t('reserveConfirm.scanWarning'))
+        return
+      }
+
+      try {
+        const data = {
+          timeId: this.reserveConfirmInfo.timeId,
+          communityId: this.reserveConfirmInfo.conditions.communityId
+        }
+        const res = await saveReserveGoodsConfirmOrder(data)
+        
+        if (res.code !== 0) {
+          this.$message.error(res.msg)
+          return
+        }
+
+        this.$message.success(this.$t('reserveConfirm.confirmSuccess'))
+        this.reserveConfirmInfo.timeId = ''
+        this.listReserveConfirms()
+        
+        if (res.data && res.data.length > 0) {
+          this.reserveConfirmInfo.order = { ...res.data[0] }
+          if (!this.reserveConfirmInfo.order.remark) {
+            this.reserveConfirmInfo.order.remark = this.$t('reserveConfirm.confirmSuccess')
+          }
+        }
+      } catch (error) {
+        this.$message.error(error.message)
+        this.reserveConfirmInfo.timeId = ''
+      }
+    },
+    queryReserveConfirm() {
+      this.page.current = 1
+      this.listReserveConfirms()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.listReserveConfirms()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.listReserveConfirms()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reserve-confirm-container {
+  padding: 20px;
+  
+  .box-card {
+    margin-bottom: 20px;
+    
+    .card-header {
+      display: flex;
+      margin-bottom: 20px;
+      
+      .confirm-btn {
+        margin-left: 10px;
+      }
+    }
+    
+    .result-wrapper {
+      .result-item {
+        display: flex;
+        justify-content: space-between;
+        margin-bottom: 10px;
+        padding: 5px 0;
+        border-bottom: 1px solid #eee;
+        
+        .label {
+          font-weight: bold;
+        }
+      }
+    }
+  }
+  
+  .table-wrapper {
+    margin-top: 20px;
+    
+    .pagination-wrapper {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/reserveDiningManageLang.js b/src/views/scm/reserveDiningManageLang.js
new file mode 100644
index 0000000..3af9af3
--- /dev/null
+++ b/src/views/scm/reserveDiningManageLang.js
@@ -0,0 +1,134 @@
+export const messages = {
+  en: {
+    reserveDiningManage: {
+      searchTitle: 'Search Conditions',
+      listTitle: 'Reservation Dining',
+      addCatalog: 'Add Catalog',
+      addCatalogFirst: 'Please add catalog first',
+      addFirst: 'Please add first',
+      goodsIdPlaceholder: 'Please enter goods ID',
+      goodsNamePlaceholder: 'Please enter goods name',
+      statePlaceholder: 'Please select status',
+      stateNotOnline: 'Not Online',
+      stateOnline: 'Online',
+      goodsCover: 'Goods Cover',
+      goodsName: 'Name(ID)',
+      params: 'Parameters',
+      reserveWay: 'Reservation Way',
+      day: 'Day',
+      week: 'Week',
+      reserveCount: 'Reservation Count',
+      reserveQuantity: 'Reservation Quantity',
+      price: 'Price',
+      validDate: 'Valid Date',
+      reserveStartTime: 'Reservation Start Time',
+      sort: 'Sort',
+      state: 'Status',
+      reserveDining: 'Reservation Dining',
+      diningStatistics: 'Dining Statistics',
+      dining: 'Dining',
+      fetchError: 'Failed to fetch data'
+    },
+    reserveDining: {
+      reservePerson: 'Reservation Person',
+      reservePersonPlaceholder: 'Required, please enter reservation person',
+      reservePersonRequired: 'Reservation person is required',
+      reservePersonMaxLength: 'Reservation person cannot exceed 64 characters',
+      reserveTel: 'Reservation Tel',
+      reserveTelPlaceholder: 'Required, please enter reservation tel',
+      reserveTelRequired: 'Reservation tel is required',
+      reserveTelMaxLength: 'Reservation tel cannot exceed 11 characters',
+      payWay: 'Payment Way',
+      payWayPlaceholder: 'Please select payment way',
+      payWayRequired: 'Payment way is required',
+      cash: 'Cash',
+      wechat: 'WeChat',
+      alipay: 'Alipay',
+      reserveQuantity: 'Reservation Quantity',
+      reserveQuantityPlaceholder: 'Please select reservation quantity',
+      unit: 'unit',
+      receivableAmount: 'Receivable Amount',
+      receivableAmountPlaceholder: 'Required, please enter receivable amount',
+      receivableAmountRequired: 'Receivable amount is required',
+      receivedAmount: 'Received Amount',
+      receivedAmountPlaceholder: 'Required, please enter received amount',
+      receivedAmountRequired: 'Received amount is required',
+      reserveDate: 'Reservation Date',
+      reserveDatePlaceholder: 'Required, please select reservation date',
+      reserveDateRequired: 'Reservation date is required',
+      reserveTime: 'Reservation Time',
+      reserveTimePlaceholder: 'Required, please select reservation time',
+      hour: 'hour',
+      remark: 'Remark',
+      remarkPlaceholder: 'Required, please enter remark',
+      remarkRequired: 'Remark is required',
+      confirmDelete: 'Confirm to delete reservation dining?'
+    }
+  },
+  zh: {
+    reserveDiningManage: {
+      searchTitle: '查询条件',
+      listTitle: '预约就餐',
+      addCatalog: '添加目录',
+      addCatalogFirst: '请先添加目录',
+      addFirst: '请先添加',
+      goodsIdPlaceholder: '请输入商品ID',
+      goodsNamePlaceholder: '请输入商品名称',
+      statePlaceholder: '请选择状态',
+      stateNotOnline: '未上线',
+      stateOnline: '上线',
+      goodsCover: '商品封面',
+      goodsName: '名称(编号)',
+      params: '参数',
+      reserveWay: '预约方式',
+      day: '日',
+      week: '周',
+      reserveCount: '预约次数',
+      reserveQuantity: '预约数量',
+      price: '单价',
+      validDate: '有效期',
+      reserveStartTime: '开始预约时间',
+      sort: '排序',
+      state: '状态',
+      reserveDining: '预约就餐',
+      diningStatistics: '就餐统计',
+      dining: '就餐',
+      fetchError: '获取数据失败'
+    },
+    reserveDining: {
+      reservePerson: '预约人',
+      reservePersonPlaceholder: '必填，请填写预约人',
+      reservePersonRequired: '预约人不能为空',
+      reservePersonMaxLength: '预约人不能超过64个字符',
+      reserveTel: '预约电话',
+      reserveTelPlaceholder: '必填，请填写预约电话',
+      reserveTelRequired: '预约电话不能为空',
+      reserveTelMaxLength: '预约电话不能超过11个字符',
+      payWay: '支付方式',
+      payWayPlaceholder: '请选择支付方式',
+      payWayRequired: '支付方式不能为空',
+      cash: '现金',
+      wechat: '微信',
+      alipay: '支付宝',
+      reserveQuantity: '预约数量',
+      reserveQuantityPlaceholder: '请选择预约数量',
+      unit: '个',
+      receivableAmount: '应收金额',
+      receivableAmountPlaceholder: '必填，请填写应收金额',
+      receivableAmountRequired: '应收金额不能为空',
+      receivedAmount: '实收金额',
+      receivedAmountPlaceholder: '必填，请填写实收金额',
+      receivedAmountRequired: '实收金额不能为空',
+      reserveDate: '预约日期',
+      reserveDatePlaceholder: '必填，请选择预约日期',
+      reserveDateRequired: '预约日期不能为空',
+      reserveTime: '预约时间',
+      reserveTimePlaceholder: '必填，请选择预约时间',
+      hour: '时',
+      remark: '备注',
+      remarkPlaceholder: '必填，请填写备注',
+      remarkRequired: '备注不能为空',
+      confirmDelete: '确定删除预约就餐?'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/reserveDiningManageList.vue b/src/views/scm/reserveDiningManageList.vue
new file mode 100644
index 0000000..9c9d719
--- /dev/null
+++ b/src/views/scm/reserveDiningManageList.vue
@@ -0,0 +1,295 @@
+<template>
+  <div class="reserve-dining-manage-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="border-radius">
+          <div class="treeview attendance-staff">
+            <ul class="list-group text-center border-radius"
+              v-if="reserveDiningManageInfo.catalogs && reserveDiningManageInfo.catalogs.length > 0">
+              <li class="list-group-item node-orgTree" v-for="(item, index) in reserveDiningManageInfo.catalogs"
+                :key="index" @click="swatchReserveCatalog(item)"
+                :class="{ 'vc-node-selected': reserveDiningManageInfo.conditions.catalogId == item.catalogId }">
+                {{ item.name }}
+              </li>
+            </ul>
+            <ul class="list-group text-center border-radius" v-else>
+              <li class="list-group-item node-orgTree" @click="_addCatalog()">
+                {{ $t('reserveDiningManage.addCatalog') }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="text-left">
+            <span>{{ $t('reserveDiningManage.searchTitle') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-input v-model="reserveDiningManageInfo.conditions.goodsId"
+                :placeholder="$t('reserveDiningManage.goodsIdPlaceholder')" clearable />
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model="reserveDiningManageInfo.conditions.goodsName"
+                :placeholder="$t('reserveDiningManage.goodsNamePlaceholder')" clearable />
+            </el-col>
+            <el-col :span="6">
+              <el-select v-model="reserveDiningManageInfo.conditions.state"
+                :placeholder="$t('reserveDiningManage.statePlaceholder')" style="width:100%" clearable>
+                <el-option :label="$t('reserveDiningManage.stateNotOnline')" value="1001" />
+                <el-option :label="$t('reserveDiningManage.stateOnline')" value="2002" />
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="_queryReserveDiningMethod()" icon="el-icon-search">
+                {{ $t('common.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card class="margin-top">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('reserveDiningManage.listTitle') }}</span>
+            <div style="float: right;">
+              <el-button type="primary" size="small" @click="_doOwnerDining()">
+                {{ $t('reserveDiningManage.diningStatistics') }}
+              </el-button>
+              <el-button type="primary" size="small" @click="_doDining()">
+                {{ $t('reserveDiningManage.dining') }}
+              </el-button>
+              <el-button type="primary" size="small" @click="_openAddReserveDiningModal()">
+                {{ $t('common.add') }}
+              </el-button>
+            </div>
+          </div>
+
+          <el-table :data="reserveDiningManageInfo.reserveDinings" border style="width: 100%" v-loading="loading">
+            <el-table-column :label="$t('reserveDiningManage.goodsCover')" align="center">
+              <template slot-scope="scope">
+                <el-image style="width: 60px; height: 60px; border-radius: 5px;"
+                  :src="scope.row.imgUrl || '/img/noPhoto.jpg'" fit="cover" />
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('reserveDiningManage.goodsName')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.goodsName }}({{ scope.row.goodsId }})
+              </template>
+            </el-table-column>
+            <el-table-column prop="paramsName" :label="$t('reserveDiningManage.params')" align="center" />
+            <el-table-column :label="$t('reserveDiningManage.reserveWay')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.paramWay == '1' ? $t('reserveDiningManage.day') : $t('reserveDiningManage.week') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxQuantity" :label="$t('reserveDiningManage.reserveCount')" align="center" />
+            <el-table-column prop="hoursMaxQuantity" :label="$t('reserveDiningManage.reserveQuantity')"
+              align="center" />
+            <el-table-column prop="price" :label="$t('reserveDiningManage.price')" align="center" />
+            <el-table-column :label="$t('reserveDiningManage.validDate')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.startDate }}~{{ scope.row.endDate }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="startTime" :label="$t('reserveDiningManage.reserveStartTime')" align="center" />
+            <el-table-column prop="sort" :label="$t('reserveDiningManage.sort')" align="center" />
+            <el-table-column :label="$t('reserveDiningManage.state')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.state == '1001' ? $t('reserveDiningManage.stateNotOnline') :
+                  $t('reserveDiningManage.stateOnline')}}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('common.operation')" align="center" width="250">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="_openReserveDiningPersonModel(scope.row)">
+                  {{ $t('reserveDiningManage.reserveDining') }}
+                </el-button>
+                <el-button size="mini" type="primary" @click="_openEditReserveDiningModel(scope.row)">
+                  {{ $t('common.edit') }}
+                </el-button>
+                <el-button size="mini" type="danger" @click="_openDeleteReserveDiningModel(scope.row)">
+                  {{ $t('common.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="page.total" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <add-reserve-dining-person ref="addReserveDiningPerson" @success="handleSuccess" />
+    <delete-reserve-dining ref="deleteReserveDining" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { listReserveGoods, listReserveCatalog } from '@/api/scm/reserveDiningManageApi'
+import AddReserveDiningPerson from '@/components/scm/addReserveDiningPerson'
+import DeleteReserveDining from '@/components/scm/deleteReserveDining'
+
+export default {
+  name: 'ReserveDiningManageList',
+  components: {
+    AddReserveDiningPerson,
+    DeleteReserveDining
+  },
+  data() {
+    return {
+      loading: false,
+      reserveDiningManageInfo: {
+        reserveDinings: [],
+        catalogs: [],
+        conditions: {
+          goodsId: '',
+          goodsName: '',
+          type: '1001',
+          state: '',
+          catalogId: '',
+          communityId: getCommunityId(),
+          page: 1,
+          row: 10
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._listReserveCatalogs()
+  },
+  methods: {
+    async _listReserveDinings(page, rows) {
+      try {
+        this.loading = true
+        this.reserveDiningManageInfo.conditions.page = page || this.page.current
+        this.reserveDiningManageInfo.conditions.row = rows || this.page.size
+
+        const { data, total } = await listReserveGoods(this.reserveDiningManageInfo.conditions)
+        this.reserveDiningManageInfo.reserveDinings = data
+        this.page.total = total
+      } catch (error) {
+        console.error(error)
+        this.$message.error(this.$t('reserveDiningManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async _listReserveCatalogs() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: getCommunityId(),
+          type: '1001'
+        }
+
+        const { data } = await listReserveCatalog(params)
+        this.reserveDiningManageInfo.catalogs = data
+        if (data && data.length > 0) {
+          this.swatchReserveCatalog(data[0])
+        }
+      } catch (error) {
+        console.error(error)
+      }
+    },
+    swatchReserveCatalog(item) {
+      this.reserveDiningManageInfo.conditions.catalogId = item.catalogId
+      this._listReserveDinings()
+    },
+    _queryReserveDiningMethod() {
+      this.page.current = 1
+      this._listReserveDinings()
+    },
+    _openAddReserveDiningModal() {
+      if (!this.reserveDiningManageInfo.conditions.catalogId) {
+        this.$message.warning(this.$t('reserveDiningManage.addCatalogFirst'))
+        return
+      }
+      this.$router.push(`/views/scm/addReserveDining?catalogId=${this.reserveDiningManageInfo.conditions.catalogId}`)
+    },
+    _openEditReserveDiningModel(reserveDining) {
+      this.$router.push(`/views/scm/editReserveDining?goodsId=${reserveDining.goodsId}`)
+    },
+    _openDeleteReserveDiningModel(reserveDining) {
+      this.$refs.deleteReserveDining.open(reserveDining)
+    },
+    _openReserveDiningPersonModel(reserveDining) {
+      this.$refs.addReserveDiningPerson.open(reserveDining)
+    },
+    _addCatalog() {
+      this.$router.push('/scm/reserveCatalogManage?tab=reserveCatalog')
+    },
+    _doDining() {
+      if (!this.reserveDiningManageInfo.reserveDinings || this.reserveDiningManageInfo.reserveDinings.length < 1) {
+        this.$message.warning(this.$t('reserveDiningManage.addFirst'))
+        return
+      }
+      this.$router.push('/views/scm/doDining')
+    },
+    _doOwnerDining() {
+      this.$router.push('/views/scm/ownerDining')
+    },
+    handleSuccess() {
+      this._listReserveDinings()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listReserveDinings()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listReserveDinings()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reserve-dining-manage-container {
+  padding: 20px;
+
+  .border-radius {
+    border-radius: 4px;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+
+  .list-group {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+
+    .list-group-item {
+      padding: 10px 15px;
+      border: 1px solid #ddd;
+      margin-bottom: -1px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: #f5f5f5;
+      }
+    }
+
+    .vc-node-selected {
+      background-color: #409EFF;
+      color: white;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/reserveOrderLang.js b/src/views/scm/reserveOrderLang.js
new file mode 100644
index 0000000..fa83213
--- /dev/null
+++ b/src/views/scm/reserveOrderLang.js
@@ -0,0 +1,74 @@
+export const messages = {
+  en: {
+    reserveOrder: {
+      diningOrder: 'Dining Order',
+      serviceOrder: 'Service Order',
+      searchCondition: 'Search Condition',
+      selectAppointmentTime: 'Select Appointment Time',
+      selectAppointmentPerson: 'Select Appointment Person',
+      selectAppointmentPhone: 'Select Appointment Phone',
+      selectStatus: 'Select Status',
+      allStatus: 'All Status',
+      successStatus: 'Success',
+      failStatus: 'Failed',
+      waitAuditStatus: 'Wait Audit',
+      waitPayStatus: 'Wait Pay',
+      inputName: 'Input Name',
+      orderId: 'Order ID',
+      goodsName: 'Goods Name',
+      appointmentPerson: 'Appointment Person',
+      appointmentPhone: 'Appointment Phone',
+      appointmentDate: 'Appointment Date',
+      appointmentTime: 'Appointment Time',
+      hour: 'hour',
+      unit: 'unit',
+      receivableAmount: 'Receivable Amount',
+      receivedAmount: 'Received Amount',
+      payWay: 'Pay Way',
+      status: 'Status',
+      createTime: 'Create Time',
+      remark: 'Remark',
+      cancelAppointment: 'Cancel Appointment',
+      confirmCancel: 'Confirm to cancel this appointment?',
+      cancelSuccess: 'Cancel success',
+      cancelError: 'Cancel failed',
+      fetchError: 'Fetch data failed'
+    }
+  },
+  zh: {
+    reserveOrder: {
+      diningOrder: '就餐订单',
+      serviceOrder: '服务订单',
+      searchCondition: '查询条件',
+      selectAppointmentTime: '请选择预约时间',
+      selectAppointmentPerson: '请选择预约人',
+      selectAppointmentPhone: '请选择预约电话',
+      selectStatus: '请选择状态',
+      allStatus: '全部状态',
+      successStatus: '预约成功',
+      failStatus: '预约失败',
+      waitAuditStatus: '待审核',
+      waitPayStatus: '待支付',
+      inputName: '请输入名称',
+      orderId: '订单编号',
+      goodsName: '名称',
+      appointmentPerson: '预约人',
+      appointmentPhone: '预约电话',
+      appointmentDate: '预约日期',
+      appointmentTime: '预约时间',
+      hour: '时',
+      unit: '个',
+      receivableAmount: '应收金额',
+      receivedAmount: '实收金额',
+      payWay: '支付方式',
+      status: '状态',
+      createTime: '预约时间',
+      remark: '备注',
+      cancelAppointment: '取消预约',
+      confirmCancel: '确定要取消此预约吗？',
+      cancelSuccess: '取消成功',
+      cancelError: '取消失败',
+      fetchError: '获取数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/reserveOrderList.vue b/src/views/scm/reserveOrderList.vue
new file mode 100644
index 0000000..ad14f2a
--- /dev/null
+++ b/src/views/scm/reserveOrderList.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="reserve-order-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="tree-card">
+          <ul class="tree-list">
+            <li class="tree-item" :class="{ 'active': reserveOrderInfo.conditions.type === '1001' }"
+              @click="_changeType('1001')">
+              {{ $t('reserveOrder.diningOrder') }}
+            </li>
+            <li class="tree-item" :class="{ 'active': reserveOrderInfo.conditions.type === '2002' }"
+              @click="_changeType('2002')">
+              {{ $t('reserveOrder.serviceOrder') }}
+            </li>
+          </ul>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="text-left">
+            <span>{{ $t('reserveOrder.searchCondition') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-input v-model="reserveOrderInfo.conditions.appointmentTime"
+                :placeholder="$t('reserveOrder.selectAppointmentTime')" />
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model="reserveOrderInfo.conditions.personName"
+                :placeholder="$t('reserveOrder.selectAppointmentPerson')" />
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model="reserveOrderInfo.conditions.personTel"
+                :placeholder="$t('reserveOrder.selectAppointmentPhone')" />
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="_queryReserveOrderPersonMethod">
+                <i class="el-icon-search"></i>
+                {{ $t('common.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-top: 20px;">
+            <el-col :span="6">
+              <el-select v-model="reserveOrderInfo.conditions.state" :placeholder="$t('reserveOrder.selectStatus')"
+                style="width:100%">
+                <el-option :label="$t('reserveOrder.allStatus')" value="" />
+                <el-option :label="$t('reserveOrder.successStatus')" value="S" />
+                <el-option :label="$t('reserveOrder.failStatus')" value="F" />
+                <el-option :label="$t('reserveOrder.waitAuditStatus')" value="W" />
+                <el-option :label="$t('reserveOrder.waitPayStatus')" value="F" />
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-input v-model="reserveOrderInfo.conditions.goodsNameLike"
+                :placeholder="$t('reserveOrder.inputName')" />
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card style="margin-top: 20px;">
+          <div slot="header" class="flex justify-between">
+            <span v-if="reserveOrderInfo.conditions.type === '1001'">
+              {{ $t('reserveOrder.diningOrder') }}
+            </span>
+            <span v-else>
+              {{ $t('reserveOrder.serviceOrder') }}
+            </span>
+          </div>
+          <el-table :data="reserveOrderInfo.orders" border style="width: 100%" v-loading="loading">
+            <el-table-column prop="orderId" :label="$t('reserveOrder.orderId')" align="center" />
+            <el-table-column prop="goodsName" :label="$t('reserveOrder.goodsName')" align="center" />
+            <el-table-column prop="personName" :label="$t('reserveOrder.appointmentPerson')" align="center" />
+            <el-table-column prop="personTel" :label="$t('reserveOrder.appointmentPhone')" align="center" />
+            <el-table-column prop="appointmentTime" :label="$t('reserveOrder.appointmentDate')" align="center" />
+            <el-table-column :label="$t('reserveOrder.appointmentTime')" align="center">
+              <template slot-scope="scope">
+                <span v-for="(time, index) in scope.row.times" :key="index">
+                  {{ time.hours }}{{ $t('reserveOrder.hour') }}
+                  <span v-if="scope.row.type === '1001'">({{ time.quantity }}{{ $t('reserveOrder.unit') }})</span>
+                  <span v-if="index < scope.row.times.length - 1">,</span>
+                </span>
+              </template>
+            </el-table-column>
+            <el-table-column prop="receivableAmount" :label="$t('reserveOrder.receivableAmount')" align="center" />
+            <el-table-column prop="receivedAmount" :label="$t('reserveOrder.receivedAmount')" align="center" />
+            <el-table-column prop="payWayName" :label="$t('reserveOrder.payWay')" align="center" />
+            <el-table-column prop="stateName" :label="$t('reserveOrder.status')" align="center" />
+            <el-table-column prop="createTime" :label="$t('reserveOrder.createTime')" align="center" />
+            <el-table-column prop="remark" :label="$t('reserveOrder.remark')" align="center" />
+            <el-table-column :label="$t('common.operation')" align="center" width="150">
+              <template slot-scope="scope">
+                <el-button v-if="scope.row.state === 'S'" type="text" size="small"
+                  @click="_openDeleteReserveOrderPersonModel(scope.row)">
+                  {{ $t('reserveOrder.cancelAppointment') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="page.total" style="margin-top: 20px;" />
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <delete-reserve-order-person ref="deleteReserveOrderPerson" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listReserveGoodsOrder } from '@/api/scm/reserveOrderApi'
+import DeleteReserveOrderPerson from '@/components/scm/deleteReserveOrderPerson'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ReserveOrderList',
+  components: {
+    DeleteReserveOrderPerson
+  },
+  data() {
+    return {
+      loading: false,
+      reserveOrderInfo: {
+        orders: [],
+        conditions: {
+          type: '1001',
+          goodsNameLike: '',
+          personName: '',
+          personTel: '',
+          appointmentTime: '',
+          state: '',
+          communityId: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.reserveOrderInfo.conditions.communityId = getCommunityId()
+    this._listReserveOrderPersons(this.page.current, this.page.size)
+  },
+  methods: {
+    async _listReserveOrderPersons(page, size) {
+      try {
+        this.loading = true
+        const params = {
+          ...this.reserveOrderInfo.conditions,
+          page,
+          row: size
+        }
+        const { data, total } = await listReserveGoodsOrder(params)
+        this.reserveOrderInfo.orders = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('reserveOrder.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _openDeleteReserveOrderPersonModel(row) {
+      this.$refs.deleteReserveOrderPerson.open(row)
+    },
+    _queryReserveOrderPersonMethod() {
+      this.page.current = 1
+      this._listReserveOrderPersons(this.page.current, this.page.size)
+    },
+    _changeType(type) {
+      this.reserveOrderInfo.conditions.type = type
+      this._listReserveOrderPersons(this.page.current, this.page.size)
+    },
+    handleSuccess() {
+      this._listReserveOrderPersons(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listReserveOrderPersons(this.page.current, this.page.size)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listReserveOrderPersons(this.page.current, this.page.size)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reserve-order-container {
+  padding: 20px;
+
+  .tree-card {
+    height: 100%;
+
+    .tree-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      .tree-item {
+        padding: 10px;
+        cursor: pointer;
+        border-radius: 4px;
+        margin-bottom: 5px;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+
+        &.active {
+          background-color: #409eff;
+          color: white;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/reserveParamsManageLang.js b/src/views/scm/reserveParamsManageLang.js
new file mode 100644
index 0000000..858c2bb
--- /dev/null
+++ b/src/views/scm/reserveParamsManageLang.js
@@ -0,0 +1,104 @@
+export const messages = {
+  en: {
+    reserveParamsManage: {
+      search: {
+        title: 'Search Conditions',
+        namePlaceholder: 'Please enter parameter name'
+      },
+      list: {
+        title: 'Reservation Parameters'
+      },
+      table: {
+        name: 'Parameter Name',
+        paramWay: 'Reservation Method',
+        startTime: 'Start Time',
+        maxQuantity: 'Max Quantity',
+        hoursMaxQuantity: 'Quantity Per Time',
+        operation: 'Operation'
+      },
+      day: 'Day',
+      week: 'Week',
+      dayUnit: 'th',
+      hour: 'o\'clock',
+      setTime: 'Set Time',
+      deleteTitle: 'Delete Confirmation',
+      deleteConfirm: 'Warning',
+      deleteTip: 'Are you sure to delete this reservation parameter? This operation cannot be undone!',
+      setTimeTitle: 'Set Open Time',
+      selectStatus: 'Select Status',
+      canReserve: 'Available',
+      cannotReserve: 'Unavailable',
+      addTitle: 'Add Reservation Parameter',
+      editTitle: 'Edit Reservation Parameter',
+      name: 'Parameter Name',
+      namePlaceholder: 'Please enter parameter name',
+      nameRequired: 'Parameter name is required',
+      paramWay: 'Reservation Method',
+      paramWayPlaceholder: 'Please select reservation method',
+      paramWayRequired: 'Reservation method is required',
+      days: 'Days',
+      weekdays: 'Weekdays',
+      startTime: 'Start Time',
+      startTimePlaceholder: 'Please select start time',
+      startTimeRequired: 'Start time is required',
+      maxQuantity: 'Max Quantity',
+      maxQuantityPlaceholder: 'Please enter max quantity',
+      maxQuantityRequired: 'Max quantity is required',
+      hoursMaxQuantity: 'Quantity Per Time',
+      hoursMaxQuantityPlaceholder: 'Please enter quantity per time',
+      hoursMaxQuantityRequired: 'Quantity per time is required',
+      fetchError: 'Failed to fetch reservation parameters'
+    }
+  },
+  zh: {
+    reserveParamsManage: {
+      search: {
+        title: '查询条件',
+        namePlaceholder: '请输入参数名称'
+      },
+      list: {
+        title: '预约参数'
+      },
+      table: {
+        name: '参数名称',
+        paramWay: '预约方式',
+        startTime: '开始时间',
+        maxQuantity: '预约次数',
+        hoursMaxQuantity: '预约数量',
+        operation: '操作'
+      },
+      day: '日',
+      week: '周',
+      dayUnit: '日',
+      hour: '点',
+      setTime: '设置时间',
+      deleteTitle: '删除确认',
+      deleteConfirm: '警告',
+      deleteTip: '确定删除该预约参数吗？此操作不可撤销！',
+      setTimeTitle: '设置开放时间',
+      selectStatus: '选择状态',
+      canReserve: '可预约',
+      cannotReserve: '不可预约',
+      addTitle: '添加预约参数',
+      editTitle: '编辑预约参数',
+      name: '参数名称',
+      namePlaceholder: '请输入参数名称',
+      nameRequired: '参数名称不能为空',
+      paramWay: '预约方式',
+      paramWayPlaceholder: '请选择预约方式',
+      paramWayRequired: '预约方式不能为空',
+      days: '日',
+      weekdays: '工作日',
+      startTime: '开始时间',
+      startTimePlaceholder: '请选择开始时间',
+      startTimeRequired: '开始时间不能为空',
+      maxQuantity: '预约次数',
+      maxQuantityPlaceholder: '请输入预约次数',
+      maxQuantityRequired: '预约次数不能为空',
+      hoursMaxQuantity: '预约数量',
+      hoursMaxQuantityPlaceholder: '请输入预约数量',
+      hoursMaxQuantityRequired: '预约数量不能为空',
+      fetchError: '获取预约参数失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/reserveParamsManageList.vue b/src/views/scm/reserveParamsManageList.vue
new file mode 100644
index 0000000..3fb5bf7
--- /dev/null
+++ b/src/views/scm/reserveParamsManageList.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="reserve-params-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="text-left">
+        <span>{{ $t('reserveParamsManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.name" :placeholder="$t('reserveParamsManage.search.namePlaceholder')"
+            clearable />
+        </el-col>
+        <el-col :span="2">
+          <el-button type="primary" @click="handleSearch">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 数据列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('reserveParamsManage.list.title') }}</span>
+        <el-button type="primary" size="mini" @click="handleAdd">
+          <i class="el-icon-plus"></i>
+          {{ $t('common.add') }}
+        </el-button>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width: 100%">
+        <el-table-column prop="name" :label="$t('reserveParamsManage.table.name')" align="center" />
+        <el-table-column prop="paramWay" :label="$t('reserveParamsManage.table.paramWay')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.paramWay === '1' ? $t('reserveParamsManage.day') : $t('reserveParamsManage.week') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="startTime" :label="$t('reserveParamsManage.table.startTime')" align="center" />
+        <el-table-column prop="maxQuantity" :label="$t('reserveParamsManage.table.maxQuantity')" align="center" />
+        <el-table-column prop="hoursMaxQuantity" :label="$t('reserveParamsManage.table.hoursMaxQuantity')"
+          align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="300" fixed="right">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="handleSetTime(scope.row)">
+              {{ $t('reserveParamsManage.setTime') }}
+            </el-button>
+            <el-button size="mini" type="warning" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+
+    <!-- 子组件 -->
+    <add-reserve-params ref="addReserveParams" @success="handleSuccess" />
+    <edit-reserve-params ref="editReserveParams" @success="handleSuccess" />
+    <delete-reserve-params ref="deleteReserveParams" @success="handleSuccess" />
+    <edit-reserve-params-open-time ref="editReserveParamsOpenTime" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listReserveParams } from '@/api/scm/reserveParamsManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import AddReserveParams from '@/components/scm/addReserveParams'
+import EditReserveParams from '@/components/scm/editReserveParams'
+import DeleteReserveParams from '@/components/scm/deleteReserveParams'
+import EditReserveParamsOpenTime from '@/components/scm/editReserveParamsOpenTime'
+
+export default {
+  name: 'ReserveParamsManageList',
+  components: {
+    AddReserveParams,
+    EditReserveParams,
+    DeleteReserveParams,
+    EditReserveParamsOpenTime
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        name: ''
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          name: this.searchForm.name,
+          communityId: this.communityId
+        }
+        const { data, total } = await listReserveParams(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('reserveParamsManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleAdd() {
+      this.$refs.addReserveParams.open()
+    },
+    handleEdit(row) {
+      this.$refs.editReserveParams.open(row)
+    },
+    handleSetTime(row) {
+      this.$refs.editReserveParamsOpenTime.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteReserveParams.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.reserve-params-manage-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .list-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/reserveServiceManageLang.js b/src/views/scm/reserveServiceManageLang.js
new file mode 100644
index 0000000..be4f40e
--- /dev/null
+++ b/src/views/scm/reserveServiceManageLang.js
@@ -0,0 +1,134 @@
+export const messages = {
+  en: {
+    reserveServiceManage: {
+      searchCondition: 'Search Condition',
+      goodsIdPlaceholder: 'Please enter service ID',
+      goodsNamePlaceholder: 'Please enter service name',
+      statePlaceholder: 'Please select status',
+      stateOffShelf: 'Off Shelf',
+      stateOnShelf: 'On Shelf',
+      reserveService: 'Reserve Service',
+      addService: 'Add Service',
+      serviceCover: 'Service Cover',
+      nameAndId: 'Name(ID)',
+      params: 'Parameters',
+      reserveWay: 'Reserve Way',
+      day: 'Day',
+      week: 'Week',
+      reserveCount: 'Reserve Count',
+      reserveQuantity: 'Reserve Quantity',
+      doorFee: 'Door Fee',
+      validity: 'Validity',
+      reserveStartTime: 'Reserve Start Time',
+      sort: 'Sort',
+      state: 'Status',
+      offShelf: 'Off Shelf',
+      onShelf: 'On Shelf',
+      addCatalog: 'Add Catalog',
+      addCatalogFirst: 'Please add catalog first'
+    },
+    addReserveServicePerson: {
+      reserveService: 'Reserve Service',
+      personName: 'Reserve Person',
+      personNamePlaceholder: 'Required, please enter reserve person',
+      personTel: 'Reserve Tel',
+      personTelPlaceholder: 'Required, please enter reserve tel',
+      payWay: 'Payment Way',
+      payWayPlaceholder: 'Please select payment way',
+      cash: 'Cash',
+      wechat: 'WeChat',
+      alipay: 'Alipay',
+      receivableAmount: 'Receivable Amount',
+      receivableAmountPlaceholder: 'Required, please enter receivable amount',
+      receivedAmount: 'Received Amount',
+      receivedAmountPlaceholder: 'Required, please enter received amount',
+      appointmentTime: 'Appointment Time',
+      appointmentTimePlaceholder: 'Required, please select appointment time',
+      openTime: 'Open Time',
+      openTimePlaceholder: 'Required, please select open time',
+      hour: ' o\'clock',
+      remark: 'Remark',
+      remarkPlaceholder: 'Required, please enter remark',
+      personNameRequired: 'Reserve person is required',
+      personNameMaxLength: 'Reserve person cannot exceed 64 characters',
+      personTelRequired: 'Reserve tel is required',
+      personTelMaxLength: 'Reserve tel cannot exceed 11 characters',
+      appointmentTimeRequired: 'Appointment time is required',
+      receivableAmountRequired: 'Receivable amount is required',
+      receivedAmountRequired: 'Received amount is required',
+      payWayRequired: 'Payment way is required',
+      remarkRequired: 'Remark is required',
+      openTimeRequired: 'Open time is required'
+    },
+    deleteReserveDining: {
+      confirmTitle: 'Please confirm your operation!',
+      confirmContent: 'Confirm to delete reserve service'
+    }
+  },
+  zh: {
+    reserveServiceManage: {
+      searchCondition: '查询条件',
+      goodsIdPlaceholder: '请输入服务ID',
+      goodsNamePlaceholder: '请输入服务名称',
+      statePlaceholder: '请选择状态',
+      stateOffShelf: '未上架',
+      stateOnShelf: '上架',
+      reserveService: '预约服务',
+      addService: '添加服务',
+      serviceCover: '服务封面',
+      nameAndId: '名称(编号)',
+      params: '参数',
+      reserveWay: '预约方式',
+      day: '日',
+      week: '周',
+      reserveCount: '预约次数',
+      reserveQuantity: '预约数量',
+      doorFee: '上门费',
+      validity: '有效期',
+      reserveStartTime: '开始预约时间',
+      sort: '排序',
+      state: '状态',
+      offShelf: '未上架',
+      onShelf: '上架',
+      addCatalog: '添加目录',
+      addCatalogFirst: '请先添加目录'
+    },
+    addReserveServicePerson: {
+      reserveService: '预约服务',
+      personName: '预约人',
+      personNamePlaceholder: '必填，请填写预约人',
+      personTel: '预约电话',
+      personTelPlaceholder: '必填，请填写预约电话',
+      payWay: '支付方式',
+      payWayPlaceholder: '请选择支付方式',
+      cash: '现金',
+      wechat: '微信',
+      alipay: '支付宝',
+      receivableAmount: '应收金额',
+      receivableAmountPlaceholder: '必填，请填写应收金额',
+      receivedAmount: '实收金额',
+      receivedAmountPlaceholder: '必填，请填写实收金额',
+      appointmentTime: '预约日期',
+      appointmentTimePlaceholder: '必填，请选择预约日期',
+      openTime: '预约时间',
+      openTimePlaceholder: '必填，请选择预约时间',
+      hour: '时',
+      remark: '备注',
+      remarkPlaceholder: '必填，请填写备注',
+      personNameRequired: '预约人不能为空',
+      personNameMaxLength: '预约人不能超过64个字符',
+      personTelRequired: '预约电话不能为空',
+      personTelMaxLength: '预约电话不能超过11个字符',
+      appointmentTimeRequired: '预约时间不能为空',
+      receivableAmountRequired: '应收金额不能为空',
+      receivedAmountRequired: '实收金额不能为空',
+      payWayRequired: '支付方式不能为空',
+      remarkRequired: '备注不能为空',
+      openTimeRequired: '预约时间不能为空'
+    },
+    deleteReserveDining: {
+      confirmTitle: '请确认您的操作!',
+      confirmContent: '确定删除预约服务'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/reserveServiceManageList.vue b/src/views/scm/reserveServiceManageList.vue
new file mode 100644
index 0000000..bc153cf
--- /dev/null
+++ b/src/views/scm/reserveServiceManageList.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="reserve-service-manage-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="tree-card">
+          <div class="treeview attendance-staff">
+            <ul class="list-group text-center border-radius"
+              v-if="reserveServiceManageInfo.catalogs && reserveServiceManageInfo.catalogs.length > 0">
+              <template v-for="(item, index) in reserveServiceManageInfo.catalogs">
+                <li class="list-group-item node-orgTree" :key="index" @click="swatchReserveCatalog(item)"
+                  :class="{ 'vc-node-selected': reserveServiceManageInfo.conditions.catalogId == item.catalogId }">
+                  {{ item.name }}
+                </li>
+              </template>
+            </ul>
+            <ul class="list-group text-center border-radius" v-else>
+              <li class="list-group-item node-orgTree" @click="_addCatalog()">
+                {{ $t('reserveServiceManage.addCatalog') }}
+              </li>
+            </ul>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+        <el-card>
+          <div slot="header" class="text-left">
+            <span>{{ $t('reserveServiceManage.searchCondition') }}</span>
+          </div>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-input :placeholder="$t('reserveServiceManage.goodsIdPlaceholder')"
+                v-model="reserveServiceManageInfo.conditions.goodsId">
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input :placeholder="$t('reserveServiceManage.goodsNamePlaceholder')"
+                v-model="reserveServiceManageInfo.conditions.goodsName">
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-select v-model="reserveServiceManageInfo.conditions.state"
+                :placeholder="$t('reserveServiceManage.statePlaceholder')" style="width:100%">
+                <el-option :label="$t('reserveServiceManage.stateOffShelf')" value="1001">
+                </el-option>
+                <el-option :label="$t('reserveServiceManage.stateOnShelf')" value="2002">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="_queryReserveServiceMethod()">
+                {{ $t('common.search') }}
+              </el-button>
+            </el-col>
+          </el-row>
+        </el-card>
+
+        <el-card style="margin-top:20px">
+          <div slot="header" class="flex justify-between">
+            <span>{{ $t('reserveServiceManage.reserveService') }}</span>
+            <el-button type="primary" size="mini" @click="_openAddReserveServiceModal()">
+              <i class="el-icon-plus"></i>
+              {{ $t('reserveServiceManage.addService') }}
+            </el-button>
+          </div>
+
+          <el-table :data="reserveServiceManageInfo.reserveServices" border style="width:100%">
+            <el-table-column :label="$t('reserveServiceManage.serviceCover')" align="center">
+              <template slot-scope="scope">
+                <el-image v-if="scope.row.imgUrl" style="width:60px;height:60px;border-radius:5px"
+                  :src="scope.row.imgUrl" fit="cover">
+                </el-image>
+                <el-image v-else style="width:60px;height:60px;border-radius:5px" src="/img/noPhoto.jpg" fit="cover">
+                </el-image>
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('reserveServiceManage.nameAndId')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.goodsName }}({{ scope.row.goodsId }})
+              </template>
+            </el-table-column>
+            <el-table-column prop="paramsName" :label="$t('reserveServiceManage.params')" align="center">
+            </el-table-column>
+            <el-table-column prop="paramWay" :label="$t('reserveServiceManage.reserveWay')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.paramWay == '1' ? $t('reserveServiceManage.day') : $t('reserveServiceManage.week') }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="maxQuantity" :label="$t('reserveServiceManage.reserveCount')" align="center">
+            </el-table-column>
+            <el-table-column prop="hoursMaxQuantity" :label="$t('reserveServiceManage.reserveQuantity')" align="center">
+            </el-table-column>
+            <el-table-column prop="price" :label="$t('reserveServiceManage.doorFee')" align="center">
+            </el-table-column>
+            <el-table-column :label="$t('reserveServiceManage.validity')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.startDate }}~{{ scope.row.endDate }}
+              </template>
+            </el-table-column>
+            <el-table-column prop="startTime" :label="$t('reserveServiceManage.reserveStartTime')" align="center">
+            </el-table-column>
+            <el-table-column prop="sort" :label="$t('reserveServiceManage.sort')" align="center">
+            </el-table-column>
+            <el-table-column :label="$t('reserveServiceManage.state')" align="center">
+              <template slot-scope="scope">
+                {{ scope.row.state == '1001' ? $t('reserveServiceManage.offShelf') : $t('reserveServiceManage.onShelf')
+                }}
+              </template>
+            </el-table-column>
+            <el-table-column :label="$t('common.operation')" align="center" width="200">
+              <template slot-scope="scope">
+                <el-button size="mini" @click="_openReserveServicePersonModel(scope.row)">
+                  {{ $t('reserveServiceManage.reserveService') }}
+                </el-button>
+                <el-button size="mini" type="primary" @click="_openEditReserveServiceModel(scope.row)">
+                  {{ $t('common.edit') }}
+                </el-button>
+                <el-button size="mini" type="danger" @click="_openDeleteReserveServiceModel(scope.row)">
+                  {{ $t('common.delete') }}
+                </el-button>
+              </template>
+            </el-table-column>
+          </el-table>
+
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+            layout="total, sizes, prev, pager, next, jumper" :total="page.total">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <add-reserve-service-person ref="addReserveServicePerson"></add-reserve-service-person>
+    <delete-reserve-dining ref="deleteReserveDining" @success="handleDeleteSuccess"></delete-reserve-dining>
+  </div>
+</template>
+
+<script>
+import { listReserveGoods, listReserveCatalog } from '@/api/scm/reserveServiceManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import AddReserveServicePerson from '@/components/scm/addReserveServicePerson'
+import DeleteReserveDining from '@/components/scm/deleteReserveDining'
+
+export default {
+  name: 'ReserveServiceManageList',
+  components: {
+    AddReserveServicePerson,
+    DeleteReserveDining
+  },
+  data() {
+    return {
+      reserveServiceManageInfo: {
+        reserveServices: [],
+        catalogs: [],
+        conditions: {
+          goodsId: '',
+          goodsName: '',
+          type: '2002',
+          state: '',
+          catalogId: '',
+          communityId: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.reserveServiceManageInfo.conditions.communityId = getCommunityId()
+    this._listReserveCatalogs()
+  },
+  methods: {
+    async _listReserveServices(page, rows) {
+      try {
+        this.reserveServiceManageInfo.conditions.page = page
+        this.reserveServiceManageInfo.conditions.row = rows
+        const { data, total } = await listReserveGoods(this.reserveServiceManageInfo.conditions)
+        this.reserveServiceManageInfo.reserveServices = data
+        this.page.total = total
+      } catch (error) {
+        console.error('获取预约服务列表失败:', error)
+      }
+    },
+    async _listReserveCatalogs() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.reserveServiceManageInfo.conditions.communityId,
+          type: '2002'
+        }
+        const { data } = await listReserveCatalog(params)
+        this.reserveServiceManageInfo.catalogs = data
+        if (data && data.length > 0) {
+          this.swatchReserveCatalog(data[0])
+        }
+      } catch (error) {
+        console.error('获取预约目录失败:', error)
+      }
+    },
+    _openAddReserveServiceModal() {
+      if (!this.reserveServiceManageInfo.conditions.catalogId) {
+        this.$message.warning(this.$t('reserveServiceManage.addCatalogFirst'))
+        return
+      }
+      this.$router.push(`/views/scm/addReserveService?catalogId=${this.reserveServiceManageInfo.conditions.catalogId}`)
+    },
+    _openEditReserveServiceModel(reserveService) {
+      this.$router.push(`/views/scm/editReserveService?goodsId=${reserveService.goodsId}`)
+    },
+    _openDeleteReserveServiceModel(reserveService) {
+      this.$refs.deleteReserveDining.open(reserveService)
+    },
+    _queryReserveServiceMethod() {
+      this._listReserveServices(1, this.page.size)
+    },
+    _openReserveServicePersonModel(reserveService) {
+      this.$refs.addReserveServicePerson.open(reserveService)
+    },
+    swatchReserveCatalog(item) {
+      this.reserveServiceManageInfo.conditions.catalogId = item.catalogId
+      this._listReserveServices(1, this.page.size)
+    },
+    _addCatalog() {
+      this.$router.push('/pages/reserve/reserveCatalogManage?tab=reserveCatalog')
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listReserveServices(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listReserveServices(val, this.page.size)
+    },
+    handleDeleteSuccess() {
+      this._listReserveServices(1, this.page.size)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.reserve-service-manage-container {
+  padding: 20px;
+}
+
+.tree-card {
+  height: 100%;
+}
+
+.list-group-item {
+  padding: 10px;
+  cursor: pointer;
+  border: 1px solid #ebeef5;
+  margin-bottom: 5px;
+}
+
+.list-group-item:hover {
+  background-color: #f5f7fa;
+}
+
+.vc-node-selected {
+  background-color: #ecf5ff;
+  color: #409eff;
+  border-color: #d9ecff;
+}
+
+.el-pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file