|
|
@@ -0,0 +1,218 @@
|
|
|
+<template>
|
|
|
+ <div class="chat-box-data">
|
|
|
+ <div class="loading" v-show="loading">
|
|
|
+ 会话获取中...
|
|
|
+ </div>
|
|
|
+ <div ref="chatList" class="chat-information">
|
|
|
+ <div v-for="(item,index) in dataList" :key="index">
|
|
|
+ <div class="chat-item" :class="item.from == $store.getters.user.userId ? 'push':'pull' ">
|
|
|
+ <img :src="item.fromUserInfo.avatarUrl" mode="aspectFill" class="avatar"></img>
|
|
|
+ <div class="content-box">
|
|
|
+ <div class="content" v-if="item.type === 'text'">{{item.body.text}}</div>
|
|
|
+ <el-image :src="item.body.thumbnailUrl" :preview-src-list="[item.body.originalUrl]" fit="fill"
|
|
|
+ :class="returnImageClass(item.body)" v-else>
|
|
|
+ </el-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="chat-send">
|
|
|
+ <el-button type="primary" size="medium">发送</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import MescrollVue from 'mescroll.js/mescroll.vue'
|
|
|
+ export default {
|
|
|
+ props: ['body'],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dataList: [],
|
|
|
+ nextMessageId: null,
|
|
|
+ hasTopData: true,
|
|
|
+ loading: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ // 设置onscroll事件处理函数
|
|
|
+ this.$refs.chatList.onscroll = this.chatScroll;
|
|
|
+ this.mescrollUpFunc('init');
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ chatScroll() {
|
|
|
+ if (!this.hasTopData) return;
|
|
|
+ let scrollHeight = this.$refs.chatList.scrollTop;
|
|
|
+ if (scrollHeight === 0) this.mescrollUpFunc();
|
|
|
+ },
|
|
|
+ returnImageClass(item) {
|
|
|
+ let w = item.thumbnailWidth,
|
|
|
+ h = item.thumbnailHeight;
|
|
|
+ let str = ''
|
|
|
+ if (w > h) str = 'image-width';
|
|
|
+ if (w == h) str = 'image-width-height';
|
|
|
+ if (w < h) str = 'image-height';
|
|
|
+ return str + ' image-box';
|
|
|
+ },
|
|
|
+ mescrollUpFunc(type) {
|
|
|
+ this.loading = true;
|
|
|
+ this.joinHistoryMsg().then(data => {
|
|
|
+ this.loading = false;
|
|
|
+ if (!this.nextMessageId) this.dataList = [];
|
|
|
+ if (data.length === 0) this.hasTopData = false;
|
|
|
+ this.dataList = data.concat(this.dataList);
|
|
|
+ if (type === 'init') {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.chatList.scrollTo(0, 99999);
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ joinHistoryMsg() {
|
|
|
+ return new Promise((done, fail) => {
|
|
|
+ this.$chat.getHistoryMessageList(this.nextMessageId, this.body.conversationId, res => {
|
|
|
+ this.nextMessageId = res.data.nextMessageId || 'null';
|
|
|
+ done(!res.data ? [] : res.data.list);
|
|
|
+ }, () => {
|
|
|
+ done([]);
|
|
|
+ });
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {
|
|
|
+ MescrollVue
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .chat-box-data {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .chat-item {
|
|
|
+ display: flex;
|
|
|
+ padding: 10px;
|
|
|
+ align-items: flex-start;
|
|
|
+ align-content: flex-start;
|
|
|
+
|
|
|
+ .avatar {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ border-radius: 50%;
|
|
|
+ border: #fff solid 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-box {
|
|
|
+ border-radius: 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-width {
|
|
|
+ width: 140px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-height {
|
|
|
+ width: 100px;
|
|
|
+ height: 140px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-width-height {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-radius: 8px;
|
|
|
+ word-break: break-all;
|
|
|
+ line-height: 21px;
|
|
|
+ position: relative;
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 收到的消息 */
|
|
|
+ &.pull {
|
|
|
+ .content-box {
|
|
|
+ margin-right: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-box {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-left: 10px;
|
|
|
+ background-color: $--color-background-hover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 发出的消息 */
|
|
|
+ &.push {
|
|
|
+ /* 主轴为水平方向，起点在右端。使不修改DOM结构，也能改变元素排列顺序 */
|
|
|
+ flex-direction: row-reverse;
|
|
|
+
|
|
|
+ .content-box {
|
|
|
+ flex-direction: row-reverse;
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .image-box {
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ margin-right: 10px;
|
|
|
+ background-color: $--color-primary;
|
|
|
+ color: #fff;
|
|
|
+ box-shadow: 0px 1px 12px rgba(3, 3, 3, 0.08);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-information {
|
|
|
+ flex: 1;
|
|
|
+ height: 0;
|
|
|
+ overflow-y: auto;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .loading {
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ background: $--color-primary;
|
|
|
+ height: 30px;
|
|
|
+ color: #fff;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .chat-send {
|
|
|
+ height: 200px;
|
|
|
+ border-top: 1px solid $--color-border;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .el-button {
|
|
|
+ position: absolute;
|
|
|
+ right: 10px;
|
|
|
+ bottom: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
