xie.bx
3 years ago
15 changed files with 992 additions and 729 deletions
|
Before Width: | Height: | Size: 133 KiB After Width: | Height: | Size: 32 KiB |
@ -1,35 +0,0 @@ |
|||||
<template> |
|
||||
<div class='img-box'> |
|
||||
<img :src="url" style="width: 100%;height: 100%;cursor: pointer;" /> |
|
||||
</div> |
|
||||
</template> |
|
||||
|
|
||||
<script> |
|
||||
export default { |
|
||||
name: "headImage", |
|
||||
data() { |
|
||||
return {} |
|
||||
}, |
|
||||
props: { |
|
||||
size: { |
|
||||
type: Number, |
|
||||
default: 50 |
|
||||
}, |
|
||||
url:{ |
|
||||
type: String, |
|
||||
default: '../assets/default_head.png' |
|
||||
} |
|
||||
} |
|
||||
} |
|
||||
</script> |
|
||||
|
|
||||
<style scoped> |
|
||||
.img-box { |
|
||||
width: 100%; |
|
||||
height: 100%; |
|
||||
display: inline-block; |
|
||||
border-radius: 3px; |
|
||||
background-color: #c0c4cc; |
|
||||
overflow: hidden; |
|
||||
} |
|
||||
</style> |
|
||||
@ -1,165 +1,165 @@ |
|||||
<template> |
<template> |
||||
|
|
||||
<div class="item" :class="active ? 'active' : ''"> |
<div class="item" :class="active ? 'active' : ''"> |
||||
<div class="left"> |
<div class="left"> |
||||
<head-image :url="chat.headImage" :size="40"> |
<head-image :url="chat.headImage" :size="40"> |
||||
|
|
||||
</head-image> |
</head-image> |
||||
<div v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</div> |
<div v-show="chat.unreadCount>0" class="unread-text">{{chat.unreadCount}}</div> |
||||
</div> |
</div> |
||||
<div class="mid"> |
<div class="mid"> |
||||
<div>{{ chat.showName}}</div> |
<div>{{ chat.showName}}</div> |
||||
<div class="msg-text">{{chat.lastContent}}</div> |
<div class="msg-text">{{chat.lastContent}}</div> |
||||
</div> |
</div> |
||||
<div class="right "> |
<div class="right "> |
||||
<div @click.stop="onClickClose()"><i class="el-icon-close close" style="border: none; font-size: 20px;color: black;" title="关闭"></i></div> |
<div @click.stop="onClickClose()"><i class="el-icon-close close" style="border: none; font-size: 20px;color: black;" title="关闭"></i></div> |
||||
|
|
||||
<div class="msg-time"> |
<div class="msg-time"> |
||||
<chat-time :time="chat.lastSendTime"></chat-time> |
<chat-time :time="chat.lastSendTime"></chat-time> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
|
|
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import ChatTime from "./ChatTime.vue"; |
import ChatTime from "./ChatTime.vue"; |
||||
import HeadImage from './HeadImage.vue'; |
import HeadImage from '../common/HeadImage.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: "chatItem", |
name: "chatItem", |
||||
components: { |
components: { |
||||
ChatTime, |
ChatTime, |
||||
HeadImage |
HeadImage |
||||
}, |
}, |
||||
data() { |
data() { |
||||
return {} |
return {} |
||||
}, |
}, |
||||
props: { |
props: { |
||||
chat: { |
chat: { |
||||
type: Object |
type: Object |
||||
}, |
}, |
||||
active: { |
active: { |
||||
type: Boolean |
type: Boolean |
||||
}, |
}, |
||||
index: { |
index: { |
||||
type: Number |
type: Number |
||||
} |
} |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
|
|
||||
onClickClose(){ |
onClickClose(){ |
||||
this.$emit("del"); |
this.$emit("del"); |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scode lang="scss"> |
<style scode lang="scss"> |
||||
.item { |
.item { |
||||
height: 65px; |
height: 65px; |
||||
display: flex; |
display: flex; |
||||
margin-bottom: 1px; |
margin-bottom: 1px; |
||||
position: relative; |
position: relative; |
||||
padding-left: 15px; |
padding-left: 15px; |
||||
align-items: center; |
align-items: center; |
||||
padding-right: 5px; |
padding-right: 5px; |
||||
background-color: #eeeeee; |
background-color: #eeeeee; |
||||
|
|
||||
&:hover { |
&:hover { |
||||
background-color: #dddddd; |
background-color: #dddddd; |
||||
} |
} |
||||
|
|
||||
&.active { |
&.active { |
||||
background-color: #cccccc; |
background-color: #cccccc; |
||||
} |
} |
||||
|
|
||||
|
|
||||
&:hover { |
&:hover { |
||||
.close { |
.close { |
||||
display: block !important; |
display: block !important; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.left { |
.left { |
||||
position: relative; |
position: relative; |
||||
display: flex; |
display: flex; |
||||
width: 45px; |
width: 45px; |
||||
height: 45px; |
height: 45px; |
||||
|
|
||||
.unread-text { |
.unread-text { |
||||
position: absolute; |
position: absolute; |
||||
background-color: #f56c6c; |
background-color: #f56c6c; |
||||
right: -8px; |
right: -8px; |
||||
top: -8px; |
top: -8px; |
||||
color: white; |
color: white; |
||||
border-radius: 30px; |
border-radius: 30px; |
||||
padding: 0 5px; |
padding: 0 5px; |
||||
font-size: 10px; |
font-size: 10px; |
||||
text-align: center; |
text-align: center; |
||||
white-space: nowrap; |
white-space: nowrap; |
||||
border: 1px solid #f1e5e5; |
border: 1px solid #f1e5e5; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
|
|
||||
.mid { |
.mid { |
||||
margin-left: 15px; |
margin-left: 15px; |
||||
flex: 3; |
flex: 3; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
height: 100%; |
height: 100%; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
&>div { |
&>div { |
||||
display: flex; |
display: flex; |
||||
justify-content: flex-start; |
justify-content: flex-start; |
||||
align-items: center; |
align-items: center; |
||||
flex: 1; |
flex: 1; |
||||
} |
} |
||||
|
|
||||
.msg-text { |
.msg-text { |
||||
font-size: 14px; |
font-size: 14px; |
||||
color: #888888; |
color: #888888; |
||||
white-space: nowrap; |
white-space: nowrap; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.right { |
.right { |
||||
flex: 1; |
flex: 1; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
align-items: flex-end; |
align-items: flex-end; |
||||
height: 100%; |
height: 100%; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
&>div { |
&>div { |
||||
display: flex; |
display: flex; |
||||
justify-content: flex-start; |
justify-content: flex-start; |
||||
align-items: center; |
align-items: center; |
||||
flex: 1; |
flex: 1; |
||||
} |
} |
||||
|
|
||||
.close { |
.close { |
||||
width: 1.5rem; |
width: 1.5rem; |
||||
height: 1.5rem; |
height: 1.5rem; |
||||
right: 0; |
right: 0; |
||||
top: 1rem; |
top: 1rem; |
||||
cursor: pointer; |
cursor: pointer; |
||||
display: none; |
display: none; |
||||
} |
} |
||||
|
|
||||
.msg-time { |
.msg-time { |
||||
font-size: 14px; |
font-size: 14px; |
||||
color: #888888; |
color: #888888; |
||||
white-space: nowrap; |
white-space: nowrap; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.active { |
.active { |
||||
background-color: #eeeeee; |
background-color: #eeeeee; |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -1,43 +1,41 @@ |
|||||
<template> |
<template> |
||||
<span>{{formatDate}}</span> |
<span>{{formatDate}}</span> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
export default { |
export default { |
||||
name: "chatTime", |
name: "chatTime", |
||||
data() { |
data() { |
||||
return {} |
return {} |
||||
}, |
}, |
||||
props: { |
props: { |
||||
time: { |
time: { |
||||
type: Number |
type: Number |
||||
} |
} |
||||
}, |
}, |
||||
computed:{ |
computed:{ |
||||
formatDate(){ |
formatDate(){ |
||||
console.log(this.time); |
let time = new Date(this.time); |
||||
let time = new Date(this.time); |
let strtime = ""; |
||||
let strtime = ""; |
let curTime = new Date(); |
||||
let curTime = new Date(); |
let dayDiff =curTime.getDate() - time.getDate() ; |
||||
let dayDiff =curTime.getDate() - time.getDate() ; |
if (time.getDate() === new Date().getDate()) { |
||||
if (time.getDate() === new Date().getDate()) { |
strtime = time.getHours() <= 9 ? "0" + time.getHours() : time.getHours(); |
||||
strtime = time.getHours() <= 9 ? "0" + time.getHours() : time.getHours(); |
strtime += ":" |
||||
strtime += ":" |
strtime += time.getMinutes() <= 9 ? "0" + time.getMinutes() : time.getMinutes(); |
||||
strtime += time.getMinutes() <= 9 ? "0" + time.getMinutes() : time.getMinutes(); |
} else if (dayDiff === 1) { |
||||
} else if (dayDiff === 1) { |
strtime = "昨天"; |
||||
strtime = "昨天"; |
} else if (dayDiff < 7) { |
||||
} else if (dayDiff < 7) { |
strtime = `${dayDiff}天前`; |
||||
strtime = `${dayDiff}天前`; |
} else { |
||||
} else { |
strtime = time.getMonth()+1+"月"+time.getDate()+"日"; |
||||
strtime = time.getMonth()+1+"月"+time.getDate()+"日"; |
} |
||||
} |
|
||||
|
return strtime; |
||||
console.log(strtime); |
} |
||||
return strtime; |
} |
||||
} |
} |
||||
} |
</script> |
||||
} |
|
||||
</script> |
<style> |
||||
|
</style> |
||||
<style> |
|
||||
</style> |
|
||||
@ -0,0 +1,209 @@ |
|||||
|
<template> |
||||
|
<div class="im-msg-item" :class="{'im-chat-mine':mine}"> |
||||
|
<div class="head-image"> |
||||
|
<head-image :url="headImage"></head-image> |
||||
|
</div> |
||||
|
<div class="im-msg-content"> |
||||
|
<div class="im-msg-top"> |
||||
|
<span>{{showName}}</span> |
||||
|
<chat-time :time="msgInfo.sendTime"></chat-time> |
||||
|
</div> |
||||
|
<div class="im-msg-bottom"> |
||||
|
<span class="im-msg-text" v-if="msgInfo.type==0" >{{msgInfo.content}}</span> |
||||
|
<div class="im-msg-image" v-if="msgInfo.type==1"> |
||||
|
<div class="img-load-box" v-loading="loading" |
||||
|
element-loading-text="上传中.." |
||||
|
element-loading-background="rgba(0, 0, 0, 0.4)"> |
||||
|
<img class="send-image" :src="JSON.parse(msgInfo.content).thumbUrl"/> |
||||
|
</div> |
||||
|
<span title="发送失败" v-show="loadFail" @click="handleSendFail" class="send-fail el-icon-warning"></span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import ChatTime from "./ChatTime.vue"; |
||||
|
import HeadImage from "../common/HeadImage.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: "messageItem", |
||||
|
components: { |
||||
|
ChatTime, |
||||
|
HeadImage |
||||
|
}, |
||||
|
props: { |
||||
|
mine:{ |
||||
|
type:Boolean, |
||||
|
required: true |
||||
|
}, |
||||
|
headImage: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
showName: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
msgInfo: { |
||||
|
type: Object, |
||||
|
required: true |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
handleSendFail(){ |
||||
|
this.$message.error("该文件已上传失败，目前不支持自动重新发送，建议手动重新发送") |
||||
|
} |
||||
|
}, |
||||
|
computed:{ |
||||
|
loading(){ |
||||
|
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "loadding"; |
||||
|
}, |
||||
|
loadFail(){ |
||||
|
return this.msgInfo.loadStatus && this.msgInfo.loadStatus === "fail"; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.im-msg-item { |
||||
|
position: relative; |
||||
|
font-size: 0; |
||||
|
margin-bottom: 10px; |
||||
|
padding-left: 60px; |
||||
|
min-height: 68px; |
||||
|
|
||||
|
.head-image { |
||||
|
position: absolute; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
} |
||||
|
|
||||
|
.im-msg-content { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.im-msg-top { |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
color: #333; |
||||
|
font-size: 14px; |
||||
|
line-height: 20px; |
||||
|
|
||||
|
span { |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-msg-bottom { |
||||
|
text-align: left; |
||||
|
|
||||
|
.im-msg-text { |
||||
|
position: relative; |
||||
|
line-height: 22px; |
||||
|
margin-top: 10px; |
||||
|
padding: 10px; |
||||
|
background-color: #eeeeee; |
||||
|
border-radius: 3px; |
||||
|
color: #333; |
||||
|
display: inline-block; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:after { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
left: -10px; |
||||
|
top: 13px; |
||||
|
width: 0; |
||||
|
height: 0; |
||||
|
border-style: solid dashed dashed; |
||||
|
border-color: #eeeeee transparent transparent; |
||||
|
overflow: hidden; |
||||
|
border-width: 10px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-msg-image{ |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
flex-direction: row; |
||||
|
align-items: center; |
||||
|
|
||||
|
|
||||
|
.send-image{ |
||||
|
min-width: 300px; |
||||
|
min-height: 200px; |
||||
|
max-width: 600px; |
||||
|
max-height: 400px; |
||||
|
border: #dddddd solid 1px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
|
||||
|
.send-fail{ |
||||
|
color: red; |
||||
|
font-size: 30px; |
||||
|
cursor: pointer; |
||||
|
margin: 0 20px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
|
||||
|
&.im-chat-mine { |
||||
|
text-align: right; |
||||
|
padding-left: 0; |
||||
|
padding-right: 60px; |
||||
|
|
||||
|
.head-image { |
||||
|
left: auto; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
.im-msg-content { |
||||
|
|
||||
|
.im-msg-top { |
||||
|
flex-direction: row-reverse; |
||||
|
|
||||
|
span { |
||||
|
margin-left: 12px; |
||||
|
margin-right: 0; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-msg-bottom { |
||||
|
text-align: right; |
||||
|
|
||||
|
.im-msg-text { |
||||
|
margin-left: 10px; |
||||
|
background-color: #5fb878; |
||||
|
color: #fff; |
||||
|
display: inline-block; |
||||
|
vertical-align: top; |
||||
|
font-size: 14px; |
||||
|
|
||||
|
&:after { |
||||
|
left: auto; |
||||
|
right: -10px; |
||||
|
border-top-color: #5fb878; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.im-msg-image { |
||||
|
flex-direction: row-reverse; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.message-info { |
||||
|
right: 60px !important; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,87 @@ |
|||||
|
<template> |
||||
|
<el-upload :action="action" :accept="fileTypes.join(',')" :show-file-list="false" :on-success="handleSuccess" |
||||
|
:before-upload="beforeUpload"> |
||||
|
<slot></slot> |
||||
|
</el-upload> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "fileUpload", |
||||
|
data() { |
||||
|
return { |
||||
|
loading: null |
||||
|
} |
||||
|
}, |
||||
|
props: { |
||||
|
action: { |
||||
|
type: String, |
||||
|
required: true |
||||
|
}, |
||||
|
fileTypes: { |
||||
|
type: Array, |
||||
|
default: null |
||||
|
}, |
||||
|
maxSize: { |
||||
|
type: Number, |
||||
|
default: null |
||||
|
}, |
||||
|
showLoading: { |
||||
|
type: Boolean, |
||||
|
default: false |
||||
|
} |
||||
|
}, |
||||
|
methods: { |
||||
|
handleSuccess(res, file) { |
||||
|
this.loading && this.loading.close(); |
||||
|
if (res.code == 200) { |
||||
|
this.$emit("success", res, file); |
||||
|
}else{ |
||||
|
this.$message.error(res.message); |
||||
|
this.$emit("fail", res, file); |
||||
|
} |
||||
|
}, |
||||
|
beforeUpload(file) { |
||||
|
// 校验文件类型 |
||||
|
let fileType = file.type; |
||||
|
let t = this.fileTypes.find((t) => t.toLowerCase() === fileType); |
||||
|
console.log(t); |
||||
|
if (t === undefined) { |
||||
|
this.$message.error(`文件格式错误，请上传以下格式的文件：${this.fileTypes.join("、")}`); |
||||
|
return false; |
||||
|
} |
||||
|
// 校验大小 |
||||
|
let size = file.size; |
||||
|
if (size > this.maxSize) { |
||||
|
this.$message.error(`文件大小不能超过 ${this.fileSizeStr}!`); |
||||
|
return false; |
||||
|
} |
||||
|
|
||||
|
if (this.showLoading) { |
||||
|
this.loading = this.$loading({ |
||||
|
lock: true, |
||||
|
text: '正在上传...', |
||||
|
spinner: 'el-icon-loading', |
||||
|
background: 'rgba(0, 0, 0, 0.7)' |
||||
|
}); |
||||
|
} |
||||
|
this.$emit("before", file); |
||||
|
return true; |
||||
|
} |
||||
|
}, |
||||
|
computed: { |
||||
|
fileSizeStr() { |
||||
|
if (this.maxSize > 1024 * 1024) { |
||||
|
return (this.maxSize / 1024 / 1024) + "M"; |
||||
|
} |
||||
|
if (this.maxSize > 1024) { |
||||
|
return (this.maxSize / 1024) + "KB"; |
||||
|
} |
||||
|
return this.maxSize + "B"; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
</style> |
||||
@ -0,0 +1,54 @@ |
|||||
|
<template> |
||||
|
<div class='img-box'> |
||||
|
<img :src="url" |
||||
|
style="width: 100%;height: 100%;cursor: pointer;" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: "headImage", |
||||
|
data() { |
||||
|
return { |
||||
|
} |
||||
|
}, |
||||
|
methods:{ |
||||
|
}, |
||||
|
props: { |
||||
|
size: { |
||||
|
type: Number, |
||||
|
default: 50 |
||||
|
}, |
||||
|
url:{ |
||||
|
type: String |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
.img-box { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: inline-block; |
||||
|
border-radius: 3px; |
||||
|
background-color: #c0c4cc; |
||||
|
overflow: hidden; |
||||
|
|
||||
|
img { |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
img:before { |
||||
|
|
||||
|
content: ''; |
||||
|
display: block; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background:url('../../assets/default_head.png') no-repeat 0 0; |
||||
|
background-size: 100%; |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,119 +1,119 @@ |
|||||
<template> |
<template> |
||||
<el-dialog title="添加好友" :visible.sync="dialogVisible" width="350px" :before-close="onClose"> |
<el-dialog title="添加好友" :visible.sync="dialogVisible" width="350px" :before-close="onClose"> |
||||
<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()"> |
<el-input width="200px" placeholder="搜索好友" class="input-with-select" v-model="searchText" @keyup.enter.native="onSearch()"> |
||||
<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button> |
<el-button slot="append" icon="el-icon-search" @click="onSearch()"></el-button> |
||||
</el-input> |
</el-input> |
||||
<el-scrollbar style="height:400px"> |
<el-scrollbar style="height:400px"> |
||||
<div v-for="(userInfo) in users" :key="userInfo.id"> |
<div v-for="(userInfo) in users" :key="userInfo.id"> |
||||
<div class="item"> |
<div class="item"> |
||||
<div class="avatar"> |
<div class="avatar"> |
||||
<head-image :url="userInfo.headImage"></head-image> |
<head-image :url="userInfo.headImage"></head-image> |
||||
</div> |
</div> |
||||
<div class="add-friend-text"> |
<div class="add-friend-text"> |
||||
<div>{{userInfo.nickName}}</div> |
<div>{{userInfo.nickName}}</div> |
||||
<div :class="userInfo.online ? 'online-status online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div> |
<div :class="userInfo.online ? 'online-status online':'online-status'">{{ userInfo.online?"[在线]":"[离线]"}}</div> |
||||
</div> |
</div> |
||||
<el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriends(userInfo)">添加</el-button> |
<el-button type="success" v-show="!isFriend(userInfo.id)" plain @click="onAddFriends(userInfo)">添加</el-button> |
||||
<el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button> |
<el-button type="info" v-show="isFriend(userInfo.id)" plain disabled>已添加</el-button> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</el-scrollbar> |
</el-scrollbar> |
||||
</el-dialog> |
</el-dialog> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HeadImage from './HeadImage.vue' |
import HeadImage from '../common/HeadImage.vue' |
||||
|
|
||||
|
|
||||
export default { |
export default { |
||||
name: "addFriends", |
name: "addFriends", |
||||
components:{HeadImage}, |
components:{HeadImage}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
users: [], |
users: [], |
||||
searchText: "" |
searchText: "" |
||||
} |
} |
||||
}, |
}, |
||||
props: { |
props: { |
||||
dialogVisible: { |
dialogVisible: { |
||||
type: Boolean |
type: Boolean |
||||
} |
} |
||||
}, |
}, |
||||
methods: { |
methods: { |
||||
onClose() { |
onClose() { |
||||
this.$emit("close"); |
this.$emit("close"); |
||||
}, |
}, |
||||
onSearch() { |
onSearch() { |
||||
this.$http({ |
this.$http({ |
||||
url: "/api/user/findByNickName", |
url: "/api/user/findByNickName", |
||||
method: "get", |
method: "get", |
||||
params: { |
params: { |
||||
nickName: this.searchText |
nickName: this.searchText |
||||
} |
} |
||||
}).then((data) => { |
}).then((data) => { |
||||
this.users = data; |
this.users = data; |
||||
}) |
}) |
||||
}, |
}, |
||||
onAddFriends(userInfo){ |
onAddFriends(userInfo){ |
||||
this.$http({ |
this.$http({ |
||||
url: "/api/friends/add", |
url: "/api/friends/add", |
||||
method: "post", |
method: "post", |
||||
params: { |
params: { |
||||
friendId: userInfo.id |
friendId: userInfo.id |
||||
} |
} |
||||
}).then((data) => { |
}).then((data) => { |
||||
this.$store.commit("") |
this.$store.commit("") |
||||
this.$message.success("添加成功，对方已成为您的好友"); |
this.$message.success("添加成功，对方已成为您的好友"); |
||||
let friendsInfo = { |
let friendsInfo = { |
||||
friendId:userInfo.id, |
friendId:userInfo.id, |
||||
friendNickName: userInfo.nickName, |
friendNickName: userInfo.nickName, |
||||
friendHeadImage: userInfo.headImage, |
friendHeadImage: userInfo.headImage, |
||||
online: userInfo.online |
online: userInfo.online |
||||
} |
} |
||||
this.$store.commit("addFriends",friendsInfo); |
this.$store.commit("addFriends",friendsInfo); |
||||
|
|
||||
}) |
}) |
||||
}, |
}, |
||||
isFriend(userId){ |
isFriend(userId){ |
||||
let friendList = this.$store.state.friendsStore.friendsList; |
let friendList = this.$store.state.friendsStore.friendsList; |
||||
let friend = friendList.find((f)=> f.friendId==userId); |
let friend = friendList.find((f)=> f.friendId==userId); |
||||
return friend != undefined; |
return friend != undefined; |
||||
} |
} |
||||
}, |
}, |
||||
|
|
||||
mounted() { |
mounted() { |
||||
this.onSearch(); |
this.onSearch(); |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scoped lang="scss"> |
<style scoped lang="scss"> |
||||
|
|
||||
.item { |
.item { |
||||
height: 80px; |
height: 80px; |
||||
display: flex; |
display: flex; |
||||
position: relative; |
position: relative; |
||||
padding-left: 15px; |
padding-left: 15px; |
||||
align-items: center; |
align-items: center; |
||||
padding-right: 25px; |
padding-right: 25px; |
||||
|
|
||||
.add-friend-text { |
.add-friend-text { |
||||
margin-left: 15px; |
margin-left: 15px; |
||||
line-height: 80px; |
line-height: 80px; |
||||
flex: 3; |
flex: 3; |
||||
display: flex; |
display: flex; |
||||
flex-direction: row; |
flex-direction: row; |
||||
height: 100%; |
height: 100%; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
overflow: hidden; |
overflow: hidden; |
||||
|
|
||||
.online-status{ |
.online-status{ |
||||
font-size: 12px; |
font-size: 12px; |
||||
font-weight: 600; |
font-weight: 600; |
||||
&.online{ |
&.online{ |
||||
color: #5fb878; |
color: #5fb878; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</style> |
</style> |
||||
@ -1,114 +1,114 @@ |
|||||
<template> |
<template> |
||||
<div class="item" :class="active ? 'active' : ''"> |
<div class="item" :class="active ? 'active' : ''"> |
||||
<div class="avatar"> |
<div class="avatar"> |
||||
<head-image :url="friendsInfo.friendHeadImage" > </head-image> |
<head-image :url="friendsInfo.friendHeadImage" > </head-image> |
||||
</div> |
</div> |
||||
<div class="text"> |
<div class="text"> |
||||
<div>{{ friendsInfo.friendNickName}}</div> |
<div>{{ friendsInfo.friendNickName}}</div> |
||||
<div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</div> |
<div :class="online ? 'online-status online':'online-status'">{{ online?"[在线]":"[离线]"}}</div> |
||||
</div> |
</div> |
||||
<div class="close" @click.stop="$emit('del',friendsInfo,index)"> |
<div class="close" @click.stop="$emit('del',friendsInfo,index)"> |
||||
<i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i> |
<i class="el-icon-close" style="border: none; font-size: 20px;color: black;" title="添加好友"></i> |
||||
</div> |
</div> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
import HeadImage from './HeadImage.vue'; |
import HeadImage from '../common/HeadImage.vue'; |
||||
|
|
||||
export default { |
export default { |
||||
name: "frinedsItem", |
name: "frinedsItem", |
||||
components: {HeadImage}, |
components: {HeadImage}, |
||||
data() { |
data() { |
||||
return { |
return { |
||||
} |
} |
||||
}, |
}, |
||||
props: { |
props: { |
||||
friendsInfo: { |
friendsInfo: { |
||||
type: Object |
type: Object |
||||
}, |
}, |
||||
active:{ |
active:{ |
||||
type: Boolean |
type: Boolean |
||||
}, |
}, |
||||
index:{ |
index:{ |
||||
type: Number |
type: Number |
||||
} |
} |
||||
}, |
}, |
||||
computed:{ |
computed:{ |
||||
online(){ |
online(){ |
||||
return this.$store.state.friendsStore.friendsList[this.index].online; |
return this.$store.state.friendsStore.friendsList[this.index].online; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
</script> |
</script> |
||||
|
|
||||
<style scope lang="scss"> |
<style scope lang="scss"> |
||||
.item { |
.item { |
||||
height: 65px; |
height: 65px; |
||||
display: flex; |
display: flex; |
||||
margin-bottom: 1px; |
margin-bottom: 1px; |
||||
position: relative; |
position: relative; |
||||
padding-left: 15px; |
padding-left: 15px; |
||||
align-items: center; |
align-items: center; |
||||
padding-right: 5px; |
padding-right: 5px; |
||||
background-color: #eeeeee; |
background-color: #eeeeee; |
||||
&:hover { |
&:hover { |
||||
background-color: #dddddd; |
background-color: #dddddd; |
||||
} |
} |
||||
|
|
||||
&.active{ |
&.active{ |
||||
background-color: #cccccc; |
background-color: #cccccc; |
||||
} |
} |
||||
|
|
||||
|
|
||||
.close { |
.close { |
||||
width: 1.5rem; |
width: 1.5rem; |
||||
height: 1.5rem; |
height: 1.5rem; |
||||
right: 10px; |
right: 10px; |
||||
top: 1.825rem; |
top: 1.825rem; |
||||
cursor: pointer; |
cursor: pointer; |
||||
display: none; |
display: none; |
||||
} |
} |
||||
|
|
||||
&:hover { |
&:hover { |
||||
.close { |
.close { |
||||
display: block; |
display: block; |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.avatar { |
.avatar { |
||||
display: flex; |
display: flex; |
||||
justify-content: center; |
justify-content: center; |
||||
align-items: center; |
align-items: center; |
||||
width: 45px; |
width: 45px; |
||||
height: 45px; |
height: 45px; |
||||
} |
} |
||||
|
|
||||
.text { |
.text { |
||||
margin-left: 15px; |
margin-left: 15px; |
||||
flex: 3; |
flex: 3; |
||||
display: flex; |
display: flex; |
||||
flex-direction: column; |
flex-direction: column; |
||||
justify-content: space-around; |
justify-content: space-around; |
||||
height: 100%; |
height: 100%; |
||||
flex-shrink: 0; |
flex-shrink: 0; |
||||
overflow: hidden; |
overflow: hidden; |
||||
&>div { |
&>div { |
||||
display: flex; |
display: flex; |
||||
justify-content: flex-start; |
justify-content: flex-start; |
||||
} |
} |
||||
|
|
||||
.online-status{ |
.online-status{ |
||||
font-size: 12px; |
font-size: 12px; |
||||
font-weight: 600; |
font-weight: 600; |
||||
&.online{ |
&.online{ |
||||
color: #5fb878; |
color: #5fb878; |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
} |
} |
||||
|
|
||||
.active { |
.active { |
||||
background-color: #eeeeee; |
background-color: #eeeeee; |
||||
} |
} |
||||
</style> |
</style> |
||||
Loading…
Reference in new issue