106 lines
2.4 KiB
Vue
106 lines
2.4 KiB
Vue
|
<template>
|
||
|
|
<div class="message-send">
|
||
|
|
<div class="msg-content">
|
||
|
|
<el-input type="textarea" rows="5" placeholder="文本输入区" />
|
||
|
|
<el-upload
|
||
|
|
class="avatar-uploader"
|
||
|
|
:headers="headers"
|
||
|
|
action="/admin/common/file/upload"
|
||
|
|
:show-file-list="false"
|
||
|
|
:on-success="handleAvatarSuccess"
|
||
|
|
:before-upload="beforeAvatarUpload"
|
||
|
|
>
|
||
|
|
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
|
|
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
|
|
</el-upload>
|
||
|
|
</div>
|
||
|
|
<div class="msg-opt">
|
||
|
|
<el-checkbox v-model="checked">设为精选</el-checkbox>
|
||
|
|
<el-dropdown split-button type="primary" @click="handleClick">
|
||
|
|
发送并推送
|
||
|
|
<el-dropdown-menu slot="dropdown">
|
||
|
|
<el-dropdown-item>仅发送</el-dropdown-item>
|
||
|
|
<el-dropdown-item>定时发送</el-dropdown-item>
|
||
|
|
</el-dropdown-menu>
|
||
|
|
</el-dropdown>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<script>
|
||
|
|
import { getToken } from "@/utils/auth";
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
headers: {
|
||
|
|
Authorization: "Bearer " + getToken(),
|
||
|
|
"X-File-Size": 0
|
||
|
|
},
|
||
|
|
imageUrl: ""
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
handleAvatarSuccess(res, file) {
|
||
|
|
this.imageUrl = res.data.url;
|
||
|
|
},
|
||
|
|
beforeAvatarUpload(file) {
|
||
|
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||
|
|
|
||
|
|
if (file.type !== "image/jpeg" && file.type !== "image/png") {
|
||
|
|
this.$message.error("上传只支持jpeg格式和png格式!");
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if (!isLt2M) {
|
||
|
|
this.$message.error("上传头像图片大小不能超过 2MB!");
|
||
|
|
return flase;
|
||
|
|
}
|
||
|
|
return true;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
.message-send {
|
||
|
|
padding-top: 10px;
|
||
|
|
}
|
||
|
|
.avatar-uploader ::v-deep .el-upload {
|
||
|
|
border: 1px dashed #d9d9d9;
|
||
|
|
border-radius: 6px;
|
||
|
|
cursor: pointer;
|
||
|
|
position: relative;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
.avatar-uploader .el-upload:hover {
|
||
|
|
border-color: #409eff;
|
||
|
|
}
|
||
|
|
.avatar-uploader-icon {
|
||
|
|
font-size: 28px;
|
||
|
|
color: #8c939d;
|
||
|
|
width: 116px;
|
||
|
|
height: 116px;
|
||
|
|
line-height: 116px;
|
||
|
|
text-align: center;
|
||
|
|
}
|
||
|
|
.avatar {
|
||
|
|
width: 116px;
|
||
|
|
height: 116px;
|
||
|
|
display: block;
|
||
|
|
}
|
||
|
|
.msg-content {
|
||
|
|
display: flex;
|
||
|
|
::v-deep .el-upload--picture-card {
|
||
|
|
width: 116px;
|
||
|
|
height: 116px;
|
||
|
|
line-height: 116px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.msg-opt {
|
||
|
|
display: flex;
|
||
|
|
justify-content: end;
|
||
|
|
align-items: center;
|
||
|
|
margin-top: 10px;
|
||
|
|
::v-deep .el-checkbox {
|
||
|
|
margin-right: 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|