From 620c33682327a9d4d0fca84d9590b15a8f185455 Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Sun, 24 Aug 2025 19:56:12 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8Dpc=E7=AB=AF=E8=AF=84?=
 =?UTF-8?q?=E8=AE=BA=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2=E4=B8=8D=E8=83=BD?=
 =?UTF-8?q?=E6=AD=A3=E5=B8=B8=E6=98=BE=E7=A4=BA=E7=94=A8=E6=88=B7=E5=A4=B4?=
 =?UTF-8?q?=E5=83=8F=E7=9A=84bug=20=E4=BF=AE=E5=A4=8D=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E5=9B=BE=E7=89=87=E5=B1=82=E5=8F=A0=E9=97=AE?=
 =?UTF-8?q?=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../compositions/comment/useCommentTable.ts   |  42 ++--
 .../src/compositions/order/useOrderTable.ts   |   1 +
 order-system/src/views/comment/Index.vue      | 226 +++++++++++++++---
 3 files changed, 219 insertions(+), 50 deletions(-)

diff --git a/order-system/src/compositions/comment/useCommentTable.ts b/order-system/src/compositions/comment/useCommentTable.ts
index 3c31fb2..ce9a51d 100644
--- a/order-system/src/compositions/comment/useCommentTable.ts
+++ b/order-system/src/compositions/comment/useCommentTable.ts
@@ -1,65 +1,67 @@
 import type { CommentListParm } from "../../api/comment/CommentModel";
-import { reactive ,ref,onMounted,nextTick} from "vue";
-import {getListApi,deleteApi} from '../../api/comment/index'
+import { reactive, ref, onMounted, nextTick } from "vue";
+import { getListApi, deleteApi } from '../../api/comment/index'
 import useInstance from "@/hooks/useInstance";
 import { ElMessage } from "element-plus";
-export default function useCommentTable(){
-    const {global} = useInstance()
+export default function useCommentTable() {
+    const { global } = useInstance()
     //表格高度
     const tableHeight = ref(0)
     //接收表格数据
     const tableList = ref([])
+
     //列表查询的参数
     const listParm = reactive<CommentListParm>({
-        currentPage:1,
-        pageSize:10,
-        total:0
+        currentPage: 1,
+        pageSize: 10,
+        total: 0
     })
     //列表
-    const getList = async()=>{
+    const getList = async () => {
         let res = await getListApi(listParm)
-        if(res && res.code == 200){
+        if (res && res.code == 200) {
             tableList.value = res.data.records;
             listParm.total = res.data.total;
         }
     }
     //删除
-    const deleteBtn = async(commentId:string)=>{
+    const deleteBtn = async (commentId: string) => {
         const confirm = await global.$myconfirm('确定删除吗？')
-        if(confirm){
+        if (confirm) {
             let res = await deleteApi(commentId)
-            if(res && res.code == 200){
+            if (res && res.code == 200) {
                 ElMessage.success(res.msg)
                 getList()
             }
         }
     }
     //搜索
-    const searchBtn = ()=>{
+    const searchBtn = () => {
         getList()
     }
     //重置
-    const resetBtn = ()=>{
+    const resetBtn = () => {
         listParm.currentPage = 1;
         getList()
     }
     //页容量改变时触发
-    const sizeChange = (size:number)=>{
+    const sizeChange = (size: number) => {
         listParm.pageSize = size;
         getList()
     }
     //页数改变触发
-    const currentChange = (page:number)=>{
+    const currentChange = (page: number) => {
         listParm.currentPage = page;
         getList()
     }
-    onMounted(()=>{
+    onMounted(() => {
         getList()
-        nextTick(()=>{
+        nextTick(() => {
             tableHeight.value = window.innerHeight - 180
         })
     })
-    return{
+
+    return {
         listParm,
         getList,
         searchBtn,
@@ -68,6 +70,6 @@ export default function useCommentTable(){
         sizeChange,
         currentChange,
         tableHeight,
-        deleteBtn
+        deleteBtn,
     }
 }
\ No newline at end of file
diff --git a/order-system/src/compositions/order/useOrderTable.ts b/order-system/src/compositions/order/useOrderTable.ts
index eae2e98..6c6cace 100644
--- a/order-system/src/compositions/order/useOrderTable.ts
+++ b/order-system/src/compositions/order/useOrderTable.ts
@@ -86,6 +86,7 @@ export default function useOrderTable() {
       tableHeight.value = window.innerHeight - 220
     })
   })
+  
   return {
     tableList,
     sendOrder,
diff --git a/order-system/src/views/comment/Index.vue b/order-system/src/views/comment/Index.vue
index 61336fd..f784850 100644
--- a/order-system/src/views/comment/Index.vue
+++ b/order-system/src/views/comment/Index.vue
@@ -1,19 +1,30 @@
 <template>
   <el-main>
+    <!-- 预览遮罩层 -->
+    <div v-if="isPreviewing" class="preview-mask" @click.self="closePreview">
+      <div class="preview-close" @click="closePreview">×</div>
+      <div class="preview-image-container">
+        <img :src="previewImage" class="preview-image" />
+      </div>
+      <div class="preview-title">{{ previewTitle }}</div>
+      <div class="preview-hint">点击任意位置或按ESC键关闭预览</div>
+    </div>
+    
     <!-- 表格 -->
-    <el-table :height="tableHeight" :data="tableList" border stripe>
+    <el-table :height="tableHeight" :data="tableList" border stripe :class="{'preview-mode': isPreviewing}">
       <el-table-column label="名称" prop="goodsName"></el-table-column>
       <el-table-column label="商品图片" prop="goodsImage">
         <template #default="scope">
-          <el-image :src="getGoodsImage(scope.row.goodsImage)"
-            style="height: 60px; width: 60px; border-radius: 8px"
-            :preview-src-list="[getGoodsImage(scope.row.goodsImage)]"
-            fit="cover"
-            hide-on-click-modal
-            @error="handleImageError">
+          <el-image :src="getGoodsImage(scope.row.goodsImage)" 
+                    style="height: 60px; width: 60px; border-radius: 8px; cursor: pointer;"
+                    fit="cover" 
+                    @error="handleImageError"
+                    @click="openPreview(getGoodsImage(scope.row.goodsImage), scope.row.goodsName)">
             <template #error>
               <div class="image-error">
-                <el-icon><Picture /></el-icon>
+                <el-icon>
+                  <Picture />
+                </el-icon>
               </div>
             </template>
           </el-image>
@@ -21,16 +32,17 @@
       </el-table-column>
       <el-table-column label="昵称" prop="nickName"></el-table-column>
       <el-table-column label="头像" prop="avatarUrl">
-        <template #default="scope">
-          <el-image :src="getAvatarUrl(scope.row.avatarUrl)" 
-                   style="height: 60px; width: 60px; border-radius: 50%"
-                   :preview-src-list="[getAvatarUrl(scope.row.avatarUrl)]"
-                   fit="cover"
-                   hide-on-click-modal
-                   @error="handleImageError">
+        <template #default="scoped">
+          <el-image :src="getAvatarUrl(scoped.row.avatarUrl)" 
+                    style="height: 60px; width: 60px; border-radius: 50%; cursor: pointer;"
+                    fit="cover" 
+                    @error="handleImageError"
+                    @click="openPreview(getAvatarUrl(scoped.row.avatarUrl), scoped.row.nickName)">
             <template #error>
               <div class="image-error">
-                <el-icon><User /></el-icon>
+                <el-icon>
+                  <User />
+                </el-icon>
               </div>
             </template>
           </el-image>
@@ -46,20 +58,30 @@
       <el-table-column label="时间" prop="createTime" width="160"></el-table-column>
       <el-table-column label="操作" width="120" align="center">
         <template #default="scope">
-          <el-button :icon="Delete" @click="deleteBtn(scope.row.commentId)" type="danger" size="default">删除</el-button>
+          <el-button :icon="Delete" 
+                     @click="deleteBtn(scope.row.commentId)" 
+                     type="danger" 
+                     size="default"
+                     :disabled="isPreviewing">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <!-- 分页 -->
-    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="listParm.currentPage"
-      :page-sizes="[10, 20, 40, 80, 100]" :page-size="listParm.pageSize"
-      layout="total, sizes, prev, pager, next, jumper" :total="listParm.total" background>
+    <el-pagination @size-change="sizeChange" 
+                   @current-change="currentChange" 
+                   :current-page.sync="listParm.currentPage"
+                   :page-sizes="[10, 20, 40, 80, 100]" 
+                   :page-size="listParm.pageSize"
+                   layout="total, sizes, prev, pager, next, jumper" 
+                   :total="listParm.total" 
+                   background
+                   :disabled="isPreviewing">
     </el-pagination>
   </el-main>
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onUnmounted } from 'vue'
 import { Delete, Picture, User } from "@element-plus/icons-vue";
 import useCommentTable from "../../compositions/comment/useCommentTable";
 
@@ -68,19 +90,100 @@ const imgUrl = ref('http://localhost:8089/')
 // 表格业务
 const { listParm, deleteBtn, tableList, sizeChange, currentChange, tableHeight } = useCommentTable();
 
-// 获取头像URL
-const getAvatarUrl = (url: string) => {
-  if (!url) return '';
-  // 微信头像URL已经是完整URL，直接返回
-  if (url.indexOf('http') === 0 || url.indexOf('https') === 0) return url;
-  // 其他情况添加基础路径
-  return imgUrl.value + url;
+// 预览相关状态
+const isPreviewing = ref(false);
+const previewImage = ref('');
+const previewTitle = ref('');
+
+// 打开预览
+const openPreview = (imageUrl: string, title: string) => {
+  if (!imageUrl) return;
+  
+  previewImage.value = imageUrl;
+  previewTitle.value = title || '图片预览';
+  isPreviewing.value = true;
+  
+  // 禁用滚动
+  document.body.style.overflow = 'hidden';
+};
+
+// 关闭预览
+const closePreview = () => {
+  isPreviewing.value = false;
+  previewImage.value = '';
+  previewTitle.value = '';
+  
+  // 恢复滚动
+  document.body.style.overflow = '';
+};
+
+// ESC键监听
+const handleKeydown = (e: KeyboardEvent) => {
+  if (e.key === 'Escape' && isPreviewing.value) {
+    closePreview();
+  }
+};
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeydown);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeydown);
+});
+
+// 定义调试信息接口
+interface DebugInfo {
+  message: string;
+  status: string;
 }
 
+// 使用明确的类型定义
+const urlDebugInfo = ref<DebugInfo[]>([]);
+
+// 添加调试信息的方法
+const addDebugInfo = (message: string, status: string) => {
+  urlDebugInfo.value.push({
+    message,
+    status
+  });
+};
+// 获取头像URL - 修复URL处理逻辑
+const getAvatarUrl = (url: string) => {
+  if (!url) {
+    // 替代原来的直接操作数组的方式
+    addDebugInfo('头像URL为空,使用默认占位符', 'error');
+    return '';
+  }
+
+  // 如果已经是完整URL，直接返回
+  if (url.indexOf('http') === 0 || url.indexOf('https') === 0) {
+    urlDebugInfo.value.push({
+      message: `头像URL完整: ${url}`,
+      status: 'success'
+    });
+    return url;
+  }
+
+  // 处理相对路径（去除可能的多余字符）
+  let cleanUrl = url;
+  if (cleanUrl.indexOf('/') === 0) {
+    cleanUrl = cleanUrl.substring(1);
+  }
+
+  // 添加基础路径
+  const fullUrl = imgUrl.value + cleanUrl;
+  urlDebugInfo.value.push({
+    message: `头像URL不完整，使用完整路径: ${fullUrl}`,
+    status: 'success'
+  });
+  return fullUrl;
+};
+
 // 获取商品图片URL
 const getGoodsImage = (images: string) => {
   if (!images) return '';
-  
+
   try {
     const imageArray = images.split(',');
     if (imageArray.length > 0) {
@@ -94,7 +197,7 @@ const getGoodsImage = (images: string) => {
   } catch (e) {
     console.error('解析商品图片失败:', e);
   }
-  
+
   return '';
 }
 
@@ -126,4 +229,67 @@ onMounted(() => {
   text-overflow: ellipsis;
   max-width: 300px;
 }
+
+.preview-mask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.85);
+  z-index: 9999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.preview-image-container {
+  max-width: 80%;
+  max-height: 80%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-image {
+  max-width: 100%;
+  max-height: 100%;
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
+}
+
+.preview-close {
+  position: absolute;
+  top: 20px;
+  right: 20px;
+  color: white;
+  font-size: 30px;
+  cursor: pointer;
+  background: rgba(0, 0, 0, 0.5);
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.preview-title {
+  color: white;
+  margin-top: 20px;
+  font-size: 18px;
+  text-align: center;
+}
+
+.preview-hint {
+  color: rgba(255, 255, 255, 0.7);
+  margin-top: 10px;
+  font-size: 14px;
+}
+
+.preview-mode {
+  opacity: 0.3;
+  pointer-events: none;
+}
 </style>
\ No newline at end of file

From 0546bc0207c9aefe1bcf195348092f65b3ca4e83 Mon Sep 17 00:00:00 2001
From: riverflow <3011499946@qq.com>
Date: Mon, 25 Aug 2025 17:12:49 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E9=A6=96=E9=A1=B5?=
 =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E5=B7=A6=E4=BE=A7=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E8=B7=B3=E8=BD=AC=E8=AF=A6=E6=83=85=E5=8F=82=E6=95=B0=E9=94=99?=
 =?UTF-8?q?=E8=AF=AFbug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 order-app/src/pages/index/index.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/order-app/src/pages/index/index.vue b/order-app/src/pages/index/index.vue
index 3c9855c..4975cc9 100644
--- a/order-app/src/pages/index/index.vue
+++ b/order-app/src/pages/index/index.vue
@@ -91,12 +91,13 @@
 			flowList.value = res.data;
 		}
 	}
-	//跳转详情
+	//跳转详情 - 修改后的函数
 	const toDetails = (item) => {
 		console.log(item)
-		//在起始页面跳转到details.vue页面并传递参数
+		// 对参数进行编码
+		const encodedGoods = encodeURIComponent(JSON.stringify(item))
 		uni.navigateTo({
-			url: '../detail/detail?goods=' + JSON.stringify(item)
+			url: '../detail/detail?goods=' + encodedGoods
 		});
 	}
 	onLoad(() => {