diff --git a/src/api/fee/payFeeOrderApi.js b/src/api/fee/payFeeOrderApi.js
new file mode 100644
index 0000000..d5d94e9
--- /dev/null
+++ b/src/api/fee/payFeeOrderApi.js
@@ -0,0 +1,311 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询费用对象信息
+export function listFeeObj(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/feeApi/listFeeObj',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 计算费用折扣
+export function computeFeeDiscount(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/feeDiscount/computeFeeDiscount',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 计算缴费优惠券
+export function computePayFeeCoupon(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/coupon.computePayFeeCoupon',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询用户账户
+export function queryCommunityOwnerAccount(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/account.queryCommunityOwnerAccount',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询押金信息
+export function queryFeeDeposit(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/fee.queryFeeDeposit',
+        method: 'get',
+        params: {
+          ...params,
+          communityId,
+          state: '1400'
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 退押金
+export function refundFeeDeposit(data) {
+  return new Promise( (resolve, reject) => {
+    try {
+      data.communityId =  getCommunityId()
+      const response =  request({
+        url: '/fee.refundFeeDeposit',
+        method: 'post',
+        data
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 缴费
+export function payFee(data) {
+  return new Promise( (resolve, reject) => {
+    try {
+      data.communityId =  getCommunityId()
+      const response =  request({
+        url: '/fee.payFee',
+        method: 'post',
+        data
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 扫码支付
+export function qrCodePayment(data) {
+  return new Promise( (resolve, reject) => {
+    try {
+      data.communityId =  getCommunityId()
+      data.subServiceCode = 'fee.payFee'
+      const response =  request({
+        url: '/payment.qrCodePayment',
+        method: 'post',
+        data
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 检查支付状态
+export function checkPayFinish(data) {
+  return new Promise( (resolve, reject) => {
+    try {
+      data.communityId =  getCommunityId()
+      data.subServiceCode = 'fee.payFee'
+      const response =  request({
+        url: '/payment.checkPayFinish',
+        method: 'post',
+        data
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询收据
+export function queryFeeReceipt(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/feeReceipt/queryFeeReceipt',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询打印页面
+export function listFeePrintPages(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/feePrintPage.listFeePrintPage',
+        method: 'get',
+        params: {
+          ...params,
+          communityId,
+          state: 'T'
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 业主预存账户
+export function ownerPrestoreAccount(data) {
+  return new Promise( (resolve, reject) => {
+    try {
+      data.communityId =  getCommunityId()
+      const response =  request({
+        url: '/account.ownerPrestoreAccount',
+        method: 'post',
+        data
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询房间信息
+export function queryRooms(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/room.queryRooms',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询费用信息
+export function listFee(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/fee.listFee',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 查询费用配置
+export function listFeeConfigs(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/feeConfig.listFeeConfigs',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
+
+// 计算缴费积分
+export function computePayFeeIntegral(params) {
+  return new Promise( (resolve, reject) => {
+    try {
+      const communityId =  getCommunityId()
+      const response =  request({
+        url: '/integral.computePayFeeIntegral',
+        method: 'get',
+        params: {
+          ...params,
+          communityId
+        }
+      })
+      resolve(response.data)
+    } catch (error) {
+      reject(error)
+    }
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/payFeeCoupon.vue b/src/components/fee/payFeeCoupon.vue
new file mode 100644
index 0000000..d50fe9a
--- /dev/null
+++ b/src/components/fee/payFeeCoupon.vue
@@ -0,0 +1,102 @@
+<template>
+  <el-dialog
+    :title="$t('payFeeCoupon.title')"
+    :visible.sync="dialogVisible"
+    width="70%"
+    @close="handleClose"
+  >
+    <el-card v-if="feeCoupons.length > 0">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('payFeeCoupon.couponInfo') }}</span>
+      </div>
+
+      <el-table
+        :data="feeCoupons"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          prop="ruleName"
+          align="center"
+          :label="$t('payFeeCoupon.ruleName')"
+        />
+        <el-table-column
+          prop="couponName"
+          align="center"
+          :label="$t('payFeeCoupon.couponName')"
+        />
+        <el-table-column
+          prop="quantity"
+          align="center"
+          :label="$t('payFeeCoupon.quantity')"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.quantity }}{{ $t('payFeeCoupon.unit') }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="toTypeName"
+          align="center"
+          :label="$t('payFeeCoupon.purpose')"
+        />
+      </el-table>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PayFeeCoupon',
+  data() {
+    return {
+      dialogVisible: false,
+      feeCoupons: [],
+      feeId: '',
+      communityId: '',
+      cycles: 1,
+      endTime: ''
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeId = params.feeId
+      this.cycles = params.cycles || 1
+      this.endTime = params.endTime || ''
+      this.listFeeCoupons()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    async listFeeCoupons() {
+      try {
+        this.communityId = await getCommunityId()
+        const params = {
+          page: 1,
+          row: 20,
+          feeId: this.feeId,
+          communityId: this.communityId,
+          cycles: this.cycles,
+          endTime: this.endTime
+        }
+
+        const response = await this.$http.get('/coupon.computePayFeeCoupon', { params })
+        this.feeCoupons = response.data.data || []
+      } catch (error) {
+        console.error('查询优惠券信息失败:', error)
+      }
+    },
+    handleClose() {
+      this.feeCoupons = []
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-table {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/payFeeDeposit.vue b/src/components/fee/payFeeDeposit.vue
index 89d4237..5d592f4 100644
--- a/src/components/fee/payFeeDeposit.vue
+++ b/src/components/fee/payFeeDeposit.vue
@@ -1,40 +1,40 @@
 <template>
-  <el-card v-if="payFeeDepositInfo.fees.length > 0" class="deposit-card">
-    <div slot="header" class="clearfix">
-      <span>{{ $t('payFeeDeposit.title') }}</span>
-      <el-button type="primary" size="small" class="float-right" @click="_queryPayFeeDeposit">
-        <i class="el-icon-refresh"></i>
-        {{ $t('common.refresh') }}
-      </el-button>
-    </div>
+  <el-dialog :title="$t('payFeeDeposit.title')" :visible.sync="dialogVisible" width="80%" @close="handleClose">
+    <el-card v-if="fees.length > 0">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('payFeeDeposit.depositInfo') }}</span>
+        <el-button type="primary" size="small" style="float: right;" @click="queryPayFeeDeposit">
+          <i class="el-icon-refresh"></i>
+          {{ $t('payFeeDeposit.refresh') }}
+        </el-button>
+      </div>
 
-    <el-table :data="payFeeDepositInfo.fees" border style="width: 100%" v-loading="loading">
-      <el-table-column prop="payerObjName" :label="$t('payFeeDeposit.payerObj')" align="center"></el-table-column>
-      <el-table-column prop="feeName" :label="$t('payFeeDeposit.feeItem')" align="center"></el-table-column>
-      <el-table-column :label="$t('payFeeDeposit.timePeriod')" align="center" width="220">
-        <template slot-scope="scope">
-          {{ scope.row.startTime }} ~ {{ scope.row.endTime }}
-        </template>
-      </el-table-column>
-      <el-table-column prop="receivedAmount" :label="$t('payFeeDeposit.amount')" align="center"></el-table-column>
-      <el-table-column prop="createTime" :label="$t('payFeeDeposit.payTime')" align="center"
-        width="180"></el-table-column>
-      <el-table-column :label="$t('common.operation')" align="center" width="120">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="_openRefundDeposit(scope.row)">
-            {{ $t('payFeeDeposit.refund') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
+      <el-table :data="fees" border style="width: 100%">
+        <el-table-column prop="payerObjName" align="center" :label="$t('payFeeDeposit.payerObj')" />
+        <el-table-column prop="feeName" align="center" :label="$t('payFeeDeposit.feeName')" />
+        <el-table-column align="center" :label="$t('payFeeDeposit.timeRange')">
+          <template slot-scope="scope">
+            {{ scope.row.startTime }}~{{ scope.row.endTime }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="receivedAmount" align="center" :label="$t('payFeeDeposit.amount')" />
+        <el-table-column prop="createTime" align="center" :label="$t('payFeeDeposit.paymentTime')" />
+        <el-table-column align="center" :label="$t('payFeeDeposit.operation')" width="120">
+          <template slot-scope="scope">
+            <el-button type="primary" size="mini" @click="openRefundDeposit(scope.row)">
+              {{ $t('payFeeDeposit.refund') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
 
     <refund-deposit-fee ref="refundDepositFee"></refund-deposit-fee>
-  </el-card>
+  </el-dialog>
 </template>
 
 <script>
 import { getCommunityId } from '@/api/community/communityApi'
-import { queryFeeDeposit } from '@/api/fee/batchPayFeeOrderApi'
 import RefundDepositFee from './refundDepositFee'
 
 export default {
@@ -44,68 +44,63 @@ export default {
   },
   data() {
     return {
-      loading: false,
-      payFeeDepositInfo: {
-        fees: [],
-        payerObjId: '',
-        payerObjType: '',
-        ownerId: '',
-        communityId: ''
-      }
+      dialogVisible: false,
+      fees: [],
+      payerObjId: '',
+      payerObjType: '',
+      ownerId: '',
+      communityId: ''
     }
   },
-  created() {
-    this.payFeeDepositInfo.communityId = getCommunityId()
-  },
   methods: {
-    async _listFeeDeposit(page = 1, rows = 20) {
-      this.loading = true
+    open(params) {
+      this.payerObjId = params.payerObjId
+      this.payerObjType = params.payerObjType
+      this.ownerId = params.ownerId || ''
+      this.listFeeDeposit()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    async listFeeDeposit() {
       try {
+        this.communityId = await getCommunityId()
         const params = {
-          page,
-          row: rows,
-          payerObjId: this.payFeeDepositInfo.payerObjId,
-          ownerId: this.payFeeDepositInfo.ownerId,
-          communityId: this.payFeeDepositInfo.communityId,
+          page: 1,
+          row: 20,
+          payerObjId: this.payerObjId,
+          ownerId: this.ownerId,
+          communityId: this.communityId,
           state: '1400'
         }
 
-        const res = await queryFeeDeposit(params)
-        if (res.code === 0) {
-          this.payFeeDepositInfo.fees = res.data || []
+        const response = await this.$http.get('/fee.queryFeeDeposit', { params })
+        if (response.data.code === 0) {
+          this.fees = response.data.data || []
         }
       } catch (error) {
-        console.error('请求失败:', error)
-      } finally {
-        this.loading = false
+        console.error('查询押金信息失败:', error)
       }
     },
-
-    _queryPayFeeDeposit() {
-      this._listFeeDeposit()
+    queryPayFeeDeposit() {
+      this.listFeeDeposit()
     },
-
-    _openRefundDeposit(fee) {
+    openRefundDeposit(fee) {
       this.$refs.refundDepositFee.open(fee)
     },
-
-    open(params) {
-      this.payFeeDepositInfo = {
-        ...this.payFeeDepositInfo,
-        ...params
-      }
-      this._listFeeDeposit()
-    },
-
-    refresh() {
-      this._listFeeDeposit()
+    handleClose() {
+      this.fees = []
+      this.payerObjId = ''
+      this.payerObjType = ''
+      this.ownerId = ''
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.deposit-card {
-  margin-bottom: 20px;
+<style scoped>
+.el-table {
+  margin-top: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/fee/payFeeDiscount.vue b/src/components/fee/payFeeDiscount.vue
new file mode 100644
index 0000000..7c39af9
--- /dev/null
+++ b/src/components/fee/payFeeDiscount.vue
@@ -0,0 +1,245 @@
+<template>
+  <el-dialog
+    :title="$t('payFeeDiscount.title')"
+    :visible.sync="dialogVisible"
+    width="80%"
+    @close="handleClose"
+  >
+    <el-card v-if="shouldShowDiscounts">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('payFeeDiscount.discountInfo') }}</span>
+      </div>
+
+      <el-table
+        :data="feeDiscounts"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          align="center"
+          width="60"
+        >
+          <template slot-scope="scope">
+            <el-checkbox
+              v-model="selectDiscountIds"
+              :label="scope.row.discountId"
+              @change="computeFeeDiscount"
+            ></el-checkbox>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="discountType"
+          align="center"
+          :label="$t('payFeeDiscount.discountType')"
+        >
+          <template slot-scope="scope">
+            {{ getDiscountTypeName(scope.row.discountType) }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="discountName"
+          align="center"
+          :label="$t('payFeeDiscount.discountName')"
+        />
+        <el-table-column
+          prop="ruleName"
+          align="center"
+          :label="$t('payFeeDiscount.ruleName')"
+        />
+        <el-table-column
+          align="center"
+          :label="$t('payFeeDiscount.rule')"
+        >
+          <template slot-scope="scope">
+            <div v-for="(item,index) in scope.row.feeDiscountSpecs" :key="index">
+              {{ item.specName }}：{{ item.specValue }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          :label="$t('payFeeDiscount.discountAmount')"
+        >
+          <template slot="header">
+            <span>{{ $t('payFeeDiscount.discountAmount') }}</span>
+            <el-tooltip 
+              effect="dark" 
+              :content="$t('payFeeDiscount.discountTooltip')" 
+              placement="top"
+            >
+              <i class="el-icon-info" style="margin-left:5px"></i>
+            </el-tooltip>
+          </template>
+          <template slot-scope="scope">
+            {{ formatDiscountPrice(scope.row) }}
+            <span>{{ $t('payFeeDiscount.yuan') }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import {dateAdd} from '@/utils/dateUtil'
+
+export default {
+  name: 'PayFeeDiscount',
+  data() {
+    return {
+      dialogVisible: false,
+      feeDiscounts: [],
+      feeId: '',
+      payerObjId: '',
+      payerObjType: '',
+      endTime: '',
+      custEndTime: '',
+      communityId: '',
+      cycles: 1,
+      selectDiscountIds: [],
+      totalDiscountMoney: 0.0
+    }
+  },
+  computed: {
+    shouldShowDiscounts() {
+      return (this.feeDiscounts.length > 0) ||
+        (this.selectDiscountIds.length === 0 && this.feeDiscounts.length !== 0) ||
+        (this.selectDiscountIds.length !== this.feeDiscounts.length && this.totalDiscountMoney === 0)
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeId = params.feeId
+      this.payerObjId = params.payerObjId
+      this.payerObjType = params.payerObjType
+      this.endTime = params.endTime
+      this.custEndTime = params.custEndTime
+      this.cycles = params.cycles || 1
+      this.listFeeDiscounts()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    async listFeeDiscounts() {
+      try {
+        this.communityId = await getCommunityId()
+        let cycles = this.cycles
+        
+        const params = {
+          page: 1,
+          row: 20,
+          feeId: this.feeId,
+          communityId: this.communityId,
+          cycles,
+          payerObjId: this.payerObjId,
+          payerObjType: this.payerObjType,
+          endTime: this.endTime,
+          custEndTime: this.custEndTime ? dateAdd(this.custEndTime) : ''
+        }
+
+        const response = await this.$http.get('/feeDiscount/computeFeeDiscount', { params })
+        this.feeDiscounts = response.data.data || []
+        this.selectDiscountIds = this.feeDiscounts.map(item => item.discountId)
+        this.computeFeeDiscount()
+      } catch (error) {
+        console.error('查询折扣信息失败:', error)
+      }
+    },
+    getDiscountTypeName(type) {
+      const types = {
+        '1001': this.$t('payFeeDiscount.discount'),
+        '2002': this.$t('payFeeDiscount.penalty'),
+        '3003': this.$t('payFeeDiscount.specialDiscount')
+      }
+      return types[type] || type
+    },
+    formatDiscountPrice(row) {
+      if (row.discountType === '1001' || row.discountType === '3003') {
+        return row.discountPrice < 0 ? row.discountPrice : row.discountPrice * -1
+      } else if (row.discountType === '2002') {
+        return row.discountPrice > 0 ? row.discountPrice : row.discountPrice * -1
+      }
+      return row.discountPrice
+    },
+    computeFeeDiscount() {
+      let totalDiscountMoney = 0.0
+      let selectDiscount = []
+      
+      this.selectDiscountIds.forEach(item => {
+        this.feeDiscounts.forEach(disItem => {
+          if (disItem.feeDiscountSpecs && disItem.feeDiscountSpecs.length > 0) {
+            let specValue = ""
+            disItem.feeDiscountSpecs.forEach(feeItem => {
+              if (feeItem.specName === this.$t('payFeeDiscount.monthSpec')) {
+                specValue = feeItem.specValue
+              }
+            })
+            if ((disItem.discountType === '1001' || disItem.discountType === '3003') && 
+                parseFloat(this.cycles) < parseFloat(specValue)) {
+              return
+            }
+          }
+          
+          if (item === disItem.discountId && disItem.discountPrice !== 0 && disItem.ruleId !== "102020008") {
+            if (disItem.feeDiscountSpecs && disItem.feeDiscountSpecs.length > 0) {
+              let specValue = ""
+              disItem.feeDiscountSpecs.forEach(feeItem => {
+                if (feeItem.specName === this.$t('payFeeDiscount.monthSpec')) {
+                  specValue = feeItem.specValue
+                }
+              })
+              if (specValue && parseFloat(this.cycles) >= parseFloat(specValue)) {
+                totalDiscountMoney += parseFloat(disItem.discountPrice)
+                selectDiscount.push(disItem)
+              }
+
+              specValue = ""
+              disItem.feeDiscountSpecs.forEach(feeItem => {
+                if (feeItem.specName === this.$t('payFeeDiscount.penaltySpec')) {
+                  specValue = feeItem.specValue
+                }
+              })
+              if (specValue) {
+                totalDiscountMoney += parseFloat(disItem.discountPrice)
+                selectDiscount.push(disItem)
+              }
+            }
+          } else if (item === disItem.discountId && disItem.ruleId === "102020008") {
+            if (disItem.feeDiscountSpecs != null && disItem.feeDiscountSpecs != undefined && 
+                disItem.feeDiscountSpecs.length > 0) {
+              let specValue = ""
+              disItem.feeDiscountSpecs.forEach(feeItem => {
+                if (feeItem.specName === this.$t('payFeeDiscount.monthSpec')) {
+                  specValue = feeItem.specValue
+                }
+              })
+              if (specValue !== "" && parseFloat(this.cycles) >= parseFloat(specValue)) {
+                selectDiscount.push(disItem)
+              }
+            }
+          }
+        })
+      })
+      
+      this.totalDiscountMoney = totalDiscountMoney
+      this.$emit('changeDiscountPrice', {
+        totalDiscountMoney,
+        selectDiscount
+      })
+    },
+    handleClose() {
+      this.feeDiscounts = []
+      this.selectDiscountIds = []
+      this.totalDiscountMoney = 0.0
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-table {
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/payFeeOrderConfirm.vue b/src/components/fee/payFeeOrderConfirm.vue
new file mode 100644
index 0000000..dcf57b0
--- /dev/null
+++ b/src/components/fee/payFeeOrderConfirm.vue
@@ -0,0 +1,216 @@
+<template>
+  <el-dialog :title="$t('payFeeOrderConfirm.title')" :visible.sync="dialogVisible" width="50%" @close="handleClose"
+    :close-on-click-modal="false">
+    <el-form label-width="120px">
+      <el-form-item :label="$t('payFeeOrderConfirm.payerObj')">
+        <span>{{ formData.payerObjName }}</span>
+      </el-form-item>
+
+      <el-form-item v-if="formData.feeFlag != '2006012' && formData.showEndTime != ''"
+        :label="$t('payFeeOrderConfirm.timeRange')">
+        <span>
+          {{ dateFormat(formData.endTime) }} 至
+          {{ dateFormat(formData.showEndTime) }}
+        </span>
+      </el-form-item>
+
+      <el-form-item v-else-if="formData.feeFlag != '2006012' && formData.custEndTime != ''"
+        :label="$t('payFeeOrderConfirm.timeRange')">
+        <span>
+          {{ dateFormat(formData.endTime) }} 至
+          {{ formData.custEndTime }}
+        </span>
+      </el-form-item>
+
+      <el-form-item :label="$t('payFeeOrderConfirm.receivable')">
+        <span>{{ formData.totalFeePrice }}</span>
+      </el-form-item>
+
+      <el-form-item :label="$t('payFeeOrderConfirm.discountAmount')">
+        <el-tooltip effect="dark" :content="$t('payFeeOrderConfirm.discountTooltip')" placement="top">
+          <span>
+            {{ formData.totalDiscountMoney.toFixed(2) }}
+          </span>
+        </el-tooltip>
+      </el-form-item>
+
+      <el-form-item :label="$t('payFeeOrderConfirm.actualAmount')">
+        <span v-if="formData.flag != null && formData.flag != '' && formData.flag == 'true'">
+          {{ formData.receivedAmountNumber }}
+        </span>
+        <span v-else>{{ formData.receivedAmount }}</span>
+      </el-form-item>
+
+      <el-form-item :label="$t('payFeeOrderConfirm.deductionAmount')">
+        <span>
+          {{ formData.accountAmount >= formData.receivedAmount ?
+            formData.receivedAmount : formData.accountAmount.toFixed(2) }}
+        </span>
+      </el-form-item>
+
+      <el-form-item :label="$t('payFeeOrderConfirm.amountPayable')">
+        <span>
+          {{ formData.accountAmount >= formData.receivedAmount ?
+            '0.00' : (formData.receivedAmount - formData.accountAmount).toFixed(2) }}
+        </span>
+      </el-form-item>
+
+      <el-form-item v-if="formData.integralAmount != null && formData.integralAmount != ''"
+        :label="$t('payFeeOrderConfirm.integralDeduction')">
+        <span>{{ formData.integralAmount }}</span>
+      </el-form-item>
+
+      <el-form-item v-if="formData.cashAmount != null && formData.cashAmount != ''"
+        :label="$t('payFeeOrderConfirm.cashDeduction')">
+        <span>{{ formData.cashAmount }}</span>
+      </el-form-item>
+
+      <el-form-item :label="$t('payFeeOrderConfirm.remark')">
+        <span>{{ formData.remark }}</span>
+      </el-form-item>
+
+      <el-form-item v-if="formData.payType == 'qrCode'" :label="$t('payFeeOrderConfirm.authCode')">
+        <el-input v-model="formData.authCode" :placeholder="$t('payFeeOrderConfirm.authCodePlaceholder')"
+          @keyup.enter.native="qrCodePayFee"></el-input>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="closeDoPayFeeModal">{{ $t('payFeeOrderConfirm.close') }}</el-button>
+      <el-button v-if="formData.payType == 'common'" type="primary" @click="payFee">
+        {{ $t('payFeeOrderConfirm.confirm') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { qrCodePayment, checkPayFinish } from '@/api/fee/payFeeOrderApi'
+import { dateFormat } from '@/utils/dateUtil'
+export default {
+  name: 'PayFeeOrderConfirm',
+  data() {
+    return {
+      dialogVisible: false,
+      formData: {
+        totalDiscountMoney: 0.0,
+        accountAmount: 0.0,
+        payType: ''
+      }
+    }
+  },
+  methods: {
+    dateFormat,
+    open(params) {
+      this.formData = { ...params }
+      this.dialogVisible = true
+      if (this.formData.payType !== 'common') {
+        setTimeout(() => {
+          document.getElementById('authCode').focus()
+        }, 1000)
+      }
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    closeDoPayFeeModal() {
+      this.close()
+    },
+    async qrCodePayFee() {
+      try {
+        // const printFees = [{
+        //   feeId: this.formData.feeId,
+        //   squarePrice: this.formData.squarePrice,
+        //   additionalAmount: this.formData.additionalAmount,
+        //   feeName: this.formData.feeName,
+        //   amount: this.formData.receivedAmount,
+        //   authCode: this.formData.authCode
+        // }]
+
+        this.formData.subServiceCode = 'fee.payFee'
+
+        const response = await qrCodePayment(this.formData)
+        const data = response.data
+
+        if (data.code === 404) {
+          this.$message.error(data.msg)
+          if (data.data && data.data.orderId) {
+            this.formData.orderId = data.data.orderId
+            this.formData.paymentPoolId = data.data.paymentPoolId
+            setTimeout(() => {
+              this.qrCodeCheckPayFinish()
+            }, 5000)
+          }
+          return
+        }
+
+        this.close()
+        this.$emit('success', data)
+      } catch (error) {
+        console.error('扫码支付失败:', error)
+      }
+    },
+    async qrCodeCheckPayFinish() {
+      try {
+        // const printFees = [{
+        //   feeId: this.formData.feeId,
+        //   squarePrice: this.formData.squarePrice,
+        //   additionalAmount: this.formData.additionalAmount,
+        //   feeName: this.formData.feeName,
+        //   amount: this.formData.receivedAmount,
+        //   authCode: this.formData.authCode,
+        //   orderId: this.formData.orderId
+        // }]
+
+        this.formData.subServiceCode = 'fee.payFee'
+
+        const response = await checkPayFinish(this.formData)
+        const data = response.data
+
+        if (data.code === 404) {
+          this.$message.error(data.msg)
+          return
+        } else if (data.code === 41) {
+          setTimeout(() => {
+            this.qrCodeCheckPayFinish()
+          }, 5000)
+          return
+        }
+
+        this.close()
+        this.$emit('success', data.data)
+      } catch (error) {
+        console.error('检查支付状态失败:', error)
+      }
+    },
+    async payFee() {
+      try {
+        const response = await this.$http.post('/fee.payFee', this.formData)
+        const data = response.data
+
+        if (data.code === 0) {
+          this.close()
+          this.$emit('success', data.data)
+        } else {
+          this.$message.error(data.msg)
+        }
+      } catch (error) {
+        console.error('缴费失败:', error)
+      }
+    },
+    handleClose() {
+      this.formData = {
+        totalDiscountMoney: 0.0,
+        accountAmount: 0.0,
+        payType: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/payFeeOrderResult.vue b/src/components/fee/payFeeOrderResult.vue
new file mode 100644
index 0000000..40ca510
--- /dev/null
+++ b/src/components/fee/payFeeOrderResult.vue
@@ -0,0 +1,131 @@
+<template>
+  <el-dialog
+    :title="$t('payFeeOrderResult.title')"
+    :visible.sync="dialogVisible"
+    width="40%"
+    @close="handleClose"
+    :close-on-click-modal="false"
+  >
+    <div class="result-content">
+      <p>{{ $t('payFeeOrderResult.success') }}</p>
+      <p v-if="!receiptId">{{ $t('payFeeOrderResult.receiptTip') }}</p>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="back">{{ $t('payFeeOrderResult.back') }}</el-button>
+      <el-button 
+        v-if="receiptId"
+        type="primary"
+        @click="printSmallAndBack"
+      >
+        {{ $t('payFeeOrderResult.printSmall') }}
+      </el-button>
+      <el-button 
+        v-if="receiptId"
+        type="primary"
+        @click="printAndBack('ON')"
+      >
+        {{ $t('payFeeOrderResult.mergePrint') }}
+      </el-button>
+      <el-button 
+        v-if="receiptId"
+        type="primary"
+        @click="printAndBack('OFF')"
+      >
+        {{ $t('payFeeOrderResult.printReceipt') }}
+      </el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PayFeeOrderResult',
+  data() {
+    return {
+      dialogVisible: false,
+      receiptId: '',
+      printUrl: '/print.html#/pages/property/printPayFee'
+    }
+  },
+  created() {
+    this.listFeePrintPages()
+  },
+  methods: {
+    open(params) {
+      if (!params) {
+        this.dialogVisible = true
+        return
+      }
+      this.queryPayFeeReceiptId(params)
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    async queryPayFeeReceiptId(params) {
+      try {
+        const communityId = await getCommunityId()
+        const response = await this.$http.get('/feeReceipt/queryFeeReceipt', {
+          params: {
+            detailIds: params.detailId,
+            communityId,
+            page: 1,
+            row: 1
+          }
+        })
+        
+        if (response.data.code === 0 && response.data.data && response.data.data.length > 0) {
+          this.receiptId = response.data.data[0].receiptId
+        }
+        this.dialogVisible = true
+      } catch (error) {
+        console.error('查询收据ID失败:', error)
+      }
+    },
+    async listFeePrintPages() {
+      try {
+        const communityId = await getCommunityId()
+        const response = await this.$http.get('/feePrintPage.listFeePrintPage', {
+          params: {
+            page: 1,
+            row: 1,
+            state: 'T',
+            communityId
+          }
+        })
+        
+        if (response.data.data && response.data.data.length > 0) {
+          this.printUrl = response.data.data[0].url
+        }
+      } catch (error) {
+        console.error('获取打印页面失败:', error)
+      }
+    },
+    printAndBack(merge) {
+      window.open(`${this.printUrl}?receiptId=${this.receiptId}&merge=${merge}`)
+    },
+    printSmallAndBack() {
+      window.open(`/smallPrint.html#/pages/property/printSmallPayFee?receiptId=${this.receiptId}`)
+    },
+    back() {
+      this.close()
+      this.$emit('back')
+    },
+    handleClose() {
+      this.receiptId = ''
+    }
+  }
+}
+</script>
+
+<style scoped>
+.result-content {
+  text-align: center;
+  padding: 20px;
+}
+.dialog-footer {
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/payFeeUserAccount.vue b/src/components/fee/payFeeUserAccount.vue
index 753ca23..e1d8115 100644
--- a/src/components/fee/payFeeUserAccount.vue
+++ b/src/components/fee/payFeeUserAccount.vue
@@ -1,153 +1,162 @@
 <template>
-  <el-card v-if="payFeeUserAccountInfo.accountList.length > 0" class="account-card">
-    <div slot="header" class="flex justify-between">
-      <span>{{ $t('payFeeUserAccount.title') }}</span>
-      <el-button type="primary" size="small" class="float-right" @click="_queryPayFeeUserAccount">
-        <i class="el-icon-refresh"></i>
-        {{ $t('common.refresh') }}
-      </el-button>
-    </div>
+  <el-dialog
+    :title="$t('payFeeUserAccount.title')"
+    :visible.sync="dialogVisible"
+    width="70%"
+    @close="handleClose"
+  >
+    <el-card v-if="accountList.length > 0">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('payFeeUserAccount.accountInfo') }}</span>
+        <el-button
+          type="primary"
+          size="small"
+          style="float: right;"
+          @click="queryPayFeeUserAccount"
+        >
+          <i class="el-icon-refresh"></i>
+          {{ $t('payFeeUserAccount.refresh') }}
+        </el-button>
+      </div>
 
-    <el-table :data="payFeeUserAccountInfo.accountList" border style="width: 100%" v-loading="loading">
-      <el-table-column width="55" align="center">
-        <template slot-scope="scope">
-          <el-radio v-model="payFeeUserAccountInfo.selectAccountIds" :label="scope.row.acctId"
-            @change="_computeFeeUserAmount(scope.row)"></el-radio>
-        </template>
-      </el-table-column>
-      <el-table-column prop="acctTypeName" :label="$t('payFeeUserAccount.accountType')"
-        align="center"></el-table-column>
-      <el-table-column prop="acctName" :label="$t('payFeeUserAccount.accountName')" align="center"></el-table-column>
-      <el-table-column :label="$t('payFeeUserAccount.accountAmount')" align="center">
-        <template slot-scope="scope">
-          {{ scope.row.amount }} {{ $t('payFeeUserAccount.yuan') }}
-        </template>
-      </el-table-column>
-      <el-table-column :label="$t('common.operation')" align="center" width="150">
-        <template slot-scope="scope">
-          <el-button type="primary" size="mini" @click="_openAddUserAmountModal(scope.row)">
-            <i class="el-icon-plus"></i>
-            {{ $t('payFeeUserAccount.preSave') }}
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-  </el-card>
+      <el-table
+        :data="accountList"
+        border
+        style="width: 100%"
+      >
+        <el-table-column
+          align="center"
+          :label="$t('payFeeUserAccount.select')"
+          width="80"
+        >
+          <template slot-scope="scope">
+            <el-radio
+              v-model="selectedAccount"
+              :label="scope.row.acctId"
+              @change="computeFeeUserAmount(scope.row.acctId)"
+            ></el-radio>
+          </template>
+        </el-table-column>
+        <el-table-column
+          prop="acctTypeName"
+          align="center"
+          :label="$t('payFeeUserAccount.accountType')"
+        />
+        <el-table-column
+          prop="acctName"
+          align="center"
+          :label="$t('payFeeUserAccount.accountName')"
+        />
+        <el-table-column
+          prop="amount"
+          align="center"
+          :label="$t('payFeeUserAccount.accountAmount')"
+        >
+          <template slot-scope="scope">
+            {{ scope.row.amount }} {{ $t('payFeeUserAccount.yuan') }}
+          </template>
+        </el-table-column>
+        <el-table-column
+          align="center"
+          :label="$t('payFeeUserAccount.operation')"
+          width="150"
+        >
+          <template slot-scope="scope">
+            <el-button
+              type="primary"
+              size="mini"
+              @click="openAddUserAmountModal(scope.row)"
+            >
+              <i class="el-icon-plus"></i>
+              {{ $t('payFeeUserAccount.prestore') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+  </el-dialog>
 </template>
 
 <script>
 import { getCommunityId } from '@/api/community/communityApi'
-import { queryCommunityOwnerAccount } from '@/api/fee/batchPayFeeOrderApi'
 
 export default {
   name: 'PayFeeUserAccount',
   data() {
     return {
-      loading: false,
-      payFeeUserAccountInfo: {
-        accountList: [],
-        feeId: '',
-        ownerId: '',
-        communityId: '',
-        quanAccount: false,
-        selectAccountIds: [],
-        integralAmount: '',
-        cashAmount: '',
-        couponAmount: ''
-      }
+      dialogVisible: false,
+      accountList: [],
+      feeId: '',
+      ownerId: '',
+      communityId: '',
+      selectedAccount: null
     }
   },
-  created() {
-    this.payFeeUserAccountInfo.communityId = getCommunityId()
-  },
   methods: {
-    async _listUserAccount(page = 1, rows = 20) {
-      this.loading = true
+    open(params) {
+      this.feeId = params.feeId
+      this.ownerId = params.ownerId || ''
+      this.listUserAccount()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    async listUserAccount() {
       try {
+        this.communityId = await getCommunityId()
         const params = {
-          page,
-          row: rows,
-          feeId: this.payFeeUserAccountInfo.feeId,
-          ownerId: this.payFeeUserAccountInfo.ownerId,
-          communityId: this.payFeeUserAccountInfo.communityId
+          page: 1,
+          row: 20,
+          feeId: this.feeId,
+          ownerId: this.ownerId,
+          communityId: this.communityId
         }
 
-        const res = await queryCommunityOwnerAccount(params)
-        if (res.code === 0) {
-          this.payFeeUserAccountInfo.accountList = res.data || []
-        }
+        const response = await this.$http.get('/account.queryCommunityOwnerAccount', { params })
+        this.accountList = response.data.data || []
       } catch (error) {
-        console.error('请求失败:', error)
-      } finally {
-        this.loading = false
+        console.error('查询用户账户失败:', error)
       }
     },
-
-    _queryPayFeeUserAccount() {
-      this._listUserAccount()
+    queryPayFeeUserAccount() {
+      this.listUserAccount()
     },
-
-    _openAddUserAmountModal(userAccount) {
+    openAddUserAmountModal(userAccount) {
       window.open(`/#/pages/owner/ownerDetail?ownerId=${userAccount.objId}&currentTab=ownerDetailAccount`)
     },
-
-    _computeFeeUserAmount(acct) {
-      let _totalUserAmount = 0.0
-      let _selectAccount = []
-
-      this.payFeeUserAccountInfo.accountList.forEach(item => {
-        if (acct.acctId === item.acctId && item.amount != 0) {
-          _totalUserAmount += parseFloat(item.amount)
-          _selectAccount.push(item)
-          this.payFeeUserAccountInfo.cashAmount = item.amount
+    computeFeeUserAmount(acctId) {
+      let totalUserAmount = 0.0
+      let selectAccount = []
+      
+      this.accountList.forEach(item => {
+        if (acctId === item.acctId && item.amount != 0) {
+          totalUserAmount += parseFloat(item.amount)
+          selectAccount.push(item)
         }
       })
 
       this.$emit('changeUserAmountPrice', {
-        totalUserAmount: _totalUserAmount,
-        accountList: this.payFeeUserAccountInfo.accountList,
+        totalUserAmount,
+        accountList: this.accountList,
         integralAmount: 0,
-        cashAmount: this.payFeeUserAccountInfo.cashAmount,
+        cashAmount: totalUserAmount,
         couponAmount: 0,
-        selectAccount: _selectAccount
+        selectAccount
       })
     },
-
-    open(params) {
-      this.payFeeUserAccountInfo = {
-        ...this.payFeeUserAccountInfo,
-        ...params
-      }
-      this._listUserAccount()
-    },
-
-    refresh() {
-      this._listUserAccount()
-    },
-
-    refreshAndChoose() {
-      this.payFeeUserAccountInfo.accountList = []
-      this.payFeeUserAccountInfo.selectAccountIds = []
-      this._listUserAccount()
-      setTimeout(() => {
-        this.payFeeUserAccountInfo.accountList.forEach(item => {
-          if (item.acctType === '2003') {
-            this.payFeeUserAccountInfo.selectAccountIds.push(item.acctId)
-          }
-        })
-      }, 2000)
-    },
-
-    clear() {
-      this.payFeeUserAccountInfo.accountList = []
-      this.payFeeUserAccountInfo.selectAccountIds = []
+    handleClose() {
+      this.accountList = []
+      this.selectedAccount = null
+      this.feeId = ''
+      this.ownerId = ''
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.account-card {
-  margin-bottom: 20px;
+<style scoped>
+.el-table {
+  margin-top: 20px;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/fee/prestoreAccount2.vue b/src/components/fee/prestoreAccount2.vue
new file mode 100644
index 0000000..1154bdb
--- /dev/null
+++ b/src/components/fee/prestoreAccount2.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-dialog
+    :title="$t('prestoreAccount2.title')"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-form :model="formData" :rules="rules" ref="form" label-width="120px">
+      <el-form-item :label="$t('prestoreAccount2.receivable')">
+        <el-input v-model="formData.totalAmount" disabled></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount2.actualReceipt')">
+        <el-input 
+          v-model="formData.receivedAmount" 
+          @change="computedAmount"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount2.prestoreAmount')" prop="amount">
+        <el-input 
+          v-model="formData.amount" 
+          :placeholder="$t('prestoreAccount2.amountPlaceholder')"
+        ></el-input>
+      </el-form-item>
+
+      <el-form-item :label="$t('prestoreAccount2.remark')" prop="remark">
+        <el-input
+          type="textarea"
+          v-model="formData.remark"
+          :placeholder="$t('prestoreAccount2.remarkPlaceholder')"
+        ></el-input>
+      </el-form-item>
+    </el-form>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('prestoreAccount2.cancel') }}</el-button>
+      <el-button type="primary" @click="savePrestoreAccount2Info">{{ $t('prestoreAccount2.save') }}</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'PrestoreAccount2',
+  data() {
+    return {
+      dialogVisible: false,
+      formData: {
+        tel: '',
+        ownerId: '',
+        owners: [],
+        amount: '',
+        remark: '',
+        receivedAmount: '',
+        redepositAmount: '',
+        totalAmount: '',
+        acctType: ''
+      },
+      rules: {
+        amount: [
+          { required: true, message: this.$t('prestoreAccount2.amountRequired'), trigger: 'blur' },
+          { pattern: /^\d+(\.\d{1,2})?$/, message: this.$t('prestoreAccount2.amountFormat'), trigger: 'blur' }
+        ],
+        remark: [
+          { max: 200, message: this.$t('prestoreAccount2.remarkMaxLength'), trigger: 'blur' }
+        ]
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.formData = {
+        ...this.formData,
+        acctType: params.acctType,
+        amount: params.redepositAmount,
+        redepositAmount: params.redepositAmount,
+        receivedAmount: params.receivedAmount,
+        totalAmount: (parseFloat(params.receivedAmount) - parseFloat(params.redepositAmount)).toFixed(2),
+        ownerId: params.objId
+      }
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    computedAmount() {
+      let amount = parseFloat(this.formData.receivedAmount) - parseFloat(this.formData.totalAmount)
+      amount = amount.toFixed(2)
+      this.formData.amount = amount < 0 ? 0 : amount
+    },
+    async savePrestoreAccount2Info() {
+      try {
+        const valid = await this.$refs.form.validate()
+        if (!valid) return
+
+        this.formData.communityId = await getCommunityId()
+        
+        const response = await this.$http.post('/account.ownerPrestoreAccount', this.formData)
+        if (response.data.code === 0) {
+          this.$message.success(this.$t('prestoreAccount2.saveSuccess'))
+          this.close()
+          this.$emit('success')
+          this.$emit('refresh')
+        } else {
+          this.$message.error(response.data.msg)
+        }
+      } catch (error) {
+        console.error('预存账户失败:', error)
+        this.$message.error(this.$t('prestoreAccount2.saveError'))
+      }
+    },
+    handleClose() {
+      this.$refs.form.resetFields()
+      this.formData = {
+        tel: '',
+        ownerId: '',
+        owners: [],
+        amount: '',
+        remark: '',
+        receivedAmount: '',
+        redepositAmount: '',
+        totalAmount: '',
+        acctType: ''
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.dialog-footer {
+  text-align: right;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/refundDepositFee.vue b/src/components/fee/refundDepositFee.vue
index 833bd19..9bd7a2a 100644
--- a/src/components/fee/refundDepositFee.vue
+++ b/src/components/fee/refundDepositFee.vue
@@ -1,72 +1,71 @@
 <template>
   <el-dialog
     :title="$t('refundDepositFee.title')"
-    :visible.sync="visible"
-    width="500px"
-    :before-close="handleClose"
+    :visible.sync="dialogVisible"
+    width="30%"
+    @close="handleClose"
   >
-    <div class="dialog-content">
-      <p>{{ $t('refundDepositFee.confirmText') }}</p>
+    <el-alert
+      :title="$t('refundDepositFee.alertText')"
+      type="warning"
+      :closable="false"
+    ></el-alert>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="dialogVisible = false">{{ $t('refundDepositFee.cancel') }}</el-button>
+      <el-button type="primary" @click="refundDepositFee">{{ $t('refundDepositFee.confirm') }}</el-button>
     </div>
-    <span slot="footer" class="dialog-footer">
-      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
-      <el-button type="primary" @click="refundDepositFee">{{ $t('common.confirm') }}</el-button>
-    </span>
   </el-dialog>
 </template>
 
 <script>
 import { getCommunityId } from '@/api/community/communityApi'
-import { refundFeeDeposit } from '@/api/fee/batchPayFeeOrderApi'
 
 export default {
   name: 'RefundDepositFee',
   data() {
     return {
-      visible: false,
-      refundDepositFeeInfo: {}
+      dialogVisible: false,
+      refundData: {}
     }
   },
   methods: {
-    open(fee) {
-      this.refundDepositFeeInfo = { ...fee }
-      this.visible = true
+    open(params) {
+      this.refundData = { ...params }
+      this.dialogVisible = true
     },
-
-    handleClose() {
-      this.visible = false
+    close() {
+      this.dialogVisible = false
     },
-
     async refundDepositFee() {
       try {
-        const params = {
-          ...this.refundDepositFeeInfo,
-          communityId: getCommunityId()
-        }
-
-        const res = await refundFeeDeposit(params)
-        if (res.code === 0) {
-          this.$message.success('退押金成功')
-          this.visible = false
+        this.refundData.communityId = await getCommunityId()
+        
+        const response = await this.$http.post('/fee.refundFeeDeposit', this.refundData)
+        if (response.data.code === 0) {
+          this.$message.success(this.$t('refundDepositFee.success'))
           this.$emit('success')
-          this.$emit('refresh')
+          this.dialogVisible = false
         } else {
-          this.$message.error(res.msg)
+          this.$message.error(response.data.msg)
         }
       } catch (error) {
-        console.error('请求失败:', error)
-        this.$message.error('退押金失败')
+        console.error('退押金失败:', error)
+        this.$message.error(this.$t('refundDepositFee.error'))
       }
+    },
+    handleClose() {
+      this.refundData = {}
     }
   }
 }
 </script>
 
-<style lang="scss" scoped>
-.dialog-content {
-  padding: 20px;
-  text-align: center;
-  font-size: 16px;
-  line-height: 1.6;
+<style scoped>
+.el-alert {
+  margin-bottom: 20px;
+}
+.dialog-footer {
+  text-align: right;
 }
 </style>
\ No newline at end of file
diff --git a/src/components/fee/simplifyRoomFee.vue b/src/components/fee/simplifyRoomFee.vue
index c63a1dc..8cd0730 100644
--- a/src/components/fee/simplifyRoomFee.vue
+++ b/src/components/fee/simplifyRoomFee.vue
@@ -432,7 +432,7 @@ export default {
       fee.roomName = this.simplifyRoomFeeInfo.roomName
       fee.builtUpArea = this.simplifyRoomFeeInfo.builtUpArea
       this.$router.push({
-        path: '/property/payFeeOrder',
+        path: '/views/fee/payFeeOrder',
         query: { feeId: fee.feeId }
       })
     },
diff --git a/src/components/fee/viewFeeConfigData.vue b/src/components/fee/viewFeeConfigData.vue
index 49a7c4c..4f3615e 100644
--- a/src/components/fee/viewFeeConfigData.vue
+++ b/src/components/fee/viewFeeConfigData.vue
@@ -1,72 +1,88 @@
 <template>
-  <el-tooltip effect="dark" content="查看详情" placement="top">
-    <i class="el-icon-info hand" @click="open"></i>
-  </el-tooltip>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="label"
+        :label="$t('viewFeeConfigData.label')"
+        width="180"
+      />
+      <el-table-column
+        prop="value"
+        :label="$t('viewFeeConfigData.value')"
+      />
+    </el-table>
+  </el-dialog>
 </template>
 
 <script>
 import { getCommunityId } from '@/api/community/communityApi'
-import { listFeeConfigs } from '@/api/fee/propertyFeeApi'
 
 export default {
   name: 'ViewFeeConfigData',
   data() {
     return {
-      configId: '',
-      communityId: ''
+      dialogVisible: false,
+      title: '',
+      tableData: [],
+      configId: ''
     }
   },
-  created() {
-    this.communityId = getCommunityId()
-  },
   methods: {
     open(params) {
       this.configId = params.configId
-      this._loadFeeConfigData()
+      this.loadFeeConfigData()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
     },
-    async _loadFeeConfigData() {
+    async loadFeeConfigData() {
       try {
-        const res = await listFeeConfigs({
+        const communityId = await getCommunityId()
+        const params = {
           page: 1,
           row: 1,
-          communityId: this.communityId,
+          communityId,
           configId: this.configId
-        })
-        
-        if (res.data && res.data.length > 0) {
-          const feeConfig = res.data[0]
-          const configData = {
-            "费用项ID": feeConfig.configId,
-            "费用类型": feeConfig.feeTypeCdName,
-            "收费项目": feeConfig.feeName,
-            "费用标识": feeConfig.feeFlagName,
-            "催缴类型": feeConfig.billTypeName,
-            "付费类型": feeConfig.paymentCd === '1200' ? this.$t('viewFeeConfigData.prepaid') : this.$t('viewFeeConfigData.postpaid'),
-            "缴费周期": feeConfig.paymentCycle,
-            "计费起始时间": feeConfig.startTime,
-            "计费终止时间": feeConfig.endTime,
-            "公式": feeConfig.computingFormulaName,
-            "计费单价": feeConfig.computingFormula === '2002' ? '-' : feeConfig.squarePrice,
-            "附加/固定费用": feeConfig.additionalAmount
-          }
-          
-          this.$emit('openViewDataModal', {
-            title: `${feeConfig.feeName} ${this.$t('viewFeeConfigData.feeItem')}`,
-            data: configData
-          })
         }
+
+        const response = await this.$http.get('/feeConfig.listFeeConfigs', { params })
+        const feeConfig = response.data.feeConfigs[0]
+
+        this.title = `${feeConfig.feeName} ${this.$t('viewFeeConfigData.feeItem')}`
+
+        this.tableData = [
+          { label: this.$t('viewFeeConfigData.configId'), value: feeConfig.configId },
+          { label: this.$t('viewFeeConfigData.feeType'), value: feeConfig.feeTypeCdName },
+          { label: this.$t('viewFeeConfigData.feeName'), value: feeConfig.feeName },
+          { label: this.$t('viewFeeConfigData.feeFlag'), value: feeConfig.feeFlagName },
+          { label: this.$t('viewFeeConfigData.billType'), value: feeConfig.billTypeName },
+          { label: this.$t('viewFeeConfigData.paymentType'), value: feeConfig.paymentCd === '1200' ? this.$t('viewFeeConfigData.prepay') : this.$t('viewFeeConfigData.postpay') },
+          { label: this.$t('viewFeeConfigData.paymentCycle'), value: feeConfig.paymentCycle },
+          { label: this.$t('viewFeeConfigData.billingStartTime'), value: feeConfig.startTime },
+          { label: this.$t('viewFeeConfigData.billingEndTime'), value: feeConfig.endTime },
+          { label: this.$t('viewFeeConfigData.formula'), value: feeConfig.computingFormulaName },
+          { label: this.$t('viewFeeConfigData.unitPrice'), value: feeConfig.computingFormula === '2002' ? '-' : feeConfig.squarePrice },
+          { label: this.$t('viewFeeConfigData.additionalFee'), value: feeConfig.additionalAmount }
+        ]
       } catch (error) {
         console.error('加载费用配置数据失败:', error)
       }
+    },
+    handleClose() {
+      this.tableData = []
+      this.title = ''
+      this.configId = ''
     }
   }
 }
-</script>
-
-<style scoped>
-.hand {
-  cursor: pointer;
-  color: #409EFF;
-  margin-left: 5px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/fee/viewFeeData.vue b/src/components/fee/viewFeeData.vue
new file mode 100644
index 0000000..fc6c164
--- /dev/null
+++ b/src/components/fee/viewFeeData.vue
@@ -0,0 +1,113 @@
+<template>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="label"
+        :label="$t('viewFeeData.label')"
+        width="180"
+      />
+      <el-table-column
+        prop="value"
+        :label="$t('viewFeeData.value')"
+      />
+    </el-table>
+  </el-dialog>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { dateFormat } from '@/utils/dateUtil'
+
+export default {
+  name: 'ViewFeeData',
+  data() {
+    return {
+      dialogVisible: false,
+      title: '',
+      tableData: [],
+      feeId: ''
+    }
+  },
+  methods: {
+    open(params) {
+      this.feeId = params.feeId
+      this.loadViewFeeData()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
+    },
+    async loadViewFeeData() {
+      try {
+        const communityId = await getCommunityId()
+        const params = {
+          page: 1,
+          row: 1,
+          communityId,
+          feeId: this.feeId
+        }
+
+        const response = await this.$http.get('/fee.listFee', { params })
+        const fee = response.data.fees[0]
+
+        this.title = `${fee.feeName} ${this.$t('viewFeeData.details')}`
+
+        const data = {
+          [this.$t('viewFeeData.feeId')]: fee.feeId,
+          [this.$t('viewFeeData.feeFlag')]: fee.feeFlagName,
+          [this.$t('viewFeeData.feeType')]: fee.feeTypeCdName,
+          [this.$t('viewFeeData.payerObj')]: fee.payerObjName,
+          [this.$t('viewFeeData.feeName')]: fee.feeName,
+          [this.$t('viewFeeData.state')]: fee.stateName,
+          [this.$t('viewFeeData.createTime')]: fee.startTime,
+          [this.$t('viewFeeData.billingStartTime')]: this.getViewFeeDataEndTime(fee),
+          [this.$t('viewFeeData.billingEndTime')]: this.getViewFeeDataDeadlineTime(fee),
+          [this.$t('viewFeeData.batch')]: fee.batchId
+        }
+
+        if (fee.feeAttrs) {
+          fee.feeAttrs.forEach(attr => {
+            data[attr.specCdName] = attr.value
+          })
+        }
+
+        this.tableData = Object.keys(data).map(key => ({
+          label: key,
+          value: data[key]
+        }))
+      } catch (error) {
+        console.error('加载费用数据失败:', error)
+      }
+    },
+    getViewFeeDataDeadlineTime(fee) {
+      if (fee.amountOwed == 0 && fee.endTime == fee.deadlineTime) {
+        return "-"
+      }
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return dateFormat(fee.deadlineTime)
+    },
+    getViewFeeDataEndTime(fee) {
+      if (fee.state == '2009001') {
+        return "-"
+      }
+      return dateFormat(fee.endTime)
+    },
+    handleClose() {
+      this.tableData = []
+      this.title = ''
+      this.feeId = ''
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/viewRoomData.vue b/src/components/fee/viewRoomData.vue
index 5f15b6c..ace5cee 100644
--- a/src/components/fee/viewRoomData.vue
+++ b/src/components/fee/viewRoomData.vue
@@ -1,76 +1,97 @@
 <template>
-  <el-tooltip effect="dark" content="查看详情" placement="top">
-    <i class="el-icon-info hand" @click="open"></i>
-  </el-tooltip>
+  <el-dialog
+    :title="title"
+    :visible.sync="dialogVisible"
+    width="50%"
+    @close="handleClose"
+  >
+    <el-table
+      :data="tableData"
+      border
+      style="width: 100%"
+    >
+      <el-table-column
+        prop="label"
+        :label="$t('viewRoomData.label')"
+        width="180"
+      />
+      <el-table-column
+        prop="value"
+        :label="$t('viewRoomData.value')"
+      />
+    </el-table>
+  </el-dialog>
 </template>
 
 <script>
 import { getCommunityId } from '@/api/community/communityApi'
-import { queryRooms } from '@/api/fee/propertyFeeApi'
 
 export default {
   name: 'ViewRoomData',
   data() {
     return {
-      roomId: '',
-      communityId: ''
+      dialogVisible: false,
+      title: '',
+      tableData: [],
+      roomId: ''
     }
   },
-  created() {
-    this.communityId = getCommunityId()
-  },
   methods: {
     open(params) {
       this.roomId = params.roomId
-      this._loadViewRoomData()
+      this.loadViewRoomData()
+      this.dialogVisible = true
+    },
+    close() {
+      this.dialogVisible = false
     },
-    async _loadViewRoomData() {
+    async loadViewRoomData() {
       try {
-        const res = await queryRooms({
+        const communityId = await getCommunityId()
+        const params = {
           page: 1,
           row: 1,
-          communityId: this.communityId,
+          communityId,
           roomId: this.roomId
-        })
+        }
+
+        const response = await this.$http.get('/room.queryRooms', { params })
+        const room = response.data.rooms[0]
+
+        this.title = `${room.floorNum}-${room.unitNum}-${room.roomNum} ${this.$t('viewRoomData.details')}`
         
-        if (res.data && res.data.length > 0) {
-          const room = res.data[0]
-          const roomData = {
-            "房屋": `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
-            "楼层": room.layer,
-            "业主": room.ownerName || '-',
-            "电话": room.link || '-',
-            "类型": room.roomSubTypeName,
-            "建筑面积": room.builtUpArea,
-            "室内面积": room.roomArea,
-            "租金": room.roomRent,
-            "房屋状态": room.stateName,
-            "入住时间": room.startTime
-          }
-          
-          if (room.roomAttrDto) {
-            room.roomAttrDto.forEach(attr => {
-              roomData[attr.specName] = attr.valueName
-            })
-          }
-          
-          this.$emit('openViewDataModal', {
-            title: `${room.floorNum}-${room.unitNum}-${room.roomNum} 详情`,
-            data: roomData
+        const data = {
+          [this.$t('viewRoomData.room')]: `${room.floorNum}-${room.unitNum}-${room.roomNum}`,
+          [this.$t('viewRoomData.floor')]: room.layer,
+          [this.$t('viewRoomData.owner')]: room.ownerName,
+          [this.$t('viewRoomData.phone')]: room.link,
+          [this.$t('viewRoomData.type')]: room.roomSubTypeName,
+          [this.$t('viewRoomData.builtUpArea')]: room.builtUpArea,
+          [this.$t('viewRoomData.roomArea')]: room.roomArea,
+          [this.$t('viewRoomData.rent')]: room.roomRent,
+          [this.$t('viewRoomData.state')]: room.stateName,
+          [this.$t('viewRoomData.moveInTime')]: room.startTime
+        }
+
+        if (room.roomAttrDto) {
+          room.roomAttrDto.forEach(attr => {
+            data[attr.specName] = attr.valueName
           })
         }
+
+        this.tableData = Object.keys(data).map(key => ({
+          label: key,
+          value: data[key]
+        }))
       } catch (error) {
         console.error('加载房间数据失败:', error)
       }
+    },
+    handleClose() {
+      this.tableData = []
+      this.title = ''
+      this.roomId = ''
     }
   }
 }
-</script>
-
-<style scoped>
-.hand {
-  cursor: pointer;
-  color: #409EFF;
-  margin-left: 5px;
-}
-</style>
\ No newline at end of file
+</script>
\ No newline at end of file
diff --git a/src/components/index/index-property.vue b/src/components/index/index-property.vue
index b14c6a5..235f19d 100644
--- a/src/components/index/index-property.vue
+++ b/src/components/index/index-property.vue
@@ -57,6 +57,7 @@ export default {
 <style lang="scss" scoped>
 .property-index-container {
 
+  padding: 0 10px; // 添加左右内边距
 
   .vc-index-nav {
     padding: 10px;
@@ -82,6 +83,8 @@ export default {
 
   .vc-index-1 {
     margin-bottom: 20px;
+    // 修复 Element UI 栅格系统的 gutter 问题
+  
 
     .index-1-left,
     .index-1-right {
diff --git a/src/components/owner/ownerDetailRoomFee.vue b/src/components/owner/ownerDetailRoomFee.vue
index 5ed90e2..a44cb6f 100644
--- a/src/components/owner/ownerDetailRoomFee.vue
+++ b/src/components/owner/ownerDetailRoomFee.vue
@@ -221,7 +221,7 @@ export default {
       })
     },
     _payRoomFee(fee) {
-      this.$router.push(`/property/payFeeOrder?feeId=${fee.feeId}`)
+      this.$router.push(`/views/fee/payFeeOrder?feeId=${fee.feeId}`)
     },
     _editRoomFee(fee) {
       this.$emit('editFee', fee)
diff --git a/src/components/simplify/simplifyCarFee.vue b/src/components/simplify/simplifyCarFee.vue
index 9355499..8a07d8e 100644
--- a/src/components/simplify/simplifyCarFee.vue
+++ b/src/components/simplify/simplifyCarFee.vue
@@ -262,7 +262,7 @@ export default {
       return `${this.$t('simplifyCarFee.owner')}：${ownerName},${this.$t('simplifyCarFee.phone')}：${ownerLink}`
     },
     _simplifyCarPayFee(fee) {
-      this.$router.push(`/pages/property/payFeeOrder?feeId=${fee.feeId}`)
+      this.$router.push(`/views/fee/payFeeOrderfeeId=${fee.feeId}`)
     },
     _simplifyCarPayFeeHis(fee) {
       this.$router.push(`/pages/property/propertyFee?${this.objToGetParam(fee)}`)
diff --git a/src/i18n/feeI18n.js b/src/i18n/feeI18n.js
index 190dce7..4a26976 100644
--- a/src/i18n/feeI18n.js
+++ b/src/i18n/feeI18n.js
@@ -27,6 +27,7 @@ import { messages as roomCreateFeeMessages } from '../views/fee/roomCreateFeeLan
 import { messages as propertyFeeMessages } from '../views/fee/propertyFeeLang'
 import { messages as batchPayFeeOrderMessages } from '../views/fee/batchPayFeeOrderLang'
 import { messages as simplifyAcceptanceMessages } from '../views/simplify/simplifyAcceptanceLang.js'
+import { messages as payFeeOrderMessages } from '../views/fee/payFeeOrderLang'
 
 export const messages = {
     en: {
@@ -59,6 +60,7 @@ export const messages = {
         ...propertyFeeMessages.en,
         ...batchPayFeeOrderMessages.en,
         ...simplifyAcceptanceMessages.en,
+        ...payFeeOrderMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
@@ -90,5 +92,6 @@ export const messages = {
         ...propertyFeeMessages.zh,
         ...batchPayFeeOrderMessages.zh,
         ...simplifyAcceptanceMessages.zh,
+        ...payFeeOrderMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/i18n/index.js b/src/i18n/index.js
index 9565d64..079acd8 100644
--- a/src/i18n/index.js
+++ b/src/i18n/index.js
@@ -436,7 +436,7 @@ const messages = {
 
 // 创建 i18n 实例
 const i18n = new VueI18n({
-  locale: 'zh-CN',
+  locale: 'zh',
   messages
 })
 
diff --git a/src/main.js b/src/main.js
index 059b768..fe0dc84 100644
--- a/src/main.js
+++ b/src/main.js
@@ -7,11 +7,6 @@ import i18n from './i18n'
 import {getCommunityName,getCommunityId} from '@/api/community/communityApi'
 
 // 验证全局脚本是否正确加载
-console.log('检查全局脚本加载状态:')
-console.log('Qs 库:', typeof window.Qs !== 'undefined' ? '已加载' : '未加载')
-if (typeof window.Qs !== 'undefined') {
-  console.log('Qs 版本:', window.Qs.VERSION || '未知版本')
-}
 
 Vue.prototype.getCommunityId = function(){
   return getCommunityId()
diff --git a/src/router/feeRouter.js b/src/router/feeRouter.js
index 36b8b60..feaf5fe 100644
--- a/src/router/feeRouter.js
+++ b/src/router/feeRouter.js
@@ -129,4 +129,9 @@ export default [
         name: '/pages/property/simplifyAcceptance',
         component: () => import('@/views/simplify/simplifyAcceptanceList.vue')
     },
+    {
+        path:'/views/fee/payFeeOrder',
+        name:'/views/fee/payFeeOrder',
+        component: () => import('@/views/fee/payFeeOrderList.vue')
+        },
 ]
\ No newline at end of file
diff --git a/src/views/fee/listCarFeeList.vue b/src/views/fee/listCarFeeList.vue
index 4029931..c62b478 100644
--- a/src/views/fee/listCarFeeList.vue
+++ b/src/views/fee/listCarFeeList.vue
@@ -188,7 +188,7 @@ export default {
     },
     _payFee(fee) {
       fee.roomName = this.listCarFeeInfo.carNum
-      this.$router.push({ path: '/fee/payFeeOrder', query: { feeId: fee.feeId } })
+      this.$router.push({ path: '/views/fee/payFeeOrder', query: { feeId: fee.feeId } })
     },
     _payFeeHis(fee) {
       this.$router.push({ path: '/property/propertyFee', query: fee })
diff --git a/src/views/fee/payFeeOrderLang.js b/src/views/fee/payFeeOrderLang.js
new file mode 100644
index 0000000..5891423
--- /dev/null
+++ b/src/views/fee/payFeeOrderLang.js
@@ -0,0 +1,382 @@
+export const messages = {
+  en: {
+    payFeeOrder: {
+      title: 'Order Payment',
+      back: 'Back',
+      feeId: 'Fee ID:',
+      feeName: 'Fee Item:',
+      feeType: 'Fee Type:',
+      billingStartTime: 'Billing Start Time:',
+      area: 'Area:',
+      unitPrice: 'Unit Price:',
+      additionalFee: 'Additional Fee:',
+      fixedFee: 'Fixed Fee:',
+      ownerAccount: 'Owner Account:',
+      giftPoints: 'Gift Points:',
+      receivable: 'Receivable:',
+      amountPayable: 'Amount Payable:',
+      paymentTime: 'Payment Time:',
+      paymentTimePlaceholder: 'Required, please fill in the payment time',
+      paymentCycle: 'Payment Cycle:',
+      selectPaymentCycle: 'Please select payment cycle',
+      month: 'months',
+      customCycle: 'Custom Cycle',
+      customAmount: 'Custom Amount',
+      customEndTime: 'Custom End Time',
+      customTimeRange: 'Custom Time Range',
+      actualCycle: 'Actual Cycle:',
+      inputActualCycle: 'Please enter actual cycle',
+      endTime: 'End Time:',
+      selectEndTime: 'Please select payment end time',
+      paymentPeriod: 'Payment Period:',
+      selectStartTime: 'Please select payment start time',
+      paymentMethod: 'Payment Method:',
+      selectPaymentMethod: 'Required, please select payment method',
+      actualReceipt: 'Actual Receipt:',
+      inputActualAmount: 'Please enter actual receipt amount',
+      remark: 'Remark:',
+      inputRemark: 'Optional, please fill in the remark',
+      scanPayment: 'Scan Payment',
+      submitPayment: 'Submit Payment'
+    },
+    viewRoomData: {
+      details: 'Details',
+      label: 'Item',
+      value: 'Value',
+      room: 'Room',
+      floor: 'Floor',
+      owner: 'Owner',
+      phone: 'Phone',
+      type: 'Type',
+      builtUpArea: 'Built-up Area',
+      roomArea: 'Room Area',
+      rent: 'Rent',
+      state: 'State',
+      moveInTime: 'Move-in Time'
+    },
+    viewFeeData: {
+      details: 'Details',
+      label: 'Item',
+      value: 'Value',
+      feeId: 'Fee ID',
+      feeFlag: 'Fee Flag',
+      feeType: 'Fee Type',
+      payerObj: 'Payer Object',
+      feeName: 'Fee Name',
+      state: 'State',
+      createTime: 'Create Time',
+      billingStartTime: 'Billing Start Time',
+      billingEndTime: 'Billing End Time',
+      batch: 'Batch'
+    },
+    viewFeeConfigData: {
+      feeItem: 'Fee Item',
+      label: 'Item',
+      value: 'Value',
+      configId: 'Config ID',
+      feeType: 'Fee Type',
+      feeName: 'Fee Name',
+      feeFlag: 'Fee Flag',
+      billType: 'Bill Type',
+      paymentType: 'Payment Type',
+      prepay: 'Prepay',
+      postpay: 'Postpay',
+      paymentCycle: 'Payment Cycle',
+      billingStartTime: 'Billing Start Time',
+      billingEndTime: 'Billing End Time',
+      formula: 'Formula',
+      unitPrice: 'Unit Price',
+      additionalFee: 'Additional/Fixed Fee'
+    },
+    payFeeUserAccount: {
+      title: 'Account Information',
+      accountInfo: 'Account Information',
+      refresh: 'Refresh',
+      select: 'Select',
+      accountType: 'Account Type',
+      accountName: 'Account Name',
+      accountAmount: 'Account Amount',
+      operation: 'Operation',
+      yuan: 'yuan',
+      prestore: 'Prestore'
+    },
+    payFeeDeposit: {
+      title: 'Deposit Information',
+      depositInfo: 'Deposit Information',
+      refresh: 'Refresh',
+      payerObj: 'Payer Object',
+      feeName: 'Fee Item',
+      timeRange: 'Time Range',
+      amount: 'Amount',
+      paymentTime: 'Payment Time',
+      operation: 'Operation',
+      refund: 'Refund'
+    },
+    refundDepositFee: {
+      title: 'Please confirm your operation!',
+      alertText: 'After the deposit is refunded, it will be automatically deposited into the account. You can choose to pay from the account. If you refund cash to the owner, please go to the business home page to refund the deposit!',
+      cancel: 'Cancel',
+      confirm: 'Confirm',
+      success: 'Refund deposit successfully',
+      error: 'Refund deposit failed'
+    },
+    payFeeOrderResult: {
+      title: 'Payment Prompt',
+      success: 'Payment successful',
+      receiptTip: 'Please go to the business acceptance page to reprint the receipt',
+      back: 'Back',
+      printSmall: 'Print Small Ticket',
+      mergePrint: 'Merge Print',
+      printReceipt: 'Print Receipt'
+    },
+    payFeeOrderConfirm: {
+      title: 'Payment Confirmation',
+      payerObj: 'Payer Object:',
+      timeRange: 'Payment Period:',
+      receivable: 'Receivable Amount:',
+      discountAmount: 'Discount Amount:',
+      discountTooltip: 'Positive: discounted amount; Negative: additional late fee',
+      actualAmount: 'Actual Receipt:',
+      deductionAmount: 'Deduction Amount:',
+      amountPayable: 'Amount Payable:',
+      integralDeduction: 'Integral Account Deduction:',
+      cashDeduction: 'Cash Account Deduction:',
+      remark: 'Remark:',
+      authCode: 'Auth Code:',
+      authCodePlaceholder: 'Please scan with scanner',
+      close: 'Close',
+      confirm: 'Confirm Payment'
+    },
+    payFeeDiscount: {
+      title: 'Discount Information',
+      discountInfo: 'Discount Information',
+      discountType: 'Discount Type',
+      discountName: 'Discount Name',
+      ruleName: 'Rule Name',
+      rule: 'Rule',
+      discountAmount: 'Discount Amount',
+      discountTooltip: 'Negative: discounted amount; Positive: additional late fee',
+      yuan: 'yuan',
+      discount: 'Discount',
+      penalty: 'Penalty',
+      specialDiscount: 'Special Discount',
+      monthSpec: 'Month',
+      penaltySpec: 'Penalty'
+    },
+    payFeeCoupon: {
+      title: 'Gift Coupon',
+      couponInfo: 'Gift Coupon Information',
+      ruleName: 'Rule Name',
+      couponName: 'Coupon Name',
+      quantity: 'Quantity',
+      unit: 'pcs',
+      purpose: 'Purpose'
+    },
+    prestoreAccount2: {
+      title: 'Prestore',
+      receivable: 'Receivable:',
+      actualReceipt: 'Actual Receipt:',
+      prestoreAmount: 'Prestore Amount:',
+      amountPlaceholder: 'Required, please fill in the prestore amount',
+      remark: 'Remark:',
+      remarkPlaceholder: 'Optional, please fill in the remark',
+      cancel: 'Cancel',
+      save: 'Save',
+      amountRequired: 'Amount cannot be empty',
+      amountFormat: 'Amount format error',
+      remarkMaxLength: 'Remark cannot exceed 200 characters',
+      saveSuccess: 'Prestore successfully',
+      saveError: 'Prestore failed'
+    }
+  },
+  zh: {
+    payFeeOrder: {
+      title: '订单收费',
+      back: '返回',
+      feeId: '费用ID:',
+      feeName: '费用项目:',
+      feeType: '费用类型:',
+      billingStartTime: '计费起始时间:',
+      area: '面积:',
+      unitPrice: '单价:',
+      additionalFee: '附加费:',
+      fixedFee: '固定费:',
+      ownerAccount: '业主账户:',
+      giftPoints: '赠送积分:',
+      receivable: '应收款:',
+      amountPayable: '应缴金额:',
+      paymentTime: '缴费时间:',
+      paymentTimePlaceholder: '必填，请填写缴费时间',
+      paymentCycle: '缴费周期:',
+      selectPaymentCycle: '请选择缴费周期',
+      month: '个月',
+      customCycle: '自定义周期',
+      customAmount: '自定义金额',
+      customEndTime: '自定义结束时间',
+      customTimeRange: '自定义时间段',
+      actualCycle: '实际周期:',
+      inputActualCycle: '请输入实际周期',
+      endTime: '结束时间:',
+      selectEndTime: '请选择缴费结束时间',
+      paymentPeriod: '缴费时间段:',
+      selectStartTime: '请选择缴费开始时间',
+      paymentMethod: '支付方式:',
+      selectPaymentMethod: '必填，请选择支付方式',
+      actualReceipt: '实收款:',
+      inputActualAmount: '请输入实际收款金额',
+      remark: '备注:',
+      inputRemark: '可填，请填写备注',
+      scanPayment: '扫码收费',
+      submitPayment: '提交收费'
+    },
+    viewRoomData: {
+      details: '详情',
+      label: '项目',
+      value: '值',
+      room: '房屋',
+      floor: '楼层',
+      owner: '业主',
+      phone: '电话',
+      type: '类型',
+      builtUpArea: '建筑面积',
+      roomArea: '室内面积',
+      rent: '租金',
+      state: '房屋状态',
+      moveInTime: '入住时间'
+    },
+    viewFeeData: {
+      details: '详情',
+      label: '项目',
+      value: '值',
+      feeId: '费用ID',
+      feeFlag: '费用标识',
+      feeType: '费用类型',
+      payerObj: '付费对象',
+      feeName: '费用项',
+      state: '费用状态',
+      createTime: '建账时间',
+      billingStartTime: '计费开始时间',
+      billingEndTime: '计费结束时间',
+      batch: '批次'
+    },
+    viewFeeConfigData: {
+      feeItem: '费用项',
+      label: '项目',
+      value: '值',
+      configId: '费用项ID',
+      feeType: '费用类型',
+      feeName: '收费项目',
+      feeFlag: '费用标识',
+      billType: '催缴类型',
+      paymentType: '付费类型',
+      prepay: '预付费',
+      postpay: '后付费',
+      paymentCycle: '缴费周期',
+      billingStartTime: '计费起始时间',
+      billingEndTime: '计费终止时间',
+      formula: '公式',
+      unitPrice: '计费单价',
+      additionalFee: '附加/固定费用'
+    },
+    payFeeUserAccount: {
+      title: '账户信息',
+      accountInfo: '账户信息',
+      refresh: '刷新',
+      select: '选择',
+      accountType: '账户类型',
+      accountName: '账户名',
+      accountAmount: '账户金额',
+      operation: '操作',
+      yuan: '元',
+      prestore: '预存'
+    },
+    payFeeDeposit: {
+      title: '押金信息',
+      depositInfo: '押金信息',
+      refresh: '刷新',
+      payerObj: '收费对象',
+      feeName: '费用项',
+      timeRange: '时间段',
+      amount: '金额',
+      paymentTime: '缴费时间',
+      operation: '操作',
+      refund: '退押金'
+    },
+    refundDepositFee: {
+      title: '请确认您的操作!',
+      alertText: '押金退款后自动存到账户中，您可以从账户中选择缴费，如果退现金给业主，请到业务首页面退押金！',
+      cancel: '点错了',
+      confirm: '确认',
+      success: '退押金成功',
+      error: '退押金失败'
+    },
+    payFeeOrderResult: {
+      title: '缴费提示',
+      success: '缴费成功',
+      receiptTip: '请到业务受理页面补打收据',
+      back: '返回',
+      printSmall: '打印小票',
+      mergePrint: '合并打印',
+      printReceipt: '打印收据'
+    },
+    payFeeOrderConfirm: {
+      title: '收费确认',
+      payerObj: '付费对象：',
+      timeRange: '缴费时间段：',
+      receivable: '应收金额：',
+      discountAmount: '优惠金额：',
+      discountTooltip: '正数：打折减免的金额；负数：需额外缴纳的滞纳金',
+      actualAmount: '实收金额：',
+      deductionAmount: '抵扣金额：',
+      amountPayable: '应缴金额：',
+      integralDeduction: '积分账户抵扣金额：',
+      cashDeduction: '现金账户抵扣金额：',
+      remark: '备注：',
+      authCode: '授权码：',
+      authCodePlaceholder: '请用扫码枪扫码',
+      close: '关闭',
+      confirm: '确定收费'
+    },
+    payFeeDiscount: {
+      title: '折扣信息',
+      discountInfo: '折扣信息',
+      discountType: '折扣类型',
+      discountName: '折扣名称',
+      ruleName: '规则名称',
+      rule: '规则',
+      discountAmount: '折扣金额',
+      discountTooltip: '负数：打折减免的金额；正数：需额外缴纳的滞纳金',
+      yuan: '元',
+      discount: '优惠',
+      penalty: '违约',
+      specialDiscount: '优惠(需要申请)',
+      monthSpec: '月份',
+      penaltySpec: '滞纳金'
+    },
+    payFeeCoupon: {
+      title: '赠送优惠券',
+      couponInfo: '赠送优惠券',
+      ruleName: '赠送规则',
+      couponName: '优惠券名称',
+      quantity: '数量',
+      unit: '张',
+      purpose: '用途'
+    },
+    prestoreAccount2: {
+      title: '预存',
+      receivable: '应收：',
+      actualReceipt: '实收：',
+      prestoreAmount: '预存金额：',
+      amountPlaceholder: '必填，请填写预存金额',
+      remark: '备注：',
+      remarkPlaceholder: '可填，请填写备注',
+      cancel: '取消',
+      save: '保存',
+      amountRequired: '金额不能为空',
+      amountFormat: '金额格式错误',
+      remarkMaxLength: '备注长度不能超过200位',
+      saveSuccess: '预存成功',
+      saveError: '预存失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/payFeeOrderList.vue b/src/views/fee/payFeeOrderList.vue
new file mode 100644
index 0000000..e6e3ad4
--- /dev/null
+++ b/src/views/fee/payFeeOrderList.vue
@@ -0,0 +1,449 @@
+<template>
+  <div class="pay-fee-order-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>{{ $t('payFeeOrder.title') }}</span>
+        <el-button type="primary" size="small" style="float: right;" @click="goBack">
+          <i class="el-icon-close"></i>
+          {{ $t('payFeeOrder.back') }}
+        </el-button>
+      </div>
+
+      <el-row :gutter="20">
+        <el-col :span="14" style="border-right: 1px solid #f4f4f4; padding-left: 30px;">
+          <el-form label-width="120px">
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.feeId')">
+                  <el-link type="primary" @click="viewFee">
+                    {{ payFeeOrderInfo.feeId }}
+                  </el-link>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.feeName')">
+                  <el-link type="primary" @click="viewFeeConfig">
+                    {{ payFeeOrderInfo.feeName }}
+                  </el-link>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.feeType')">
+                  <span>{{ payFeeOrderInfo.feeTypeCdName }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.billingStartTime')">
+                  <span>{{ payFeeOrderInfo.endTime }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row v-if="payFeeOrderInfo.builtUpArea">
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.area')">
+                  <span>{{ payFeeOrderInfo.builtUpArea }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.unitPrice')">
+                  <span>{{ payFeeOrderInfo.squarePrice }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row v-if="payFeeOrderInfo.builtUpArea">
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.additionalFee')">
+                  <span>{{ payFeeOrderInfo.additionalAmount }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+            <el-row v-else>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.fixedFee')">
+                  <span>{{ payFeeOrderInfo.additionalAmount }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.ownerAccount')">
+                  <el-checkbox v-model="useAccount" @change="handleAccountChange"></el-checkbox>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.giftPoints')">
+                  <span>{{ payFeeOrderInfo.integralQuantity }}</span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+
+            <el-row>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.receivable')" style="line-height: 50px;">
+                  <span style="font-size: 30px; color: red;">￥{{ payFeeOrderInfo.totalFeePrice }}</span>
+                </el-form-item>
+              </el-col>
+              <el-col :span="12">
+                <el-form-item :label="$t('payFeeOrder.amountPayable')" style="line-height: 50px;">
+                  <span style="font-size: 30px; color: red;">
+                    ￥{{ payFeeOrderInfo.accountAmount >= payFeeOrderInfo.receivedAmount ? '0.00' :
+                      (payFeeOrderInfo.receivedAmount - payFeeOrderInfo.accountAmount).toFixed(2) }}
+                  </span>
+                </el-form-item>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-col>
+
+        <el-col :span="7" style="padding-left: 30px;">
+          <el-form label-width="100px">
+            <el-form-item :label="$t('payFeeOrder.paymentTime')">
+              <el-date-picker v-model="payFeeOrderInfo.createTime" type="datetime"
+                :placeholder="$t('payFeeOrder.paymentTimePlaceholder')" style="width: 100%;" readonly>
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item v-if="payFeeOrderInfo.feeFlag != '2006012'" :label="$t('payFeeOrder.paymentCycle')">
+              <el-select v-model="payFeeOrderInfo.tempCycles" :placeholder="$t('payFeeOrder.selectPaymentCycle')"
+                style="width: 100%;" @change="changeMonth">
+                <el-option v-for="item in payFeeOrderInfo.paymentCycles" :key="item"
+                  :label="item + $t('payFeeOrder.month')" :value="item">
+                </el-option>
+                <el-option :value="-102" :label="$t('payFeeOrder.customCycle')"></el-option>
+                <el-option :value="-101" :label="$t('payFeeOrder.customAmount')"></el-option>
+                <el-option :value="-103" :label="$t('payFeeOrder.customEndTime')"></el-option>
+                <el-option :value="-105" :label="$t('payFeeOrder.customTimeRange')"></el-option>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item v-if="payFeeOrderInfo.tempCycles == '-102'" :label="$t('payFeeOrder.actualCycle')">
+              <el-input v-model="payFeeOrderInfo.cycles" :placeholder="$t('payFeeOrder.inputActualCycle')"
+                @change="changeCycle">
+              </el-input>
+            </el-form-item>
+
+            <el-form-item v-show="payFeeOrderInfo.tempCycles == '-103'" :label="$t('payFeeOrder.endTime')">
+              <el-date-picker v-model="payFeeOrderInfo.custEndTime" type="date"
+                :placeholder="$t('payFeeOrder.selectEndTime')" style="width: 100%;">
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item v-show="payFeeOrderInfo.tempCycles == '-105'" :label="$t('payFeeOrder.paymentPeriod')">
+              <el-date-picker v-model="payFeeOrderInfo.customStartTime" type="date"
+                :placeholder="$t('payFeeOrder.selectStartTime')" style="width: 100%; margin-bottom: 10px;">
+              </el-date-picker>
+              <el-date-picker v-model="payFeeOrderInfo.customEndTime" type="date"
+                :placeholder="$t('payFeeOrder.selectEndTime')" style="width: 100%;">
+              </el-date-picker>
+            </el-form-item>
+
+            <el-form-item :label="$t('payFeeOrder.paymentMethod')">
+              <el-select v-model="payFeeOrderInfo.primeRate" :placeholder="$t('payFeeOrder.selectPaymentMethod')"
+                style="width: 100%;">
+                <template v-for="(item, index) in payFeeOrderInfo.primeRates">
+                  <el-option v-if="item.statusCd != '5' && item.statusCd != '6' && item.statusCd != '8'" :key="index"
+                    :label="item.name" :value="item.statusCd">
+                  </el-option>
+                </template>
+              </el-select>
+            </el-form-item>
+
+            <el-form-item :label="$t('payFeeOrder.actualReceipt')">
+              <el-input v-if="payFeeOrderInfo.receivedAmountSwitch == '1'" v-model="payFeeOrderInfo.receivedAmount"
+                :placeholder="$t('payFeeOrder.inputActualAmount')">
+              </el-input>
+              <span v-if="payFeeOrderInfo.receivedAmountSwitch == '2'" style="font-size: 15px;">
+                ￥{{ payFeeOrderInfo.receivedAmount }}
+              </span>
+            </el-form-item>
+
+            <el-form-item :label="$t('payFeeOrder.remark')">
+              <el-input type="textarea" v-model="payFeeOrderInfo.remark" :placeholder="$t('payFeeOrder.inputRemark')">
+              </el-input>
+            </el-form-item>
+
+            <el-row style="margin-top: 30px;">
+              <el-col :span="10" :offset="1">
+                <el-button v-if="payFeeOrderInfo.primeRate == '3' || payFeeOrderInfo.primeRate == '4'" type="success"
+                  size="medium" style="width: 100%;" @click="openPayFee('qrCode')">
+                  {{ $t('payFeeOrder.scanPayment') }}
+                </el-button>
+              </el-col>
+              <el-col :span="10" :offset="2">
+                <el-button v-if="payFeeOrderInfo.offlinePayFeeSwitch != '2'" type="primary" size="medium"
+                  style="width: 100%;" @click="openPayFee('common')">
+                  {{ $t('payFeeOrder.submitPayment') }}
+                </el-button>
+              </el-col>
+            </el-row>
+          </el-form>
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <pay-fee-user-account ref="payFeeUserAccount"></pay-fee-user-account>
+    <pay-fee-deposit ref="payFeeDeposit"></pay-fee-deposit>
+    <pay-fee-order-result ref="payFeeOrderResult"></pay-fee-order-result>
+    <pay-fee-order-confirm ref="payFeeOrderConfirm"></pay-fee-order-confirm>
+    <pay-fee-discount ref="payFeeDiscount"></pay-fee-discount>
+    <pay-fee-coupon ref="payFeeCoupon"></pay-fee-coupon>
+    <prestore-account2 ref="prestoreAccount2"></prestore-account2>
+    <view-room-data ref="viewRoomData"></view-room-data>
+    <view-fee-data ref="viewFeeData"></view-fee-data>
+    <view-fee-config-data ref="viewFeeConfigData"></view-fee-config-data>
+  </div>
+</template>
+
+<script>
+import { getDict } from '@/api/community/communityApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import PayFeeUserAccount from '@/components/fee/payFeeUserAccount'
+import PayFeeDeposit from '@/components/fee/payFeeDeposit'
+import PayFeeOrderResult from '@/components/fee/payFeeOrderResult'
+import PayFeeOrderConfirm from '@/components/fee/payFeeOrderConfirm'
+import PayFeeDiscount from '@/components/fee/payFeeDiscount'
+import PayFeeCoupon from '@/components/fee/payFeeCoupon'
+import PrestoreAccount2 from '@/components/fee/prestoreAccount2'
+import ViewRoomData from '@/components/fee/viewRoomData'
+import ViewFeeData from '@/components/fee/viewFeeData'
+import ViewFeeConfigData from '@/components/fee/viewFeeConfigData'
+import { listFeeObj } from '@/api/fee/payFeeOrderApi'
+import { dateAdd, dateSub } from '@/utils/dateUtil'
+
+export default {
+  name: 'PayFeeOrderList',
+  components: {
+    PayFeeUserAccount,
+    PayFeeDeposit,
+    PayFeeOrderResult,
+    PayFeeOrderConfirm,
+    PayFeeDiscount,
+    PayFeeCoupon,
+    PrestoreAccount2,
+    ViewRoomData,
+    ViewFeeData,
+    ViewFeeConfigData
+  },
+  data() {
+    return {
+      payFeeOrderInfo: {
+        feeId: '',
+        feeName: '',
+        feeTypeCdName: '',
+        feeTypeCd: '',
+        primeRates: [],
+        primeRate: '',
+        endTime: '',
+        feeFlag: '',
+        feePrice: 0.00,
+        tempCycles: '',
+        cycles: '',
+        paymentCycles: [],
+        totalFeePrice: 0.00,
+        receivedAmount: '',
+        receivedAmountNumber: '',
+        communityId: '',
+        payerObjName: '',
+        payerObjId: '',
+        payerObjType: '',
+        remark: '',
+        builtUpArea: 0.0,
+        squarePrice: 0.0,
+        additionalAmount: 0.0,
+        receiptId: '',
+        showEndTime: '',
+        accountList: [],
+        integralAmount: '',
+        cashAmount: '',
+        couponAmount: '',
+        selectDiscount: [],
+        totalDiscountMoney: 0.0,
+        scale: 1,
+        decimalPlace: 2,
+        receivedAmountSwitch: '1',
+        createTime: new Date(),
+        accountAmount: 0.0,
+        viewAccountAmount: 0.0,
+        deductionAmount: 0.0,
+        redepositAmount: 0.0,
+        selectUserAccount: [],
+        authCode: '',
+        orderId: '',
+        offlinePayFeeSwitch: '1',
+        flag: '',
+        custEndTime: '',
+        configId: '',
+        roomName: '',
+        sign: 1,
+        integralQuantity: 0,
+        customStartTime: '',
+        customEndTime: ''
+      },
+      useAccount: true,
+      loading: false
+    }
+  },
+  created() {
+    this.initData()
+  },
+  methods: {
+    async initData() {
+      try {
+        this.payFeeOrderInfo.communityId = await getCommunityId()
+        this.payFeeOrderInfo.feeId = this.$route.query.feeId || ''
+        this.listAndComputeFeeInfo()
+        this.getDictData()
+      } catch (error) {
+        console.error('初始化数据失败:', error)
+      }
+    },
+    async getDictData() {
+      try {
+        const data = await getDict('pay_fee_detail', 'prime_rate')
+        this.payFeeOrderInfo.primeRates = data
+      } catch (error) {
+        console.error('获取字典数据失败:', error)
+      }
+    },
+    goBack() {
+      this.$router.go(-1)
+    },
+    viewFee() {
+      this.$refs.viewFeeData.open({
+        feeId: this.payFeeOrderInfo.feeId
+      })
+    },
+    viewFeeConfig() {
+      this.$refs.viewFeeConfigData.open({
+        configId: this.payFeeOrderInfo.configId
+      })
+    },
+    viewRoomData() {
+      this.$refs.viewRoomData.open({
+        roomId: this.payFeeOrderInfo.payerObjId
+      })
+    },
+    handleAccountChange(val) {
+      if (val) {
+        this.$refs.payFeeUserAccount.open({
+          feeId: this.payFeeOrderInfo.feeId
+        })
+      } else {
+        this.$refs.payFeeUserAccount.close()
+      }
+    },
+    openPayFee(type) {
+      this.$refs.payFeeOrderConfirm.open({
+        ...this.payFeeOrderInfo,
+        payType: type
+      })
+    },
+    changeMonth(cycles) {
+      // 实现周期变更逻辑
+      console.log(cycles)
+    },
+    changeCycle(cycles) {
+      // 实现周期变更逻辑
+      console.log(cycles)
+    },
+    async listAndComputeFeeInfo(_cycles) {
+      // 实现费用计算逻辑
+      if (!_cycles) {
+        _cycles = 1;
+      }
+
+      let param = {
+          communityId: getCommunityId(),
+          feeId: this.payFeeOrderInfo.feeId,
+          page: 1,
+          row: 1,
+          cycle: _cycles
+    
+      };
+      if (_cycles && _cycles == 103) {
+        let _custEndTime = dateAdd(this.payFeeOrderInfo.custEndTime);
+        //前端选择会默认 少一天 所以 加上一天
+        param.params.custEndTime = _custEndTime;
+      }
+      if (_cycles && _cycles == 105) {
+        let _customEndTime = dateAdd(this.payFeeOrderInfo.customEndTime);
+        //前端选择会默认 少一天 所以 加上一天
+        param.params.customEndTime = _customEndTime;
+        param.params.customStartTime = this.payFeeOrderInfo.customStartTime
+      }
+      const listRoomData = await listFeeObj(param)
+      //发送get请求
+
+      if (Object.prototype.hasOwnProperty.call(listRoomData.data, 'custEndTime')) {
+        delete listRoomData.data.custEndTime
+      }
+      if (Object.prototype.hasOwnProperty.call(listRoomData.data, 'customEndTime')) {
+        delete listRoomData.data.customEndTime
+      }
+      this.payFeeOrderInfo = { ...this.payFeeOrderInfo, ...listRoomData.data }
+      // 由于返回的键与档期那页面自定义的键不一致，单独赋值toFiexedSign
+      //vc.emit('payFeeOrder', 'initData', listRoomData.data);
+      this.payFeeOrderInfo.totalFeePrice = listRoomData.data.feeTotalPrice;
+      this.payFeeOrderInfo.receivedAmount = listRoomData.data.feeTotalPrice;
+      let _deadlineTime = new Date(listRoomData.data.deadlineTime);
+      let _maxEndTime = new Date(listRoomData.data.maxEndTime);
+      if (_deadlineTime.getTime() > _maxEndTime.getTime()) {
+        this.$message.warning('超过最大计费结束时间，' + dateSub(listRoomData.data.maxEndTime, listRoomData.data.feeFlag) + ",请用更小缴费周期或者自定义结束时间缴费");
+        return;
+      }
+      // vc.emit('payFeeDiscount', 'computeFeeDiscount', {
+      //   feeId: this.payFeeOrderInfo.feeId,
+      //   cycles: _cycles,
+      //   payerObjId: this.payFeeOrderInfo.payerObjId,
+      //   payerObjType: this.payFeeOrderInfo.payerObjType,
+      //   endTime: this.payFeeOrderInfo.endTime,
+      //   custEndTime: this.payFeeOrderInfo.custEndTime
+      // });
+      // vc.emit('payFeeCoupon', 'computeFeeCoupon', {
+      //   feeId: this.payFeeOrderInfo.feeId,
+      //   cycles: _cycles,
+      //   payerObjId: this.payFeeOrderInfo.payerObjId,
+      //   payerObjType: this.payFeeOrderInfo.payerObjType,
+      //   endTime: this.payFeeOrderInfo.endTime
+      // });
+      // vc.emit('payFeeDeposit', 'computeFeeDeposit', {
+      //   payerObjId: this.payFeeOrderInfo.payerObjId,
+      //   payerObjType: this.payFeeOrderInfo.payerObjType,
+      // });
+      this._listFeeIntegral(_cycles);
+
+
+    },
+    async _listFeeIntegral(_cycles) {
+      // 实现积分计算逻辑
+      console.log(_cycles)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.pay-fee-order-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+  }
+
+  .el-form-item {
+    margin-bottom: 15px;
+  }
+
+  .el-date-editor,
+  .el-select,
+  .el-input {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/printPayFeeBangTaiList.vue b/src/views/fee/printPayFeeBangTaiList.vue
index fbd4c34..7c5ac5d 100644
--- a/src/views/fee/printPayFeeBangTaiList.vue
+++ b/src/views/fee/printPayFeeBangTaiList.vue
@@ -111,6 +111,7 @@
 import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeBangTaiApi'
 import { getCommunityId } from '@/api/community/communityApi'
 import { getUserId,getUserName } from '@/api/user/userApi'
+import { dateFormat } from '@/utils/dateUtil'
 
 export default {
   name: 'PrintPayFeeBangTaiList',
@@ -246,7 +247,7 @@ export default {
     },
     formatDate(date) {
       if (!date) return ''
-      return this.$moment(date).format('YYYY-MM-DD')
+      return dateFormat(date)
     },
     changeNumMoneyToChinese(num) {
       // 这里实现数字转中文大写金额的逻辑
diff --git a/src/views/fee/printPayFeeList.vue b/src/views/fee/printPayFeeList.vue
index 08e49bf..760b191 100644
--- a/src/views/fee/printPayFeeList.vue
+++ b/src/views/fee/printPayFeeList.vue
@@ -113,6 +113,7 @@
 import { getCommunityId } from '@/api/community/communityApi'
 import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeApi'
 import { getUserId,getUserName } from '@/api/user/userApi'
+import { dateFormat } from '@/utils/dateUtil'
 
 export default {
   name: 'PrintPayFeeList',
@@ -240,7 +241,7 @@ export default {
     },
     dateFormat(date) {
       if (!date) return ''
-      return this.$moment(date).format('YYYY-MM-DD')
+      return dateFormat(date)
     },
     changeNumMoneyToChinese(num) {
       // 这里实现数字转中文大写金额的逻辑
diff --git a/src/views/fee/propertyFeeList.vue b/src/views/fee/propertyFeeList.vue
index 173ac05..b439cab 100644
--- a/src/views/fee/propertyFeeList.vue
+++ b/src/views/fee/propertyFeeList.vue
@@ -134,6 +134,7 @@ import { queryFeeDetail } from '@/api/fee/propertyFeeApi'
 import ViewMainFee from '@/components/fee/viewMainFee'
 import ReturnPayFee from '@/components/fee/returnPayFee'
 import ViewFeeDetailDiscount from '@/components/fee/viewFeeDetailDiscount'
+import { dateFormat } from '@/utils/dateUtil'
 
 export default {
   name: 'PropertyFeeList',
@@ -166,7 +167,7 @@ export default {
   methods: {
     dateFormat(date) {
       if (!date) return ''
-      return this.$moment(date).format('YYYY-MM-DD')
+      return dateFormat(date)
     },
     async listFeeDetail(page = 1, row = 10) {
       try {
diff --git a/src/views/layout/layout.vue b/src/views/layout/layout.vue
index adc5f30..1cc8217 100644
--- a/src/views/layout/layout.vue
+++ b/src/views/layout/layout.vue
@@ -268,7 +268,12 @@ export default {
       }
       console.log(_href, _tabName)
 
-      this.$router.push(_href)
+      this.$router.push(_href).catch(err => {
+        // 忽略重复导航错误
+        if (err.name !== 'NavigationDuplicated') {
+          throw err
+        }
+      })
     },
   }
 }
diff --git a/src/views/oa/staffAttendanceManageList.vue b/src/views/oa/staffAttendanceManageList.vue
index 61a199d..be1759b 100644
--- a/src/views/oa/staffAttendanceManageList.vue
+++ b/src/views/oa/staffAttendanceManageList.vue
@@ -84,6 +84,7 @@ import {
   queryAttendanceClassesTask,
   
 } from '@/api/oa/staffAttendanceManageApi'
+import { dateFormat } from '@/utils/dateUtil'
 
 export default {
   name: 'StaffAttendanceManageList',
@@ -221,7 +222,7 @@ export default {
 
     formatTime(time) {
       if (!time) return ''
-      return this.$moment(time).format('HH:mm:ss')
+      return dateFormat(time)
     },
 
     checkInLog(day) {
diff --git a/src/views/simplify/simplifyAcceptanceList.vue b/src/views/simplify/simplifyAcceptanceList.vue
index 666585a..0050195 100644
--- a/src/views/simplify/simplifyAcceptanceList.vue
+++ b/src/views/simplify/simplifyAcceptanceList.vue
@@ -266,9 +266,9 @@
     <car-create-fee-add ref="carCreateFeeAdd"></car-create-fee-add>
     <add-meter-water ref="addMeterWater"></add-meter-water>
     <add-proxy-fee ref="addProxyFee"></add-proxy-fee>
-    <search-room ref="searchRoom" emit-choose-room="simplifyAcceptance" emit-load-data="list" :room-flag="1"
-      :show-search-condition="false"></search-room>
     <edit-machine-translate ref="editMachineTranslate"></edit-machine-translate>
+    <room-tree ref="roomTree" @selectRoom="selectRoom" />
+
   </div>
 </template>
 
@@ -297,7 +297,7 @@ import RoomCreateFeeAdd from '@/components/fee/roomCreateFeeAdd'
 import CarCreateFeeAdd from '@/components/fee/carCreateFeeAdd'
 import AddMeterWater from '@/components/fee/addMeterWater'
 import AddProxyFee from '@/components/fee/addProxyFee'
-import SearchRoom from '@/components/room/searchRoom'
+import roomTree from '@/components/room/roomTree'
 import EditMachineTranslate from '@/components/machine/editMachineTranslate'
 import InputSearchOwner from '@/components/report/InputSearchOwner'
 import InputSearchRoom from '@/components/fee/inputSearchRoom'
@@ -328,7 +328,7 @@ export default {
     CarCreateFeeAdd,
     AddMeterWater,
     AddProxyFee,
-    SearchRoom,
+    roomTree,
     EditMachineTranslate,
     InputSearchOwner,
     InputSearchRoom,
@@ -478,8 +478,7 @@ export default {
         Object.assign(this.simplifyAcceptanceInfo, _rooms[0])
         this.simplifyAcceptanceInfo.roomRemark = _rooms[0].remark
         this.simplifyAcceptanceInfo.roomName = _rooms[0].floorNum + '栋' + _rooms[0].unitNum + '单元' + _rooms[0].roomNum + '室'
-        this.$refs.simplifyRoomFee.$emit('switch', this.simplifyAcceptanceInfo)
-
+        this.changeTab('simplifyRoomFee')
         // 计算押金
         this.computeDeposit()
       } catch (error) {
@@ -568,10 +567,14 @@ export default {
       }
       this.changeTab('simplifyRoomFee')
     },
+    selectRoom(room) {
+      this.simplifyAcceptanceInfo.roomId = room.roomId
+      this.simplifyAcceptanceInfo.roomName = room.roomName
+      this.simplifyAcceptanceInfo.searchValue = room.roomName
+      this._doSearch()
+    },
     _simplifyAcceptanceChooseRoom() {
-      this.$refs.searchRoom.$emit('openRoomTree', {
-        callName: 'simplifyAcceptance'
-      })
+      this.$refs.roomTree.open()
     },
     _handover() {
       this.$router.push('/pages/property/handover')