diff --git a/src/components/previews/PreviewImage.vue b/src/components/previews/PreviewImage.vue
new file mode 100644
index 0000000..26b49ca
--- /dev/null
+++ b/src/components/previews/PreviewImage.vue
@@ -0,0 +1,147 @@
+  <!-- 图片预览组件，下一期再使用 -->
+<template>
+  <div v-if="showPreview" class="image-preview-overlay" @click="closePreview">
+    <div class="image-container" @click.stop>
+      <img :src="currentImageUrl" :alt="altText" class="preview-image" />
+      <button class="close-button" @click="closePreview">×</button>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+// 组件属性
+const props = defineProps({
+  // 图片URL
+  imageUrl: {
+    type: String,
+    default: ''
+  },
+  // 图片描述
+  altText: {
+    type: String,
+    default: '预览图片'
+  },
+  // 是否显示预览
+  modelValue: {
+    type: Boolean,
+    default: false
+  }
+})
+
+// 组件事件
+const emit = defineEmits(['update:modelValue', 'close'])
+
+// 响应式数据
+const showPreview = ref(false)
+const currentImageUrl = ref('')
+
+// 打开预览
+const openPreview = (url) => {
+  currentImageUrl.value = url || props.imageUrl
+  showPreview.value = true
+  emit('update:modelValue', true)
+}
+
+// 关闭预览
+const closePreview = () => {
+  showPreview.value = false
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+// 监听modelValue变化
+watch(() => props.modelValue, (newVal) => {
+  showPreview.value = newVal
+  if (newVal) {
+    currentImageUrl.value = props.imageUrl
+  }
+})
+
+// 监听imageUrl变化
+watch(() => props.imageUrl, (newUrl) => {
+  if (showPreview.value) {
+    currentImageUrl.value = newUrl
+  }
+})
+
+// 暴露方法给父组件
+defineExpose({
+  openPreview,
+  closePreview
+})
+</script>
+
+<style scoped>
+.image-preview-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.7);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 9999;
+  overflow: auto;
+}
+
+.image-container {
+  position: relative;
+  max-width: 90vw;
+  max-height: 90vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.close-button {
+  position: absolute;
+  top: -40px;
+  right: -40px;
+  width: 40px;
+  height: 40px;
+  background: rgba(255, 255, 255, 0.9);
+  border: none;
+  border-radius: 50%;
+  font-size: 24px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #333;
+  transition: all 0.3s ease;
+}
+
+.close-button:hover {
+  background: rgba(255, 255, 255, 1);
+  transform: scale(1.1);
+}
+
+/* 响应式设计 */
+@media (max-width: 768px) {
+  .image-container {
+    max-width: 95vw;
+    max-height: 95vh;
+  }
+  
+  .close-button {
+    top: -30px;
+    right: -30px;
+    width: 30px;
+    height: 30px;
+    font-size: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/moneyManage/receiveDetail/receiveDetail.vue b/src/views/moneyManage/receiveDetail/receiveDetail.vue
index ecdc449..bfff5aa 100644
--- a/src/views/moneyManage/receiveDetail/receiveDetail.vue
+++ b/src/views/moneyManage/receiveDetail/receiveDetail.vue
@@ -998,6 +998,35 @@ const customUpload = async (options) => {
         ElMessage.error(`上传失败: ${error.msg || error.message || '网络异常'}`)
     }
 }
+
+// 预览图片函数
+
+const previewImage = (imageUrl) => {
+    // 使用 element-plus 的 el-image 组件实现图片预览功能
+    const imageElement = document.createElement('img');
+    imageElement.src = imageUrl;
+    imageElement.style.maxWidth = '80vw';
+    imageElement.style.maxHeight = '80vh';
+    const viewer = document.createElement('div');
+    viewer.style.position = 'fixed';
+    viewer.style.top = '0';
+    viewer.style.left = '0';
+    viewer.style.width = '100vw';
+    viewer.style.height = '100vh';
+    viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+    viewer.style.display = 'flex';
+    viewer.style.justifyContent = 'center';
+    viewer.style.alignItems = 'center';
+    viewer.style.zIndex = '9999';
+    viewer.style.overflow = 'auto';
+    viewer.appendChild(imageElement);
+    document.body.appendChild(viewer);
+    viewer.addEventListener('click', () => {
+        document.body.removeChild(viewer);
+    });
+};
+
+
 //========= 客服新增 退款/撤回 相关 ===============
 const refundFormData = ref({
 
diff --git a/src/views/moneyManage/refundDetail/refundService.vue b/src/views/moneyManage/refundDetail/refundService.vue
index 556f40b..1ccd383 100644
--- a/src/views/moneyManage/refundDetail/refundService.vue
+++ b/src/views/moneyManage/refundDetail/refundService.vue
@@ -67,12 +67,16 @@
             <el-table-column prop="paymentAmount" label="付款金额" width="120" />
             <el-table-column prop="payType" label="支付方式" width="140" />
             <el-table-column prop="payTime" label="付款时间" width="180" />
-            <el-table-column prop="voucher" label="转账凭证" width="120" show-overflow-tooltip>
-                <template #default="scope">
-                    <img v-if="scope.row.voucher" :src="scope.row.voucher" style="width: 40px; height: 40px;" />
-                    <span v-else>无转账凭证</span>
-                </template>
-            </el-table-column>
+            <el-table-column prop="voucher" label="转账凭证" width="110px">
+                    <template #default="scope">
+                      <div v-if="scope.row.voucher"
+                        style="display: flex; justify-content: center; align-items: center; cursor: pointer;"
+                        @click="previewImage(scope.row.voucher)">
+                        <img :src="scope.row.voucher" alt="转账凭证" style="width: auto; height: 40px;">
+                      </div>
+                      <div v-else style="display: flex; justify-content: center; align-items: center; height: 40px;">无转账凭证</div>
+                    </template>
+                  </el-table-column>
             <el-table-column prop="remark" label="备注" width="150" show-overflow-tooltip />
             <el-table-column prop="status" label="订单状态" width="120">
                 <template #default="scope">
@@ -390,6 +394,38 @@ const getMarket = async function () {
         console.log('请求失败', error)
     }
 }
+
+// 预览图片函数
+const previewImage = (imageUrl) => {
+  // 使用 element-plus 的 el-image 组件实现图片预览功能
+  const imageElement = document.createElement('img');
+  imageElement.src = imageUrl;
+  imageElement.style.maxWidth = '80vw';
+  imageElement.style.maxHeight = '80vh';
+
+  const viewer = document.createElement('div');
+  viewer.style.position = 'fixed';
+  viewer.style.top = '0';
+  viewer.style.left = '0';
+  viewer.style.width = '100vw';
+  viewer.style.height = '100vh';
+  viewer.style.backgroundColor = 'rgba(0, 0, 0, 0.7)';
+  viewer.style.display = 'flex';
+  viewer.style.justifyContent = 'center';
+  viewer.style.alignItems = 'center';
+  viewer.style.zIndex = '9999';
+  viewer.style.overflow = 'auto';
+
+  viewer.appendChild(imageElement);
+  document.body.appendChild(viewer);
+
+  viewer.addEventListener('click', () => {
+    document.body.removeChild(viewer);
+  });
+};
+
+
+
 const currencies = ref([
     {
         value: '新币',