首页大型更新，修正通信ui
This commit is contained in:
@@ -14,8 +14,8 @@
|
||||
|
||||
<div style="position: absolute;top: 0;right: 300px;font-weight: 200">
|
||||
<!-- <i style="position: relative;top: -7px;font-size: small;right: -20px;background-color: red;border-radius: 50%;color: white;width: 50px">99</i>-->
|
||||
<i class="el-icon-s-comment" @click="chat = true" style=""></i>
|
||||
|
||||
<el-button class="el-icon-s-comment" @click="chat=true" style="">打开聊天</el-button>
|
||||
<chat-component :drawerVisible="chat" ref="chatComponent"/>
|
||||
</div>
|
||||
<screenfull id="screenfull" class="right-menu-item hover-effect"/>
|
||||
<el-tooltip content="用户" effect="dark" placement="bottom">
|
||||
@@ -41,162 +41,6 @@
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
|
||||
|
||||
<el-drawer
|
||||
size="50%"
|
||||
:visible.sync="chat"
|
||||
:with-header="false">
|
||||
<!-- 好友列表-->
|
||||
<el-aside width="" style="background-color: white;display: flex;height: 90%">
|
||||
<el-main :class="currentContact.id ? 'main' : 'main_empty'" v-loading="msgListLoading">
|
||||
<div v-if="currentContact.id">
|
||||
<el-row style="position: absolute;background: white;width: 50%;z-index: 999;height: 10%;top: 0;left: 10px">
|
||||
<el-col :span="24" style="color: #666;position: relative;top: 25px">
|
||||
<span style="font-weight: 500; font-size: 16px">{{ currentContact.user.nickName }}</span>
|
||||
<el-divider direction="vertical"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="height: 60%">
|
||||
<el-col :span="24" class="msg_content" id="message_content">
|
||||
<el-row v-for="(item, index) in msgList" :key="item.id" :style="index > 0 && 'margin-top: 30px'">
|
||||
<div v-if="item.userId !== userId" style="">
|
||||
<el-col :span="24" style="font-size: 16px;">
|
||||
<div>{{ item.user.nickName }}:</div>
|
||||
<div style="display: flex">
|
||||
<div style="background-color: #f6f6f6;border-radius: 5px;padding: 0 12px 0 12px;">
|
||||
{{ item.content }}
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size: 11px; color: gray; margin-left: 5px">{{ item.createTime }}</div>
|
||||
</el-col>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-col :span="24" style="font-size: 16px;">
|
||||
<div class="chat_bubble">
|
||||
<span>{{ item.content }}</span>
|
||||
</div>
|
||||
<i class="el-icon-circle-check"
|
||||
style="float: right; margin-right: 5px; color: lightgray; vertical-align: bottom; margin-top: 23px"></i>
|
||||
<span
|
||||
style="font-size: 11px; color: gray; margin-right: 5px; float: right; margin-top: 25px">{{ item.createTime }}</span>
|
||||
</el-col>
|
||||
</div>
|
||||
</el-row>
|
||||
<el-row id="message_content_end" style="height: 15px">
|
||||
<el-col></el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row
|
||||
style="position: absolute;background: white;width: 50%;z-index: 999;height: 20%;bottom: 15px;left: 10px">
|
||||
<el-col :span="24">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
trigger="click">
|
||||
<div>
|
||||
<VEmojiPicker :showSearch="false" @select="insertEmoji"/>
|
||||
</div>
|
||||
<img slot="reference" src="@/assets/images/emoji.png" title="表情" class="input_top_menu_img"/>
|
||||
</el-popover>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-input type="textarea" :rows="3" v-model="inputVal"
|
||||
style="font-size: 17px; color: black;position: relative;height: 20%"
|
||||
@keyup.enter.native="send" placeholder="Enter 回车发送消息"/>
|
||||
<el-button style="position: relative;left: 80%;top:10px" @click="send">发送</el-button>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<img src="@/assets/images/message.png"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span style="color: gray">与您进行过沟通的联系人都会在左侧列表中显示</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-main>
|
||||
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-input suffix-icon="el-icon-search" placeholder="Enter 回车搜索联系人"
|
||||
v-model="contactQueryParams.userName" @keyup.enter.native="getContactList"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="margin-top: 15px">
|
||||
<el-button size="mini">全部</el-button>
|
||||
<el-button size="mini">个人</el-button>
|
||||
<el-button size="mini">群聊</el-button>
|
||||
</el-row>
|
||||
</el-header>
|
||||
<div v-loading="contactListLoading" style="margin-top: 10px">
|
||||
<el-main v-if="contactList.length > 0" v-infinite-scroll="contactLoadMore" :infinite-scroll-distance="750"
|
||||
:infinite-scroll-disabled="contactListTotal < 10" class="msgListMain">
|
||||
<el-row class="msgUserList" v-for="(item, index) in contactList" :key="item.contactUserId"
|
||||
:style="index > 0 && 'margin-top: 10px'" @click.native="loadMessage(item.id)">
|
||||
<el-col :span="6">
|
||||
<el-image
|
||||
:src="(item.user.avatar === '' || item.user.avatar == null) ? require('@/assets/images/profile.jpg') : item.user.avatar"
|
||||
fit="fill" style="width: 70%;border-radius: 50%;"/>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-row>
|
||||
<el-col :span="15"><span style="font-weight: 500; font-size: 16px">{{ item.user.nickName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-divider direction="vertical"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="5" style="font-size: 13px; text-overflow: ellipsis; white-space: nowrap">
|
||||
<span><i class="el-icon-circle-check"></i> {{ item.endMsg }}</span>
|
||||
</el-col>
|
||||
<el-col :span="5" style="float: right">
|
||||
<el-dropdown class="hover_down_menu">
|
||||
<span class="el-dropdown-link">
|
||||
<i class="el-icon-arrow-down el-icon-more"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item>置顶</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
<el-main v-else class="msgListMain_empty">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<img src="@/assets/images/contact.png" style="width: 80%; height: 80%"/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<span style="color: gray">暂无联系人</span>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</div>
|
||||
|
||||
|
||||
</el-container>
|
||||
|
||||
|
||||
</el-aside>
|
||||
</el-drawer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -214,9 +58,12 @@ import {getUserProfile} from "@/api/system/user";
|
||||
import {getContact, listContact} from "../../api/system/contact";
|
||||
import {addMessage} from "../../api/system/message";
|
||||
import {parseTime} from "../../utils/ruoyi";
|
||||
import ChatComponent from "./ChatComponent/index.vue";
|
||||
import chatComponent from "./ChatComponent/index.vue";
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ChatComponent,
|
||||
Breadcrumb,
|
||||
TopNav,
|
||||
Hamburger,
|
||||
@@ -227,6 +74,9 @@ export default {
|
||||
RuoYiDoc
|
||||
},
|
||||
computed: {
|
||||
chatComponent() {
|
||||
return chatComponent
|
||||
},
|
||||
...mapGetters([
|
||||
'sidebar',
|
||||
'avatar',
|
||||
@@ -274,7 +124,7 @@ export default {
|
||||
pageNum: 1
|
||||
},
|
||||
currentContact: {},
|
||||
contactUser:{}
|
||||
contactUser: {}
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -388,7 +238,7 @@ export default {
|
||||
content: detail,
|
||||
roomId: this.currentContact.roomId,
|
||||
createTime: parseTime(new Date()),
|
||||
user:this.contactUser
|
||||
user: this.contactUser
|
||||
}
|
||||
this.msgList.push(message);
|
||||
this.fleshLastMsg();
|
||||
|
||||
Reference in New Issue
Block a user