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