wechatrecord.vue 3.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119
  1. <template>
  2. <view>
  3. <view class="cu-chat" v-for="(item,index) in messages" :key="index">
  4. <view class="cu-item self" v-if="formatID(item.senderId) == user.id">
  5. <view class="main" v-if="item.type == 'text'">
  6. <view class="content bg-green shadow">
  7. <text>{{formatString(item.payload).text}}</text>
  8. </view>
  9. </view>
  10. <view class="main" v-else-if="item.type == 'image'">
  11. <image @click="viewImg" :data-url="formatString(item.payload).url"
  12. :src="formatString(item.payload).url" class="radius" mode="widthFix"></image>
  13. </view>
  14. <view class="main" v-else-if="item.type == 'audio'">
  15. <GoEasyAudioPlayer :src="formatString(item.payload).url"
  16. :duration="formatString(item.payload).duration" />
  17. </view>
  18. <view class="cu-avatar radius" :style="'background-image:url('+item.sender_avatar+');'">
  19. </view>
  20. <view class="date">{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
  21. </view>
  22. <view class="cu-item" v-else>
  23. <view class="cu-avatar radius" :style="'background-image:url('+item.sender_avatar+');'">
  24. </view>
  25. <view class="main" v-if="item.type == 'text'">
  26. <view class="content shadow">
  27. <text>{{formatString(item.payload).text}}</text>
  28. </view>
  29. </view>
  30. <view class="main" v-else-if="item.type == 'image'">
  31. <image @click="viewImg" :data-url="formatString(item.payload).url"
  32. :src="formatString(item.payload).url" class="radius" mode="widthFix"></image>
  33. </view>
  34. <view class="main" v-else-if="item.type == 'audio'">
  35. <GoEasyAudioPlayer :src="formatString(item.payload).url"
  36. :duration="formatString(item.payload).duration" />
  37. </view>
  38. <view class="date ">{{$u.timeFormat(item.timestamp, 'yyyy年mm月dd日 hh时MM分ss秒')}}</view>
  39. </view>
  40. </view>
  41. <!-- <view class="cu-bar foot input" :style="[{bottom:InputBottom+'px'}]">
  42. <view class="action">
  43. <text class="cuIcon-sound text-grey"></text>
  44. </view>
  45. <input class="solid-bottom" :adjust-position="false" :focus="false" maxlength="300" cursor-spacing="10"
  46. @focus="InputFocus" @blur="InputBlur"></input>
  47. <view class="action">
  48. <text class="cuIcon-emojifill text-grey"></text>
  49. </view>
  50. <button class="cu-btn bg-green shadow">发送</button>
  51. </view> -->
  52. <u-empty text="暂无数据" mode="order" :show="show" margin-top="350"></u-empty>
  53. </view>
  54. </template>
  55. <script>
  56. import {
  57. mapState,
  58. mapMutations,
  59. mapGetters,
  60. mapActions
  61. } from 'vuex';
  62. import GoEasyAudioPlayer from "@/components/GoEasyAudioPlayer/GoEasyAudioPlayer";
  63. export default {
  64. components: {
  65. GoEasyAudioPlayer
  66. },
  67. data() {
  68. return {
  69. order_id: "",
  70. messages: [],
  71. show: false
  72. };
  73. },
  74. computed: {
  75. ...mapState(['user'])
  76. },
  77. onLoad(op) {
  78. this.order_id = op.id
  79. this.getrecord()
  80. },
  81. methods: {
  82. async getrecord() {
  83. let res = await this.$request.post("/api/v1/order/getChatRecord", {
  84. order_id: this.order_id
  85. })
  86. if (res.status == 0) {
  87. this.messages = res.data
  88. if (this.messages.length == 0) {
  89. this.show = true
  90. } else {
  91. this.show = false
  92. }
  93. }
  94. },
  95. formatString(str) {
  96. let obj = JSON.parse(str)
  97. return obj
  98. },
  99. formatID(str) {
  100. let string = str.split('_')[1]
  101. return string
  102. },
  103. viewImg(e) {
  104. console.log(e.currentTarget.dataset.url)
  105. uni.previewImage({
  106. urls: [e.currentTarget.dataset.url],
  107. current: e.currentTarget.dataset.url
  108. })
  109. }
  110. }
  111. }
  112. </script>
  113. <style>
  114. page {
  115. padding-bottom: 100upx;
  116. }
  117. </style>