rt-sim-training-client/src/views/newMap/chatView/chatContent.vue

<template>
  <div class="chatcontentIn">
    <div class="chatcontentInner">
      <div v-for="(chatContent,index) in messageList" :key="index" class="chatContentInClass">
        <div :class="chatContent.memberId == myMemberId?'rightUser':'leftUser'">
          <div class="userHeader">
            <div v-if="!chatContent.self" class="userName">{{ covertName(chatContent.memberId) }}</div>
            <div :class="chatContent.memberId == myMemberId?'userChatTime textRight':'userChatTime'">{{ chatContent.time }}</div>
          </div>
          <div class="userBubble" @click="playAudio(baseUrl+chatContent.src)">
            <div class="userMessage">
              <span class="el-icon-video-play playicon" />
              <span class="messageText">{{ chatContent.content }}</span>
            </div>
          </div>
          <audio id="audioPlay" style="display:none" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>

export default {
    props:{
        messageList:{
            type:Array,
            required:true
        },
        isAnswering:{
            type:Boolean,
            required:true
        },
        conversitionId: {
            type: String,
            required: true
        },
        conversitionMemberList: {
            type: Array,
            required: true
        },
        simulationUsers: {
            type: Object,
            required: true
        },
        userRole: {
            type: String,
            required: true
        },
        commonConversation: {
            type: Boolean,
            required: true
        },
        myMemberId: {
            type: String,
            default() {
                return '';
            }
        }
    },
    data() {
        return {
            chatContentList:[],
            currentAudioList:[],
            currentAudioIndex:0,
            isPlay:false,
            baseUrl:process.env.VUE_APP_VOICE_API
        };
    },
    watch:{
        '$store.state.socket.conversationInfo':function (val, old) { //  仿真聊天
            const conversationInfo = this.$store.state.socket.conversationInfo;
            const member = this.$store.state.training.memberData[val.message.memberId];
            conversationInfo.message.src = `/audio/${conversationInfo.message.audioPath}`;
            this.$emit('changeMessageList', conversationInfo);
            if (this.conversitionId == val.id) {
                if (member && member.userId != this.$store.state.user.id) {
                    this.currentAudioList.push(this.baseUrl + '/audio/' + conversationInfo.message.audioPath);
                    if (!this.isPlay) {
                        this.isPlay = true;
                        this.playAllAudio();
                    }
                }
                this.scrollTop();
            } else if (this.userRole === 'AUDIENCE' || this.commonConversation) {
                if (member && member.userId != this.$store.state.user.id) {
                    this.currentAudioList.push(this.baseUrl + '/audio/' + conversationInfo.message.audioPath);
                    if (!this.isPlay) {
                        this.isPlay = true;
                        this.playAllAudio();
                    }
                }
            }
        }
    },
    mounted() {
    },
    methods:{
        scrollTop() {
            this.$nextTick(function() {
                const scrollTop = document.querySelector('.chatcontentInner').offsetHeight - document.querySelector('.chatcontentIn').offsetHeight + 30;
                document.querySelector('.chatcontentIn').scrollTop = scrollTop;
            });
        },

        playAllAudio() {
            this.playEachAudio(this.currentAudioList[this.currentAudioIndex]);
        },
        playEachAudio(audioUrl) {
            this.$nextTick(function() {
                document.querySelector('#audioPlay').src = audioUrl;
                document.querySelector('#audioPlay').play();
                const that = this;
                document.querySelector('#audioPlay').onended = function() {
                    that.currentAudioList.shift();
                    if (that.currentAudioList.length > 0) {
                        that.playEachAudio(that.currentAudioList[that.currentAudioIndex]);
                    } else {
                        that.isPlay = false;
                    }
                };
            });
        },
        covertName(memberId) {
            let name = '';
            const member = this.$store.state.training.memberData[memberId];
            if (member && member.userId) {
                const user = this.simulationUsers[member.userId];
                name = member.label + '(' + user.nickName + ')';
            } else if (member) {
                name = member.label;
            }
            return name;
        },
        playAudio(audioUrl) {
            document.querySelector('#audioPlay').src = audioUrl;
            document.querySelector('#audioPlay').play();
        },
        conversationChange() {
            this.currentAudioList = [];
        }
    }
};
</script>
<style lang="scss" scoped>
.chatcontentIn{
    height: 100%;
    width: 360px;
    display: inline-block;
    overflow: auto;
    padding-bottom: 20px;
    cursor:auto;
}
.leftUser{
    float: left;
    margin-left: 10px;
    margin-top: 10px;
    display: inline-block;
}
.rightUser{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
    display: inline-block;
}
.userHeader{margin-bottom: 2px;}
.userName{font-size: 12px;display:inline-block;margin-right:10px;}
.userChatTime{font-size: 12px;display:inline-block;}
.userBubble{
    max-width: 200px;
    font-size: 12px;
    padding: 10px;
    background: #ccc;
    border-radius: 5px;
    cursor: pointer;
    display:inline-block;
}
.playicon{
    font-size: 20px;
    vertical-align: top;
}
.textRight{text-align: right;}
.userMessage{}
.messageText{line-height: 20px;}
.chatContentInClass{
        display: inline-block;
    width: 100%;
}

.rightUser .userBubble{
    float:right;
}

// 谷歌、safari、qq浏览器、360浏览器滚动条样式
// 定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
.chatcontentIn::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    // height: 110px;
    background-color: #FFFFFF;
}
/*定义滚动条轨道 内阴影+圆角*/
.chatcontentIn::-webkit-scrollbar-track {
    // box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #FFFFFF;;
}
/*定义滑块 内阴影+圆角*/
.chatcontentIn::-webkit-scrollbar-thumb {
    border-radius: 10px;
    // box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #cacaca;
}
/*滑块效果*/
.chatcontentIn::-webkit-scrollbar-thumb:hover {
    border-radius: 5px;
    // box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.4);
}
/*IE滚动条颜色*/
html {
    scrollbar-face-color:#bfbfbf;/*滚动条颜色*/
    scrollbar-highlight-color:#000;
    scrollbar-3dlight-color:#000;
    scrollbar-darkshadow-color:#000;
    scrollbar-Shadow-color:#adadad;/*滑块边色*/
    scrollbar-arrow-color:rgba(0,0,0,0.4);/*箭头颜色*/
    scrollbar-track-color:#eeeeee;/*背景颜色*/
}
</style>