message-consult.wxml 3.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  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 或医生的消息,使用 towxml 直接渲染 Markdown -->
  39. <block wx:if="{{_.needMarkdown(item.sender)}}">
  40. <towxml markdown="{{item.messageContent}}" theme="light" />
  41. </block>
  42. <!-- 其他消息使用普通文本显示 -->
  43. <text wx:else>{{item.messageContent}}</text>
  44. </view>
  45. </t-cell>
  46. </block>
  47. <block wx:elif="{{item.messageType === '2'}}">
  48. <image class="message-image" src="{{item.messageContent}}"
  49. mode="aspectFill" show-menu-by-longpress="true"
  50. bind:tap="previewImage"
  51. data-url="{{item.messageContent}}" />
  52. </block>
  53. </view>
  54. </view>
  55. </block>
  56. </view>
  57. <view class="input-panel" style="bottom: {{inputBoxBottom}}rpx;" bind:tap="tapPanel" wx:if="{{!consultEnded}}">
  58. <view class="action-bar">
  59. <view class="action-btn danger" bind:tap="endConsult">结束咨询</view>
  60. </view>
  61. <view class="input-row">
  62. <textarea
  63. class="text-input"
  64. placeholder="请输入内容"
  65. bind:input="handleInput"
  66. bind:linechange="onLineChange"
  67. value="{{inputText}}"
  68. confirm-type="send"
  69. bindconfirm="sendText"
  70. adjust-position="{{false}}"
  71. bind:focus="onInputFocus"
  72. bind:blur="onInputBlur"
  73. focus="{{inputFocus}}"
  74. maxlength="{{2000}}"
  75. show-confirm-bar="{{false}}"
  76. style="height: {{textareaHeight}}rpx;"
  77. />
  78. <view class="media-btn" bind:tap="chooseImage">
  79. <t-icon name="camera" size="44rpx" color="#1D6FF6" />
  80. <text class="media-text">图片</text>
  81. </view>
  82. <view class="send-btn" bind:tap="sendText">发送</view>
  83. </view>
  84. </view>