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> |
|
||||
@ -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> |
||||
Loading…
Reference in new issue