diff --git a/src/api/report/commonReportApi.js b/src/api/report/commonReportApi.js
new file mode 100644
index 0000000..4ae5a48
--- /dev/null
+++ b/src/api/report/commonReportApi.js
@@ -0,0 +1,107 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取报表自定义列表
+export function listReportCustom(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportCustom.listReportCustom',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取报表自定义组件关系
+export function listReportCustomComponentRel(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportCustomComponentRel.listReportCustomComponentRel',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取报表自定义组件条件
+export function listReportCustomComponentCondition(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportCustomComponentCondition.listReportCustomComponentCondition',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取报表自定义组件数据
+export function listReportCustomComponentData(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportCustomComponent.listReportCustomComponentData',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取报表自定义组件页脚数据
+export function listReportCustomComponentDataFooter(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportCustomComponent.listReportCustomComponentDataFooter',
+      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)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/report/reportHuaningApi.js b/src/api/report/reportHuaningApi.js
new file mode 100644
index 0000000..6e2e993
--- /dev/null
+++ b/src/api/report/reportHuaningApi.js
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询未收情况表数据
+export function queryHuaningOweFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics/queryHuaningOweFee',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询未收明细表数据
+export function queryHuaningOweFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics/queryHuaningOweFeeDetail',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询当月收费情况表数据
+export function queryHuaningPayFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/reportFeeMonthStatistics/queryHuaningPayFee',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询费用明细
+export function queryFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryFeeDetail',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询楼栋列表
+export function listFloors(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/floor.queryFloors',
+      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/report/reportPayFeeDepositApi.js b/src/api/report/reportPayFeeDepositApi.js
new file mode 100644
index 0000000..3c77db2
--- /dev/null
+++ b/src/api/report/reportPayFeeDepositApi.js
@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询押金报表
+export function queryPayFeeDeposit(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/reportFeeMonthStatistics/queryPayFeeDeposit',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 导出押金报表数据
+export function exportData(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/export.exportData',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询单元列表
+export function queryUnits(params) {
+  return new Promise((resolve, reject) => {
+    params.communityId = getCommunityId()
+    request({
+      url: '/unit.queryUnits',
+      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/couponMarketApi.js b/src/api/scm/couponMarketApi.js
new file mode 100644
index 0000000..f752c55
--- /dev/null
+++ b/src/api/scm/couponMarketApi.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 获取供应商列表
+export function listSupplier(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/supplier.listSupplier',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取优惠券列表
+export function listSupplierCoupon(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/supplierCoupon.listSupplierCoupon',
+      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/couponPropertyPoolManageApi.js b/src/api/scm/couponPropertyPoolManageApi.js
new file mode 100644
index 0000000..7f9c0a2
--- /dev/null
+++ b/src/api/scm/couponPropertyPoolManageApi.js
@@ -0,0 +1,97 @@
+import request from '@/utils/request'
+
+// 获取优惠券池列表
+export function listCouponPropertyPool(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponProperty.listCouponPropertyPool',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 新增优惠券池
+export function saveCouponPropertyPool(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponProperty.saveCouponPropertyPool',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新优惠券池
+export function updateCouponPropertyPool(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponProperty.updateCouponPropertyPool',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除优惠券池
+export function deleteCouponPropertyPool(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponProperty.deleteCouponPropertyPool',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 赠送优惠券
+export function giftCouponProperty(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponProperty.giftCouponProperty',
+      method: 'post',
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取优惠券属性
+export function listCouponKey(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponKey.listCouponKey',
+      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/couponRuleApi.js b/src/api/scm/couponRuleApi.js
new file mode 100644
index 0000000..10db3be
--- /dev/null
+++ b/src/api/scm/couponRuleApi.js
@@ -0,0 +1,249 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 获取优惠券规则列表
+export function listCouponRule(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.listCouponRule',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加优惠券规则
+export function saveCouponRule(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.saveCouponRule',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新优惠券规则
+export function updateCouponRule(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.updateCouponRule',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除优惠券规则
+export function deleteCouponRule(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.deleteCouponRule',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取优惠券规则关联的优惠券列表
+export function listCouponRuleCpps(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.listCouponRuleCpps',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加优惠券规则关联的优惠券
+export function saveCouponRuleCpps(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.saveCouponRuleCpps',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 更新优惠券规则关联的优惠券
+export function updateCouponRuleCpps(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.updateCouponRuleCpps',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除优惠券规则关联的优惠券
+export function deleteCouponRuleCpps(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.deleteCouponRuleCpps',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取优惠券规则关联的缴费赠送列表
+export function listCouponRuleFee(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.listCouponRuleFee',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加优惠券规则关联的缴费赠送
+export function saveCouponRuleFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.saveCouponRuleFee',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除优惠券规则关联的缴费赠送
+export function deleteCouponRuleFee(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponRule.deleteCouponRuleFee',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取优惠券属性池列表
+export function listCouponPropertyPool(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/couponProperty.listCouponPropertyPool',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取费用配置列表
+export function listFeeConfigs(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeConfig.listFeeConfigs',
+      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/components/report/ReportHuaningOweFee.vue b/src/components/report/ReportHuaningOweFee.vue
new file mode 100644
index 0000000..5f27bc4
--- /dev/null
+++ b/src/components/report/ReportHuaningOweFee.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="report-owe-fee-container">
+    <el-table :data="reportHuaningOweFeeInfo.fees" border style="width: 100%" class="margin-top">
+      <el-table-column prop="floorNum" :label="$t('reportHuaningOweFee.table.floorNum')" align="center" />
+      <el-table-column prop="oweAmount"
+        :label="$t('reportHuaningOweFee.table.totalOweAmount', { date: reportHuaningOweFeeInfo.dateStr })"
+        align="center" />
+      <el-table-column prop="curOweAmount" :label="_getCurYear() + $t('reportHuaningOweFee.table.oweAmount')"
+        align="center" />
+      <el-table-column prop="preOweAmount" :label="_getPreCurYear()" align="center" />
+    </el-table>
+
+    <el-pagination :current-page.sync="pagination.current" :page-size="pagination.size" :total="pagination.total"
+      layout="total, prev, pager, next, jumper" @current-change="handlePageChange" class="margin-top" />
+  </div>
+</template>
+
+<script>
+import { queryHuaningOweFee } from '@/api/report/reportHuaningApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import {getDateYYYYMMDD} from '@/utils/dateUtil'
+
+export default {
+  name: 'ReportHuaningOweFee',
+  data() {
+    return {
+      reportHuaningOweFeeInfo: {
+        fees: [],
+        dateStr:getDateYYYYMMDD(),
+        conditions: {}
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    async initData(conditions) {
+      this.reportHuaningOweFeeInfo.conditions = { ...conditions }
+      this.pagination.current = 1
+      await this._listReportHuaningOweFee()
+    },
+    async _listReportHuaningOweFee() {
+      try {
+        const params = {
+          ...this.reportHuaningOweFeeInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: getCommunityId(),
+          objType: '3333'
+        }
+
+        const { data, total } = await queryHuaningOweFee(params)
+
+        this.reportHuaningOweFeeInfo.fees = data
+        this.pagination.total = total
+        this.reportHuaningOweFeeInfo.listColumns = []
+
+        if (data.length > 0 && data[0].reportFeeYearCollectionDetailDtos) {
+          data[0].reportFeeYearCollectionDetailDtos.forEach(item => {
+            this.reportHuaningOweFeeInfo.listColumns.push(`${item.collectionYear}${this.$t('common.year')}`)
+          })
+        }
+      } catch (error) {
+        console.error('获取欠费数据失败:', error)
+      }
+    },
+    handlePageChange(currentPage) {
+      this.pagination.current = currentPage
+      this._listReportHuaningOweFee()
+    },
+    _getCurYear() {
+      const date = new Date()
+      const year = date.getFullYear()
+      const month = date.getMonth() + 1
+      return `${year}${this.$t('common.year')}1-${month}${this.$t('common.month')}`
+    },
+    _getPreCurYear() {
+      const date = new Date()
+      const year = date.getFullYear()
+      return `${year}${this.$t('reportHuaningOweFee.table.preYearOweAmount')}`
+    },
+    _showFeeDetail(fee, item) {
+      this.$refs.viewFeeDetail.open({
+        roomName: fee.objName,
+        feeId: fee.feeId,
+        configId: fee.configId,
+        payerObjId: fee.objId,
+        curYear: item.collectionYear
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-owe-fee-container {
+  .margin-top {
+    margin-top: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/ReportHuaningOweFeeDetail.vue b/src/components/report/ReportHuaningOweFeeDetail.vue
new file mode 100644
index 0000000..69284a5
--- /dev/null
+++ b/src/components/report/ReportHuaningOweFeeDetail.vue
@@ -0,0 +1,84 @@
+<template>
+  <div class="report-owe-fee-detail-container">
+    <el-table :data="reportHuaningOweFeeDetailInfo.fees" border style="width: 100%" class="margin-top">
+      <el-table-column prop="roomName" :label="$t('reportHuaningOweFeeDetail.table.roomNum')" align="center" />
+      <el-table-column prop="builtUpArea" :label="$t('reportHuaningOweFeeDetail.table.area')" align="center" />
+      <el-table-column prop="feeName" :label="$t('reportHuaningOweFeeDetail.table.fee')" align="center" />
+      <el-table-column prop="startTime" :label="$t('reportHuaningOweFeeDetail.table.startTime')" align="center" />
+      <el-table-column prop="endTime" :label="$t('reportHuaningOweFeeDetail.table.endTime')" align="center" />
+      <el-table-column prop="oweAmount" :label="$t('reportHuaningOweFeeDetail.table.totalOweAmount')" align="center" />
+      <el-table-column prop="curOweAmount"
+        :label="`${reportHuaningOweFeeDetailInfo.conditions.year}${$t('common.year')}1-${reportHuaningOweFeeDetailInfo.conditions.month}${$t('common.month')}${$t('reportHuaningOweFeeDetail.table.oweAmount')}`"
+        align="center" />
+      <el-table-column prop="preOweAmount"
+        :label="`${reportHuaningOweFeeDetailInfo.conditions.year}${$t('common.year')}${$t('reportHuaningOweFeeDetail.table.preYearOweAmount')}`"
+        align="center" />
+    </el-table>
+
+    <el-pagination :current-page.sync="pagination.current" :page-size="pagination.size" :total="pagination.total"
+      layout="total, prev, pager, next, jumper" @current-change="handlePageChange" class="margin-top" />
+  </div>
+</template>
+
+<script>
+import { queryHuaningOweFeeDetail } from '@/api/report/reportHuaningApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import {getDateYYYYMMDD} from '@/utils/dateUtil'
+
+export default {
+  name: 'ReportHuaningOweFeeDetail',
+  data() {
+    return {
+      reportHuaningOweFeeDetailInfo: {
+        fees: [],
+        conditions: {
+          year: new Date().getFullYear(),
+          month: new Date().getMonth() + 1
+        },
+        dateStr: getDateYYYYMMDD()
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    async initData(conditions) {
+      this.reportHuaningOweFeeDetailInfo.conditions = { ...conditions }
+      this.pagination.current = 1
+      await this._listReportHuaningOweFeeDetail()
+    },
+    async _listReportHuaningOweFeeDetail() {
+      try {
+        const params = {
+          ...this.reportHuaningOweFeeDetailInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: getCommunityId()
+        }
+
+        const { data, total } = await queryHuaningOweFeeDetail(params)
+
+        this.reportHuaningOweFeeDetailInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取欠费明细数据失败:', error)
+      }
+    },
+    handlePageChange(currentPage) {
+      this.pagination.current = currentPage
+      this._listReportHuaningOweFeeDetail()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-owe-fee-detail-container {
+  .margin-top {
+    margin-top: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/ReportHuaningPayFee.vue b/src/components/report/ReportHuaningPayFee.vue
new file mode 100644
index 0000000..ff306a0
--- /dev/null
+++ b/src/components/report/ReportHuaningPayFee.vue
@@ -0,0 +1,97 @@
+<template>
+  <div class="report-pay-fee-container">
+    <el-table :data="reportHuaningPayFeeInfo.fees" border style="width: 100%" class="margin-top">
+      <el-table-column prop="floorNum" :label="$t('reportHuaningPayFee.table.floorNum')" align="center" />
+      <el-table-column prop="receivableAmount" :label="$t('reportHuaningPayFee.table.monthlyReceivable')"
+        align="center" />
+      <el-table-column prop="receivedAmount"
+        :label="`${reportHuaningPayFeeInfo.conditions.month}${$t('reportHuaningPayFee.table.monthReceived')}`"
+        align="center" />
+      <el-table-column prop="receivedAmount1" :label="`${reportHuaningPayFeeInfo.conditions.month}${$t('reportHuaningPayFee.table.monthReceivedPart1', {
+        year: reportHuaningPayFeeInfo.conditions.year,
+        month: reportHuaningPayFeeInfo.conditions.month - 1
+      })}`" align="center" />
+      <el-table-column prop="receivedAmount2" :label="`${reportHuaningPayFeeInfo.conditions.month}${$t('reportHuaningPayFee.table.monthReceivedPart2', {
+        year: reportHuaningPayFeeInfo.conditions.year,
+        month: reportHuaningPayFeeInfo.conditions.month
+      })}`" align="center" />
+      <el-table-column prop="receivedAmount3" :label="`${reportHuaningPayFeeInfo.conditions.month}${$t('reportHuaningPayFee.table.monthReceivedPart3', {
+        nextMonth: _getNextMonth()
+      })}`" align="center" />
+      <el-table-column prop="receivedAmount4" :label="`${reportHuaningPayFeeInfo.conditions.month}${$t('reportHuaningPayFee.table.monthReceivedPart4', {
+        year: reportHuaningPayFeeInfo.conditions.year
+      })}`" align="center" />
+    </el-table>
+
+    <el-pagination :current-page.sync="pagination.current" :page-size="pagination.size" :total="pagination.total"
+      layout="total, prev, pager, next, jumper" @current-change="handlePageChange" class="margin-top" />
+  </div>
+</template>
+
+<script>
+import { queryHuaningPayFee } from '@/api/report/reportHuaningApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import {getDateYYYYMMDD} from '@/utils/dateUtil'
+
+export default {
+  name: 'ReportHuaningPayFee',
+  data() {
+    return {
+      reportHuaningPayFeeInfo: {
+        fees: [],
+        conditions: {
+          year: new Date().getFullYear(),
+          month: new Date().getMonth() + 1
+        },
+        dateStr:getDateYYYYMMDD()
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    async initData(conditions) {
+      this.reportHuaningPayFeeInfo.conditions = { ...conditions }
+      this.pagination.current = 1
+      await this._listReportHuaningPayFee()
+    },
+    async _listReportHuaningPayFee() {
+      try {
+        const params = {
+          ...this.reportHuaningPayFeeInfo.conditions,
+          page: this.pagination.current,
+          row: this.pagination.size,
+          communityId: getCommunityId()
+        }
+
+        const { data, total } = await queryHuaningPayFee(params)
+
+        this.reportHuaningPayFeeInfo.fees = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('获取缴费数据失败:', error)
+      }
+    },
+    handlePageChange(currentPage) {
+      this.pagination.current = currentPage
+      this._listReportHuaningPayFee()
+    },
+    _getNextMonth() {
+      const date = new Date()
+      date.setMonth(date.getMonth() + 1)
+      return `${date.getFullYear()}${this.$t('common.year')}${date.getMonth() + 1}${this.$t('common.month')}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-pay-fee-container {
+  .margin-top {
+    margin-top: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/commonReportTable.vue b/src/components/report/commonReportTable.vue
new file mode 100644
index 0000000..b808744
--- /dev/null
+++ b/src/components/report/commonReportTable.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="common-report-table">
+    <div v-for="(item, index) in commonReportTableInfo.components" :key="index">
+      <el-card v-if="item.conditions && item.conditions.length > 0" class="query-card">
+        <div slot="header" class="clearfix">
+          <span>{{ $t('commonReportTable.queryConditions') }}</span>
+        </div>
+        <el-row :gutter="20">
+          <el-col v-for="(conditionItem, conditionIndex) in item.conditions" :key="conditionIndex" :span="6">
+              <el-input v-model.trim="conditionItem.value" :type="conditionItem.type"
+                :placeholder="conditionItem.holdpace" clearable />
+          </el-col>
+          <el-col :span="6">
+            <el-button type="primary" @click="_queryReportTableMethod(item)">
+              <i class="el-icon-search"></i>
+              {{ $t('commonReportTable.query') }}
+            </el-button>
+            <el-button @click="_resetReportTableMethod(item)">
+              <i class="el-icon-refresh"></i>
+              {{ $t('commonReportTable.reset') }}
+            </el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card class="table-card">
+        <div slot="header" class="clearfix">
+          <span>{{ item.componentName }}</span>
+          <div style="float: right;">
+            <el-button type="primary" size="small" @click="_exportReportTableMethod(item)">
+              <i class="el-icon-download"></i>
+              {{ $t('commonReportTable.export') }}
+            </el-button>
+            <el-button type="primary" size="small" @click="_printReportTableMethod(item)">
+              <i class="el-icon-printer"></i>
+              {{ $t('commonReportTable.print') }}
+            </el-button>
+          </div>
+        </div>
+
+        <el-table :data="item.data" border style="width: 100%" v-loading="loading">
+          <el-table-column v-for="(itemTh, indexTh) in item.th" :key="indexTh" :label="itemTh" align="center">
+            <template slot-scope="scope">
+              <div class="text-auto">
+                {{ scope.row[itemTh] }}
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+
+        <div v-if="item.footer" class="footer-wrapper">
+          <el-row :gutter="20">
+            <el-col v-for="(tmpItemTh, key) in item.footer" :key="key" :span="4">
+              <div class="footer-item">
+                {{ key }}: {{ tmpItemTh }}
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+
+        <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" />
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+import {
+  listReportCustomComponentRel,
+  listReportCustomComponentCondition,
+  listReportCustomComponentData,
+  listReportCustomComponentDataFooter,
+  exportData
+} from '@/api/report/commonReportApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CommonReportTable',
+  data() {
+    return {
+      commonReportTableInfo: {
+        components: [],
+        customId: ''
+      },
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      loading: false,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    handleSwitch(value) {
+      this.commonReportTableInfo.customId = value.customId
+      this._listReportCustomTableComponent()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this._queryReportTableMethod(this.commonReportTableInfo.components[0])
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this._queryReportTableMethod(this.commonReportTableInfo.components[0])
+    },
+    async _queryReportTableMethod(item) {
+      const condition = {}
+      item.conditions.forEach(_item => {
+        condition[_item.param] = _item.value
+      })
+      await this._listReportCustomTableDatas(this.pagination.current, this.pagination.size, item, condition)
+      await this._listReportCustomTableFooter(this.pagination.current, this.pagination.size, item, condition)
+    },
+    _resetReportTableMethod(item) {
+      const condition = {}
+      item.conditions.forEach(_item => {
+        _item.value = ''
+        condition[_item.param] = _item.value
+      })
+      this._listReportCustomTableDatas(1, this.pagination.size, item, condition)
+      this._listReportCustomTableFooter(1, this.pagination.size, item, condition)
+    },
+    async _listReportCustomTableComponent() {
+      try {
+        this.loading = true
+        const params = {
+          page: 1,
+          row: this.pagination.size,
+          customId: this.commonReportTableInfo.customId,
+          componentType: '1001'
+        }
+        const { data } = await listReportCustomComponentRel(params)
+        this.commonReportTableInfo.components = data
+        for (const item of this.commonReportTableInfo.components) {
+          await this._listReportCustomTableConditions(item)
+          await this._listReportCustomTableDatas(1, this.pagination.size, item)
+          await this._listReportCustomTableFooter(1, this.pagination.size, item)
+        }
+      } catch (error) {
+        console.error('Failed to load report components:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async _listReportCustomTableConditions(component) {
+      try {
+        const params = {
+          page: 1,
+          row: this.pagination.size,
+          componentId: component.componentId
+        }
+        const { data } = await listReportCustomComponentCondition(params)
+        component.conditions = data
+      } catch (error) {
+        console.error('Failed to load conditions:', error)
+      }
+    },
+    async _listReportCustomTableDatas(page, row, component, conditions) {
+      try {
+        this.loading = true
+        const params = {
+          page,
+          row,
+          componentId: component.componentId,
+          communityId: this.communityId,
+          ...conditions
+        }
+        const { data, total } = await listReportCustomComponentData(params)
+        component.th = data.th
+        component.data = data.td
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to load table data:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async _listReportCustomTableFooter(page, row, component, conditions) {
+      try {
+        const params = {
+          page,
+          row,
+          componentId: component.componentId,
+          communityId: this.communityId,
+          ...conditions
+        }
+        const { data } = await listReportCustomComponentDataFooter(params)
+        component.footer = data
+      } catch (error) {
+        console.error('Failed to load footer data:', error)
+      }
+    },
+    async _exportReportTableMethod(item) {
+      try {
+        const condition = {}
+        item.conditions.forEach(_item => {
+          condition[_item.param] = _item.value
+        })
+        const params = {
+          page: 1,
+          row: 10000,
+          componentId: item.componentId,
+          communityId: this.communityId,
+          pagePath: 'exportCustomReportTableData',
+          ...condition
+        }
+        const { code, msg } = await exportData(params)
+        this.$message.success(msg)
+        if (code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=downloadCenter')
+        }
+      } catch (error) {
+        console.error('Export failed:', error)
+      }
+    },
+    _printReportTableMethod(data) {
+      this.$store.commit('SET_PRINT_DATA', data)
+      window.open('/print.html#/pages/property/printCommonReportTable')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.common-report-table {
+  .query-card {
+    margin-bottom: 20px;
+  }
+
+  .table-card {
+    margin-bottom: 20px;
+  }
+
+  .text-auto {
+    max-width: 200px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .footer-wrapper {
+    margin-top: 20px;
+    padding: 10px;
+    background-color: #f5f7fa;
+    border-radius: 4px;
+
+    .footer-item {
+      padding: 5px 0;
+    }
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/searchFloor.vue b/src/components/report/searchFloor.vue
new file mode 100644
index 0000000..ed3b3b4
--- /dev/null
+++ b/src/components/report/searchFloor.vue
@@ -0,0 +1,195 @@
+<template>
+  <el-dialog
+    :title="$t('searchFloor.title')"
+    :visible.sync="visible"
+    width="70%"
+    @close="handleClose">
+    <el-row :gutter="20">
+      <el-col :span="24">
+        <el-card>
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <el-input
+                v-model="searchForm.floorId"
+                :placeholder="$t('searchFloor.floorId')"
+                clearable>
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="searchForm.floorName"
+                :placeholder="$t('searchFloor.floorName')"
+                clearable>
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-input
+                v-model="searchForm.floorNum"
+                :placeholder="$t('searchFloor.floorNum')"
+                clearable>
+              </el-input>
+            </el-col>
+            <el-col :span="6">
+              <el-button type="primary" @click="searchFloors">
+                <i class="el-icon-search"></i>
+                {{ $t('searchFloor.search') }}
+              </el-button>
+              <el-button @click="resetFloors" style="margin-left: 10px;">
+                <i class="el-icon-refresh"></i>
+                {{ $t('searchFloor.reset') }}
+              </el-button>
+            </el-col>
+          </el-row>
+          
+          <el-table
+            :data="floors"
+            border
+            style="width: 100%; margin-top: 20px;"
+            v-loading="loading">
+            <el-table-column
+              prop="floorId"
+              :label="$t('searchFloor.table.floorId')"
+              align="center">
+            </el-table-column>
+            <el-table-column
+              prop="floorName"
+              :label="$t('searchFloor.table.floorName')"
+              align="center">
+            </el-table-column>
+            <el-table-column
+              prop="floorNum"
+              :label="$t('searchFloor.table.floorNum')"
+              align="center">
+            </el-table-column>
+            <el-table-column
+              prop="userName"
+              :label="$t('searchFloor.table.userName')"
+              align="center">
+            </el-table-column>
+            <el-table-column
+              :label="$t('searchFloor.table.operation')"
+              align="center"
+              width="120">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="primary"
+                  @click="chooseFloor(scope.row)">
+                  {{ $t('searchFloor.table.choose') }}
+                </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="total"
+            style="margin-top: 20px;">
+          </el-pagination>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFloors } from '@/api/property/floorApi'
+
+export default {
+  name: 'SearchFloor',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      communityId: '',
+      searchForm: {
+        floorId: '',
+        floorName: '',
+        floorNum: ''
+      },
+      floors: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.refreshSearchFloorData()
+      this.loadAllFloorInfo()
+    },
+    async loadAllFloorInfo() {
+      this.loading = true
+      try {
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          communityId: this.communityId,
+          floorId: this.searchForm.floorId,
+          floorName: this.searchForm.floorName,
+          floorNum: this.searchForm.floorNum
+        }
+        const res = await queryFloors(params)
+        this.floors = res.data
+        this.page.total = res.total
+      } catch (error) {
+        console.error('获取楼栋列表失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    chooseFloor(floor) {
+      this.$emit('chooseFloor', floor)
+      this.visible = false
+    },
+    searchFloors() {
+      this.page.current = 1
+      this.loadAllFloorInfo()
+    },
+    resetFloors() {
+      this.searchForm = {
+        floorId: '',
+        floorName: '',
+        floorNum: ''
+      }
+      this.loadAllFloorInfo()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.loadAllFloorInfo()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.loadAllFloorInfo()
+    },
+    refreshSearchFloorData() {
+      this.searchForm = {
+        floorId: '',
+        floorName: '',
+        floorNum: ''
+      }
+    },
+    handleClose() {
+      this.refreshSearchFloorData()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog__body {
+  padding: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/report/viewFeeDetail.vue b/src/components/report/viewFeeDetail.vue
index 1e56d80..3d0cb37 100644
--- a/src/components/report/viewFeeDetail.vue
+++ b/src/components/report/viewFeeDetail.vue
@@ -1,40 +1,33 @@
 <template>
-  <el-dialog :title="`${viewFeeDetailInfo.curYear}${$t('viewFeeDetail.yearFeeHistory')}(${viewFeeDetailInfo.roomName})`"
-    :visible.sync="dialogVisible" width="80%" top="5vh">
-    <el-table :data="viewFeeDetailInfo.feeDetails" border style="width: 100%" height="500">
-      <el-table-column prop="cycles" :label="$t('viewFeeDetail.cycle')" align="center">
-      </el-table-column>
-      <el-table-column prop="receivableAmount" :label="$t('viewFeeDetail.receivableAmount')" align="center">
-      </el-table-column>
-      <el-table-column prop="receivedAmount" :label="$t('viewFeeDetail.receivedAmount')" align="center">
-      </el-table-column>
-      <el-table-column prop="createTime" :label="$t('viewFeeDetail.paymentTime')" align="center">
-      </el-table-column>
-      <el-table-column prop="startTime" :label="$t('viewFeeDetail.startTime')" align="center">
+  <el-dialog :title="`${viewFeeDetailInfo.curYear}${$t('viewFeeDetail.title')}(${viewFeeDetailInfo.roomName})`"
+    :visible.sync="dialogVisible" width="80%" @close="handleClose">
+    <el-table :data="viewFeeDetailInfo.feeDetails" border style="width: 100%">
+      <el-table-column prop="cycles" :label="$t('viewFeeDetail.table.cycle')" align="center" />
+      <el-table-column prop="receivableAmount" :label="$t('viewFeeDetail.table.receivableAmount')" align="center" />
+      <el-table-column prop="receivedAmount" :label="$t('viewFeeDetail.table.receivedAmount')" align="center" />
+      <el-table-column prop="createTime" :label="$t('viewFeeDetail.table.payTime')" align="center" />
+      <el-table-column prop="startTime" :label="$t('viewFeeDetail.table.startTime')" align="center">
         <template slot-scope="scope">
-          {{ $moment(scope.row.startTime).format('YYYY-MM-DD') }}
+          {{ $dayjs(scope.row.startTime).format('YYYY-MM-DD') }}
         </template>
       </el-table-column>
-      <el-table-column prop="endTime" :label="$t('viewFeeDetail.endTime')" align="center">
+      <el-table-column prop="endTime" :label="$t('viewFeeDetail.table.endTime')" align="center">
         <template slot-scope="scope">
-          {{ $moment(scope.row.endTime).format('YYYY-MM-DD') }}
+          {{ $dayjs(scope.row.endTime).format('YYYY-MM-DD') }}
         </template>
       </el-table-column>
-      <el-table-column prop="stateName" :label="$t('viewFeeDetail.status')" align="center">
-      </el-table-column>
-      <el-table-column prop="remark" :label="$t('viewFeeDetail.remark')" align="center">
-      </el-table-column>
+      <el-table-column prop="stateName" :label="$t('viewFeeDetail.table.status')" align="center" />
+      <el-table-column prop="remark" :label="$t('viewFeeDetail.table.remark')" 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">
-    </el-pagination>
+    <el-pagination :current-page.sync="pagination.current" :page-size="pagination.size" :total="pagination.total"
+      layout="total, prev, pager, next, jumper" @current-change="handlePageChange" class="margin-top" />
   </el-dialog>
 </template>
 
 <script>
-import { queryFeeDetail } from '@/api/report/reportProficientApi'
+import { queryFeeDetail } from '@/api/report/reportHuaningApi'
+import { getCommunityId } from '@/api/community/communityApi'
 
 export default {
   name: 'ViewFeeDetail',
@@ -43,11 +36,13 @@ export default {
       dialogVisible: false,
       viewFeeDetailInfo: {
         feeDetails: [],
-        curYear: '',
-        roomName: '',
+        total: 0,
+        records: 1,
         feeId: '',
         configId: '',
-        payerObjId: ''
+        payerObjId: '',
+        curYear: '',
+        roomName: ''
       },
       pagination: {
         current: 1,
@@ -65,29 +60,31 @@ export default {
       this.dialogVisible = true
       this.listFeeDetail()
     },
+    handleClose() {
+      this.dialogVisible = false
+      this.pagination.current = 1
+    },
     async listFeeDetail() {
       try {
         const params = {
           page: this.pagination.current,
           row: this.pagination.size,
+          communityId: getCommunityId(),
           curYear: this.viewFeeDetailInfo.curYear,
           configId: this.viewFeeDetailInfo.configId,
           payerObjId: this.viewFeeDetailInfo.payerObjId
         }
-        const { data, records } = await queryFeeDetail(params)
+
+        const { data, total } = await queryFeeDetail(params)
 
         this.viewFeeDetailInfo.feeDetails = data
-        this.pagination.total = records
+        this.pagination.total = total
       } catch (error) {
-        console.error('获取费用详情失败:', error)
+        console.error('获取费用明细失败:', error)
       }
     },
-    handleSizeChange(val) {
-      this.pagination.size = val
-      this.listFeeDetail()
-    },
-    handleCurrentChange(val) {
-      this.pagination.current = val
+    handlePageChange(currentPage) {
+      this.pagination.current = currentPage
       this.listFeeDetail()
     }
   }
@@ -95,7 +92,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-::v-deep .el-dialog__body {
-  padding: 20px;
+.margin-top {
+  margin-top: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/scm/AddCouponRule.vue b/src/components/scm/AddCouponRule.vue
new file mode 100644
index 0000000..791a829
--- /dev/null
+++ b/src/components/scm/AddCouponRule.vue
@@ -0,0 +1,92 @@
+<template>
+  <el-dialog
+    :title="$t('couponRule.addRule')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('couponRule.ruleName')" prop="ruleName">
+        <el-input v-model="form.ruleName" :placeholder="$t('couponRule.ruleNamePlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('couponRule.remark')" prop="remark">
+        <el-input
+          type="textarea"
+          :rows="3"
+          v-model="form.remark"
+          :placeholder="$t('couponRule.remarkPlaceholder')" />
+      </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 { saveCouponRule } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddCouponRule',
+  data() {
+    return {
+      visible: false,
+      form: {
+        ruleName: '',
+        remark: '',
+        communityId: ''
+      },
+      rules: {
+        ruleName: [
+          { required: true, message: this.$t('couponRule.ruleNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('couponRule.ruleNameMaxLength'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 512, message: this.$t('couponRule.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+      this.form.communityId = getCommunityId()
+      this.$nextTick(() => {
+        this.$refs.form.resetFields()
+      })
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveCouponRule(this.form)
+            this.$message.success(this.$t('common.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to add coupon rule:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-form {
+    padding: 0 20px;
+    
+    .el-input, .el-textarea {
+      width: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/AddCouponRuleCpps.vue b/src/components/scm/AddCouponRuleCpps.vue
new file mode 100644
index 0000000..49143ca
--- /dev/null
+++ b/src/components/scm/AddCouponRuleCpps.vue
@@ -0,0 +1,155 @@
+<template>
+  <el-dialog
+    :title="$t('couponRuleCpps.addCoupon')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form 
+      ref="form" 
+      :model="form" 
+      :rules="rules" 
+      label-width="120px">
+      <el-form-item 
+        :label="$t('couponRuleCpps.coupon')" 
+        prop="cppId">
+        <el-select 
+          v-model="form.cppId" 
+          :placeholder="$t('couponRuleCpps.couponPlaceholder')"
+          style="width: 100%">
+          <el-option
+            v-for="item in couponOptions"
+            :key="item.cppId"
+            :label="item.couponName"
+            :value="item.cppId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleCpps.quantity')" 
+        prop="quantity">
+        <el-input 
+          v-model="form.quantity" 
+          :placeholder="$t('couponRuleCpps.quantityPlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleCpps.frequency')" 
+        prop="giftFrequency">
+        <el-select 
+          v-model="form.giftFrequency" 
+          :placeholder="$t('couponRuleCpps.frequencyPlaceholder')"
+          style="width: 100%">
+          <el-option
+            v-for="item in frequencyOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </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 { saveCouponRuleCpps, listCouponPropertyPool } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddCouponRuleCpps',
+  props: {
+    ruleId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        cppId: '',
+        quantity: '',
+        giftFrequency: '100301',
+        ruleId: '',
+        communityId: ''
+      },
+      rules: {
+        cppId: [
+          { required: true, message: this.$t('couponRuleCpps.couponRequired'), trigger: 'change' }
+        ],
+        quantity: [
+          { required: true, message: this.$t('couponRuleCpps.quantityRequired'), trigger: 'blur' },
+          { pattern: /^[1-9]\d*$/, message: this.$t('couponRuleCpps.quantityPattern'), trigger: 'blur' }
+        ],
+        giftFrequency: [
+          { required: true, message: this.$t('couponRuleCpps.frequencyRequired'), trigger: 'change' }
+        ]
+      },
+      couponOptions: [],
+      frequencyOptions: [
+        { value: '100301', label: this.$t('couponRuleCpps.once') },
+        { value: '100302', label: this.$t('couponRuleCpps.monthly') }
+      ]
+    }
+  },
+  methods: {
+    open() {
+      this.form.ruleId = this.ruleId
+      this.form.communityId = getCommunityId()
+      this.getCouponOptions()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form.resetFields()
+      })
+    },
+    async getCouponOptions() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: getCommunityId()
+        }
+        const { data } = await listCouponPropertyPool(params)
+        this.couponOptions = data
+      } catch (error) {
+        console.error('Failed to get coupon options:', error)
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveCouponRuleCpps(this.form)
+            this.$message.success(this.$t('common.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to add coupon rule cpps:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-form {
+    padding: 0 20px;
+    
+    .el-input, .el-select {
+      width: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/AddCouponRuleFee.vue b/src/components/scm/AddCouponRuleFee.vue
new file mode 100644
index 0000000..3a974c4
--- /dev/null
+++ b/src/components/scm/AddCouponRuleFee.vue
@@ -0,0 +1,163 @@
+<template>
+  <el-dialog
+    :title="$t('couponRuleFee.addFee')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form 
+      ref="form" 
+      :model="form" 
+      :rules="rules" 
+      label-width="120px">
+      <el-form-item 
+        :label="$t('couponRuleFee.fee')" 
+        prop="feeConfigId">
+        <el-select 
+          v-model="form.feeConfigId" 
+          :placeholder="$t('couponRuleFee.feePlaceholder')"
+          style="width: 100%">
+          <el-option
+            v-for="item in feeOptions"
+            :key="item.configId"
+            :label="item.feeName"
+            :value="item.configId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleFee.payStartTime')" 
+        prop="payStartTime">
+        <el-date-picker
+          v-model="form.payStartTime"
+          type="datetime"
+          :placeholder="$t('couponRuleFee.payStartTimePlaceholder')"
+          style="width: 100%">
+        </el-date-picker>
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleFee.payEndTime')" 
+        prop="payEndTime">
+        <el-date-picker
+          v-model="form.payEndTime"
+          type="datetime"
+          :placeholder="$t('couponRuleFee.payEndTimePlaceholder')"
+          style="width: 100%">
+        </el-date-picker>
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleFee.payMonth')" 
+        prop="payMonth">
+        <el-input-number
+          v-model="form.payMonth"
+          :min="1"
+          :max="12"
+          :placeholder="$t('couponRuleFee.payMonthPlaceholder')">
+        </el-input-number>
+      </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 { saveCouponRuleFee, listFeeConfigs } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddCouponRuleFee',
+  props: {
+    ruleId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        feeConfigId: '',
+        payStartTime: '',
+        payEndTime: '',
+        payMonth: 1,
+        ruleId: '',
+        communityId: ''
+      },
+      rules: {
+        feeConfigId: [
+          { required: true, message: this.$t('couponRuleFee.feeRequired'), trigger: 'change' }
+        ],
+        payStartTime: [
+          { required: true, message: this.$t('couponRuleFee.payStartTimeRequired'), trigger: 'change' }
+        ],
+        payEndTime: [
+          { required: true, message: this.$t('couponRuleFee.payEndTimeRequired'), trigger: 'change' }
+        ],
+        payMonth: [
+          { required: true, message: this.$t('couponRuleFee.payMonthRequired'), trigger: 'blur' }
+        ]
+      },
+      feeOptions: []
+    }
+  },
+  methods: {
+    open() {
+      this.form.ruleId = this.ruleId
+      this.form.communityId = getCommunityId()
+      this.getFeeOptions()
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.form.resetFields()
+      })
+    },
+    async getFeeOptions() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: getCommunityId()
+        }
+        const { feeConfigs } = await listFeeConfigs(params)
+        this.feeOptions = feeConfigs
+      } catch (error) {
+        console.error('Failed to get fee options:', error)
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveCouponRuleFee(this.form)
+            this.$message.success(this.$t('common.addSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to add coupon rule fee:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-form {
+    padding: 0 20px;
+    
+    .el-select, .el-date-picker {
+      width: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/CouponRuleCpps.vue b/src/components/scm/CouponRuleCpps.vue
new file mode 100644
index 0000000..72887ce
--- /dev/null
+++ b/src/components/scm/CouponRuleCpps.vue
@@ -0,0 +1,192 @@
+<template>
+  <div class="coupon-rule-cpps">
+    <el-row class="operation-row">
+      <el-col :span="24">
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="handleQuery"
+          class="query-btn">
+          {{ $t('common.query') }}
+        </el-button>
+        <el-button 
+          type="primary" 
+          size="small" 
+          @click="openAddModal"
+          class="add-btn">
+          <i class="el-icon-plus"></i>
+          {{ $t('common.add') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+      v-loading="loading">
+      <el-table-column
+        prop="crcId"
+        :label="$t('couponRuleCpps.id')"
+        align="center"
+        width="100">
+      </el-table-column>
+      <el-table-column
+        prop="couponName"
+        :label="$t('couponRuleCpps.coupon')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="quantity"
+        :label="$t('couponRuleCpps.quantity')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="giftFrequencyName"
+        :label="$t('couponRuleCpps.frequency')"
+        align="center">
+      </el-table-column>
+      <el-table-column
+        :label="$t('common.operation')"
+        align="center"
+        width="200">
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            @click="openEditModal(scope.row)">
+            {{ $t('common.edit') }}
+          </el-button>
+          <el-button
+            size="mini"
+            type="danger"
+            @click="openDeleteModal(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="pagination.current"
+      :page-sizes="[10, 20, 30, 50]"
+      :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="pagination.total">
+    </el-pagination>
+
+    <add-coupon-rule-cpps 
+      ref="addCouponRuleCpps" 
+      :rule-id="ruleId"
+      @success="handleSuccess" />
+    <edit-coupon-rule-cpps 
+      ref="editCouponRuleCpps" 
+      @success="handleSuccess" />
+    <delete-coupon-rule-cpps 
+      ref="deleteCouponRuleCpps" 
+      @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listCouponRuleCpps } from '@/api/scm/couponRuleApi'
+import AddCouponRuleCpps from './AddCouponRuleCpps'
+import EditCouponRuleCpps from './EditCouponRuleCpps'
+import DeleteCouponRuleCpps from './DeleteCouponRuleCpps'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CouponRuleCpps',
+  components: {
+    AddCouponRuleCpps,
+    EditCouponRuleCpps,
+    DeleteCouponRuleCpps
+  },
+  props: {
+    ruleId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    ruleId() {
+      this.getList()
+    }
+  },
+  methods: {
+    async getList() {
+      if (!this.ruleId) return
+      
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ruleId: this.ruleId,
+          communityId: getCommunityId()
+        }
+        const { data, total } = await listCouponRuleCpps(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to get coupon rule cpps:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleQuery() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    openAddModal() {
+      this.$refs.addCouponRuleCpps.open()
+    },
+    openEditModal(row) {
+      this.$refs.editCouponRuleCpps.open(row)
+    },
+    openDeleteModal(row) {
+      this.$refs.deleteCouponRuleCpps.open(row)
+    },
+    handleSuccess() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon-rule-cpps {
+  .operation-row {
+    margin-bottom: 20px;
+    
+    .query-btn {
+      margin-right: 10px;
+    }
+  }
+  
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/CouponRuleDiv.vue b/src/components/scm/CouponRuleDiv.vue
new file mode 100644
index 0000000..a17f917
--- /dev/null
+++ b/src/components/scm/CouponRuleDiv.vue
@@ -0,0 +1,111 @@
+<template>
+  <el-card class="coupon-rule-div">
+    <div class="operation-buttons">
+      <el-button type="primary" size="small" @click="openAddModal">{{ $t('common.add') }}</el-button>
+      <el-button type="warning" size="small" @click="openEditModal">{{ $t('common.edit') }}</el-button>
+      <el-button type="danger" size="small" @click="openDeleteModal">{{ $t('common.delete') }}</el-button>
+    </div>
+
+    <el-divider></el-divider>
+
+    <el-tree :data="couponRules" :props="treeProps" node-key="ruleId" highlight-current @node-click="handleNodeClick"
+      class="coupon-rule-tree">
+      <span slot-scope="{ node }" class="custom-tree-node">
+        <span>{{ node.label }}</span>
+      </span>
+    </el-tree>
+  </el-card>
+</template>
+
+<script>
+import { listCouponRule } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CouponRuleDiv',
+  data() {
+    return {
+      couponRules: [],
+      currentRule: {},
+      treeProps: {
+        label: 'ruleName',
+        children: 'children'
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: this.communityId
+        }
+        const { data } = await listCouponRule(params)
+        this.couponRules = data
+        if (this.couponRules.length > 0) {
+          this.handleNodeClick(this.couponRules[0])
+        }
+      } catch (error) {
+        console.error('Failed to get coupon rules:', error)
+      }
+    },
+    handleNodeClick(data) {
+      this.currentRule = data
+      this.$emit('switch', data)
+    },
+    openAddModal() {
+      this.$emit('open-add')
+    },
+    openEditModal() {
+      if (!this.currentRule.ruleId) {
+        this.$message.warning(this.$t('couponRule.selectRuleFirst'))
+        return
+      }
+      this.$emit('open-edit', this.currentRule)
+    },
+    openDeleteModal() {
+      if (!this.currentRule.ruleId) {
+        this.$message.warning(this.$t('couponRule.selectRuleFirst'))
+        return
+      }
+      this.$emit('open-delete', this.currentRule)
+    },
+    refreshList() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon-rule-div {
+  height: 100%;
+
+  .operation-buttons {
+    margin-bottom: 10px;
+
+    .el-button {
+      margin-right: 10px;
+    }
+  }
+
+  .coupon-rule-tree {
+    height: calc(100% - 60px);
+    overflow-y: auto;
+
+    .custom-tree-node {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 14px;
+      padding-right: 8px;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/CouponRuleFees.vue b/src/components/scm/CouponRuleFees.vue
new file mode 100644
index 0000000..187d9d5
--- /dev/null
+++ b/src/components/scm/CouponRuleFees.vue
@@ -0,0 +1,150 @@
+<template>
+  <div class="coupon-rule-fees">
+    <el-row class="operation-row">
+      <el-col :span="24">
+        <el-button type="primary" size="small" @click="handleQuery" class="query-btn">
+          {{ $t('common.query') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="openAddModal" class="add-btn">
+          <i class="el-icon-plus"></i>
+          {{ $t('common.add') }}
+        </el-button>
+      </el-col>
+    </el-row>
+
+    <el-table :data="tableData" border style="width: 100%" v-loading="loading">
+      <el-table-column prop="crfId" :label="$t('couponRuleFee.id')" align="center" width="100">
+      </el-table-column>
+      <el-table-column prop="feeConfigName" :label="$t('couponRuleFee.fee')" align="center">
+      </el-table-column>
+      <el-table-column :label="$t('couponRuleFee.payTime')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.payStartTime }} ~ {{ scope.row.payEndTime }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="payMonth" :label="$t('couponRuleFee.payMonth')" align="center">
+      </el-table-column>
+      <el-table-column :label="$t('common.operation')" align="center" width="200">
+        <template slot-scope="scope">
+          <el-button size="mini" @click="openEditModal(scope.row)">
+            {{ $t('common.edit') }}
+          </el-button>
+          <el-button size="mini" type="danger" @click="openDeleteModal(scope.row)">
+            {{ $t('common.delete') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+      :current-page="pagination.current" :page-sizes="[10, 20, 30, 50]" :page-size="pagination.size"
+      layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
+    </el-pagination>
+
+    <add-coupon-rule-fee ref="addCouponRuleFee" :rule-id="ruleId" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listCouponRuleFee } from '@/api/scm/couponRuleApi'
+import AddCouponRuleFee from './AddCouponRuleFee'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CouponRuleFees',
+  components: {
+    AddCouponRuleFee
+  },
+  props: {
+    ruleId: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      loading: false,
+      tableData: [],
+      pagination: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  watch: {
+    ruleId() {
+      this.getList()
+    }
+  },
+  methods: {
+    async getList() {
+      if (!this.ruleId) return
+
+      this.loading = true
+      try {
+        const params = {
+          page: this.pagination.current,
+          row: this.pagination.size,
+          ruleId: this.ruleId,
+          communityId: getCommunityId()
+        }
+        const { data, total } = await listCouponRuleFee(params)
+        this.tableData = data
+        this.pagination.total = total
+      } catch (error) {
+        console.error('Failed to get coupon rule fees:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    handleQuery() {
+      this.pagination.current = 1
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.pagination.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.pagination.current = val
+      this.getList()
+    },
+    openAddModal() {
+      this.$refs.addCouponRuleFee.open()
+    },
+    openEditModal(row) {
+      // TODO: Implement edit modal
+      this.$refs.editCouponRuleFee.open(row)
+
+      this.$message.warning('Edit feature will be implemented soon')
+    },
+    openDeleteModal(row) {
+      this.$refs.deleteCouponRuleFee.open(row)
+
+      // TODO: Implement delete modal
+      this.$message.warning('Delete feature will be implemented soon')
+    },
+    handleSuccess() {
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon-rule-fees {
+  .operation-row {
+    margin-bottom: 20px;
+
+    .query-btn {
+      margin-right: 10px;
+    }
+  }
+
+  .el-pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/DeleteCouponRule.vue b/src/components/scm/DeleteCouponRule.vue
new file mode 100644
index 0000000..cb97f9a
--- /dev/null
+++ b/src/components/scm/DeleteCouponRule.vue
@@ -0,0 +1,67 @@
+<template>
+  <el-dialog
+    :title="$t('couponRule.deleteConfirm')"
+    :visible.sync="visible"
+    width="30%"
+    center>
+    <div class="text-center">
+      <p>{{ $t('couponRule.deleteRulePrompt') }}</p>
+      <p class="delete-item">{{ currentRule.ruleName }}</p>
+    </div>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm">{{ $t('common.confirmDelete') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteCouponRule } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteCouponRule',
+  data() {
+    return {
+      visible: false,
+      currentRule: {
+        ruleId: '',
+        ruleName: ''
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.currentRule = {
+        ruleId: data.ruleId,
+        ruleName: data.ruleName,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        await deleteCouponRule(this.currentRule)
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to delete coupon rule:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.text-center {
+  text-align: center;
+  
+  .delete-item {
+    font-weight: bold;
+    color: #f56c6c;
+    margin-top: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/DeleteCouponRuleCpps.vue b/src/components/scm/DeleteCouponRuleCpps.vue
new file mode 100644
index 0000000..f3a63d7
--- /dev/null
+++ b/src/components/scm/DeleteCouponRuleCpps.vue
@@ -0,0 +1,70 @@
+<template>
+  <el-dialog
+    :title="$t('couponRuleCpps.deleteConfirm')"
+    :visible.sync="visible"
+    width="30%"
+    center>
+    <div class="text-center">
+      <p>{{ $t('couponRuleCpps.deletePrompt') }}</p>
+      <p class="delete-item">{{ currentItem.couponName }}</p>
+    </div>
+    
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm">{{ $t('common.confirmDelete') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteCouponRuleCpps } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteCouponRuleCpps',
+  data() {
+    return {
+      visible: false,
+      currentItem: {
+        crcId: '',
+        couponName: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.currentItem = {
+        crcId: row.crcId,
+        couponName: row.couponName,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    async handleConfirm() {
+      try {
+        await deleteCouponRuleCpps({
+          crcId: this.currentItem.crcId,
+          communityId: this.currentItem.communityId
+        })
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        console.error('Failed to delete coupon rule cpps:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.text-center {
+  text-align: center;
+  
+  .delete-item {
+    font-weight: bold;
+    color: #f56c6c;
+    margin-top: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/DeleteCouponRuleFee.vue b/src/components/scm/DeleteCouponRuleFee.vue
new file mode 100644
index 0000000..3597a10
--- /dev/null
+++ b/src/components/scm/DeleteCouponRuleFee.vue
@@ -0,0 +1,97 @@
+<template>
+  <el-dialog
+    :title="$t('couponRuleFee.deleteConfirm')"
+    :visible.sync="visible"
+    width="30%"
+    center
+    @close="handleClose">
+    <div class="text-center">
+      <p>{{ $t('couponRuleFee.deletePrompt') }}</p>
+      <p class="delete-item">{{ currentItem.feeConfigName }}</p>
+      <p class="delete-info">
+        {{ currentItem.payStartTime }} ~ {{ currentItem.payEndTime }}
+      </p>
+    </div>
+    
+    <span 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>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteCouponRuleFee } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteCouponRuleFee',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      currentItem: {
+        crfId: '',
+        feeConfigName: '',
+        payStartTime: '',
+        payEndTime: '',
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.currentItem = {
+        crfId: row.crfId,
+        feeConfigName: row.feeConfigName,
+        payStartTime: row.payStartTime,
+        payEndTime: row.payEndTime,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.loading = false
+    },
+    async handleConfirm() {
+      this.loading = true
+      try {
+        await deleteCouponRuleFee({
+          crfId: this.currentItem.crfId,
+          communityId: this.currentItem.communityId
+        })
+        this.$message.success(this.$t('common.deleteSuccess'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(this.$t('common.deleteFailed'))
+        console.error('Failed to delete coupon rule fee:', error)
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.text-center {
+  text-align: center;
+  
+  .delete-item {
+    font-weight: bold;
+    color: #f56c6c;
+    margin: 10px 0;
+  }
+  
+  .delete-info {
+    color: #909399;
+    font-size: 12px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/EditCouponRule.vue b/src/components/scm/EditCouponRule.vue
new file mode 100644
index 0000000..a43afda
--- /dev/null
+++ b/src/components/scm/EditCouponRule.vue
@@ -0,0 +1,98 @@
+<template>
+  <el-dialog
+    :title="$t('couponRule.editRule')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+      <el-form-item :label="$t('couponRule.ruleName')" prop="ruleName">
+        <el-input v-model="form.ruleName" :placeholder="$t('couponRule.ruleNamePlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item :label="$t('couponRule.remark')" prop="remark">
+        <el-input
+          type="textarea"
+          :rows="3"
+          v-model="form.remark"
+          :placeholder="$t('couponRule.remarkPlaceholder')" />
+      </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 { updateCouponRule } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditCouponRule',
+  data() {
+    return {
+      visible: false,
+      form: {
+        ruleId: '',
+        ruleName: '',
+        remark: '',
+        communityId: ''
+      },
+      rules: {
+        ruleName: [
+          { required: true, message: this.$t('couponRule.ruleNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('couponRule.ruleNameMaxLength'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 512, message: this.$t('couponRule.remarkMaxLength'), trigger: 'blur' }
+        ],
+        ruleId: [
+          { required: true, message: this.$t('couponRule.ruleIdRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.form = {
+        ruleId: data.ruleId,
+        ruleName: data.ruleName,
+        remark: data.remark,
+        communityId: getCommunityId()
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateCouponRule(this.form)
+            this.$message.success(this.$t('common.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to edit coupon rule:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-form {
+    padding: 0 20px;
+    
+    .el-input, .el-textarea {
+      width: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/EditCouponRuleCpps.vue b/src/components/scm/EditCouponRuleCpps.vue
new file mode 100644
index 0000000..2c597e8
--- /dev/null
+++ b/src/components/scm/EditCouponRuleCpps.vue
@@ -0,0 +1,154 @@
+<template>
+  <el-dialog
+    :title="$t('couponRuleCpps.editCoupon')"
+    :visible.sync="visible"
+    width="50%"
+    @close="handleClose">
+    <el-form 
+      ref="form" 
+      :model="form" 
+      :rules="rules" 
+      label-width="120px">
+      <el-form-item 
+        :label="$t('couponRuleCpps.coupon')" 
+        prop="cppId">
+        <el-select 
+          v-model="form.cppId" 
+          :placeholder="$t('couponRuleCpps.couponPlaceholder')"
+          style="width: 100%">
+          <el-option
+            v-for="item in couponOptions"
+            :key="item.cppId"
+            :label="item.couponName"
+            :value="item.cppId">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleCpps.quantity')" 
+        prop="quantity">
+        <el-input 
+          v-model="form.quantity" 
+          :placeholder="$t('couponRuleCpps.quantityPlaceholder')" />
+      </el-form-item>
+      
+      <el-form-item 
+        :label="$t('couponRuleCpps.frequency')" 
+        prop="giftFrequency">
+        <el-select 
+          v-model="form.giftFrequency" 
+          :placeholder="$t('couponRuleCpps.frequencyPlaceholder')"
+          style="width: 100%">
+          <el-option
+            v-for="item in frequencyOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </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 { updateCouponRuleCpps, listCouponPropertyPool } from '@/api/scm/couponRuleApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditCouponRuleCpps',
+  data() {
+    return {
+      visible: false,
+      form: {
+        crcId: '',
+        cppId: '',
+        quantity: '',
+        giftFrequency: '',
+        communityId: ''
+      },
+      rules: {
+        crcId: [
+          { required: true, message: this.$t('couponRuleCpps.idRequired'), trigger: 'blur' }
+        ],
+        cppId: [
+          { required: true, message: this.$t('couponRuleCpps.couponRequired'), trigger: 'change' }
+        ],
+        quantity: [
+          { required: true, message: this.$t('couponRuleCpps.quantityRequired'), trigger: 'blur' },
+          { pattern: /^[1-9]\d*$/, message: this.$t('couponRuleCpps.quantityPattern'), trigger: 'blur' }
+        ],
+        giftFrequency: [
+          { required: true, message: this.$t('couponRuleCpps.frequencyRequired'), trigger: 'change' }
+        ]
+      },
+      couponOptions: [],
+      frequencyOptions: [
+        { value: '100301', label: this.$t('couponRuleCpps.once') },
+        { value: '100302', label: this.$t('couponRuleCpps.monthly') }
+      ]
+    }
+  },
+  methods: {
+    open(row) {
+      this.form = {
+        crcId: row.crcId,
+        cppId: row.cppId,
+        quantity: row.quantity,
+        giftFrequency: row.giftFrequency,
+        communityId: getCommunityId()
+      }
+      this.getCouponOptions()
+      this.visible = true
+    },
+    async getCouponOptions() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: getCommunityId()
+        }
+        const { data } = await listCouponPropertyPool(params)
+        this.couponOptions = data
+      } catch (error) {
+        console.error('Failed to get coupon options:', error)
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateCouponRuleCpps(this.form)
+            this.$message.success(this.$t('common.editSuccess'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            console.error('Failed to edit coupon rule cpps:', error)
+          }
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-dialog {
+  .el-form {
+    padding: 0 20px;
+    
+    .el-input, .el-select {
+      width: 100%;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/scm/addCouponPropertyPool.vue b/src/components/scm/addCouponPropertyPool.vue
new file mode 100644
index 0000000..bee6b04
--- /dev/null
+++ b/src/components/scm/addCouponPropertyPool.vue
@@ -0,0 +1,176 @@
+<template>
+  <el-dialog
+    :title="$t('couponPropertyPoolManage.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('couponPropertyPoolManage.add.couponName')"
+        prop="couponName"
+      >
+        <el-input
+          v-model="formData.couponName"
+          :placeholder="$t('couponPropertyPoolManage.add.couponNamePlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.add.toType')"
+        prop="toType"
+      >
+        <el-select
+          v-model="formData.toType"
+          :placeholder="$t('couponPropertyPoolManage.add.toTypePlaceholder')"
+          style="width:100%"
+          @change="handleToTypeChange"
+        >
+          <el-option
+            v-for="item in toTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        v-for="(item, index) in formData.toTypes"
+        :key="index"
+        :label="item.name"
+      >
+        <el-input
+          v-model="item.columnValue"
+          :placeholder="item.remark"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.add.stock')"
+        prop="stock"
+      >
+        <el-input
+          v-model="formData.stock"
+          :placeholder="$t('couponPropertyPoolManage.add.stockPlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.add.validityDay')"
+        prop="validityDay"
+      >
+        <el-input
+          v-model="formData.validityDay"
+          :placeholder="$t('couponPropertyPoolManage.add.validityDayPlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.add.remark')"
+        prop="remark"
+      >
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :placeholder="$t('couponPropertyPoolManage.add.remarkPlaceholder')"
+          :rows="3"
+        />
+      </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 { saveCouponPropertyPool, listCouponKey } from '@/api/scm/couponPropertyPoolManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'AddCouponPropertyPool',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        couponName: '',
+        fromType: '2002',
+        toType: '',
+        stock: '',
+        validityDay: '',
+        remark: '',
+        toTypes: [],
+        communityId: getCommunityId()
+      },
+      rules: {
+        couponName: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.couponNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('couponPropertyPoolManage.validate.couponNameMaxLength'), trigger: 'blur' }
+        ],
+        toType: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.toTypeRequired'), trigger: 'change' }
+        ],
+        stock: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.stockRequired'), trigger: 'blur' }
+        ],
+        validityDay: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.validityDayRequired'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.remarkRequired'), trigger: 'blur' }
+        ]
+      },
+      toTypeOptions: [
+        { value: '1011', label: this.$t('couponPropertyPoolManage.toType.shopping') },
+        { value: '4004', label: this.$t('couponPropertyPoolManage.toType.parking') },
+        { value: '5005', label: this.$t('couponPropertyPoolManage.toType.charging') }
+      ]
+    }
+  },
+  methods: {
+    open() {
+      this.visible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData.toTypes = []
+    },
+    async handleToTypeChange(val) {
+      if (!val) return
+      try {
+        const params = {
+          beanName: val,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listCouponKey(params)
+        this.formData.toTypes = data
+      } catch (error) {
+        console.error('获取优惠券属性失败:', error)
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await saveCouponPropertyPool(this.formData)
+            this.$message.success(this.$t('couponPropertyPoolManage.add.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('couponPropertyPoolManage.add.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/deleteCouponPropertyPool.vue b/src/components/scm/deleteCouponPropertyPool.vue
new file mode 100644
index 0000000..2497a32
--- /dev/null
+++ b/src/components/scm/deleteCouponPropertyPool.vue
@@ -0,0 +1,61 @@
+<template>
+  <el-dialog
+    :title="$t('couponPropertyPoolManage.delete.title')"
+    :visible.sync="visible"
+    width="30%"
+    @close="handleClose"
+  >
+    <div style="text-align:center;margin-bottom:20px">
+      <p>{{ $t('couponPropertyPoolManage.delete.confirmText') }}</p>
+      <p style="font-weight:bold">{{ formData.couponName }}</p>
+    </div>
+
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="visible = false">{{ $t('common.cancel') }}</el-button>
+      <el-button type="danger" @click="handleConfirm">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { deleteCouponPropertyPool } from '@/api/scm/couponPropertyPoolManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteCouponPropertyPool',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        cppId: '',
+        couponName: '',
+        communityId: getCommunityId()
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.formData = {
+        ...this.formData,
+        cppId: row.cppId,
+        couponName: row.couponName
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.formData.cppId = ''
+      this.formData.couponName = ''
+    },
+    async handleConfirm() {
+      try {
+        await deleteCouponPropertyPool(this.formData)
+        this.$message.success(this.$t('couponPropertyPoolManage.delete.success'))
+        this.visible = false
+        this.$emit('success')
+      } catch (error) {
+        this.$message.error(error.message || this.$t('couponPropertyPoolManage.delete.error'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/editCouponPropertyPool.vue b/src/components/scm/editCouponPropertyPool.vue
new file mode 100644
index 0000000..5cf6bb0
--- /dev/null
+++ b/src/components/scm/editCouponPropertyPool.vue
@@ -0,0 +1,188 @@
+<template>
+  <el-dialog
+    :title="$t('couponPropertyPoolManage.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('couponPropertyPoolManage.edit.couponName')"
+        prop="couponName"
+      >
+        <el-input
+          v-model="formData.couponName"
+          :placeholder="$t('couponPropertyPoolManage.edit.couponNamePlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.edit.toType')"
+        prop="toType"
+      >
+        <el-select
+          v-model="formData.toType"
+          :placeholder="$t('couponPropertyPoolManage.edit.toTypePlaceholder')"
+          style="width:100%"
+          @change="handleToTypeChange"
+        >
+          <el-option
+            v-for="item in toTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+
+      <el-form-item
+        v-for="(item, index) in formData.toTypes"
+        :key="index"
+        :label="item.name"
+      >
+        <el-input
+          v-model="item.columnValue"
+          :placeholder="item.remark"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.edit.stock')"
+        prop="stock"
+      >
+        <el-input
+          v-model="formData.stock"
+          :placeholder="$t('couponPropertyPoolManage.edit.stockPlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.edit.validityDay')"
+        prop="validityDay"
+      >
+        <el-input
+          v-model="formData.validityDay"
+          :placeholder="$t('couponPropertyPoolManage.edit.validityDayPlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.edit.remark')"
+        prop="remark"
+      >
+        <el-input
+          v-model="formData.remark"
+          type="textarea"
+          :placeholder="$t('couponPropertyPoolManage.edit.remarkPlaceholder')"
+          :rows="3"
+        />
+      </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 { updateCouponPropertyPool, listCouponKey } from '@/api/scm/couponPropertyPoolManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'EditCouponPropertyPool',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        cppId: '',
+        couponName: '',
+        fromType: '2002',
+        toType: '',
+        stock: '',
+        validityDay: '',
+        remark: '',
+        toTypes: [],
+        communityId: getCommunityId()
+      },
+      rules: {
+        couponName: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.couponNameRequired'), trigger: 'blur' },
+          { max: 64, message: this.$t('couponPropertyPoolManage.validate.couponNameMaxLength'), trigger: 'blur' }
+        ],
+        toType: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.toTypeRequired'), trigger: 'change' }
+        ],
+        stock: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.stockRequired'), trigger: 'blur' }
+        ],
+        validityDay: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.validityDayRequired'), trigger: 'blur' }
+        ],
+        remark: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.remarkRequired'), trigger: 'blur' }
+        ],
+        cppId: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.cppIdRequired'), trigger: 'blur' }
+        ]
+      },
+      toTypeOptions: [
+        { value: '1011', label: this.$t('couponPropertyPoolManage.toType.shopping') },
+        { value: '2002', label: this.$t('couponPropertyPoolManage.toType.payment') },
+        { value: '3003', label: this.$t('couponPropertyPoolManage.toType.repair') },
+        { value: '4004', label: this.$t('couponPropertyPoolManage.toType.parking') },
+        { value: '5005', label: this.$t('couponPropertyPoolManage.toType.charging') }
+      ]
+    }
+  },
+  methods: {
+    open(row) {
+      this.formData = {
+        ...this.formData,
+        ...row,
+        toType: row.toType || ''
+      }
+      this.formData.toTypes = row.configs || []
+      this.visible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData.toTypes = []
+    },
+    async handleToTypeChange(val) {
+      if (!val) return
+      try {
+        const params = {
+          beanName: val,
+          page: 1,
+          row: 100
+        }
+        const { data } = await listCouponKey(params)
+        this.formData.toTypes = data
+      } catch (error) {
+        console.error('获取优惠券属性失败:', error)
+      }
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await updateCouponPropertyPool(this.formData)
+            this.$message.success(this.$t('couponPropertyPoolManage.edit.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('couponPropertyPoolManage.edit.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/scm/giftCouponPropertyPool.vue b/src/components/scm/giftCouponPropertyPool.vue
new file mode 100644
index 0000000..accfacd
--- /dev/null
+++ b/src/components/scm/giftCouponPropertyPool.vue
@@ -0,0 +1,109 @@
+<template>
+  <el-dialog
+    :title="$t('couponPropertyPoolManage.gift.title')"
+    :visible.sync="visible"
+    width="40%"
+    @close="handleClose"
+  >
+    <el-form
+      ref="form"
+      :model="formData"
+      :rules="rules"
+      label-width="120px"
+    >
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.gift.couponName')"
+      >
+        <el-input
+          v-model="formData.couponName"
+          disabled
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.gift.giftCount')"
+        prop="giftCount"
+      >
+        <el-input
+          v-model="formData.giftCount"
+          type="number"
+          :placeholder="$t('couponPropertyPoolManage.gift.giftCountPlaceholder')"
+        />
+      </el-form-item>
+
+      <el-form-item
+        :label="$t('couponPropertyPoolManage.gift.tel')"
+        prop="tel"
+      >
+        <el-input
+          v-model="formData.tel"
+          :placeholder="$t('couponPropertyPoolManage.gift.telPlaceholder')"
+        />
+      </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('couponPropertyPoolManage.gift.submit') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { giftCouponProperty } from '@/api/scm/couponPropertyPoolManageApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'GiftCouponPropertyPool',
+  data() {
+    return {
+      visible: false,
+      formData: {
+        cppId: '',
+        couponName: '',
+        giftCount: '',
+        tel: '',
+        communityId: getCommunityId()
+      },
+      rules: {
+        cppId: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.cppIdRequired'), trigger: 'blur' }
+        ],
+        giftCount: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.giftCountRequired'), trigger: 'blur' }
+        ],
+        tel: [
+          { required: true, message: this.$t('couponPropertyPoolManage.validate.telRequired'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(row) {
+      this.formData = {
+        ...this.formData,
+        cppId: row.cppId,
+        couponName: row.couponName
+      }
+      this.visible = true
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+    },
+    handleSubmit() {
+      this.$refs.form.validate(async valid => {
+        if (valid) {
+          try {
+            await giftCouponProperty(this.formData)
+            this.$message.success(this.$t('couponPropertyPoolManage.gift.success'))
+            this.visible = false
+            this.$emit('success')
+          } catch (error) {
+            this.$message.error(error.message || this.$t('couponPropertyPoolManage.gift.error'))
+          }
+        }
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/i18n/commonLang.js b/src/i18n/commonLang.js
index cd3ac97..eaf5c49 100644
--- a/src/i18n/commonLang.js
+++ b/src/i18n/commonLang.js
@@ -48,6 +48,8 @@ export const messages = {
         selectFile:'Select File',
         change:'Change',
         print:'Print',
+        year:'Year',
+        month:'Month',
       }
     },
     zh: {
@@ -99,6 +101,8 @@ export const messages = {
         selectFile:'选择文件',
         change:'变更',
         print:'打印',
+        year:'年',
+        month:'月',
       }
     }
   } 
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 32e2012..f687309 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -141,6 +141,7 @@ import { messages as reportI18n } from './reportI18n'
 import { messages as devI18n } from './devI18n'
 import { messages as resourceI18n } from './resourceI18n'
 import { messages as carI18n } from './carI18n'
+import { messages as scmI18n } from './scmI18n'
 
 Vue.use(VueI18n)
 
@@ -280,6 +281,7 @@ const messages = {
     ...devI18n.en,
     ...resourceI18n.en,
     ...carI18n.en,
+    ...scmI18n.en,
   },
   zh: {
     ...loginMessages.zh,
@@ -413,6 +415,7 @@ const messages = {
     ...devI18n.zh,
     ...resourceI18n.zh,
     ...carI18n.zh,
+    ...scmI18n.zh,
   }
 }
 
diff --git a/src/i18n/reportI18n.js b/src/i18n/reportI18n.js
index 03e9f18..d17106c 100644
--- a/src/i18n/reportI18n.js
+++ b/src/i18n/reportI18n.js
@@ -16,6 +16,9 @@ import { messages as reportRepairMessages } from '../views/report/reportRepairLa
 import { messages as reportNoFeeRoomMessages } from '../views/report/reportNoFeeRoomLang'
 import { messages as reportQuestionAnswerDetailMessages } from '../views/report/reportQuestionAnswerDetailLang'
 import { messages as reportOwnerPayFeeMessages } from '../views/report/reportOwnerPayFeeLang'
+import { messages as reportHuaningMessages } from '../views/report/reportHuaningLang'
+import { messages as reportPayFeeDepositMessages } from '../views/report/reportPayFeeDepositLang'
+import { messages as commonReportMessages } from '../views/report/commonReportLang'
 
 export const messages = {
     en: {
@@ -36,6 +39,9 @@ export const messages = {
         ...reportNoFeeRoomMessages.en,
         ...reportQuestionAnswerDetailMessages.en,
         ...reportOwnerPayFeeMessages.en,
+        ...reportHuaningMessages.en,
+        ...reportPayFeeDepositMessages.en,
+        ...commonReportMessages.en,
     },
     zh: {
         ...reportCustomComponentRelManageMessages.zh,
@@ -54,5 +60,8 @@ export const messages = {
         ...reportNoFeeRoomMessages.zh,
         ...reportQuestionAnswerDetailMessages.zh,
         ...reportOwnerPayFeeMessages.zh,
+        ...reportHuaningMessages.zh,
+        ...reportPayFeeDepositMessages.zh,
+        ...commonReportMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/i18n/scmI18n.js b/src/i18n/scmI18n.js
new file mode 100644
index 0000000..e424a5d
--- /dev/null
+++ b/src/i18n/scmI18n.js
@@ -0,0 +1,17 @@
+import { messages as couponMarketMessages } from '../views/scm/couponMarketLang'
+import { messages as couponPropertyPoolManageMessages } from '../views/scm/couponPropertyPoolManageLang'
+import { messages as couponRuleMessages } from '../views/scm/couponRuleLang'
+
+export const messages = {
+    en: {
+
+        ...couponMarketMessages.en,
+        ...couponPropertyPoolManageMessages.en,
+        ...couponRuleMessages.en,
+    },
+    zh: {
+        ...couponMarketMessages.zh,
+        ...couponPropertyPoolManageMessages.zh,
+        ...couponRuleMessages.zh,
+    }
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 6c9a55e..5fbb38f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -11,6 +11,7 @@ import reportRouter from './reportRouter'
 import devRouter from './devRouter'
 import resourceRouter from './resourceRouter'
 import carRouter from './carRouter'
+import scmRouter from './scmRouter'
 
 Vue.use(VueRouter)
 
@@ -630,6 +631,7 @@ const routes = [
       ...devRouter,
       ...resourceRouter,
       ...carRouter,
+      ...scmRouter,
       // 其他子路由可以在这里添加
     ]
   },
diff --git a/src/router/reportRouter.js b/src/router/reportRouter.js
index db80063..6c40900 100644
--- a/src/router/reportRouter.js
+++ b/src/router/reportRouter.js
@@ -50,9 +50,23 @@ export default [
         component: () => import('@/views/report/reportQuestionAnswerDetailList.vue')
     },
     {
-        path:'/pages/property/reportOwnerPayFee',
-        name:'/pages/property/reportOwnerPayFee',
+        path: '/pages/property/reportOwnerPayFee',
+        name: '/pages/property/reportOwnerPayFee',
         component: () => import('@/views/report/reportOwnerPayFeeList.vue')
-        },
-
+    },
+    {
+        path: '/pages/property/reportHuaning',
+        name: '/pages/property/reportHuaning',
+        component: () => import('@/views/report/reportHuaningList.vue')
+    },
+    {
+        path: '/pages/property/reportPayFeeDeposit',
+        name: '/pages/property/reportPayFeeDeposit',
+        component: () => import('@/views/report/reportPayFeeDepositList.vue')
+    },
+    {
+        path: '/pages/property/commonReport',
+        name: '/pages/property/commonReport',
+        component: () => import('@/views/report/commonReportList.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/router/scmRouter.js b/src/router/scmRouter.js
new file mode 100644
index 0000000..664d93a
--- /dev/null
+++ b/src/router/scmRouter.js
@@ -0,0 +1,17 @@
+export default [
+    {
+        path: '/pages/scm/couponMarket',
+        name: '/pages/scm/couponMarket',
+        component: () => import('@/views/scm/couponMarketList.vue')
+    },
+    {
+        path: '/pages/scm/couponPropertyPoolManage',
+        name: '/pages/scm/couponPropertyPoolManage',
+        component: () => import('@/views/scm/couponPropertyPoolManageList.vue')
+    },
+    {
+        path:'/pages/scm/couponRule',
+        name:'/pages/scm/couponRule',
+        component: () => import('@/views/scm/couponRuleList.vue')
+        },
+]
\ No newline at end of file
diff --git a/src/views/report/commonReportLang.js b/src/views/report/commonReportLang.js
new file mode 100644
index 0000000..60e300f
--- /dev/null
+++ b/src/views/report/commonReportLang.js
@@ -0,0 +1,22 @@
+export const messages = {
+  en: {
+    commonReportTable: {
+      queryConditions: 'Query Conditions',
+      query: 'Query',
+      reset: 'Reset',
+      export: 'Export',
+      print: 'Print',
+      noData: 'No Data'
+    }
+  },
+  zh: {
+    commonReportTable: {
+      queryConditions: '查询条件',
+      query: '查询',
+      reset: '重置',
+      export: '导出',
+      print: '打印',
+      noData: '暂无数据'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/commonReportList.vue b/src/views/report/commonReportList.vue
new file mode 100644
index 0000000..0137361
--- /dev/null
+++ b/src/views/report/commonReportList.vue
@@ -0,0 +1,114 @@
+<template>
+  <div class="common-report-container">
+    <el-row :gutter="20">
+      <el-col :span="4">
+        <el-card class="tree-card">
+          <ul class="report-list">
+            <li v-for="(item, index) in commonReportInfo.reportCustoms" :key="index"
+              :class="{ 'selected-item': commonReportInfo.switchValue === item.customId }" @click="swatch(item)">
+              {{ item.title }}
+            </li>
+          </ul>
+        </el-card>
+      </el-col>
+      <el-col :span="20">
+
+        <common-report-table ref="reportTable" />
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import CommonReportTable from '@/components/report/commonReportTable'
+import { listReportCustom } from '@/api/report/commonReportApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CommonReportList',
+  components: {
+    CommonReportTable
+  },
+  data() {
+    return {
+      commonReportInfo: {
+        groupId: '',
+        switchValue: '',
+        reportCustoms: []
+      },
+      communityId: ''
+    }
+  },
+  watch: {
+    '$route'(to, from) {
+      // 对路由变化作出响应...
+      console.log(to, from)
+      if (to.query.groupId !== from.query.groupId) {
+        this.commonReportInfo.groupId = to.query.groupId
+        this._loadReportCustom()
+      }
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.commonReportInfo.groupId = this.$route.query.groupId
+    this._loadReportCustom()
+  },
+  methods: {
+    swatch(value) {
+      this.commonReportInfo.switchValue = value.customId
+      this.$refs.reportTable.handleSwitch(value)
+    },
+    async _loadReportCustom() {
+      try {
+        const params = {
+          page: 1,
+          row: 50,
+          groupId: this.commonReportInfo.groupId
+        }
+        const { data } = await listReportCustom(params)
+        this.commonReportInfo.reportCustoms = data
+        if (data && data.length > 0) {
+          this.swatch(data[0])
+        }
+      } catch (error) {
+        console.error('Failed to load report custom:', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.common-report-container {
+  padding: 20px;
+
+  .tree-card {
+    height: 100%;
+
+    .report-list {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        padding: 10px;
+        margin-bottom: 5px;
+        text-align: center;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.3s;
+
+        &:hover {
+          background-color: #f5f7fa;
+        }
+
+        &.selected-item {
+          background-color: #409eff;
+          color: white;
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/reportHuaningLang.js b/src/views/report/reportHuaningLang.js
new file mode 100644
index 0000000..22a4e92
--- /dev/null
+++ b/src/views/report/reportHuaningLang.js
@@ -0,0 +1,118 @@
+export const messages = {
+  en: {
+    reportHuaning: {
+      search: {
+        title: 'Search Conditions',
+        feeType: 'Please select fee type',
+        floor: 'Please select floor'
+      },
+      tab: {
+        oweFee: 'Uncollected Situation Report',
+        oweFeeDetail: 'Uncollected Details Report',
+        payFee: 'Current Month Collection Report'
+      }
+    },
+    reportHuaningOweFee: {
+      table: {
+        floorNum: 'Building Number',
+        totalOweAmount: 'Total Uncollected Amount (as of {date})',
+        oweAmount: 'Uncollected Amount',
+        preYearOweAmount: 'Uncollected Amount Before'
+      }
+    },
+    reportHuaningPayFee: {
+      table: {
+        floorNum: 'Building Number',
+        monthlyReceivable: 'Monthly Receivable',
+        monthReceived: 'Month Received',
+        monthReceivedPart1: 'Month Received belongs to {year} Year 1-{month} Month Part',
+        monthReceivedPart2: 'Month Received belongs to {year} Year {month} Month Part',
+        monthReceivedPart3: 'Month Received belongs to {nextMonth} Pre-collection Part',
+        monthReceivedPart4: 'Month Received belongs to Before {year} Year Part'
+      }
+    },
+    reportHuaningOweFeeDetail: {
+      table: {
+        roomNum: 'Room Number',
+        area: 'Area',
+        fee: 'Fee',
+        startTime: 'Fee Start Time',
+        endTime: 'Fee End Time',
+        totalOweAmount: 'Total Uncollected Amount',
+        oweAmount: 'Uncollected Amount',
+        preYearOweAmount: 'Uncollected Amount Before'
+      }
+    },
+    viewFeeDetail: {
+      title: 'Year Payment History',
+      table: {
+        cycle: 'Cycle (Unit: Month)',
+        receivableAmount: 'Receivable Amount (Unit: Yuan)',
+        receivedAmount: 'Received Amount (Unit: Yuan)',
+        payTime: 'Payment Time',
+        startTime: 'Payment Start Time',
+        endTime: 'Payment End Time',
+        status: 'Status',
+        remark: 'Remark'
+      }
+    }
+  },
+  zh: {
+    reportHuaning: {
+      search: {
+        title: '查询条件',
+        feeType: '请选择收费类型',
+        floor: '请选择楼栋'
+      },
+      tab: {
+        oweFee: '未收情况表',
+        oweFeeDetail: '未收明细表',
+        payFee: '当月收费情况表'
+      }
+    },
+    reportHuaningOweFee: {
+      table: {
+        floorNum: '楼栋号',
+        totalOweAmount: '总未收金额(截止{date})',
+        oweAmount: '未收金额',
+        preYearOweAmount: '年前未收金额'
+      }
+    },
+    reportHuaningPayFee: {
+      table: {
+        floorNum: '楼栋号',
+        monthlyReceivable: '每月应收',
+        monthReceived: '月实收',
+        monthReceivedPart1: '月实收中属于{year}年1-{month}月部分',
+        monthReceivedPart2: '月实收中属于{year}年{month}月部分',
+        monthReceivedPart3: '月实收中属于{nextMonth}起预收部分',
+        monthReceivedPart4: '月实收中属于{year}年前部分'
+      }
+    },
+    reportHuaningOweFeeDetail: {
+      table: {
+        roomNum: '房号',
+        area: '面积',
+        fee: '费用',
+        startTime: '费用开始时间',
+        endTime: '费用截止时间',
+        totalOweAmount: '总未收金额',
+        oweAmount: '未收金额',
+        preYearOweAmount: '年前未收金额'
+      }
+    },
+    viewFeeDetail: {
+      title: '年缴费历史',
+      table: {
+        cycle: '周期(单位:月)',
+        receivableAmount: '应收金额(单位:元)',
+        receivedAmount: '实收金额(单位:元)',
+        payTime: '缴费时间',
+        startTime: '缴费起始时间',
+        endTime: '缴费结束时间',
+        status: '状态',
+        remark: '备注'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/reportHuaningList.vue b/src/views/report/reportHuaningList.vue
new file mode 100644
index 0000000..5b0a215
--- /dev/null
+++ b/src/views/report/reportHuaningList.vue
@@ -0,0 +1,194 @@
+<template>
+  <div class="report-huaning-container">
+    <el-row>
+      <el-col :span="24">
+        <el-card>
+          <div slot="header" class="flex justify-between">
+            <h5>{{ $t('reportHuaning.search.title') }}</h5>
+          </div>
+          <div class="ibox-content">
+            <el-row :gutter="20">
+              <!-- 费用类型 -->
+              <el-col :span="6">
+                <el-select v-model="reportHuaningInfo.conditions.feeTypeCd" @change="_changeReporficientFeeTypeCd"
+                  style="width:100%" :placeholder="$t('reportHuaning.search.feeType')">
+                  <el-option v-for="(item, index) in reportHuaningInfo.feeTypeCds" :key="index" :label="item.name"
+                    :value="item.statusCd">
+                  </el-option>
+                </el-select>
+              </el-col>
+
+              <!-- 楼栋 -->
+              <el-col :span="6">
+                <el-select v-model="reportHuaningInfo.conditions.floorNum" style="width:100%"
+                  :placeholder="$t('reportHuaning.search.floor')">
+                  <el-option v-for="(item, index) in reportHuaningInfo.floors" :key="index" :label="item.floorNum"
+                    :value="item.floorNum">
+                  </el-option>
+                </el-select>
+              </el-col>
+
+              <el-col :span="6">
+                <el-button type="primary" @click="_queryMethod">
+                  <i class="el-icon-search"></i>
+                  <span>{{ $t('common.search') }}</span>
+                </el-button>
+                <el-button @click="_resetMethod" style="margin-left: 20px;">
+                  <i class="el-icon-refresh"></i>
+                  <span>{{ $t('common.reset') }}</span>
+                </el-button>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-card class="margin-top">
+      <div class="white-bg padding-lg">
+        <el-tabs v-model="reportHuaningInfo._currentTab" @tab-click="changeTab(reportHuaningInfo._currentTab)">
+          <el-tab-pane :label="$t('reportHuaning.tab.oweFee')" name="reportHuaningOweFee">
+          </el-tab-pane>
+          <el-tab-pane :label="$t('reportHuaning.tab.oweFeeDetail')" name="reportHuaningOweFeeDetail">
+          </el-tab-pane>
+          <el-tab-pane :label="$t('reportHuaning.tab.payFee')" name="reportHuaningPayFee">
+          </el-tab-pane>
+        </el-tabs>
+
+        <div v-if="reportHuaningInfo._currentTab === 'reportHuaningOweFee'">
+          <report-huaning-owe-fee ref="reportHuaningOweFee"></report-huaning-owe-fee>
+        </div>
+        <div v-if="reportHuaningInfo._currentTab === 'reportHuaningPayFee'">
+          <report-huaning-pay-fee ref="reportHuaningPayFee"></report-huaning-pay-fee>
+        </div>
+        <div v-if="reportHuaningInfo._currentTab === 'reportHuaningOweFeeDetail'">
+          <report-huaning-owe-fee-detail ref="reportHuaningOweFeeDetail"></report-huaning-owe-fee-detail>
+        </div>
+      </div>
+    </el-card>
+
+    <view-fee-detail ref="viewFeeDetail"></view-fee-detail>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { listFloors } from '@/api/report/reportHuaningApi'
+import ReportHuaningOweFee from '@/components/report/ReportHuaningOweFee'
+import ReportHuaningPayFee from '@/components/report/ReportHuaningPayFee'
+import ReportHuaningOweFeeDetail from '@/components/report/ReportHuaningOweFeeDetail'
+import ViewFeeDetail from '@/components/report/viewFeeDetail'
+
+export default {
+  name: 'ReportHuaningList',
+  components: {
+    ReportHuaningOweFee,
+    ReportHuaningPayFee,
+    ReportHuaningOweFeeDetail,
+    ViewFeeDetail
+  },
+  data() {
+    return {
+      reportHuaningInfo: {
+        receivableAmount: '0',
+        noEnterRoomCount: '0',
+        roomCount: '0',
+        freeRoomCount: '0',
+        parkingSpaceCount: '0',
+        freeParkingSpaceCount: '0',
+        shopCount: '0',
+        freeShopCount: '0',
+        _currentTab: 'reportHuaningOweFee',
+        feeTypeCds: [],
+        feeConfigDtos: [],
+        floors: [],
+        moreCondition: false,
+        conditions: {
+          configId: '',
+          feeTypeCd: '',
+          floorNum: '',
+          year: new Date().getFullYear(),
+          month: new Date().getMonth() + 1
+        }
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._initData()
+    this.changeTab(this.reportHuaningInfo._currentTab)
+  },
+  methods: {
+    async _initData() {
+      try {
+        // 获取费用类型字典
+        const feeTypes = await getDict('pay_fee_config', 'fee_type_cd')
+        this.reportHuaningInfo.feeTypeCds = feeTypes
+
+        // 获取楼栋数据
+        const params = {
+          communityId: this.communityId,
+          row: 50,
+          page: 1
+        }
+        const floorData = await listFloors(params)
+        this.reportHuaningInfo.floors = floorData.apiFloorDataVoList
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+      }
+    },
+    changeTab(tab) {
+      this.reportHuaningInfo._currentTab = tab
+      setTimeout(() => {
+        this.$refs[tab].initData(this.reportHuaningInfo.conditions)
+      },500)
+    },
+    _changeReporficientFeeTypeCd() {
+      // 费用类型变更处理
+    },
+    _queryMethod() {
+      this.$refs[`${this.reportHuaningInfo._currentTab}Ref`].initData(this.reportHuaningInfo.conditions)
+    },
+    _resetMethod() {
+      this.reportHuaningInfo.conditions = {
+        configId: '',
+        feeTypeCd: '',
+        floorNum: '',
+        year: new Date().getFullYear(),
+        month: new Date().getMonth() + 1
+      }
+      this._queryMethod()
+    },
+    _listFloorData() {
+      // 已迁移到_initData方法中
+    },
+    _moreCondition() {
+      this.reportHuaningInfo.moreCondition = !this.reportHuaningInfo.moreCondition
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-huaning-container {
+  padding: 20px;
+
+  .margin-top {
+    margin-top: 20px;
+  }
+
+  .white-bg {
+    background-color: #fff;
+  }
+
+  .padding-lg {
+    padding: 20px;
+  }
+
+  .ibox-content {
+    padding: 15px 20px 20px 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/report/reportPayFeeDepositLang.js b/src/views/report/reportPayFeeDepositLang.js
new file mode 100644
index 0000000..d432517
--- /dev/null
+++ b/src/views/report/reportPayFeeDepositLang.js
@@ -0,0 +1,140 @@
+export const messages = {
+  en: {
+    reportPayFeeDeposit: {
+      search: {
+        title: 'Search Conditions',
+        floorName: 'Please select building',
+        choose: 'Choose',
+        unit: 'Unit',
+        unitPlaceholder: 'Please select unit',
+        roomNum: 'Please fill in room number',
+        feeId: 'Please enter fee ID',
+        feeName: 'Fee item name',
+        feeNamePlaceholder: 'Please select fee item name',
+        search: 'Search',
+        reset: 'Reset',
+        state: 'Payment status',
+        statePlaceholder: 'Please select payment status',
+        payerObjType: 'Payment object type',
+        payerObjTypePlaceholder: 'Please select payment object type',
+        startTime: 'Please select fee creation start time',
+        endTime: 'Please select fee creation end time',
+        detailState: 'Refund status',
+        detailStatePlaceholder: 'Please select refund status'
+      },
+      table: {
+        title: 'Deposit Report',
+        tooltip: 'Payment records of deposit type',
+        export: 'Export',
+        feeId: 'Fee ID',
+        roomNum: 'Room number',
+        owner: 'Owner',
+        feeType: 'Fee type',
+        feeName: 'Fee item',
+        startTime: 'Fee start time',
+        endTime: 'Fee end time',
+        createTime: 'Creation time',
+        payerObjType: 'Payment object type',
+        payerObjId: 'Payer ID',
+        amount: 'Receivable amount',
+        state: 'Status',
+        detailState: 'Refund status',
+        operation: 'Operation',
+        detail: 'Detail',
+        unpaid: 'Unpaid',
+        subtotal: 'Subtotal',
+        total: 'Total',
+        paid: 'Paid',
+        refunded: 'Refunded',
+        refundInProgress: 'Refund in progress',
+        refundFailed: 'Refund failed',
+        yuan: 'Yuan'
+      }
+    },
+    searchFloor: {
+      title: 'Building Selection',
+      floorId: 'Please enter building ID',
+      floorName: 'Please enter building name',
+      floorNum: 'Please enter building number',
+      search: 'Search',
+      reset: 'Reset',
+      table: {
+        floorId: 'Building ID',
+        floorName: 'Name',
+        floorNum: 'Number',
+        userName: 'Creator',
+        operation: 'Operation',
+        choose: 'Choose'
+      }
+    }
+  },
+  zh: {
+    reportPayFeeDeposit: {
+      search: {
+        title: '查询条件',
+        floorName: '请选择楼栋',
+        choose: '选择',
+        unit: '单元',
+        unitPlaceholder: '请选择单元',
+        roomNum: '请填写房屋编号',
+        feeId: '请输入费用ID',
+        feeName: '费用项名称',
+        feeNamePlaceholder: '请选择费用项名称',
+        search: '查询',
+        reset: '重置',
+        state: '收费状态',
+        statePlaceholder: '请选择收费状态',
+        payerObjType: '收费对象类型',
+        payerObjTypePlaceholder: '请选择收费对象类型',
+        startTime: '请选择费用创建开始时间',
+        endTime: '请选择费用创建结束时间',
+        detailState: '退费状态',
+        detailStatePlaceholder: '请选择退费状态'
+      },
+      table: {
+        title: '押金报表',
+        tooltip: '押金类记录的收费情况',
+        export: '导出',
+        feeId: '费用ID',
+        roomNum: '房号',
+        owner: '业主',
+        feeType: '费用类型',
+        feeName: '费用项',
+        startTime: '费用开始时间',
+        endTime: '费用结束时间',
+        createTime: '创建时间',
+        payerObjType: '付费对象类型',
+        payerObjId: '付款方ID',
+        amount: '应收金额',
+        state: '状态',
+        detailState: '退费状态',
+        operation: '操作',
+        detail: '详情',
+        unpaid: '未缴费',
+        subtotal: '小计',
+        total: '大计',
+        paid: '已收费',
+        refunded: '已退费',
+        refundInProgress: '退费中',
+        refundFailed: '退费失败',
+        yuan: '元'
+      }
+    },
+    searchFloor: {
+      title: '小区楼栋',
+      floorId: '请输入楼栋ID',
+      floorName: '请输入楼栋名称',
+      floorNum: '请输入楼栋编号',
+      search: '查询',
+      reset: '重置',
+      table: {
+        floorId: '楼栋ID',
+        floorName: '名称',
+        floorNum: '编号',
+        userName: '创建人',
+        operation: '操作',
+        choose: '选择'
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/report/reportPayFeeDepositList.vue b/src/views/report/reportPayFeeDepositList.vue
new file mode 100644
index 0000000..02f4738
--- /dev/null
+++ b/src/views/report/reportPayFeeDepositList.vue
@@ -0,0 +1,422 @@
+<template>
+  <div class="report-pay-fee-deposit-container animated fadeInRight">
+    <!-- 查询条件 -->
+    <el-card class="search-card">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('reportPayFeeDeposit.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="24">
+          <el-row :gutter="20">
+            <el-col :span="4">
+              <el-input v-model="conditions.floorName" :placeholder="$t('reportPayFeeDeposit.search.floorName')"
+                class="search-item">
+                <el-button slot="append" icon="el-icon-search" @click="openChooseFloor">
+                  {{ $t('reportPayFeeDeposit.search.choose') }}
+                </el-button>
+              </el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="conditions.unitId" :placeholder="$t('reportPayFeeDeposit.search.unit')"
+                class="search-item" style="width:100%">
+                <el-option :label="$t('reportPayFeeDeposit.search.unitPlaceholder')" value=""></el-option>
+                <el-option v-for="(unit, index) in roomUnits" :key="index"
+                  :label="unit.unitNum + $t('reportPayFeeDeposit.search.unit')" :value="unit.unitId">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="conditions.roomNum" :placeholder="$t('reportPayFeeDeposit.search.roomNum')"
+                class="search-item">
+              </el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-input v-model="conditions.feeId" :placeholder="$t('reportPayFeeDeposit.search.feeId')"
+                class="search-item">
+              </el-input>
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="conditions.configId" :placeholder="$t('reportPayFeeDeposit.search.feeName')"
+                class="search-item" style="width:100%">
+                <el-option :label="$t('reportPayFeeDeposit.search.feeNamePlaceholder')" value=""></el-option>
+                <el-option v-for="(item, index) in feeConfigs" :key="index" :label="item.feeName" :value="item.configId">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" @click="queryMethod">
+                <i class="el-icon-search"></i>
+                {{ $t('reportPayFeeDeposit.search.search') }}
+              </el-button>
+              <el-button @click="resetMethod" style="margin-left: 10px;">
+                <i class="el-icon-refresh"></i>
+                {{ $t('reportPayFeeDeposit.search.reset') }}
+              </el-button>
+            </el-col>
+          </el-row>
+          <el-row :gutter="20" style="margin-top: 15px;">
+            <el-col :span="4">
+              <el-select v-model="conditions.state" :placeholder="$t('reportPayFeeDeposit.search.state')"
+                class="search-item" style="width:100%">
+                <el-option :label="$t('reportPayFeeDeposit.search.statePlaceholder')" value=""></el-option>
+                <el-option v-for="(item, index) in states" :key="index" :label="item.name" :value="item.statusCd">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="conditions.payerObjType" :placeholder="$t('reportPayFeeDeposit.search.payerObjType')"
+                class="search-item" style="width:100%">
+                <el-option :label="$t('reportPayFeeDeposit.search.payerObjTypePlaceholder')" value=""></el-option>
+                <el-option v-for="(item, index) in payerObjTypes" :key="index" :label="item.name" :value="item.statusCd">
+                </el-option>
+              </el-select>
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="conditions.startTime" type="datetime"
+                :placeholder="$t('reportPayFeeDeposit.search.startTime')" style="width:100%">
+              </el-date-picker>
+            </el-col>
+            <el-col :span="4">
+              <el-date-picker v-model="conditions.endTime" type="datetime"
+                :placeholder="$t('reportPayFeeDeposit.search.endTime')" style="width:100%">
+              </el-date-picker>
+            </el-col>
+            <el-col :span="4">
+              <el-select v-model="conditions.detailState" :placeholder="$t('reportPayFeeDeposit.search.detailState')"
+                class="search-item" style="width:100%">
+                <el-option :label="$t('reportPayFeeDeposit.search.detailStatePlaceholder')" value=""></el-option>
+                <template v-for="(item, index) in detailStates">
+                  <el-option :key="index" :label="item.name" :value="item.statusCd" v-if="item.statusCd != '1300'">
+                  </el-option>
+                </template>
+              </el-select>
+            </el-col>
+          </el-row>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 押金报表 -->
+    <el-card class="table-card">
+      <div slot="header" class="flex justify-between">
+        <div>
+          <span>{{ $t('reportPayFeeDeposit.table.title') }}</span>
+          <el-tooltip class="item" effect="dark" :content="$t('reportPayFeeDeposit.table.tooltip')" placement="top">
+            <i class="el-icon-info" style="margin-left: 10px; cursor: pointer;"></i>
+          </el-tooltip>
+        </div>
+        <el-button type="primary" size="small" style="float: right;" @click="exportFee">
+          <i class="el-icon-download"></i>
+          {{ $t('reportPayFeeDeposit.table.export') }}
+        </el-button>
+      </div>
+      <el-table :data="depositFees" border style="width: 100%" v-loading="loading">
+        <el-table-column prop="feeId" :label="$t('reportPayFeeDeposit.table.feeId')" align="center">
+        </el-table-column>
+        <el-table-column prop="objName" :label="$t('reportPayFeeDeposit.table.roomNum')" align="center">
+        </el-table-column>
+        <el-table-column prop="ownerName" :label="$t('reportPayFeeDeposit.table.owner')" align="center">
+        </el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('reportPayFeeDeposit.table.feeType')" align="center">
+        </el-table-column>
+        <el-table-column prop="feeName" :label="$t('reportPayFeeDeposit.table.feeName')" align="center">
+        </el-table-column>
+        <el-table-column prop="startTime" :label="$t('reportPayFeeDeposit.table.startTime')" align="center">
+        </el-table-column>
+        <el-table-column prop="deadlineTime" :label="$t('reportPayFeeDeposit.table.endTime')" align="center">
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('reportPayFeeDeposit.table.createTime')" align="center">
+        </el-table-column>
+        <el-table-column prop="payerObjTypeName" :label="$t('reportPayFeeDeposit.table.payerObjType')" align="center">
+        </el-table-column>
+        <el-table-column prop="payerObjId" :label="$t('reportPayFeeDeposit.table.payerObjId')" align="center">
+        </el-table-column>
+        <el-table-column prop="additionalAmount" :label="$t('reportPayFeeDeposit.table.amount')" align="center">
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('reportPayFeeDeposit.table.state')" align="center">
+        </el-table-column>
+        <el-table-column :label="$t('reportPayFeeDeposit.table.detailState')" align="center">
+          <template slot-scope="scope">
+            <span v-if="scope.row.state == '2009001'">{{ scope.row.detailStateName }}</span>
+            <span v-else>{{ $t('reportPayFeeDeposit.table.unpaid') }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('reportPayFeeDeposit.table.operation')" align="center" width="120">
+          <template slot-scope="scope">
+            <el-button size="mini" @click="openPayFeeDetail(scope.row)">
+              {{ $t('reportPayFeeDeposit.table.detail') }}
+            </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="total" style="margin-top: 20px;">
+      </el-pagination>
+      <el-row :gutter="20" style="margin-top: 20px;">
+        <el-col :span="2">
+          <div>
+            <b>{{ $t('reportPayFeeDeposit.table.subtotal') }}</b>
+          </div>
+          <div style="margin-top: 10px;">
+            <b>{{ $t('reportPayFeeDeposit.table.total') }}</b>
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div>
+            {{ $t('reportPayFeeDeposit.table.unpaid') }}: {{ sumTotal.unpaidfeeAmount }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+          <div style="margin-top: 10px;">
+            {{ $t('reportPayFeeDeposit.table.unpaid') }}: {{ sumTotal.unpaidfeeAmounts }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div>
+            {{ $t('reportPayFeeDeposit.table.paid') }}: {{ sumTotal.paidfeeAmount }} {{
+              $t('reportPayFeeDeposit.table.yuan')
+            }}
+          </div>
+          <div style="margin-top: 10px;">
+            {{ $t('reportPayFeeDeposit.table.paid') }}: {{ sumTotal.paidfeeAmounts }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div>
+            {{ $t('reportPayFeeDeposit.table.refunded') }}: {{ sumTotal.refundedAmount }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+          <div style="margin-top: 10px;">
+            {{ $t('reportPayFeeDeposit.table.refunded') }}: {{ sumTotal.refundedAmounts }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div>
+            {{ $t('reportPayFeeDeposit.table.refundInProgress') }}: {{ sumTotal.refundInProgressAmount }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+          <div style="margin-top: 10px;">
+            {{ $t('reportPayFeeDeposit.table.refundInProgress') }}: {{ sumTotal.refundInProgressAmounts }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+        </el-col>
+        <el-col :span="3">
+          <div>
+            {{ $t('reportPayFeeDeposit.table.refundFailed') }}: {{ sumTotal.refundFailedAmount }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+          <div style="margin-top: 10px;">
+            {{ $t('reportPayFeeDeposit.table.refundFailed') }}: {{ sumTotal.refundFailedAmounts }} {{
+              $t('reportPayFeeDeposit.table.yuan') }}
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 选择楼栋组件 -->
+    <search-floor ref="searchFloor" @chooseFloor="handleChooseFloor"></search-floor>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { getDict } from '@/api/community/communityApi'
+import { queryPayFeeDeposit, exportData } from '@/api/report/reportPayFeeDepositApi'
+import SearchFloor from '@/components/room/searchFloor'
+
+export default {
+  name: 'ReportPayFeeDepositList',
+  components: {
+    SearchFloor
+  },
+  data() {
+    return {
+      loading: false,
+      communityId: '',
+      conditions: {
+        floorId: '',
+        floorName: '',
+        roomNum: '',
+        unitId: '',
+        feeId: '',
+        state: '',
+        payerObjType: '',
+        startTime: '',
+        endTime: '',
+        configId: '',
+        detailState: '',
+        feeTypeCd: '888800010006', // 押金
+        communityId: '',
+        page: 1,
+        row: 10
+      },
+      depositFees: [],
+      feeConfigs: [],
+      states: [],
+      payerObjTypes: [],
+      detailStates: [],
+      roomUnits: [],
+      sumTotal: {
+        unpaidfeeAmount: 0,
+        unpaidfeeAmounts: 0,
+        paidfeeAmount: 0,
+        paidfeeAmounts: 0,
+        refundedAmount: 0,
+        refundedAmounts: 0,
+        refundInProgressAmount: 0,
+        refundInProgressAmounts: 0,
+        refundFailedAmount: 0,
+        refundFailedAmounts: 0
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      total: 0
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.conditions.communityId = this.communityId
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      try {
+        // 获取字典数据
+        await Promise.all([
+          this.getDictData('pay_fee', 'state'),
+          this.getDictData('pay_fee', 'payer_obj_type'),
+          this.getDictData('pay_fee_detail', 'state')
+        ])
+        this.listFees()
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+      }
+    },
+    async getDictData(dictType, state) {
+      try {
+        const data = await getDict(dictType, state)
+        if (dictType === 'pay_fee' && state === 'state') {
+          this.states = data
+        } else if (dictType === 'pay_fee' && state === 'payer_obj_type') {
+          this.payerObjTypes = data
+        } else if (dictType === 'pay_fee_detail' && state === 'state') {
+          this.detailStates = data
+        }
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    async listFees() {
+      this.loading = true
+      try {
+        const params = {
+          ...this.conditions,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const res = await queryPayFeeDeposit(params)
+        this.depositFees = res.data
+        this.total = res.total
+        this.sumTotal = res.sumTotal
+        if (res.data.length > 0) {
+          this.feeConfigs = res.data[0].feeConfigDtos || []
+        }
+      } catch (error) {
+        console.error('获取押金报表失败:', error)
+      } finally {
+        this.loading = false
+      }
+    },
+    async loadUnits(floorId) {
+      try {
+        const res = await this.$api.unit.queryUnits({
+          floorId,
+          communityId: this.communityId
+        })
+        this.roomUnits = res.data || []
+      } catch (error) {
+        console.error('获取单元列表失败:', error)
+      }
+    },
+    queryMethod() {
+      this.page.current = 1
+      this.listFees()
+    },
+    resetMethod() {
+      this.conditions = {
+        floorId: '',
+        floorName: '',
+        roomNum: '',
+        unitId: '',
+        feeId: '',
+        state: '',
+        payerObjType: '',
+        startTime: '',
+        endTime: '',
+        configId: '',
+        detailState: '',
+        feeTypeCd: '888800010006',
+        communityId: this.communityId,
+        page: 1,
+        row: 10
+      }
+      this.listFees()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.listFees()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.listFees()
+    },
+    openChooseFloor() {
+      this.$refs.searchFloor.open()
+    },
+    handleChooseFloor(floor) {
+      this.conditions.floorId = floor.floorId
+      this.conditions.floorName = floor.floorName
+      this.loadUnits(floor.floorId)
+    },
+    async exportFee() {
+      try {
+        this.conditions.pagePath = 'reportPayFeeDeposit'
+        const res = await exportData(this.conditions)
+        this.$message.success(res.msg)
+        if (res.code === 0) {
+          this.$router.push('/pages/property/downloadTempFile?tab=下载中心')
+        }
+      } catch (error) {
+        console.error('导出失败:', error)
+      }
+    },
+    openPayFeeDetail(fee) {
+      this.$router.push(`/pages/property/propertyFee?feeId=${fee.feeId}`)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.report-pay-fee-deposit-container {
+  padding: 20px;
+
+  .search-card {
+    margin-bottom: 20px;
+
+    .search-item {
+      margin-bottom: 15px;
+    }
+  }
+
+  .table-card {
+    margin-bottom: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/couponMarketLang.js b/src/views/scm/couponMarketLang.js
new file mode 100644
index 0000000..aa60862
--- /dev/null
+++ b/src/views/scm/couponMarketLang.js
@@ -0,0 +1,24 @@
+export const messages = {
+  en: {
+    couponMarket: {
+      search: {
+        placeholder: 'Please enter coupon name',
+      },
+      price: 'Price',
+      buy: 'Buy',
+      fetchSupplierError: 'Failed to fetch supplier list',
+      fetchCouponError: 'Failed to fetch coupon list'
+    }
+  },
+  zh: {
+    couponMarket: {
+      search: {
+        placeholder: '请输入优惠券名称',
+      },
+      price: '售价',
+      buy: '购买',
+      fetchSupplierError: '获取供应商列表失败',
+      fetchCouponError: '获取优惠券列表失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/couponMarketList.vue b/src/views/scm/couponMarketList.vue
new file mode 100644
index 0000000..8fc5c80
--- /dev/null
+++ b/src/views/scm/couponMarketList.vue
@@ -0,0 +1,179 @@
+<template>
+  <div class="coupon-market-container">
+    <div class="search-wrapper">
+      <div>
+        <el-input v-model="searchForm.couponName" style="width: 50%" :placeholder="$t('couponMarket.search.placeholder')"
+          @keyup.enter.native="handleSearch" />
+        <el-button type="primary" @click="handleSearch">
+          {{ $t('common.search') }}
+        </el-button>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="3"></el-col>
+        <el-col :span="12">
+          <el-link v-for="(item, index) in couponMarketInfo.suppliers" :key="index" type="primary"
+            @click="handleQuerySupplierCoupon(item)" class="supplier-link">
+            {{ item.supplierName }}
+          </el-link>
+        </el-col>
+      </el-row>
+    </div>
+
+    <divider></divider>
+
+    <div class="coupon-list-wrapper">
+      <el-row :gutter="20">
+        <el-col v-for="(item, index) in couponMarketInfo.coupons" :key="index" :span="6" class="coupon-item">
+          <el-card shadow="hover">
+            <el-image :src="couponMarketInfo.url" class="coupon-image" fit="cover" />
+            <div class="coupon-title">
+              {{ item.name }}
+            </div>
+            <el-row class="coupon-footer">
+              <el-col :span="12">
+                <span class="price-label">{{ $t('couponMarket.price') }}:</span>
+                <span class="price-value">￥{{ item.valuePrice }}</span>
+              </el-col>
+              <el-col :span="12" class="text-right">
+                <el-link type="primary">{{ $t('couponMarket.buy') }}</el-link>
+              </el-col>
+            </el-row>
+          </el-card>
+        </el-col>
+      </el-row>
+
+      <el-pagination v-if="couponMarketInfo.records > 1" :current-page.sync="page.current" :page-size="page.size"
+        :total="couponMarketInfo.records" layout="total, prev, pager, next" @current-change="handlePageChange"
+        class="pagination-wrapper" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { listSupplier, listSupplierCoupon } from '@/api/scm/couponMarketApi'
+import divider from '@/components/system/divider'
+
+export default {
+  name: 'CouponMarketList',
+  data() {
+    return {
+      searchForm: {
+        couponName: ''
+      },
+      couponMarketInfo: {
+        coupons: [],
+        suppliers: [],
+        total: 0,
+        records: 1,
+        url: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.zhimg.com%2Fv2-e262fc8062b7ef085a9f4de51a31f08f_1440w.jpg%3Fsource%3D172ae18b&refer=http%3A%2F%2Fpic1.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1671372327&t=5644f55f337250a4f5af2baae7f34e3e'
+      },
+      page: {
+        current: 1,
+        size: 15
+      }
+    }
+  },
+  components: {
+    divider
+  },
+  created() {
+    this.loadTopSupplier()
+    this.loadCoupons()
+  },
+  methods: {
+    async loadTopSupplier() {
+      try {
+        const params = {
+          page: 1,
+          row: 5
+        }
+        const { data } = await listSupplier(params)
+        this.couponMarketInfo.suppliers = data
+      } catch (error) {
+        this.$message.error(this.$t('couponMarket.fetchSupplierError'))
+      }
+    },
+    async loadCoupons() {
+      try {
+        const params = {
+          page: this.page.current,
+          row: this.page.size,
+          supplierId: this.currentSupplierId || ''
+        }
+        const { data, total, records } = await listSupplierCoupon(params)
+        this.couponMarketInfo.coupons = data
+        this.couponMarketInfo.total = total
+        this.couponMarketInfo.records = records
+      } catch (error) {
+        this.$message.error(this.$t('couponMarket.fetchCouponError'))
+      }
+    },
+    handleQuerySupplierCoupon(item) {
+      this.currentSupplierId = item.supplierId
+      this.page.current = 1
+      this.loadCoupons()
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.loadCoupons()
+    },
+    handlePageChange(currentPage) {
+      this.page.current = currentPage
+      this.loadCoupons()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon-market-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+  }
+
+  .supplier-wrapper {
+    margin-bottom: 20px;
+
+    .supplier-link {
+      margin-right: 15px;
+    }
+  }
+
+  .coupon-list-wrapper {
+    .coupon-item {
+      margin-bottom: 20px;
+
+      .coupon-image {
+        width: 100%;
+        height: 150px;
+        border-radius: 4px;
+      }
+
+      .coupon-title {
+        padding: 10px 0;
+        font-weight: bold;
+      }
+
+      .coupon-footer {
+        padding-top: 10px;
+
+        .price-label {
+          color: #999;
+        }
+
+        .price-value {
+          color: #ff0036;
+          font-weight: bold;
+        }
+      }
+    }
+
+    .pagination-wrapper {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/scm/couponPropertyPoolManageLang.js b/src/views/scm/couponPropertyPoolManageLang.js
new file mode 100644
index 0000000..d326ded
--- /dev/null
+++ b/src/views/scm/couponPropertyPoolManageLang.js
@@ -0,0 +1,194 @@
+export const messages = {
+  en: {
+    couponPropertyPoolManage: {
+      search: {
+        title: 'Search Conditions',
+        cppId: 'Coupon ID',
+        couponName: 'Coupon Name',
+        fromType: 'From Type',
+        toType: 'To Type'
+      },
+      list: {
+        title: 'Coupon List',
+        add: 'Create'
+      },
+      table: {
+        cppId: 'ID',
+        couponName: 'Coupon Name',
+        fromType: 'From Type',
+        toType: 'To Type',
+        stock: 'Quantity',
+        validityDay: 'Validity',
+        day: 'days',
+        createTime: 'Create Time',
+        gift: 'Manual Gift'
+      },
+      fromType: {
+        market: 'Market Purchase',
+        self: 'Self Made'
+      },
+      toType: {
+        shopping: 'Shopping',
+        payment: 'Payment',
+        repair: 'Repair',
+        parking: 'Parking',
+        charging: 'Charging'
+      },
+      add: {
+        title: 'Create Coupon',
+        couponName: 'Coupon Name',
+        couponNamePlaceholder: 'Required, please enter coupon name',
+        toType: 'Purpose',
+        toTypePlaceholder: 'Required, please select purpose',
+        stock: 'Quantity',
+        stockPlaceholder: 'Required, please enter quantity',
+        validityDay: 'Validity',
+        validityDayPlaceholder: 'Required, please enter validity (days)',
+        remark: 'Instructions',
+        remarkPlaceholder: 'Required, please enter instructions',
+        success: 'Create successfully',
+        error: 'Create failed'
+      },
+      edit: {
+        title: 'Edit Coupon',
+        couponName: 'Coupon Name',
+        couponNamePlaceholder: 'Required, please enter coupon name',
+        toType: 'Purpose',
+        toTypePlaceholder: 'Required, please select purpose',
+        stock: 'Quantity',
+        stockPlaceholder: 'Required, please enter quantity',
+        validityDay: 'Validity',
+        validityDayPlaceholder: 'Required, please enter validity (days)',
+        remark: 'Instructions',
+        remarkPlaceholder: 'Required, please enter instructions',
+        success: 'Edit successfully',
+        error: 'Edit failed'
+      },
+      gift: {
+        title: 'Gift Coupon',
+        couponName: 'Coupon Name',
+        giftCount: 'Quantity',
+        giftCountPlaceholder: 'Required, please enter quantity',
+        tel: 'Owner Phone',
+        telPlaceholder: 'Required, please enter phone number',
+        submit: 'Gift',
+        success: 'Gift successfully',
+        error: 'Gift failed'
+      },
+      delete: {
+        title: 'Delete Confirmation',
+        confirmText: 'Are you sure to delete this coupon?',
+        success: 'Delete successfully',
+        error: 'Delete failed'
+      },
+      validate: {
+        couponNameRequired: 'Coupon name is required',
+        couponNameMaxLength: 'Coupon name cannot exceed 64 characters',
+        toTypeRequired: 'Purpose is required',
+        stockRequired: 'Quantity is required',
+        validityDayRequired: 'Validity is required',
+        remarkRequired: 'Instructions is required',
+        cppIdRequired: 'Coupon ID is required',
+        giftCountRequired: 'Quantity is required',
+        telRequired: 'Phone number is required'
+      },
+      fetchError: 'Failed to get coupon list'
+    }
+  },
+  zh: {
+    couponPropertyPoolManage: {
+      search: {
+        title: '查询条件',
+        cppId: '优惠券编号',
+        couponName: '优惠券名称',
+        fromType: '来自方式',
+        toType: '用途'
+      },
+      list: {
+        title: '优惠券列表',
+        add: '制作'
+      },
+      table: {
+        cppId: '编号',
+        couponName: '优惠券名称',
+        fromType: '来自方式',
+        toType: '用途',
+        stock: '数量',
+        validityDay: '有效期',
+        day: '天',
+        createTime: '创建时间',
+        gift: '手工赠送'
+      },
+      fromType: {
+        market: '优惠券市场购买',
+        self: '自己制作'
+      },
+      toType: {
+        shopping: '购物',
+        payment: '缴费',
+        repair: '维修劵',
+        parking: '停车劵',
+        charging: '充电桩充电劵'
+      },
+      add: {
+        title: '制作优惠券',
+        couponName: '优惠券名称',
+        couponNamePlaceholder: '必填，请填写优惠券名称',
+        toType: '用途',
+        toTypePlaceholder: '必填，请选择用途',
+        stock: '数量',
+        stockPlaceholder: '必填，请填写数量',
+        validityDay: '有效期',
+        validityDayPlaceholder: '必填，请填写有效期(天)',
+        remark: '使用说明',
+        remarkPlaceholder: '必填，请填写使用说明',
+        success: '制作成功',
+        error: '制作失败'
+      },
+      edit: {
+        title: '修改优惠券',
+        couponName: '优惠券名称',
+        couponNamePlaceholder: '必填，请填写优惠券名称',
+        toType: '用途',
+        toTypePlaceholder: '必填，请选择用途',
+        stock: '数量',
+        stockPlaceholder: '必填，请填写数量',
+        validityDay: '有效期',
+        validityDayPlaceholder: '必填，请填写有效期(天)',
+        remark: '使用说明',
+        remarkPlaceholder: '必填，请填写使用说明',
+        success: '修改成功',
+        error: '修改失败'
+      },
+      gift: {
+        title: '赠送优惠券',
+        couponName: '优惠券名称',
+        giftCount: '数量',
+        giftCountPlaceholder: '必填，请填写数量',
+        tel: '业主手机号',
+        telPlaceholder: '必填，请填写手机号',
+        submit: '赠送',
+        success: '赠送成功',
+        error: '赠送失败'
+      },
+      delete: {
+        title: '删除确认',
+        confirmText: '确定删除优惠券?',
+        success: '删除成功',
+        error: '删除失败'
+      },
+      validate: {
+        couponNameRequired: '优惠券名称不能为空',
+        couponNameMaxLength: '优惠券名称不能超过64个字符',
+        toTypeRequired: '用途不能为空',
+        stockRequired: '数量不能为空',
+        validityDayRequired: '有效期不能为空',
+        remarkRequired: '使用说明不能为空',
+        cppIdRequired: '优惠券编号不能为空',
+        giftCountRequired: '数量不能为空',
+        telRequired: '手机号不能为空'
+      },
+      fetchError: '获取优惠券列表失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/couponPropertyPoolManageList.vue b/src/views/scm/couponPropertyPoolManageList.vue
new file mode 100644
index 0000000..33c9f6d
--- /dev/null
+++ b/src/views/scm/couponPropertyPoolManageList.vue
@@ -0,0 +1,207 @@
+<template>
+  <div class="coupon-property-pool-manage-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('couponPropertyPoolManage.search.title') }}</span>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="searchForm.cppId" :placeholder="$t('couponPropertyPoolManage.search.cppId')" clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-input v-model="searchForm.couponName" :placeholder="$t('couponPropertyPoolManage.search.couponName')"
+            clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="searchForm.fromType" :placeholder="$t('couponPropertyPoolManage.search.fromType')"
+            style="width:100%" clearable>
+            <el-option v-for="item in fromTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </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-select v-model="searchForm.toType" :placeholder="$t('couponPropertyPoolManage.search.toType')"
+            style="width:100%" clearable>
+            <el-option v-for="item in toTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 列表 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('couponPropertyPoolManage.list.title') }}</span>
+        <div style="float:right">
+          <el-button type="text" @click="handleShowDoc">
+            {{ $t('common.document') }}
+          </el-button>
+          <el-button type="primary" size="small" @click="handleAdd">
+            {{ $t('couponPropertyPoolManage.list.add') }}
+          </el-button>
+        </div>
+      </div>
+
+      <el-table v-loading="loading" :data="tableData" border style="width:100%">
+        <el-table-column prop="cppId" :label="$t('couponPropertyPoolManage.table.cppId')" align="center" />
+        <el-table-column prop="couponName" :label="$t('couponPropertyPoolManage.table.couponName')" align="center" />
+        <el-table-column prop="fromTypeName" :label="$t('couponPropertyPoolManage.table.fromType')" align="center" />
+        <el-table-column prop="toTypeName" :label="$t('couponPropertyPoolManage.table.toType')" align="center" />
+        <el-table-column prop="stock" :label="$t('couponPropertyPoolManage.table.stock')" align="center" />
+        <el-table-column prop="validityDay" :label="$t('couponPropertyPoolManage.table.validityDay')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.validityDay }}{{ $t('couponPropertyPoolManage.table.day') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('couponPropertyPoolManage.table.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="300">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.stock > 0" size="mini" type="text" @click="handleGift(scope.row)">
+              {{ $t('couponPropertyPoolManage.table.gift') }}
+            </el-button>
+            <el-button v-if="scope.row.fromType === '2002'" size="mini" type="text" @click="handleEdit(scope.row)">
+              {{ $t('common.edit') }}
+            </el-button>
+            <el-button v-if="scope.row.fromType === '2002'" size="mini" type="text" @click="handleDelete(scope.row)">
+              {{ $t('common.delete') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <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-coupon-property-pool ref="addCouponPropertyPool" @success="handleSuccess" />
+    <edit-coupon-property-pool ref="editCouponPropertyPool" @success="handleSuccess" />
+    <gift-coupon-property-pool ref="giftCouponPropertyPool" @success="handleSuccess" />
+    <delete-coupon-property-pool ref="deleteCouponPropertyPool" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { listCouponPropertyPool } from '@/api/scm/couponPropertyPoolManageApi'
+import AddCouponPropertyPool from '@/components/scm/addCouponPropertyPool'
+import EditCouponPropertyPool from '@/components/scm/editCouponPropertyPool'
+import GiftCouponPropertyPool from '@/components/scm/giftCouponPropertyPool'
+import DeleteCouponPropertyPool from '@/components/scm/deleteCouponPropertyPool'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'CouponPropertyPoolManageList',
+  components: {
+    AddCouponPropertyPool,
+    EditCouponPropertyPool,
+    GiftCouponPropertyPool,
+    DeleteCouponPropertyPool
+  },
+  data() {
+    return {
+      loading: false,
+      searchForm: {
+        cppId: '',
+        couponName: '',
+        fromType: '',
+        toType: '',
+        communityId: getCommunityId()
+      },
+      tableData: [],
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      },
+      fromTypeOptions: [
+        { value: '1001', label: this.$t('couponPropertyPoolManage.fromType.market') },
+        { value: '2002', label: this.$t('couponPropertyPoolManage.fromType.self') }
+      ],
+      toTypeOptions: [
+        { value: '1001', label: this.$t('couponPropertyPoolManage.toType.shopping') },
+        { value: '3003', label: this.$t('couponPropertyPoolManage.toType.repair') },
+        { value: '4004', label: this.$t('couponPropertyPoolManage.toType.parking') }
+      ]
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    async getList() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.searchForm,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await listCouponPropertyPool(params)
+        this.tableData = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('couponPropertyPoolManage.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch() {
+      this.page.current = 1
+      this.getList()
+    },
+    handleAdd() {
+      this.$refs.addCouponPropertyPool.open()
+    },
+    handleEdit(row) {
+      this.$refs.editCouponPropertyPool.open(row)
+    },
+    handleGift(row) {
+      this.$refs.giftCouponPropertyPool.open(row)
+    },
+    handleDelete(row) {
+      this.$refs.deleteCouponPropertyPool.open(row)
+    },
+    handleShowDoc() {
+      // 显示文档逻辑
+    },
+    handleSuccess() {
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this.getList()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon-property-pool-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/couponRuleLang.js b/src/views/scm/couponRuleLang.js
new file mode 100644
index 0000000..4726f91
--- /dev/null
+++ b/src/views/scm/couponRuleLang.js
@@ -0,0 +1,120 @@
+export const messages = {
+  en: {
+    couponRule: {
+      title: 'Coupon Rules',
+      ruleName: 'Rule Name',
+      ruleNamePlaceholder: 'Please enter rule name',
+      ruleNameRequired: 'Rule name is required',
+      ruleNameMaxLength: 'Rule name cannot exceed 64 characters',
+      remark: 'Remark',
+      remarkPlaceholder: 'Please enter remark',
+      remarkMaxLength: 'Remark cannot exceed 512 characters',
+      ruleIdRequired: 'Rule ID is required',
+      addRule: 'Add Rule',
+      editRule: 'Edit Rule',
+      deleteConfirm: 'Delete Confirmation',
+      deleteRulePrompt: 'Are you sure to delete this coupon rule?',
+      selectRuleFirst: 'Please select a rule first',
+      coupon: 'Coupon',
+      fee: 'Fee'
+    },
+    couponRuleCpps: {
+      id: 'ID',
+      coupon: 'Coupon',
+      couponPlaceholder: 'Please select coupon',
+      couponRequired: 'Coupon is required',
+      quantity: 'Quantity',
+      quantityPlaceholder: 'Please enter quantity',
+      quantityRequired: 'Quantity is required',
+      quantityPattern: 'Quantity must be a positive integer',
+      frequency: 'Frequency',
+      frequencyPlaceholder: 'Please select frequency',
+      frequencyRequired: 'Frequency is required',
+      once: 'Once',
+      monthly: 'Monthly',
+      addCoupon: 'Add Coupon',
+      editCoupon: 'Edit Coupon',
+      deleteConfirm: 'Delete Confirmation',
+      deletePrompt: 'Are you sure to delete this coupon?',
+      idRequired: 'ID is required'
+    },
+    couponRuleFee: {
+      id: 'ID',
+      fee: 'Fee',
+      feePlaceholder: 'Please select fee',
+      feeRequired: 'Fee is required',
+      payTime: 'Payment Time',
+      payMonth: 'Payment Month',
+      payMonthPlaceholder: 'Please enter payment month',
+      payMonthRequired: 'Payment month is required',
+      payStartTime: 'Start Time',
+      payStartTimePlaceholder: 'Please select start time',
+      payStartTimeRequired: 'Start time is required',
+      payEndTime: 'End Time',
+      payEndTimePlaceholder: 'Please select end time',
+      payEndTimeRequired: 'End time is required',
+      addFee: 'Add Fee',
+      deleteConfirm: 'Delete Confirmation',
+      deletePrompt: 'Are you sure to delete this fee rule?'
+    }
+  },
+  zh: {
+    couponRule: {
+      title: '优惠券规则',
+      ruleName: '规则名称',
+      ruleNamePlaceholder: '请输入规则名称',
+      ruleNameRequired: '规则名称不能为空',
+      ruleNameMaxLength: '规则名称不能超过64个字符',
+      remark: '备注',
+      remarkPlaceholder: '请输入备注',
+      remarkMaxLength: '备注不能超过512个字符',
+      ruleIdRequired: '规则ID不能为空',
+      addRule: '添加规则',
+      editRule: '编辑规则',
+      deleteConfirm: '删除确认',
+      deleteRulePrompt: '确定要删除此优惠券规则吗？',
+      selectRuleFirst: '请先选择规则',
+      coupon: '优惠券',
+      fee: '缴费赠送'
+    },
+    couponRuleCpps: {
+      id: '编号',
+      coupon: '优惠券',
+      couponPlaceholder: '请选择优惠券',
+      couponRequired: '优惠券不能为空',
+      quantity: '数量',
+      quantityPlaceholder: '请输入数量',
+      quantityRequired: '数量不能为空',
+      quantityPattern: '数量必须为正整数',
+      frequency: '频率',
+      frequencyPlaceholder: '请选择频率',
+      frequencyRequired: '频率不能为空',
+      once: '赠送一次',
+      monthly: '每月赠送',
+      addCoupon: '添加优惠券',
+      editCoupon: '编辑优惠券',
+      deleteConfirm: '删除确认',
+      deletePrompt: '确定要删除此优惠券吗？',
+      idRequired: 'ID不能为空'
+    },
+    couponRuleFee: {
+      id: '编号',
+      fee: '费用',
+      feePlaceholder: '请选择费用',
+      feeRequired: '费用不能为空',
+      payTime: '缴费时间',
+      payMonth: '缴费月',
+      payMonthPlaceholder: '请输入缴费月',
+      payMonthRequired: '缴费月不能为空',
+      payStartTime: '开始时间',
+      payStartTimePlaceholder: '请选择开始时间',
+      payStartTimeRequired: '开始时间不能为空',
+      payEndTime: '结束时间',
+      payEndTimePlaceholder: '请选择结束时间',
+      payEndTimeRequired: '结束时间不能为空',
+      addFee: '添加缴费赠送',
+      deleteConfirm: '删除确认',
+      deletePrompt: '确定要删除此缴费规则吗？'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/scm/couponRuleList.vue b/src/views/scm/couponRuleList.vue
new file mode 100644
index 0000000..caf3fb1
--- /dev/null
+++ b/src/views/scm/couponRuleList.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="coupon-rule-container">
+    <el-row class="coupon-rule-wrapper">
+      <el-col :span="4" class="left-panel">
+        <coupon-rule-div ref="couponRuleDiv" @switch="handleSwitchCouponRule" />
+      </el-col>
+      <el-col :span="20" class="right-panel">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <h5>{{ currentCouponRule.ruleName }}</h5>
+            <div class="role-context">{{ currentCouponRule.remark }}</div>
+          </div>
+          <el-divider></el-divider>
+          <el-tabs v-model="activeTab" @tab-click="handleTabClick">
+            <el-tab-pane :label="$t('couponRule.coupon')" name="couponRuleCpps">
+              <coupon-rule-cpps v-if="activeTab === 'couponRuleCpps'" :rule-id="currentCouponRule.ruleId" />
+            </el-tab-pane>
+            <el-tab-pane :label="$t('couponRule.fee')" name="couponRuleFee">
+              <coupon-rule-fees v-if="activeTab === 'couponRuleFee'" :rule-id="currentCouponRule.ruleId" />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <add-coupon-rule ref="addCouponRule" @success="handleSuccess" />
+    <edit-coupon-rule ref="editCouponRule" @success="handleSuccess" />
+    <delete-coupon-rule ref="deleteCouponRule" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import CouponRuleDiv from '@/components/scm/CouponRuleDiv'
+import CouponRuleCpps from '@/components/scm/CouponRuleCpps'
+import CouponRuleFees from '@/components/scm/CouponRuleFees'
+import AddCouponRule from '@/components/scm/AddCouponRule'
+import EditCouponRule from '@/components/scm/EditCouponRule'
+import DeleteCouponRule from '@/components/scm/DeleteCouponRule'
+
+export default {
+  name: 'CouponRuleList',
+  components: {
+    CouponRuleDiv,
+    CouponRuleCpps,
+    CouponRuleFees,
+    AddCouponRule,
+    EditCouponRule,
+    DeleteCouponRule
+  },
+  data() {
+    return {
+      activeTab: 'couponRuleCpps',
+      currentCouponRule: {
+        ruleId: '',
+        ruleName: '',
+        remark: ''
+      }
+    }
+  },
+  methods: {
+    handleSwitchCouponRule(rule) {
+      this.currentCouponRule = rule
+    },
+    handleTabClick(tab) {
+      this.activeTab = tab.name
+    },
+    handleSuccess() {
+      this.$refs.couponRuleDiv.refreshList()
+    },
+    openAddModal() {
+      this.$refs.addCouponRule.open()
+    },
+    openEditModal() {
+      if (!this.currentCouponRule.ruleId) {
+        this.$message.warning(this.$t('couponRule.selectRuleFirst'))
+        return
+      }
+      this.$refs.editCouponRule.open(this.currentCouponRule)
+    },
+    openDeleteModal() {
+      if (!this.currentCouponRule.ruleId) {
+        this.$message.warning(this.$t('couponRule.selectRuleFirst'))
+        return
+      }
+      this.$refs.deleteCouponRule.open(this.currentCouponRule)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.coupon-rule-container {
+  padding: 20px;
+  height: 100%;
+  
+  .coupon-rule-wrapper {
+    height: 100%;
+    
+    .left-panel {
+      padding-right: 10px;
+      height: 100%;
+    }
+    
+    .right-panel {
+      height: 100%;
+      
+      .box-card {
+        height: 100%;
+        
+        .clearfix {
+          h5 {
+            margin: 0;
+            font-size: 16px;
+            font-weight: bold;
+          }
+          
+          .role-context {
+            margin-top: 5px;
+            color: #999;
+            font-size: 12px;
+          }
+        }
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file