hookehuyr

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

refactor(消息组件): 优化消息输入框样式和交互
- 移除底部按钮和自动回复功能
- 调整输入框和发送按钮的样式
- 修改消息气泡颜色和间距
......@@ -59,7 +59,7 @@
<view class="chat-input-area">
<view class="input-container">
<textarea v-model="inputMessage" placeholder="请输入回复内容..." :rows="2" :max-length="500"
:cursorSpacing="100" class="message-input" @focus="handleInputFocus" />
:cursorSpacing="50" class="message-input" @focus="handleInputFocus" />
<nut-button type="primary" size="small" color="orange" @click="sendMessage"
:disabled="!inputMessage.trim() || isSending" class="send-button">
{{ isSending ? '发送中...' : '发送' }}
......@@ -70,11 +70,11 @@
</view>
<!-- 底部按钮 -->
<view class="detail-footer">
<!-- <view class="detail-footer">
<nut-button type="primary" size="large" block @click="handleClose" color="orange">
{{ conversation?.type === 'system' ? '关闭' : '返回' }}
</nut-button>
</view>
</view> -->
</view>
</nut-popup>
</template>
......@@ -280,24 +280,24 @@ const sendMessage = async () => {
newMessage.id = response.data.id
}
// 添加自动回复提示消息
setTimeout(() => {
const autoReplyMessage = {
type: 'received',
content: '您的消息已发送,我们会尽快回复您,请耐心等待。',
time: new Date().toLocaleTimeString('zh-CN', {
hour: '2-digit',
minute: '2-digit'
}),
isAutoReply: true // 标记为自动回复消息
}
messages.value.push(autoReplyMessage)
// 滚动到底部显示新消息
nextTick(() => {
scrollToBottom()
})
}, 1000) // 延迟1秒显示自动回复
// // 添加自动回复提示消息
// setTimeout(() => {
// const autoReplyMessage = {
// type: 'received',
// content: '您的消息已发送,我们会尽快回复您,请耐心等待。',
// time: new Date().toLocaleTimeString('zh-CN', {
// hour: '2-digit',
// minute: '2-digit'
// }),
// isAutoReply: true // 标记为自动回复消息
// }
// messages.value.push(autoReplyMessage)
// // 滚动到底部显示新消息
// nextTick(() => {
// scrollToBottom()
// })
// }, 1000) // 延迟1秒显示自动回复
// 触发发送消息事件,通知父组件更新列表
emit('sendMessage', {
......@@ -532,7 +532,7 @@ watch(visible, async (newVisible) => {
padding-right: 60rpx; // 右侧消息增加右边距
.message-bubble {
background: #f97316;
background: #f97416be;
color: #ffffff;
border-radius: 20rpx 20rpx 8rpx 20rpx;
max-width: 65%; // 减少最大宽度,留出更多空间
......@@ -581,7 +581,7 @@ watch(visible, async (newVisible) => {
}
.input-container {
padding: 24rpx;
padding: 30rpx;
display: flex;
align-items: flex-end;
gap: 16rpx;
......@@ -594,8 +594,8 @@ watch(visible, async (newVisible) => {
}
.send-button {
height: 80rpx;
padding: 0 24rpx;
height: 70rpx;
padding: 0 48rpx;
flex-shrink: 0;
}
......
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-18 12:34:54
* @LastEditTime: 2025-07-24 10:01:18
* @FilePath: /jgdl/src/pages/myOrders/index.vue
* @Description: 订单管理页面
-->
......@@ -60,7 +60,7 @@
</view>
<!-- 车辆信息 -->
<nut-row :gutter="12" class="vehicle-info">
<nut-row :gutter="12" class="vehicle-info" @click="goToProductDetail(order.id)">
<nut-col :span="6">
<image :src="order.details.vehicle.front_photo || DEFAULT_COVER_IMG" :alt="order.details.vehicle.brand + ' ' + order.details.vehicle.model" class="vehicle-image"
mode="aspectFill" />
......@@ -327,6 +327,16 @@ const scrollStyle = ref({
height: ''
})
/**
* 跳转到商品详情页
* @param {string} orderId - 订单ID
*/
const goToProductDetail = (orderId) => {
Taro.navigateTo({
url: `/pages/productDetail/index?id=${orderId}`
})
}
// 滚动相关
const scrollViewRef = ref(null)
const scrollTop = ref(0)
......