From 90f83588fd2e609448f727aac1ed907e11c8b75d Mon Sep 17 00:00:00 2001
From: aaron <>
Date: Sun, 23 Feb 2025 17:32:41 +0800
Subject: [PATCH] update

---
 src/api/community.js                  |  11 +-
 src/config/env.js                     |   4 +-
 src/views/community/CommunityList.vue | 175 +++++++++++++++++++++-----
 3 files changed, 154 insertions(+), 36 deletions(-)

diff --git a/src/api/community.js b/src/api/community.js
index c5d571f..f6b7a63 100644
--- a/src/api/community.js
+++ b/src/api/community.js
@@ -52,4 +52,13 @@ export function updateCommunity(id, data) {
     method: 'put',
     data
   })
-} 
\ No newline at end of file
+}
+
+// 上传图片
+export function uploadImage(data) {
+  return request({
+    url: '/api/upload/image',
+    method: 'post',
+    data
+  })
+}
\ No newline at end of file
diff --git a/src/config/env.js b/src/config/env.js
index cd34479..35c6fcd 100644
--- a/src/config/env.js
+++ b/src/config/env.js
@@ -1,12 +1,12 @@
 const env = {
   development: {
-    API_URL: 'http://localhost:8080'
+    API_URL: 'http://localhost:8000'
   },
   testing: {
     API_URL: process.env.VUE_APP_API_URL || 'https://api-dev.beefast.co'
   },
   production: {
-    API_URL: process.env.VUE_APP_API_URL || 'http://api.example.com'
+    API_URL: process.env.VUE_APP_API_URL || 'http://api.beefast.co'
   }
 }
 
diff --git a/src/views/community/CommunityList.vue b/src/views/community/CommunityList.vue
index 0b77661..4bbb776 100644
--- a/src/views/community/CommunityList.vue
+++ b/src/views/community/CommunityList.vue
@@ -52,6 +52,7 @@
         </template>
       </a-table>
 
+
       <a-modal
         v-model:visible="mapVisible"
         title="小区位置"
@@ -97,19 +98,33 @@
           />
 
           <a-form-item label="群二维码" name="qy_group_qrcode">
-            <a-upload
-              v-model:file-list="fileList"
-              name="file"
-              :action="uploadUrl"
-              list-type="picture-card"
-              :max-count="1"
-              @change="handleQrcodeChange"
-            >
-              <div v-if="!fileList.length">
-                <plus-outlined />
-                <div style="margin-top: 8px">上传</div>
-              </div>
-            </a-upload>
+            <div class="qrcode-upload-wrapper">
+              <a-upload
+                v-model:file-list="fileList"
+                name="file"
+                :customRequest="handleQRCodeUpload"
+                @remove="handleQRCodeRemove"
+                list-type="picture-card"
+                accept=".jpg,.jpeg,.png"
+                :max-count="1"
+                @preview="previewQRCode"
+              >
+                <div v-if="!fileList.length">
+                  <plus-outlined />
+                  <div style="margin-top: 8px">上传</div>
+                </div>
+              </a-upload>
+              
+              <!-- 添加预览模态框 -->
+              <a-modal
+                v-model:visible="previewVisible"
+                :title="previewTitle"
+                :footer="null"
+                @cancel="handlePreviewCancel"
+              >
+                <img style="width: 100%" :src="previewImage" />
+              </a-modal>
+            </div>
           </a-form-item>
         </a-form>
       </a-modal>
@@ -120,13 +135,13 @@
 <script>
 import { defineComponent, ref, onMounted, nextTick } from 'vue'
 import { message, Tag, Menu, Dropdown, Image, Upload } from 'ant-design-vue'
-import { getCommunityList, createCommunity, updateCommunityStatus, updateCommunity } from '@/api/community'
+import { getCommunityList, createCommunity, updateCommunityStatus, updateCommunity, uploadImage } from '@/api/community'
 import { loadAMap, createMap } from '@/utils/amap.js'
 import dayjs from 'dayjs'
 import PageContainer from '@/components/PageContainer.vue'
 import { DownOutlined, PlusOutlined } from '@ant-design/icons-vue'
 import MapPicker from '@/components/MapPicker/index.vue'
-
+import request from '../../utils/request'
 export default defineComponent({
   components: {
     PageContainer,
@@ -325,7 +340,9 @@ export default defineComponent({
 
     // 添加上传相关的响应式变量
     const fileList = ref([])
-    const uploadUrl = '/api/upload/image'
+    const previewVisible = ref(false)
+    const previewImage = ref('')
+    const previewTitle = ref('')
 
     // 显示编辑模态框
     const handleEdit = (record) => {
@@ -376,6 +393,85 @@ export default defineComponent({
       fileList.value = []
     }
 
+    // 修改预览图片函数
+    const previewQRCode = async (file) => {
+      // 如果是已上传的图片，直接使用 url
+      if (file.url) {
+        previewImage.value = file.url
+        previewVisible.value = true
+        previewTitle.value = file.name || '群二维码预览'
+        return
+      }
+      
+      // 如果是新上传的图片，需要处理 File 对象
+      if (file.originFileObj) {
+        try {
+          const preview = await getBase64(file.originFileObj)
+          previewImage.value = preview
+          previewVisible.value = true
+          previewTitle.value = file.name || '群二维码预览'
+        } catch (error) {
+          console.error('预览图片失败:', error)
+          message.error('预览失败')
+        }
+      }
+    }
+
+    // 关闭预览
+    const handlePreviewCancel = () => {
+      previewVisible.value = false
+    }
+
+    // 文件转base64
+    const getBase64 = (file) => {
+      return new Promise((resolve, reject) => {
+        const reader = new FileReader()
+        reader.readAsDataURL(file)
+        reader.onload = () => resolve(reader.result)
+        reader.onerror = error => reject(error)
+      })
+    }
+
+    // 修改上传处理函数
+    const handleQRCodeUpload = async ({ file, onSuccess, onError }) => {
+      const formData = new FormData()
+      formData.append('file', file)
+
+      try {
+        const res = await request.post('/api/upload/image', formData, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          }
+        })
+        
+        if (res.code === 200) {
+          formState.value.qy_group_qrcode = res.data.url
+          // 更新文件列表以支持预览
+          fileList.value = [{
+            uid: file.uid,
+            name: file.name,
+            status: 'done',
+            url: res.data.url
+          }]
+          message.success('上传成功')
+          onSuccess(res)
+        } else {
+          message.error(res.message || '上传失败')
+          onError(new Error(res.message || '上传失败'))
+        }
+      } catch (error) {
+        console.error('上传图片失败:', error)
+        message.error('上传失败')
+        onError(error)
+      }
+    }
+
+    // 删除二维码
+    const handleQRCodeRemove = (file) => {
+      formState.value.qy_group_qrcode = ''
+      fileList.value = []
+    }
+
     // 统一提交处理
     const handleSubmit = () => {
       formRef.value.validate().then(async () => {
@@ -440,20 +536,6 @@ export default defineComponent({
       }
     }
 
-    // 处理二维码上传
-    const handleQrcodeChange = (info) => {
-      if (info.file.status === 'done') {
-        if (info.file.response.code === 200) {
-          formState.value.qy_group_qrcode = info.file.response.data.url
-          message.success('上传成功')
-        } else {
-          message.error(info.file.response.message || '上传失败')
-        }
-      } else if (info.file.status === 'error') {
-        message.error('上传失败')
-      }
-    }
-
     onMounted(() => {
       fetchData()
     })
@@ -481,9 +563,14 @@ export default defineComponent({
       handleCancel,
       handleStatusChange,
       fileList,
-      uploadUrl,
-      handleQrcodeChange,
-      handleEdit
+      handleQRCodeUpload,
+      handleQRCodeRemove,
+      handleEdit,
+      previewVisible,
+      previewImage,
+      previewTitle,
+      handlePreviewCancel,
+      previewQRCode
     }
   }
 })
@@ -797,4 +884,26 @@ export default defineComponent({
   width: 104px;
   height: 104px;
 }
+
+.qrcode-upload-wrapper {
+  :deep(.ant-upload-list-picture-card-container) {
+    width: 104px;
+    height: 104px;
+  }
+
+  :deep(.ant-upload.ant-upload-select-picture-card) {
+    width: 104px;
+    height: 104px;
+  }
+
+  :deep(.ant-upload-list-picture-card .ant-upload-list-item) {
+    padding: 4px;
+  }
+
+  :deep(.ant-upload-list-picture-card .ant-upload-list-item-thumbnail) {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
 </style> 
\ No newline at end of file