message-consult.wxml 2.7 KB

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