添加 询单图片预览

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;