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

<template>
  <div class="chatcontentIn">
    <div v-for="(chatContent,index) in chatContentList" :key="index" class="chatContentInClass">
      <div :class="chatContent.self?'rightUser':'leftUser'">
        <div class="userHeader">
          <div v-if="chatContent.group" class="userName">{{ chatContent.memberName }}</div>
          <div :class="chatContent.self?'userChatTime textRight':'userChatTime'">{{ formatTime(chatContent.chatTime) }}</div>
        </div>
        <div class="userBubble" @click="playAudio('audio'+index)">
          <div class="userMessage">
            <span class="el-icon-video-play playicon" />
            <span class="messageText">{{ chatContent.message }}</span>
            <audio :id="'audio'+index" :src="baseUrl+chatContent.src" style="display:none" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getSimulationContextListNew} from '@/api/chat';
export default {
    props:{
        currentCoversition:{
            type:Object,
            required:true
        }
    },
    data() {
        return {
            chatContentList:[],
            coversition:{},
            baseUrl:process.env.VUE_APP_VOICE_API
        };
    },
    watch:{
        '$store.state.socket.simulationText':function (val, old) { //  仿真聊天
            if (this.currentCoversition.id == val.conversationId) {
                const simulationText = this.$store.state.socket.simulationText;
                this.chatContentList.push(simulationText);
            }
        },
        $route() {
            this.inintData();
        },
        currentCoversition:function (val, old) {
            if (val) {
                this.chatContentList = [];
                this.coversition = this.currentCoversition;
                this.inintData();
            }
        }
    },
    mounted() {
        // this.coversition = this.currentCoversition;
        // this.inintData();
    },
    methods:{
        inintData() {
            getSimulationContextListNew(this.$route.query.group, this.coversition.id).then(res=>{
                const userId = this.$store.state.user.id;
                const coversitionList = res.data.map(coversition=>{
                    coversition.self = false;
                    if (coversition.member.userId == userId) {
                        coversition.self = true;
                    }
                    coversition.src = coversition.isAudio ? `/jlcloud/audio/${coversition.audioPath}` : '';
                    return coversition;
                });
                this.chatContentList = coversitionList;
            });
            // const coversitionListAll = Object.assign({}, this.$store.state.socket.coversitionList);
            // const coversitionList = coversitionListAll[this.coversition.id] || [];
            // // console.log('inintData---coversitionList' + JSON.stringify(this.$store.state.socket.coversitionList[this.coversition.id]));
            // this.chatContentList = coversitionList;
        },
        formatTime(time) {
            return /\d{2}:\d{2}:\d{2}/.exec(time)[0] || time;
        },
        playAudio(id) {
            document.querySelector('#' + id).play();
        }
        // reloadData(currentCoversition) {
        //     this.chatContentList = [];
        //     this.coversition = currentCoversition;
        //     this.inintData();
        // }
    }
};
</script>
<style lang="scss" scoped>
.chatcontentIn{
    height: 100%;
    width: 100%;
    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{}
.userChatTime{font-size: 12px;}
.userBubble{
    max-width: 200px;
    font-size: 12px;
    padding: 10px;
    background: #ccc;
    border-radius: 5px;
    cursor: pointer;
}
.playicon{
    font-size: 20px;
    vertical-align: top;
}
.textRight{text-align: right;}
.userMessage{}
.messageText{line-height: 20px;}
.chatContentInClass{
        display: inline-block;
    width: 100%;
}

// 谷歌、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>