Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
1517150e 1 parent 42109206

feat(订单管理): 添加点击车辆信息跳转商品详情功能 

refactor(消息组件): 优化消息输入框样式和交互
- 移除底部按钮和自动回复功能
- 调整输入框和发送按钮的样式
- 修改消息气泡颜色和间距
Inline Side-by-side
Showing 2 changed files with 37 additions and 27 deletions
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
59 <view class="chat-input-area"> 59 <view class="chat-input-area">
60 <view class="input-container"> 60 <view class="input-container">
61 <textarea v-model="inputMessage" placeholder="请输入回复内容..." :rows="2" :max-length="500" 61 <textarea v-model="inputMessage" placeholder="请输入回复内容..." :rows="2" :max-length="500"
62 - :cursorSpacing="100" class="message-input" @focus="handleInputFocus" /> 62 + :cursorSpacing="50" class="message-input" @focus="handleInputFocus" />
63 <nut-button type="primary" size="small" color="orange" @click="sendMessage" 63 <nut-button type="primary" size="small" color="orange" @click="sendMessage"
64 :disabled="!inputMessage.trim() || isSending" class="send-button"> 64 :disabled="!inputMessage.trim() || isSending" class="send-button">
65 {{ isSending ? '发送中...' : '发送' }} 65 {{ isSending ? '发送中...' : '发送' }}
...@@ -70,11 +70,11 @@ ...@@ -70,11 +70,11 @@
70 </view> 70 </view>
71 71
72 <!-- 底部按钮 --> 72 <!-- 底部按钮 -->
73 - <view class="detail-footer"> 73 + <!-- <view class="detail-footer">
74 <nut-button type="primary" size="large" block @click="handleClose" color="orange"> 74 <nut-button type="primary" size="large" block @click="handleClose" color="orange">
75 {{ conversation?.type === 'system' ? '关闭' : '返回' }} 75 {{ conversation?.type === 'system' ? '关闭' : '返回' }}
76 </nut-button> 76 </nut-button>
77 - </view> 77 + </view> -->
78 </view> 78 </view>
79 </nut-popup> 79 </nut-popup>
80 </template> 80 </template>
...@@ -280,24 +280,24 @@ const sendMessage = async () => { ...@@ -280,24 +280,24 @@ const sendMessage = async () => {
280 newMessage.id = response.data.id 280 newMessage.id = response.data.id
281 } 281 }
282 282
283 - // 添加自动回复提示消息 283 + // // 添加自动回复提示消息
284 - setTimeout(() => { 284 + // setTimeout(() => {
285 - const autoReplyMessage = { 285 + // const autoReplyMessage = {
286 - type: 'received', 286 + // type: 'received',
287 - content: '您的消息已发送，我们会尽快回复您，请耐心等待。', 287 + // content: '您的消息已发送，我们会尽快回复您，请耐心等待。',
288 - time: new Date().toLocaleTimeString('zh-CN', { 288 + // time: new Date().toLocaleTimeString('zh-CN', {
289 - hour: '2-digit', 289 + // hour: '2-digit',
290 - minute: '2-digit' 290 + // minute: '2-digit'
291 - }), 291 + // }),
292 - isAutoReply: true // 标记为自动回复消息 292 + // isAutoReply: true // 标记为自动回复消息
293 - } 293 + // }
294 - messages.value.push(autoReplyMessage) 294 + // messages.value.push(autoReplyMessage)
295 - 295 +
296 - // 滚动到底部显示新消息 296 + // // 滚动到底部显示新消息
297 - nextTick(() => { 297 + // nextTick(() => {
298 - scrollToBottom() 298 + // scrollToBottom()
299 - }) 299 + // })
300 - }, 1000) // 延迟1秒显示自动回复 300 + // }, 1000) // 延迟1秒显示自动回复
301 301
302 // 触发发送消息事件，通知父组件更新列表 302 // 触发发送消息事件，通知父组件更新列表
303 emit('sendMessage', { 303 emit('sendMessage', {
...@@ -532,7 +532,7 @@ watch(visible, async (newVisible) => { ...@@ -532,7 +532,7 @@ watch(visible, async (newVisible) => {
532 padding-right: 60rpx; // 右侧消息增加右边距 532 padding-right: 60rpx; // 右侧消息增加右边距
533 533
534 .message-bubble { 534 .message-bubble {
535 - background: #f97316; 535 + background: #f97416be;
536 color: #ffffff; 536 color: #ffffff;
537 border-radius: 20rpx 20rpx 8rpx 20rpx; 537 border-radius: 20rpx 20rpx 8rpx 20rpx;
538 max-width: 65%; // 减少最大宽度，留出更多空间 538 max-width: 65%; // 减少最大宽度，留出更多空间
...@@ -581,7 +581,7 @@ watch(visible, async (newVisible) => { ...@@ -581,7 +581,7 @@ watch(visible, async (newVisible) => {
581 } 581 }
582 582
583 .input-container { 583 .input-container {
584 - padding: 24rpx; 584 + padding: 30rpx;
585 display: flex; 585 display: flex;
586 align-items: flex-end; 586 align-items: flex-end;
587 gap: 16rpx; 587 gap: 16rpx;
...@@ -594,8 +594,8 @@ watch(visible, async (newVisible) => { ...@@ -594,8 +594,8 @@ watch(visible, async (newVisible) => {
594 } 594 }
595 595
596 .send-button { 596 .send-button {
597 - height: 80rpx; 597 + height: 70rpx;
598 - padding: 0 24rpx; 598 + padding: 0 48rpx;
599 flex-shrink: 0; 599 flex-shrink: 0;
600 } 600 }
601 601
......
1 <!-- 1 <!--
2 * @Date: 2022-09-19 14:11:06 2 * @Date: 2022-09-19 14:11:06
3 * @LastEditors: hookehuyr hookehuyr@gmail.com 3 * @LastEditors: hookehuyr hookehuyr@gmail.com
4 - * @LastEditTime: 2025-07-18 12:34:54 4 + * @LastEditTime: 2025-07-24 10:01:18
5 * @FilePath: /jgdl/src/pages/myOrders/index.vue 5 * @FilePath: /jgdl/src/pages/myOrders/index.vue
6 * @Description: 订单管理页面 6 * @Description: 订单管理页面
7 --> 7 -->
...@@ -60,7 +60,7 @@ ...@@ -60,7 +60,7 @@
60 </view> 60 </view>
61 61
62 <!-- 车辆信息 --> 62 <!-- 车辆信息 -->
63 - <nut-row :gutter="12" class="vehicle-info"> 63 + <nut-row :gutter="12" class="vehicle-info" @click="goToProductDetail(order.id)">
64 <nut-col :span="6"> 64 <nut-col :span="6">
65 <image :src="order.details.vehicle.front_photo || DEFAULT_COVER_IMG" :alt="order.details.vehicle.brand + ' ' + order.details.vehicle.model" class="vehicle-image" 65 <image :src="order.details.vehicle.front_photo || DEFAULT_COVER_IMG" :alt="order.details.vehicle.brand + ' ' + order.details.vehicle.model" class="vehicle-image"
66 mode="aspectFill" /> 66 mode="aspectFill" />
...@@ -327,6 +327,16 @@ const scrollStyle = ref({ ...@@ -327,6 +327,16 @@ const scrollStyle = ref({
327 height: '' 327 height: ''
328 }) 328 })
329 329
330 +/**
331 + * 跳转到商品详情页
332 + * @param {string} orderId - 订单ID
333 + */
334 +const goToProductDetail = (orderId) => {
335 + Taro.navigateTo({
336 + url: `/pages/productDetail/index?id=${orderId}`
337 + })
338 +}
339 +
330 // 滚动相关 340 // 滚动相关
331 const scrollViewRef = ref(null) 341 const scrollViewRef = ref(null)
332 const scrollTop = ref(0) 342 const scrollTop = ref(0)
......