From f99ceb4fd18352b5bea8fce2ae96b1d295819c57 Mon Sep 17 00:00:00 2001
From: wuxw <928255095@qq.com>
Date: Mon, 30 Jun 2025 19:25:27 +0800
Subject: [PATCH] 收据优化完成

---
 src/api/fee/feeReceiptApi.js                         |  40 ++++++++++++++++++++++++++++++++++++++++
 src/api/fee/listApplyRoomDiscountRecordApi.js        |  98 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/printPayFeeApi.js                        |  56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/printPayFeeBangTaiApi.js                 |  49 +++++++++++++++++++++++++++++++++++++++++++++++++
 src/api/fee/printSmallPayFeeApi.js                   |  92 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/applyRoomDiscountRecord.vue       | 137 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/deleteApplyRoomDiscountRecord.vue |  75 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/components/fee/uploadImageUrl.vue                | 186 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++----------------------------------------------------------------------------------------------------------
 src/components/fee/uploadVedio.vue                   | 107 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/i18n/feeI18n.js                                  |  15 +++++++++++++++
 src/router/feeRouter.js                              |  17 ++++++++++++++---
 src/router/index.js                                  |  35 +++++++++++++++++++++++++----------
 src/views/fee/applyRoomDiscountManageList.vue        |   2 +-
 src/views/fee/discountTypeLang.js                    |  20 --------------------
 src/views/fee/feeReceiptLang.js                      |  70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/feeReceiptList.vue                     | 223 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/listApplyRoomDiscountRecordLang.js     |  84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/listApplyRoomDiscountRecordList.vue    | 196 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/printPayFeeBangTaiLang.js              |  60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/printPayFeeBangTaiList.vue             | 303 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/printPayFeeLang.js                     |  60 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/printPayFeeList.vue                    | 292 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/printSmallPayFeeLang.js                |  70 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/fee/printSmallPayFeeList.vue               | 318 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 24 files changed, 2465 insertions(+), 140 deletions(-)
 create mode 100644 src/api/fee/feeReceiptApi.js
 create mode 100644 src/api/fee/listApplyRoomDiscountRecordApi.js
 create mode 100644 src/api/fee/printPayFeeApi.js
 create mode 100644 src/api/fee/printPayFeeBangTaiApi.js
 create mode 100644 src/api/fee/printSmallPayFeeApi.js
 create mode 100644 src/components/fee/applyRoomDiscountRecord.vue
 create mode 100644 src/components/fee/deleteApplyRoomDiscountRecord.vue
 create mode 100644 src/components/fee/uploadVedio.vue
 create mode 100644 src/views/fee/feeReceiptLang.js
 create mode 100644 src/views/fee/feeReceiptList.vue
 create mode 100644 src/views/fee/listApplyRoomDiscountRecordLang.js
 create mode 100644 src/views/fee/listApplyRoomDiscountRecordList.vue
 create mode 100644 src/views/fee/printPayFeeBangTaiLang.js
 create mode 100644 src/views/fee/printPayFeeBangTaiList.vue
 create mode 100644 src/views/fee/printPayFeeLang.js
 create mode 100644 src/views/fee/printPayFeeList.vue
 create mode 100644 src/views/fee/printSmallPayFeeLang.js
 create mode 100644 src/views/fee/printSmallPayFeeList.vue

diff --git a/src/api/fee/feeReceiptApi.js b/src/api/fee/feeReceiptApi.js
new file mode 100644
index 0000000..65c0163
--- /dev/null
+++ b/src/api/fee/feeReceiptApi.js
@@ -0,0 +1,40 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询收据列表
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印页面配置
+export function listFeePrintPage(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintPage.listFeePrintPage',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/listApplyRoomDiscountRecordApi.js b/src/api/fee/listApplyRoomDiscountRecordApi.js
new file mode 100644
index 0000000..73c5699
--- /dev/null
+++ b/src/api/fee/listApplyRoomDiscountRecordApi.js
@@ -0,0 +1,98 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询验房跟踪记录列表
+export function queryApplyRoomDiscountRecord(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/applyRoomDiscountRecord/queryApplyRoomDiscountRecord',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 添加验房跟踪记录
+export function addApplyRoomDiscountRecord(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/applyRoomDiscountRecord/addApplyRoomDiscountRecord',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 删除验房跟踪记录
+export function cutApplyRoomDiscountRecord(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/applyRoomDiscountRecord/cutApplyRoomDiscountRecord',
+      method: 'post',
+      data: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传图片
+export function uploadImage(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadImage',
+      method: 'post',
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      data
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 上传视频
+export function uploadVedio(data, config) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/uploadVedio',
+      method: 'post',
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+      data,
+      ...config
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/printPayFeeApi.js b/src/api/fee/printPayFeeApi.js
new file mode 100644
index 0000000..9c99bb8
--- /dev/null
+++ b/src/api/fee/printPayFeeApi.js
@@ -0,0 +1,56 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询收费单据
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询收费单据详情
+export function queryFeeReceiptDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceiptDetail',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印规范
+export function queryFeePrintSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintSpec/queryFeePrintSpec',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/printPayFeeBangTaiApi.js b/src/api/fee/printPayFeeBangTaiApi.js
new file mode 100644
index 0000000..e04b747
--- /dev/null
+++ b/src/api/fee/printPayFeeBangTaiApi.js
@@ -0,0 +1,49 @@
+import request from '@/utils/request'
+
+// 查询缴费收据
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询缴费收据详情
+export function queryFeeReceiptDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceiptDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印规范
+export function queryFeePrintSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintSpec/queryFeePrintSpec',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/api/fee/printSmallPayFeeApi.js b/src/api/fee/printSmallPayFeeApi.js
new file mode 100644
index 0000000..217905c
--- /dev/null
+++ b/src/api/fee/printSmallPayFeeApi.js
@@ -0,0 +1,92 @@
+import request from '@/utils/request'
+import { getCommunityId } from '@/api/community/communityApi'
+
+// 查询收据信息
+export function queryFeeReceipt(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceipt',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询收据详情
+export function queryFeeReceiptDetail(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feeReceipt/queryFeeReceiptDetail',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印规格
+export function queryFeePrintSpec(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/feePrintSpec/queryFeePrintSpec',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 查询打印机列表
+export function listMachinePrinter(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/printer/listMachinePrinter',
+      method: 'get',
+      params: {
+        ...params,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 提交云打印
+export function printPayFeeDetail(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/print/printPayFeeDetail',
+      method: 'post',
+      data: {
+        ...data,
+        communityId: getCommunityId()
+      }
+    }).then(response => {
+      resolve(response.data)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/fee/applyRoomDiscountRecord.vue b/src/components/fee/applyRoomDiscountRecord.vue
new file mode 100644
index 0000000..6e253d5
--- /dev/null
+++ b/src/components/fee/applyRoomDiscountRecord.vue
@@ -0,0 +1,137 @@
+<template>
+  <el-dialog :title="$t('applyRoomDiscountRecord.title')" :visible.sync="visible" width="60%"
+    :before-close="handleClose">
+    <el-form :model="form" label-width="120px" label-position="left">
+      <el-form-item :label="$t('applyRoomDiscountRecord.room')">
+        <el-input v-model="form.roomName" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('applyRoomDiscountRecord.status')">
+        <el-input v-model="form.stateName" disabled></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('applyRoomDiscountRecord.isViolation')" prop="isTrue" required>
+        <el-select v-model="form.isTrue" style="width:100%">
+          <el-option :value="null" :label="$t('applyRoomDiscountRecord.selectViolation')" disabled></el-option>
+          <el-option :value="true" :label="$t('common.yes')"></el-option>
+          <el-option :value="false" :label="$t('common.no')"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="$t('applyRoomDiscountRecord.remark')" prop="remark" required>
+        <el-input type="textarea" v-model="form.remark"
+          :placeholder="$t('applyRoomDiscountRecord.remarkPlaceholder')"></el-input>
+      </el-form-item>
+      <el-form-item :label="$t('applyRoomDiscountRecord.uploadImages')">
+        <upload-image-url ref="uploadImageUrl" />
+      </el-form-item>
+      <el-form-item :label="$t('applyRoomDiscountRecord.uploadVideo')">
+        <upload-vedio ref="uploadVedio" />
+      </el-form-item>
+    </el-form>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="saveApplyRoomDiscountRecordInfo">{{ $t('common.save') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { addApplyRoomDiscountRecord } from '@/api/fee/listApplyRoomDiscountRecordApi'
+import UploadImageUrl from '@/components/upload/UploadImageUrl'
+import UploadVedio from './uploadVedio'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ApplyRoomDiscountRecord',
+  components: {
+    UploadImageUrl,
+    UploadVedio
+  },
+  props: {
+    callBackFunction: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        ardId: '',
+        roomName: '',
+        state: '',
+        stateName: '',
+        remark: '',
+        roomId: '',
+        photos: [],
+        videoName: '',
+        url: '',
+        detailType: '1001',
+        isTrue: null,
+        communityId: ''
+      }
+    }
+  },
+  methods: {
+    open(params) {
+      this.resetForm()
+      this.form.ardId = params[0]
+      this.form.state = params[1]
+      this.form.stateName = params[2]
+      this.form.roomId = params[3]
+      this.form.roomName = params[4]
+      this.form.communityId = getCommunityId()
+      this.visible = true
+    },
+    resetForm() {
+      this.form = {
+        ardId: '',
+        roomName: '',
+        state: '',
+        stateName: '',
+        remark: '',
+        roomId: '',
+        photos: [],
+        videoName: '',
+        url: '',
+        detailType: '1001',
+        isTrue: null,
+        communityId: ''
+      }
+      this.$refs.uploadImageUrl.clear()
+      this.$refs.uploadVedio.clear()
+    },
+    handleClose() {
+      this.visible = false
+    },
+    validateForm() {
+      if (this.form.isTrue === null) {
+        this.$message.error(this.$t('applyRoomDiscountRecord.violationRequired'))
+        return false
+      }
+      if (!this.form.remark) {
+        this.$message.error(this.$t('applyRoomDiscountRecord.remarkRequired'))
+        return false
+      }
+      return true
+    },
+    async saveApplyRoomDiscountRecordInfo() {
+      if (!this.validateForm()) return
+
+      try {
+        this.form.photos = this.$refs.uploadImageUrl.getPhotos()
+        this.form.videoName = this.$refs.uploadVedio.getVideoName()
+
+        const res = await addApplyRoomDiscountRecord(this.form)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.saveSuccess'))
+          this.handleClose()
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('common.saveFailed'))
+      }
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/src/components/fee/deleteApplyRoomDiscountRecord.vue b/src/components/fee/deleteApplyRoomDiscountRecord.vue
new file mode 100644
index 0000000..086234d
--- /dev/null
+++ b/src/components/fee/deleteApplyRoomDiscountRecord.vue
@@ -0,0 +1,75 @@
+<template>
+  <el-dialog
+    :title="$t('deleteApplyRoomDiscountRecord.title')"
+    :visible.sync="visible"
+    width="30%"
+    :before-close="handleClose"
+  >
+    <div class="delete-content">
+      <i class="el-icon-warning" style="color: #e6a23c; font-size: 24px;"></i>
+      <span style="margin-left: 10px;">{{ $t('deleteApplyRoomDiscountRecord.confirmText') }}</span>
+    </div>
+    <span slot="footer" class="dialog-footer">
+      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
+      <el-button type="primary" @click="confirmDelete" :loading="loading">{{ $t('common.confirm') }}</el-button>
+    </span>
+  </el-dialog>
+</template>
+
+<script>
+import { cutApplyRoomDiscountRecord } from '@/api/fee/listApplyRoomDiscountRecordApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'DeleteApplyRoomDiscountRecord',
+  data() {
+    return {
+      visible: false,
+      loading: false,
+      record: null
+    }
+  },
+  methods: {
+    open(record) {
+      this.record = record
+      this.visible = true
+    },
+    handleClose() {
+      this.visible = false
+    },
+    async confirmDelete() {
+      if (!this.record) return
+      
+      this.loading = true
+      try {
+        const params = {
+          ardrId: this.record.ardrId,
+          communityId: getCommunityId()
+        }
+        
+        const res = await cutApplyRoomDiscountRecord(params)
+        if (res.code === 0) {
+          this.$message.success(this.$t('common.deleteSuccess'))
+          this.handleClose()
+          this.$emit('success')
+        } else {
+          this.$message.error(res.msg)
+        }
+      } catch (error) {
+        this.$message.error(this.$t('common.deleteFailed'))
+      } finally {
+        this.loading = false
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.delete-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 20px 0;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/fee/uploadImageUrl.vue b/src/components/fee/uploadImageUrl.vue
index 5d213c6..6238310 100644
--- a/src/components/fee/uploadImageUrl.vue
+++ b/src/components/fee/uploadImageUrl.vue
@@ -1,41 +1,46 @@
 <template>
   <div class="upload-image-container">
-    <div v-for="(image, index) in photos" :key="index" class="image-item">
-      <img :src="getImageUrl(image)" @error="handleImageError" />
-      <span class="remove-icon" @click="removeImage(index)">
-        <i class="el-icon-delete"></i>
-      </span>
+    <div class="image-preview">
+      <div v-for="(image, index) in photos" :key="index" class="image-item">
+        <el-image
+          :src="image.url"
+          fit="cover"
+          :preview-src-list="previewList"
+          style="width: 100px; height: 100px"
+        ></el-image>
+        <i class="el-icon-delete delete-icon" @click="removeImage(index)"></i>
+      </div>
+      <div v-if="photos.length < maxCount" class="upload-btn" @click="triggerUpload">
+        <i class="el-icon-plus"></i>
+      </div>
     </div>
-    
-    <div v-if="photos.length < imageCount" class="upload-btn" @click="triggerUpload">
-      <i class="el-icon-plus"></i>
-    </div>
-    
-    <input 
+    <input
+      type="file"
       ref="fileInput"
-      type="file" 
-      accept="image/*" 
-      style="display: none" 
+      accept="image/*"
+      style="display: none"
       @change="handleFileChange"
+      multiple
     />
   </div>
 </template>
 
 <script>
-import { uploadFile } from '@/api/common'
+import { uploadImage } from '@/api/fee/listApplyRoomDiscountRecordApi'
+import { getCommunityId } from '@/api/community/communityApi'
 
 export default {
   name: 'UploadImageUrl',
   props: {
-    imageCount: {
+    maxCount: {
       type: Number,
       default: 99
     }
   },
   data() {
     return {
-      photos: [],       // 用于显示的图片数组
-      photosUrl: []     // 实际存储的图片信息数组
+      photos: [],
+      previewList: []
     }
   },
   methods: {
@@ -46,66 +51,47 @@ export default {
       const files = event.target.files
       if (!files || files.length === 0) return
 
-      const file = files[0]
-      if (file.size > 2 * 1024 * 1024) {
-        this.$message.error(this.$t('uploadImage.validate.sizeLimit'))
+      if (files.length + this.photos.length > this.maxCount) {
+        this.$message.error(this.$t('uploadImage.maxCountError', { count: this.maxCount }))
         return
       }
 
-      try {
-        // 显示本地预览
-        const reader = new FileReader()
-        reader.onload = (e) => {
-          this.photos.push(e.target.result)
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i]
+        if (file.size > 2 * 1024 * 1024) {
+          this.$message.error(this.$t('uploadImage.sizeError')))
+          continue
         }
-        reader.readAsDataURL(file)
 
-        // 上传到服务器
-        const formData = new FormData()
-        formData.append('uploadFile', file)
-        formData.append('communityId', this.$store.getters.communityId)
+        try {
+          const formData = new FormData()
+          formData.append('uploadFile', file)
+          formData.append('communityId', getCommunityId())
 
-        const { data } = await uploadFile(formData)
-        this.photosUrl.push(data)
-        this.$emit('change', this.photosUrl)
-      } catch (error) {
-        this.$message.error(this.$t('uploadImage.message.uploadFailed'))
-      } finally {
-        event.target.value = null
+          const res = await uploadImage(formData)
+          if (res.code === 0) {
+            this.photos.push({
+              fileId: res.data.fileId,
+              url: res.data.url
+            })
+            this.previewList.push(res.data.url)
+          }
+        } catch (error) {
+          this.$message.error(this.$t('uploadImage.uploadFailed')))
+        }
       }
+      event.target.value = null
     },
     removeImage(index) {
       this.photos.splice(index, 1)
-      this.photosUrl.splice(index, 1)
-      this.$emit('change', this.photosUrl)
+      this.previewList.splice(index, 1)
     },
-    handleImageError(e) {
-      e.target.src = '/img/noPhoto.jpg'
-    },
-    getImageUrl(image) {
-      if (typeof image === 'string') {
-        if (image.startsWith('http') || image.startsWith('https') || image.startsWith('data:')) {
-          return image
-        }
-        return `/callComponent/download/getFile/file?fileId=${image}&communityId=-1&time=${new Date().getTime()}`
-      }
-      return image.url || '/img/noPhoto.jpg'
+    getPhotos() {
+      return this.photos.map(item => item.fileId)
     },
     clear() {
       this.photos = []
-      this.photosUrl = []
-    },
-    setImages(images) {
-      this.photos = []
-      this.photosUrl = []
-      images.forEach(image => {
-        if (image.startsWith('data:')) {
-          this.photos.push(image)
-          return
-        }
-        this.photosUrl.push({ fileId: image, url: image })
-        this.photos.push(this.getImageUrl(image))
-      })
+      this.previewList = []
     }
   }
 }
@@ -113,57 +99,45 @@ export default {
 
 <style lang="scss" scoped>
 .upload-image-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 10px;
+  .image-preview {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
 
-  .image-item {
-    position: relative;
-    width: 100px;
-    height: 100px;
-    border: 1px dashed #dcdfe6;
-    border-radius: 4px;
-    overflow: hidden;
+    .image-item {
+      position: relative;
+      width: 100px;
+      height: 100px;
 
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
+      .delete-icon {
+        position: absolute;
+        top: -10px;
+        right: -10px;
+        color: #f56c6c;
+        cursor: pointer;
+        font-size: 16px;
+        background: white;
+        border-radius: 50%;
+        padding: 2px;
+      }
     }
 
-    .remove-icon {
-      position: absolute;
-      top: 0;
-      right: 0;
-      color: #f56c6c;
-      background: rgba(255, 255, 255, 0.7);
-      padding: 4px;
+    .upload-btn {
+      width: 100px;
+      height: 100px;
+      border: 1px dashed #dcdfe6;
+      display: flex;
+      justify-content: center;
+      align-items: center;
       cursor: pointer;
-      font-size: 16px;
+      color: #909399;
+      font-size: 24px;
 
       &:hover {
-        color: #f78989;
+        border-color: #409eff;
+        color: #409eff;
       }
     }
   }
-
-  .upload-btn {
-    width: 100px;
-    height: 100px;
-    border: 1px dashed #dcdfe6;
-    border-radius: 4px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    cursor: pointer;
-    color: #8c939d;
-    font-size: 28px;
-    background-color: #f5f7fa;
-
-    &:hover {
-      border-color: #409eff;
-      color: #409eff;
-    }
-  }
 }
 </style>
\ No newline at end of file
diff --git a/src/components/fee/uploadVedio.vue b/src/components/fee/uploadVedio.vue
new file mode 100644
index 0000000..aeba3b8
--- /dev/null
+++ b/src/components/fee/uploadVedio.vue
@@ -0,0 +1,107 @@
+<template>
+  <div class="upload-vedio-container">
+    <div v-if="progress > 0" class="progress-container">
+      <el-progress :percentage="progress" :stroke-width="2"></el-progress>
+      <div class="file-name">{{ fileName }}</div>
+    </div>
+    
+    <el-button 
+      type="primary" 
+      size="small" 
+      @click="triggerUpload"
+      :disabled="uploading"
+    >
+      <i class="el-icon-upload"></i>
+      {{ $t('uploadVedio.uploadButton') }}
+    </el-button>
+    <input 
+      type="file" 
+      ref="fileInput" 
+      accept="video/*" 
+      style="display: none" 
+      @change="handleFileChange"
+    />
+  </div>
+</template>
+
+<script>
+import { uploadVedio } from '@/api/fee/listApplyRoomDiscountRecordApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'UploadVedio',
+  data() {
+    return {
+      fileName: '',
+      realFileName: '',
+      progress: 0,
+      uploading: false
+    }
+  },
+  methods: {
+    triggerUpload() {
+      this.$refs.fileInput.click()
+    },
+    async handleFileChange(event) {
+      const file = event.target.files[0]
+      if (!file) return
+
+      if (file.size > 500 * 1024 * 1024) {
+        this.$message.error(this.$t('uploadVedio.sizeError'))
+        return
+      }
+
+      this.fileName = file.name
+      this.uploading = true
+      this.progress = 0
+
+      try {
+        const formData = new FormData()
+        formData.append('uploadFile', file)
+        formData.append('communityId', getCommunityId())
+
+        const res = await uploadVedio(formData, {
+          onUploadProgress: (progressEvent) => {
+            this.progress = Math.round((progressEvent.loaded * 90) / progressEvent.total)
+          }
+        })
+
+        if (res.code === 0) {
+          this.progress = 100
+          this.realFileName = res.data.realFileName
+          this.$message.success(this.$t('uploadVedio.uploadSuccess'))
+        }
+      } catch (error) {
+        this.$message.error(this.$t('uploadVedio.uploadFailed'))
+      } finally {
+        this.uploading = false
+        event.target.value = null
+      }
+    },
+    getVideoName() {
+      return this.realFileName
+    },
+    clear() {
+      this.fileName = ''
+      this.realFileName = ''
+      this.progress = 0
+      this.uploading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.upload-vedio-container {
+  .progress-container {
+    margin-bottom: 10px;
+    
+    .file-name {
+      font-size: 12px;
+      color: #606266;
+      margin-top: 5px;
+      word-break: break-all;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/i18n/feeI18n.js b/src/i18n/feeI18n.js
index 98785bf..3f97d0f 100644
--- a/src/i18n/feeI18n.js
+++ b/src/i18n/feeI18n.js
@@ -5,6 +5,11 @@ import { messages as returnPayFeeManageMessages } from '../views/fee/returnPayFe
 import { messages as feeDiscountManageMessages } from '../views/fee/feeDiscountManageLang'
 import { messages as applyRoomDiscountManageMessages } from '../views/fee/applyRoomDiscountManageLang'
 import { messages as discountTypeMessages } from '../views/fee/discountTypeLang'
+import { messages as listApplyRoomDiscountRecordMessages } from '../views/fee/listApplyRoomDiscountRecordLang'
+import { messages as feeReceiptMessages } from '../views/fee/feeReceiptLang'
+import { messages as printPayFeeMessages } from '../views/fee/printPayFeeLang'
+import { messages as printPayFeeBangTaiMessages } from '../views/fee/printPayFeeBangTaiLang'
+import { messages as printSmallPayFeeMessages } from '../views/fee/printSmallPayFeeLang'
 
 export const messages = {
     en: {
@@ -15,6 +20,11 @@ export const messages = {
         ...feeDiscountManageMessages.en,
         ...applyRoomDiscountManageMessages.en,
         ...discountTypeMessages.en,
+        ...listApplyRoomDiscountRecordMessages.en,
+        ...feeReceiptMessages.en,
+        ...printPayFeeMessages.en,
+        ...printPayFeeBangTaiMessages.en,
+        ...printSmallPayFeeMessages.en,
     },
     zh: {
         ...contractCreateFeeMessages.zh,
@@ -24,5 +34,10 @@ export const messages = {
         ...feeDiscountManageMessages.zh,
         ...applyRoomDiscountManageMessages.zh,
         ...discountTypeMessages.zh,
+        ...listApplyRoomDiscountRecordMessages.zh,
+        ...feeReceiptMessages.zh,
+        ...printPayFeeMessages.zh,
+        ...printPayFeeBangTaiMessages.zh,
+        ...printSmallPayFeeMessages.zh,
     }
 }
\ No newline at end of file
diff --git a/src/router/feeRouter.js b/src/router/feeRouter.js
index 33c8f00..34f0c91 100644
--- a/src/router/feeRouter.js
+++ b/src/router/feeRouter.js
@@ -30,8 +30,19 @@ export default [
         component: () => import('@/views/fee/applyRoomDiscountManageList.vue')
     },
     {
-        path:'/views/fee/discountType',
-        name:'/views/fee/discountType',
+        path: '/views/fee/discountType',
+        name: '/views/fee/discountType',
         component: () => import('@/views/fee/discountTypeList.vue')
-        },
+    },
+    {
+        path: '/views/fee/listApplyRoomDiscountRecord',
+        name: '/views/fee/listApplyRoomDiscountRecord',
+        component: () => import('@/views/fee/listApplyRoomDiscountRecordList.vue')
+    },
+    {
+        path: '/pages/property/feeReceipt',
+        name: '/pages/property/feeReceipt',
+        component: () => import('@/views/fee/feeReceiptList.vue')
+    },
+
 ]
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 2b0bf14..5b410d6 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -15,7 +15,7 @@ import scmRouter from './scmRouter'
 import userRouter from './userRouter'
 import systemRouter from './systemRouter'
 import communityRouter from './communityRouter'
-import workRouter from './workRouter'   
+import workRouter from './workRouter'
 import feeRouter from './feeRouter'
 
 Vue.use(VueRouter)
@@ -31,13 +31,13 @@ const routes = [
         name: '/views/index/index',
         component: () => import('@/views/index/index.vue')
       },
-      
+
       {
         path: '/pages/frame/changeStaffPwd',
         name: '/pages/frame/changeStaffPwd',
         component: () => import('@/views/user/login/updatePwd.vue')
       },
-      
+
       {
 
         path: '/pages/frame/orgManage',
@@ -68,7 +68,7 @@ const routes = [
         component: () => import('@/views/staff/staffDetailList.vue')
       },
 
-      
+
       {
         path: '/pages/log/mqttLog',
         name: '/pages/log/mqttLog',
@@ -84,7 +84,7 @@ const routes = [
         name: '/pages/frame/registerProtocol',
         component: () => import('@/views/system/registerProtocolList.vue')
       },
-      
+
       {
         path: '/views/report/reportCustomComponentRelManage',
         name: '/views/report/reportCustomComponentRelManage',
@@ -100,7 +100,7 @@ const routes = [
         name: '/views/report/reportCustomComponentFooterManage',
         component: () => import('@/views/report/reportCustomComponentFooterManageList.vue')
       },
-     
+
       {
         path: '/pages/common/communityManage',
         name: '/pages/common/communityManage',
@@ -166,7 +166,7 @@ const routes = [
         name: '/pages/owner/adminOwner',
         component: () => import('@/views/owner/adminOwnerList.vue')
       },
-     
+
       {
         path: '/pages/owner/adminAuthOwner',
         name: '/pages/owner/adminAuthOwner',
@@ -187,7 +187,7 @@ const routes = [
         name: '/pages/fee/adminFeeConfig',
         component: () => import('@/views/fee/adminFeeConfigList.vue')
       },
-     
+
       {
         path: '/pages/fee/adminRoomFee',
         name: '/pages/fee/adminRoomFee',
@@ -566,7 +566,7 @@ const routes = [
         name: '/views/fee/feeConfigDetail',
         component: () => import('@/views/fee/feeConfigDetailList.vue')
       },
-      
+
       {
         path: '/pages/property/carCreateFee',
         name: '/pages/property/carCreateFee',
@@ -621,7 +621,7 @@ const routes = [
         path: '/pages/property/repairForceFinishManage',
         name: '/pages/property/repairForceFinishManage',
         component: () => import('@/views/work/repairForceFinishManageList.vue')
-      }, 
+      },
       {
         path: '/pages/property/locationManage',
         name: '/pages/property/locationManage',
@@ -679,6 +679,21 @@ const routes = [
     name: '/views/contract/printContract',
     component: () => import('@/views/contract/printContractList.vue')
   },
+  {
+    path: '/pages/property/printPayFee',
+    name: '/pages/property/printPayFee',
+    component: () => import('@/views/fee/printPayFeeList.vue')
+  },
+  {
+    path: '/pages/property/printPayFeeBangTai',
+    name: '/pages/property/printPayFeeBangTai',
+    component: () => import('@/views/fee/printPayFeeBangTaiList.vue')
+  },
+  {
+    path:'/pages/property/printSmallPayFee',
+    name:'/pages/property/printSmallPayFee',
+    component: () => import('@/views/fee/printSmallPayFeeList.vue')
+    },
 ]
 
 const router = new VueRouter({
diff --git a/src/views/fee/applyRoomDiscountManageList.vue b/src/views/fee/applyRoomDiscountManageList.vue
index c8753de..cebbc91 100644
--- a/src/views/fee/applyRoomDiscountManageList.vue
+++ b/src/views/fee/applyRoomDiscountManageList.vue
@@ -231,7 +231,7 @@ export default {
     },
     handleOpenRecord(row) {
       this.$router.push({
-        path: '/pages/property/listApplyRoomDiscountRecord',
+        path: '/views/fee/listApplyRoomDiscountRecord',
         query: {
           ardId: row.ardId,
           roomId: row.roomId,
diff --git a/src/views/fee/discountTypeLang.js b/src/views/fee/discountTypeLang.js
index abcedba..1df2288 100644
--- a/src/views/fee/discountTypeLang.js
+++ b/src/views/fee/discountTypeLang.js
@@ -43,16 +43,6 @@ export const messages = {
       },
       fetchError: 'Failed to fetch discount types'
     },
-    common: {
-      search: 'Search',
-      add: 'Add',
-      edit: 'Edit',
-      delete: 'Delete',
-      back: 'Back',
-      cancel: 'Cancel',
-      confirm: 'Confirm',
-      operation: 'Operation'
-    }
   },
   zh: {
     discountType: {
@@ -98,15 +88,5 @@ export const messages = {
       },
       fetchError: '获取优惠类型失败'
     },
-    common: {
-      search: '查询',
-      add: '添加',
-      edit: '修改',
-      delete: '删除',
-      back: '返回',
-      cancel: '取消',
-      confirm: '确认',
-      operation: '操作'
-    }
   }
 }
\ No newline at end of file
diff --git a/src/views/fee/feeReceiptLang.js b/src/views/fee/feeReceiptLang.js
new file mode 100644
index 0000000..ff53057
--- /dev/null
+++ b/src/views/fee/feeReceiptLang.js
@@ -0,0 +1,70 @@
+export const messages = {
+  en: {
+    feeReceipt: {
+      search: {
+        title: 'Search Conditions',
+        receiptId: 'Please enter receipt ID',
+        roomId: 'Please enter room/carport info, format: building-unit-room, e.g. 1-1-1',
+        objType: 'Please select fee type',
+        all: 'All',
+        houseFee: 'House Fee',
+        parkingFee: 'Parking Fee',
+        startTime: 'Please select start time',
+        endTime: 'Please select end time'
+      },
+      list: {
+        title: 'Receipt Information'
+      },
+      table: {
+        receiptId: 'Receipt ID',
+        receiptCode: 'Receipt Code',
+        objType: 'Fee Type',
+        feeName: 'Fee Item',
+        roomName: 'Room',
+        payObjName: 'Owner',
+        carNum: 'Carport',
+        amount: 'Total Amount(¥)',
+        createTime: 'Payment Time'
+      },
+      button: {
+        reprint: 'Reprint Receipt',
+        reprintSmall: 'Reprint Small Receipt'
+      },
+      fetchError: 'Failed to fetch receipt data'
+    }
+  },
+  zh: {
+    feeReceipt: {
+      search: {
+        title: '查询条件',
+        receiptId: '请输入收据ID',
+        roomId: '请输入房屋或车位信息，格式为楼栋-单元-房屋，如1-1-1',
+        objType: '请选择收费类型',
+        all: '全部',
+        houseFee: '房屋费',
+        parkingFee: '车位费',
+        startTime: '请选择开始时间',
+        endTime: '请选择结束时间'
+      },
+      list: {
+        title: '收据信息'
+      },
+      table: {
+        receiptId: '收据ID',
+        receiptCode: '收据编号',
+        objType: '费用类型',
+        feeName: '费用项',
+        roomName: '房屋',
+        payObjName: '业主',
+        carNum: '车位',
+        amount: '总金额(单位:元)',
+        createTime: '缴费时间'
+      },
+      button: {
+        reprint: '补打收据',
+        reprintSmall: '补打小票'
+      },
+      fetchError: '获取收据数据失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/feeReceiptList.vue b/src/views/fee/feeReceiptList.vue
new file mode 100644
index 0000000..25136bd
--- /dev/null
+++ b/src/views/fee/feeReceiptList.vue
@@ -0,0 +1,223 @@
+<template>
+  <div class="fee-receipt-container">
+    <!-- 查询条件 -->
+    <el-card class="search-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('feeReceipt.search.title') }}</span>
+        <el-button type="text" style="float: right; padding: 3px 0" @click="_moreCondition">
+          {{ feeReceiptManageInfo.moreCondition ? $t('common.hide') : $t('common.more') }}
+        </el-button>
+      </div>
+      <el-row :gutter="20">
+        <el-col :span="6">
+          <el-input v-model="feeReceiptManageInfo.conditions.receiptId" :placeholder="$t('feeReceipt.search.receiptId')"
+            clearable />
+        </el-col>
+        <el-col :span="8">
+          <el-input v-model="feeReceiptManageInfo.conditions.roomId" :placeholder="$t('feeReceipt.search.roomId')"
+            clearable />
+        </el-col>
+        <el-col :span="6">
+          <el-select v-model="feeReceiptManageInfo.conditions.objType" :placeholder="$t('feeReceipt.search.objType')"
+            style="width:100%">
+            <el-option :label="$t('feeReceipt.search.all')" value="" />
+            <el-option :label="$t('feeReceipt.search.houseFee')" value="3333" />
+            <el-option :label="$t('feeReceipt.search.parkingFee')" value="6666" />
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="_queryFeeReceiptMethod">
+            <i class="el-icon-search"></i>
+            {{ $t('common.search') }}
+          </el-button>
+          <el-button @click="_resetFeeReceiptMethod">
+            <i class="el-icon-refresh"></i>
+            {{ $t('common.reset') }}
+          </el-button>
+        </el-col>
+      </el-row>
+
+      <el-row v-show="feeReceiptManageInfo.moreCondition" :gutter="20" style="margin-top:20px">
+        <el-col :span="6">
+          <el-date-picker v-model="feeReceiptManageInfo.conditions.qstartTime" type="date"
+            :placeholder="$t('feeReceipt.search.startTime')" style="width:100%" />
+        </el-col>
+        <el-col :span="6">
+          <el-date-picker v-model="feeReceiptManageInfo.conditions.qendTime" type="date"
+            :placeholder="$t('feeReceipt.search.endTime')" style="width:100%" />
+        </el-col>
+      </el-row>
+    </el-card>
+
+    <!-- 收据信息 -->
+    <el-card class="list-wrapper">
+      <div slot="header" class="flex justify-between">
+        <span>{{ $t('feeReceipt.list.title') }}</span>
+      </div>
+
+      <el-table v-loading="loading" :data="feeReceiptManageInfo.feeReceipts" border style="width: 100%">
+        <el-table-column prop="receiptId" :label="$t('feeReceipt.table.receiptId')" align="center" />
+        <el-table-column prop="receiptCode" :label="$t('feeReceipt.table.receiptCode')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.receiptCode || '-' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="objType" :label="$t('feeReceipt.table.objType')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.objType === '3333' ? $t('feeReceipt.search.houseFee') : $t('feeReceipt.search.parkingFee') }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeName" :label="$t('feeReceipt.table.feeName')" align="center" />
+        <el-table-column prop="roomName" :label="$t('feeReceipt.table.roomName')" align="center" />
+        <el-table-column prop="payObjName" :label="$t('feeReceipt.table.payObjName')" align="center" />
+        <el-table-column prop="carNum" :label="$t('feeReceipt.table.carNum')" align="center" />
+        <el-table-column prop="amount" :label="$t('feeReceipt.table.amount')" align="center" />
+        <el-table-column prop="createTime" :label="$t('feeReceipt.table.createTime')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button size="mini" type="primary" @click="_printFeeReceipt(scope.row)">
+              {{ $t('feeReceipt.button.reprint') }}
+            </el-button>
+            <el-button size="mini" type="success" @click="_printFeeSmallReceipt(scope.row)">
+              {{ $t('feeReceipt.button.reprintSmall') }}
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination :current-page.sync="page.current" :page-sizes="[10, 20, 30, 50]" :page-size="page.size"
+        :total="page.total" layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange"
+        @current-change="handleCurrentChange" />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { queryFeeReceipt, listFeePrintPage } from '@/api/fee/feeReceiptApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'FeeReceiptList',
+  data() {
+    return {
+      loading: false,
+      feeReceiptManageInfo: {
+        feeReceipts: [],
+        moreCondition: false,
+        printUrl: '/print.html#/pages/property/printPayFee',
+        conditions: {
+          objType: '',
+          storeName: '',
+          objId: '',
+          month: '',
+          qstartTime: '',
+          qendTime: '',
+          type: '',
+          roomId: '',
+          communityId: getCommunityId(),
+          receiptId: '',
+          page: 1,
+          row: 10
+        }
+      },
+      page: {
+        current: 1,
+        size: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this._listFeeReceipts()
+    this._listFeePrintPages()
+  },
+  methods: {
+    async _listFeeReceipts() {
+      try {
+        this.loading = true
+        const params = {
+          ...this.feeReceiptManageInfo.conditions,
+          page: this.page.current,
+          row: this.page.size
+        }
+        const { data, total } = await queryFeeReceipt(params)
+        this.feeReceiptManageInfo.feeReceipts = data
+        this.page.total = total
+      } catch (error) {
+        this.$message.error(this.$t('feeReceipt.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    async _listFeePrintPages() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          state: 'T',
+          communityId: getCommunityId()
+        }
+        const { data } = await listFeePrintPage(params)
+        if (data && data.length > 0) {
+          this.feeReceiptManageInfo.printUrl = data[0].url
+        }
+      } catch (error) {
+        console.error('请求失败:', error)
+      }
+    },
+    _queryFeeReceiptMethod() {
+      this.page.current = 1
+      this._listFeeReceipts()
+    },
+    _resetFeeReceiptMethod() {
+      this.feeReceiptManageInfo.conditions = {
+        ...this.feeReceiptManageInfo.conditions,
+        objType: '',
+        roomId: '',
+        receiptId: '',
+        qstartTime: '',
+        qendTime: ''
+      }
+      this._listFeeReceipts()
+    },
+    _printFeeReceipt(receipt) {
+      window.open(`${this.feeReceiptManageInfo.printUrl}?receiptId=${receipt.receiptId}`)
+    },
+    _printFeeSmallReceipt(receipt) {
+      window.open(`/smallPrint.html#/pages/property/printSmallPayFee?receiptIds=${receipt.receiptId}`)
+    },
+    _moreCondition() {
+      this.feeReceiptManageInfo.moreCondition = !this.feeReceiptManageInfo.moreCondition
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listFeeReceipts()
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listFeeReceipts()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fee-receipt-container {
+  padding: 20px;
+
+  .search-wrapper {
+    margin-bottom: 20px;
+
+    .el-row {
+      margin-bottom: 20px;
+    }
+  }
+
+  .list-wrapper {
+    .el-pagination {
+      margin-top: 20px;
+      text-align: right;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/listApplyRoomDiscountRecordLang.js b/src/views/fee/listApplyRoomDiscountRecordLang.js
new file mode 100644
index 0000000..5737571
--- /dev/null
+++ b/src/views/fee/listApplyRoomDiscountRecordLang.js
@@ -0,0 +1,84 @@
+export const messages = {
+  en: {
+    listApplyRoomDiscountRecord: {
+      title: 'Decoration Tracking Record',
+      id: 'ID',
+      room: 'Room',
+      operator: 'Operator',
+      createTime: 'Create Time',
+      status: 'Status',
+      isViolation: 'Is Violation',
+      remark: 'Remark',
+      fetchError: 'Failed to fetch records'
+    },
+    applyRoomDiscountRecord: {
+      title: 'Inspection Tracking',
+      room: 'Room',
+      status: 'Status',
+      isViolation: 'Is Violation',
+      selectViolation: 'Please select violation status',
+      remark: 'Remark',
+      remarkPlaceholder: 'Please enter remarks',
+      uploadImages: 'Upload Images',
+      uploadVideo: 'Upload Video',
+      violationRequired: 'Violation status is required',
+      remarkRequired: 'Remark is required'
+    },
+    deleteApplyRoomDiscountRecord: {
+      title: 'Confirm Operation',
+      confirmText: 'Are you sure to delete this inspection record?'
+    },
+    uploadImage: {
+      maxCountError: 'Maximum {count} images can be uploaded',
+      sizeError: 'Image size cannot exceed 2MB',
+      uploadFailed: 'Image upload failed'
+    },
+    uploadVedio: {
+      uploadButton: 'Upload Video',
+      sizeError: 'Video size cannot exceed 500MB',
+      uploadSuccess: 'Video uploaded successfully',
+      uploadFailed: 'Video upload failed'
+    }
+  },
+  zh: {
+    listApplyRoomDiscountRecord: {
+      title: '装修跟踪记录',
+      id: 'ID',
+      room: '房屋',
+      operator: '操作人员',
+      createTime: '创建时间',
+      status: '状态',
+      isViolation: '是否违规',
+      remark: '备注',
+      fetchError: '获取记录失败'
+    },
+    applyRoomDiscountRecord: {
+      title: '验房跟踪',
+      room: '房屋',
+      status: '状态',
+      isViolation: '是否违规',
+      selectViolation: '请选择是否违规',
+      remark: '备注',
+      remarkPlaceholder: '请填写备注',
+      uploadImages: '上传图片',
+      uploadVideo: '上传视频',
+      violationRequired: '是否违规不能为空',
+      remarkRequired: '备注不能为空'
+    },
+    deleteApplyRoomDiscountRecord: {
+      title: '请确认您的操作',
+      confirmText: '确定删除验房记录吗？'
+    },
+    uploadImage: {
+      maxCountError: '最多只能上传{count}张图片',
+      sizeError: '图片大小不能超过2MB',
+      uploadFailed: '图片上传失败'
+    },
+    uploadVedio: {
+      uploadButton: '上传视频',
+      sizeError: '视频大小不能超过500MB',
+      uploadSuccess: '视频上传成功',
+      uploadFailed: '视频上传失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/listApplyRoomDiscountRecordList.vue b/src/views/fee/listApplyRoomDiscountRecordList.vue
new file mode 100644
index 0000000..de9a343
--- /dev/null
+++ b/src/views/fee/listApplyRoomDiscountRecordList.vue
@@ -0,0 +1,196 @@
+<template>
+  <div class="list-apply-room-discount-record-container">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <div class="card-header">
+          <span>{{ listApplyRoomDiscountRecordsInfo.conditions.roomName }}</span>
+          <span class="header-title">{{ $t('listApplyRoomDiscountRecord.title') }}</span>
+          <div class="header-tools">
+            <el-button type="primary" size="small" @click="_openAddModal(listApplyRoomDiscountRecordsInfo.applyRoomDiscount)">
+              <i class="el-icon-plus"></i>
+              {{ $t('common.add') }}
+            </el-button>
+            <el-button type="primary" size="small" style="margin-left:10px" @click="_goBack()">
+              <i class="el-icon-close"></i>
+              {{ $t('common.back') }}
+            </el-button>
+          </div>
+        </div>
+      </div>
+
+      <el-table
+        :data="listApplyRoomDiscountRecordsInfo.listApplyRoomDiscountRecords"
+        border
+        style="width: 100%"
+        v-loading="loading"
+      >
+        <el-table-column prop="ardrId" :label="$t('listApplyRoomDiscountRecord.id')" align="center" />
+        <el-table-column prop="roomName" :label="$t('listApplyRoomDiscountRecord.room')" align="center" />
+        <el-table-column prop="createUserName" :label="$t('listApplyRoomDiscountRecord.operator')" align="center" />
+        <el-table-column prop="createTime" :label="$t('listApplyRoomDiscountRecord.createTime')" align="center" />
+        <el-table-column prop="stateName" :label="$t('listApplyRoomDiscountRecord.status')" align="center" />
+        <el-table-column prop="isTrueName" :label="$t('listApplyRoomDiscountRecord.isViolation')" align="center" />
+        <el-table-column prop="remark" :label="$t('listApplyRoomDiscountRecord.remark')" align="center" />
+        <el-table-column :label="$t('common.operation')" align="center" width="200">
+          <template slot-scope="scope">
+            <el-button-group>
+              <el-button size="mini" @click="_openApplyRoomDiscountRecordDetailsModel(scope.row)">
+                {{ $t('common.viewDetails') }}
+              </el-button>
+              <el-button size="mini" type="danger" @click="_openDeleteApplyRoomDiscountRecordModel(scope.row)">
+                {{ $t('common.delete') }}
+              </el-button>
+            </el-button-group>
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="page.current"
+        :page-sizes="[10, 20, 30, 50]"
+        :page-size="page.size"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="listApplyRoomDiscountRecordsInfo.total"
+        class="pagination"
+      >
+      </el-pagination>
+    </el-card>
+
+    <apply-room-discount-record ref="applyRoomDiscountRecord" @success="handleSuccess" />
+    <delete-apply-room-discount-record ref="deleteApplyRoomDiscountRecord" @success="handleSuccess" />
+  </div>
+</template>
+
+<script>
+import { queryApplyRoomDiscountRecord } from '@/api/fee/listApplyRoomDiscountRecordApi'
+import ApplyRoomDiscountRecord from '@/components/fee/applyRoomDiscountRecord'
+import DeleteApplyRoomDiscountRecord from '@/components/fee/deleteApplyRoomDiscountRecord'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ListApplyRoomDiscountRecord',
+  components: {
+    ApplyRoomDiscountRecord,
+    DeleteApplyRoomDiscountRecord
+  },
+  data() {
+    return {
+      loading: false,
+      listApplyRoomDiscountRecordsInfo: {
+        listApplyRoomDiscountRecords: [],
+        applyRoomDiscount: [],
+        total: 0,
+        records: 1,
+        conditions: {
+          ardId: '',
+          roomId: '',
+          roomName: '',
+          stateName: '',
+          state: '',
+          communityId: ''
+        }
+      },
+      page: {
+        current: 1,
+        size: 10
+      }
+    }
+  },
+  created() {
+    this.listApplyRoomDiscountRecordsInfo.conditions.communityId = getCommunityId()
+    this.listApplyRoomDiscountRecordsInfo.conditions.ardId = this.$route.query.ardId
+    this.listApplyRoomDiscountRecordsInfo.conditions.state = this.$route.query.state
+    this.listApplyRoomDiscountRecordsInfo.conditions.stateName = this.$route.query.stateName
+    this.listApplyRoomDiscountRecordsInfo.conditions.roomId = this.$route.query.roomId
+    this.listApplyRoomDiscountRecordsInfo.conditions.roomName = this.$route.query.roomName
+    this._listApplyRoomDiscountRecords(this.page.current, this.page.size)
+  },
+  methods: {
+    async _listApplyRoomDiscountRecords(page, size) {
+      try {
+        this.loading = true
+        const params = {
+          page: page,
+          row: size,
+          ...this.listApplyRoomDiscountRecordsInfo.conditions
+        }
+        const { data, total } = await queryApplyRoomDiscountRecord(params)
+        this.listApplyRoomDiscountRecordsInfo.listApplyRoomDiscountRecords = data
+        this.listApplyRoomDiscountRecordsInfo.total = total
+      } catch (error) {
+        this.$message.error(this.$t('listApplyRoomDiscountRecord.fetchError'))
+      } finally {
+        this.loading = false
+      }
+    },
+    _openAddModal(applyRoomDiscount) {
+      applyRoomDiscount.push(this.listApplyRoomDiscountRecordsInfo.conditions.ardId)
+      applyRoomDiscount.push(this.listApplyRoomDiscountRecordsInfo.conditions.state)
+      applyRoomDiscount.push(this.listApplyRoomDiscountRecordsInfo.conditions.stateName)
+      applyRoomDiscount.push(this.listApplyRoomDiscountRecordsInfo.conditions.roomId)
+      applyRoomDiscount.push(this.listApplyRoomDiscountRecordsInfo.conditions.roomName)
+      this.$refs.applyRoomDiscountRecord.open(applyRoomDiscount)
+    },
+    _openDeleteApplyRoomDiscountRecordModel(applyRoomDiscountRecord) {
+      this.$refs.deleteApplyRoomDiscountRecord.open(applyRoomDiscountRecord)
+    },
+    _openApplyRoomDiscountRecordDetailsModel(applyRoomDiscountRecord) {
+      this.$router.push({
+        path: '/views/fee/listApplyRoomDiscountRecordDetails',
+        query: {
+          ardrId: applyRoomDiscountRecord.ardrId,
+          roomName: applyRoomDiscountRecord.roomName,
+          state: applyRoomDiscountRecord.state
+        }
+      })
+    },
+    handleSuccess() {
+      this._listApplyRoomDiscountRecords(this.page.current, this.page.size)
+    },
+    handleSizeChange(val) {
+      this.page.size = val
+      this._listApplyRoomDiscountRecords(this.page.current, val)
+    },
+    handleCurrentChange(val) {
+      this.page.current = val
+      this._listApplyRoomDiscountRecords(val, this.page.size)
+    },
+    _goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-apply-room-discount-record-container {
+  padding: 20px;
+
+  .box-card {
+    margin-bottom: 20px;
+
+    .card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      .header-title {
+        margin-left: 10px;
+        font-weight: bold;
+      }
+
+      .header-tools {
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+
+  .pagination {
+    margin-top: 20px;
+    text-align: right;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/printPayFeeBangTaiLang.js b/src/views/fee/printPayFeeBangTaiLang.js
new file mode 100644
index 0000000..eb841bf
--- /dev/null
+++ b/src/views/fee/printPayFeeBangTaiLang.js
@@ -0,0 +1,60 @@
+export const messages = {
+  en: {
+    printPayFeeBangTai: {
+      applyForm: 'Application Form',
+      receiptForm: 'Receipt Form',
+      receiptNum: 'Receipt No.',
+      owner: 'Owner: ',
+      paymentTime: 'Payment Time: ',
+      serialNum: 'No.',
+      feeItem: 'Fee Item',
+      houseCar: 'House/Car',
+      feeRange: 'Fee Range',
+      cycle: 'Cycle',
+      unitPrice: 'Unit Price/Fixed Fee',
+      areaUsage: 'Area/Usage',
+      paymentMethod: 'Payment Method',
+      amount: 'Amount',
+      discountAmount: 'Discount Amount',
+      remark: 'Remark',
+      to: ' to ',
+      none: 'None',
+      capitalRMB: 'Capital RMB',
+      departmentHead: 'Department Head',
+      handler: 'Handler',
+      financialCollection: 'Financial Collection',
+      customerConfirmation: 'Customer Confirmation',
+      print: 'Print',
+      cancel: 'Cancel'
+    }
+  },
+  zh: {
+    printPayFeeBangTai: {
+      applyForm: '申请单',
+      receiptForm: '收据单',
+      receiptNum: '单号',
+      owner: '业主：',
+      paymentTime: '缴费时间：',
+      serialNum: '编号',
+      feeItem: '收费项目',
+      houseCar: '房屋/车辆',
+      feeRange: '收费范围',
+      cycle: '周期',
+      unitPrice: '单价/固定费',
+      areaUsage: '面积/用量',
+      paymentMethod: '支付方式',
+      amount: '金额',
+      discountAmount: '优惠金额',
+      remark: '备注',
+      to: '至',
+      none: '无',
+      capitalRMB: '大写人民币',
+      departmentHead: '部门负责人',
+      handler: '经办人',
+      financialCollection: '财务收款',
+      customerConfirmation: '客户确认',
+      print: '打印',
+      cancel: '取消'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/printPayFeeBangTaiList.vue b/src/views/fee/printPayFeeBangTaiList.vue
new file mode 100644
index 0000000..fbd4c34
--- /dev/null
+++ b/src/views/fee/printPayFeeBangTaiList.vue
@@ -0,0 +1,303 @@
+<template>
+  <div class="print-pay-fee-container">
+      <el-row>
+        <el-col :span="24">
+          <div class="text-center">
+            <div style="color:#000;font-size:36px">{{ printPayFeeInfo.communityName }} {{ printPayFeeInfo.apply ==
+              'Y' ? $t('printPayFeeBangTai.applyForm') : $t('printPayFeeBangTai.receiptForm')}}</div>
+            <span style="color:#000;font-size:20px">
+              <span>{{ $t('printPayFeeBangTai.receiptNum') }}</span>：{{ printPayFeeInfo.receiptNum }}
+            </span>
+          </div>
+          <div style="color:#000;font-size:20px;margin-left:20px">
+            <div class="float-left">
+              <span>{{ $t('printPayFeeBangTai.owner') }}</span>{{ printPayFeeInfo.payObjName }}
+            </div>
+            <div class="float-right text-right">
+              <span>{{ $t('printPayFeeBangTai.paymentTime') }}</span>{{ printPayFeeInfo.feeTime }}
+            </div>
+          </div>
+          <table class="table vc-table-border" style="color:#000;font-size:20px">
+            <thead>
+              <tr>
+                <th scope="col" class="text-center" width="80px">{{ $t('printPayFeeBangTai.serialNum') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.feeItem') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.houseCar') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.feeRange') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.cycle') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.unitPrice') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.areaUsage') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.paymentMethod') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.amount') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.discountAmount') }}</th>
+                <th scope="col" class="text-center">{{ $t('printPayFeeBangTai.remark') }}</th>
+              </tr>
+            </thead>
+            <tbody class="vc-table-border" style="color:#000;font-size:20px">
+              <tr v-for="(item, index) in printPayFeeInfo.fees" class="vc-table-border" :key="index">
+                <th scope="row" class="text-center">{{ index + 1 }}</th>
+                <td class="text-center">{{ item.feeName }}</td>
+                <td class="text-center">{{ item.objName }}</td>
+                <td class="text-center" v-if="item.preDegrees">
+                  {{ formatDate(item.startTime) }}<span>{{ $t('printPayFeeBangTai.to') }}</span>{{ formatDate(item.endTime) }}<br>
+                  {{ item.preDegrees }} {{ $t('printPayFeeBangTai.to') }} {{ item.curDegrees }}
+                </td>
+                <td class="text-center" v-else-if="item.feeTypeCd == '888800010006'">
+                  {{ $t('printPayFeeBangTai.none') }}
+                </td>
+                <td class="text-center" v-else>
+                  {{ formatDate(item.startTime) }}<span>{{ $t('printPayFeeBangTai.to') }}</span>{{ formatDate(item.endTime) }}
+                </td>
+                <td class="text-center">{{ item.cycle }}</td>
+                <td class="text-center">{{ item.squarePrice }}</td>
+                <td class="text-center">{{ item.area }}</td>
+                <td class="text-center">{{ item.primeRate }}</td>
+                <td class="text-center">{{ item.amount }}</td>
+                <td class="text-center">{{ item.discountPrice }}</td>
+                <td class="text-center" width="200px">{{ item.remark }}</td>
+              </tr>
+              <tr>
+                <td colspan="3" class="text-center">
+                  <span>{{ $t('printPayFeeBangTai.capitalRMB') }}</span>（元）
+                </td>
+                <td colspan="4" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</td>
+                <td colspan="1" class="text-center">{{ computeSumArea() }}</td>
+                <td colspan="3" class="text-center">{{ printPayFeeInfo.amount }}</td>
+              </tr>
+              <tr height="60px">
+                <td colspan="6">
+                  <div style="max-width: 600px;">
+                  <div v-html="printPayFeeInfo.content"></div>
+                  </div>
+                </td>
+                <td colspan="5">
+                  <img :src="printPayFeeInfo.qrImg" width="100px" height="100px">
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="20">
+          <div class="row" style="color:#000;font-size:20px;margin-left: 10px;">
+            <div class="float-left" style="width: 20%;">
+              <span>{{ $t('printPayFeeBangTai.departmentHead') }}</span>：
+            </div>
+            <div class="float-left" style="width: 20%;">
+              <span>{{ $t('printPayFeeBangTai.handler') }}</span>：{{ userInfo.name }}
+            </div>
+            <div class="float-left" style="width: 20%;">
+              <span>{{ $t('printPayFeeBangTai.financialCollection') }}</span>：
+            </div>
+            <div class="float-left" style="width: 20%;">
+              <span>{{ $t('printPayFeeBangTai.customerConfirmation') }}</span>：
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="4" id="print-btn">
+          <el-button type="primary" class="float-right" @click="printPurchaseApplyDiv">
+            <i class="el-icon-printer"></i>&nbsp;{{ $t('printPayFeeBangTai.print') }}
+          </el-button>
+          <el-button type="warning" class="float-right" style="margin-right:20px;" @click="closePage">
+            {{ $t('printPayFeeBangTai.cancel') }}
+          </el-button>
+        </el-col>
+      </el-row>
+  </div>
+</template>
+
+<script>
+import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeBangTaiApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { getUserId,getUserName } from '@/api/user/userApi'
+
+export default {
+  name: 'PrintPayFeeBangTaiList',
+  data() {
+    return {
+      printPayFeeInfo: {
+        communityName: '',
+        receiptId: '',
+        receiptIds: '',
+        roomName: '',
+        amount: 0.00,
+        fees: [],
+        feeTime: '',
+        wechatName: '',
+        content: '',
+        qrImg: '',
+        payObjName: '',
+        feeReceipt: [],
+        apply: 'N',
+        receiptNum: '',
+        merge: ''
+      },
+      printFlag: '0',
+      userInfo: {},
+      communityId: ''
+    }
+  },
+  created() {
+    this.initData()
+    this.loadData()
+  },
+  methods: {
+    initData() {
+      this.printPayFeeInfo.receiptId = this.$route.query.receiptId
+      this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
+      this.printPayFeeInfo.apply = this.$route.query.apply || 'N'
+      this.printPayFeeInfo.merge = this.$route.query.merge
+      this.communityId = getCommunityId()
+      this.userInfo = {
+        userId: getUserId(),
+        name: getUserName()
+      }
+    },
+    async loadData() {
+      this.printPayFeeInfo.communityName = this.$store.getters.currentCommunity.name
+      await this.loadReceipt()
+      await this.loadPrintSpec()
+    },
+    async loadReceipt() {
+      try {
+        const params = {
+          page: 1,
+          row: 30,
+          receiptId: this.printPayFeeInfo.receiptId,
+          receiptIds: this.printPayFeeInfo.receiptIds,
+          communityId: this.communityId
+        }
+        const { data } = await queryFeeReceipt(params)
+        const _feeReceipt = data
+        let _amount = 0
+        _feeReceipt.forEach(item => {
+          _amount += parseFloat(item.amount)
+        })
+
+        this.printPayFeeInfo.amount = _amount.toFixed(2)
+        this.printPayFeeInfo.roomName = _feeReceipt[0].objName
+        this.printPayFeeInfo.feeTime = _feeReceipt[0].createTime
+        this.printPayFeeInfo.payObjName = _feeReceipt[0].payObjName
+        this.printPayFeeInfo.feeReceipt = _feeReceipt
+        this.printPayFeeInfo.receiptNum = _feeReceipt[0].receiptCode
+        await this.loadReceiptDetail()
+      } catch (error) {
+        console.error('Failed to load receipt:', error)
+      }
+    },
+    async loadReceiptDetail() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          receiptId: this.printPayFeeInfo.receiptId,
+          receiptIds: this.printPayFeeInfo.receiptIds,
+          communityId: this.communityId,
+          mergeFee: this.printPayFeeInfo.merge
+        }
+        const { data } = await queryFeeReceiptDetail(params)
+        const _feeReceiptDetails = data
+        this.printPayFeeInfo.receiptNum = this.printPayFeeInfo.receiptNum + "(" + _feeReceiptDetails[0].payOrderId + ")"
+        _feeReceiptDetails.forEach(item => {
+          this.printPayFeeInfo.feeReceipt.forEach(im => {
+            if (item.receiptId == im.receiptId) {
+              item.objName = im.objName
+              item.feeTypeCd = im.feeTypeCd
+            }
+          })
+        })
+        this.printPayFeeInfo.fees = _feeReceiptDetails
+      } catch (error) {
+        console.error('Failed to load receipt detail:', error)
+      }
+    },
+    async loadPrintSpec() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          specCd: 2020,
+          communityId: this.communityId
+        }
+        const { data } = await queryFeePrintSpec(params)
+        if (data.length > 0) {
+          this.printPayFeeInfo.content = data[0].content
+          this.printPayFeeInfo.qrImg = data[0].qrImg
+          if (data[0].printName) {
+            this.printPayFeeInfo.communityName = data[0].printName
+          }
+        }
+      } catch (error) {
+        console.error('Failed to load print spec:', error)
+      }
+    },
+    computeSumArea() {
+      let _sum = 0.00
+      this.printPayFeeInfo.fees.forEach(item => {
+        if (item.area && this.isNumber(item.area)) {
+          _sum += parseFloat(item.area)
+        }
+      })
+      return _sum.toFixed(2)
+    },
+    isNumber(value) {
+      return !isNaN(parseFloat(value)) && isFinite(value)
+    },
+    formatDate(date) {
+      if (!date) return ''
+      return this.$moment(date).format('YYYY-MM-DD')
+    },
+    changeNumMoneyToChinese(num) {
+      // 这里实现数字转中文大写金额的逻辑
+      // 由于实现较复杂，建议使用第三方库或自行实现
+      return num // 暂时返回原值
+    },
+    printPurchaseApplyDiv() {
+      this.printFlag = '1'
+      document.getElementById("print-btn").style.display = "none"
+      window.print()
+      window.opener = null
+      window.close()
+    },
+    closePage() {
+      window.opener = null
+      window.close()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.print-pay-fee-container {
+  padding: 20px;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.vc-table-border {
+  border: 1px solid #000;
+  border-collapse: collapse;
+}
+
+.vc-table-border th,
+.vc-table-border td {
+  border: 1px solid #000;
+  padding: 5px;
+}
+
+#print-btn {
+  text-align: right;
+  margin-top: 20px;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/printPayFeeLang.js b/src/views/fee/printPayFeeLang.js
new file mode 100644
index 0000000..e0d9c95
--- /dev/null
+++ b/src/views/fee/printPayFeeLang.js
@@ -0,0 +1,60 @@
+export const messages = {
+  en: {
+    printPayFee: {
+      apply: 'Application',
+      receipt: 'Receipt',
+      refund: 'Refund',
+      owner: 'Owner',
+      receiptNum: 'Receipt No.',
+      payTime: 'Payment Time',
+      serialNumber: 'No.',
+      feeItem: 'Fee Item',
+      houseCar: 'House/Vehicle',
+      feeRange: 'Fee Range',
+      to: 'to',
+      none: 'None',
+      unitPrice: 'Unit Price',
+      areaUsage: 'Area/Usage',
+      paymentMethod: 'Payment Method',
+      receivableActual: 'Receivable/Actual',
+      yuan: 'yuan',
+      discountAmount: 'Discount Amount',
+      remark: 'Remark',
+      capitalRMB: 'Capital RMB',
+      accountDeduction: 'Account Deduction',
+      departmentHead: 'Department Head:',
+      operator: 'Operator',
+      financeReceipt: 'Finance Receipt:',
+      customerConfirm: 'Customer Confirm:'
+    }
+  },
+  zh: {
+    printPayFee: {
+      apply: '申请单',
+      receipt: '收据单',
+      refund: '退款单',
+      owner: '业主',
+      receiptNum: '单号',
+      payTime: '缴费时间',
+      serialNumber: '编号',
+      feeItem: '收费项目',
+      houseCar: '房屋/车辆',
+      feeRange: '收费范围',
+      to: '至',
+      none: '无',
+      unitPrice: '单价',
+      areaUsage: '面积/用量',
+      paymentMethod: '支付方式',
+      receivableActual: '应收/实收',
+      yuan: '元',
+      discountAmount: '优惠金额',
+      remark: '备注',
+      capitalRMB: '大写人民币（元）',
+      accountDeduction: '账户扣款',
+      departmentHead: '部门负责人：',
+      operator: '经办人：',
+      financeReceipt: '财务收款：',
+      customerConfirm: '客户确认：'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/printPayFeeList.vue b/src/views/fee/printPayFeeList.vue
new file mode 100644
index 0000000..08e49bf
--- /dev/null
+++ b/src/views/fee/printPayFeeList.vue
@@ -0,0 +1,292 @@
+<template>
+  <div class="print-pay-fee-container">
+    <el-card class="box-card">
+      <div class="text-center">
+        <div style="color:#000;font-size:26px">{{ printPayFeeInfo.communityName }}
+          <span v-if="printPayFeeInfo.apply === 'Y'">{{ $t('printPayFee.apply') }}</span>
+          <span v-if="printPayFeeInfo.apply === 'N'">{{ $t('printPayFee.receipt') }}</span>
+          <span v-if="printPayFeeInfo.apply === 'R'">{{ $t('printPayFee.refund') }}</span>
+        </div>
+      </div>
+      <div style="color:#000;font-size:18px;margin-left:20px">
+        <div class="float-left">
+          {{ $t('printPayFee.owner') }}：{{ printPayFeeInfo.payObjName }}
+        </div>
+        <div class="float-right text-right">
+          <span>{{ $t('printPayFee.receiptNum') }}{{ printPayFeeInfo.receiptNum }}</span>
+          <br />
+          <span>{{ $t('printPayFee.payTime') }}：{{ printPayFeeInfo.feeTime }}</span>
+        </div>
+      </div>
+      <el-table :data="printPayFeeInfo.fees" border style="width: 100%;color:#000;font-size:20px">
+        <el-table-column prop="index" :label="$t('printPayFee.serialNumber')" width="80" align="center">
+          <template slot-scope="scope">
+            {{ scope.$index + 1 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="feeName" :label="$t('printPayFee.feeItem')" align="center"></el-table-column>
+        <el-table-column prop="objName" :label="$t('printPayFee.houseCar')" align="center"></el-table-column>
+        <el-table-column :label="$t('printPayFee.feeRange')" align="center">
+          <template slot-scope="scope">
+            <div v-if="scope.row.preDegrees">
+              {{ dateFormat(scope.row.startTime) }}
+              <span>{{ $t('printPayFee.to') }}</span>
+              {{ dateFormat(scope.row.endTime) }}<br />
+              {{ scope.row.preDegrees }} {{ $t('printPayFee.to') }} {{ scope.row.curDegrees }}
+            </div>
+            <div v-else-if="scope.row.feeTypeCd === '888800010006'">
+              {{ $t('printPayFee.none') }}
+            </div>
+            <div v-else>
+              {{ dateFormat(scope.row.startTime) }}{{ $t('printPayFee.to') }}{{ dateFormat(scope.row.endTime) }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column :label="$t('printPayFee.unitPrice')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.squarePrice }}<br />{{ scope.row.units }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="area" :label="$t('printPayFee.areaUsage')" align="center"></el-table-column>
+        <el-table-column prop="primeRate" :label="$t('printPayFee.paymentMethod')" align="center"></el-table-column>
+        <el-table-column :label="$t('printPayFee.receivableActual')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.receivableAmount }}/{{ scope.row.amount }}{{ $t('printPayFee.yuan') }}
+            <span v-if="scope.row.amount < 0">({{ $t('printPayFee.refund') }})</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="discountPrice" :label="$t('printPayFee.discountAmount')" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.discountPrice || 0 }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="remark" :label="$t('printPayFee.remark')" width="200" align="center"></el-table-column>
+      </el-table>
+
+      <el-row>
+        <el-col :span="3" class="text-center">{{ $t('printPayFee.capitalRMB') }}</el-col>
+        <el-col :span="2" class="text-center">{{ changeNumMoneyToChinese(printPayFeeInfo.amount) }}</el-col>
+        <el-col :span="1" class="text-center">{{ printPayFeeInfo.amount }}</el-col>
+        <el-col :span="2" class="text-center">{{ $t('printPayFee.accountDeduction') }}</el-col>
+        <el-col :span="2" class="text-center">{{ printPayFeeInfo.acctAmount }}</el-col>
+      </el-row>
+
+      <el-row v-if="printPayFeeInfo.content || printPayFeeInfo.qrImg">
+        <el-col :span="6">
+          <div style="max-width: 600px;" v-html="printPayFeeInfo.content"></div>
+        </el-col>
+        <el-col :span="4">
+          <img v-if="printPayFeeInfo.qrImg" :src="printPayFeeInfo.qrImg" width="100px" height="100px">
+        </el-col>
+      </el-row>
+
+      <el-row style="color:#000;font-size:18px;margin-left: 10px;">
+        <el-col :span="6">
+          {{ $t('printPayFee.departmentHead') }}
+        </el-col>
+        <el-col :span="6">
+          {{ $t('printPayFee.operator') }}：{{ userInfo.name }}
+        </el-col>
+        <el-col :span="6">
+          {{ $t('printPayFee.financeReceipt') }}
+        </el-col>
+        <el-col :span="6">
+          {{ $t('printPayFee.customerConfirm') }}
+        </el-col>
+      </el-row>
+
+      <el-row id="print-btn">
+        <el-col :span="24">
+          <el-button type="primary" class="float-right" @click="handlePrint">
+            <i class="el-icon-printer"></i>&nbsp;{{ $t('common.print') }}
+          </el-button>
+          <el-button type="warning" class="float-right" style="margin-right:20px;" @click="handleClose">
+            {{ $t('common.cancel') }}
+          </el-button>
+        </el-col>
+      </el-row>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { getCommunityId } from '@/api/community/communityApi'
+import { queryFeeReceipt, queryFeeReceiptDetail, queryFeePrintSpec } from '@/api/fee/printPayFeeApi'
+import { getUserId,getUserName } from '@/api/user/userApi'
+
+export default {
+  name: 'PrintPayFeeList',
+  data() {
+    return {
+      printPayFeeInfo: {
+        communityName: '',
+        receiptId: '',
+        receiptIds: '',
+        detailIds: '',
+        roomName: '',
+        amount: 0.00,
+        fees: [],
+        feeTime: '',
+        wechatName: '',
+        content: '',
+        qrImg: '',
+        payObjName: '',
+        feeReceipt: [],
+        apply: 'N',
+        receiptNum: '',
+        acctAmount: 0
+      },
+      userInfo: {},
+      printFlag: '0',
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.userInfo = {
+      userId: getUserId(),
+      name: getUserName()
+    }
+    this.initData()
+  },
+  methods: {
+    initData() {
+      this.printPayFeeInfo.receiptId = this.$route.query.receiptId
+      this.printPayFeeInfo.receiptIds = this.$route.query.receiptIds
+      this.printPayFeeInfo.detailIds = this.$route.query.detailIds
+      this.printPayFeeInfo.apply = this.$route.query.apply
+      this.printPayFeeInfo.merge = this.$route.query.merge
+      this.printPayFeeInfo.communityName = this.$route.query.communityName || ''
+
+      this.loadReceipt()
+      this.loadPrintSpec()
+    },
+    loadReceipt() {
+      const params = {
+        page: 1,
+        row: 30,
+        receiptId: this.printPayFeeInfo.receiptId,
+        receiptIds: this.printPayFeeInfo.receiptIds,
+        detailIds: this.printPayFeeInfo.detailIds,
+        communityId: this.communityId
+      }
+
+      queryFeeReceipt(params).then(response => {
+        const feeReceipt = response.data
+        let amount = 0
+        feeReceipt.forEach(item => {
+          amount += parseFloat(item.amount)
+        })
+
+        this.printPayFeeInfo.amount = amount.toFixed(2)
+        this.printPayFeeInfo.roomName = feeReceipt[0].objName
+        this.printPayFeeInfo.feeTime = feeReceipt[0].createTime
+        this.printPayFeeInfo.payObjName = feeReceipt[0].payObjName
+        this.printPayFeeInfo.feeReceipt = feeReceipt
+        this.printPayFeeInfo.receiptNum = feeReceipt[0].receiptCode
+
+        this.loadReceiptDetail()
+      })
+    },
+    loadReceiptDetail() {
+      const params = {
+        page: 1,
+        row: 100,
+        receiptId: this.printPayFeeInfo.receiptId,
+        receiptIds: this.printPayFeeInfo.receiptIds,
+        detailIds: this.printPayFeeInfo.detailIds,
+        communityId: this.communityId,
+        mergeFee: this.printPayFeeInfo.merge
+      }
+
+      queryFeeReceiptDetail(params).then(response => {
+        const feeReceiptDetails = response.data
+        this.printPayFeeInfo.receiptNum = this.printPayFeeInfo.receiptNum + "(" + feeReceiptDetails[0].payOrderId + ")"
+        if (feeReceiptDetails[0].amount < 0) {
+          this.printPayFeeInfo.apply = 'R'
+        }
+        let acctAmount = 0.0
+        feeReceiptDetails.forEach(item => {
+          acctAmount = acctAmount + parseFloat(item.acctAmount)
+          this.printPayFeeInfo.feeReceipt.forEach(im => {
+            if (item.receiptId == im.receiptId) {
+              item.objName = im.objName
+              item.feeTypeCd = im.feeTypeCd
+            }
+          })
+        })
+        this.printPayFeeInfo.fees = feeReceiptDetails
+        this.printPayFeeInfo.acctAmount = acctAmount.toFixed(2)
+      })
+    },
+    loadPrintSpec() {
+      const params = {
+        page: 1,
+        row: 1,
+        specCd: 2020,
+        communityId: this.communityId
+      }
+
+      queryFeePrintSpec(params).then(response => {
+        const data = response.data
+        if (data.length > 0) {
+          this.printPayFeeInfo.content = data[0].content
+          this.printPayFeeInfo.qrImg = data[0].qrImg
+          if (data[0].printName) {
+            this.printPayFeeInfo.communityName = data[0].printName
+          }
+        }
+      })
+    },
+    dateFormat(date) {
+      if (!date) return ''
+      return this.$moment(date).format('YYYY-MM-DD')
+    },
+    changeNumMoneyToChinese(num) {
+      // 这里实现数字转中文大写金额的逻辑
+      // 原vc.changeNumMoneyToChinese的实现
+      return num // 实际应该返回转换后的中文大写金额
+    },
+    handlePrint() {
+      this.printFlag = '1'
+      document.getElementById("print-btn").style.display = "none"
+      window.print()
+      window.close()
+    },
+    handleClose() {
+      window.close()
+    }
+  }
+}
+</script>
+
+<style scoped>
+.print-pay-fee-container {
+  padding: 20px;
+}
+
+.float-left {
+  float: left;
+}
+
+.float-right {
+  float: right;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.el-row {
+  width: 100%;
+  margin-bottom: 20px;
+}
+
+.el-col {
+  width: 100%;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/fee/printSmallPayFeeLang.js b/src/views/fee/printSmallPayFeeLang.js
new file mode 100644
index 0000000..a21414a
--- /dev/null
+++ b/src/views/fee/printSmallPayFeeLang.js
@@ -0,0 +1,70 @@
+export const messages = {
+  en: {
+    printSmallPayFee: {
+      receipt: 'Payment Receipt',
+      receiptNum: 'Receipt No:',
+      orderNum: 'Order No:',
+      roomNum: 'Room No',
+      owner: 'Owner',
+      time: 'Time',
+      feeItem: 'Fee Item',
+      feeRange: 'Fee Range',
+      to: 'to',
+      unitPrice: 'Unit Price/Fixed Fee:',
+      areaUsage: 'Area/Usage:',
+      paymentMethod: 'Payment Method:',
+      meterReading: 'Meter Reading:',
+      amount: 'Amount:',
+      refund: '(Refund)',
+      discount: 'Discount Amount:',
+      remark: 'Remark',
+      total: 'Total',
+      issuer: 'Issuer',
+      print: 'Print',
+      cloudPrint: 'Cloud Print',
+      cancel: 'Cancel',
+      submit: 'Submit',
+      printer: 'Printer',
+      printerRequired: 'Required, please select printer',
+      quantity: 'Quantity',
+      quantityRequired: 'Required, please enter quantity',
+      noFee: 'No fee included',
+      submitSuccess: 'Submitted successfully',
+      submitFailed: 'Submission failed'
+    }
+  },
+  zh: {
+    printSmallPayFee: {
+      receipt: '缴费收据单',
+      receiptNum: '收据号：',
+      orderNum: '订单号：',
+      roomNum: '房号',
+      owner: '业主',
+      time: '时间',
+      feeItem: '收费项目',
+      feeRange: '收费范围',
+      to: '至',
+      unitPrice: '单价/固定费：',
+      areaUsage: '面积/用量：',
+      paymentMethod: '支付方式：',
+      meterReading: '表读数：',
+      amount: '金额：',
+      refund: '(退费)',
+      discount: '优惠金额：',
+      remark: '备注',
+      total: '总计',
+      issuer: '开票人',
+      print: '打印',
+      cloudPrint: '云打印',
+      cancel: '取消',
+      submit: '提交',
+      printer: '打印机',
+      printerRequired: '必填，请选择打印机',
+      quantity: '数量',
+      quantityRequired: '必填，请填写数量',
+      noFee: '未包含费用',
+      submitSuccess: '提交成功',
+      submitFailed: '提交失败'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/fee/printSmallPayFeeList.vue b/src/views/fee/printSmallPayFeeList.vue
new file mode 100644
index 0000000..5aaa544
--- /dev/null
+++ b/src/views/fee/printSmallPayFeeList.vue
@@ -0,0 +1,318 @@
+<template>
+  <div class="printSmallPayFee-container">
+
+      <div class="print_container">
+        <div style="color:#000;font-size:32px" class="text-center">
+          <span>{{ $t('printSmallPayFee.receipt') }}</span>
+        </div>
+        <span>**************************</span>
+        <div class="section2" style="font-size: 12px; margin-left: 5px;">
+          <div>
+            <span>{{ $t('printSmallPayFee.receiptNum') }}</span>{{ printSmallPayFeeInfo.receiptNum }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.orderNum') }}</span>{{ printSmallPayFeeInfo.payOrderId }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.roomNum') }}</span>: {{ printSmallPayFeeInfo.roomName }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.owner') }}</span>: {{ printSmallPayFeeInfo.payObjName }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.time') }}</span>: {{ printSmallPayFeeInfo.feeTime }}
+          </div>
+        </div>
+        <span>**************************</span>
+        <div class="section2" style="font-size: 12px; margin-left: 5px;"
+          v-for="(item, index) in printSmallPayFeeInfo.fees" :key="index">
+          <div>
+            <span>{{ $t('printSmallPayFee.feeItem') }}</span>: {{ item.feeName }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.feeRange') }}</span>: {{ formatDate(item.startTime) }}
+            <span>{{ $t('printSmallPayFee.to') }}</span>{{ formatDate(item.endTime) }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.unitPrice') }}</span>{{ item.squarePrice }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.areaUsage') }}</span>{{ item.area }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.paymentMethod') }}</span>{{ item.primeRate }}
+          </div>
+          <div v-if="item.preDegrees">
+            <span>{{ $t('printSmallPayFee.meterReading') }}</span>{{ item.preDegrees }} {{ $t('printSmallPayFee.to') }}
+            {{ item.curDegrees }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.amount') }}</span>
+            <span>{{ formatAmount(item.amount) }}</span>
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.discount') }}</span> {{ item.discountPrice || 0 }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.remark') }}</span>: {{ item.remark }}
+          </div>
+          <span>**************************</span>
+        </div>
+        <div class="section5" style="font-size: 12px; margin-left: 5px;">
+          <div>
+            <span>{{ $t('printSmallPayFee.total') }}</span>: {{ printSmallPayFeeInfo.amount }}
+          </div>
+          <div>
+            <span>{{ $t('printSmallPayFee.issuer') }}</span>: {{ userInfo.name }}
+          </div>
+          <div v-html="printSmallPayFeeInfo.content"></div>
+          <div><img :src="printSmallPayFeeInfo.qrImg" width="100px" height="100px"></div>
+        </div>
+        <span>**************************</span>
+      </div>
+
+      <div id="print-btn" class="action-buttons">
+        <el-button type="primary" class="float-right" @click="handlePrint">
+          <i class="el-icon-printer"></i>&nbsp;{{ $t('printSmallPayFee.print') }}
+        </el-button>
+        <el-button class="float-right margin-right" @click="handleCloudPrint">
+          <i class="el-icon-cloudy"></i>&nbsp;{{ $t('printSmallPayFee.cloudPrint') }}
+        </el-button>
+        <el-button class="float-right margin-right" @click="handleClose">
+          <span>{{ $t('printSmallPayFee.cancel') }}</span>
+        </el-button>
+      </div>
+
+
+    <el-dialog :title="$t('printSmallPayFee.cloudPrint')" :visible.sync="cloudPrintVisible" width="50%">
+      <div class="cloud-print-content">
+        <el-form label-width="120px">
+          <el-form-item :label="$t('printSmallPayFee.printer')">
+            <el-select v-model="printSmallPayFeeInfo.machineId" style="width:100%"
+              :placeholder="$t('printSmallPayFee.printerRequired')">
+              <el-option v-for="(item, index) in printSmallPayFeeInfo.machines" :key="index"
+                :label="`${item.machineName}(${item.machineCode})`" :value="item.machineId" />
+            </el-select>
+          </el-form-item>
+          <el-form-item :label="$t('printSmallPayFee.quantity')">
+            <el-input v-model="printSmallPayFeeInfo.quantity" type="number"
+              :placeholder="$t('printSmallPayFee.quantityRequired')" />
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="cloudPrintVisible = false">{{ $t('printSmallPayFee.cancel') }}</el-button>
+        <el-button type="primary" @click="handleSubmitCloudPrint">{{ $t('printSmallPayFee.submit') }}</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  queryFeeReceipt,
+  queryFeeReceiptDetail,
+  queryFeePrintSpec,
+  listMachinePrinter,
+  printPayFeeDetail
+} from '@/api/fee/printSmallPayFeeApi'
+import { getCommunityId } from '@/api/community/communityApi'
+import { getUserId,getUserName } from '@/api/user/userApi'
+
+export default {
+  name: 'PrintSmallPayFeeList',
+  data() {
+    return {
+      printSmallPayFeeInfo: {
+        communityName: '',
+        receiptId: '',
+        receiptIds: '',
+        receiptNum: '',
+        payOrderId: '',
+        roomName: '',
+        amount: 0.00,
+        fees: [],
+        feeTime: '',
+        wechatName: '',
+        content: '',
+        qrImg: '',
+        payObjName: '',
+        machineId: '',
+        quantity: '1',
+        machines: []
+      },
+      cloudPrintVisible: false,
+      userInfo: {}
+    }
+  },
+  created() {
+    this.printSmallPayFeeInfo.receiptId = this.$route.query.receiptId
+    this.printSmallPayFeeInfo.receiptIds = this.$route.query.receiptIds
+    this.printSmallPayFeeInfo.communityName = getCommunityId().name
+    this.loadData()
+    this.userInfo = {
+      userId: getUserId(),
+      name: getUserName()
+    }
+  },
+  methods: {
+    async loadData() {
+      await this.loadReceipt()
+      await this.loadReceiptDetail()
+      await this.loadPrintSpec()
+    },
+    async loadReceipt() {
+      try {
+        const params = {
+          page: 1,
+          row: 30,
+          receiptId: this.printSmallPayFeeInfo.receiptId,
+          receiptIds: this.printSmallPayFeeInfo.receiptIds,
+          communityId: getCommunityId()
+        }
+        const { data } = await queryFeeReceipt(params)
+        const _feeReceipt = data
+        let _amount = 0
+        _feeReceipt.forEach(item => {
+          _amount += parseFloat(item.amount)
+        })
+        this.printSmallPayFeeInfo.amount = _amount.toFixed(2)
+        this.printSmallPayFeeInfo.roomName = _feeReceipt[0].objName
+        this.printSmallPayFeeInfo.feeTime = _feeReceipt[0].createTime
+        this.printSmallPayFeeInfo.payObjName = _feeReceipt[0].payObjName
+        this.printSmallPayFeeInfo.receiptNum = _feeReceipt[0].receiptCode
+      } catch (error) {
+        console.error('Failed to load receipt:', error)
+      }
+    },
+    async loadReceiptDetail() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          receiptId: this.printSmallPayFeeInfo.receiptId,
+          receiptIds: this.printSmallPayFeeInfo.receiptIds,
+          communityId: getCommunityId(),
+          orderBy: 'start_time'
+        }
+        const { data } = await queryFeeReceiptDetail(params)
+        this.printSmallPayFeeInfo.payOrderId = data[0].payOrderId
+        this.printSmallPayFeeInfo.fees = data
+      } catch (error) {
+        console.error('Failed to load receipt detail:', error)
+      }
+    },
+    async loadPrintSpec() {
+      try {
+        const params = {
+          page: 1,
+          row: 1,
+          specCd: 2020,
+          communityId: getCommunityId()
+        }
+        const { data } = await queryFeePrintSpec(params)
+        if (data.length > 0) {
+          this.printSmallPayFeeInfo.content = data[0].content
+          this.printSmallPayFeeInfo.qrImg = data[0].qrImg
+        }
+      } catch (error) {
+        console.error('Failed to load print spec:', error)
+      }
+    },
+    formatDate(date) {
+      if (!date) return ''
+      return new Date(date).toLocaleDateString()
+    },
+    formatAmount(amount) {
+      if (amount < 0) {
+        return amount + this.$t('printSmallPayFee.refund')
+      }
+      return amount
+    },
+    handlePrint() {
+      window.print()
+    },
+    handleCloudPrint() {
+      this.listMachinePrinter()
+      this.cloudPrintVisible = true
+    },
+    async listMachinePrinter() {
+      try {
+        const params = {
+          page: 1,
+          row: 100,
+          communityId: getCommunityId()
+        }
+        const { data } = await listMachinePrinter(params)
+        this.printSmallPayFeeInfo.machines = data
+        if (this.printSmallPayFeeInfo.machines && this.printSmallPayFeeInfo.machines.length > 0) {
+          this.printSmallPayFeeInfo.machineId = this.printSmallPayFeeInfo.machines[0].machineId
+        }
+      } catch (error) {
+        console.error('Failed to list machine printer:', error)
+      }
+    },
+    async handleSubmitCloudPrint() {
+      try {
+        const detailIds = this.printSmallPayFeeInfo.fees.map(item => item.detailId)
+        if (detailIds.length < 1) {
+          this.$message.error(this.$t('printSmallPayFee.noFee'))
+          return
+        }
+        const data = {
+          communityId: getCommunityId(),
+          machineId: this.printSmallPayFeeInfo.machineId,
+          quantity: this.printSmallPayFeeInfo.quantity,
+          detailId: detailIds.join(',')
+        }
+        await printPayFeeDetail(data)
+        this.cloudPrintVisible = false
+        this.$message.success(this.$t('printSmallPayFee.submitSuccess'))
+      } catch (error) {
+        console.error('Failed to submit cloud print:', error)
+        this.$message.error(error.message || this.$t('printSmallPayFee.submitFailed'))
+      }
+    },
+    handleClose() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.printSmallPayFee-container {
+  padding: 20px;
+}
+
+.print_container {
+  padding: 20px;
+  background: #fff;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.section2,
+.section5 {
+  margin-bottom: 15px;
+}
+
+.action-buttons {
+  margin-top: 20px;
+  text-align: right;
+}
+
+.float-right {
+  float: right;
+}
+
+.margin-right {
+  margin-right: 10px;
+}
+
+.cloud-print-content {
+  padding: 20px;
+}
+</style>
\ No newline at end of file
--
libgit2 0.21.4