heshanApp/pages_im/pages/conversation/chating/components/MessageItem/MassMessageRender.vue

<template>
  <view class="text_message_container bg_container" v-if="isText">
    <mp-html :previewImg="false" :showImgMenu="false" :lazyLoad="false" :content="getContent" />
  </view>
  <view @click="playAudio" class="audio_message_container bg_container"
    :class="{ audio_message_container_self: isSender }" v-else>
    <view class="cricleplay">
      <view class="small"></view>
      <view class="middle" :class="{ stopanimate: !playing }"></view>
      <view class="large" :class="{ stopanimate: !playing }"></view>
    </view>
    <text class="audio_duration">{{ data.soundElem.duration }}''</text>
  </view>
</template>

<script>
export default {
  name: "MassMessageRender",
  props: {
    isSender: Boolean,
    data: Object,
  },
  data() {
    return {
      playing: false,
      paused: false,
      innerAudioContext: uni.createInnerAudioContext(),
    };
  },
  mounted() {
    this.setPlayListener();
  },
  beforeDestroy() {
    this.innerAudioContext.destroy();
  },
  computed: {
    isText() {
      return this.data.textElem !== null
    },
    getContent() {
      if (this.isText) {
        return this.data.textElem.content
      }
    },
  },
  methods: {
    setPlayListener() {
      const onPlayHandler = () => {
        this.playing = true;
        this.paused = false;
      };
      const onPauseOrStorHandler = () => {
        this.playing = false;
        this.paused = true;
      };
      this.innerAudioContext.onPlay(onPlayHandler);
      this.innerAudioContext.onPause(onPauseOrStorHandler);
      this.innerAudioContext.onEnded(onPauseOrStorHandler);
    },
    playAudio() {
      this.setPlayListener();
      if (this.paused) {
        this.innerAudioContext.play();
        return;
      }
      if (this.playing) {
        this.innerAudioContext.pause();
        return;
      }
      this.innerAudioContext.src = this.data.soundElem.sourceUrl;
      this.innerAudioContext.play();
    },
  }
};
</script>

<style lang="scss" scoped>
.bg_container {
  padding: 18rpx 24rpx;
  border-radius: 0rpx 12rpx 12rpx 12rpx;
  background-color: #ffffff;
}

.audio_message_container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.audio_duration {
  font-size: 28rpx;
}

.cricleplay {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 12rpx;
}

.cricleplay_small {
  width: 5px;
  height: 5px;
  border-width: 1px; /* Default border width if needed, or specific border widths below */
  border-style: solid;
  border-color: #3870e4;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.cricleplay_middle {
  width: 10px;
  height: 10px;
  border-width: 1px;
  border-style: solid;
  border-color: #3870e4;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin-left: -5px;
  opacity: 1;
}

.cricleplay_large {
  width: 20px;
  height: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #3870e4;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  margin-left: -15px;
  opacity: 1;
}

.stopanimate {
  opacity: 0.5;
}

.audio_message_container_self {
  flex-direction: row-reverse;
}

/* Helper classes for self alignment if needed, or just rely on flex-direction: row-reverse */
.cricleplay_self {
    margin-right: 0;
    margin-left: 12rpx;
    flex-direction: row-reverse;
}

.cricleplay_small_self,
.cricleplay_middle_self,
.cricleplay_large_self {
    border-left-color: #3870e4;
    border-right-color: transparent;
}

.cricleplay_middle_self {
    margin-left: 0;
    margin-right: -5px;
}

.cricleplay_large_self {
    margin-left: 0;
    margin-right: -15px;
}
</style>