From 6ed9faf14d7219f2f823b87a775dfe04f2f1da3f Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Sat, 28 Jun 2025 14:44:27 +0800
Subject: [PATCH] 开发完成优惠下的积分功能

---
 src/api/scm/communityIntegralApi.js                | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/scm/goldApi.js                             | 102 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/scm/reserveCatalogManageApi.js             |  78 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/addReserveCatalog.vue           | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/applyWithholdGold.vue           | 110 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/applyWithholdIntegral.vue       | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/communityIntegralDetail.vue     |  86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/deleteApplyWithholdGold.vue     |  59 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/deleteApplyWithholdIntegral.vue |  68 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/deleteReserveCatalog.vue        |  80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/editReserveCatalog.vue          | 150 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/goldDetail.vue                  |  93 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/withholdGold.vue                | 168 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/scm/withholdIntegral.vue            | 185 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/i18n/scmI18n.js                                |   9 +++++++++
 src/router/scmRouter.js                            |  15 +++++++++++++++
 src/views/scm/communityIntegralLang.js             | 144 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/scm/communityIntegralList.vue            | 179 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/scm/goldLang.js                          | 126 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/scm/goldList.vue                         | 185 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/scm/reserveCatalogManageLang.js          | 154 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/scm/reserveCatalogManageList.vue         | 174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 22 files changed, 2514 insertions(+), 0 deletions(-)
 create mode 100644 src/api/scm/communityIntegralApi.js
 create mode 100644 src/api/scm/goldApi.js
 create mode 100644 src/api/scm/reserveCatalogManageApi.js
 create mode 100644 src/components/scm/addReserveCatalog.vue
 create mode 100644 src/components/scm/applyWithholdGold.vue
 create mode 100644 src/components/scm/applyWithholdIntegral.vue
 create mode 100644 src/components/scm/communityIntegralDetail.vue
 create mode 100644 src/components/scm/deleteApplyWithholdGold.vue
 create mode 100644 src/components/scm/deleteApplyWithholdIntegral.vue
 create mode 100644 src/components/scm/deleteReserveCatalog.vue
 create mode 100644 src/components/scm/editReserveCatalog.vue
 create mode 100644 src/components/scm/goldDetail.vue
 create mode 100644 src/components/scm/withholdGold.vue
 create mode 100644 src/components/scm/withholdIntegral.vue
 create mode 100644 src/views/scm/communityIntegralLang.js
 create mode 100644 src/views/scm/communityIntegralList.vue
 create mode 100644 src/views/scm/goldLang.js
 create mode 100644 src/views/scm/goldList.vue
 create mode 100644 src/views/scm/reserveCatalogManageLang.js
 create mode 100644 src/views/scm/reserveCatalogManageList.vue

diff --git a/src/api/scm/communityIntegralApi.js b/src/api/scm/communityIntegralApi.js
new file mode 100644
index 0000000..05353e5
--- /dev/null
+++ b/src/api/scm/communityIntegralApi.js
@@ -0,0 +1,102 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询小区积分信息
+export function queryCommunityIntegral(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.getMallOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId(),
+        mallApiCode: 'queryCommunityIntegralBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询小区积分明细
+export function queryCommunityIntegralDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.getMallOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId(),
+        mallApiCode: 'queryCommunityIntegralDetailBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询积分提现申请
+export function queryCommunityIntegralApply(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.getMallOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId(),
+        mallApiCode: 'queryCommunityIntegralApplyBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 申请积分提现
+export function applyIntegralWithdrawal(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.postMallOpenApi',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId(),
+        mallApiCode: 'applyIntegralWithdrawalBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除积分提现申请
+export function deleteIntegralWithdrawal(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.postMallOpenApi',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId(),
+        mallApiCode: 'deleteIntegralWithdrawalBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/scm/goldApi.js b/src/api/scm/goldApi.js
new file mode 100644
index 0000000..7182b31
--- /dev/null
+++ b/src/api/scm/goldApi.js
@@ -0,0 +1,102 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取金币账户信息
+export function getPropertyGoldInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.getMallOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId(),
+        mallApiCode: 'queryPropertyGoldBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取金币交易明细
+export function getPropertyGoldDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.getMallOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId(),
+        mallApiCode: 'queryPropertyGoldDetailBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取金币提现申请列表
+export function getPropertyGoldApplys(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.getMallOpenApi',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: params.communityId || getCommunityId(),
+        mallApiCode: 'queryPropertyGoldApplysBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 申请金币提现
+export function applyGoldWithHold(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.postMallOpenApi',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: data.communityId || getCommunityId(),
+        mallApiCode: 'applyGoldWithHoldBmoImpl'
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除金币提现申请
+export function deleteGoldWithHold(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/mall.postMallOpenApi',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: data.communityId || getCommunityId(),
+        mallApiCode: 'deleteGoldWithHoldBmoImpl'
+      }
+    }).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
new file mode 100644
index 0000000..721e91a
--- /dev/null
+++ b/src/api/scm/reserveCatalogManageApi.js
@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取预约目录列表
+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 saveReserveCatalog(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.saveReserveCatalog',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新预约目录
+export function updateReserveCatalog(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.updateReserveCatalog',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除预约目录
+export function deleteReserveCatalog(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reserve.deleteReserveCatalog',
+      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/components/scm/addReserveCatalog.vue b/src/components/scm/addReserveCatalog.vue
new file mode 100644
index 0000000..4b01681
--- /dev/null
+++ b/src/components/scm/addReserveCatalog.vue
@@ -0,0 +1,143 @@
+<template>
+  <el-dialog
+    :title="$t('reserveCatalogManage.add.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('reserveCatalogManage.add.name')"
+        prop="name"
+      >
+        <el-input
+          v-model="formData.name"
+          :placeholder="$t('reserveCatalogManage.add.namePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('reserveCatalogManage.add.sort')"
+        prop="sort"
+      >
+        <el-input
+          v-model="formData.sort"
+          :placeholder="$t('reserveCatalogManage.add.sortPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('reserveCatalogManage.add.type')"
+        prop="type"
+      >
+        <el-select
+          v-model="formData.type"
+          :placeholder="$t('reserveCatalogManage.add.typePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('reserveCatalogManage.add.typeOption1')"
+            value="1001"
+          />
+          <el-option
+            :label="$t('reserveCatalogManage.add.typeOption2')"
+            value="2002"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('reserveCatalogManage.add.state')"
+        prop="state"
+      >
+        <el-select
+          v-model="formData.state"
+          :placeholder="$t('reserveCatalogManage.add.statePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('reserveCatalogManage.add.stateOption1')"
+            value="1001"
+          />
+          <el-option
+            :label="$t('reserveCatalogManage.add.stateOption2')"
+            value="2002"
+          />
+        </el-select>
+      </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="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { saveReserveCatalog } from '@/api/scm/reserveCatalogManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddReserveCatalog',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        name: '',
+        sort: '',
+        type: '',
+        state: '',
+        communityId: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.nameRequired'), trigger: 'blur' },
+          { max: 128, message: this.$t('reserveCatalogManage.validate.nameMaxLength'), trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.sortRequired'), trigger: 'blur' },
+          { max: 12, message: this.$t('reserveCatalogManage.validate.sortMaxLength'), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.typeRequired'), trigger: 'change' }
+        ],
+        state: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.stateRequired'), trigger: 'change' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.formData.communityId = getCommunityId()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form.resetFields()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveReserveCatalog(this.formData)
+            this.$message.success(this.$t('reserveCatalogManage.add.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(this.$t('reserveCatalogManage.add.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/applyWithholdGold.vue b/src/components/scm/applyWithholdGold.vue
new file mode 100644
index 0000000..87e13aa
--- /dev/null
+++ b/src/components/scm/applyWithholdGold.vue
@@ -0,0 +1,110 @@
+<template>
+  <div class="apply-withhold-gold-container">
+    <el-table v-loading="loading" :data="applys" border style="width: 100%">
+      <el-table-column prop="gwId" :label="$t('applyWithholdGold.id')" align="center" />
+      <el-table-column prop="goldId" :label="$t('applyWithholdGold.goldId')" align="center" />
+      <el-table-column prop="goldName" :label="$t('applyWithholdGold.accountName')" align="center" />
+      <el-table-column prop="communityId" :label="$t('applyWithholdGold.communityId')" align="center" />
+      <el-table-column prop="amount" :label="$t('applyWithholdGold.withdrawAmount')" align="center" />
+      <el-table-column prop="applyUserName" :label="$t('applyWithholdGold.applicant')" align="center" />
+      <el-table-column prop="applyUserTel" :label="$t('applyWithholdGold.applicantPhone')" align="center" />
+      <el-table-column prop="bankNum" :label="$t('applyWithholdGold.bankAccount')" align="center" />
+      <el-table-column prop="bankNumName" :label="$t('applyWithholdGold.accountName')" align="center" />
+      <el-table-column prop="bankName" :label="$t('applyWithholdGold.bankName')" align="center" />
+      <el-table-column prop="remark" :label="$t('applyWithholdGold.applicationNote')" align="center" />
+      <el-table-column prop="stateName" :label="$t('applyWithholdGold.status')" align="center" />
+      <el-table-column prop="stateMsg" :label="$t('applyWithholdGold.reviewNote')" align="center" />
+      <el-table-column :label="$t('common.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button size="mini" type="danger" @click="openDeleteDialog(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" />
+
+    <delete-apply-withhold-gold ref="deleteDialog" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getPropertyGoldApplys } from '@/api/scm/goldApi'
+import DeleteApplyWithholdGold from '@/components/scm/deleteApplyWithholdGold'
+
+export default {
+  name: 'ApplyWithholdGold',
+  components: {
+    DeleteApplyWithholdGold
+  },
+  data() {
+    return {
+      goldId: '',
+      goldName: '',
+      loading: false,
+      applys: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(gold) {
+      this.goldId = gold.goldId
+      this.goldName = gold.goldName
+      this.loadData()
+    },
+    async loadData() {
+      if (!this.goldId) return
+
+      try {
+        this.loading = true
+        const params = {
+          communityId: getCommunityId(),
+          goldId: this.goldId,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await getPropertyGoldApplys(params)
+        this.applys = data
+        this.page.total = total
+      } catch (error) {
+        console.error('Failed to load apply withhold gold:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadData()
+    },
+    openDeleteDialog(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    handleSuccess() {
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.apply-withhold-gold-container {
+  padding: 20px 0;
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/applyWithholdIntegral.vue b/src/components/scm/applyWithholdIntegral.vue
new file mode 100644
index 0000000..f07b047
--- /dev/null
+++ b/src/components/scm/applyWithholdIntegral.vue
@@ -0,0 +1,104 @@
+<template>
+  <div>
+    <el-table v-loading="loading" :data="applys" border style="width: 100%">
+      <el-table-column prop="iwId" :label="$t('applyWithholdIntegral.id')" align="center" />
+      <el-table-column prop="integralId" :label="$t('applyWithholdIntegral.integralId')" align="center" />
+      <el-table-column prop="integralName" :label="$t('applyWithholdIntegral.integralName')" align="center" />
+      <el-table-column prop="amount" :label="$t('applyWithholdIntegral.withdrawAmount')" align="center" />
+      <el-table-column prop="applyUserName" :label="$t('applyWithholdIntegral.applicant')" align="center" />
+      <el-table-column prop="applyUserTel" :label="$t('applyWithholdIntegral.applicantPhone')" align="center" />
+      <el-table-column prop="bankNum" :label="$t('applyWithholdIntegral.bankAccount')" align="center" />
+      <el-table-column prop="bankNumName" :label="$t('applyWithholdIntegral.accountName')" align="center" />
+      <el-table-column prop="bankName" :label="$t('applyWithholdIntegral.bank')" align="center" />
+      <el-table-column prop="remark" :label="$t('applyWithholdIntegral.applicationNote')" align="center" />
+      <el-table-column prop="stateName" :label="$t('applyWithholdIntegral.status')" align="center" />
+      <el-table-column prop="stateMsg" :label="$t('applyWithholdIntegral.reviewNote')" align="center" />
+      <el-table-column :label="$t('common.operation')" align="center" width="150">
+        <template slot-scope="scope">
+          <el-button size="mini" type="danger" @click="openDeleteDialog(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
+
+    <delete-apply-withhold-integral ref="deleteDialog" @success="handleDeleteSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryCommunityIntegralApply } from '@/api/scm/communityIntegralApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import DeleteApplyWithholdIntegral from './deleteApplyWithholdIntegral'
+
+export default {
+  name: 'ApplyWithholdIntegral',
+  components: {
+    DeleteApplyWithholdIntegral
+  },
+
+  data() {
+    return {
+      integralId: '',
+      integralName: '',
+      loading: false,
+      applys: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(integral) {
+      this.integralId = integral.integralId
+      this.integralName = integral.integralName
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        this.loading = true
+        const params = {
+          communityId: getCommunityId(),
+          integralId: this.integralId,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryCommunityIntegralApply(params)
+        this.applys = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load apply withhold integral data:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    openDeleteDialog(row) {
+      this.$refs.deleteDialog.open(row)
+    },
+    handleDeleteSuccess() {
+      this.loadData()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/communityIntegralDetail.vue b/src/components/scm/communityIntegralDetail.vue
new file mode 100644
index 0000000..51d7b76
--- /dev/null
+++ b/src/components/scm/communityIntegralDetail.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <el-table v-loading="loading" :data="details" border style="width: 100%">
+      <el-table-column prop="detailId" :label="$t('communityIntegralDetail.id')" align="center" />
+      <el-table-column prop="integralName" :label="$t('communityIntegralDetail.integralAccount')" align="center" />
+      <el-table-column prop="detailType" :label="$t('communityIntegralDetail.type')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.detailType === '1001' ? $t('communityIntegralDetail.transferIn') :
+            $t('communityIntegralDetail.transferOut') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="amount" :label="$t('communityIntegralDetail.transactionAmount')" align="center" />
+      <el-table-column prop="totalAmount" :label="$t('communityIntegralDetail.currentAmount')" align="center" />
+      <el-table-column prop="orderId" :label="$t('communityIntegralDetail.transactionNo')" align="center" />
+      <el-table-column prop="remark" :label="$t('communityIntegralDetail.remark')" align="center" />
+      <el-table-column prop="createTime" :label="$t('communityIntegralDetail.time')" align="center" />
+    </el-table>
+
+    <el-pagination :current-page.sync="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      :total="pagination.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+      @current-change="handleCurrentChange" />
+  </div>
+</template>
+
+<script>
+import { queryCommunityIntegralDetail } from '@/api/scm/communityIntegralApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CommunityIntegralDetail',
+
+  data() {
+    return {  
+      integralId: '',
+      integralName: '',
+      loading: false,
+      details: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(integral) {
+      this.integralId = integral.integralId
+      this.integralName = integral.integralName
+      this.loadData()
+    },
+    async loadData() {
+      try {
+        this.loading = true
+        const params = {
+          communityId: getCommunityId(),
+          integralId: this.integralId,
+          page: this.pagination.current,
+          row: this.pagination.size
+        }
+        const { data, total } = await queryCommunityIntegralDetail(params)
+        this.details = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load community integral details:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/deleteApplyWithholdGold.vue b/src/components/scm/deleteApplyWithholdGold.vue
new file mode 100644
index 0000000..553d6e2
--- /dev/null
+++ b/src/components/scm/deleteApplyWithholdGold.vue
@@ -0,0 +1,59 @@
+<template>
+  <el-dialog
+    :title="$t('deleteApplyWithholdGold.confirmTitle')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div class="text-center">
+      <p>{{ $t('deleteApplyWithholdGold.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="confirmDelete" :loading="loading">
+        {{ $t('common.confirmDelete') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteGoldWithHold } from '@/api/scm/goldApi'
+
+export default {
+  name: 'DeleteApplyWithholdGold',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      currentData: null
+    }
+  },
+  methods: {
+    open(data) {
+      this.currentData = data
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async confirmDelete() {
+      try {
+        this.loading = true
+        await deleteGoldWithHold({
+          gwId: this.currentData.gwId,
+          communityId: this.currentData.communityId
+        })
+        this.$emit('success')
+        this.$message.success(this.$t('deleteApplyWithholdGold.deleteSuccess'))
+        this.visible = false
+      } catch (error) {
+        console.error('Delete failed:', error)
+        this.$message.error(this.$t('deleteApplyWithholdGold.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/deleteApplyWithholdIntegral.vue b/src/components/scm/deleteApplyWithholdIntegral.vue
new file mode 100644
index 0000000..3133964
--- /dev/null
+++ b/src/components/scm/deleteApplyWithholdIntegral.vue
@@ -0,0 +1,68 @@
+<template>
+  <el-dialog
+    :title="$t('deleteApplyWithholdIntegral.confirmTitle')"
+    :visible.sync="visible"
+    width="30%"
+    center
+  >
+    <div class="text-center">
+      <p>{{ $t('deleteApplyWithholdIntegral.confirmText') }}</p>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">{{ $t('deleteApplyWithholdIntegral.cancel') }}</el-button>
+      <el-button type="primary" @click="confirmDelete" :loading="loading">
+        {{ $t('deleteApplyWithholdIntegral.confirmDelete') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteIntegralWithdrawal } from '@/api/scm/communityIntegralApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteApplyWithholdIntegral',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      currentData: null
+    }
+  },
+  methods: {
+    open(data) {
+      this.currentData = data
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+      this.loading = false
+    },
+    async confirmDelete() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.currentData,
+          communityId: getCommunityId()
+        }
+        await deleteIntegralWithdrawal(params)
+        this.$emit('success')
+        this.$message.success(this.$t('deleteApplyWithholdIntegral.deleteSuccess'))
+        this.close()
+      } catch (error) {
+        console.error('Failed to delete integral withdrawal:', error)
+        this.$message.error(this.$t('deleteApplyWithholdIntegral.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.text-center {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/deleteReserveCatalog.vue b/src/components/scm/deleteReserveCatalog.vue
new file mode 100644
index 0000000..7356ac9
--- /dev/null
+++ b/src/components/scm/deleteReserveCatalog.vue
@@ -0,0 +1,80 @@
+<template>
+  <el-dialog
+    :title="$t('reserveCatalogManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div class="delete-content">
+      <p>{{ $t('reserveCatalogManage.delete.confirmText1') }}</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">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteReserveCatalog } from '@/api/scm/reserveCatalogManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteReserveCatalog',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        catalogId: '',
+        name: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.formData = {
+        catalogId: row.catalogId,
+        name: row.name,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.formData = {
+        catalogId: '',
+        name: '',
+        communityId: ''
+      }
+    },
+    async handleSubmit() {
+      try {
+        await deleteReserveCatalog(this.formData)
+        this.$message.success(this.$t('reserveCatalogManage.delete.success'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(this.$t('reserveCatalogManage.delete.error'))
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.delete-content {
+  text-align: center;
+  font-size: 16px;
+}
+.delete-name {
+  font-weight: bold;
+  color: #f56c6c;
+  margin: 10px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/editReserveCatalog.vue b/src/components/scm/editReserveCatalog.vue
new file mode 100644
index 0000000..5b2c98d
--- /dev/null
+++ b/src/components/scm/editReserveCatalog.vue
@@ -0,0 +1,150 @@
+<template>
+  <el-dialog
+    :title="$t('reserveCatalogManage.edit.title')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('reserveCatalogManage.edit.name')"
+        prop="name"
+      >
+        <el-input
+          v-model="formData.name"
+          :placeholder="$t('reserveCatalogManage.edit.namePlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('reserveCatalogManage.edit.sort')"
+        prop="sort"
+      >
+        <el-input
+          v-model="formData.sort"
+          :placeholder="$t('reserveCatalogManage.edit.sortPlaceholder')"
+        />
+      </el-form-item>
+      <el-form-item
+        :label="$t('reserveCatalogManage.edit.type')"
+        prop="type"
+      >
+        <el-select
+          v-model="formData.type"
+          :placeholder="$t('reserveCatalogManage.edit.typePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('reserveCatalogManage.edit.typeOption1')"
+            value="1001"
+          />
+          <el-option
+            :label="$t('reserveCatalogManage.edit.typeOption2')"
+            value="2002"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item
+        :label="$t('reserveCatalogManage.edit.state')"
+        prop="state"
+      >
+        <el-select
+          v-model="formData.state"
+          :placeholder="$t('reserveCatalogManage.edit.statePlaceholder')"
+          style="width:100%"
+        >
+          <el-option
+            :label="$t('reserveCatalogManage.edit.stateOption1')"
+            value="1001"
+          />
+          <el-option
+            :label="$t('reserveCatalogManage.edit.stateOption2')"
+            value="2002"
+          />
+        </el-select>
+      </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="handleSubmit">
+        {{ $t('common.confirm') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { updateReserveCatalog } from '@/api/scm/reserveCatalogManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditReserveCatalog',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        catalogId: '',
+        name: '',
+        sort: '',
+        type: '',
+        state: '',
+        communityId: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.nameRequired'), trigger: 'blur' },
+          { max: 128, message: this.$t('reserveCatalogManage.validate.nameMaxLength'), trigger: 'blur' }
+        ],
+        sort: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.sortRequired'), trigger: 'blur' },
+          { max: 12, message: this.$t('reserveCatalogManage.validate.sortMaxLength'), trigger: 'blur' }
+        ],
+        type: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.typeRequired'), trigger: 'change' }
+        ],
+        state: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.stateRequired'), trigger: 'change' }
+        ],
+        catalogId: [
+          { required: true, message: this.$t('reserveCatalogManage.validate.catalogIdRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.formData = {
+        ...row,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form.clearValidate()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateReserveCatalog(this.formData)
+            this.$message.success(this.$t('reserveCatalogManage.edit.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(this.$t('reserveCatalogManage.edit.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/goldDetail.vue b/src/components/scm/goldDetail.vue
new file mode 100644
index 0000000..8696120
--- /dev/null
+++ b/src/components/scm/goldDetail.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="gold-detail-container">
+    <el-table v-loading="loading" :data="goldDetails" border style="width: 100%">
+      <el-table-column prop="detailId" :label="$t('goldDetail.id')" align="center" />
+      <el-table-column prop="goldName" :label="$t('goldDetail.goldAccount')" align="center" />
+      <el-table-column :label="$t('goldDetail.type')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.detailType === '1001' ? $t('goldDetail.transferIn') : $t('goldDetail.transferOut') }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="communityName" :label="$t('goldDetail.communityName')" align="center" />
+      <el-table-column prop="communityId" :label="$t('goldDetail.communityId')" align="center" />
+      <el-table-column prop="amount" :label="$t('goldDetail.transactionAmount')" align="center" />
+      <el-table-column prop="totalAmount" :label="$t('goldDetail.currentAmount')" align="center" />
+      <el-table-column prop="orderId" :label="$t('goldDetail.transactionNo')" align="center" />
+      <el-table-column prop="remark" :label="$t('goldDetail.remark')" align="center" />
+      <el-table-column prop="createTime" :label="$t('goldDetail.time')" 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" />
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getPropertyGoldDetail } from '@/api/scm/goldApi'
+
+export default {
+  name: 'GoldDetail',
+
+  data() {
+    return {
+      goldId: '',
+      goldName: '',
+      loading: false,
+      goldDetails: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(gold) {
+      this.goldId = gold.goldId
+      this.goldName = gold.goldName
+      this.loadData()
+    },
+    async loadData() {
+      if (!this.goldId) return
+
+      try {
+        this.loading = true
+        const params = {
+          communityId: getCommunityId(),
+          goldId: this.goldId,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await getPropertyGoldDetail(params)
+        this.goldDetails = data
+        this.page.total = total
+      } catch (error) {
+        console.error('Failed to load gold details:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadData()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gold-detail-container {
+  padding: 20px 0;
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/withholdGold.vue b/src/components/scm/withholdGold.vue
new file mode 100644
index 0000000..6ecf02b
--- /dev/null
+++ b/src/components/scm/withholdGold.vue
@@ -0,0 +1,168 @@
+<template>
+  <el-dialog
+    :title="$t('withholdGold.applyWithdraw')"
+    :visible.sync="visible"
+    width="50%"
+    :before-close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="form"
+      :rules="rules"
+      label-width="120px"
+      label-position="right"
+    >
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.goldAmount')" prop="amount">
+            <el-input v-model="form.amount" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.withdrawAmount')" prop="applyAmount">
+            <el-input v-model="form.applyAmount" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.applicant')" prop="applyUserName">
+            <el-input v-model="form.applyUserName" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.applicantPhone')" prop="applyUserTel">
+            <el-input v-model="form.applyUserTel" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.bankAccount')" prop="bankNum">
+            <el-input v-model="form.bankNum" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.accountName')" prop="bankNumName">
+            <el-input v-model="form.bankNumName" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.bankName')" prop="bankName">
+            <el-input v-model="form.bankName" type="textarea" :rows="2" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdGold.applicationNote')" prop="remark">
+            <el-input v-model="form.remark" type="textarea" :rows="2" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button
+        type="primary"
+        @click="submitForm"
+        :loading="loading"
+      >
+        {{ $t('common.submit') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { applyGoldWithHold } from '@/api/scm/goldApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'WithholdGold',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      form: {
+        goldId: '',
+        goldName: '',
+        communityId: '',
+        amount: '',
+        applyAmount: '',
+        applyUserName: '',
+        applyUserTel: '',
+        remark: '',
+        bankNum: '',
+        bankNumName: '',
+        bankName: ''
+      },
+      rules: {
+        applyAmount: [
+          { required: true, message: this.$t('withholdGold.required'), trigger: 'blur' }
+        ],
+        applyUserName: [
+          { required: true, message: this.$t('withholdGold.required'), trigger: 'blur' }
+        ],
+        applyUserTel: [
+          { required: true, message: this.$t('withholdGold.required'), trigger: 'blur' }
+        ],
+        bankNum: [
+          { required: true, message: this.$t('withholdGold.required'), trigger: 'blur' }
+        ],
+        bankNumName: [
+          { required: true, message: this.$t('withholdGold.required'), trigger: 'blur' }
+        ],
+        bankName: [
+          { required: true, message: this.$t('withholdGold.required'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        ...this.form,
+        goldId: data.goldId,
+        amount: data.amount,
+        communityId: data.communityId || getCommunityId()
+      }
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form && this.$refs.form.clearValidate()
+      })
+    },
+    handleClose() {
+      this.visible = false
+    },
+    submitForm() {
+      this.$refs.form.validate(async valid => {
+        if (!valid) return
+
+        try {
+          this.loading = true
+          await applyGoldWithHold(this.form)
+          this.$emit('success')
+          this.$message.success(this.$t('withholdGold.submitSuccess'))
+          this.visible = false
+        } catch (error) {
+          console.error('Submit failed:', error)
+          this.$message.error(this.$t('withholdGold.submitFailed'))
+        } finally {
+          this.loading = false
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-textarea {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/withholdIntegral.vue b/src/components/scm/withholdIntegral.vue
new file mode 100644
index 0000000..779cf76
--- /dev/null
+++ b/src/components/scm/withholdIntegral.vue
@@ -0,0 +1,185 @@
+<template>
+  <el-dialog
+    :title="$t('withholdIntegral.applyWithdraw')"
+    :visible.sync="visible"
+    width="50%"
+    center
+  >
+    <el-form ref="form" :model="formData" label-width="120px" :rules="rules">
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.totalPoints')" prop="amount">
+            <el-input v-model="formData.amount" disabled />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.withdrawPoints')" prop="applyAmount">
+            <el-input 
+              v-model="formData.applyAmount" 
+              :placeholder="$t('withholdIntegral.withdrawPointsPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.applicant')" prop="applyUserName">
+            <el-input 
+              v-model="formData.applyUserName" 
+              :placeholder="$t('withholdIntegral.applicantPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.applicantPhone')" prop="applyUserTel">
+            <el-input 
+              v-model="formData.applyUserTel" 
+              :placeholder="$t('withholdIntegral.applicantPhonePlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.bankAccount')" prop="bankNum">
+            <el-input 
+              v-model="formData.bankNum" 
+              :placeholder="$t('withholdIntegral.bankAccountPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.accountName')" prop="bankNumName">
+            <el-input 
+              v-model="formData.bankNumName" 
+              :placeholder="$t('withholdIntegral.accountNamePlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.bank')" prop="bankName">
+            <el-input 
+              v-model="formData.bankName" 
+              type="textarea"
+              :placeholder="$t('withholdIntegral.bankPlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12">
+          <el-form-item :label="$t('withholdIntegral.applicationNote')" prop="remark">
+            <el-input 
+              v-model="formData.remark" 
+              type="textarea"
+              :placeholder="$t('withholdIntegral.applicationNotePlaceholder')"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="close">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="submit" :loading="loading">
+        {{ $t('common.submit') }}
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { applyIntegralWithdrawal } from '@/api/scm/communityIntegralApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'WithholdIntegral',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      formData: {
+        integralId: '',
+        integralName: '',
+        communityId: '',
+        amount: '',
+        applyAmount: '',
+        applyUserName: '',
+        applyUserTel: '',
+        remark: '',
+        bankNum: '',
+        bankNumName: '',
+        bankName: ''
+      },
+      rules: {
+        applyAmount: [
+          { required: true, message: this.$t('withholdIntegral.withdrawPointsRequired'), trigger: 'blur' }
+        ],
+        applyUserName: [
+          { required: true, message: this.$t('withholdIntegral.applicantRequired'), trigger: 'blur' }
+        ],
+        applyUserTel: [
+          { required: true, message: this.$t('withholdIntegral.applicantPhoneRequired'), trigger: 'blur' }
+        ],
+        bankNum: [
+          { required: true, message: this.$t('withholdIntegral.bankAccountRequired'), trigger: 'blur' }
+        ],
+        bankNumName: [
+          { required: true, message: this.$t('withholdIntegral.accountNameRequired'), trigger: 'blur' }
+        ],
+        bankName: [
+          { required: true, message: this.$t('withholdIntegral.bankRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.resetForm()
+      this.formData = {
+        ...this.formData,
+        ...data,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    close() {
+      this.visible = false
+      this.loading = false
+      this.$refs.form.resetFields()
+    },
+    resetForm() {
+      if (this.$refs.form) {
+        this.$refs.form.resetFields()
+      }
+    },
+    async submit() {
+      try {
+        this.$refs.form.validate(async valid => {
+          if (!valid) return
+
+          this.loading = true
+          await applyIntegralWithdrawal(this.formData)
+          this.$emit('success')
+          this.$message.success(this.$t('withholdIntegral.applySuccess'))
+          this.close()
+        })
+      } catch (error) {
+        console.error('Failed to apply integral withdrawal:', error)
+        this.$message.error(this.$t('withholdIntegral.applyFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-textarea {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/scmI18n.js b/src/i18n/scmI18n.js
index 2ade806..33d5343 100644
--- a/src/i18n/scmI18n.js
+++ b/src/i18n/scmI18n.js
@@ -7,6 +7,9 @@ import { messages as couponPropertyUserDetailMessages } from '../views/scm/coupo
 import { messages as integralConfigManageMessages } from '../views/scm/integralConfigManageLang'
 import { messages as integralRuleMessages } from '../views/scm/integralRuleLang'
 import { messages as integralGiftDetailManageMessages } from '../views/scm/integralGiftDetailManageLang'
+import { messages as communityIntegralMessages } from '../views/scm/communityIntegralLang'
+import { messages as goldMessages } from '../views/scm/goldLang'
+import { messages as reserveCatalogManageMessages } from '../views/scm/reserveCatalogManageLang'
 
 export const messages = {
     en: {
@@ -20,6 +23,9 @@ export const messages = {
         ...integralConfigManageMessages.en,
         ...integralRuleMessages.en,
         ...integralGiftDetailManageMessages.en,
+        ...communityIntegralMessages.en,
+        ...goldMessages.en,
+        ...reserveCatalogManageMessages.en,
     },  
     zh: {
         ...couponMarketMessages.zh,
@@ -31,5 +37,8 @@ export const messages = {
         ...integralConfigManageMessages.zh,
         ...integralRuleMessages.zh,
         ...integralGiftDetailManageMessages.zh,
+        ...communityIntegralMessages.zh,
+        ...goldMessages.zh,
+        ...reserveCatalogManageMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/scmRouter.js b/src/router/scmRouter.js
index 6e798e4..ac42740 100644
--- a/src/router/scmRouter.js
+++ b/src/router/scmRouter.js
@@ -44,4 +44,19 @@ export default [
         name: '/pages/scm/integralGiftDetailManage',
         component: () => import('@/views/scm/integralGiftDetailManageList.vue')
     },
+    {
+        path: '/pages/scm/communityIntegral',
+        name: '/pages/scm/communityIntegral',
+        component: () => import('@/views/scm/communityIntegralList.vue')
+    },
+    {
+        path: '/pages/scm/gold',
+        name: '/pages/scm/gold',
+        component: () => import('@/views/scm/goldList.vue')
+    },
+    {
+        path: '/pages/reserve/reserveCatalogManage',
+        name: '/pages/reserve/reserveCatalogManage',
+        component: () => import('@/views/scm/reserveCatalogManageList.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/scm/communityIntegralLang.js b/src/views/scm/communityIntegralLang.js
new file mode 100644
index 0000000..2062e95
--- /dev/null
+++ b/src/views/scm/communityIntegralLang.js
@@ -0,0 +1,144 @@
+export const messages = {
+  en: {
+    communityIntegral: {
+      title: 'Community Points',
+      accountId: 'Account ID:',
+      accountName: 'Account Name:',
+      points: 'Points:',
+      withdraw: 'Withdraw',
+      transactionDetails: 'Transaction Details',
+      pointsWithdrawal: 'Points Withdrawal'
+    },
+    communityIntegralDetail: {
+      id: 'ID',
+      integralAccount: 'Points Account',
+      type: 'Type',
+      transferIn: 'Transfer In',
+      transferOut: 'Transfer Out',
+      transactionAmount: 'Amount',
+      currentAmount: 'Balance',
+      transactionNo: 'Transaction No',
+      remark: 'Remark',
+      time: 'Time'
+    },
+    applyWithholdIntegral: {
+      id: 'ID',
+      integralId: 'Points ID',
+      integralName: 'Points Name',
+      withdrawAmount: 'Amount',
+      applicant: 'Applicant',
+      applicantPhone: 'Phone',
+      bankAccount: 'Bank Account',
+      accountName: 'Account Name',
+      bank: 'Bank',
+      applicationNote: 'Note',
+      status: 'Status',
+      reviewNote: 'Review Note'
+    },
+    deleteApplyWithholdIntegral: {
+      confirmTitle: 'Confirm Operation',
+      confirmText: 'Are you sure to delete this withdrawal application?',
+      cancel: 'Cancel',
+      confirmDelete: 'Confirm Delete',
+      deleteSuccess: 'Delete successfully',
+      deleteFailed: 'Delete failed'
+    },
+    withholdIntegral: {
+      applyWithdraw: 'Apply Withdrawal',
+      totalPoints: 'Total Points',
+      withdrawPoints: 'Withdraw Points',
+      withdrawPointsPlaceholder: 'Required, please enter withdraw points',
+      withdrawPointsRequired: 'Withdraw points is required',
+      applicant: 'Applicant',
+      applicantPlaceholder: 'Required, please enter applicant name',
+      applicantRequired: 'Applicant is required',
+      applicantPhone: 'Phone',
+      applicantPhonePlaceholder: 'Required, please enter phone number',
+      applicantPhoneRequired: 'Phone is required',
+      bankAccount: 'Bank Account',
+      bankAccountPlaceholder: 'Required, please enter bank account',
+      bankAccountRequired: 'Bank account is required',
+      accountName: 'Account Name',
+      accountNamePlaceholder: 'Required, please enter account name',
+      accountNameRequired: 'Account name is required',
+      bank: 'Bank',
+      bankPlaceholder: 'Required, please enter bank name',
+      bankRequired: 'Bank is required',
+      applicationNote: 'Note',
+      applicationNotePlaceholder: 'Required, please enter application note',
+      applySuccess: 'Apply successfully',
+      applyFailed: 'Apply failed'
+    }
+  },
+  zh: {
+    communityIntegral: {
+      title: '小区积分',
+      accountId: '账户ID：',
+      accountName: '账户名称：',
+      points: '积分数：',
+      withdraw: '提现',
+      transactionDetails: '交易明细',
+      pointsWithdrawal: '积分提现'
+    },
+    communityIntegralDetail: {
+      id: '编号',
+      integralAccount: '金币账户',
+      type: '类型',
+      transferIn: '转入',
+      transferOut: '转出',
+      transactionAmount: '交易金额',
+      currentAmount: '当前金额',
+      transactionNo: '交易单号',
+      remark: '备注',
+      time: '时间'
+    },
+    applyWithholdIntegral: {
+      id: '编号',
+      integralId: '积分ID',
+      integralName: '积分名称',
+      withdrawAmount: '提现金额',
+      applicant: '申请人',
+      applicantPhone: '申请人电话',
+      bankAccount: '银行账户',
+      accountName: '账号名称',
+      bank: '开户行',
+      applicationNote: '申请说明',
+      status: '状态',
+      reviewNote: '审核说明'
+    },
+    deleteApplyWithholdIntegral: {
+      confirmTitle: '请确认您的操作！',
+      confirmText: '确定删除申请',
+      cancel: '点错了',
+      confirmDelete: '确认删除',
+      deleteSuccess: '删除成功',
+      deleteFailed: '删除失败'
+    },
+    withholdIntegral: {
+      applyWithdraw: '申请提现',
+      totalPoints: '总积分数',
+      withdrawPoints: '提现积分',
+      withdrawPointsPlaceholder: '必填，请填写提现积分',
+      withdrawPointsRequired: '提现积分不能为空',
+      applicant: '申请人',
+      applicantPlaceholder: '必填，请填写申请人',
+      applicantRequired: '申请人不能为空',
+      applicantPhone: '申请人电话',
+      applicantPhonePlaceholder: '必填，请填写申请人电话',
+      applicantPhoneRequired: '申请人电话不能为空',
+      bankAccount: '银行账户',
+      bankAccountPlaceholder: '必填，请填写银行账户',
+      bankAccountRequired: '银行账户不能为空',
+      accountName: '账号名称',
+      accountNamePlaceholder: '必填，请填写账号名称',
+      accountNameRequired: '账号名称不能为空',
+      bank: '开户行',
+      bankPlaceholder: '必填，请填写开户行',
+      bankRequired: '开户行不能为空',
+      applicationNote: '申请说明',
+      applicationNotePlaceholder: '必填，请填写申请说明',
+      applySuccess: '申请成功',
+      applyFailed: '申请失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/communityIntegralList.vue b/src/views/scm/communityIntegralList.vue
new file mode 100644
index 0000000..5db1205
--- /dev/null
+++ b/src/views/scm/communityIntegralList.vue
@@ -0,0 +1,179 @@
+<template>
+  <el-card class="community-integral-container">
+    <div class="white-bg padding-lg padding-top border-radius">
+      <div class="flex justify-between">
+        <h3>{{ $t('communityIntegral.title') }}</h3>
+      </div>
+
+      <!-- 业主信息 -->
+      <div class="margin-top">
+        <el-row>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">
+                {{ $t('communityIntegral.accountId') }}
+              </label>
+              <label>{{ communityIntegralInfo.integralId }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">
+                {{ $t('communityIntegral.accountName') }}
+              </label>
+              <label>{{ communityIntegralInfo.integralName }}</label>
+            </div>
+          </el-col>
+          <el-col :span="8">
+            <div class="form-group">
+              <label class="col-form-label">
+                {{ $t('communityIntegral.points') }}
+              </label>
+              <label>
+                {{ communityIntegralInfo.amount }}
+                <el-link type="primary" @click="openApplyWithholdIntegral">{{ $t('communityIntegral.withdraw')
+                  }}</el-link>
+              </label>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <el-divider></el-divider>
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="communityIntegralInfo._currentTab" @tab-click="changeTab(communityIntegralInfo._currentTab)">
+          <el-tab-pane :label="$t('communityIntegral.transactionDetails')" name="communityIntegralDetail">
+            <community-integral-detail v-if="communityIntegralInfo._currentTab === 'communityIntegralDetail'"
+              ref="communityIntegralDetail" />
+          </el-tab-pane>
+          <el-tab-pane :label="$t('communityIntegral.pointsWithdrawal')" name="applyWithholdIntegral">
+            <apply-withhold-integral v-if="communityIntegralInfo._currentTab === 'applyWithholdIntegral'"
+              ref="applyWithholdIntegral"  />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+    </div>
+
+    <withhold-integral ref="withholdIntegral" @success="handleWithdrawSuccess" />
+  </el-card>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryCommunityIntegral } from '@/api/scm/communityIntegralApi'
+import CommunityIntegralDetail from '@/components/scm/communityIntegralDetail'
+import ApplyWithholdIntegral from '@/components/scm/applyWithholdIntegral'
+import WithholdIntegral from '@/components/scm/withholdIntegral'
+
+export default {
+  name: 'CommunityIntegralList',
+  components: {
+    CommunityIntegralDetail,
+    ApplyWithholdIntegral,
+    WithholdIntegral
+  },
+  data() {
+    return {
+      communityIntegralInfo: {
+        integralId: "",
+        integralName: '',
+        amount: "",
+        communityName: "",
+        communityId: "",
+        _currentTab: 'communityIntegralDetail'
+      }
+    }
+  },
+  created() {
+    this.communityIntegralInfo.communityId = getCommunityId()
+    this.loadCommunityIntegralInfo()
+  },
+  methods: {
+    async loadCommunityIntegralInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          communityId: this.communityIntegralInfo.communityId
+        }
+        const { data } = await queryCommunityIntegral(params)
+        if (data && data.length > 0) {
+          this.communityIntegralInfo = {
+            ...this.communityIntegralInfo,
+            ...data[0]
+          }
+          this.changeTab(this.communityIntegralInfo._currentTab)
+        }
+      } catch (error) {
+        console.error('Failed to load community integral info:', error)
+      }
+    },
+    changeTab(tab) {
+      this.communityIntegralInfo._currentTab = tab
+      setTimeout(() => {
+        this.$refs[tab].open(this.communityIntegralInfo.curIntegralRule)
+      }, 500);
+    },
+    openApplyWithholdIntegral() {
+      this.$refs.withholdIntegral.open({
+        integralId: this.communityIntegralInfo.integralId,
+        amount: this.communityIntegralInfo.amount,
+        communityId: this.communityIntegralInfo.communityId
+      })
+    },
+    handleWithdrawSuccess() {
+      this.communityIntegralInfo._currentTab = 'applyWithholdIntegral'
+      this.changeTab(this.communityIntegralInfo._currentTab)
+      this.loadCommunityIntegralInfo()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.community-integral-container {
+  padding: 20px;
+}
+
+.white-bg {
+  background-color: #fff;
+}
+
+.padding-lg {
+  padding: 20px;
+}
+
+.padding-top {
+  padding-top: 20px;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.col-form-label {
+  font-weight: bold;
+  margin-right: 10px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/goldLang.js b/src/views/scm/goldLang.js
new file mode 100644
index 0000000..f87e990
--- /dev/null
+++ b/src/views/scm/goldLang.js
@@ -0,0 +1,126 @@
+export const messages = {
+  en: {
+    gold: {
+      title: 'Community Gold',
+      withdraw: 'Withdraw',
+      transactionDetails: 'Transaction Details',
+      goldWithdrawal: 'Gold Withdrawal'
+    },
+    goldInfo: {
+      accountId: 'Account ID:',
+      accountName: 'Account Name:',
+      accountBalance: 'Account Balance:',
+      communityName: 'Community Name:'
+    },
+    goldDetail: {
+      id: 'ID',
+      goldAccount: 'Gold Account',
+      type: 'Type',
+      transferIn: 'Transfer In',
+      transferOut: 'Transfer Out',
+      communityName: 'Community Name',
+      communityId: 'Community ID',
+      transactionAmount: 'Transaction Amount',
+      currentAmount: 'Current Amount',
+      transactionNo: 'Transaction No',
+      remark: 'Remark',
+      time: 'Time'
+    },
+    applyWithholdGold: {
+      id: 'ID',
+      goldId: 'Gold ID',
+      accountName: 'Account Name',
+      communityId: 'Community ID',
+      withdrawAmount: 'Withdraw Amount',
+      applicant: 'Applicant',
+      applicantPhone: 'Applicant Phone',
+      bankAccount: 'Bank Account',
+      bankName: 'Bank Name',
+      applicationNote: 'Application Note',
+      status: 'Status',
+      reviewNote: 'Review Note'
+    },
+    deleteApplyWithholdGold: {
+      confirmTitle: 'Confirm Operation',
+      confirmText: 'Are you sure to delete this gold withdrawal application?',
+      deleteSuccess: 'Delete successfully',
+      deleteFailed: 'Delete failed'
+    },
+    withholdGold: {
+      applyWithdraw: 'Apply Withdraw',
+      goldAmount: 'Gold Amount',
+      withdrawAmount: 'Withdraw Amount',
+      applicant: 'Applicant',
+      applicantPhone: 'Applicant Phone',
+      bankAccount: 'Bank Account',
+      accountName: 'Account Name',
+      bankName: 'Bank Name',
+      applicationNote: 'Application Note',
+      required: 'Required',
+      submitSuccess: 'Submit successfully',
+      submitFailed: 'Submit failed'
+    }
+  },
+  zh: {
+    gold: {
+      title: '小区金币',
+      withdraw: '提现',
+      transactionDetails: '交易明细',
+      goldWithdrawal: '金币提现'
+    },
+    goldInfo: {
+      accountId: '账户ID：',
+      accountName: '账户名称：',
+      accountBalance: '账户余额：',
+      communityName: '小区名称：'
+    },
+    goldDetail: {
+      id: '编号',
+      goldAccount: '金币账户',
+      type: '类型',
+      transferIn: '转入',
+      transferOut: '转出',
+      communityName: '小区名称',
+      communityId: '小区编号',
+      transactionAmount: '交易金额',
+      currentAmount: '当前金额',
+      transactionNo: '交易单号',
+      remark: '备注',
+      time: '时间'
+    },
+    applyWithholdGold: {
+      id: '编号',
+      goldId: '金币ID',
+      accountName: '账户名称',
+      communityId: '小区编号',
+      withdrawAmount: '提现金额',
+      applicant: '申请人',
+      applicantPhone: '申请人电话',
+      bankAccount: '银行账户',
+      bankName: '开户行',
+      applicationNote: '申请说明',
+      status: '状态',
+      reviewNote: '审核说明'
+    },
+    deleteApplyWithholdGold: {
+      confirmTitle: '请确认您的操作!',
+      confirmText: '确定删除金币提现',
+      deleteSuccess: '删除成功',
+      deleteFailed: '删除失败'
+    },
+    withholdGold: {
+      applyWithdraw: '申请提现',
+      goldAmount: '金币金额',
+      withdrawAmount: '提现金额',
+      applicant: '申请人',
+      applicantPhone: '申请人电话',
+      bankAccount: '银行账户',
+      accountName: '账号名称',
+      bankName: '开户行',
+      applicationNote: '申请说明',
+      required: '必填',
+      submitSuccess: '提交成功',
+      submitFailed: '提交失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/goldList.vue b/src/views/scm/goldList.vue
new file mode 100644
index 0000000..6e6b6ca
--- /dev/null
+++ b/src/views/scm/goldList.vue
@@ -0,0 +1,185 @@
+<template>
+  <div class="gold-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="flex justify-between">
+          <h3>{{ $t('gold.title') }}</h3>
+          <div></div>
+        </div>
+      </div>
+
+      <!-- 业主信息 -->
+      <div class="margin-top">
+        <el-row>
+          <el-col :span="6">
+            <div class="form-group">
+              <label class="el-form-item__label">
+                {{ $t('goldInfo.accountId') }}
+              </label>
+              <div class="el-form-item__content">
+                {{ goldInfo.goldId }}
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="form-group">
+              <label class="el-form-item__label">
+                {{ $t('goldInfo.accountName') }}
+              </label>
+              <div class="el-form-item__content">
+                {{ goldInfo.goldName }}
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="form-group">
+              <label class="el-form-item__label">
+                {{ $t('goldInfo.accountBalance') }}
+              </label>
+              <div class="el-form-item__content">
+                {{ goldInfo.amount }}
+                <el-button type="text" @click="openApplyWithholdGold">
+                  {{ $t('gold.withdraw') }}
+                </el-button>
+              </div>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div class="form-group">
+              <label class="el-form-item__label">
+                {{ $t('goldInfo.communityName') }}
+              </label>
+              <div class="el-form-item__content">
+                {{ goldInfo.communityName }}
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+
+      <el-divider></el-divider>
+
+      <div class="margin-top-sm">
+        <el-tabs v-model="goldInfo.currentTab" @tab-click="changeTab(goldInfo.currentTab)">
+          <el-tab-pane :label="$t('gold.transactionDetails')" name="goldDetail">
+            <gold-detail v-if="goldInfo.currentTab === 'goldDetail'" ref="goldDetail"  />
+          </el-tab-pane>
+          <el-tab-pane :label="$t('gold.goldWithdrawal')" name="applyWithholdGold">
+            <apply-withhold-gold v-if="goldInfo.currentTab === 'applyWithholdGold'" ref="applyWithholdGold"
+               />
+          </el-tab-pane>
+        </el-tabs>
+      </div>
+
+      <withhold-gold ref="withholdGold" @success="handleSuccess" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getPropertyGoldInfo } from '@/api/scm/goldApi'
+import GoldDetail from '@/components/scm/goldDetail'
+import ApplyWithholdGold from '@/components/scm/applyWithholdGold'
+import WithholdGold from '@/components/scm/withholdGold'
+
+export default {
+  name: 'GoldList',
+  components: {
+    GoldDetail,
+    ApplyWithholdGold,
+    WithholdGold
+  },
+  data() {
+    return {
+      goldInfo: {
+        goldId: '',
+        goldName: '',
+        amount: '',
+        communityName: '',
+        communityId: '',
+        currentTab: 'goldDetail'
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.loadGoldInfo()
+  },
+  methods: {
+    async loadGoldInfo() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          communityId: this.communityId
+        }
+        const { data } = await getPropertyGoldInfo(params)
+        if (data && data.length > 0) {
+          this.goldInfo = {
+            ...this.goldInfo,
+            goldId: data[0].goldId,
+            goldName: data[0].goldName,
+            amount: data[0].amount,
+            communityName: data[0].communityName,
+            communityId: data[0].communityId
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load gold info:', error)
+      }
+    },
+    changeTab(tab) {
+      this.goldInfo.currentTab = tab.name || tab
+      setTimeout(() => {
+        this.$refs[tab].open(this.goldInfo)
+      }, 500);
+    },
+    openApplyWithholdGold() {
+      this.$refs.withholdGold.open({
+        goldId: this.goldInfo.goldId,
+        amount: this.goldInfo.amount,
+        communityId: this.goldInfo.communityId
+      })
+    },
+    handleSuccess() {
+      this.loadGoldInfo()
+      this.goldInfo.currentTab = 'applyWithholdGold'
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gold-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .margin-top-sm {
+    margin-top: 10px;
+  }
+
+  .form-group {
+    margin-bottom: 0;
+    padding: 10px;
+    border-radius: 4px;
+    background-color: #f5f7fa;
+
+    .el-form-item__label {
+      font-weight: bold;
+      color: #606266;
+    }
+
+    .el-form-item__content {
+      margin-top: 5px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/reserveCatalogManageLang.js b/src/views/scm/reserveCatalogManageLang.js
new file mode 100644
index 0000000..5286d97
--- /dev/null
+++ b/src/views/scm/reserveCatalogManageLang.js
@@ -0,0 +1,154 @@
+export const messages = {
+  en: {
+    reserveCatalogManage: {
+      search: {
+        title: 'Search Conditions',
+        namePlaceholder: 'Please enter name',
+        typePlaceholder: 'Please select type',
+        typeOption1: 'Reservation Dining',
+        typeOption2: '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'
+      },
+      add: {
+        title: 'Add 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: 'Add successfully',
+        error: 'Add failed'
+      },
+      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'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirmText1: 'Are you sure to delete the reservation catalog',
+        confirmText2: '? This operation cannot be undone.',
+        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'
+      },
+      fetchError: 'Failed to fetch data'
+    }
+  },
+  zh: {
+    reserveCatalogManage: {
+      search: {
+        title: '查询条件',
+        namePlaceholder: '请输入名称',
+        typePlaceholder: '请选择类型',
+        typeOption1: '预约就餐',
+        typeOption2: '预约服务'
+      },
+      list: {
+        title: '预约目录列表'
+      },
+      table: {
+        type: '类型',
+        type1: '预约就餐',
+        type2: '预约服务',
+        name: '名称',
+        sort: '排序',
+        state: '状态',
+        state1: '展示',
+        state2: '不展示',
+        createTime: '创建时间'
+      },
+      add: {
+        title: '添加预约目录',
+        name: '名称',
+        namePlaceholder: '必填，请输入名称',
+        sort: '排序',
+        sortPlaceholder: '必填，请输入排序',
+        type: '类型',
+        typePlaceholder: '必填，请选择类型',
+        typeOption1: '预约就餐',
+        typeOption2: '预约服务',
+        state: '状态',
+        statePlaceholder: '必填，请选择状态',
+        stateOption1: '展示',
+        stateOption2: '不展示',
+        success: '添加成功',
+        error: '添加失败'
+      },
+      edit: {
+        title: '修改预约目录',
+        name: '名称',
+        namePlaceholder: '必填，请输入名称',
+        sort: '排序',
+        sortPlaceholder: '必填，请输入排序',
+        type: '类型',
+        typePlaceholder: '必填，请选择类型',
+        typeOption1: '预约就餐',
+        typeOption2: '预约服务',
+        state: '状态',
+        statePlaceholder: '必填，请选择状态',
+        stateOption1: '展示',
+        stateOption2: '不展示',
+        success: '修改成功',
+        error: '修改失败'
+      },
+      delete: {
+        title: '删除确认',
+        confirmText1: '确定要删除预约目录',
+        confirmText2: '？此操作不可撤销。',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      validate: {
+        nameRequired: '名称不能为空',
+        nameMaxLength: '名称不能超过128个字符',
+        sortRequired: '排序不能为空',
+        sortMaxLength: '排序不能超过12个字符',
+        typeRequired: '类型不能为空',
+        stateRequired: '状态不能为空',
+        catalogIdRequired: '目录ID不能为空'
+      },
+      fetchError: '获取数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/reserveCatalogManageList.vue b/src/views/scm/reserveCatalogManageList.vue
new file mode 100644
index 0000000..976541b
--- /dev/null
+++ b/src/views/scm/reserveCatalogManageList.vue
@@ -0,0 +1,174 @@
+<template>
+  <div class="reserve-catalog-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="text-left">
+        <span>{{ $t('reserveCatalogManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <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>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="handleSearch">
+            {{ $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('reserveCatalogManage.list.title') }}</span>
+        <el-button type="primary" size="mini" @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">
+          <template slot-scope="scope">
+            {{ scope.row.type === '1001' ? $t('reserveCatalogManage.table.type1') :
+              $t('reserveCatalogManage.table.type2') }}
+          </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">
+          <template slot-scope="scope">
+            {{ scope.row.state === '1001' ? $t('reserveCatalogManage.table.state1') :
+              $t('reserveCatalogManage.table.state2') }}
+          </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">
+          <template slot-scope="scope">
+            <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)">
+              {{ $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-catalog ref="addDialog" @success="handleSuccess" />
+    <edit-reserve-catalog ref="editDialog" @success="handleSuccess" />
+    <delete-reserve-catalog ref="deleteDialog" @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'
+
+export default {
+  name: 'ReserveCatalogManageList',
+  components: {
+    AddReserveCatalog,
+    EditReserveCatalog,
+    DeleteReserveCatalog
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        name: '',
+        type: '',
+        communityId: ''
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.searchForm.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          ...this.searchForm
+        }
+        const { data, total } = await listReserveCatalog(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('reserveCatalogManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleAdd() {
+      this.$refs.addDialog.open()
+    },
+    handleEdit(row) {
+      this.$refs.editDialog.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteDialog.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-catalog-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
--
libgit2 0.21.4