添加 询单图片预览

src/api/adminApi.ts

@@ -147,7 +147,7 @@ export class manageService {
   }
   //用户编辑
   static userEdit(params: any) {
-    return request.get<Api.Common.AddResponse>({
+    return request.post<Api.Common.AddResponse>({
       url: '/admin/user/update',
       params
       // showErrorMessage: false // 不显示错误消息

src/views/admin/customer/index.vue

@@ -149,7 +149,7 @@
     </div>
   </div>
   <!-- 详情对话框 -->
-  <el-dialog v-model="detailDialogVisible" title="详情" width="700px">
+  <el-dialog v-model="detailDialogVisible" title="详情" width="800px">
     <div class="detail-info-table">
       <div class="row">
         <div>客户名称：{{ detailRow.contacts }}</div>

src/views/admin/inquiry_system/index.vue

@@ -180,7 +180,7 @@
       </ArtTable>
     </div>
   </div>
-  <el-dialog v-model="detailDialogVisible" title="详情"  width="700px">
+  <el-dialog v-model="detailDialogVisible" title="详情" >
     <div class="detail-info-table">
       <div class="row">
         <div>客户名称：{{ detailRow.contacts }}</div>
@@ -211,9 +211,18 @@
       </div>
     </div>
     <div class="dtitle">详情内容</div>
-    <div v-if="detailRow" v-html="detailRow.content" class="detils-content">
+    <div v-if="detailRow" v-html="detailRow.content" class="detils-content" @click="handleImageClick" style="cursor: pointer;">
       
     </div>
+    
+    <!-- 图片预览组件 -->
+    <ElImageViewer
+      v-if="showImageViewer"
+      :url-list="imageList"
+      :initial-index="currentImageIndex"
+      :hide-on-click-modal="true"
+      @close="showImageViewer = false"
+    />
   </el-dialog>
   <el-dialog 
     :title="dialogType === 'add' ? '录单' : '编辑'"
@@ -331,9 +340,9 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, onUnmounted } from 'vue'
+  import { ref, onMounted, onUnmounted, nextTick } from 'vue'
   import dayjs from 'dayjs'
-  import { ElMessageBox } from 'element-plus'
+  import { ElMessageBox, ElImageViewer } from 'element-plus'
   import { CrmService } from '@/api/crmApi'
   import { manageService } from '@/api/adminApi'
   const loading = ref(false)
@@ -669,6 +678,26 @@
     fenpeiDialogVisible.value = false
     gettableList()
   }
+
+  const imageList = ref<string[]>([])
+  const currentImageIndex = ref(0)
+  const showImageViewer = ref(false)
+
+  const handleImageClick = (event: MouseEvent) => {
+    const target = event.target as HTMLElement
+    if (target.tagName === 'IMG') {
+      const imgElement = target as HTMLImageElement
+      
+      // 获取所有图片并设置预览列表
+      const contentDiv = event.currentTarget as HTMLElement
+      const allImages = contentDiv.querySelectorAll('img')
+      const imageUrls = Array.from(allImages).map(img => img.src)
+      
+      imageList.value = imageUrls
+      currentImageIndex.value = imageUrls.indexOf(imgElement.src)
+      showImageViewer.value = true
+    }
+  }
 </script>
 
 <style lang="scss" scoped>
@@ -822,7 +851,7 @@
   }
 
   .detail-info-table {
-    padding-left: 15px;
+    padding-left: 25px;
     .row {
       display: flex;
       justify-content: flex-start;
@@ -855,12 +884,18 @@
     color: #333;
     font-size: 16px;
     font-weight: bold;
-    padding-left: 15px;
+    padding-left: 25px;
   }
   .detils-content {
-    padding-left: 15px;
+    padding-left: 25px;
     img {
       max-width: 100% !important;
+      cursor: pointer;
+      transition: opacity 0.2s;
+      
+      &:hover {
+        opacity: 0.8;
+      }
     }
   }
 </style>

src/views/admin/user/index.vue

@@ -34,7 +34,13 @@
           <el-table-column prop="sn" label="SN" align="center" />
           <el-table-column prop="follow" label="头像" align="center">
             <template #default="scope">
-              <img :src="scope.row.avatar" alt="头像" class="avatar" />
+              <img 
+                :src="scope.row.avatar" 
+                alt="头像" 
+                class="avatar" 
+                @click="handleAvatarClick(scope.row.avatar)"
+                style="cursor: pointer;"
+              />
             </template>
           </el-table-column>
           <el-table-column prop="name" label="用户名称" align="center" />
@@ -178,10 +184,19 @@
       </div>
     </el-form>
   </el-dialog>
+  
+  <!-- 图片预览组件 -->
+  <ElImageViewer
+    v-if="showImageViewer"
+    :url-list="[currentImageUrl]"
+    :hide-on-click-modal="true"
+    @close="showImageViewer = false"
+  />
 </template>
 
 <script setup lang="ts">
   import { ref, reactive, onMounted, watch } from 'vue'
+  import { ElImageViewer } from 'element-plus'
   import { manageService } from '@/api/adminApi'
   import { useAuth } from '@/composables/useAuth'
   const { hasAuth } = useAuth()
@@ -352,6 +367,17 @@
     AddDialogVisible.value = false
     gettableList()
   }
+
+  // 图片预览相关
+  const showImageViewer = ref(false)
+  const currentImageUrl = ref('')
+
+  const handleAvatarClick = (avatarUrl: string) => {
+    if (avatarUrl) {
+      currentImageUrl.value = avatarUrl
+      showImageViewer.value = true
+    }
+  }
 </script>
 
 <style scoped lang="scss">
@@ -361,6 +387,12 @@
   .avatar {
     width: 40px;
     height: 40px;
+    border-radius: 50%;
+    transition: opacity 0.2s;
+    
+    &:hover {
+      opacity: 0.8;
+    }
   }
   .itemtag {
     margin-top: -16px;