word.wxml 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041
  1. <import src="./chat-send-status.wxml"/>
  2. <import src="./voice.wxml"/>
  3. <template name="chat-word">
  4. <view style="width: 100%;display: flex;flex-direction: {{isMy?'row-reverse':'row'}};margin-bottom: {{index===length-1?150:20}}rpx;margin-top: 20rpx;">
  5. <image style="width: 70rpx;height: 70rpx;border-radius: 50%;margin-left: 15rpx;margin-right: 15rpx;"
  6. src="{{headUrl}}"/>
  7. <image wx:if="{{type==='text'||type==='voice'}}" class="chat-list-arrow-style"
  8. src="./../../image/chat/popu_{{isMy?'blue':'white'}}.png"/>
  9. <!-- 文本消息 -->
  10. <block wx:if="{{type==='text'}}">
  11. <view wx:if="{{type==='text'}}" class="{{isMy?'isMyWordStyle':'isOtherWordStyle'}}"
  12. style="border-radius: 10rpx;padding: 20rpx;font-size: 30rpx;max-width: 60%;"
  13. bindtap="chatTextItemClickEvent"
  14. data-index="{{index}}">{{content}}
  15. </view>
  16. </block>
  17. <block wx:if="{{type==='image'}}">
  18. <image wx:if="{{type==='image'}}" class="chat-list-pic-style" src="{{content}}"
  19. mode="aspectFill" bindtap="imageClickEvent" data-url="{{content}}"/>
  20. </block>
  21. <block wx:if="{{type==='voice'}}">
  22. <view style="width: {{(voiceDuration-1)*0.6+10}}%;border-radius: 10rpx;padding: 20rpx;font-size: 30rpx;max-width: 60%;display: flex;justify-content: {{isMy?'flex-end':'flex-start'}}"
  23. class="{{isMy?'isMyWordStyle':'isOtherWordStyle'}}"
  24. bindtap="chatVoiceItemClickEvent"
  25. data-voice-path="{{content}}"
  26. data-voice-duration="{{voiceDuration}}"
  27. data-is-my="{{isMy}}"
  28. data-index="{{index}}">
  29. <template is="voice-item" data="{{isMy:isMy,isPlaying:isPlaying}}"/>
  30. </view>
  31. <view class="voice-duration-style">{{voiceDuration}}"</view>
  32. </block>
  33. <block wx:if="{{isMy}}">
  34. <template is="chat-send-status" data="{{sendStatus:sendStatus,index:index}}"/>
  35. </block>
  36. </view>
  37. </template>