message-consult.wxml 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. <wxs module="_">
  2. module.exports.isUser = function (sender) {
  3. return sender === 'user'
  4. }
  5. module.exports.isHuman = function (sender) {
  6. return sender === 'human'
  7. }
  8. module.exports.isSystem = function (sender) {
  9. return sender === 'system'
  10. }
  11. module.exports.isAgent = function (sender) {
  12. return sender === 'agent'
  13. }
  14. // 判断是否需要 Markdown 渲染(AI 和医生的消息)
  15. module.exports.needMarkdown = function (sender) {
  16. return sender === 'agent' || sender === 'human'
  17. }
  18. </wxs>
  19. <!--module/chats/components/message-consult/message-consult.wxml-->
  20. <view class="consult-wrapper {{consultEnded ? 'consult-ended' : ''}}">
  21. <block wx:for="{{messages}}" wx:key="id">
  22. <!-- 系统消息样式 -->
  23. <view wx:if="{{_.isSystem(item.sender)}}" class="system-wrapper">
  24. <view class="date">{{item.sendTime}}</view>
  25. <view class="title">{{item.messageContent}}</view>
  26. </view>
  27. <!-- 普通消息 -->
  28. <view wx:else class="chat-card {{_.isUser(item.sender) ? 'right' : 'left'}}">
  29. <view class="chat-card__avatar ">
  30. <user-avatar wx:if="{{_.isUser(item.sender)}}"></user-avatar>
  31. <user-avatar wx:elif="{{_.isHuman(item.sender)}}"></user-avatar>
  32. <image wx:else src="../../assets/robot.png" mode="aspectFill" />
  33. </view>
  34. <view class="{{item.messageType === '2' ? 'image-message' : 'text-message'}}">
  35. <block wx:if="{{item.messageType === '1'}}">
  36. <t-cell t-class="cell-border-gradient" bordered="{{false}}" class="chat-box">
  37. <view slot="title" class="message-content">
  38. <!-- AI 和医生的消息使用 rich-text 渲染 Markdown -->
  39. <rich-text wx:if="{{_.needMarkdown(item.sender)}}" nodes="{{item.messageContent}}" class="markdown-content"></rich-text>
  40. <!-- 用户消息使用普通文本 -->
  41. <text wx:else>{{item.messageContent}}</text>
  42. </view>
  43. </t-cell>
  44. </block>
  45. <block wx:elif="{{item.messageType === '2'}}">
  46. <image class="message-image" src="{{item.messageContent}}"
  47. mode="aspectFill" show-menu-by-longpress="true"
  48. bind:tap="previewImage"
  49. data-url="{{item.messageContent}}" />
  50. </block>
  51. </view>
  52. </view>
  53. </block>
  54. </view>
  55. <view class="input-panel" style="bottom: {{inputBoxBottom}}rpx;" bind:tap="tapPanel" wx:if="{{!consultEnded}}">
  56. <view class="action-bar">
  57. <view class="action-btn danger" bind:tap="endConsult">结束咨询</view>
  58. </view>
  59. <view class="input-row">
  60. <textarea
  61. class="text-input"
  62. placeholder="请输入内容"
  63. bind:input="handleInput"
  64. bind:linechange="onLineChange"
  65. value="{{inputText}}"
  66. confirm-type="send"
  67. bindconfirm="sendText"
  68. adjust-position="{{false}}"
  69. bind:focus="onInputFocus"
  70. bind:blur="onInputBlur"
  71. focus="{{inputFocus}}"
  72. maxlength="{{2000}}"
  73. show-confirm-bar="{{false}}"
  74. style="height: {{textareaHeight}}rpx;"
  75. />
  76. <view class="media-btn" bind:tap="chooseImage">
  77. <t-icon name="camera" size="44rpx" color="#1D6FF6" />
  78. <text class="media-text">图片</text>
  79. </view>
  80. <view class="send-btn" bind:tap="sendText">发送</view>
  81. </view>
  82. </view>