diff --git a/src/api/contract/contractDetailApi.js b/src/api/contract/contractDetailApi.js
new file mode 100644
index 0000000..b14cbf2
--- /dev/null
+++ b/src/api/contract/contractDetailApi.js
@@ -0,0 +1,101 @@
+import request from '@/utils/request'
+
+// 查询合同详情
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询合同详情失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取合同房屋列表
+export function getContractRooms(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/getContractRooms',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取合同房屋列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取合同附件列表
+export function getContractFiles(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/getContractFiles',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取合同附件列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取合同费用列表
+export function getContractFees(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/getContractFees',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取合同费用列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取合同历史缴费记录
+export function getContractHisFees(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/getContractHisFees',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取合同历史缴费记录失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailChangeApi.js b/src/api/contract/contractDetailChangeApi.js
new file mode 100644
index 0000000..8a325f2
--- /dev/null
+++ b/src/api/contract/contractDetailChangeApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询合同变更计划
+export function queryContractChangePlan(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractChangePlan',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询合同变更计划失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailFeeApi.js b/src/api/contract/contractDetailFeeApi.js
new file mode 100644
index 0000000..d3dc0f8
--- /dev/null
+++ b/src/api/contract/contractDetailFeeApi.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function listFee(params) {
+  return request({
+    url: '/fee.listFee',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailFileApi.js b/src/api/contract/contractDetailFileApi.js
new file mode 100644
index 0000000..2fc5692
--- /dev/null
+++ b/src/api/contract/contractDetailFileApi.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function queryContractFile(params) {
+  return request({
+    url: '/contractFile/queryContractFile',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailFlowApi.js b/src/api/contract/contractDetailFlowApi.js
new file mode 100644
index 0000000..2fbb253
--- /dev/null
+++ b/src/api/contract/contractDetailFlowApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询工作流审核信息
+export function listWorkflowAuditInfo(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: 'workflow.listWorkflowAuditInfo',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询工作流审核信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailHisFeeApi.js b/src/api/contract/contractDetailHisFeeApi.js
new file mode 100644
index 0000000..a5e32b9
--- /dev/null
+++ b/src/api/contract/contractDetailHisFeeApi.js
@@ -0,0 +1,9 @@
+import request from '@/utils/request'
+
+export function queryFeeDetail(params) {
+  return request({
+    url: '/fee.queryFeeDetail',
+    method: 'get',
+    params
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailHisRoomFeeApi.js b/src/api/contract/contractDetailHisRoomFeeApi.js
new file mode 100644
index 0000000..165ac7c
--- /dev/null
+++ b/src/api/contract/contractDetailHisRoomFeeApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询费用明细
+export function queryFeeDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/fee.queryFeeDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询费用明细失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailOwnerApi.js b/src/api/contract/contractDetailOwnerApi.js
new file mode 100644
index 0000000..7591234
--- /dev/null
+++ b/src/api/contract/contractDetailOwnerApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryOwners(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/owner.queryOwners',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取业主列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailReceiptApi.js b/src/api/contract/contractDetailReceiptApi.js
new file mode 100644
index 0000000..cbabfe6
--- /dev/null
+++ b/src/api/contract/contractDetailReceiptApi.js
@@ -0,0 +1,39 @@
+import request from '@/utils/request'
+
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取收据列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+export function listFeePrintPage(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.listFeePrintPage',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '获取打印页面列表失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailRoomApi.js b/src/api/contract/contractDetailRoomApi.js
new file mode 100644
index 0000000..d627929
--- /dev/null
+++ b/src/api/contract/contractDetailRoomApi.js
@@ -0,0 +1,20 @@
+import request from '@/utils/request'
+
+export function queryContractRoom(params) {
+  return new Promise((resolve, reject) => {
+    request({
+    url: '/contract/queryContractRoom',
+    method: 'get',
+    params
+  }).then(response => {
+    const res = response.data
+    if (res.code === 0) {
+      resolve(res)
+    } else {
+      reject(new Error(res.msg || '查询合同信息失败'))
+    }
+  }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/contract/contractDetailSubApi.js b/src/api/contract/contractDetailSubApi.js
new file mode 100644
index 0000000..90e4004
--- /dev/null
+++ b/src/api/contract/contractDetailSubApi.js
@@ -0,0 +1,21 @@
+import request from '@/utils/request'
+
+// 查询合同信息
+export function queryContract(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContract',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      if (res.code === 0) {
+        resolve(res)
+      } else {
+        reject(new Error(res.msg || '查询合同信息失败'))
+      }
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/contract/contractDetailChange.vue b/src/components/contract/contractDetailChange.vue
new file mode 100644
index 0000000..ad22f56
--- /dev/null
+++ b/src/components/contract/contractDetailChange.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="margin-top">
+    <div class="flex justify-end">
+      <div :span="2" class="padding-right-xs padding-left-xl"></div>
+      <div :span="2" class="padding-right-xs padding-right-xl"></div>
+      <div :span="8" class="text-right"></div>
+    </div>
+    <div class="margin-top">
+      <el-table :data="contractDetailChangeInfo.contracts" style="width: 100%" border stripe>
+        <el-table-column prop="contractName" :label="$t('contractDetailChange.contractName')" align="center" />
+        <el-table-column prop="contractCode" :label="$t('contractDetailChange.contractCode')" align="center" />
+        <el-table-column prop="contractTypeName" :label="$t('contractDetailChange.contractType')" align="center" />
+        <el-table-column prop="partyA" :label="$t('contractDetailChange.partyA')" align="center" />
+        <el-table-column prop="partyB" :label="$t('contractDetailChange.partyB')" align="center" />
+        <el-table-column prop="planTypeName" :label="$t('contractDetailChange.changeType')" align="center" />
+        <el-table-column prop="changePersonName" :label="$t('contractDetailChange.changePerson')" align="center" />
+        <el-table-column prop="createTime" :label="$t('contractDetailChange.applyTime')" align="center" />
+        <el-table-column prop="remark" :label="$t('contractDetailChange.description')" align="center" />
+        <el-table-column prop="stateName" :label="$t('contractDetailChange.status')" align="center" />
+        <el-table-column :label="$t('contractDetailChange.operation')" align="center">
+          <template #default="{ row }">
+            <el-button type="text" size="small" @click="_toContractDetails(row)">
+              {{ $t('contractDetailChange.detail') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row>
+        <el-col :span="4"></el-col>
+        <el-col :span="8">
+          <el-pagination class="pagination" layout="total, sizes, prev, pager, next, jumper" :total="total"
+            :page-size="pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryContractChangePlan } from '@/api/contract/contractDetailChangeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailChange',
+  data() {
+    return {
+      contractDetailChangeInfo: {
+        contracts: [],
+        contractId: '',
+        roomNum: '',
+        totalArea: '0',
+        logStartTime: '',
+        logEndTime: '',
+        contractCode: '',
+        staffNameLike: ''
+      },
+      pageSize: 10,
+      currentPage: 1,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.contractDetailChangeInfo.contractId = data.contractId
+      this.contractDetailChangeInfo.logStartTime = data.logStartTime
+      this.contractDetailChangeInfo.logEndTime = data.logEndTime
+      this.contractDetailChangeInfo.contractCode = data.contractCode
+      this._loadContractDetailChangeData()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadContractDetailChangeData()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this._loadContractDetailChangeData()
+    },
+    _loadContractDetailChangeData() {
+      const params = {
+        contractId: this.contractDetailChangeInfo.contractId,
+        logStartTime: this.contractDetailChangeInfo.logStartTime,
+        logEndTime: this.contractDetailChangeInfo.logEndTime,
+        contractCode: this.contractDetailChangeInfo.contractCode,
+        staffNameLike: this.contractDetailChangeInfo.staffNameLike,
+        page: this.currentPage,
+        row: this.pageSize
+      }
+
+      queryContractChangePlan(params).then(response => {
+        this.contractDetailChangeInfo.contracts = response.data
+        this.total = response.records
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _qureyContractDetailChange() {
+      this.currentPage = 1
+      this._loadContractDetailChangeData()
+    },
+    _toContractDetails(contract) {
+      this.$router.push(`/pages/admin/contractChangeDetails?planId=${contract.planId}`)
+    },
+    switch(data) {
+      this.contractDetailChangeInfo.contractId = data.contractId
+      this.contractDetailChangeInfo.logStartTime = data.logStartTime
+      this.contractDetailChangeInfo.logEndTime = data.logEndTime
+      this.contractDetailChangeInfo.contractCode = data.contractCode
+      this._loadContractDetailChangeData()
+    },
+    notify() {
+      this._loadContractDetailChangeData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 10px;
+}
+
+.padding-left-xl {
+  padding-left: 40px;
+}
+
+.padding-right-xl {
+  padding-right: 40px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.pagination {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailChangeDemo.vue b/src/components/contract/contractDetailChangeDemo.vue
new file mode 100644
index 0000000..d4646fb
--- /dev/null
+++ b/src/components/contract/contractDetailChangeDemo.vue
@@ -0,0 +1,26 @@
+<template>
+  <div>
+    <contract-detail-change ref="contractDetailChange"></contract-detail-change>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailChange from '@/components/contract/contractDetailChange'
+
+export default {
+  components: {
+    ContractDetailChange
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailChange.switch({
+        contractId: '12345',
+        logStartTime: '2023-01-01',
+        logEndTime: '2023-12-31',
+        contractCode: 'CONTRACT001'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailFee.vue b/src/components/contract/contractDetailFee.vue
new file mode 100644
index 0000000..cc42364
--- /dev/null
+++ b/src/components/contract/contractDetailFee.vue
@@ -0,0 +1,261 @@
+<template>
+  <div class="margin-top">
+    <div class="flex justify-end">
+      <div :span="2" class="padding-right-xs padding-left-xl"></div>
+      <div :span="2" class="padding-right-xs padding-right-xl"></div>
+      <div :span="8" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_openTempImportContractFeeModal">
+          {{ $t('contractDetailFee.temporaryFee') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_openContractCreateFeeAddModal">
+          {{ $t('contractDetailFee.createFee') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_toContractOwePayFee">
+          {{ $t('contractDetailFee.payArrears') }}
+        </el-button>
+      </div>
+    </div>
+    <div class="margin-top">
+      <el-table :data="contractDetailFeeInfo.fees" style="width: 100%" border stripe>
+        <el-table-column prop="feeName" :label="$t('contractDetailFee.feeItem')" align="center"></el-table-column>
+        <el-table-column prop="feeFlagName" :label="$t('contractDetailFee.feeFlag')" align="center"></el-table-column>
+        <el-table-column prop="feeTypeCdName" :label="$t('contractDetailFee.feeType')" align="center"></el-table-column>
+        <el-table-column prop="amountOwed" :label="$t('contractDetailFee.receivableAmount')"
+          align="center"></el-table-column>
+        <el-table-column prop="startTime" :label="$t('contractDetailFee.accountingTime')"
+          align="center"></el-table-column>
+        <el-table-column :label="$t('contractDetailFee.receivablePeriod')" align="center">
+          <template slot-scope="scope">
+            {{ _getContractEndTime(scope.row) }}~<br />
+            {{ _getContractDeadlineTime(scope.row) }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('contractDetailFee.description')" align="center" width="150">
+          <template slot-scope="scope">
+            <div v-if="scope.row.computingFormula == '5005' || scope.row.computingFormula == '9009'">
+              <div><span>{{ $t('contractDetailFee.previousReading') }}:</span>{{ scope.row.preDegrees }}</div>
+              <div><span>{{ $t('contractDetailFee.currentReading') }}:</span>{{ scope.row.curDegrees }}</div>
+              <div><span>{{ $t('contractDetailFee.unitPrice') }}:</span>{{ scope.row.mwPrice || scope.row.squarePrice }}
+              </div>
+              <div><span>{{ $t('contractDetailFee.surcharge') }}:</span>{{ scope.row.additionalAmount }}</div>
+            </div>
+            <div v-else-if="scope.row.computingFormula == '6006'">
+              <div><span>{{ $t('contractDetailFee.usage') }}:</span>{{
+                _getContractAttrValue(scope.row.feeAttrs, '390006') }}</div>
+              <div><span>{{ $t('contractDetailFee.unitPrice') }}:</span>{{ scope.row.squarePrice }}</div>
+              <div><span>{{ $t('contractDetailFee.surcharge') }}:</span>{{ scope.row.additionalAmount }}</div>
+            </div>
+            <div v-else-if="scope.row.feeTypeCd == '888800010017'">
+              <div><span>{{ $t('contractDetailFee.algorithm') }}:</span>{{
+                _getContractAttrValue(scope.row.feeAttrs, '390005') }}</div>
+              <div><span>{{ $t('contractDetailFee.usage') }}:</span>{{
+                _getContractAttrValue(scope.row.feeAttrs, '390003') }}</div>
+            </div>
+            <div v-else-if="scope.row.computingFormula == '4004'">
+              <div>{{ $t('contractDetailFee.feeBasedOnActual') }}</div>
+            </div>
+            <div v-else>
+              <div><span>{{ $t('contractDetailFee.unitPrice') }}:</span>{{ scope.row.squarePrice }}</div>
+              <div v-if="scope.row.feeFlag == '1003006'"><span>{{ $t('contractDetailFee.surcharge') }}:</span>{{
+                scope.row.additionalAmount }}</div>
+              <div v-else><span>{{ $t('contractDetailFee.fixedFee') }}:</span>{{ scope.row.additionalAmount }}</div>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('contractDetailFee.status')" align="center"></el-table-column>
+        <el-table-column :label="$t('contractDetailFee.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502020082314267912')"
+              @click="_payContractFee(scope.row)">
+              {{ $t('contractDetailFee.payment') }}
+            </el-button>
+            <el-button type="text" @click="_payContractFeeHis(scope.row)">
+              {{ $t('contractDetailFee.paymentHistory') }}
+            </el-button>
+            <el-button type="text" v-if="hasPrivilege('502020090604200029')" @click="_deleteContractFee(scope.row)">
+              {{ $t('contractDetailFee.cancel') }}
+            </el-button>
+            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502021070488970005')"
+              @click="_finishContractFee(scope.row)">
+              {{ $t('contractDetailFee.end') }}
+            </el-button>
+            <el-button type="text" v-if="scope.row.state != '2009001' && hasPrivilege('502020090427190001')"
+              @click="_editContractFee(scope.row)">
+              {{ $t('contractDetailFee.change') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row class="margin-top">
+        <el-col :span="4">
+          <div>{{ $t('contractDetailFee.note1') }}</div>
+          <div>{{ $t('contractDetailFee.note2') }}</div>
+        </el-col>
+        <el-col :span="2">
+          <span>{{ $t('contractDetailFee.arrearsSubtotal') }}:</span>
+          {{ contractDetailFeeInfo.totalAmount }}
+        </el-col>
+        <el-col :span="6" class="text-right">
+          <el-pagination @current-change="handlePageChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" layout="total, prev, pager, next"
+            :total="pagination.total"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+    <temp-import-room-fee ref="tempImportRoomFee"></temp-import-room-fee>
+  </div>
+</template>
+
+<script>
+import { listFee } from '@/api/contract/contractDetailFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import TempImportRoomFee from '@/components/fee/tempImportRoomFee'
+
+export default {
+  name: 'ContractDetailFee',
+  components: {
+    TempImportRoomFee
+  },
+  data() {
+    return {
+      contractDetailFeeInfo: {
+        rooms: [],
+        contractId: '',
+        roomNum: '',
+        allOweFeeAmount: '0',
+        totalAmount: 0,
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.contractDetailFeeInfo.contractId = data.contractId
+      this._loadContractDetailFeeData(1, this.pagination.pageSize)
+    },
+    _loadContractDetailFeeData(page, row) {
+      const params = {
+        page: page || 1,
+        row: row || 10,
+        communityId: this.communityId,
+        payerObjId: this.contractDetailFeeInfo.contractId,
+      }
+
+      listFee(params).then(response => {
+        this.contractDetailFeeInfo.total = response.total
+        this.contractDetailFeeInfo.records = response.records
+        this.contractDetailFeeInfo.fees = response.fees
+        this.pagination.total = response.records
+
+        let totalAmount = 0.0
+        response.fees.forEach(item => {
+          totalAmount += parseFloat(item.amountOwed)
+        })
+        this.contractDetailFeeInfo.totalAmount = totalAmount.toFixed(2)
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _openTempImportContractFeeModal() {
+      this.$refs.tempImportRoomFee.open({
+        roomId: this.contractDetailFeeInfo.contractId,
+        objType: '7777',
+        roomName: this.contractDetailFeeInfo.contractName,
+        ownerName: this.contractDetailFeeInfo.ownerName
+      })
+    },
+    _payContractFee(fee) {
+      this.$router.push(`/property/payFeeOrder?feeId=${fee.feeId}`)
+    },
+    _editContractFee(fee) {
+      this.$emit('edit-fee', fee)
+    },
+    _payContractFeeHis(fee) {
+      fee.builtUpArea = this.contractDetailFeeInfo.builtUpArea
+      this.$router.push(`/property/propertyFee?${this.objToGetParam(fee)}`)
+    },
+    _deleteContractFee(fee) {
+      this.$emit('delete-fee', {
+        communityId: this.communityId,
+        feeId: fee.feeId
+      })
+    },
+    _finishContractFee(fee) {
+      this.$emit('finish-fee', {
+        communityId: this.communityId,
+        feeId: fee.feeId
+      })
+    },
+    _toContractOwePayFee() {
+      this.$router.push(`/property/owePayFeeOrder?payObjId=${this.contractDetailFeeInfo.contractId}&payObjType=7777&contractName=${this.contractDetailFeeInfo.contractName}`)
+    },
+    _openContractCreateFeeAddModal() {
+      this.$emit('create-fee-add', {
+        isMore: false,
+        contract: this.contractDetailFeeInfo
+      })
+    },
+    _getContractAttrValue(attrs, specCd) {
+      let value = ""
+      attrs.forEach(item => {
+        if (item.specCd == specCd) {
+          value = item.value
+          return
+        }
+      })
+      return value
+    },
+    _getContractDeadlineTime(fee) {
+      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
+        return "-"
+      }
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return this.$options.filters.dateFormat(fee.endTime)
+    },
+    _getContractEndTime(fee) {
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return this.$options.filters.dateFormat(fee.endTime)
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this._loadContractDetailFeeData(currentPage, this.pagination.pageSize)
+    },
+    objToGetParam(obj) {
+      return Object.keys(obj).map(key => `${key}=${obj[key]}`).join('&')
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-left-xl {
+  padding-left: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailFeeDemo.vue b/src/components/contract/contractDetailFeeDemo.vue
new file mode 100644
index 0000000..364a418
--- /dev/null
+++ b/src/components/contract/contractDetailFeeDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-fee ref="contractDetailFee"></contract-detail-fee>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailFee from '@/components/contract/contractDetailFee'
+
+export default {
+  components: {
+    ContractDetailFee
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailFee._loadContractDetailFeeData({
+        contractId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailFile.vue b/src/components/contract/contractDetailFile.vue
new file mode 100644
index 0000000..c0298cc
--- /dev/null
+++ b/src/components/contract/contractDetailFile.vue
@@ -0,0 +1,71 @@
+<template>
+  <div class="margin-top">
+    <el-row class="margin-top-lg"></el-row>
+    <div class="margin-top">
+      <el-row>
+        <el-col :span="10">
+          <el-form-item :label="$t('contractDetailFile.relatedFiles')">
+            <div v-for="(file,index) in contractDetailFileInfo.files" :key="index" style="margin-left: 50px;">
+              <el-link type="primary" @click="_viewFile(file)">
+                {{ file.fileRealName }}
+              </el-link>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryContractFile } from '@/api/contract/contractDetailFileApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailFile',
+  data() {
+    return {
+      contractDetailFileInfo: {
+        files: [],
+        contractId: '',
+        roomNum: '',
+        allOweFeeAmount: '0'
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.contractDetailFileInfo.contractId = data.contractId
+      this._loadContractDetailFileData(1, this.pagination.pageSize)
+    },
+    _loadContractDetailFileData(page, row) {
+      const params = {
+        contractId: this.contractDetailFileInfo.contractId,
+        page: page || 1,
+        row: row || 100
+      }
+      
+      queryContractFile(params).then(response => {
+        this.contractDetailFileInfo.files = response.data
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _viewFile(file) {
+      window.open(file.fileSaveName)
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+.margin-top-lg {
+  margin-top: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailFileDemo.vue b/src/components/contract/contractDetailFileDemo.vue
new file mode 100644
index 0000000..9e00b40
--- /dev/null
+++ b/src/components/contract/contractDetailFileDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-file ref="contractDetailFile"></contract-detail-file>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailFile from '@/components/contract/contractDetailFile'
+
+export default {
+  components: {
+    ContractDetailFile
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailFile._loadContractDetailFileData({
+        contractId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailFlow.vue b/src/components/contract/contractDetailFlow.vue
new file mode 100644
index 0000000..72f870e
--- /dev/null
+++ b/src/components/contract/contractDetailFlow.vue
@@ -0,0 +1,98 @@
+<template>
+  <div class="margin-top">
+    <el-row :gutter="20" class="margin-top-lg">
+      <el-col :span="2" class="padding-right-xs padding-left-xl"></el-col>
+      <el-col :span="2" class="padding-right-xs padding-right-xl"></el-col>
+      <el-col :span="8" class="text-right"></el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="contractDetailFlowInfo.auditUsers" style="width: 100%" border stripe>
+        <el-table-column :label="$t('contractDetailFlow.serialNumber')" align="center">
+          <template #default="{ $index }">
+            {{ $index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('contractDetailFlow.processor')" align="center">
+          <template #default="{ row }">
+            {{ row.userName || row.auditName }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('contractDetailFlow.status')" align="center" />
+        <el-table-column prop="auditTime" :label="$t('contractDetailFlow.processTime')" align="center" />
+        <el-table-column prop="duration" :label="$t('contractDetailFlow.timeConsuming')" align="center" />
+        <el-table-column prop="message" :label="$t('contractDetailFlow.opinion')" align="center" />
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+import { listWorkflowAuditInfo } from '@/api/contract/contractDetailFlowApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailFlow',
+  data() {
+    return {
+      contractDetailFlowInfo: {
+        auditUsers: [],
+        contractId: '',
+        roomNum: '',
+        totalArea: '0'
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.contractDetailFlowInfo.contractId = data.contractId
+      this._loadContractDetailFlowInfoData()
+    },
+    _loadContractDetailFlowInfoData() {
+      const params = {
+        businessKey: this.contractDetailFlowInfo.contractId,
+        communityId: this.communityId
+      }
+
+      listWorkflowAuditInfo(params).then(response => {
+        this.contractDetailFlowInfo.auditUsers = response.data
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    switch(data) {
+      this.contractDetailFlowInfo.contractId = data.contractId
+      this._loadContractDetailFlowInfoData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 10px;
+}
+
+.padding-left-xl {
+  padding-left: 40px;
+}
+
+.padding-right-xl {
+  padding-right: 40px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailFlowDemo.vue b/src/components/contract/contractDetailFlowDemo.vue
new file mode 100644
index 0000000..9502288
--- /dev/null
+++ b/src/components/contract/contractDetailFlowDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-flow ref="contractDetailFlow"></contract-detail-flow>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailFlow from '@/components/contract/contractDetailFlow'
+
+export default {
+  components: {
+    ContractDetailFlow
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailFlow.switch({
+        contractId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailHisFee.vue b/src/components/contract/contractDetailHisFee.vue
new file mode 100644
index 0000000..d722e97
--- /dev/null
+++ b/src/components/contract/contractDetailHisFee.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="margin-top">
+    <el-table :data="contractDetailHisFeeInfo.feeDetails" style="width: 100%" border stripe>
+      <el-table-column prop="feeName" :label="$t('contractDetailHisFee.feeItem')" align="center"></el-table-column>
+      <el-table-column prop="payerObjName" :label="$t('contractDetailHisFee.payer')" align="center"></el-table-column>
+      <el-table-column prop="cycles" :label="$t('contractDetailHisFee.cycle')" align="center"></el-table-column>
+      <el-table-column :label="$t('contractDetailHisFee.receivableAmount')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.receivableAmount }}/{{ scope.row.receivedAmount }}<br>
+          <div v-if="scope.row.acctAmount > 0">
+            {{ $t('contractDetailHisFee.accountDeduction') }}: {{ scope.row.acctAmount }}<br>
+          </div>
+          <div v-for="(item, index) in scope.row.payFeeDetailDiscountDtoList" :key="index">
+            {{ item.discountName }}: {{ Math.abs(item.discountPrice) }}<br>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column prop="primeRateName" :label="$t('contractDetailHisFee.paymentMethod')"
+        align="center"></el-table-column>
+      <el-table-column :label="$t('contractDetailHisFee.paymentPeriod')" align="center">
+        <template slot-scope="scope">
+          {{ $options.filters.dateFormat(scope.row.startTime) }}~<br />
+          {{ $options.filters.dateFormat(scope.row.endTime) }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="createTime" :label="$t('contractDetailHisFee.paymentTime')"
+        align="center"></el-table-column>
+      <el-table-column prop="cashierName" :label="$t('contractDetailHisFee.cashier')" align="center">
+        <template slot-scope="scope">
+          {{ scope.row.cashierName || '-' }}
+        </template>
+      </el-table-column>
+      <el-table-column prop="stateName" :label="$t('contractDetailHisFee.status')" align="center"></el-table-column>
+      <el-table-column prop="remark" :label="$t('contractDetailHisFee.remark')" align="center"></el-table-column>
+      <el-table-column :label="$t('contractDetailHisFee.operation')" align="center">
+        <template slot-scope="scope">
+          <el-button v-if="scope.row.state == '1400' || scope.row.state == '1200' || scope.row.state == ''" size="mini"
+            @click="_toRefundFee(scope.row)">
+            {{ $t('contractDetailHisFee.detail') }}
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination @current-change="handlePageChange" :current-page="pagination.currentPage"
+      :page-size="pagination.pageSize" layout="total, prev, pager, next" :total="pagination.total"
+      class="margin-top"></el-pagination>
+  </div>
+</template>
+
+<script>
+import { queryFeeDetail } from '@/api/contract/contractDetailHisFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailHisFee',
+  data() {
+    return {
+      contractDetailHisFeeInfo: {
+        total: 0,
+        records: 1,
+        feeDetails: [],
+        contractId: ''
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.contractDetailHisFeeInfo.contractId = data.contractId
+      this._listContractDetailHisFeeDetails(1, this.pagination.pageSize)
+    },
+    _listContractDetailHisFeeDetails(page, row) {
+      const params = {
+        page: page || 1,
+        row: row || 10,
+        communityId: this.communityId,
+        payerObjId: this.contractDetailHisFeeInfo.contractId,
+      }
+
+      queryFeeDetail(params).then(response => {
+        this.contractDetailHisFeeInfo.total = response.total
+        this.contractDetailHisFeeInfo.records = response.records
+        this.contractDetailHisFeeInfo.feeDetails = response.feeDetails
+        this.pagination.total = response.total
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    clearContractDetailHisFeeInfo() {
+      this.contractDetailHisFeeInfo = {
+        total: 0,
+        records: 1,
+        feeDetails: [],
+        contractId: ''
+      }
+    },
+    _toRefundFee(detail) {
+      this.$router.push(`/property/propertyFee?feeId=${detail.feeId}`)
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this._listContractDetailHisFeeDetails(currentPage, this.pagination.pageSize)
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailHisFeeDemo.vue b/src/components/contract/contractDetailHisFeeDemo.vue
new file mode 100644
index 0000000..1a03fc7
--- /dev/null
+++ b/src/components/contract/contractDetailHisFeeDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-his-fee ref="contractDetailHisFee"></contract-detail-his-fee>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailHisFee from '@/components/contract/contractDetailHisFee'
+
+export default {
+  components: {
+    ContractDetailHisFee
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailHisFee._listContractDetailHisFeeDetails({
+        contractId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailHisRoomFee.vue b/src/components/contract/contractDetailHisRoomFee.vue
new file mode 100644
index 0000000..7335168
--- /dev/null
+++ b/src/components/contract/contractDetailHisRoomFee.vue
@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <div class="margin-top">
+      <el-table :data="contractDetailHisRoomFeeInfo.feeDetails" style="width: 100%; margin-top: 10px" border stripe>
+        <el-table-column prop="feeName" :label="$t('contractDetailHisRoomFee.feeItem')" align="center" />
+        <el-table-column prop="payerObjName" :label="$t('contractDetailHisRoomFee.payerObject')" align="center" />
+        <el-table-column prop="cycles" :label="$t('contractDetailHisRoomFee.cycle')" align="center" />
+        <el-table-column :label="$t('contractDetailHisRoomFee.receivableAmount')" align="center">
+          <template #default="{ row }">
+            {{ row.receivableAmount }}/{{ row.receivedAmount }}<br>
+            <div v-if="row.acctAmount > 0">
+              {{ $t('contractDetailHisRoomFee.accountDeduction') }}: {{ row.acctAmount }}<br>
+            </div>
+            <div v-for="(item, index) in row.payFeeDetailDiscountDtoList" :key="index">
+              {{ item.discountName }}: {{ Math.abs(item.discountPrice) }}<br>
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="primeRateName" :label="$t('contractDetailHisRoomFee.paymentMethod')" align="center" />
+        <el-table-column :label="$t('contractDetailHisRoomFee.paymentPeriod')" align="center">
+          <template #default="{ row }">
+            {{ dateFormat(row.startTime) }}~<br>
+            {{ dateFormat(row.endTime) }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('contractDetailHisRoomFee.paymentTime')" align="center" />
+        <el-table-column prop="cashierName" :label="$t('contractDetailHisRoomFee.cashier')" align="center">
+          <template #default="{ row }">
+            {{ row.cashierName || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="stateName" :label="$t('contractDetailHisRoomFee.status')" align="center" />
+        <el-table-column prop="remark" :label="$t('contractDetailHisRoomFee.remark')" align="center" />
+        <el-table-column :label="$t('contractDetailHisRoomFee.operation')" align="center">
+          <template #default="{ row }">
+            <el-button v-if="row.state == '1400' || row.state == '1200' || row.state == ''" type="text" size="small"
+              @click="_toRefundFee(row)">
+              {{ $t('contractDetailHisRoomFee.detail') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination class="pagination" layout="total, sizes, prev, pager, next, jumper"
+        :total="contractDetailHisRoomFeeInfo.total" :page-size="pageSize" @current-change="handleCurrentChange"
+        @size-change="handleSizeChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryFeeDetail } from '@/api/contract/contractDetailHisRoomFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailHisRoomFee',
+  data() {
+    return {
+      contractDetailHisRoomFeeInfo: {
+        total: 0,
+        records: 1,
+        feeDetails: [],
+        ownerId: ''
+      },
+      pageSize: 10,
+      currentPage: 1,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.contractDetailHisRoomFeeInfo.ownerId = data.ownerId
+      this._listContractDetailHisRoomFeeDetails()
+    },
+    dateFormat(date) {
+      return this.$moment(date).format('YYYY-MM-DD')
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listContractDetailHisRoomFeeDetails()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this._listContractDetailHisRoomFeeDetails()
+    },
+    _listContractDetailHisRoomFeeDetails() {
+      const params = {
+        page: this.currentPage,
+        row: this.pageSize,
+        communityId: this.communityId,
+        ownerId: this.contractDetailHisRoomFeeInfo.ownerId,
+        payerObjType: '3333'
+      }
+
+      queryFeeDetail(params).then(response => {
+        this.contractDetailHisRoomFeeInfo.total = response.total
+        this.contractDetailHisRoomFeeInfo.records = response.records
+        this.contractDetailHisRoomFeeInfo.feeDetails = response.feeDetails
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    clearContractDetailHisRoomFeeInfo() {
+      this.contractDetailHisRoomFeeInfo = {
+        total: 0,
+        records: 1,
+        feeDetails: [],
+        ownerId: ''
+      }
+    },
+    _toRefundFee(detail) {
+      this.$router.push(`/pages/property/propertyFee?feeId=${detail.feeId}`)
+    },
+    switch(param) {
+      this.clearContractDetailHisRoomFeeInfo()
+      if (param.ownerId === '') {
+        return
+      }
+      Object.assign(this.contractDetailHisRoomFeeInfo, param)
+      this._listContractDetailHisRoomFeeDetails()
+    },
+    notify() {
+      this._listContractDetailHisRoomFeeDetails()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailHisRoomFeeDemo.vue b/src/components/contract/contractDetailHisRoomFeeDemo.vue
new file mode 100644
index 0000000..cfa9338
--- /dev/null
+++ b/src/components/contract/contractDetailHisRoomFeeDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-his-room-fee ref="contractDetailHisRoomFee"></contract-detail-his-room-fee>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailHisRoomFee from '@/components/contract/contractDetailHisRoomFee'
+
+export default {
+  components: {
+    ContractDetailHisRoomFee
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailHisRoomFee.switch({
+        ownerId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailOwner.vue b/src/components/contract/contractDetailOwner.vue
new file mode 100644
index 0000000..7c1958c
--- /dev/null
+++ b/src/components/contract/contractDetailOwner.vue
@@ -0,0 +1,216 @@
+<template>
+  <div>
+    <el-row>
+      <el-col :span="24" class="text-right"></el-col>
+    </el-row>
+
+    <div class="margin-top">
+      <el-table :data="contractDetailOwnerInfo.owners" border style="width: 100%"
+        :default-sort="{ prop: 'name', order: 'ascending' }">
+        <el-table-column prop="url" :label="$t('contractDetailOwner.ownerFace')" width="100" align="center">
+          <template slot-scope="scope">
+            <el-image style="width: 60px; height: 60px;" class="border-radius"
+              :src="scope.row.url || '/img/noPhoto.jpg'" :preview-src-list="[scope.row.url]" v-if="scope.row.url">
+            </el-image>
+            <img v-else style="width: 60px; height: 60px;" class="border-radius" src="/img/noPhoto.jpg" />
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" :label="$t('contractDetailOwner.name')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.name }}({{ scope.row.link }})
+          </template>
+        </el-table-column>
+        <el-table-column prop="sex" :label="$t('contractDetailOwner.sex')" width="80" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.sex == 0 ? $t('common.male') : $t('common.female') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="idCard" :label="$t('contractDetailOwner.idCard')" width="180" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.idCard || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="address" :label="$t('contractDetailOwner.address')" width="200" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.address || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomCount" :label="$t('contractDetailOwner.roomCount')" width="100" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewOwnerRooms(scope.row)">
+              {{ scope.row.roomCount || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="memberCount" :label="$t('contractDetailOwner.memberCount')" width="100" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewOwnerMembers(scope.row)">
+              {{ scope.row.memberCount || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="carCount" :label="$t('contractDetailOwner.carCount')" width="100" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewOwnerCars(scope.row)">
+              {{ scope.row.carCount || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="complaintCount" :label="$t('contractDetailOwner.complaintCount')" width="100"
+          align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewComplaints(scope.row)">
+              {{ scope.row.complaintCount || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="repairCount" :label="$t('contractDetailOwner.repairCount')" width="100" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewRepairs(scope.row)">
+              {{ scope.row.repairCount || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="oweFee" :label="$t('contractDetailOwner.oweFee')" width="120" align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewOweFees(scope.row)">
+              {{ scope.row.oweFee || '0.00' }}
+            </el-link>
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractCount" :label="$t('contractDetailOwner.contractCount')" width="120"
+          align="center">
+          <template slot-scope="scope">
+            <el-link type="primary" @click="_viewRoomContracts(scope.row)">
+              {{ scope.row.contractCount || 0 }}
+            </el-link>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="text-right">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+
+    <owner-rooms ref="ownerRooms"></owner-rooms>
+    <owner-members ref="ownerMembers"></owner-members>
+    <owner-cars ref="ownerCars"></owner-cars>
+    <owner-complaints ref="ownerComplaints"></owner-complaints>
+    <owner-repairs ref="ownerRepairs"></owner-repairs>
+    <owner-owe-fees ref="ownerOweFees"></owner-owe-fees>
+    <room-contracts ref="roomContracts"></room-contracts>
+    <view-image ref="viewImage"></view-image>
+  </div>
+</template>
+
+<script>
+import OwnerRooms from '@/components/owner/ownerRooms'
+import OwnerMembers from '@/components/owner/ownerMembers'
+import OwnerCars from '@/components/owner/ownerCars'
+import OwnerComplaints from '@/components/owner/ownerComplaints'
+import OwnerRepairs from '@/components/owner/ownerRepairs'
+import OwnerOweFees from '@/components/owner/ownerOweFees'
+import RoomContracts from '@/components/room/roomContracts'
+import ViewImage from '@/components/system/viewImage'
+import { queryOwners } from '@/api/contract/contractDetailOwnerApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailOwner',
+  components: {
+    OwnerRooms,
+    OwnerMembers,
+    OwnerCars,
+    OwnerComplaints,
+    OwnerRepairs,
+    OwnerOweFees,
+    RoomContracts,
+    ViewImage
+  },
+  data() {
+    return {
+      contractDetailOwnerInfo: {
+        owners: [],
+        ownerId: ''
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(params) {
+      this.contractDetailOwnerInfo.ownerId = params.ownerId
+      this._loadContractDetailOwnerData(this.currentPage, this.pageSize)
+    },
+    _loadContractDetailOwnerData(page, row) {
+      const param = {
+        ownerId: this.contractDetailOwnerInfo.ownerId,
+        communityId: this.communityId,
+        ownerTypeCd: '1001',
+        page: page,
+        row: row
+      }
+
+      queryOwners(param)
+        .then(response => {
+          this.contractDetailOwnerInfo.owners = response.data
+          this.total = response.records
+          this.currentPage = page
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this._loadContractDetailOwnerData(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadContractDetailOwnerData(this.currentPage, this.pageSize)
+    },
+    _viewOwnerRooms(owner) {
+      this.$refs.ownerRooms.open(owner)
+    },
+    _viewOwnerMembers(owner) {
+      this.$refs.ownerMembers.open(owner)
+    },
+    _viewOwnerCars(owner) {
+      this.$refs.ownerCars.open(owner)
+    },
+    _viewComplaints(owner) {
+      this.$refs.ownerComplaints.open(owner)
+    },
+    _viewRepairs(owner) {
+      this.$refs.ownerRepairs.open(owner)
+    },
+    _viewOweFees(owner) {
+      this.$refs.ownerOweFees.open(owner)
+    },
+    _viewRoomContracts(owner) {
+      this.$refs.roomContracts.open(owner)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailOwnerDemo.vue b/src/components/contract/contractDetailOwnerDemo.vue
new file mode 100644
index 0000000..3a79240
--- /dev/null
+++ b/src/components/contract/contractDetailOwnerDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-owner ref="contractDetailOwner"></contract-detail-owner>
+    <el-button @click="switchOwner">Switch Owner</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailOwner from '@/components/contract/contractDetailOwner'
+
+export default {
+  components: {
+    ContractDetailOwner
+  },
+  methods: {
+    switchOwner() {
+      this.$refs.contractDetailOwner.switch({
+        ownerId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailReceipt.vue b/src/components/contract/contractDetailReceipt.vue
new file mode 100644
index 0000000..c7771ca
--- /dev/null
+++ b/src/components/contract/contractDetailReceipt.vue
@@ -0,0 +1,197 @@
+<template>
+  <div>
+    <div class="flex justify-end">
+      <div :span="12" class="padding-right-xs padding-left-xl"></div>
+      <div :span="12" class="text-right padding-right-lg">
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_printFeeReceipt()">
+          {{ $t('contractDetailReceipt.print') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_printFeeSmallReceipt()">
+          {{ $t('contractDetailReceipt.printSmall') }}
+        </el-button>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="_printApplyFeeReceipt()">
+          {{ $t('contractDetailReceipt.printApply') }}
+        </el-button>
+      </div>
+    </div>
+
+    <div class="margin-top">
+      <el-table :data="contractDetailReceiptInfo.feeReceipts" border style="width: 100%">
+        <el-table-column width="50" align="center">
+          <template slot-scope="scope">
+            <el-checkbox v-model="contractDetailReceiptInfo.selectReceipts" :label="scope.row.receiptId"></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column prop="objName" :label="$t('contractDetailReceipt.feeType')" align="center"></el-table-column>
+        <el-table-column prop="payObjName" :label="$t('contractDetailReceipt.owner')" align="center"></el-table-column>
+        <el-table-column prop="feeName" :label="$t('contractDetailReceipt.feeItem')" align="center"></el-table-column>
+        <el-table-column :label="$t('contractDetailReceipt.feePeriod')" align="center" width="200">
+          <template slot-scope="scope">
+            {{ $dayjs(scope.row.startTime).format('YYYY-MM-DD') }}~<br />
+            {{ $dayjs(scope.row.endTime).format('YYYY-MM-DD') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" :label="$t('contractDetailReceipt.totalAmount')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.amount }}{{ $t('common.yuan') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('contractDetailReceipt.payTime')" align="center"
+          width="160"></el-table-column>
+        <el-table-column prop="receiptId" :label="$t('contractDetailReceipt.receiptId')" align="center"
+          width="120"></el-table-column>
+      </el-table>
+
+      <el-row class="margin-top">
+        <el-col :span="24" class="text-right">
+          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
+            :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="pageSize"
+            layout="total, sizes, prev, pager, next, jumper" :total="total">
+          </el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryFeeReceipt, listFeePrintPage } from '@/api/contract/contractDetailReceiptApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailReceipt',
+  data() {
+    return {
+      contractDetailReceiptInfo: {
+        feeReceipts: [],
+        payObjId: '',
+        selectReceipts: [],
+        printUrl: '/print.html#/pages/property/printPayFee'
+      },
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this._listFeePrintPages()
+  },
+  watch: {
+    'contractDetailReceiptInfo.selectReceipts': {
+      handler(newVal) {
+        if (newVal.length === this.contractDetailReceiptInfo.feeReceipts.length) {
+          this.contractDetailReceiptInfo.quan = true
+        } else {
+          this.contractDetailReceiptInfo.quan = false
+        }
+      },
+      deep: true
+    }
+  },
+  methods: {
+    open(data) {
+      this.contractDetailReceiptInfo.payObjId = data.ownerId
+      this._listContractDetailReceipt(this.currentPage, this.pageSize)
+    },
+    switch(params) {
+      if (!params.ownerId) return
+      this.contractDetailReceiptInfo.payObjId = params.ownerId
+      this._listContractDetailReceipt(this.currentPage, this.pageSize)
+    },
+    _listContractDetailReceipt(page, rows) {
+      this.contractDetailReceiptInfo.selectReceipts = []
+      const param = {
+        page: page,
+        row: rows,
+        payObjId: this.contractDetailReceiptInfo.payObjId,
+        communityId: this.communityId
+      }
+
+      queryFeeReceipt(param)
+        .then(response => {
+          this.contractDetailReceiptInfo.feeReceipts = response.data
+          this.total = response.records
+          this.currentPage = page
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this._listContractDetailReceipt(this.currentPage, this.pageSize)
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._listContractDetailReceipt(this.currentPage, this.pageSize)
+    },
+    _printFeeReceipt() {
+      if (this.contractDetailReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('contractDetailReceipt.selectPrintReceipt'))
+        return
+      }
+      const receiptIds = this.contractDetailReceiptInfo.selectReceipts.join(',')
+      window.open(`${this.contractDetailReceiptInfo.printUrl}?receiptIds=${receiptIds}&apply=N`)
+    },
+    _printApplyFeeReceipt() {
+      if (this.contractDetailReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('contractDetailReceipt.selectPrint'))
+        return
+      }
+      const receiptIds = this.contractDetailReceiptInfo.selectReceipts.join(',')
+      window.open(`/print.html#/pages/property/printPayFee?receiptIds=${receiptIds}&apply=Y`)
+    },
+    _printFeeSmallReceipt() {
+      if (this.contractDetailReceiptInfo.selectReceipts.length < 1) {
+        this.$message.warning(this.$t('contractDetailReceipt.selectPrintReceipt'))
+        return
+      }
+      const receiptIds = this.contractDetailReceiptInfo.selectReceipts.join(',')
+      window.open(`/smallPrint.html#/pages/property/printSmallPayFee?receiptIds=${receiptIds}`)
+    },
+    _listFeePrintPages() {
+      const param = {
+        page: 1,
+        row: 1,
+        state: 'T',
+        communityId: this.communityId
+      }
+
+      listFeePrintPage(param)
+        .then(response => {
+          const feePrintPages = response.data
+          if (feePrintPages && feePrintPages.length > 0) {
+            this.contractDetailReceiptInfo.printUrl = feePrintPages[0].url
+          }
+        })
+        .catch(error => {
+          console.error('请求失败:', error)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-left-xl {
+  padding-left: 30px;
+}
+
+.padding-right-lg {
+  padding-right: 30px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailReceiptDemo.vue b/src/components/contract/contractDetailReceiptDemo.vue
new file mode 100644
index 0000000..6600e1f
--- /dev/null
+++ b/src/components/contract/contractDetailReceiptDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-receipt ref="contractDetailReceipt"></contract-detail-receipt>
+    <el-button @click="switchOwner">Switch Owner</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailReceipt from '@/components/contract/contractDetailReceipt'
+
+export default {
+  components: {
+    ContractDetailReceipt
+  },
+  methods: {
+    switchOwner() {
+      this.$refs.contractDetailReceipt.switch({
+        ownerId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailRoom.vue b/src/components/contract/contractDetailRoom.vue
new file mode 100644
index 0000000..fb3bc95
--- /dev/null
+++ b/src/components/contract/contractDetailRoom.vue
@@ -0,0 +1,153 @@
+<template>
+  <div class="margin-top">
+    <div class="flex justify-end">
+      <div :span="2" class="padding-right-xs padding-left-xl"></div>
+      <div :span="2" class="padding-right-xs padding-right-xl"></div>
+      <div :span="8" class="text-right">
+        <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502023021978930012')"
+          @click="_openAddContractRoom">
+          <i class="el-icon-plus"></i>
+          {{ $t('contractDetailRoom.addPropertyChange') }}
+        </el-button>
+      </div>
+    </div>
+    <div class="margin-top">
+      <el-table :data="contractDetailRoomInfo.rooms" style="width: 100%" border stripe>
+        <el-table-column prop="roomName" :label="$t('contractDetailRoom.room')" align="center"></el-table-column>
+        <el-table-column prop="layer" :label="$t('contractDetailRoom.floor')" align="center"></el-table-column>
+        <el-table-column prop="roomSubTypeName" :label="$t('contractDetailRoom.type')" align="center"></el-table-column>
+        <el-table-column :label="$t('contractDetailRoom.area')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.builtUpArea }}/{{ scope.row.roomArea }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="roomRent" :label="$t('contractDetailRoom.rent')" align="center"></el-table-column>
+        <el-table-column prop="stateName" :label="$t('contractDetailRoom.roomStatus')" align="center"></el-table-column>
+        <el-table-column :label="$t('contractDetailRoom.operation')" align="center">
+          <template slot-scope="scope">
+            <el-button v-if="scope.row.state != '2002'" size="mini" @click="_toSimplifyAcceptance(scope.row)">
+              {{ $t('contractDetailRoom.businessAcceptance') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-row class="margin-top">
+        <el-col :span="4">
+          <span>{{ $t('contractDetailRoom.contractArea') }}:</span>
+          {{ contractDetailRoomInfo.totalArea }}
+        </el-col>
+        <el-col :span="8" class="text-right">
+          <el-pagination @current-change="handlePageChange" :current-page="pagination.currentPage"
+            :page-size="pagination.pageSize" layout="total, prev, pager, next"
+            :total="pagination.total"></el-pagination>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryContractRoom } from '@/api/contract/contractDetailRoomApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailRoom',
+  data() {
+    return {
+      contractDetailRoomInfo: {
+        rooms: [],
+        contractId: '',
+        roomNum: '',
+        totalArea: '0'
+      },
+      pagination: {
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  methods: {
+    open(data) {
+      this.contractDetailRoomInfo.contractId = data.contractId
+      this._loadContractDetailRoomData(1, this.pagination.pageSize)
+    },
+    _loadContractDetailRoomData(page, row) {
+      const params = {
+        contractId: this.contractDetailRoomInfo.contractId,
+        page: page || 1,
+        row: row || 10
+      }
+
+      queryContractRoom(params).then(response => {
+        this.contractDetailRoomInfo.rooms = response.data
+        this._sumRoomArea()
+        this.pagination.total = response.total || 0
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _sumRoomArea() {
+      const rooms = this.contractDetailRoomInfo.rooms
+      if (!rooms || rooms.length < 1) {
+        this.contractDetailRoomInfo.totalArea = '0'
+        return '0'
+      }
+      let totalArea = 0
+      rooms.forEach(room => {
+        totalArea += parseFloat(room.builtUpArea)
+      })
+      this.contractDetailRoomInfo.totalArea = totalArea.toFixed(2)
+      return totalArea.toFixed(2)
+    },
+    _toSimplifyAcceptance(room) {
+      const date = new Date()
+      this.$store.dispatch('app/saveData', {
+        key: 'JAVA110_IS_BACK',
+        value: date.getTime()
+      })
+      this.$store.dispatch('app/saveData', {
+        key: 'simplifyAcceptanceSearch',
+        value: {
+          searchType: '1',
+          searchValue: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          searchPlaceholder: this.$t('contractDetailRoom.searchPlaceholder')
+        }
+      })
+      this.$router.push('/property/simplifyAcceptance?tab=businessAcceptance')
+    },
+    _openAddContractRoom() {
+      this.$router.push('/admin/contractChangeDetail?param=contractChangeAssets')
+    },
+    handlePageChange(currentPage) {
+      this.pagination.currentPage = currentPage
+      this._loadContractDetailRoomData(currentPage, this.pagination.pageSize)
+    },
+  },
+  created() {
+    this.communityId = getCommunityId()
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 5px;
+}
+
+.padding-left-xl {
+  padding-left: 20px;
+}
+
+.text-right {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailRoomDemo.vue b/src/components/contract/contractDetailRoomDemo.vue
new file mode 100644
index 0000000..15e78ea
--- /dev/null
+++ b/src/components/contract/contractDetailRoomDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-room ref="contractDetailRoom"></contract-detail-room>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailRoom from '@/components/contract/contractDetailRoom'
+
+export default {
+  components: {
+    ContractDetailRoom
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailRoom._loadContractDetailRoomData({
+        contractId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailSub.vue b/src/components/contract/contractDetailSub.vue
new file mode 100644
index 0000000..be7fc86
--- /dev/null
+++ b/src/components/contract/contractDetailSub.vue
@@ -0,0 +1,146 @@
+<template>
+  <div class="margin-top">
+    <el-row :gutter="20" class="margin-top-lg">
+      <el-col :span="2" class="padding-right-xs padding-left-xl"></el-col>
+      <el-col :span="2" class="padding-right-xs padding-right-xl"></el-col>
+      <el-col :span="8" class="text-right"></el-col>
+    </el-row>
+    <div class="margin-top">
+      <el-table :data="contractDetailSubInfo.contracts" style="width: 100%" border stripe>
+        <el-table-column prop="contractName" :label="$t('contractDetailSub.contractName')" align="center" />
+        <el-table-column prop="contractCode" :label="$t('contractDetailSub.contractCode')" align="center" />
+        <el-table-column :label="$t('contractDetailSub.parentContractCode')" align="center">
+          <template #default="{ row }">
+            {{ row.parentContractCode || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="contractTypeName" :label="$t('contractDetailSub.contractType')" align="center" />
+        <el-table-column :label="$t('contractDetailSub.operator')" align="center">
+          <template #default="{ row }">
+            {{ row.operator }}({{ row.operatorLink }})
+          </template>
+        </el-table-column>
+        <el-table-column prop="amount" :label="$t('contractDetailSub.contractAmount')" align="center" />
+        <el-table-column :label="$t('contractDetailSub.contractPartyB')" align="center">
+          <template #default="{ row }">
+            {{ row.partyB }}({{ row.bLink }})
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('contractDetailSub.validityPeriod')" align="center">
+          <template #default="{ row }">
+            {{ row.startTime }}<br>
+            ~{{ row.endTime }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="createTime" :label="$t('contractDetailSub.draftTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('contractDetailSub.status')" align="center" />
+        <el-table-column :label="$t('contractDetailSub.operation')" align="center">
+          <template #default="{ row }">
+            <el-button type="text" size="small" @click="_viewContract(row)">
+              {{ $t('contractDetailSub.view') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <el-pagination class="pagination" layout="total, sizes, prev, pager, next, jumper" :total="total"
+        :page-size="pageSize" @current-change="handleCurrentChange" @size-change="handleSizeChange" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { queryContract } from '@/api/contract/contractDetailSubApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractDetailSub',
+  data() {
+    return {
+      contractDetailSubInfo: {
+        contracts: [],
+        contractId: '',
+        roomNum: '',
+        totalArea: '0',
+        total: 0,
+        records: 0
+      },
+      pageSize: 10,
+      currentPage: 1,
+      total: 0,
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+  },
+  methods: {
+    open(data) {
+      this.contractDetailSubInfo.contractId = data.contractId
+      this._loadContractDetailSubInfoData()
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val
+      this._loadContractDetailSubInfoData()
+    },
+    handleSizeChange(val) {
+      this.pageSize = val
+      this._loadContractDetailSubInfoData()
+    },
+    _loadContractDetailSubInfoData() {
+      const params = {
+        contractParentId: this.contractDetailSubInfo.contractId,
+        communityId: this.communityId,
+        page: this.currentPage,
+        row: this.pageSize
+      }
+
+      queryContract(params).then(response => {
+        this.contractDetailSubInfo.contracts = response.data
+        this.contractDetailSubInfo.total = response.total
+        this.contractDetailSubInfo.records = response.records
+        this.total = response.records
+      }).catch(error => {
+        console.error('请求失败:', error)
+      })
+    },
+    _viewContract(contract) {
+      this.$router.push(`/pages/contract/contractDetail?contractId=${contract.contractId}`)
+    },
+    switch(data) {
+      this.contractDetailSubInfo.contractId = data.contractId
+      this._loadContractDetailSubInfoData()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-lg {
+  margin-top: 30px;
+}
+
+.padding-right-xs {
+  padding-right: 10px;
+}
+
+.padding-left-xl {
+  padding-left: 40px;
+}
+
+.padding-right-xl {
+  padding-right: 40px;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.pagination {
+  margin-top: 20px;
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/contract/contractDetailSubDemo.vue b/src/components/contract/contractDetailSubDemo.vue
new file mode 100644
index 0000000..ea80dae
--- /dev/null
+++ b/src/components/contract/contractDetailSubDemo.vue
@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <contract-detail-sub ref="contractDetailSub"></contract-detail-sub>
+    <el-button @click="switchContract">Switch Contract</el-button>
+  </div>
+</template>
+
+<script>
+import ContractDetailSub from '@/components/contract/contractDetailSub'
+
+export default {
+  components: {
+    ContractDetailSub
+  },
+  methods: {
+    switchContract() {
+      this.$refs.contractDetailSub.switch({
+        contractId: '12345'
+      })
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/owner/ownerDetailRoom.vue b/src/components/owner/ownerDetailRoom.vue
index 19218b4..cc73f15 100644
--- a/src/components/owner/ownerDetailRoom.vue
+++ b/src/components/owner/ownerDetailRoom.vue
@@ -158,8 +158,9 @@ export default {
       this.ownerDetailRoomInfo.allOweFeeAmount = totalOweFeeAmount.toFixed(2)
     },
     _openAddOwnerRoom() {
+      console.log(this.ownerDetailRoomInfo.ownerId)
       this.$router.push({
-        path: '/property/addOwnerRoomBinding',
+        path: '/views/owner/ownerBindRoom',
         query: { ownerId: this.ownerDetailRoomInfo.ownerId }
       })
     },
diff --git a/src/components/owner/ownerDetailRoomFee.vue b/src/components/owner/ownerDetailRoomFee.vue
index d817dd8..c7f730e 100644
--- a/src/components/owner/ownerDetailRoomFee.vue
+++ b/src/components/owner/ownerDetailRoomFee.vue
@@ -1,22 +1,22 @@
 <template>
   <div class="margin-top">
-    <el-row class="margin-top-lg">
-      <el-col :span="12" class="padding-right-xs padding-left-xl">
+    <div class="flex justify-end">
+      <div  class="padding-right-xs padding-left-xl">
         <span class="margin-right" v-for="(item, index) in ownerDetailRoomFeeInfo.payObjs" :key="index">
           <el-checkbox class="checkRoomItem" v-model="ownerDetailRoomFeeInfo.payerObjIds" :label="item.roomId"
             @change="_chanagePayerObjId()">
             {{ item.floorNum }}-{{ item.unitNum }}-{{ item.roomNum }}
           </el-checkbox>
         </span>
-      </el-col>
-      <el-col :span="3" class="padding-lr-xs">
+      </div>
+      <div  class="padding-lr-xs">
         <el-select v-model="ownerDetailRoomFeeInfo.state" @change="_changeContractConfigId()" size="small"
           :placeholder="$t('ownerDetailRoomFee.selectStatus')">
           <el-option :label="$t('ownerDetailRoomFee.valid')" value="2008001"></el-option>
           <el-option :label="$t('ownerDetailRoomFee.feeEnd')" value="2009001"></el-option>
         </el-select>
-      </el-col>
-      <el-col :span="9" class="text-right">
+      </div>
+      <div :span="9" class="text-right">
         <el-button type="primary" size="small" style="margin-left:10px" v-if="hasPrivilege('502020082314267912')"
           @click="_openBatchPayRoomFeeModal()">
           {{ $t('ownerDetailRoomFee.batchPay') }}
@@ -40,8 +40,8 @@
         <el-button type="default" size="small" style="margin-left:10px" @click="_printOwnOrder()">
           {{ $t('ownerDetailRoomFee.reminder') }}
         </el-button>
-      </el-col>
-    </el-row>
+      </div>
+    </div>
     <div class="margin-top">
       <el-table :data="ownerDetailRoomFeeInfo.fees" style="width: 100%">
         <el-table-column prop="payerObjName" :label="$t('ownerDetailRoomFee.room')" align="center"></el-table-column>
@@ -135,25 +135,25 @@
       </el-row>
     </div>
 
-    <rooms-import-temp-fee ref="roomsImportTempFee"></rooms-import-temp-fee>
-    <rooms-create-fee ref="roomsCreateFee"></rooms-create-fee>
-    <rooms-proxy-fee ref="roomsProxyFee"></rooms-proxy-fee>
+    <!-- <rooms-import-temp-fee ref="roomsImportTempFee"></rooms-import-temp-fee> -->
+    <!-- <rooms-create-fee ref="roomsCreateFee"></rooms-create-fee> -->
+    <!-- <rooms-proxy-fee ref="roomsProxyFee"></rooms-proxy-fee> -->
   </div>
 </template>
 
 <script>
-import RoomsImportTempFee from '@/components/fee/roomsImportTempFee'
-import RoomsCreateFee from '@/components/fee/roomsCreateFee'
-import RoomsProxyFee from '@/components/fee/roomsProxyFee'
+// import RoomsImportTempFee from '@/components/fee/roomsImportTempFee'
+// import RoomsCreateFee from '@/components/fee/roomsCreateFee'
+// import RoomsProxyFee from '@/components/fee/roomsProxyFee'
 import { listFee, listRoomsByOwner } from '@/api/owner/ownerDetailRoomFeeApi'
 import { getCommunityId } from '@/api/community/communityApi'
 
 export default {
   name: 'OwnerDetailRoomFee',
   components: {
-    RoomsImportTempFee,
-    RoomsCreateFee,
-    RoomsProxyFee
+    // RoomsImportTempFee,
+    // RoomsCreateFee,
+    // RoomsProxyFee
   },
   data() {
     return {
@@ -318,4 +318,4 @@ export default {
     })
   }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/src/i18n/contractI18n.js b/src/i18n/contractI18n.js
index 870198c..34bdac3 100644
--- a/src/i18n/contractI18n.js
+++ b/src/i18n/contractI18n.js
@@ -8,6 +8,7 @@ import { messages as contractManageMessages } from '../views/contract/contractMa
 import { messages as contractChangeManageMessages } from '../views/contract/contractChangeManageLang'
 import { messages as contractChangeDetailMessages } from '../views/contract/contractChangeDetailLang'
 import { messages as expirationContractManageMessages } from '../views/contract/expirationContractManageLang'
+import { messages as contractDetailMessages } from '../views/contract/contractDetailLang.js'
 
 export const messages ={
     en:{
@@ -21,6 +22,7 @@ export const messages ={
         ...contractChangeManageMessages.en,
         ...contractChangeDetailMessages.en,
         ...expirationContractManageMessages.en,
+        ...contractDetailMessages.en,
     },
     zh:{    
         ...contractTypeManageMessages.zh, 
@@ -33,5 +35,6 @@ export const messages ={
         ...contractChangeManageMessages.zh,
         ...contractChangeDetailMessages.zh,
         ...expirationContractManageMessages.zh,
-    }
+        ...contractDetailMessages.zh,
+}
 }
\ No newline at end of file
diff --git a/src/router/contractRouter.js b/src/router/contractRouter.js
index 8619be2..6696789 100644
--- a/src/router/contractRouter.js
+++ b/src/router/contractRouter.js
@@ -44,4 +44,9 @@ export default [
         name: '/pages/admin/expirationContractManage',
         component: () => import('@/views/contract/expirationContractManageList.vue')
     },
+    {
+        path: '/views/contract/contractDetail',
+        name: '/views/contract/contractDetail',
+        component: () => import('@/views/contract/contractDetail.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/contract/contractDetail.vue b/src/views/contract/contractDetail.vue
new file mode 100644
index 0000000..b358af5
--- /dev/null
+++ b/src/views/contract/contractDetail.vue
@@ -0,0 +1,291 @@
+<template>
+  <div class="white-bg padding-lg padding-top border-radius">
+    <div class="flex justify-between">
+      <div class="text-title">{{ $t('contractDetail.title') }}</div>
+      <div>
+        <el-button type="primary" size="small" style="margin-left:10px" @click="$router.go(-1)">
+          <i class="el-icon-close"></i>{{ $t('common.back') }}
+        </el-button>
+        <el-button type="primary" size="small" @click="_printContract">
+          <i class="el-icon-printer"></i>{{ $t('common.print') }}
+        </el-button>
+      </div>
+    </div>
+
+    <!-- 合同信息 -->
+    <div class="margin-top">
+      <el-form class="text-left">
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.contractName') + '：'">
+              <span>{{ contractDetailInfo.contractName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.contractCode') + '：'">
+              <span>{{ contractDetailInfo.contractCode }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.contractType') + '：'">
+              <span>{{ contractDetailInfo.contractTypeName }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.partyA') + '：'">
+              <span>{{ contractDetailInfo.partyA }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.aContacts') + '：'">
+              <span>{{ contractDetailInfo.aContacts }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.aLink') + '：'">
+              <span>{{ contractDetailInfo.aLink }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.partyB') + '：'">
+              <span>{{ contractDetailInfo.partyB }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.bContacts') + '：'">
+              <span>{{ contractDetailInfo.bContacts }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.bLink') + '：'">
+              <span>{{ contractDetailInfo.bLink }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.operator') + '：'">
+              <span>{{ contractDetailInfo.operator }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.operatorLink') + '：'">
+              <span>{{ contractDetailInfo.operatorLink }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.amount') + '：'">
+              <span>{{ contractDetailInfo.amount }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20">
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.startTime') + '：'">
+              <span>{{ contractDetailInfo.startTime }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.endTime') + '：'">
+              <span>{{ contractDetailInfo.endTime }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.signingTime') + '：'">
+              <span>{{ contractDetailInfo.signingTime }}</span>
+            </el-form-item>
+          </el-col>
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.status') + '：'">
+              <span>{{ contractDetailInfo.stateName }}</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="20" v-if="contractDetailInfo.contractParentId">
+          <el-col :span="6">
+            <el-form-item :label="$t('contractDetail.parentContract') + '：'">
+              <span>{{ contractDetailInfo.contractParentName }}({{ contractDetailInfo.contractParentCode }})</span>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-form>
+    </div>
+
+    <divider />
+    <div class="margin-top-sm">
+      <el-tabs v-model="contractDetailInfo._currentTab" @tab-click="changeTab(contractDetailInfo._currentTab)">
+        <el-tab-pane :label="$t('contractDetail.room')" name="contractDetailRoom"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.file')" name="contractDetailFile"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.fee')" name="contractDetailFee"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.hisFee')" name="contractDetailHisFee"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.roomFee')" name="ownerDetailRoomFee"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.hisRoomFee')" name="contractDetailHisRoomFee"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.ownerInfo')" name="contractDetailOwner"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.changeLog')" name="contractDetailChange"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.draftApproval')" name="contractDetailFlow"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.subContract')" name="contractDetailSub"></el-tab-pane>
+        <el-tab-pane :label="$t('contractDetail.receipt')" name="contractDetailReceipt"></el-tab-pane>
+      </el-tabs>
+    </div>
+
+    <component :is="contractDetailInfo._currentTab" :ref="contractDetailInfo._currentTab"
+      :contractId="contractDetailInfo.contractId" :contractName="contractDetailInfo.contractName"
+      :ownerId="contractDetailInfo.objId"></component>
+  </div>
+</template>
+
+<script>
+import ContractDetailRoom from '@/components/contract/contractDetailRoom'
+import ContractDetailFile from '@/components/contract/contractDetailFile'
+import ContractDetailFee from '@/components/contract/contractDetailFee'
+import ContractDetailHisFee from '@/components/contract/contractDetailHisFee'
+import OwnerDetailRoomFee from '@/components/owner/ownerDetailRoomFee'
+import ContractDetailHisRoomFee from '@/components/contract/contractDetailHisRoomFee'
+import ContractDetailChange from '@/components/contract/contractDetailChange'
+import ContractDetailFlow from '@/components/contract/contractDetailFlow'
+import ContractDetailSub from '@/components/contract/contractDetailSub'
+import ContractDetailOwner from '@/components/contract/contractDetailOwner'
+import ContractDetailReceipt from '@/components/contract/contractDetailReceipt'
+import { queryContract } from '@/api/contract/contractDetailApi'
+import Divider from '@/components/system/divider'
+
+export default {
+  name: 'ContractDetail',
+  components: {
+    ContractDetailRoom,
+    ContractDetailFile,
+    ContractDetailFee,
+    ContractDetailHisFee,
+    OwnerDetailRoomFee,
+    ContractDetailHisRoomFee,
+    ContractDetailChange,
+    ContractDetailFlow,
+    ContractDetailSub,
+    ContractDetailOwner,
+    ContractDetailReceipt,
+    Divider
+  },
+  data() {
+    return {
+      contractDetailInfo: {
+        contractId: '',
+        contractName: '',
+        contractCode: '',
+        contractType: '',
+        contractTypeName: '',
+        partyA: '',
+        partyB: '',
+        aContacts: '',
+        bContacts: '',
+        aLink: '',
+        bLink: '',
+        operator: '',
+        operatorLink: '',
+        amount: '',
+        startTime: '',
+        endTime: '',
+        signingTime: '',
+        param: '',
+        planType: '',
+        stateName: '',
+        contractParentId: '',
+        contractParentName: '',
+        contractParentCode: '',
+        objId: '',
+        files: [],
+        _currentTab: 'contractDetailRoom'
+      }
+    }
+  },
+  created() {
+    this.contractDetailInfo.contractId = this.$route.query.contractId
+    if (!this.contractDetailInfo.contractId) {
+      return
+    }
+    const currentTab = this.$route.query.currentTab
+    if (currentTab) {
+      this.contractDetailInfo._currentTab = currentTab
+    }
+    this._loadContractInfo()
+  },
+  methods: {
+    async _loadContractInfo() {
+      try {
+        const res = await queryContract({
+          page: 1,
+          row: 1,
+          contractId: this.contractDetailInfo.contractId
+        })
+        const contract = res.data[0]
+        Object.assign(this.contractDetailInfo, contract)
+        this.changeTab(this.contractDetailInfo._currentTab)
+      } catch (error) {
+        console.error('Failed to load contract info:', error)
+      }
+    },
+    changeTab(tab) {
+      this.contractDetailInfo._currentTab = tab
+      setTimeout(() => {
+        this.$refs[tab].open({
+          contractId: this.contractDetailInfo.contractId,
+          contractName: this.contractDetailInfo.contractName,
+          ownerId: this.contractDetailInfo.objId
+        })
+      }, 500)
+    },
+    _printContract() {
+      const contract = this.contractDetailInfo
+      window.open(`/print.html#/pages/admin/printContract?contractTypeId=${contract.contractType}&contractId=${contract.contractId}`)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.white-bg {
+  background-color: #fff;
+}
+
+.padding-lg {
+  padding: 20px;
+}
+
+.padding-top {
+  padding-top: 20px;
+}
+
+.border-radius {
+  border-radius: 4px;
+}
+
+.flex {
+  display: flex;
+}
+
+.justify-between {
+  justify-content: space-between;
+}
+
+.text-title {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+.margin-top {
+  margin-top: 20px;
+}
+
+.margin-top-sm {
+  margin-top: 10px;
+}
+
+.vc-line-primary {
+  border-top: 1px solid #409EFF;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contract/contractDetailChangeLang.js b/src/views/contract/contractDetailChangeLang.js
new file mode 100644
index 0000000..cfa26d4
--- /dev/null
+++ b/src/views/contract/contractDetailChangeLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    contractDetailChange: {
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      contractType: 'Contract Type',
+      partyA: 'Party A',
+      partyB: 'Party B',
+      changeType: 'Change Type',
+      changePerson: 'Change Person',
+      applyTime: 'Apply Time',
+      description: 'Description',
+      status: 'Status',
+      operation: 'Operation',
+      detail: 'Detail'
+    }
+  },
+  zh: {
+    contractDetailChange: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      contractType: '合同类型',
+      partyA: '甲方',
+      partyB: '乙方',
+      changeType: '变更类型',
+      changePerson: '变更人',
+      applyTime: '申请时间',
+      description: '说明',
+      status: '状态',
+      operation: '操作',
+      detail: '明细'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailFeeLang.js b/src/views/contract/contractDetailFeeLang.js
new file mode 100644
index 0000000..94e9608
--- /dev/null
+++ b/src/views/contract/contractDetailFeeLang.js
@@ -0,0 +1,66 @@
+export const messages = {
+  en: {
+    contractDetailFee: {
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      receivableAmount: 'Receivable Amount',
+      accountingTime: 'Accounting Time',
+      receivablePeriod: 'Receivable Period',
+      description: 'Description',
+      status: 'Status',
+      operation: 'Operation',
+      temporaryFee: 'Temporary Fee',
+      createFee: 'Create Fee',
+      payArrears: 'Pay Arrears',
+      payment: 'Payment',
+      paymentHistory: 'Payment History',
+      cancel: 'Cancel',
+      end: 'End',
+      change: 'Change',
+      previousReading: 'Previous Reading',
+      currentReading: 'Current Reading',
+      unitPrice: 'Unit Price',
+      surcharge: 'Surcharge',
+      usage: 'Usage',
+      algorithm: 'Algorithm',
+      fixedFee: 'Fixed Fee',
+      feeBasedOnActual: 'Fee based on actual situation',
+      note1: 'Note: "-" means not yet receivable or fee has ended',
+      note2: 'Receivable amount -1 usually means formula error',
+      arrearsSubtotal: 'Arrears Subtotal'
+    }
+  },
+  zh: {
+    contractDetailFee: {
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      receivableAmount: '应收金额',
+      accountingTime: '建账时间',
+      receivablePeriod: '应收时间段',
+      description: '说明',
+      status: '状态',
+      operation: '操作',
+      temporaryFee: '临时收费',
+      createFee: '创建费用',
+      payArrears: '欠费缴费',
+      payment: '缴费',
+      paymentHistory: '缴费历史',
+      cancel: '取消',
+      end: '结束',
+      change: '变更',
+      previousReading: '上期度数',
+      currentReading: '本期度数',
+      unitPrice: '单价',
+      surcharge: '附加费',
+      usage: '用量',
+      algorithm: '算法',
+      fixedFee: '固定费',
+      feeBasedOnActual: '费用根据实际情况而定',
+      note1: '注意：应收结束时间 "-" 表示未到应收时间或收费已结束',
+      note2: '应收金额为-1一般为费用项公式设置出错请检查',
+      arrearsSubtotal: '欠费小计'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailFileLang.js b/src/views/contract/contractDetailFileLang.js
new file mode 100644
index 0000000..73682a4
--- /dev/null
+++ b/src/views/contract/contractDetailFileLang.js
@@ -0,0 +1,12 @@
+export const messages = {
+  en: {
+    contractDetailFile: {
+      relatedFiles: 'Related Files'
+    }
+  },
+  zh: {
+    contractDetailFile: {
+      relatedFiles: '相关附件'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailFlowLang.js b/src/views/contract/contractDetailFlowLang.js
new file mode 100644
index 0000000..211ca7a
--- /dev/null
+++ b/src/views/contract/contractDetailFlowLang.js
@@ -0,0 +1,22 @@
+export const messages = {
+  en: {
+    contractDetailFlow: {
+      serialNumber: 'Serial Number',
+      processor: 'Processor',
+      status: 'Status',
+      processTime: 'Process Time',
+      timeConsuming: 'Time Consuming',
+      opinion: 'Opinion'
+    }
+  },
+  zh: {
+    contractDetailFlow: {
+      serialNumber: '序号',
+      processor: '处理人',
+      status: '状态',
+      processTime: '处理时间',
+      timeConsuming: '耗时',
+      opinion: '意见'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailHisFeeLang.js b/src/views/contract/contractDetailHisFeeLang.js
new file mode 100644
index 0000000..b2e277f
--- /dev/null
+++ b/src/views/contract/contractDetailHisFeeLang.js
@@ -0,0 +1,36 @@
+export const messages = {
+  en: {
+    contractDetailHisFee: {
+      feeItem: 'Fee Item',
+      payer: 'Payer',
+      cycle: 'Cycle(month)',
+      receivableAmount: 'Receivable/Received(¥)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    }
+  },
+  zh: {
+    contractDetailHisFee: {
+      feeItem: '费用项',
+      payer: '收费对象',
+      cycle: '周期(单位:月)',
+      receivableAmount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailHisRoomFeeLang.js b/src/views/contract/contractDetailHisRoomFeeLang.js
new file mode 100644
index 0000000..8a6407c
--- /dev/null
+++ b/src/views/contract/contractDetailHisRoomFeeLang.js
@@ -0,0 +1,36 @@
+export const messages = {
+  en: {
+    contractDetailHisRoomFee: {
+      feeItem: 'Fee Item',
+      payerObject: 'Payer Object',
+      cycle: 'Cycle (unit: month)',
+      receivableAmount: 'Receivable/Received (unit: yuan)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    }
+  },
+  zh: {
+    contractDetailHisRoomFee: {
+      feeItem: '费用项',
+      payerObject: '收费对象',
+      cycle: '周期(单位:月)',
+      receivableAmount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailLang.js b/src/views/contract/contractDetailLang.js
new file mode 100644
index 0000000..17a6a7b
--- /dev/null
+++ b/src/views/contract/contractDetailLang.js
@@ -0,0 +1,323 @@
+
+export const messages = {
+  en: {
+    contractDetail: {
+      title: 'Contract Information',
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      contractType: 'Contract Type',
+      partyA: 'Party A',
+      partyB: 'Party B',
+      aContacts: 'Party A Contact',
+      bContacts: 'Party B Contact',
+      aLink: 'Party A Phone',
+      bLink: 'Party B Phone',
+      operator: 'Operator',
+      operatorLink: 'Operator Phone',
+      amount: 'Contract Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      signingTime: 'Signing Time',
+      status: 'Status',
+      parentContract: 'Parent Contract',
+      room: 'Rooms',
+      file: 'Attachments',
+      fee: 'Contract Fees',
+      hisFee: 'Payment History',
+      roomFee: 'Room Fees',
+      hisRoomFee: 'Room Payment History',
+      ownerInfo: 'Owner Information',
+      changeLog: 'Change Log',
+      draftApproval: 'Draft Approval',
+      subContract: 'Sub Contracts',
+      receipt: 'Receipt Reprint'
+    },
+    contractDetailRoom: {
+      addPropertyChange: 'Property Change',
+      room: 'Room',
+      floor: 'Floor',
+      type: 'Type',
+      area: 'Area',
+      rent: 'Rent',
+      roomStatus: 'Room Status',
+      operation: 'Operation',
+      businessAcceptance: 'Business Acceptance',
+      contractArea: 'Contract Area',
+      searchPlaceholder: 'Please enter room number like 1-1-1'
+    },
+    contractDetailFile: {
+      relatedFiles: 'Related Files'
+    },
+    contractDetailFee: {
+      feeItem: 'Fee Item',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      receivableAmount: 'Receivable Amount',
+      accountingTime: 'Accounting Time',
+      receivablePeriod: 'Receivable Period',
+      description: 'Description',
+      status: 'Status',
+      operation: 'Operation',
+      temporaryFee: 'Temporary Fee',
+      createFee: 'Create Fee',
+      payArrears: 'Pay Arrears',
+      payment: 'Payment',
+      paymentHistory: 'Payment History',
+      cancel: 'Cancel',
+      end: 'End',
+      change: 'Change',
+      previousReading: 'Previous Reading',
+      currentReading: 'Current Reading',
+      unitPrice: 'Unit Price',
+      surcharge: 'Surcharge',
+      usage: 'Usage',
+      algorithm: 'Algorithm',
+      fixedFee: 'Fixed Fee',
+      feeBasedOnActual: 'Fee based on actual situation',
+      note1: 'Note: "-" means not yet receivable or fee has ended',
+      note2: 'Receivable amount -1 usually means formula error',
+      arrearsSubtotal: 'Arrears Subtotal'
+    },
+    contractDetailHisFee: {
+      feeItem: 'Fee Item',
+      payer: 'Payer',
+      cycle: 'Cycle(month)',
+      receivableAmount: 'Receivable/Received(¥)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    },
+    contractDetailHisRoomFee: {
+      feeItem: 'Fee Item',
+      payerObject: 'Payer Object',
+      cycle: 'Cycle (unit: month)',
+      receivableAmount: 'Receivable/Received (unit: yuan)',
+      paymentMethod: 'Payment Method',
+      paymentPeriod: 'Payment Period',
+      paymentTime: 'Payment Time',
+      cashier: 'Cashier',
+      status: 'Status',
+      remark: 'Remark',
+      operation: 'Operation',
+      detail: 'Detail',
+      accountDeduction: 'Account Deduction'
+    },
+   
+    contractDetailFlow: {
+      serialNumber: 'Serial Number',
+      processor: 'Processor',
+      status: 'Status',
+      processTime: 'Process Time',
+      timeConsuming: 'Time Consuming',
+      opinion: 'Opinion'
+    },
+    contractDetailSub: {
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      parentContractCode: 'Parent Contract Code',
+      contractType: 'Contract Type',
+      operator: 'Operator',
+      contractAmount: 'Contract Amount',
+      contractPartyB: 'Contract Party B',
+      validityPeriod: 'Validity Period',
+      draftTime: 'Draft Time',
+      status: 'Status',
+      operation: 'Operation',
+      view: 'View'
+    },
+    contractDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      sex: 'Sex',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract'
+    },
+    contractDetailReceipt: {
+      feeType: 'Fee Type',
+      owner: 'Owner',
+      feeItem: 'Fee Item',
+      feePeriod: 'Fee Period',
+      totalAmount: 'Total Amount',
+      payTime: 'Pay Time',
+      receiptId: 'Receipt ID',
+      print: 'Print',
+      printSmall: 'Print Small',
+      printApply: 'Apply',
+      selectPrintReceipt: 'Please select receipt to print',
+      selectPrint: 'Please select'
+    },
+  },
+  zh: {
+    contractDetail: {
+      title: '合同信息',
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      contractType: '合同类型',
+      partyA: '甲方',
+      partyB: '乙方',
+      aContacts: '甲方联系人',
+      bContacts: '乙方联系人',
+      aLink: '甲方联系电话',
+      bLink: '乙方联系电话',
+      operator: '经办人',
+      operatorLink: '联系电话',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      signingTime: '签订时间',
+      status: '状态',
+      parentContract: '父合同',
+      room: '房屋',
+      file: '附件',
+      fee: '合同费用',
+      hisFee: '合同缴费记录',
+      roomFee: '房屋费用',
+      hisRoomFee: '房屋缴费记录',
+      ownerInfo: '业主信息',
+      changeLog: '变更记录',
+      draftApproval: '起草审批',
+      subContract: '子合同',
+      receipt: '补打收据'
+    },
+    contractDetailRoom: {
+      addPropertyChange: '房产变更',
+      room: '房屋',
+      floor: '楼层',
+      type: '类型',
+      area: '面积',
+      rent: '租金',
+      roomStatus: '房屋状态',
+      operation: '操作',
+      businessAcceptance: '业务受理',
+      contractArea: '合同面积',
+      searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
+    },
+    contractDetailFile: {
+      relatedFiles: '相关附件'
+    },
+    contractDetailFee: {
+      feeItem: '费用项目',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      receivableAmount: '应收金额',
+      accountingTime: '建账时间',
+      receivablePeriod: '应收时间段',
+      description: '说明',
+      status: '状态',
+      operation: '操作',
+      temporaryFee: '临时收费',
+      createFee: '创建费用',
+      payArrears: '欠费缴费',
+      payment: '缴费',
+      paymentHistory: '缴费历史',
+      cancel: '取消',
+      end: '结束',
+      change: '变更',
+      previousReading: '上期度数',
+      currentReading: '本期度数',
+      unitPrice: '单价',
+      surcharge: '附加费',
+      usage: '用量',
+      algorithm: '算法',
+      fixedFee: '固定费',
+      feeBasedOnActual: '费用根据实际情况而定',
+      note1: '注意：应收结束时间 "-" 表示未到应收时间或收费已结束',
+      note2: '应收金额为-1一般为费用项公式设置出错请检查',
+      arrearsSubtotal: '欠费小计'
+    },
+    contractDetailHisFee: {
+      feeItem: '费用项',
+      payer: '收费对象',
+      cycle: '周期(单位:月)',
+      receivableAmount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    },
+    contractDetailHisRoomFee: {
+      feeItem: '费用项',
+      payerObject: '收费对象',
+      cycle: '周期(单位:月)',
+      receivableAmount: '应收/实收(单位:元)',
+      paymentMethod: '缴费方式',
+      paymentPeriod: '缴费起始段',
+      paymentTime: '缴费时间',
+      cashier: '收银员',
+      status: '状态',
+      remark: '备注',
+      operation: '操作',
+      detail: '详情',
+      accountDeduction: '账户扣款'
+    },
+   
+    contractDetailFlow: {
+      serialNumber: '序号',
+      processor: '处理人',
+      status: '状态',
+      processTime: '处理时间',
+      timeConsuming: '耗时',
+      opinion: '意见'
+    },
+    contractDetailSub: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      contractAmount: '合同金额',
+      contractPartyB: '合同乙方',
+      validityPeriod: '有效期',
+      draftTime: '起草时间',
+      status: '状态',
+      operation: '操作',
+      view: '查看'
+    },
+    contractDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      sex: '性别',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同'
+    },
+    contractDetailReceipt: {
+      feeType: '费用类型',
+      owner: '业主',
+      feeItem: '费用项目',
+      feePeriod: '收费时间段',
+      totalAmount: '总金额',
+      payTime: '缴费时间',
+      receiptId: '收据ID',
+      print: '打印',
+      printSmall: '打印小票',
+      printApply: '申请单',
+      selectPrintReceipt: '请选择打印收据',
+      selectPrint: '请选择'
+    },
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailOwnerLang.js b/src/views/contract/contractDetailOwnerLang.js
new file mode 100644
index 0000000..6b21e42
--- /dev/null
+++ b/src/views/contract/contractDetailOwnerLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    contractDetailOwner: {
+      ownerFace: 'Owner Face',
+      name: 'Name',
+      sex: 'Sex',
+      idCard: 'ID Card',
+      address: 'Address',
+      roomCount: 'Room Count',
+      memberCount: 'Member Count',
+      carCount: 'Car Count',
+      complaintCount: 'Complaint',
+      repairCount: 'Repair',
+      oweFee: 'Owe Fee',
+      contractCount: 'Contract'
+    }
+  },
+  zh: {
+    contractDetailOwner: {
+      ownerFace: '业主人脸',
+      name: '姓名',
+      sex: '性别',
+      idCard: '身份证',
+      address: '家庭住址',
+      roomCount: '房屋数',
+      memberCount: '业主成员',
+      carCount: '车辆数',
+      complaintCount: '投诉',
+      repairCount: '报修',
+      oweFee: '欠费',
+      contractCount: '业主合同'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailReceiptLang.js b/src/views/contract/contractDetailReceiptLang.js
new file mode 100644
index 0000000..7e6cb56
--- /dev/null
+++ b/src/views/contract/contractDetailReceiptLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    contractDetailReceipt: {
+      feeType: 'Fee Type',
+      owner: 'Owner',
+      feeItem: 'Fee Item',
+      feePeriod: 'Fee Period',
+      totalAmount: 'Total Amount',
+      payTime: 'Pay Time',
+      receiptId: 'Receipt ID',
+      print: 'Print',
+      printSmall: 'Print Small',
+      printApply: 'Apply',
+      selectPrintReceipt: 'Please select receipt to print',
+      selectPrint: 'Please select'
+    }
+  },
+  zh: {
+    contractDetailReceipt: {
+      feeType: '费用类型',
+      owner: '业主',
+      feeItem: '费用项目',
+      feePeriod: '收费时间段',
+      totalAmount: '总金额',
+      payTime: '缴费时间',
+      receiptId: '收据ID',
+      print: '打印',
+      printSmall: '打印小票',
+      printApply: '申请单',
+      selectPrintReceipt: '请选择打印收据',
+      selectPrint: '请选择'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailRoomLang.js b/src/views/contract/contractDetailRoomLang.js
new file mode 100644
index 0000000..ce81b51
--- /dev/null
+++ b/src/views/contract/contractDetailRoomLang.js
@@ -0,0 +1,32 @@
+export const messages = {
+  en: {
+    contractDetailRoom: {
+      addPropertyChange: 'Property Change',
+      room: 'Room',
+      floor: 'Floor',
+      type: 'Type',
+      area: 'Area',
+      rent: 'Rent',
+      roomStatus: 'Room Status',
+      operation: 'Operation',
+      businessAcceptance: 'Business Acceptance',
+      contractArea: 'Contract Area',
+      searchPlaceholder: 'Please enter room number like 1-1-1'
+    }
+  },
+  zh: {
+    contractDetailRoom: {
+      addPropertyChange: '房产变更',
+      room: '房屋',
+      floor: '楼层',
+      type: '类型',
+      area: '面积',
+      rent: '租金',
+      roomStatus: '房屋状态',
+      operation: '操作',
+      businessAcceptance: '业务受理',
+      contractArea: '合同面积',
+      searchPlaceholder: '请输入房屋编号 楼栋-单元-房屋 如1-1-1'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractDetailSubLang.js b/src/views/contract/contractDetailSubLang.js
new file mode 100644
index 0000000..478c8c2
--- /dev/null
+++ b/src/views/contract/contractDetailSubLang.js
@@ -0,0 +1,34 @@
+export const messages = {
+  en: {
+    contractDetailSub: {
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      parentContractCode: 'Parent Contract Code',
+      contractType: 'Contract Type',
+      operator: 'Operator',
+      contractAmount: 'Contract Amount',
+      contractPartyB: 'Contract Party B',
+      validityPeriod: 'Validity Period',
+      draftTime: 'Draft Time',
+      status: 'Status',
+      operation: 'Operation',
+      view: 'View'
+    }
+  },
+  zh: {
+    contractDetailSub: {
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      parentContractCode: '父合同编号',
+      contractType: '合同类型',
+      operator: '经办人',
+      contractAmount: '合同金额',
+      contractPartyB: '合同乙方',
+      validityPeriod: '有效期',
+      draftTime: '起草时间',
+      status: '状态',
+      operation: '操作',
+      view: '查看'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractManageList.vue b/src/views/contract/contractManageList.vue
index c1f5362..6b83d4b 100644
--- a/src/views/contract/contractManageList.vue
+++ b/src/views/contract/contractManageList.vue
@@ -230,7 +230,7 @@ export default {
     },
     viewContract(contract) {
       this.$router.push({
-        path: '/contract/contractDetail',
+        path: '/views/contract/contractDetail',
         query: {
           contractId: contract.contractId
         }
diff --git a/src/views/owner/ownerDetail.vue b/src/views/owner/ownerDetail.vue
index 472ea75..6d4f6c7 100644
--- a/src/views/owner/ownerDetail.vue
+++ b/src/views/owner/ownerDetail.vue
@@ -147,7 +147,7 @@
     <edit-owner ref="editOwner" @refresh="loadOwnerInfo"></edit-owner>
     <delete-fee ref="deleteFee"></delete-fee>
     <edit-fee ref="editFee"></edit-fee>
-    <finish-fee ref="finishFee"></finish-fee>
+    <!-- <finish-fee ref="finishFee"></finish-fee> -->
   </div>
 </template>
 
@@ -260,7 +260,8 @@ export default {
       queryOwners(params).then(response => {
         const data = response.data[0]
         Object.assign(this.ownerDetailInfo, data)
-        this.ownerDetailInfo.ownerAttrDtos = response.owners[0].ownerAttrDtos
+        this.ownerDetailInfo.ownerAttrDtos = data.ownerAttrDtos
+        this.changeTab(this.ownerDetailInfo._currentTab)
       }).catch(error => {
         console.error('Failed to load owner info:', error)
       })