xkyy/xk-client-wx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 聊天（已实现图文消息对话、处方接收）

Browse Source
This commit is contained in:
年糕崽崽
2025-08-01 16:37:44 +08:00
parent 53c29e93a6
commit 930cd461a6
2 changed files with 176 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
store/chat/chat.js
View File

@@ -111,7 +111,8 @@ const ChatManager = {
id: message.id,
sender: message.sender_user_id,
type: this.getMessageType(message.message_type),
content: message.content,
// type: message.type,
content: message.message_type === 4 ? JSON.parse(message.content) : message.content,
duration: message.duration,
time: this.formatTime(message.send_time),
timestamp: message.send_time
@@ -122,7 +123,10 @@ const ChatManager = {
id: item.id,
sender: item.sender_user_id,
type: this.getMessageType(item.message_type),
content: item?.message_content || item.content,
content:
item.message_type === 4
? JSON.parse(item.message_content)
: item.message_content,
duration: item.duration,
time: item?.created_at_text || item.send_time,
timestamp: item?.created_at || item.send_time

194
subPackages/chat/chat.vue
View File

@@ -73,6 +73,30 @@
></view>
</view>
</view>
<!-- 处方卡片消息 -->
<view v-else-if="msg.type === 'prescription'" class="prescription-card">
<view class="prescription-header">
<u-icon name="file-text" size="24" color="#298dff"></u-icon>
<text class="prescription-title">电子处方</text>
<view class="prescription-status" :class="'status-' + msg.content.status">
{{ getStatusText(msg.content.status) }}
</view>
</view>
<view class="prescription-content">
<view class="info-item">
<u-icon name="order" size="16" color="#888"></u-icon>
<text class="info-text">{{ msg.content.order_no }}</text>
</view>
<view class="info-item">
<u-icon name="truck" size="16" color="#888"></u-icon>
<text class="info-text">{{ msg.content.express_name || '待发货' }}</text>
</view>
</view>
<view class="prescription-footer">
<text class="price">支付金额: ¥{{ msg.content.total_pay_price }}</text>
<text class="view-btn" @click="viewPrescription(msg.content.id, msg.content.order_no)">查看详情</text>
</view>
</view>
<text v-else>{{ msg.content }}</text>
</view>
<text class="message-time">{{ msg.time }}</text>
@@ -108,6 +132,30 @@
<text class="duration">{{ msg.duration }}''</text>
<u-icon name="sound" size="20" color="#298dff"></u-icon>
</view>
<!-- 处方卡片消息 -->
<view v-else-if="msg.type === 'prescription'" class="prescription-card">
<view class="prescription-header">
<u-icon name="file-text" size="24" color="#298dff"></u-icon>
<text class="prescription-title">电子处方</text>
<view class="prescription-status" :class="'status-' + msg.content.status">
{{ getStatusText(msg.content.status) }}
</view>
</view>
<view class="prescription-content">
<view class="info-item">
<u-icon name="order" size="16" color="#888"></u-icon>
<text class="info-text">{{ msg.content.order_no }}</text>
</view>
<view class="info-item">
<u-icon name="truck" size="16" color="#888"></u-icon>
<text class="info-text">{{ msg.content.express_name || '待发货' }}</text>
</view>
</view>
<view class="prescription-footer">
<text class="price">支付金额: ¥{{ msg.content.total_pay_price }}</text>
<text class="view-btn" @click="viewPrescription(msg.content.id, msg.content.order_no)">查看详情</text>
</view>
</view>
<text v-else>{{ msg.content }}</text>
</view>
<text class="message-time">{{ msg.time }}</text>
@@ -126,10 +174,6 @@
<view class="chat-input">
<!-- 工具按钮行 - 单独一行 -->
<view class="toolbar-row">
<!-- <view class="tool-btn" @click="toggleVoiceInput">-->
<!-- <u-icon :name="voiceInputActive ? 'mic-off' : 'mic'" size="24" color="#298dff"></u-icon>-->
<!-- <text>{{ voiceInputActive ? '键盘' : '语音' }}</text>-->
<!-- </view>-->
<view class="tool-btn" @click="openMediaPicker('image')">
<u-icon name="photo" size="24" color="#298dff"></u-icon>
<text>图片</text>
@@ -138,10 +182,6 @@
<u-icon name="camera" size="24" color="#298dff"></u-icon>
<text>拍照</text>
</view>
<!-- <view class="tool-btn" @click="openMediaPicker('video')">-->
<!-- <u-icon name="videocam" size="24" color="#298dff"></u-icon>-->
<!-- <text>视频</text>-->
<!-- </view>-->
<view class="tool-btn" @click="sendFile">
<u-icon name="file-text" size="24" color="#298dff"></u-icon>
<text>文件</text>
@@ -154,13 +194,8 @@
<!-- 输入框行 -->
<view class="input-row">
<!-- 更多操作按钮 -->
<!-- <view class="action-btn" @click="showMoreActions = !showMoreActions">-->
<!-- <u-icon :name="showMoreActions ? 'close-circle' : 'plus-circle'" size="24" color="#298dff"></u-icon>-->
<!-- </view>-->
<view class="action-btn" @click="toggleVoiceInput">
<u-icon :name="voiceInputActive ? 'mic-off' : 'mic'" size="24" color="#298dff"></u-icon>
<!-- <text>{{ voiceInputActive ? '键盘' : '语音' }}</text>-->
</view>
<!-- 文本输入 -->
@@ -258,6 +293,15 @@ export default {
hasMore: true,
loading: false, // 新增加载状态
isEmpty: false, // 历史消息是否为空
// 处方数据
prescriptionData: {
id: 159,
order_no: "XY9478601753943762",
status: 0,
express_name: "李测试",
total_pay_price: "11.94"
}
};
},
onLoad: function (option) {
@@ -375,6 +419,9 @@ export default {
addMessage(message) {
// 避免重复添加
if (!this.messages.some(m => m.id === message.id)) {
if (message.type === "prescription") {
message.content = JSON.parse(message.content);
}
console.log('push', message)
this.messages.push(message);
this.scrollToBottom();
@@ -667,19 +714,9 @@ export default {
// 发送处方
sendPrescription() {
// 模拟处方数据
const prescription = {
id: 'RX20230718001',
date: new Date().toLocaleDateString(),
items: [
{ name: '阿司匹林', dosage: '100mg', frequency: '每日一次' },
{ name: '维生素C', dosage: '500mg', frequency: '每日三次' }
]
};
this.sendMessage({
type: 'prescription',
content: JSON.stringify(prescription)
content: JSON.stringify(this.prescriptionData)
});
},
@@ -730,6 +767,25 @@ export default {
} finally {
this.loading = false;
}
},
// 获取处方状态文本
getStatusText(status) {
const statusMap = {
0: '待审核',
1: '已审核',
2: '已发货',
3: '已完成',
4: '已取消'
};
return statusMap[status] || '未知状态';
},
// 查看处方
viewPrescription(id, orderNo) {
uni.navigateTo({
url: "/subPackages/my/myrecord-detail?id=" + id + '&no=' + orderNo
})
}
}
};
@@ -1025,6 +1081,96 @@ $light-bg: #f5f9ff;
overflow: hidden;
}
/* 处方卡片样式 */
.prescription-card {
background: #fff;
border-radius: 12px;
padding: 16px;
width: 280px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid #eaeef5;
}
.prescription-header {
display: flex;
align-items: center;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #f0f7ff;
}
.prescription-title {
font-size: 16px;
font-weight: bold;
color: #333;
margin-left: 8px;
}
.prescription-status {
margin-left: auto;
font-size: 12px;
padding: 4px 10px;
border-radius: 20px;
font-weight: 500;
&.status-0 { background: #fef3c7; color: #d97706; } /* 待审核 - 黄色 */
&.status-1 { background: #d1fae5; color: #059669; } /* 已审核 - 绿色 */
&.status-2 { background: #dbeafe; color: #2563eb; } /* 已发货 - 蓝色 */
&.status-3 { background: #e5e7eb; color: #4b5563; } /* 已完成 - 灰色 */
&.status-4 { background: #fee2e2; color: #dc2626; } /* 已取消 - 红色 */
}
.prescription-content {
margin-bottom: 12px;
}
.info-item {
display: flex;
align-items: center;
margin-bottom: 8px;
font-size: 14px;
}
.info-text {
margin-left: 8px;
color: #555;
}
.prescription-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 12px;
border-top: 1px solid #f0f7ff;
}
.price {
font-size: 14px;
font-weight: 500;
color: #e53e3e;
}
.view-btn {
font-size: 14px;
color: #298dff;
padding: 6px 12px;
border-radius: 16px;
background: #f0f7ff;
font-weight: 500;
}
/* 对方消息中的处方卡片 */
.other-message .prescription-card {
background: #e6f2ff;
border: 1px solid #cce0ff;
}
/* 我的消息中的处方卡片 */
.my-message .prescription-card {
background: #e6f9ff;
border: 1px solid #cce6ff;
}
.chat-input {
background-color: #fff;
border-top: 1px solid #eaeef5;