From ff7e135ef0db4a10cd56d1c22bf35b8fd2b68719 Mon Sep 17 00:00:00 2001
From: zoujing <kidevelop@163.com>
Date: Sun, 10 Aug 2025 19:13:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E8=AF=A6=E6=83=85?=
 =?UTF-8?q?=E5=AF=B9=E6=8E=A5=E8=B0=83=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/ImageSwiper/index.vue              |  38 ++--
 components/ImageSwiper/styles/index.scss      |   2 +-
 pages/chat/ChatMainList.vue                   |   7 +
 pages/module/detail/DetailCardCompontent.vue  |  35 ++++
 .../detail/DetailCardGoodsContentList.vue     | 198 ++++++++++++++++++
 pages/module/recommend/RecommendPostsList.vue |   3 +-
 utils/WebSocketManager.js                     |   4 +-
 7 files changed, 264 insertions(+), 23 deletions(-)
 create mode 100644 pages/module/detail/DetailCardCompontent.vue
 create mode 100644 pages/module/detail/DetailCardGoodsContentList.vue

diff --git a/components/ImageSwiper/index.vue b/components/ImageSwiper/index.vue
index 98ae825..c880131 100644
--- a/components/ImageSwiper/index.vue
+++ b/components/ImageSwiper/index.vue
@@ -14,7 +14,7 @@
         v-for="(item, index) in thumbnails"
         :key="index"
       >
-        <image :src="item.photoUrl" mode="aspectFill"></image>
+        <image :src="item.imageUrl" mode="aspectFill"></image>
       </swiper-item>
     </swiper>
 
@@ -39,8 +39,8 @@
             :id="`thumbnail-${index}`"
             @click="handleThumbnailClick(index)"
           >
-            <image :src="thumb.photoUrl" mode="aspectFill"></image>
-            <text>{{ thumb.photoName }}</text>
+            <image :src="thumb.imageUrl" mode="aspectFill"></image>
+            <text>{{ thumb.name }}</text>
           </view>
         </view>
       </scroll-view>
@@ -106,35 +106,35 @@ const swiperStyle = computed(() => {
 // 默认图片数据
 const defaultImages = [
   {
-    photoUrl:
-      "https://fastly.picsum.photos/id/866/654/400.jpg?hmac=z3vI4CYrpnXEgimSlJCDwXRxEa-UDHiRwzGEyB8V-po",
-    photoName: "瑶山古寨",
+    imageUrl:
+      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04006.jpg",
+    name: "瑶山古寨",
   },
   {
-    photoUrl:
-      "https://fastly.picsum.photos/id/284/654/400.jpg?hmac=89XRCJxYTblKIFGLOp6hJ9U0GC8BQrcnJwE5pG21NAk",
-    photoName: "民俗表演",
+    imageUrl:
+      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04002.JPG",
+      name: "民俗表演",
   },
   {
-    photoUrl:
-      "https://fastly.picsum.photos/id/281/654/400.jpg?hmac=hcAJB7y2Xz3DVuz6S4XeQZgzaTJ_QWnxtbnaagZL6Fs",
-    photoName: "特色美食",
+    imageUrl:
+      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04007.jpg",
+      name: "特色美食",
   },
   {
-    photoUrl:
-      "https://fastly.picsum.photos/id/435/654/400.jpg?hmac=TSVDxfo-zXbunxNQK0erSG_nmKcS20xfhbQsCAXLlHo",
-    photoName: "传统服饰",
+    imageUrl:
+      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04014.JPG",
+    name: "传统服饰",
   },
   {
-    photoUrl:
-      "https://fastly.picsum.photos/id/737/654/400.jpg?hmac=VED05oEK3XB0Aa_DUVoZjTAf0bHjAmNYyJky4lq5vVo",
-    photoName: "其他",
+    imageUrl:
+      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/DH04020.JPG",
+    name: "其他",
   },
 ];
 
 // 使用传入的图片数据或默认数据
 const thumbnails = computed(() => {
-  return props.images.length ? props.images : defaultImages;
+  return props.images;
 });
 
 const handleThumbnailClick = (index) => {
diff --git a/components/ImageSwiper/styles/index.scss b/components/ImageSwiper/styles/index.scss
index e9a73f6..5c5038f 100644
--- a/components/ImageSwiper/styles/index.scss
+++ b/components/ImageSwiper/styles/index.scss
@@ -29,7 +29,7 @@
   position: absolute;
   left: 12px;
   right: 12px;
-  bottom: 36px;
+  bottom: 0px;
   height: 60px;
 }
 
diff --git a/pages/chat/ChatMainList.vue b/pages/chat/ChatMainList.vue
index e50bd46..626b4be 100644
--- a/pages/chat/ChatMainList.vue
+++ b/pages/chat/ChatMainList.vue
@@ -57,6 +57,12 @@
                     item.toolCall.componentName === CompName.createWorkOrderCard
                   "
                 />
+                <DetailCardCompontent
+                  v-else-if="
+                    item.toolCall.componentName === ''
+                  "
+                  :toolCall="item.toolCall"
+                />
               </template>
 
               <template #footer>
@@ -140,6 +146,7 @@ import ActivityListComponent from "../module/banner/ActivityListComponent.vue";
 import RecommendPostsComponent from "../module/recommend/RecommendPostsComponent.vue";
 import AttachListComponent from "../module/attach/AttachListComponent.vue";
 import CreateServiceOrder from "@/components/CreateServiceOrder/index.vue";
+import DetailCardCompontent from "../module/detail/DetailCardCompontent.vue";
 import { mainPageData } from "@/request/api/MainPageDataApi";
 import {
   conversationMsgList,
diff --git a/pages/module/detail/DetailCardCompontent.vue b/pages/module/detail/DetailCardCompontent.vue
new file mode 100644
index 0000000..739faa7
--- /dev/null
+++ b/pages/module/detail/DetailCardCompontent.vue
@@ -0,0 +1,35 @@
+<template>
+    <view class="container">
+        <template v-if="toolCall.picture && toolCall.picture.length > 0">
+            <ModuleTitle :title="图片详情" />
+            <ImageSwiper :images="toolCall.picture" />
+        </template>
+
+        <template v-if="toolCall.commodityList">
+            <DetailCardGoodsContentList :commodityList="toolCall.commodityList" />
+        </template>
+
+	</view>
+</template>
+
+<script setup>
+	import { defineProps } from 'vue'
+    import ModuleTitle from '@/components/ModuleTitle/index.vue'
+    import ImageSwiper from '@/components/ImageSwiper/index.vue'
+    import DetailCardGoodsContentList from './DetailCardGoodsContentList.vue'
+
+	const props = defineProps({
+		toolCall: {
+			type: Object,
+			default: {}
+		}
+	})
+
+</script>
+
+<style scoped lang="scss">
+.container {
+    width: 100%;
+}
+
+</style>
diff --git a/pages/module/detail/DetailCardGoodsContentList.vue b/pages/module/detail/DetailCardGoodsContentList.vue
new file mode 100644
index 0000000..9c8e517
--- /dev/null
+++ b/pages/module/detail/DetailCardGoodsContentList.vue
@@ -0,0 +1,198 @@
+<template>
+	<view class="container">
+		<ModuleTitle title="相关商品" />
+		<view class="container-scroll">
+			<view class="mk-card-item" v-for="(item, index) in commodityList" :key="`${item.commodityId}-${index}`">
+				<image class="card-img" :src="item.commodityPhoto" mode="aspectFill" />
+				<view class="card-content">
+					<view class="card-title-column">
+						<text class="card-title">{{ item.commodityName }}</text>
+						<view class="card-tags" v-for="(tag) in item.commodityTradeRuleList" :key="tag">
+							<text class="card-tag">{{ tag }}</text>
+						</view>
+					</view>
+					<template v-for="(serviceItem, index) in item.commodityServices" :key="serviceItem.serviceTitle">
+						<view v-if="index < 3" class="card-desc">· {{ serviceItem.serviceTitle }}</view>
+					</template>
+					<view class="card-bottom-row">
+						<view class="card-price-row">
+							<text class="card-price-fu">￥</text>
+							<text class="card-price">{{ item.specificationPrice }}</text>
+							<text class="card-unit">/人</text>
+						</view>
+						
+						<text class="card-btn" @click="placeOrderHandle(item)">下单</text>
+					</view>	
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+	import ModuleTitle from '@/components/ModuleTitle/index.vue'
+	import { defineProps } from 'vue'
+	const props = defineProps({
+		commodityList: {
+			type: Array,
+			default: []
+		}
+	})
+	
+	/// 去下单
+	const placeOrderHandle = (item) => {
+		uni.navigateTo({
+			url: `/pages/goods/index?commodityId=${item.commodityId}`,
+		})
+	}
+
+</script>
+
+<style lang="scss" scoped>
+	.container {		
+        margin-bottom: 8px 0;
+
+		.container-scroll {
+			display: flex;
+			flex-direction: row;
+			overflow-x: auto;
+			overflow-y: hidden;
+			margin: 4px 0;
+			
+			/* 隐藏滚动条 */
+			scrollbar-width: none; 
+			&::-webkit-scrollbar {
+			  display: none; 
+			}
+			
+			.mk-card-item {
+			  position: relative;
+			  
+			  display: flex;
+			  flex-direction: column;
+			  align-items: start;
+			  width: 188px;
+			//   height: 244px;
+			  background-color: #ffffff;
+			  border-radius: 10px;
+			  margin-right: 8px;
+			  padding-bottom: 12px;
+			  
+			  .card-badge {
+			    position: absolute;
+			    top: 8px;
+			    left: 8px;
+			    background: #ffe7b2;
+			    color: #b97a00;
+			    font-size: 12px;
+			    padding: 2px 8px;
+			    border-radius: 4px;
+			    z-index: 2;
+			  }
+			
+			  .card-img {
+			    width: 188px;
+			    height: 114px;
+			    border-radius: 10px;
+			    object-fit: cover; /* 确保图片不变形，保持比例裁剪 */
+			    flex-shrink: 0; /* 防止图片被压缩 */
+			  }
+			
+			  .card-content {
+				box-sizing: border-box;
+			    padding: 10px 12px 0 12px;
+			    display: flex;
+			    flex-direction: column;
+				justify-content: space-between;
+				align-items: start;
+			    width: 100%;
+			    flex: 1; /* 让内容区域占据剩余空间 */
+			    overflow: hidden; /* 防止内容溢出 */
+			  }
+			
+			  .card-title-column {
+			    display: flex;
+			    align-items: start;
+				flex-direction: column;
+			    width: 100%;
+			  }
+			
+			  .card-title {
+			    font-size: 16px;
+			    font-weight: bold;
+			    color: #222;
+			    width: 100%;
+			    /* 限制标题最多显示两行 */
+			    display: -webkit-box;
+			    -webkit-box-orient: vertical;
+			    -webkit-line-clamp: 2;
+			    overflow: hidden;
+			    text-overflow: ellipsis;
+			    line-height: 1.4;
+			    max-height: 2.8em; /* 2行的高度 */
+			  }
+			
+			  .card-tags {
+			    display: flex;
+				flex-direction: row;
+				align-items: start;
+			    padding: 6px 0;
+			  }
+			
+			  .card-tag {
+			    background: #f5f5f5;
+			    color: #ff6600;
+			    font-size: 12px;
+			    border-radius: 4px;
+			    padding: 0 6px;
+			    margin-left: 2px;
+			  }
+			
+			  .card-desc {
+			    font-size: 13px;
+			    color: #888;
+			    margin-top: 2px;
+			  }
+			
+			  .card-bottom-row {
+			    display: flex;
+			    align-items: center;
+			    justify-content: space-between;
+			    margin-top: 8px;
+				width: 100%;
+			  }
+			
+			  .card-price-row {
+				.card-price-fu {
+					color: #ff6600;
+					font-size: 11px;
+					font-weight: normal;
+				}
+			    
+				.card-price {
+					color: #ff6600;
+					font-size: 16px;
+					font-weight: bold;
+				}
+			    .card-unit {
+			      font-size: 11px;
+			      color: #888;
+			      font-weight: normal;
+			      margin-left: 2px;
+			    }
+			  }
+			
+			  .card-btn {
+			    background: #ff6600;
+			    color: #fff;
+			    font-size: 15px;
+			    border-radius: 20px;
+			    padding: 0 18px;
+			    height: 32px;
+			    line-height: 32px;
+			  }
+			}	
+			
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/pages/module/recommend/RecommendPostsList.vue b/pages/module/recommend/RecommendPostsList.vue
index 5095f37..8f89d7c 100644
--- a/pages/module/recommend/RecommendPostsList.vue
+++ b/pages/module/recommend/RecommendPostsList.vue
@@ -32,7 +32,8 @@
 </script>
 
 <style lang="scss" scoped>
-	.container {		
+	.container {
+    width: 100%;		
 	}
 
 	.container-scroll {
diff --git a/utils/WebSocketManager.js b/utils/WebSocketManager.js
index 83b5aed..12c5fa3 100644
--- a/utils/WebSocketManager.js
+++ b/utils/WebSocketManager.js
@@ -342,7 +342,7 @@ export class WebSocketManager {
                         data: messageStr,
                         success: () => {
                             this.stats.messagesSent++;
-                            console.log("消息发送成功:", messageData);
+                            //console.log("消息发送成功:", messageData);
                         },
                         fail: (error) => {
                             console.error("发送消息失败:", error);
@@ -356,7 +356,7 @@ export class WebSocketManager {
                     // 标准 WebSocket 环境
                     this.ws.send(messageStr);
                     this.stats.messagesSent++;
-                    console.log("消息发送成功:", messageData);
+                    //console.log("消息发送成功:", messageData);
                 }
 
                 return true;