fix：登录按钮和预览图片

1 month ago · 7721f3d6d4
3 changed files with 224 additions and 12 deletions
--- a/src/components/previews/PreviewImage.vue
+++ 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>
--- a/src/views/moneyManage/receiveDetail/receiveDetail.vue
+++ b/src/views/moneyManage/receiveDetail/receiveDetail.vue
@ -697,7 +697,7 @@ const getlist = async () => {
                    receivedMarket: MarketNameForId(receivedMarket),
                    cashRoleId: cashRoleId,
                    paymentCurrency: payCurrencySelect,
-                    submitterMarket:receivedMarket
+                    submitterMarket: receivedMarket
                }
            }
        })
@ -852,7 +852,7 @@ const handleAddForm = async () => {
                paymentCurrency: CurrencyForId(addFormData.value.paymentCurrency) || '',
                receivedMarket: MarketNameForId(addFormData.value.receivedMarket) || '',
                paymentAmount: (addFormData.value.paymentAmount) * 100,
-                submitterMarket:adminData.value.markets
+                submitterMarket: adminData.value.markets
            }
        })
        if (result.code == 200) {
@ -964,6 +964,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({

@ -991,16 +1020,16 @@ const submitRefund = async () => {
                goodsName: refundFormData.value.goodsName, // 商品名称（必填）
                goodNum: refundFormData.value.goodNum,  // 商品数量（必填，默认0）
                paymentCurrency: refundFormData.value.paymentCurrency,  // 付款币种（必填）
-                paymentAmount: (refundFormData.value.paymentAmount)*100,  // 付款金额（必填）
+                paymentAmount: (refundFormData.value.paymentAmount) * 100,  // 付款金额（必填）
                receivedCurrency: refundFormData.value.receivedCurrency,  // 到账币种（必填）
-                receivedAmount: (refundFormData.value.receivedAmount)*100,  // 到账金额（必填）
-                handlingCharge: (refundFormData.value.handlingCharge)*100,  // 手续费（可选）
+                receivedAmount: (refundFormData.value.receivedAmount) * 100,  // 到账金额（必填）
+                handlingCharge: (refundFormData.value.handlingCharge) * 100,  // 手续费（可选）
                receivedMarket: refundFormData.value.receivedMarket, // 到账地区（可选）
                payType: refundFormData.value.payType,  // 支付方式（必填）
                payTime: refundFormData.value.payTime,  // 付款时间，格式：yyyy-MM-dd HH:mm:ss（可选）
                receivedTime: refundFormData.value.receivedTime,  // 到账时间，格式：yyyy-MM-dd HH:mm:ss（可选）
                areaServise: adminData.value.adminName,  // 提交人（可选）
-                submitterId:adminData.value.id,
+                submitterId: adminData.value.id,
                voucher: refundFormData.value.voucher,  // 转账凭证URL（可选）
                remark: refundFormData.value.remark,  // 备注信息（可选）
                refundReason: refundFormData.value.refundReason,  // 退款备注-客服填写（可选）
--- a/src/views/moneyManage/refundDetail/refundService.vue
+++ b/src/views/moneyManage/refundDetail/refundService.vue
@ -67,10 +67,14 @@
            <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>
+            <el-table-column prop="voucher" label="转账凭证" width="110px">
                    <template #default="scope">
-                    <img v-if="scope.row.voucher" :src="scope.row.voucher" style="width: 40px; height: 40px;" />
-                    <span v-else>无转账凭证</span>
+                      <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 />
@ -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: '新币',